Update app.js

app.js

@@ -1,94 +1,190 @@
 // ==UserScript==
-// @name         Spotify Enhanced UI/UX with Audio Visualizer
+// @name         Spotify Ultimate Mobile UI/UX Enhancer
 // @namespace    https://violentmonkey.github.io/
-// @version      2.1
-// @description  Transforms Spotify web player with dynamic animations, stylish UI enhancements, and a mesmerizing audio visualizer
-// @author       UI/UX Designer
+// @version      3.0
+// @description  Transforms Spotify web player with stunning animations, advanced audio visualizer, and mobile-optimized UX that surpasses the native app
+// @author       UX Designer
 // @match        https://open.spotify.com/*
 // @icon         https://www.spotify.com/favicon.ico
 // @grant        GM_addStyle
 // @grant        GM_getValue
 // @grant        GM_setValue
 // @run-at       document-start
-// @updateURL    https://github.com/user/spotify-enhanced/raw/main/script.user.js
-// @downloadURL  https://github.com/user/spotify-enhanced/raw/main/script.user.js
 // ==/UserScript==
 
 (function() {
     'use strict';
 
-    // Wait for DOM to be fully loaded
-    if (document.readyState !== 'complete') {
-        window.addEventListener('load', initEnhancedSpotify);
-    } else {
-        initEnhancedSpotify();
-    }
+    // Feature detection and initialization
+    const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
+                    (window.innerWidth < 768);
+    
+    // Mobile-specific features
+    const mobileFeatures = {
+        gesturesEnabled: true,
+        hapticFeedback: true,
+        adaptiveLayout: true,
+        touchOptimized: true,
+        swipeNavigation: true,
+        pullToRefresh: true
+    };
 
+    // Initialize the enhanced UI
     function initEnhancedSpotify() {
-        // Create style element for custom CSS
+        // Create style element
         const style = document.createElement('style');
-        style.textContent = `
-            /* Global UI Enhancements */
+        style.textContent = getCSSStyles();
+        document.head.appendChild(style);
+
+        // Create visualizer container
+        createVisualizerContainer();
+
+        // Setup mobile gestures
+        if (isMobile && mobileFeatures.gesturesEnabled) {
+            setupMobileGestures();
+        }
+
+        // Setup audio analysis
+        setupAudioAnalysis();
+
+        // Apply UI enhancements
+        applyUIEnhancements();
+
+        // Setup responsive adjustments
+        setupResponsiveAdjustments();
+
+        console.log('✨ Spotify Ultimate Mobile UI/UX Enhancer loaded successfully!');
+        console.log(`📱 Mobile Mode: ${isMobile ? 'Enabled' : 'Disabled'}`);
+    }
+
+    // Get CSS styles with mobile optimization
+    function getCSSStyles() {
+        return `
+            /* Mobile-first base styles */
             :root {
                 --primary-gradient: linear-gradient(45deg, #1DB954, #1ED760, #00ffcc);
                 --secondary-gradient: linear-gradient(45deg, #8A2BE2, #9370DB, #BA55D3);
+                --accent-gradient: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc);
                 --glow-color: rgba(0, 255, 204, 0.7);
+                --mobile-radius: 24px;
+                --desktop-radius: 12px;
                 --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                 --transition-normal: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
                 --transition-slow: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+                --ease-out-back: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+                --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
+                --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.2);
+                --shadow-lg: 0 8px 30px rgba(0, 255, 204, 0.4);
+                --shadow-glow: 0 0 20px rgba(0, 255, 204, 0.5);
+            }
+
+            /* Mobile optimization */
+            @media (max-width: 768px) {
+                :root {
+                    --mobile-radius: 28px;
+                    --desktop-radius: 16px;
+                }
             }
 
-            /* Enhanced buttons */
+            /* Global enhancements */
+            * {
+                transition: var(--transition-fast);
+            }
+
+            /* Enhanced buttons - mobile optimized */
             button, .Button-sc-1dqy6sn-0, .ButtonInner-sc-1dqy6sn-1 {
                 transition: var(--transition-normal) !important;
                 transform: scale(1) !important;
                 background: var(--primary-gradient) !important;
                 background-size: 200% 200% !important;
                 animation: gradientBG 3s ease infinite !important;
-                box-shadow: 0 4px 15px rgba(0, 255, 204, 0.3) !important;
+                box-shadow: var(--shadow-sm) !important;
                 border: none !important;
+                border-radius: 16px !important;
+                padding: 8px 16px !important;
+                font-weight: 600 !important;
+                will-change: transform, box-shadow !important;
+            }
+
+            button:active, .Button-sc-1dqy6sn-0:active, .ButtonInner-sc-1dqy6sn-1:active {
+                transform: scale(0.95) !important;
+                box-shadow: 0 2px 6px rgba(0, 255, 204, 0.3) !important;
             }
 
             button:hover, .Button-sc-1dqy6sn-0:hover, .ButtonInner-sc-1dqy6sn-1:hover {
-                transform: scale(1.08) !important;
-                box-shadow: 0 6px 25px rgba(0, 255, 204, 0.5) !important;
+                transform: scale(1.05) !important;
+                box-shadow: var(--shadow-md) !important;
                 filter: brightness(1.1) !important;
             }
 
-            /* Card hover effects */
-            .Card-sc-1uyc430-0, .main-card-card {
-                transition: var(--transition-normal) !important;
+            /* Play button pulse */
+            .Button-sc-1dqy6sn-0.Lsg1a0PdZMXQ3vQZlE0_M {
+                animation: pulse 2s infinite !important;
+                position: relative !important;
+                z-index: 10 !important;
+                box-shadow: 0 0 0 rgba(0, 255, 204, 0.4) !important;
+                animation-name: pulse, gradientBG !important;
+                animation-duration: 2s, 3s !important;
+                animation-timing-function: ease, ease !important;
+                animation-iteration-count: infinite, infinite !important;
+            }
+
+            /* Card enhancements with mobile radius */
+            .Card-sc-1uyc430-0, .main-card-card, .main-shelf-shelf {
+                transition: var(--ease-out-back) !important;
                 transform: translateY(0) !important;
-                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
-                border-radius: 12px !important;
+                box-shadow: var(--shadow-sm) !important;
+                border-radius: var(--mobile-radius) !important;
                 overflow: hidden !important;
+                margin: 8px 0 !important;
+                will-change: transform, box-shadow !important;
+                background: rgba(255, 255, 255, 0.05) !important;
+                backdrop-filter: blur(10px) !important;
+                border: 1px solid rgba(255, 255, 255, 0.1) !important;
             }
 
-            .Card-sc-1uyc430-0:hover, .main-card-card:hover {
+            .Card-sc-1uyc430-0:hover, .main-card-card:hover, .main-shelf-shelf:hover {
                 transform: translateY(-8px) !important;
-                box-shadow: 0 12px 30px rgba(0, 255, 204, 0.4) !important;
+                box-shadow: var(--shadow-lg) !important;
                 z-index: 100 !important;
+                background: rgba(255, 255, 255, 0.08) !important;
             }
 
-            /* Album art effects */
-            .cover-art-image {
-                transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
-                            box-shadow 0.4s ease !important;
+            /* Album art with mobile optimization */
+            .cover-art-image, .main-image-image {
+                transition: var(--ease-out-back) !important;
                 transform-origin: center !important;
+                border-radius: var(--mobile-radius) !important;
+                overflow: hidden !important;
+                will-change: transform, box-shadow !important;
             }
 
-            .cover-art-image:hover {
-                transform: scale(1.15) rotate(3deg) !important;
-                box-shadow: 0 0 30px rgba(0, 255, 204, 0.6) !important;
+            .cover-art-image:hover, .main-image-image:hover {
+                transform: scale(1.12) rotate(2deg) !important;
+                box-shadow: var(--shadow-glow) !important;
                 z-index: 1000 !important;
             }
 
-            /* Now playing bar enhancements */
-            .now-playing-bar {
+            /* Mobile touch feedback */
+            [role="button"], [role="link"], .main-trackList-row {
+                touch-action: manipulation !important;
+                -webkit-tap-highlight-color: transparent !important;
+            }
+
+            [role="button"]:active, [role="link"]:active, .main-trackList-row:active {
+                transform: scale(0.98) !important;
+                opacity: 0.9 !important;
+            }
+
+            /* Now playing bar - mobile enhanced */
+            .now-playing-bar, .playback-bar {
                 transition: var(--transition-slow) !important;
-                background: rgba(0, 0, 0, 0.8) !important;
-                backdrop-filter: blur(10px) !important;
+                background: rgba(0, 0, 0, 0.9) !important;
+                backdrop-filter: blur(15px) !important;
                 border-top: 1px solid rgba(0, 255, 204, 0.3) !important;
+                padding: 8px !important;
+                border-radius: var(--mobile-radius) var(--mobile-radius) 0 0 !important;
+                margin-bottom: env(safe-area-inset-bottom) !important;
             }
 
             .now-playing-bar:hover {
@@ -96,27 +192,36 @@
                 box-shadow: 0 -10px 30px rgba(0, 255, 204, 0.3) !important;
             }
 
-            /* Visualizer container */
+            /* Visualizer container - mobile responsive */
             #visualizer-container {
                 position: fixed;
                 bottom: 0;
                 left: 0;
                 right: 0;
-                height: 80px;
-                background: rgba(0, 0, 0, 0.7);
-                backdrop-filter: blur(5px);
+                height: 120px;
+                background: rgba(0, 0, 0, 0.85);
+                backdrop-filter: blur(15px);
                 z-index: 9999;
                 display: flex;
+                flex-direction: column;
                 justify-content: center;
                 align-items: center;
-                padding: 0 20px;
+                padding: 0 16px;
                 border-top: 1px solid rgba(0, 255, 204, 0.3);
-                opacity: 0.9;
-                transition: opacity 0.3s ease;
+                opacity: 0.95;
+                transition: var(--transition-normal);
+                transform: translateY(0);
+                padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
             }
 
-            #visualizer-container:hover {
-                opacity: 1;
+            #visualizer-container.minimized {
+                height: 60px;
+            }
+
+            #visualizer-container.collapsed {
+                transform: translateY(100%);
+                opacity: 0;
+                pointer-events: none;
             }
 
             /* Visualizer canvas */
@@ -124,73 +229,80 @@
                 width: 100%;
                 height: 60px;
                 display: block;
+                border-radius: 12px;
+                overflow: hidden;
             }
 
-            /* Visualizer control buttons */
+            /* Mobile controls */
             .visualizer-controls {
                 position: absolute;
-                bottom: 5px;
-                right: 10px;
+                bottom: calc(env(safe-area-inset-bottom) + 16px);
+                right: 16px;
                 display: flex;
-                gap: 8px;
+                gap: 12px;
                 z-index: 10000;
+                flex-direction: row;
             }
 
             .visualizer-btn {
-                width: 28px;
-                height: 28px;
-                border-radius: 50%;
+                width: 48px;
+                height: 48px;
+                border-radius: 24px;
                 background: rgba(255, 255, 255, 0.1);
-                border: 1px solid rgba(0, 255, 204, 0.5);
+                border: 2px solid rgba(0, 255, 204, 0.5);
                 color: white;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 cursor: pointer;
-                font-size: 12px;
+                font-size: 18px;
                 transition: all 0.2s ease;
+                touch-action: manipulation;
+                -webkit-tap-highlight-color: transparent;
+            }
+
+            .visualizer-btn:active {
+                transform: scale(0.9);
+                background: rgba(0, 255, 204, 0.2);
             }
 
             .visualizer-btn:hover {
-                background: rgba(0, 255, 204, 0.3);
-                transform: scale(1.1);
+                background: rgba(0, 255, 204, 0.25);
+                transform: scale(1.05);
             }
 
-            /* Progress bar enhancements */
-            .progress-bar {
-                height: 4px !important;
-                background: rgba(255, 255, 255, 0.2) !important;
-                border-radius: 2px !important;
+            /* Progress bar mobile optimization */
+            .progress-bar, .volume-bar {
+                height: 6px !important;
+                background: rgba(255, 255, 255, 0.15) !important;
+                border-radius: 3px !important;
                 overflow: hidden !important;
                 position: relative !important;
+                touch-action: manipulation !important;
             }
 
-            .progress-bar__slider {
-                width: 14px !important;
-                height: 14px !important;
-                background: var(--primary-gradient) !important;
-                border: 2px solid white !important;
-                box-shadow: 0 0 10px var(--glow-color) !important;
+            .progress-bar__slider, .volume-bar__slider {
+                width: 24px !important;
+                height: 24px !important;
+                background: var(--accent-gradient) !important;
+                border: 3px solid white !important;
+                box-shadow: 0 0 15px var(--glow-color) !important;
                 transition: all 0.2s ease !important;
+                touch-action: manipulation !important;
             }
 
-            .progress-bar__slider:hover {
-                transform: scale(1.5) !important;
-                box-shadow: 0 0 20px var(--glow-color) !important;
+            .progress-bar__slider:active, .volume-bar__slider:active {
+                transform: scale(1.3) !important;
+                box-shadow: 0 0 25px var(--glow-color) !important;
             }
 
-            /* Volume slider */
-            .volume-bar {
-                height: 4px !important;
-                background: rgba(255, 255, 255, 0.2) !important;
-                border-radius: 2px !important;
-            }
-
-            .volume-bar__slider {
-                width: 12px !important;
-                height: 12px !important;
-                background: var(--primary-gradient) !important;
-                box-shadow: 0 0 8px var(--glow-color) !important;
+            /* Mobile navigation enhancements */
+            .main-navBar-navBar, .main-buddyFeed-buddyFeed {
+                background: rgba(0, 0, 0, 0.7) !important;
+                backdrop-filter: blur(10px) !important;
+                border-radius: var(--desktop-radius) !important;
+                margin: 8px !important;
+                border: 1px solid rgba(255, 255, 255, 0.1) !important;
             }
 
             /* Text animations */
@@ -205,10 +317,103 @@
 
             /* Gradient text */
             .glow-text {
-                background: var(--primary-gradient);
+                background: var(--accent-gradient);
                 -webkit-background-clip: text;
                 -webkit-text-fill-color: transparent;
                 text-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
+                background-size: 200% 200%;
+                animation: gradientText 3s ease infinite;
+            }
+
+            /* Mobile gesture indicators */
+            .gesture-indicator {
+                position: fixed;
+                bottom: 20%;
+                left: 50%;
+                transform: translateX(-50%);
+                color: rgba(0, 255, 204, 0.8);
+                font-size: 14px;
+                padding: 8px 16px;
+                background: rgba(0, 0, 0, 0.7);
+                border-radius: 20px;
+                backdrop-filter: blur(5px);
+                opacity: 0;
+                transition: opacity 0.3s ease;
+                pointer-events: none;
+                z-index: 9999;
+            }
+
+            /* Mobile swipe areas */
+            .swipe-area {
+                position: fixed;
+                height: 100%;
+                width: 60px;
+                z-index: 9998;
+                touch-action: none;
+            }
+
+            .swipe-area.left {
+                left: 0;
+                background: linear-gradient(to right, rgba(0, 255, 204, 0.1) 0%, transparent 100%);
+            }
+
+            .swipe-area.right {
+                right: 0;
+                background: linear-gradient(to left, rgba(0, 255, 204, 0.1) 0%, transparent 100%);
+            }
+
+            /* Pulsing indicator for interactive elements */
+            .pulse-indicator {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                border-radius: inherit;
+                background: radial-gradient(circle, rgba(0, 255, 204, 0.4) 0%, transparent 70%);
+                opacity: 0;
+                pointer-events: none;
+                animation: pulseIndicator 0.6s ease-out;
+            }
+
+            /* Fullscreen visualizer overlay */
+            #fullscreen-visualizer-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.95);
+                backdrop-filter: blur(5px);
+                z-index: 99999;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                opacity: 0;
+                transform: scale(0.9);
+                transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+                pointer-events: none;
+                padding: 20px;
+            }
+
+            #fullscreen-visualizer-overlay.active {
+                opacity: 1;
+                transform: scale(1);
+                pointer-events: all;
+            }
+
+            #fullscreen-visualizer {
+                width: 100%;
+                max-width: 800px;
+                height: 60vh;
+                border-radius: 24px;
+                overflow: hidden;
+                box-shadow: 0 0 50px rgba(0, 255, 204, 0.5);
+            }
+
+            .fullscreen-controls {
+                margin-top: 20px;
+                display: flex;
+                gap: 15px;
             }
 
             /* Keyframes */
@@ -218,91 +423,301 @@
                 100% { background-position: 0% 50% }
             }
 
+            @keyframes gradientText {
+                0% { background-position: 0% 50% }
+                50% { background-position: 100% 50% }
+                100% { background-position: 0% 50% }
+            }
+
             @keyframes pulse {
                 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 204, 0.4); }
-                70% { transform: scale(1.02); box-shadow: 0 0 0 12px rgba(0, 255, 204, 0); }
+                70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(0, 255, 204, 0); }
                 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 204, 0); }
             }
 
+            @keyframes pulseIndicator {
+                0% { transform: scale(0.8); opacity: 0.7; }
+                100% { transform: scale(1.2); opacity: 0; }
+            }
+
             @keyframes fadeIn {
                 from { opacity: 0; transform: translateY(10px); }
                 to { opacity: 1; transform: translateY(0); }
             }
 
-            /* Visualizer presets */
-            .visualizer-preset-selector {
-                position: absolute;
-                bottom: 5px;
-                left: 10px;
-                background: rgba(0, 0, 0, 0.7);
-                border: 1px solid rgba(0, 255, 204, 0.3);
-                border-radius: 20px;
-                padding: 2px;
-                display: flex;
-                gap: 2px;
+            @keyframes slideUp {
+                from { transform: translateY(100%); opacity: 0; }
+                to { transform: translateY(0); opacity: 1; }
             }
 
-            .preset-btn {
-                width: 20px;
-                height: 20px;
-                border-radius: 50%;
-                cursor: pointer;
-                transition: all 0.2s ease;
-                border: 2px solid transparent;
+            /* Mobile-specific animations */
+            .mobile-enter {
+                animation: slideUp 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
             }
 
-            .preset-btn.active {
-                border-color: white;
-                transform: scale(1.1);
+            /* Dark mode optimization */
+            @media (prefers-color-scheme: dark) {
+                .Card-sc-1uyc430-0, .main-card-card {
+                    background: rgba(30, 30, 30, 0.8) !important;
+                }
             }
-        `;
-        document.head.appendChild(style);
 
-        // Create visualizer container
-        createVisualizerContainer();
-
-        // Add UI enhancements
-        enhanceUIElements();
-
-        // Setup audio analysis
-        setupAudioAnalysis();
+            /* Reduce motion for accessibility */
+            @media (prefers-reduced-motion: reduce) {
+                * {
+                    transition: none !important;
+                    animation: none !important;
+                }
+                .Card-sc-1uyc430-0:hover, .main-card-card:hover {
+                    transform: none !important;
+                    box-shadow: var(--shadow-sm) !important;
+                }
+                .cover-art-image:hover, .main-image-image:hover {
+                    transform: none !important;
+                    box-shadow: none !important;
+                }
+            }
 
-        console.log('✨ Spotify Enhanced UI/UX with Audio Visualizer loaded successfully!');
+            /* Mobile viewport optimization */
+            @media (max-width: 480px) {
+                #visualizer-container {
+                    height: 100px;
+                    padding: 0 12px;
+                    padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
+                }
+                
+                .visualizer-btn {
+                    width: 42px;
+                    height: 42px;
+                    font-size: 16px;
+                }
+                
+                .progress-bar__slider, .volume-bar__slider {
+                    width: 22px !important;
+                    height: 22px !important;
+                }
+                
+                .main-type-element {
+                    font-size: 14px !important;
+                }
+            }
+        `;
     }
 
+    // Create visualizer container
     function createVisualizerContainer() {
         const container = document.createElement('div');
         container.id = 'visualizer-container';
+        container.className = isMobile ? 'mobile-enter' : '';
+
         container.innerHTML = `
             <canvas id="audio-visualizer"></canvas>
             <div class="visualizer-controls">
                 <div class="visualizer-btn" id="visualizer-toggle">❚❚</div>
                 <div class="visualizer-btn" id="visualizer-fullscreen">⛶</div>
+                <div class="visualizer-btn" id="visualizer-preset">🎨</div>
             </div>
-            <div class="visualizer-preset-selector">
-                <div class="preset-btn active" style="background: #1DB954;" data-preset="bars"></div>
-                <div class="preset-btn" style="background: #8A2BE2;" data-preset="wave"></div>
-                <div class="preset-btn" style="background: #FF4500;" data-preset="particles"></div>
-                <div class="preset-btn" style="background: #1E90FF;" data-preset="circular"></div>
+            <div class="gesture-indicator" id="gesture-indicator">Swipe up for more</div>
+        `;
+        
+        // Add swipe areas for mobile
+        if (isMobile && mobileFeatures.swipeNavigation) {
+            const leftSwipe = document.createElement('div');
+            leftSwipe.className = 'swipe-area left';
+            leftSwipe.id = 'left-swipe-area';
+            
+            const rightSwipe = document.createElement('div');
+            rightSwipe.className = 'swipe-area right';
+            rightSwipe.id = 'right-swipe-area';
+            
+            document.body.appendChild(leftSwipe);
+            document.body.appendChild(rightSwipe);
+        }
+
+        // Create fullscreen overlay
+        const fullscreenOverlay = document.createElement('div');
+        fullscreenOverlay.id = 'fullscreen-visualizer-overlay';
+        fullscreenOverlay.innerHTML = `
+            <canvas id="fullscreen-visualizer"></canvas>
+            <div class="fullscreen-controls">
+                <div class="visualizer-btn" id="fullscreen-close">✕</div>
+                <div class="visualizer-btn" id="fullscreen-preset">🎨</div>
             </div>
         `;
+        
         document.body.appendChild(container);
+        document.body.appendChild(fullscreenOverlay);
 
         // Setup event listeners
-        document.getElementById('visualizer-toggle').addEventListener('click', toggleVisualizer);
-        document.getElementById('visualizer-fullscreen').addEventListener('click', toggleFullscreenVisualizer);
-        
-        document.querySelectorAll('.preset-btn').forEach(btn => {
-            btn.addEventListener('click', function() {
-                document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
-                this.classList.add('active');
-                setCurrentPreset(this.dataset.preset);
-            });
+        setupVisualizerEvents();
+    }
+
+    // Setup visualizer events
+    function setupVisualizerEvents() {
+        // Minimize/maximize on tap (mobile)
+        document.getElementById('visualizer-container').addEventListener('click', (e) => {
+            if (isMobile && !e.target.closest('.visualizer-btn')) {
+                const container = document.getElementById('visualizer-container');
+                container.classList.toggle('minimized');
+                
+                // Show gesture indicator
+                const indicator = document.getElementById('gesture-indicator');
+                if (!container.classList.contains('minimized')) {
+                    indicator.style.opacity = '1';
+                    setTimeout(() => {
+                        indicator.style.opacity = '0';
+                    }, 2000);
+                }
+            }
+        }, { passive: true });
+
+        // Toggle visualizer
+        document.getElementById('visualizer-toggle').addEventListener('click', function() {
+            const container = document.getElementById('visualizer-container');
+            container.classList.toggle('collapsed');
+            this.textContent = container.classList.contains('collapsed') ? '▶️' : '❚❚';
         });
+
+        // Fullscreen visualizer
+        document.getElementById('visualizer-fullscreen').addEventListener('click', function() {
+            const overlay = document.getElementById('fullscreen-visualizer-overlay');
+            overlay.classList.add('active');
+            setupFullscreenVisualizer();
+        });
+
+        // Close fullscreen
+        document.getElementById('fullscreen-close').addEventListener('click', function() {
+            document.getElementById('fullscreen-visualizer-overlay').classList.remove('active');
+        });
+
+        // Preset cycling
+        let currentPreset = 0;
+        const presets = ['bars', 'wave', 'particles', 'circular'];
+        
+        document.getElementById('visualizer-preset').addEventListener('click', function() {
+            currentPreset = (currentPreset + 1) % presets.length;
+            setCurrentVisualizerPreset(presets[currentPreset]);
+            showMobileToast(`Visualizer: ${presets[currentPreset].charAt(0).toUpperCase() + presets[currentPreset].slice(1)}`);
+        });
+
+        document.getElementById('fullscreen-preset').addEventListener('click', function() {
+            currentPreset = (currentPreset + 1) % presets.length;
+            setCurrentVisualizerPreset(presets[currentPreset]);
+            showMobileToast(`Fullscreen: ${presets[currentPreset].charAt(0).toUpperCase() + presets[currentPreset].slice(1)}`);
+        });
+    }
+
+    // Setup mobile gestures
+    function setupMobileGestures() {
+        let startY = 0;
+        let currentY = 0;
+        let isSwiping = false;
+        
+        const container = document.getElementById('visualizer-container');
+        const indicator = document.getElementById('gesture-indicator');
+
+        // Touch start
+        container.addEventListener('touchstart', (e) => {
+            startY = e.touches[0].clientY;
+            currentY = startY;
+            isSwiping = true;
+            indicator.style.opacity = '0';
+        }, { passive: true });
+
+        // Touch move
+        container.addEventListener('touchmove', (e) => {
+            if (!isSwiping) return;
+            
+            currentY = e.touches[0].clientY;
+            const deltaY = currentY - startY;
+            
+            // Show indicator when swiping up
+            if (deltaY < -20 && !container.classList.contains('minimized')) {
+                indicator.style.opacity = '1';
+            } else if (deltaY > 20) {
+                indicator.style.opacity = '0';
+            }
+            
+            // Pull to refresh effect
+            if (mobileFeatures.pullToRefresh && deltaY > 0 && container.classList.contains('minimized')) {
+                container.style.transform = `translateY(${deltaY/3}px)`;
+            }
+        }, { passive: true });
+
+        // Touch end
+        container.addEventListener('touchend', (e) => {
+            if (!isSwiping) return;
+            
+            const deltaY = currentY - startY;
+            
+            // Swipe up to expand
+            if (deltaY < -50 && container.classList.contains('minimized')) {
+                container.classList.remove('minimized');
+                if (mobileFeatures.hapticFeedback) triggerHapticFeedback('light');
+            }
+            
+            // Swipe down to minimize
+            else if (deltaY > 50 && !container.classList.contains('minimized')) {
+                container.classList.add('minimized');
+                if (mobileFeatures.hapticFeedback) triggerHapticFeedback('light');
+            }
+            
+            // Pull to refresh
+            else if (mobileFeatures.pullToRefresh && deltaY > 100 && container.classList.contains('minimized')) {
+                showMobileToast('Refreshing...');
+                if (mobileFeatures.hapticFeedback) triggerHapticFeedback('medium');
+                setTimeout(() => {
+                    location.reload();
+                }, 1000);
+            }
+            
+            container.style.transform = '';
+            isSwiping = false;
+            setTimeout(() => {
+                indicator.style.opacity = '0';
+            }, 1000);
+        }, { passive: true });
+
+        // Swipe navigation
+        if (mobileFeatures.swipeNavigation) {
+            setupSwipeNavigation();
+        }
+    }
+
+    // Setup swipe navigation
+    function setupSwipeNavigation() {
+        let touchStartX = 0;
+        let touchEndX = 0;
+        
+        document.getElementById('left-swipe-area').addEventListener('touchstart', (e) => {
+            touchStartX = e.touches[0].clientX;
+        }, { passive: true });
+
+        document.getElementById('left-swipe-area').addEventListener('touchend', (e) => {
+            touchEndX = e.changedTouches[0].clientX;
+            if (touchStartX - touchEndX > 50) {
+                navigatePreviousTrack();
+                showMobileToast('⏮ Previous Track');
+                if (mobileFeatures.hapticFeedback) triggerHapticFeedback('light');
+            }
+        }, { passive: true });
+
+        document.getElementById('right-swipe-area').addEventListener('touchstart', (e) => {
+            touchStartX = e.touches[0].clientX;
+        }, { passive: true });
+
+        document.getElementById('right-swipe-area').addEventListener('touchend', (e) => {
+            touchEndX = e.changedTouches[0].clientX;
+            if (touchEndX - touchStartX > 50) {
+                navigateNextTrack();
+                showMobileToast('⏭ Next Track');
+                if (mobileFeatures.hapticFeedback) triggerHapticFeedback('light');
+            }
+        }, { passive: true });
     }
 
+    // Setup audio analysis
     function setupAudioAnalysis() {
-        // Get the audio element (Spotify uses audio elements dynamically)
         const observer = new MutationObserver(mutations => {
             mutations.forEach(mutation => {
                 if (mutation.addedNodes.length) {
@@ -320,7 +735,7 @@
             subtree: true
         });
 
-        // Fallback: check periodically if audio element appears
+        // Fallback check
         let audioCheckInterval = setInterval(() => {
             const audioElements = document.querySelectorAll('audio');
             if (audioElements.length > 0) {
@@ -331,6 +746,7 @@
         }, 1000);
     }
 
+    // Initialize visualizer
     function initializeVisualizer(audioElement) {
         const canvas = document.getElementById('audio-visualizer');
         const ctx = canvas.getContext('2d');
@@ -338,64 +754,47 @@
         
         // Set canvas dimensions
         function resizeCanvas() {
-            canvas.width = container.clientWidth - 40;
-            canvas.height = container.clientHeight - 20;
+            const dpr = window.devicePixelRatio || 1;
+            canvas.width = (container.clientWidth - 32) * dpr;
+            canvas.height = (container.clientHeight - 40) * dpr;
+            canvas.style.width = `${container.clientWidth - 32}px`;
+            canvas.style.height = `${container.clientHeight - 40}px`;
+            ctx.scale(dpr, dpr);
         }
         
         resizeCanvas();
         window.addEventListener('resize', resizeCanvas);
 
         // Create audio context and analyzer
-        let audioContext, analyzer, source;
-        
         try {
-            audioContext = new (window.AudioContext || window.webkitAudioContext)();
-            analyzer = audioContext.createAnalyser();
+            const AudioContext = window.AudioContext || window.webkitAudioContext;
+            const audioContext = new AudioContext();
+            const analyzer = audioContext.createAnalyser();
             analyzer.fftSize = 256;
             analyzer.smoothingTimeConstant = 0.8;
             
-            // Create source from audio element
-            source = audioContext.createMediaElementSource(audioElement);
+            const source = audioContext.createMediaElementSource(audioElement);
             source.connect(analyzer);
             analyzer.connect(audioContext.destination);
             
-            // Create buffer for frequency data
             const bufferLength = analyzer.frequencyBinCount;
             const dataArray = new Uint8Array(bufferLength);
             
-            // Visualizer settings
             let currentPreset = 'bars';
             let isPlaying = true;
-            let fullscreenMode = false;
+            let animationFrame;
             
-            function setCurrentPreset(preset) {
+            function setCurrentVisualizerPreset(preset) {
                 currentPreset = preset;
             }
-            
-            function toggleVisualizer() {
-                isPlaying = !isPlaying;
-                document.getElementById('visualizer-toggle').textContent = isPlaying ? '❚❚' : '▶️';
-            }
-            
-            function toggleFullscreenVisualizer() {
-                fullscreenMode = !fullscreenMode;
-                document.getElementById('visualizer-fullscreen').textContent = fullscreenMode ? '❐' : '⛶';
-                container.style.height = fullscreenMode ? '300px' : '80px';
-                container.style.opacity = fullscreenMode ? '0.95' : '0.9';
-                resizeCanvas();
-            }
 
-            // Animation function
-            function animate() {
+            function drawVisualizer() {
                 if (!isPlaying) {
-                    requestAnimationFrame(animate);
+                    animationFrame = requestAnimationFrame(drawVisualizer);
                     return;
                 }
 
-                requestAnimationFrame(animate);
-                
                 analyzer.getByteFrequencyData(dataArray);
-                
                 ctx.clearRect(0, 0, canvas.width, canvas.height);
                 
                 // Draw based on current preset
@@ -413,35 +812,48 @@
                         drawCircular(ctx, dataArray, canvas.width, canvas.height);
                         break;
                 }
+                
+                animationFrame = requestAnimationFrame(drawVisualizer);
             }
             
-            animate();
+            drawVisualizer();
             
+            // Cleanup on page unload
+            window.addEventListener('beforeunload', () => {
+                cancelAnimationFrame(animationFrame);
+                if (audioContext.state !== 'closed') {
+                    audioContext.close();
+                }
+            });
+
         } catch (error) {
             console.error('Error initializing audio visualizer:', error);
-            // Fallback visualizer if audio analysis fails
             createFallbackVisualizer(ctx, canvas.width, canvas.height);
         }
     }
 
+    // Draw different visualizer types
     function drawBars(ctx, dataArray, width, height) {
         const barWidth = (width / dataArray.length) * 2.5;
         let x = 0;
+        const centerY = height / 2;
         
         for (let i = 0; i < dataArray.length; i++) {
-            const barHeight = (dataArray[i] / 255) * height * 1.2;
+            const barHeight = (dataArray[i] / 255) * height * 0.8;
+            const hue = (i / dataArray.length) * 360;
             
-            // Gradient for bars
-            const gradient = ctx.createLinearGradient(0, height, 0, height - barHeight);
-            gradient.addColorStop(0, 'rgba(0, 255, 204, 0.3)');
-            gradient.addColorStop(1, 'rgba(0, 255, 204, 0.8)');
+            // Create gradient for each bar
+            const gradient = ctx.createLinearGradient(0, centerY + barHeight/2, 0, centerY - barHeight/2);
+            gradient.addColorStop(0, `hsla(${hue}, 80%, 40%, 0.3)`);
+            gradient.addColorStop(0.5, `hsla(${hue}, 100%, 60%, 0.8)`);
+            gradient.addColorStop(1, `hsla(${hue}, 80%, 40%, 0.3)`);
             
             ctx.fillStyle = gradient;
-            ctx.fillRect(x, height - barHeight, barWidth, barHeight);
+            ctx.fillRect(x, centerY - barHeight/2, barWidth, barHeight);
             
             // Glow effect
-            ctx.shadowColor = 'rgba(0, 255, 204, 0.7)';
-            ctx.shadowBlur = 15;
+            ctx.shadowColor = `hsla(${hue}, 100%, 60%, 0.7)`;
+            ctx.shadowBlur = 8;
             
             x += barWidth + 1;
         }
@@ -450,12 +862,15 @@
     }
 
     function drawWave(ctx, dataArray, width, height) {
+        const centerY = height / 2;
+        const amplitude = height * 0.4;
+        
         ctx.beginPath();
-        ctx.moveTo(0, height / 2);
+        ctx.moveTo(0, centerY);
         
         for (let i = 0; i < dataArray.length; i++) {
             const x = (i / dataArray.length) * width;
-            const y = height / 2 + ((dataArray[i] - 128) / 128) * (height / 3);
+            const y = centerY + ((dataArray[i] - 128) / 128) * amplitude;
             
             if (i === 0) {
                 ctx.moveTo(x, y);
@@ -466,9 +881,9 @@
         
         // Gradient stroke
         const gradient = ctx.createLinearGradient(0, 0, width, 0);
-        gradient.addColorStop(0, '#1DB954');
+        gradient.addColorStop(0, '#ff00cc');
         gradient.addColorStop(0.5, '#00ffcc');
-        gradient.addColorStop(1, '#1ED760');
+        gradient.addColorStop(1, '#3333ff');
         
         ctx.strokeStyle = gradient;
         ctx.lineWidth = 3;
@@ -487,37 +902,81 @@
         
         ctx.fillStyle = fillGradient;
         ctx.fill();
+        
+        // Particles on peaks
+        for (let i = 0; i < dataArray.length; i += 5) {
+            if (dataArray[i] > 200) {
+                const x = (i / dataArray.length) * width;
+                const y = centerY + ((dataArray[i] - 128) / 128) * amplitude;
+                const size = (dataArray[i] / 255) * 6 + 2;
+                
+                ctx.beginPath();
+                ctx.arc(x, y, size, 0, Math.PI * 2);
+                ctx.fillStyle = `rgba(255, 255, 255, ${dataArray[i] / 255})`;
+                ctx.fill();
+            }
+        }
     }
 
     function drawParticles(ctx, dataArray, width, height) {
         const centerX = width / 2;
         const centerY = height / 2;
-        const radius = Math.min(width, height) * 0.4;
+        const maxRadius = Math.min(width, height) * 0.35;
+        
+        // Background particles
+        for (let i = 0; i < 50; i++) {
+            const angle = Math.random() * Math.PI * 2;
+            const distance = Math.random() * maxRadius * 1.2;
+            const size = Math.random() * 3 + 1;
+            const hue = Math.random() * 360;
+            
+            ctx.beginPath();
+            ctx.arc(
+                centerX + Math.cos(angle) * distance,
+                centerY + Math.sin(angle) * distance,
+                size,
+                0,
+                Math.PI * 2
+            );
+            ctx.fillStyle = `hsla(${hue}, 80%, 60%, ${Math.random() * 0.3})`;
+            ctx.fill();
+        }
         
-        for (let i = 0; i < dataArray.length; i += 4) {
+        // Audio-reactive particles
+        for (let i = 0; i < dataArray.length; i += 3) {
             const angle = (i / dataArray.length) * Math.PI * 2;
-            const distance = (dataArray[i] / 255) * radius;
+            const distance = (dataArray[i] / 255) * maxRadius;
             const x = centerX + Math.cos(angle) * distance;
             const y = centerY + Math.sin(angle) * distance;
             const size = (dataArray[i] / 255) * 8 + 2;
-            
-            // Particle color based on frequency
             const hue = (i / dataArray.length) * 360;
-            ctx.fillStyle = `hsla(${hue}, 80%, 60%, ${dataArray[i] / 255})`;
             
             ctx.beginPath();
             ctx.arc(x, y, size, 0, Math.PI * 2);
+            ctx.fillStyle = `hsla(${hue}, 80%, 70%, ${dataArray[i] / 255})`;
             ctx.fill();
+            
+            // Trail effect
+            for (let j = 1; j < 5; j++) {
+                const trailSize = size * (1 - j/10);
+                const trailX = centerX + Math.cos(angle) * (distance - j * 5);
+                const trailY = centerY + Math.sin(angle) * (distance - j * 5);
+                
+                ctx.beginPath();
+                ctx.arc(trailX, trailY, trailSize, 0, Math.PI * 2);
+                ctx.fillStyle = `hsla(${hue}, 80%, 70%, ${dataArray[i] / 255 * 0.3})`;
+                ctx.fill();
+            }
         }
         
         // Center glow
-        const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius * 0.3);
+        const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, maxRadius * 0.4);
         gradient.addColorStop(0, 'rgba(0, 255, 204, 0.8)');
         gradient.addColorStop(1, 'rgba(0, 255, 204, 0)');
         
         ctx.fillStyle = gradient;
         ctx.beginPath();
-        ctx.arc(centerX, centerY, radius * 0.3, 0, Math.PI * 2);
+        ctx.arc(centerX, centerY, maxRadius * 0.4, 0, Math.PI * 2);
         ctx.fill();
     }
 
@@ -527,104 +986,66 @@
         const maxRadius = Math.min(width, height) * 0.4;
         
         ctx.save();
+        ctx.translate(centerX, centerY);
+        
+        // Rotate over time
+        const rotation = Date.now() / 2000;
+        ctx.rotate(rotation);
         
         // Draw multiple rings
         for (let ring = 0; ring < 3; ring++) {
-            const ringRadius = maxRadius * (1 - ring * 0.3);
+            const ringRadius = maxRadius * (1 - ring * 0.25);
             
             ctx.beginPath();
-            ctx.arc(centerX, centerY, ringRadius, 0, Math.PI * 2);
+            ctx.arc(0, 0, ringRadius, 0, Math.PI * 2);
             
-            const gradient = ctx.createLinearGradient(0, 0, width, 0);
-            gradient.addColorStop(0, '#1DB954');
+            const gradient = ctx.createLinearGradient(-ringRadius, 0, ringRadius, 0);
+            gradient.addColorStop(0, '#ff00cc');
             gradient.addColorStop(0.5, '#00ffcc');
-            gradient.addColorStop(1, '#1ED760');
+            gradient.addColorStop(1, '#3333ff');
             
             ctx.strokeStyle = gradient;
-            ctx.lineWidth = 3 + ring;
+            ctx.lineWidth = 2 + ring;
             ctx.stroke();
         }
         
         // Draw frequency bars around circle
         const barCount = 64;
-        const barWidth = (Math.PI * 2) / barCount;
         
         for (let i = 0; i < barCount; i++) {
             const angle = (i / barCount) * Math.PI * 2;
             const barHeight = (dataArray[i % dataArray.length] / 255) * maxRadius * 0.3;
+            const hue = (i / barCount) * 360;
             
             ctx.save();
-            ctx.translate(centerX, centerY);
             ctx.rotate(angle);
             
             const gradient = ctx.createLinearGradient(0, 0, 0, -barHeight);
-            gradient.addColorStop(0, 'rgba(0, 255, 204, 0.3)');
-            gradient.addColorStop(1, 'rgba(0, 255, 204, 0.8)');
+            gradient.addColorStop(0, `hsla(${hue}, 80%, 40%, 0.3)`);
+            gradient.addColorStop(1, `hsla(${hue}, 100%, 70%, 0.9)`);
             
             ctx.fillStyle = gradient;
-            ctx.fillRect(0, -barHeight, 3, barHeight);
+            ctx.fillRect(0, -barHeight, 4, barHeight);
             
             ctx.restore();
         }
         
-        ctx.restore();
-    }
-
-    function createFallbackVisualizer(ctx, width, height) {
-        // Create animated gradient background if audio analysis fails
-        let phase = 0;
+        // Center pulse
+        const pulseSize = (Math.sin(Date.now() / 300) * 0.3 + 0.7) * 20;
+        const pulseGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, pulseSize);
+        pulseGradient.addColorStop(0, 'rgba(0, 255, 204, 0.8)');
+        pulseGradient.addColorStop(1, 'rgba(0, 255, 204, 0)');
         
-        function animateFallback() {
-            requestAnimationFrame(animateFallback);
-            
-            phase += 0.01;
-            
-            // Clear canvas
-            ctx.clearRect(0, 0, width, height);
-            
-            // Create gradient
-            const gradient = ctx.createLinearGradient(0, 0, width, height);
-            gradient.addColorStop(0, `hsl(${(phase * 60) % 360}, 80%, 50%)`);
-            gradient.addColorStop(0.5, `hsl(${(phase * 90 + 120) % 360}, 80%, 60%)`);
-            gradient.addColorStop(1, `hsl(${(phase * 120 + 240) % 360}, 80%, 50%)`);
-            
-            ctx.fillStyle = gradient;
-            ctx.fillRect(0, 0, width, height);
-            
-            // Draw animated bars
-            const barCount = 32;
-            const barWidth = width / barCount;
-            
-            for (let i = 0; i < barCount; i++) {
-                const barHeight = Math.sin(phase + i * 0.2) * height * 0.4 + height * 0.3;
-                const alpha = (Math.sin(phase + i * 0.1) + 1) * 0.5;
-                
-                ctx.fillStyle = `rgba(255, 255, 255, ${alpha * 0.7})`;
-                ctx.fillRect(i * barWidth, height - barHeight, barWidth - 2, barHeight);
-            }
-        }
+        ctx.fillStyle = pulseGradient;
+        ctx.beginPath();
+        ctx.arc(0, 0, pulseSize, 0, Math.PI * 2);
+        ctx.fill();
         
-        animateFallback();
+        ctx.restore();
     }
 
-    function enhanceUIElements() {
-        // Add hover effects and animations to various UI elements
-        const elementsToEnhance = [
-            '.Button-sc-1dqy6sn-0', // Buttons
-            '.Card-sc-1uyc430-0',   // Cards
-            '.main-card-card',      // Main cards
-            '.main-shelf-shelf',    // Shelves
-            '.main-trackList-row',  // Track rows
-            '.progress-bar__slider', // Progress slider
-            '.volume-bar__slider'   // Volume slider
-        ];
-
-        elementsToEnhance.forEach(selector => {
-            document.querySelectorAll(selector).forEach(element => {
-                element.style.transition = 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)';
-            });
-        });
-
+    // Apply UI enhancements
+    function applyUIEnhancements() {
         // Add gradient text to important elements
         document.querySelectorAll('.Type__TypeElement-sc-goli3j-0').forEach(text => {
             if (text.textContent.length > 3 && text.textContent.length < 30) {
@@ -632,24 +1053,54 @@
             }
         });
 
-        // Add pulse animation to play button
-        const playButton = document.querySelector('.Button-sc-1dqy6sn-0.Lsg1a0PdZMXQ3vQZlE0_M');
-        if (playButton) {
-            playButton.style.animation = 'pulse 2s infinite';
-        }
+        // Add touch feedback to interactive elements
+        document.querySelectorAll('[role="button"], [role="link"], .main-trackList-row').forEach(element => {
+            element.addEventListener('touchstart', function(e) {
+                if (!this.classList.contains('pulse-active')) {
+                    this.classList.add('pulse-active');
+                    const pulse = document.createElement('div');
+                    pulse.className = 'pulse-indicator';
+                    this.appendChild(pulse);
+                    
+                    setTimeout(() => {
+                        pulse.remove();
+                        this.classList.remove('pulse-active');
+                    }, 600);
+                }
+            }, { passive: true });
+        });
 
         // MutationObserver for dynamic content
         const uiObserver = new MutationObserver(mutations => {
             mutations.forEach(mutation => {
                 if (mutation.addedNodes.length) {
                     // Re-apply enhancements to new elements
-                    elementsToEnhance.forEach(selector => {
-                        document.querySelectorAll(selector).forEach(element => {
-                            if (!element.style.transition) {
-                                element.style.transition = 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)';
+                    document.querySelectorAll('.Type__TypeElement-sc-goli3j-0').forEach(text => {
+                        if (text.textContent.length > 3 && text.textContent.length < 30 && !text.classList.contains('glow-text')) {
+                            text.classList.add('glow-text');
+                        }
+                    });
+                    
+                    if (isMobile) {
+                        document.querySelectorAll('[role="button"], [role="link"], .main-trackList-row').forEach(element => {
+                            if (!element.hasAttribute('data-touch-listener')) {
+                                element.setAttribute('data-touch-listener', 'true');
+                                element.addEventListener('touchstart', function(e) {
+                                    if (!this.classList.contains('pulse-active')) {
+                                        this.classList.add('pulse-active');
+                                        const pulse = document.createElement('div');
+                                        pulse.className = 'pulse-indicator';
+                                        this.appendChild(pulse);
+                                        
+                                        setTimeout(() => {
+                                            pulse.remove();
+                                            this.classList.remove('pulse-active');
+                                        }, 600);
+                                    }
+                                }, { passive: true });
                             }
                         });
-                    });
+                    }
                 }
             });
         });
@@ -664,4 +1115,156 @@
             uiObserver.disconnect();
         });
     }
+
+    // Setup responsive adjustments
+    function setupResponsiveAdjustments() {
+        function adjustLayout() {
+            const isCurrentlyMobile = window.innerWidth < 768;
+            
+            if (isCurrentlyMobile && !isMobile) {
+                // Switch to mobile mode
+                document.documentElement.style.setProperty('--mobile-radius', '28px');
+                document.documentElement.style.setProperty('--desktop-radius', '16px');
+                showMobileToast('📱 Mobile Mode Activated');
+            } else if (!isCurrentlyMobile && isMobile) {
+                // Switch to desktop mode
+                document.documentElement.style.setProperty('--mobile-radius', '24px');
+                document.documentElement.style.setProperty('--desktop-radius', '12px');
+                showMobileToast('🖥 Desktop Mode Activated');
+            }
+        }
+
+        window.addEventListener('resize', adjustLayout, { passive: true });
+        adjustLayout();
+    }
+
+    // Mobile utility functions
+    function triggerHapticFeedback(type = 'light') {
+        if (navigator.vibrate) {
+            switch(type) {
+                case 'light':
+                    navigator.vibrate(10);
+                    break;
+                case 'medium':
+                    navigator.vibrate(30);
+                    break;
+                case 'heavy':
+                    navigator.vibrate(50);
+                    break;
+                case 'success':
+                    navigator.vibrate([20, 10, 20]);
+                    break;
+                case 'error':
+                    navigator.vibrate([50, 30, 50]);
+                    break;
+            }
+        }
+    }
+
+    function showMobileToast(message, duration = 2000) {
+        if (!isMobile) return;
+        
+        let toast = document.getElementById('mobile-toast');
+        if (!toast) {
+            toast = document.createElement('div');
+            toast.id = 'mobile-toast';
+            toast.style.cssText = `
+                position: fixed;
+                bottom: 20%;
+                left: 50%;
+                transform: translateX(-50%);
+                background: rgba(0, 0, 0, 0.85);
+                color: white;
+                padding: 12px 24px;
+                border-radius: 24px;
+                backdrop-filter: blur(10px);
+                font-size: 16px;
+                z-index: 99999;
+                opacity: 0;
+                transition: opacity 0.3s ease;
+                border: 1px solid rgba(0, 255, 204, 0.3);
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+            `;
+            document.body.appendChild(toast);
+        }
+        
+        toast.textContent = message;
+        toast.style.opacity = '1';
+        
+        setTimeout(() => {
+            toast.style.opacity = '0';
+        }, duration);
+    }
+
+    function navigateNextTrack() {
+        const nextBtn = document.querySelector('.main-skipForwardButton-button') || 
+                       document.querySelector('[aria-label="Next"]');
+        if (nextBtn) nextBtn.click();
+    }
+
+    function navigatePreviousTrack() {
+        const prevBtn = document.querySelector('.main-skipBackButton-button') || 
+                       document.querySelector('[aria-label="Previous"]');
+        if (prevBtn) prevBtn.click();
+    }
+
+    function setupFullscreenVisualizer() {
+        const canvas = document.getElementById('fullscreen-visualizer');
+        const ctx = canvas.getContext('2d');
+        
+        function resizeCanvas() {
+            const dpr = window.devicePixelRatio || 1;
+            canvas.width = (canvas.clientWidth) * dpr;
+            canvas.height = (canvas.clientHeight) * dpr;
+            ctx.scale(dpr, dpr);
+        }
+        
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+        
+        // Simple animation for fullscreen
+        let animationFrame;
+        const colors = ['#ff00cc', '#3333ff', '#00ffcc'];
+        let colorIndex = 0;
+        
+        function animate() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // Draw gradient background
+            const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+            gradient.addColorStop(0, colors[colorIndex]);
+            gradient.addColorStop(1, colors[(colorIndex + 1) % colors.length]);
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            // Draw some shapes
+            for (let i = 0; i < 20; i++) {
+                const x = Math.sin(Date.now() / 1000 + i) * (canvas.width / 4) + canvas.width / 2;
+                const y = Math.cos(Date.now() / 1200 + i) * (canvas.height / 4) + canvas.height / 2;
+                const size = Math.abs(Math.sin(Date.now() / 2000 + i)) * 30 + 10;
+                
+                ctx.beginPath();
+                ctx.arc(x, y, size, 0, Math.PI * 2);
+                ctx.fillStyle = `rgba(255, 255, 255, ${0.3 + Math.abs(Math.sin(Date.now() / 1000 + i)) * 0.7})`;
+                ctx.fill();
+            }
+            
+            colorIndex = (colorIndex + 0.01) % colors.length;
+            animationFrame = requestAnimationFrame(animate);
+        }
+        
+        animate();
+        
+        // Cleanup on close
+        document.getElementById('fullscreen-close').addEventListener('click', () => {
+            cancelAnimationFrame(animationFrame);
+        }, { once: true });
+    }
+
+    // Initialize the script
+    if (document.readyState !== 'loading') {
+        initEnhancedSpotify();
+    } else {
+        document.addEventListener('DOMContentLoaded', initEnhancedSpotify);
+    }
 })();