undefined - Follow Up Deployment

index.html

@@ -14,26 +14,27 @@
     --shadow-strong:0 20px 60px rgba(0,0,0,0.4);
   }
 
-  *{box-sizing:border-box;backface-visibility:hidden;perspective:1000px}
+  *{box-sizing:border-box}
 
-  /* Enhanced Typography */
+  /* OPTIMIZED: Typography */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');
 
   body{margin:0;color:#f8f8f8;font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
     background:#0a0a1e;overflow-x:hidden;min-height:100vh;position:relative;
-    cursor:none;transform:translateZ(0);will-change:auto;font-weight:400;letter-spacing:-0.025em}
+    cursor:none;font-weight:400;letter-spacing:-0.025em;
+    transform:translate3d(0,0,0);will-change:auto}
 
-  /* ENHANCED: Multi-Layer Background System */
+  /* OPTIMIZED: Multi-Layer Background System */
   body::before{content:'';position:fixed;inset:0;z-index:0;
     background:
       radial-gradient(ellipse 800px 400px at 20% 30%, rgba(157,78,221,0.15) 0%, transparent 50%),
       radial-gradient(ellipse 600px 300px at 80% 70%, rgba(67,97,238,0.12) 0%, transparent 50%),
       radial-gradient(ellipse 400px 200px at 50% 50%, rgba(255,107,107,0.08) 0%, transparent 50%),
       linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);
-    animation:enhancedBreathing 15s ease-in-out infinite;transform:translateZ(0)}
-  @keyframes enhancedBreathing{0%,100%{opacity:0.85;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}
+    animation:breathing 15s ease-in-out infinite;transform:translate3d(0,0,0)}
+  @keyframes breathing{0%,100%{opacity:0.85;transform:translate3d(0,0,0) scale(1)}50%{opacity:1;transform:translate3d(0,0,0) scale(1.02)}}
 
-  /* ENHANCED: Flowing Aurora Effect */
+  /* OPTIMIZED: Aurora Effect */
   .aurora{position:fixed;inset:0;z-index:1;pointer-events:none;
     background:
       linear-gradient(45deg,
@@ -42,32 +43,39 @@
       linear-gradient(-45deg,
         rgba(255,107,107,0.05) 0%,transparent 30%,rgba(157,78,221,0.07) 70%,transparent 100%);
     background-size:400% 400%, 300% 300%;
-    animation:enhancedAurora 20s ease-in-out infinite, auroraPulse 8s ease-in-out infinite;
-    transform:translateZ(0);will-change:background-position,opacity}
-  @keyframes enhancedAurora{0%,100%{background-position:0% 0%, 100% 100%}50%{background-position:100% 100%, 0% 0%}}
+    animation:aurora 20s ease-in-out infinite, auroraPulse 8s ease-in-out infinite;
+    transform:translate3d(0,0,0);will-change:background-position}
+  @keyframes aurora{0%,100%{background-position:0% 0%, 100% 100%}50%{background-position:100% 100%, 0% 0%}}
   @keyframes auroraPulse{0%,100%{opacity:0.6}50%{opacity:1}}
 
-  /* ENHANCED: Sophisticated Cursor System */
+  /* OPTIMIZED: Cursor System - Desktop Only */
   .cursor{position:fixed;width:20px;height:20px;border-radius:50%;
     background:radial-gradient(circle,rgba(255,107,107,0.9) 0%,rgba(78,205,196,0.4) 50%,transparent 100%);
     pointer-events:none;z-index:999999;mix-blend-mode:screen;
-    transition:all 0.12s cubic-bezier(0.4,0,0.2,1);transform:translateZ(0);
+    transition:all 0.12s cubic-bezier(0.4,0,0.2,1);transform:translate3d(0,0,0);
     left:0;top:0;will-change:transform;
     box-shadow:0 0 20px rgba(255,107,107,0.6), 0 0 40px rgba(255,107,107,0.3)}
+    
+  /* FIXED: Mobile-first performance optimization */
+  @media (max-width:768px) and (orientation:portrait){
+    body{cursor:auto}
+    .cursor,.cursor-trail{display:none !important}
+  }
+
   .cursor.hover{transform:scale(1.8) !important;
     background:radial-gradient(circle,rgba(255,107,107,1) 0%,rgba(78,205,196,0.6) 40%,rgba(157,78,221,0.3) 100%);
     box-shadow:0 0 30px rgba(255,107,107,0.8), 0 0 60px rgba(255,107,107,0.4)}
   .cursor-trail{position:fixed;width:4px;height:4px;border-radius:50%;
     background:rgba(255,107,107,0.8);pointer-events:none;z-index:999998;
-    animation:enhancedTrailFade 0.8s cubic-bezier(0.4,0,0.2,1) forwards}
-  @keyframes enhancedTrailFade{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.3)}}
+    animation:trailFade 0.8s cubic-bezier(0.4,0,0.2,1) forwards}
+  @keyframes trailFade{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.3)}}
 
-  /* ===== NEW: OPTIMIZATION MODE SYSTEM ===== */
-  
-  /* Performance Mode Toggle Button */
-  .performance-toggle{position:fixed;top:20px;right:80px;z-index:10000;
+  /* FIXED: Optimization Mode System - Non-overlapping mobile layout */
+
+  /* Desktop Performance Toggle */
+  .performance-toggle{position:fixed;top:20px;right:20px;z-index:10000;
     display:flex;align-items:center;gap:10px;padding:10px 16px;
-    background:rgba(0,0,0,0.85);backdrop-filter:blur(25px);
+    background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);
     border-radius:25px;border:1px solid rgba(255,255,255,0.2);
     box-shadow:var(--shadow-medium);cursor:pointer;
     transition:all 0.4s cubic-bezier(0.4,0,0.2,1);font-size:12px;font-weight:500;
@@ -77,11 +85,11 @@
   .performance-toggle .mode-icon{font-size:16px;transition:all 0.3s ease}
   .performance-toggle .mode-text{font-family:'Inter',sans-serif;letter-spacing:0.3px}
 
-  /* Performance Settings Panel */
+  /* FIXED: Performance Settings Panel */
   .performance-panel{position:fixed;top:70px;right:20px;z-index:9999;
-    background:rgba(0,0,0,0.95);backdrop-filter:blur(30px);
+    background:rgba(0,0,0,0.95);backdrop-filter:blur(15px);
     border-radius:20px;padding:25px;border:1px solid rgba(255,255,255,0.15);
-    box-shadow:var(--shadow-strong);min-width:280px;
+    box-shadow:var(--shadow-strong);min-width:320px;max-width:90vw;
     opacity:0;transform:translateY(-20px) scale(0.95);
     transition:all 0.4s cubic-bezier(0.4,0,0.2,1);pointer-events:none}
   .performance-panel.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
@@ -89,12 +97,13 @@
   .performance-panel h3{color:var(--gold);margin:0 0 20px;font-size:18px;
     font-weight:700;text-align:center;font-family:'Playfair Display',serif}
 
-  /* Mode Selection Cards */
-  .mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
+  /* FIXED: Mode Selection Grid - Better mobile layout */
+  .mode-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:10px;margin-bottom:20px}
   .mode-card{padding:12px;border-radius:12px;cursor:pointer;
     border:2px solid rgba(255,255,255,0.1);
     background:rgba(255,255,255,0.05);
-    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);text-align:center}
+    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);text-align:center;
+    min-height:80px;display:flex;flex-direction:column;justify-content:center}
   .mode-card:hover{transform:translateY(-2px);border-color:rgba(255,107,107,0.4)}
   .mode-card.active{border-color:var(--neon-primary);background:rgba(255,107,107,0.15);
     box-shadow:0 0 20px rgba(255,107,107,0.3)}
@@ -102,117 +111,134 @@
   .mode-card .mode-name{font-size:13px;font-weight:600;margin-bottom:4px}
   .mode-card .mode-desc{font-size:10px;opacity:0.7;line-height:1.3}
 
+  /* Special styling for Mobile+ mode */
+  .mode-card[data-mode="mobile-plus"]{
+    grid-column:span 2;
+    background:linear-gradient(135deg, rgba(0,255,127,0.1), rgba(0,191,255,0.1));
+    border-color:rgba(0,255,127,0.3)}
+  .mode-card[data-mode="mobile-plus"]:hover{
+    border-color:rgba(0,255,127,0.6);transform:translateY(-3px) scale(1.02)}
+  .mode-card[data-mode="mobile-plus"].active{
+    border-color:#00ff7f;background:rgba(0,255,127,0.2);
+    box-shadow:0 0 25px rgba(0,255,127,0.4)}
+
   /* Performance Metrics */
   .perf-metrics{background:rgba(255,255,255,0.05);border-radius:12px;padding:15px;margin-top:15px}
   .perf-metrics h4{margin:0 0 10px;font-size:13px;color:var(--neon-secondary)}
   .metric-item{display:flex;justify-content:space-between;margin:8px 0;font-size:11px}
   .metric-value{color:var(--gold);font-weight:600}
 
-  /* Mobile Performance Interface */
-  .mobile-perf-toggle{position:fixed;bottom:90px;right:15px;z-index:45;
+  /* FIXED: Mobile Performance Interface - No overlapping */
+  .mobile-perf-toggle{position:fixed;bottom:100px;right:15px;z-index:50;
     width:48px;height:48px;border-radius:50%;
-    background:rgba(0,0,0,0.9);backdrop-filter:blur(20px);
-    border:2px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;
+    background:rgba(0,0,0,0.9);backdrop-filter:blur(10px);
+    border:2px solid rgba(255,255,255,0.3);display:none;align-items:center;justify-content:center;
     cursor:pointer;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
     box-shadow:var(--shadow-medium)}
   .mobile-perf-toggle:hover{transform:scale(1.1);border-color:rgba(255,107,107,0.6)}
   .mobile-perf-toggle .perf-icon{font-size:20px;transition:all 0.3s ease}
 
-  /* Mobile Performance Panel */
+  /* FIXED: Mobile Performance Panel - Proper positioning */
   .mobile-perf-panel{position:fixed;bottom:0;left:0;right:0;z-index:60;
-    background:rgba(0,0,0,0.95);backdrop-filter:blur(30px);
+    background:rgba(0,0,0,0.95);backdrop-filter:blur(15px);
     border-top:1px solid rgba(255,107,107,0.4);
     border-radius:25px 25px 0 0;padding:20px;
     transform:translateY(100%);transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
     box-shadow:0 -10px 40px rgba(0,0,0,0.5)}
   .mobile-perf-panel.visible{transform:translateY(0)}
   .mobile-perf-panel h3{color:var(--gold);margin:0 0 15px;font-size:16px;text-align:center}
-  .mobile-perf-panel .mode-grid{grid-template-columns:repeat(4,1fr);gap:8px}
-  .mobile-perf-panel .mode-card{padding:8px 4px}
+  .mobile-perf-panel .mode-grid{grid-template-columns:repeat(2,1fr);gap:8px}
+  .mobile-perf-panel .mode-card{padding:8px 4px;min-height:60px}
+  .mobile-perf-panel .mode-card[data-mode="mobile-plus"]{grid-column:span 2}
   .mobile-perf-panel .mode-emoji{font-size:20px;margin-bottom:4px}
   .mobile-perf-panel .mode-name{font-size:10px}
   .mobile-perf-panel .mode-desc{font-size:8px}
 
-  /* Performance Mode Classes */
-  .ultra-mode{--animation-speed:1;--particle-count:15;--effect-intensity:1}
-  .high-mode{--animation-speed:0.8;--particle-count:10;--effect-intensity:0.8}
-  .balanced-mode{--animation-speed:0.6;--particle-count:6;--effect-intensity:0.6}
-  .performance-mode{--animation-speed:0.3;--particle-count:3;--effect-intensity:0.3}
+  /* OPTIMIZED: Performance Mode Classes */
+  .ultra-mode{--animation-speed:1;--particle-count:8;--effect-intensity:1}
+  .high-mode{--animation-speed:0.8;--particle-count:6;--effect-intensity:0.8}
+  .balanced-mode{--animation-speed:0.6;--particle-count:4;--effect-intensity:0.6}
+  .performance-mode{--animation-speed:0.4;--particle-count:2;--effect-intensity:0.4}
+  .mobile-plus-mode{--animation-speed:0.2;--particle-count:1;--effect-intensity:0.2}
 
-  /* Dynamic Performance Adjustments */
+  /* OPTIMIZED: Dynamic Performance Adjustments */
   .performance-mode .aurora{opacity:0.3;animation-duration:30s}
   .performance-mode .music-notes{display:none}
   .performance-mode .corner-accent{display:none}
   .performance-mode .cursor-trail{display:none}
-  
+
+  /* Mobile+ Mode - Ultra Performance */
+  .mobile-plus-mode .aurora{opacity:0.1;animation-duration:60s}
+  .mobile-plus-mode .music-notes{display:none !important}
+  .mobile-plus-mode .corner-accent{display:none !important}
+  .mobile-plus-mode .cursor-trail{display:none !important}
+  .mobile-plus-mode .bubble{display:none !important}
+  .mobile-plus-mode body::before{animation:none;opacity:0.7}
+  .mobile-plus-mode .panel::before{display:none}
+  .mobile-plus-mode .panel::after{display:none}
+  .mobile-plus-mode .audio-visualizer{display:none}
+
   .balanced-mode .aurora{opacity:0.6;animation-duration:25s}
-  .balanced-mode .corner-accent{animation-duration:6s}
-  
   .high-mode .aurora{opacity:0.8;animation-duration:22s}
-  .high-mode .corner-accent{animation-duration:4s}
-  
   .ultra-mode .aurora{opacity:1;animation-duration:20s}
-  .ultra-mode .corner-accent{animation-duration:3s}
-
-  /* ===== END OPTIMIZATION MODE SYSTEM ===== */
 
-  /* ENHANCED: Floating Elements */
+  /* OPTIMIZED: Floating Elements */
   .music-notes{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
   .note{position:absolute;font-size:24px;color:rgba(255,215,0,0.3);font-family:'Playfair Display',serif;
-    animation:enhancedFloatNote 12s linear infinite;transform:translateZ(0);
+    animation:floatNote 12s linear infinite;transform:translate3d(0,0,0);
     text-shadow:0 0 10px rgba(255,215,0,0.4)}
-  @keyframes enhancedFloatNote{
-    0%{transform:translateY(110vh) rotate(0deg);opacity:0}
+  @keyframes floatNote{
+    0%{transform:translate3d(0,110vh,0) rotate(0deg);opacity:0}
     10%{opacity:0.6}90%{opacity:0.6}
-    100%{transform:translateY(-10vh) rotate(360deg);opacity:0}
+    100%{transform:translate3d(0,-10vh,0) rotate(360deg);opacity:0}
   }
 
-  /* ENHANCED: Header with Elegant Typography */
+  /* OPTIMIZED: Header */
   header{text-align:center;padding:30px 0 20px;transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
-    position:relative;z-index:3;transform:translateZ(0)}
+    position:relative;z-index:3;transform:translate3d(0,0,0)}
   h1{font-size:clamp(32px,8vw,64px);font-weight:900;margin:0;font-family:'Playfair Display',serif;
     background:linear-gradient(135deg,#ff6b6b 0%,#ffd93d 20%,#4ecdc4 40%,#9d4edd 60%,#ff9a9e 80%,#ff6b6b 100%);
     background-size:400% 400%;-webkit-background-clip:text;background-clip:text;color:transparent;
-    animation:enhancedRainbow 8s ease-in-out infinite;
+    animation:rainbow 8s ease-in-out infinite;
     filter:drop-shadow(0 0 20px rgba(255,107,107,0.5));
-    transform:translateZ(0);will-change:background-position;letter-spacing:-0.02em}
-  h1:hover{transform:translateZ(0) scale(1.05) rotateX(5deg);
+    transform:translate3d(0,0,0);will-change:background-position;letter-spacing:-0.02em}
+  h1:hover{transform:translate3d(0,0,0) scale(1.05) rotateX(5deg);
     transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1)}
-  @keyframes enhancedRainbow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
+  @keyframes rainbow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
 
   .sub{font-size:16px;color:rgba(255,255,255,.9);margin-top:12px;font-weight:300;
     text-shadow:0 0 15px rgba(255,255,255,0.3);letter-spacing:0.5px}
   .divider{height:6px;width:140px;margin:20px auto;
     background:linear-gradient(90deg,#ff6b6b,#ffd93d,#4ecdc4,#9d4edd,#ff9a9e);
     background-size:400% 100%;border-radius:999px;opacity:.95;
-    animation:enhancedFlow 4s ease-in-out infinite;
-    box-shadow:0 0 20px rgba(255,107,107,0.4), 0 4px 15px rgba(0,0,0,0.2);transform:translateZ(0)}
-  @keyframes enhancedFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
+    animation:flow 4s ease-in-out infinite;
+    box-shadow:0 0 20px rgba(255,107,107,0.4), 0 4px 15px rgba(0,0,0,0.2);transform:translate3d(0,0,0)}
+  @keyframes flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
 
-  /* ENHANCED: Video Panel with Glassmorphism */
+   /* OPTIMIZED: Video Panel */
   .panel{position:relative;margin:20px auto 0;max-width:1000px;aspect-ratio:16/9;
     background:var(--glass-bg);border-radius:32px;overflow:hidden;
     box-shadow:var(--shadow-strong);z-index:2;
-    transform:translateZ(0);transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
+    transform:translate3d(0,0,0);transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
     backdrop-filter:blur(20px);border:1px solid var(--glass-border)}
-  .panel:hover{transform:translateZ(0) scale(1.02) rotateX(2deg) rotateY(1deg);
+  .panel:hover{transform:translate3d(0,0,0) scale(1.02) rotateX(2deg) rotateY(1deg);
     box-shadow:0 25px 80px rgba(0,0,0,0.5), 0 0 50px rgba(255,107,107,0.2)}
 
   .panel::before{content:'';position:absolute;inset:-6px;border-radius:38px;
     background:conic-gradient(from 0deg,var(--neon-primary) 0%,var(--magic-purple) 25%,var(--cosmic-blue) 50%,var(--aurora-green) 75%,var(--neon-primary) 100%);
-    z-index:-1;animation:enhancedHoloRotate 12s linear infinite;transform:translateZ(0);
+    z-index:-1;animation:holoRotate 12s linear infinite;transform:translate3d(0,0,0);
     filter:blur(2px);opacity:0.8}
   .panel::after{content:'';position:absolute;inset:-12px;border-radius:44px;
     background:radial-gradient(ellipse,rgba(255,107,107,0.2) 0%,rgba(78,205,196,0.1) 50%,transparent 100%);
-    z-index:-2;filter:blur(15px);animation:enhancedHoloGlow 10s ease-in-out infinite;transform:translateZ(0)}
-  @keyframes enhancedHoloRotate{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.02)}100%{transform:rotate(360deg) scale(1)}}
-  @keyframes enhancedHoloGlow{0%,100%{opacity:0.6}50%{opacity:1}}
+    z-index:-2;filter:blur(15px);animation:holoGlow 10s ease-in-out infinite;transform:translate3d(0,0,0)}
+  @keyframes holoRotate{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.02)}100%{transform:rotate(360deg) scale(1)}}
+  @keyframes holoGlow{0%,100%{opacity:0.6}50%{opacity:1}}
 
-  /* ENHANCED: Corner Accents with Morphing */
+  /* OPTIMIZED: Corner Accents */
   .panel-accents{position:absolute;inset:0;pointer-events:none;z-index:5}
   .corner-accent{position:absolute;width:50px;height:50px;border-radius:50%;
-    animation:enhancedCornerPulse 4s ease-in-out infinite;
-    filter:blur(1.5px);transform:translateZ(0)}
+    animation:cornerPulse 4s ease-in-out infinite;
+    filter:blur(1.5px);transform:translate3d(0,0,0)}
   .corner-accent:nth-child(1){top:-25px;left:-25px;animation-delay:0s;
     background:radial-gradient(circle,rgba(255,107,107,0.8) 0%,rgba(255,107,107,0.2) 70%,transparent 100%)}
   .corner-accent:nth-child(2){top:-25px;right:-25px;animation-delay:1s;
@@ -221,22 +247,22 @@
     background:radial-gradient(circle,rgba(157,78,221,0.8) 0%,rgba(157,78,221,0.2) 70%,transparent 100%)}
   .corner-accent:nth-child(4){bottom:-25px;right:-25px;animation-delay:3s;
     background:radial-gradient(circle,rgba(255,211,102,0.8) 0%,rgba(255,211,102,0.2) 70%,transparent 100%)}
-  @keyframes enhancedCornerPulse{
+  @keyframes cornerPulse{
     0%,100%{transform:scale(0.8) rotate(0deg);opacity:0.5}
     50%{transform:scale(1.4) rotate(180deg);opacity:0.9}
   }
 
   video{width:100%;height:100%;object-fit:cover;background:#000;border-radius:26px;
     transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
-    filter:contrast(1.08) saturate(1.15) brightness(1.05);transform:translateZ(0)}
+    filter:contrast(1.08) saturate(1.15) brightness(1.05);transform:translate3d(0,0,0)}
 
   .chip{position:absolute;bottom:15px;right:15px;padding:10px 16px;border-radius:16px;
-    background:rgba(0,0,0,0.85);backdrop-filter:blur(20px);
+    background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);
     font:13px/1.4 'Inter',monospace;color:#fff;z-index:6;
     border:1px solid rgba(255,107,107,0.4);
-    box-shadow:var(--shadow-medium);transform:translateZ(0);font-weight:500}
+    box-shadow:var(--shadow-medium);transform:translate3d(0,0,0);font-weight:500}
 
-  /* ENHANCED: Unmute Overlay */
+  /* Unmute Overlay */
   .unmute-overlay{position:absolute;top:0;left:0;right:0;bottom:0;
     background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;
     z-index:100;backdrop-filter:blur(25px);border-radius:26px}
@@ -251,10 +277,10 @@
     box-shadow:0 20px 60px rgba(255,107,107,0.7)}
   .unmute-btn:active{transform:translateY(-2px) scale(1.02)}
 
-  /* ENHANCED: Professional Control Panel */
+  /* OPTIMIZED: Control Panel */
   .control-panel{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
     display:flex;align-items:center;gap:16px;padding:16px 28px;
-    background:rgba(0,0,0,0.9);backdrop-filter:blur(30px);
+    background:rgba(0,0,0,0.9);backdrop-filter:blur(15px);
     border-radius:60px;border:1px solid rgba(255,255,255,0.12);
     box-shadow:var(--shadow-strong);z-index:10;
     opacity:0;transform:translateX(-50%) translateY(30px);
@@ -262,10 +288,10 @@
   .panel:hover .control-panel,.control-panel:hover,.control-panel.active{
     opacity:1;transform:translateX(-50%) translateY(0)}
 
-  /* ENHANCED: Volume Button */
+  /* Volume Button */
   .mute-btn{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,0.25);
     background:linear-gradient(135deg,rgba(255,107,107,0.25),rgba(78,205,196,0.25));
-    backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;
+    backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;
     cursor:pointer;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}
   .mute-btn::before{content:'';position:absolute;inset:0;border-radius:50%;
     background:linear-gradient(45deg,var(--neon-primary),var(--neon-secondary));
@@ -279,7 +305,7 @@
     filter:drop-shadow(0 0 12px rgba(255,255,255,0.6))}
   .mute-btn.muted .mute-icon{color:#ff6b6b;filter:drop-shadow(0 0 15px rgba(255,107,107,0.9))}
 
-  /* ENHANCED: Volume Slider */
+  /* Volume Slider */
   .volume-control{display:flex;align-items:center;gap:12px}
   .volume-slider{width:100px;height:6px;background:rgba(255,255,255,0.25);
     border-radius:3px;position:relative;cursor:pointer;overflow:hidden}
@@ -293,9 +319,9 @@
     transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
   .volume-slider:hover .volume-fill::after{transform:scale(1.2)}
 
-  /* ENHANCED: Control Buttons */
+  /* Control Buttons */
   .control-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);
-    background:rgba(255,255,255,0.08);backdrop-filter:blur(15px);
+    background:rgba(255,255,255,0.08);backdrop-filter:blur(10px);
     display:flex;align-items:center;justify-content:center;cursor:pointer;
     font-size:18px;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
     color:rgba(255,255,255,0.85)}
@@ -306,7 +332,7 @@
   .control-btn.active{background:rgba(255,107,107,0.25);border-color:rgba(255,107,107,0.7);
     color:#ff6b6b;box-shadow:0 0 25px rgba(255,107,107,0.5)}
 
-  /* ENHANCED: Progress Bar */
+  /* Progress Bar */
   .progress-bar{position:absolute;bottom:0;left:0;right:0;height:4px;
     background:rgba(255,255,255,0.15);z-index:8}
   .progress-fill{height:100%;
@@ -314,10 +340,10 @@
     width:0%;transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
     box-shadow:0 0 12px rgba(255,107,107,0.6)}
 
-  /* ENHANCED: Quality Indicator */
+  /* Quality Indicator */
   .quality-indicator{position:absolute;top:20px;left:20px;
     padding:8px 16px;border-radius:25px;font-size:12px;font-weight:600;
-    backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);z-index:7;
+    backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.15);z-index:7;
     font-family:'Inter',sans-serif}
   .quality-hd{background:rgba(76,222,128,0.25);color:#4ade80;border-color:rgba(76,222,128,0.4);
     box-shadow:0 0 20px rgba(76,222,128,0.3)}
@@ -326,9 +352,9 @@
   .quality-low{background:rgba(239,68,68,0.25);color:#ef4444;border-color:rgba(239,68,68,0.4);
     box-shadow:0 0 20px rgba(239,68,68,0.3)}
 
-  /* ENHANCED: Keyboard Shortcuts */
+  /* Keyboard Shortcuts */
   .shortcuts-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);
-    background:rgba(0,0,0,0.95);backdrop-filter:blur(30px);
+    background:rgba(0,0,0,0.95);backdrop-filter:blur(15px);
     border-radius:28px;padding:40px;border:1px solid rgba(255,255,255,0.15);
     z-index:11000;opacity:0;pointer-events:none;
     transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
@@ -344,24 +370,24 @@
     font:13px/1 'Inter',monospace;color:var(--neon-primary);font-weight:600;
     box-shadow:0 2px 8px rgba(0,0,0,0.2)}
 
-  /* ENHANCED: Info Section */
+  /* Info Section */
   .info{text-align:center;margin-top:25px;padding:0 15px;
-    transition:all 0.6s cubic-bezier(0.4,0,0.2,1);position:relative;z-index:2;transform:translateZ(0)}
+    transition:all 0.6s cubic-bezier(0.4,0,0.2,1);position:relative;z-index:2;transform:translate3d(0,0,0)}
   .info h2{font-size:clamp(20px,5vw,32px);margin:0;font-family:'Playfair Display',serif;
     background:linear-gradient(135deg,#fff1a8 0%,#ffd166 50%,#ff9a9e 100%);
     background-size:300% 300%;-webkit-background-clip:text;background-clip:text;color:transparent;
-    font-weight:700;animation:enhancedTitleShimmer 6s ease-in-out infinite;
-    text-shadow:0 0 25px rgba(255,209,102,0.4);transform:translateZ(0)}
-  @keyframes enhancedTitleShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
+    font-weight:700;animation:titleShimmer 6s ease-in-out infinite;
+    text-shadow:0 0 25px rgba(255,209,102,0.4);transform:translate3d(0,0,0)}
+  @keyframes titleShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
   .info p{margin:12px 0 0;color:rgba(255,255,255,.9);font-size:15px;font-weight:300;
     text-shadow:0 0 8px rgba(255,255,255,0.2)}
 
-  /* ENHANCED: Schedule Section */
+  /* Schedule Section */
   .schedule{max-width:800px;margin:30px auto;
-    background:var(--glass-bg);backdrop-filter:blur(25px);
+    background:var(--glass-bg);backdrop-filter:blur(15px);
     border-radius:28px;padding:30px;transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
     position:relative;z-index:2;border:1px solid var(--glass-border);
-    box-shadow:var(--shadow-medium);transform:translateZ(0)}
+    box-shadow:var(--shadow-medium);transform:translate3d(0,0,0)}
   .schedule:hover{transform:translateY(-5px);box-shadow:var(--shadow-strong)}
 
   .schedule h3{margin:0 0 20px;font-size:22px;color:var(--gold);text-align:center;
@@ -369,10 +395,10 @@
 
   .row{display:flex;gap:20px;align-items:flex-start;padding:16px 20px;border-radius:16px;
     font-size:16px;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;
-    cursor:pointer;transform:translateZ(0);margin:8px 0}
+    cursor:pointer;transform:translate3d(0,0,0);margin:8px 0}
   .row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;
     background:linear-gradient(90deg,rgba(255,107,107,0.15),rgba(78,205,196,0.15));
-    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);transform:translateZ(0)}
+    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);transform:translate3d(0,0,0)}
   .row:hover::before{width:100%}
   .row:hover{transform:translateX(8px) scale(1.02);
     background:rgba(255,255,255,0.05);box-shadow:var(--shadow-soft)}
@@ -385,96 +411,96 @@
     border-left:5px solid #ff6b6b;box-shadow:var(--shadow-medium);
     transform:translateX(10px) scale(1.03)}
   .row.active::after{content:'✨';position:absolute;right:20px;top:50%;transform:translateY(-50%);
-    font-size:18px;animation:enhancedSparkle 2s ease-in-out infinite}
-  @keyframes enhancedSparkle{0%,100%{opacity:0.7;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.2)}}
+    font-size:18px;animation:sparkle 2s ease-in-out infinite}
+  @keyframes sparkle{0%,100%{opacity:0.7;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.2)}}
 
   footer{text-align:center;color:rgba(255,255,255,.8);font-size:14px;padding:30px;
     position:relative;z-index:2;text-shadow:0 0 8px rgba(255,255,255,0.2);font-weight:300}
 
-  /* ENHANCED: Badges */
-  .live-badge{position:fixed;top:20px;right:350px;z-index:9999;display:inline-flex;align-items:center;gap:10px;
+  /* FIXED: Badges - Non-overlapping positioning */
+  .live-badge{position:fixed;top:20px;left:20px;z-index:9999;display:inline-flex;align-items:center;gap:10px;
     padding:12px 20px;border-radius:30px;
-    background:rgba(0,0,0,0.85);backdrop-filter:blur(25px);border:1px solid rgba(255,107,107,.5);
+    background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);border:1px solid rgba(255,107,107,.5);
     color:#ff6b6b;font-weight:600;font-size:15px;
     box-shadow:var(--shadow-medium);
-    animation:enhancedLivePulse 3s ease-in-out infinite;transform:translateZ(0)}
-  @keyframes enhancedLivePulse{0%,100%{box-shadow:var(--shadow-medium)}50%{box-shadow:0 8px 40px rgba(255,107,107,0.6)}}
+    animation:livePulse 3s ease-in-out infinite;transform:translate3d(0,0,0)}
+  @keyframes livePulse{0%,100%{box-shadow:var(--shadow-medium)}50%{box-shadow:0 8px 40px rgba(255,107,107,0.6)}}
 
   .dot{width:10px;height:10px;border-radius:50%;background:#ff3b3b;
     box-shadow:0 0 15px rgba(255,59,59,.9);
-    animation:enhancedDotPulse 2s ease-in-out infinite;transform:translateZ(0)}
-  @keyframes enhancedDotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
+    animation:dotPulse 2s ease-in-out infinite;transform:translate3d(0,0,0)}
+  @keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
 
-  .reactions-badge{position:fixed;top:20px;left:20px;z-index:9999;padding:12px 20px;border-radius:30px;
-    background:rgba(0,0,0,0.85);backdrop-filter:blur(25px);border:1px solid rgba(78,205,196,.5);
+  .reactions-badge{position:fixed;bottom:20px;left:20px;z-index:9999;padding:12px 20px;border-radius:30px;
+    background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);border:1px solid rgba(78,205,196,.5);
     color:#4ecdc4;font-weight:600;font-size:15px;display:inline-flex;gap:12px;align-items:center;
-    box-shadow:var(--shadow-medium);transform:translateZ(0)}
+    box-shadow:var(--shadow-medium);transform:translate3d(0,0,0)}
 
-  /* ENHANCED: Emoji Panel */
+  /* FIXED: Emoji Panel - Mobile positioning fixed */
   .emoji-panel{position:absolute;right:20px;bottom:110px;z-index:6;display:flex;flex-direction:column;gap:18px}
   .emoji-btn{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
-    background:rgba(0,0,0,.7);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;
+    background:rgba(0,0,0,.7);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;
     font-size:26px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
-    box-shadow:var(--shadow-soft);transform:translateZ(0)}
+    box-shadow:var(--shadow-soft);transform:translate3d(0,0,0)}
   .emoji-btn:hover{transform:scale(1.15) rotateZ(10deg);
     box-shadow:var(--shadow-medium);border-color:rgba(255,107,107,0.6)}
   .emoji-btn:active{transform:scale(1.05) rotateZ(5deg)}
 
   .emoji-count{position:absolute;right:76px;min-width:70px;height:36px;padding:0 16px;border-radius:18px;
     display:flex;align-items:center;justify-content:center;
-    background:rgba(0,0,0,.8);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.25);
+    background:rgba(0,0,0,.8);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);
     font:13px/1.4 'Inter',monospace;color:#fff;font-weight:500;
-    box-shadow:var(--shadow-soft);transform:translateZ(0)}
+    box-shadow:var(--shadow-soft);transform:translate3d(0,0,0)}
 
-  /* ENHANCED: Particles */
+  /* Particles */
   .particle{position:absolute;pointer-events:none;z-index:8;font-size:26px;
-    animation:enhancedFloatUp 2s cubic-bezier(0.4,0,0.2,1) forwards;transform:translateZ(0)}
-  @keyframes enhancedFloatUp{
-    0%{transform:translateY(0) scale(0.8) rotate(0deg);opacity:0}
+    animation:floatUp 2s cubic-bezier(0.4,0,0.2,1) forwards;transform:translate3d(0,0,0)}
+  @keyframes floatUp{
+    0%{transform:translate3d(0,0,0) scale(0.8) rotate(0deg);opacity:0}
     20%{opacity:1}
-    100%{transform:translateY(-200px) scale(1.5) rotate(360deg);opacity:0}
+    100%{transform:translate3d(0,-200px,0) scale(1.5) rotate(360deg);opacity:0}
   }
 
   .burst{position:absolute;pointer-events:none;z-index:8;
-    animation:enhancedBurst 1s cubic-bezier(0.4,0,0.2,1) forwards;transform:translateZ(0)}
-  @keyframes enhancedBurst{
+    animation:burst 1s cubic-bezier(0.4,0,0.2,1) forwards;transform:translate3d(0,0,0)}
+  @keyframes burst{
     0%{transform:scale(0.4) rotate(0deg);opacity:0}
     60%{transform:scale(1.2) rotate(180deg);opacity:1}
     100%{transform:scale(1.6) rotate(360deg);opacity:0}
   }
 
-  /* ENHANCED: Bubbles */
+  /* OPTIMIZED: Bubbles */
   #bubbles{position:fixed;inset:0;overflow:hidden;z-index:1;pointer-events:none}
   .bubble{position:absolute;bottom:-100px;border-radius:50%;
     background:linear-gradient(45deg,rgba(255,255,255,.12),rgba(255,107,107,.08));
-    animation:enhancedRise linear infinite;
-    box-shadow:inset 0 0 20px rgba(255,255,255,0.15);transform:translateZ(0)}
-  @keyframes enhancedRise{
-    0%{transform:translateY(0) scale(1) rotate(0deg);opacity:.5}
+    animation:rise linear infinite;
+    box-shadow:inset 0 0 20px rgba(255,255,255,0.15);transform:translate3d(0,0,0)}
+  @keyframes rise{
+    0%{transform:translate3d(0,0,0) scale(1) rotate(0deg);opacity:.5}
     50%{opacity:.8}
-    100%{transform:translateY(-120vh) scale(1.3) rotate(360deg);opacity:0}
+    100%{transform:translate3d(0,-120vh,0) scale(1.3) rotate(360deg);opacity:0}
   }
 
-  /* ENHANCED: Welcome Text */
+  /* Welcome Text */
   .welcome-neon{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);
     z-index:10000;font-size:clamp(36px,9vw,72px);font-weight:900;font-family:'Playfair Display',serif;
     background:linear-gradient(45deg,#ff6b6b,#ffd93d,#6bcf7f,#4d96ff,#9c88ff,#ff6b6b);
     background-size:500% 500%;-webkit-background-clip:text;background-clip:text;color:transparent;
-    animation:enhancedNeonFlow 4s ease-in-out, enhancedFadeOut 5s ease-in-out forwards;
+    animation:neonFlow 4s ease-in-out, fadeOut 5s ease-in-out forwards;
     text-shadow:0 0 40px rgba(255,107,107,0.8);pointer-events:none;opacity:1;
     filter:drop-shadow(0 0 30px rgba(255,107,107,0.5));transform-origin:center}
-  @keyframes enhancedNeonFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
-  @keyframes enhancedFadeOut{
+  @keyframes neonFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
+  @keyframes fadeOut{
     0%{opacity:1;transform:translate(-50%, -50%) scale(1)}
     80%{opacity:1;transform:translate(-50%, -50%) scale(1.08)}
     100%{opacity:0;transform:translate(-50%, -50%) scale(0.85)}
   }
 
-  /* ENHANCED: Audio Visualizer */
+  /* Audio Visualizer */
   .audio-visualizer{position:absolute;bottom:30px;left:30px;display:flex;gap:4px;z-index:6}
   .audio-bar{width:5px;border-radius:3px;
     background:linear-gradient(180deg,#ff6b6b 0%,#4ecdc4 50%,#9d4edd 100%);
-    animation:enhancedAudioVisualize 1.2s ease-in-out infinite;transform:translateZ(0);
+    animation:audioVisualize 1.2s ease-in-out infinite;transform:translate3d(0,0,0);
     box-shadow:0 0 10px rgba(255,107,107,0.4)}
   .audio-bar:nth-child(1){height:25px;animation-delay:0s}
   .audio-bar:nth-child(2){height:35px;animation-delay:0.1s}
@@ -482,16 +508,19 @@
   .audio-bar:nth-child(4){height:55px;animation-delay:0.3s}
   .audio-bar:nth-child(5){height:45px;animation-delay:0.4s}
   .audio-bar:nth-child(6){height:35px;animation-delay:0.5s}
-  @keyframes enhancedAudioVisualize{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1.3)}}
+  @keyframes audioVisualize{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1.3)}}
 
-  /* ENHANCED MOBILE RESPONSIVE DESIGN */
+  /* FIXED: MOBILE RESPONSIVE DESIGN - No overlapping elements */
   @media (max-width:768px) and (orientation:portrait){
     body{cursor:auto}
     .cursor,.cursor-trail{display:none !important}
-    
+
     /* Hide desktop performance toggle on mobile */
     .performance-toggle,.performance-panel{display:none !important}
     
+    /* Show mobile performance toggle */
+    .mobile-perf-toggle{display:flex !important}
+
     header{padding:20px 0 0;transform:translateY(-100%);opacity:0}
     header.visible{transform:translateY(0);opacity:1}
     .divider{display:none}
@@ -503,6 +532,7 @@
     .panel:hover{transform:none}
     video{border-radius:0}
 
+    /* FIXED: Control panel positioning for mobile */
     .control-panel{
       position:fixed;
       bottom:30px;
@@ -512,7 +542,7 @@
       padding:8px 16px;
       opacity:1 !important;
       background:rgba(0,0,0,0.95);
-      backdrop-filter:blur(30px);
+      backdrop-filter:blur(15px);
       border:1px solid rgba(255,107,107,0.4);
       z-index:50;
       box-shadow:var(--shadow-strong);
@@ -522,6 +552,7 @@
     .volume-slider{width:50px;height:4px}
     .control-btn{width:32px;height:32px;font-size:12px}
 
+    /* FIXED: Emoji panel mobile positioning - no overlap */
     .emoji-panel{
       position:fixed;
       right:15px;
@@ -533,21 +564,20 @@
     .emoji-btn{width:48px;height:48px;font-size:22px;border:1.5px solid rgba(255,255,255,.4)}
     .emoji-count{right:60px;min-width:50px;height:28px;font-size:11px}
 
-    .live-badge{top:15px;right:15px;font-size:12px;padding:8px 12px;z-index:55}
-    .reactions-badge{top:15px;left:15px;font-size:12px;padding:8px 12px;z-index:55}
+    /* FIXED: Badge positioning - no overlap */
+    .live-badge{top:15px;left:15px;font-size:12px;padding:8px 12px;z-index:55}
+    .reactions-badge{bottom:90px;left:15px;font-size:12px;padding:8px 12px;z-index:55}
+    
     .chip{position:fixed;bottom:85px;right:15px;font-size:11px;padding:6px 10px;z-index:40}
-    .audio-visualizer{position:fixed;bottom:85px;left:15px;z-index:40}
+    .audio-visualizer{position:fixed;bottom:85px;right:80px;z-index:40}
     .quality-indicator{top:60px;left:15px;font-size:10px;padding:4px 8px;z-index:40}
 
-    /* Show mobile performance toggle */
-    .mobile-perf-toggle{display:flex}
-
     .info,.schedule{position:relative;margin:0;border-radius:20px 20px 0 0;transform:translateY(-100%);opacity:0}
     .info.visible,.schedule.visible{transform:translateY(0);opacity:1}
 
     .bottom-sheet{
       position:fixed;left:0;right:0;bottom:0;z-index:35;
-      background:rgba(0,0,0,.95);backdrop-filter:blur(30px);
+      background:rgba(0,0,0,.95);backdrop-filter:blur(15px);
       border-top:1px solid rgba(255,107,107,.5);
       max-height:45vh;overflow:auto;padding:15px;
       transform:translateY(100%);transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
@@ -556,10 +586,10 @@
     .bottom-sheet.visible{transform:translateY(0)}
 
     .auto-hide-indicator{
-      position:fixed;bottom:100px;left:50%;transform:translateX(-50%);
+      position:fixed;bottom:150px;left:50%;transform:translateX(-50%);
       background:rgba(0,0,0,.9);color:rgba(255,255,255,.9);
       padding:8px 20px;border-radius:20px;font-size:12px;z-index:30;
-      opacity:0;transition:opacity 0.4s ease;backdrop-filter:blur(20px);
+      opacity:0;transition:opacity 0.4s ease;backdrop-filter:blur(10px);
       border:1px solid rgba(255,107,107,0.4);box-shadow:var(--shadow-soft);
     }
     .auto-hide-indicator.visible{opacity:1}
@@ -577,7 +607,6 @@
     .panel{max-width:95%;margin:15px auto 0}
     .emoji-panel{right:25px;bottom:120px;gap:14px}
     .control-panel{bottom:25px;gap:12px;padding:12px 22px}
-    .live-badge{right:320px}
   }
 
   /* Enhanced Large Desktop Support */
@@ -588,10 +617,9 @@
     .control-panel{gap:18px;padding:18px 32px}
     .mute-btn{width:56px;height:56px}
     .volume-slider{width:120px}
-    .live-badge{right:400px}
   }
 
-  /* Performance optimizations */
+  /* OPTIMIZED: Performance optimizations */
   .low-performance *{animation-duration:4s !important}
   .low-performance .aurora{opacity:0.4}
   .low-performance .music-notes{display:none}
@@ -609,15 +637,15 @@
   <div class="cursor" id="cursor"></div>
   <div class="music-notes" id="music-notes"></div>
 
-  <!-- NEW: Desktop Performance Toggle -->
+  <!-- Desktop Performance Toggle -->
   <div class="performance-toggle" id="performance-toggle">
     <span class="mode-icon">⚙️</span>
     <span class="mode-text" id="mode-text">Balanced</span>
   </div>
 
-  <!-- NEW: Desktop Performance Panel -->
+  <!-- Enhanced Desktop Performance Panel -->
   <div class="performance-panel" id="performance-panel">
-    <h3>🎨 Visual Quality</h3>
+    <h3>🎨 Visual Quality & Performance</h3>
     <div class="mode-grid">
       <div class="mode-card" data-mode="ultra">
         <span class="mode-emoji">🌟</span>
@@ -639,6 +667,11 @@
         <div class="mode-name">Performance</div>
         <div class="mode-desc">Maximum speed & efficiency</div>
       </div>
+      <div class="mode-card" data-mode="mobile-plus">
+        <span class="mode-emoji">📱</span>
+        <div class="mode-name">Mobile+</div>
+        <div class="mode-desc">Ultra mobile optimization</div>
+      </div>
     </div>
     <div class="perf-metrics">
       <h4>📊 Current Status</h4>
@@ -652,29 +685,29 @@
       </div>
       <div class="metric-item">
         <span>Particles:</span>
-        <span class="metric-value" id="particles-count">6 Active</span>
+        <span class="metric-value" id="particles-count">4 Active</span>
       </div>
     </div>
   </div>
 
-  <!-- NEW: Mobile Performance Toggle -->
+  <!-- Enhanced Mobile Performance Toggle -->
   <div class="mobile-perf-toggle" id="mobile-perf-toggle">
     <span class="perf-icon">⚙️</span>
   </div>
 
-  <!-- NEW: Mobile Performance Panel -->
+  <!-- Enhanced Mobile Performance Panel -->
   <div class="mobile-perf-panel" id="mobile-perf-panel">
     <h3>🎨 Visual Quality</h3>
     <div class="mode-grid">
       <div class="mode-card" data-mode="ultra">
         <span class="mode-emoji">🌟</span>
         <div class="mode-name">Ultra</div>
-        <div class="mode-desc">Max effects</div>
+        <div class="mode-desc">Max</div>
       </div>
       <div class="mode-card" data-mode="high">
         <span class="mode-emoji">✨</span>
         <div class="mode-name">High</div>
-        <div class="mode-desc">Rich visuals</div>
+        <div class="mode-desc">Rich</div>
       </div>
       <div class="mode-card active" data-mode="balanced">
         <span class="mode-emoji">⚖️</span>
@@ -684,7 +717,12 @@
       <div class="mode-card" data-mode="performance">
         <span class="mode-emoji">🚀</span>
         <div class="mode-name">Fast</div>
-        <div class="mode-desc">Max speed</div>
+        <div class="mode-desc">Speed</div>
+      </div>
+      <div class="mode-card" data-mode="mobile-plus">
+        <span class="mode-emoji">📱</span>
+        <div class="mode-name">Mobile+</div>
+        <div class="mode-desc">Ultra</div>
       </div>
     </div>
   </div>
@@ -724,6 +762,10 @@
       <span>Performance Toggle</span>
       <span class="shortcut-key">Q</span>
     </div>
+    <div class="shortcut-item">
+      <span>Mobile+ Mode</span>
+      <span class="shortcut-key">Shift+M</span>
+    </div>
     <div class="shortcut-item">
       <span>Show Shortcuts</span>
       <span class="shortcut-key">?</span>
@@ -740,7 +782,23 @@
 
   <main>
     <section class="panel" id="panel">
-      <canvas id="color-canvas"></canvas>
+      <canvas id="color-canvas" style="display:none"></canvas>
+      
+      <div class="unmute-overlay" id="unmute-overlay">
+        <button class="unmute-btn" id="unmute-btn">
+          <span>🔊</span>
+          <span>Enable Audio</span>
+        </button>
+      </div>
+
+      <video id="player" muted loop playsinline preload="metadata">
+        <source src="" />
+        Your browser does not support the video tag.
+      </video>
+
+      <div class="quality-indicator quality-hd" id="quality-indicator">HD</div>
+      <div class="chip" id="chip">Local: —</div>
+
       <div class="panel-accents">
         <div class="corner-accent"></div>
         <div class="corner-accent"></div>
@@ -748,166 +806,173 @@
         <div class="corner-accent"></div>
       </div>
 
-      <!-- Enhanced Progress Bar -->
-      <div class="progress-bar">
-        <div class="progress-fill" id="progress-fill"></div>
-      </div>
-
-      <!-- Enhanced Quality Indicator -->
-      <div class="quality-indicator quality-hd" id="quality-indicator">HD</div>
-
-      <!-- Enhanced Unmute Overlay -->
-      <div class="unmute-overlay" id="unmute-overlay">
-        <button class="unmute-btn" id="unmute-btn">
-          <span>🔊</span>
-          <span>Click to Enable Sound</span>
-        </button>
+      <div class="audio-visualizer">
+        <div class="audio-bar"></div>
+        <div class="audio-bar"></div>
+        <div class="audio-bar"></div>
+        <div class="audio-bar"></div>
+        <div class="audio-bar"></div>
+        <div class="audio-bar"></div>
       </div>
 
-      <video id="player" autoplay muted playsinline loop crossorigin="anonymous"></video>
-      <div id="chip" class="chip"></div>
-
-      <!-- Enhanced Professional Control Panel -->
       <div class="control-panel" id="control-panel">
-        <div class="mute-btn" id="mute-btn" title="Mute/Unmute (M)">
-          <span class="mute-icon" id="mute-icon">🔇</span>
-        </div>
+        <button class="mute-btn" id="mute-btn">
+          <span class="mute-icon" id="mute-icon">🔊</span>
+        </button>
+        
         <div class="volume-control">
-          <div class="volume-slider" id="volume-slider" title="Volume">
+          <div class="volume-slider" id="volume-slider">
             <div class="volume-fill" id="volume-fill"></div>
           </div>
         </div>
-        <div class="control-btn" id="theater-btn" title="Theater Mode (T)">🎭</div>
-        <div class="control-btn" id="fullscreen-btn" title="Fullscreen (F)">⛶</div>
-        <div class="control-btn" id="pip-btn" title="Picture-in-Picture (P)">📱</div>
-        <div class="control-btn" id="shortcuts-btn" title="Keyboard Shortcuts (?)">⌨️</div>
+
+        <button class="control-btn" id="theater-btn" title="Theater Mode">
+          <span>🎭</span>
+        </button>
+
+        <button class="control-btn" id="fullscreen-btn" title="Fullscreen">
+          <span>⛶</span>
+        </button>
+
+        <button class="control-btn" id="pip-btn" title="Picture-in-Picture">
+          <span>⧉</span>
+        </button>
+
+        <button class="control-btn" id="shortcuts-btn" title="Keyboard Shortcuts">
+          <span>⌨</span>
+        </button>
       </div>
 
-      <!-- Enhanced Audio Visualizer -->
-      <div class="audio-visualizer" id="audio-visualizer">
-        <div class="audio-bar"></div>
-        <div class="audio-bar"></div>
-        <div class="audio-bar"></div>
-        <div class="audio-bar"></div>
-        <div class="audio-bar"></div>
-        <div class="audio-bar"></div>
+      <div class="progress-bar">
+        <div class="progress-fill" id="progress-fill"></div>
       </div>
 
-      <!-- Enhanced Emoji Panel -->
       <div class="emoji-panel" id="emoji-panel">
-        <div class="emoji-wrap">
-          <button class="emoji-btn" data-type="heart" aria-label="Heart">❤️</button>
+        <div class="emoji-btn" data-type="heart" title="Love it!">
+          <span>❤️</span>
           <div class="emoji-count" id="count-heart">0</div>
         </div>
-        <div class="emoji-wrap">
-          <button class="emoji-btn" data-type="fire" aria-label="Fire">🔥</button>
+
+        <div class="emoji-btn" data-type="fire" title="On Fire!">
+          <span>🔥</span>
           <div class="emoji-count" id="count-fire">0</div>
         </div>
-        <div class="emoji-wrap">
-          <button class="emoji-btn" data-type="dancer" aria-label="Dancer">💃</button>
+
+        <div class="emoji-btn" data-type="dancer" title="Amazing Dance!">
+          <span>💃</span>
           <div class="emoji-count" id="count-dancer">0</div>
         </div>
-        <div class="emoji-wrap">
-          <button class="emoji-btn" data-type="spark" aria-label="Sparkles">✨</button>
+
+        <div class="emoji-btn" data-type="spark" title="Magical!">
+          <span>✨</span>
           <div class="emoji-count" id="count-spark">0</div>
         </div>
       </div>
     </section>
+  </main>
 
-    <section class="info" id="main-info">
-      <h2 id="vtitle">—</h2>
-      <p id="vmeta">—</p>
-    </section>
-
-    <section class="schedule" id="main-schedule">
-      <h3 id="schedule-title">✨ Global Schedule (UTC) — Today</h3>
-      <div id="rows"></div>
+  <section class="info" id="main-info">
+    <h2 id="vtitle">✨ Belly Dance Stream ✨</h2>
+    <p id="vmeta">Loading amazing content...</p>
+  </section>
+
+  <section class="schedule" id="main-schedule">
+    <h3 id="schedule-title">✨ Global Schedule (UTC) ✨</h3>
+    <div id="rows"></div>
+  </section>
+
+  <!-- Mobile Bottom Sheet -->
+  <div class="bottom-sheet" id="bottom-sheet">
+    <section class="info">
+      <h2 id="vtitle2">✨ Belly Dance Stream ✨</h2>
+      <p id="vmeta2">Loading amazing content...</p>
     </section>
 
-    <section class="bottom-sheet" id="bottom-sheet">
-      <div class="info">
-        <h2 id="vtitle2">—</h2>
-        <p id="vmeta2">—</p>
-      </div>
-      <div class="schedule" style="margin-top:15px;">
-        <h3>Schedule</h3>
-        <div id="rows2"></div>
-      </div>
+    <section class="schedule">
+      <h3>✨ Today's Schedule ✨</h3>
+      <div id="rows2"></div>
     </section>
+  </div>
 
-    <div class="auto-hide-indicator" id="auto-hide-indicator">✨ Double-tap to show schedule ✨</div>
-
-  </main>
+  <div class="auto-hide-indicator" id="auto-hide-indicator">
+    Double tap to show schedule
+  </div>
 
-  <footer>✨ Pre-recorded performances looped 24/7 (Global UTC) ✨</footer>
+  <footer>
+    <p>✨ Ultimate Belly Dance Experience - Optimized for All Devices ✨</p>
+  </footer>
 
 <script>
-/* ============= ULTIMATE OPTIMIZED STREAMING INTERFACE ============= */
-const USE_UTC = true;
-let currentDominantColor = '#ff6b6b';
-let audioContext = null;
-let analyser = null;
-let mouseX = 0, mouseY = 0;
-let performanceMode = false;
-let maxFloatingElements = 10;
+/* OPTIMIZED: Global Variables & Performance Monitoring */
 let frameCount = 0;
-let isTheaterMode = false;
-let isControlPanelVisible = false;
-
-// NEW: Performance Mode State
 let currentPerformanceMode = 'balanced';
-let performanceModes = {
-  ultra: { particles: 15, animationSpeed: 1, effectIntensity: 1, name: 'Ultra', icon: '🌟' },
-  high: { particles: 10, animationSpeed: 0.8, effectIntensity: 0.8, name: 'High', icon: '✨' },
-  balanced: { particles: 6, animationSpeed: 0.6, effectIntensity: 0.6, name: 'Balanced', icon: '⚖️' },
-  performance: { particles: 3, animationSpeed: 0.3, effectIntensity: 0.3, name: 'Performance', icon: '🚀' }
-};
-
-// State
-let isMuted = true;
+let maxFloatingElements = 4;
+let audioEnabled = false;
+let audioContext = null;
+let analyser = null;
+let isMuted = false;
 let currentVolume = 0.5;
+let currentDominantColor = '#ff6b6b';
+let mouseX = 0, mouseY = 0;
 let isFullscreen = false;
 let isPictureInPicture = false;
-let audioEnabled = false;
+let isTheaterMode = false;
+let isControlPanelVisible = false;
 
-/* Enhanced Performance Detection with Real-time Monitoring */
+/* OPTIMIZED: Performance Monitoring System */
 const performanceCheck = {
-  fps: 60,
-  lastFrameTime: performance.now(),
+  lastTime: performance.now(),
   frameCount: 0,
-  fpsHistory: [],
   avgFps: 60,
-
   update() {
-    const currentTime = performance.now();
+    const now = performance.now();
     this.frameCount++;
+    
+    if (now - this.lastTime >= 1000) {
+      this.avgFps = Math.round((this.frameCount * 1000) / (now - this.lastTime));
+      this.frameCount = 0;
+      this.lastTime = now;
 
-    if (this.frameCount % 30 === 0) {
-      const deltaTime = currentTime - this.lastFrameTime;
-      this.fps = Math.round(30000 / deltaTime);
-      
-      this.fpsHistory.push(this.fps);
-      if (this.fpsHistory.length > 10) this.fpsHistory.shift();
-      
-      this.avgFps = Math.round(this.fpsHistory.reduce((a, b) => a + b, 0) / this.fpsHistory.length);
-      
-      // Update performance metrics display
-      updatePerformanceMetrics();
-      
-      this.lastFrameTime = currentTime;
+      // Auto-adjust performance mode based on FPS
+      this.autoAdjustPerformance();
+    }
+  },
+
+  autoAdjustPerformance() {
+    if (this.avgFps < 30 && currentPerformanceMode !== 'mobile-plus') {
+      console.log('Low FPS detected, switching to Mobile+ mode');
+      setPerformanceMode('mobile-plus');
+    } else if (this.avgFps > 55 && currentPerformanceMode === 'mobile-plus') {
+      console.log('FPS improved, switching to Performance mode');
+      setPerformanceMode('performance');
     }
   }
 };
 
-/* NEW: Performance Mode System */
+/* OPTIMIZED: Performance Mode Configuration */
+const performanceModes = {
+  'ultra': { name: 'Ultra', icon: '🌟', particles: 8, animationSpeed: 1.0, effectIntensity: 1.0 },
+  'high': { name: 'High', icon: '✨', particles: 6, animationSpeed: 0.8, effectIntensity: 0.8 },
+  'balanced': { name: 'Balanced', icon: '⚖️', particles: 4, animationSpeed: 0.6, effectIntensity: 0.6 },
+  'performance': { name: 'Performance', icon: '🚀', particles: 2, animationSpeed: 0.4, effectIntensity: 0.4 },
+  'mobile-plus': { name: 'Mobile+', icon: '📱', particles: 1, animationSpeed: 0.2, effectIntensity: 0.2 }
+};
+
+/* OPTIMIZED: Performance Mode System */
 function initPerformanceModeSystem() {
   const desktopToggle = document.getElementById('performance-toggle');
   const desktopPanel = document.getElementById('performance-panel');
   const mobileToggle = document.getElementById('mobile-perf-toggle');
   const mobilePanel = document.getElementById('mobile-perf-panel');
 
-  // Load saved preference
-  const savedMode = localStorage.getItem('performanceMode') || 'balanced';
+  // Load saved preference with mobile auto-detection
+  let savedMode = localStorage.getItem('performanceMode') || 'balanced';
+
+  // Auto-suggest Mobile+ for mobile devices
+  if (!localStorage.getItem('performanceMode') && isMobileDevice()) {
+    savedMode = 'mobile-plus';
+  }
+
   setPerformanceMode(savedMode);
 
   // Desktop toggle
@@ -930,7 +995,7 @@ function initPerformanceModeSystem() {
     if (modeCard) {
       const mode = modeCard.getAttribute('data-mode');
       setPerformanceMode(mode);
-      
+
       // Hide panels after selection
       desktopPanel?.classList.remove('visible');
       mobilePanel?.classList.remove('visible');
@@ -947,13 +1012,15 @@ function initPerformanceModeSystem() {
     }
   });
 
-  // Keyboard shortcut
+  // Keyboard shortcuts
   document.addEventListener('keydown', function(e) {
-    if (e.key.toLowerCase() === 'q') {
+    if (e.key.toLowerCase() === 'q' && !e.shiftKey) {
       const modes = Object.keys(performanceModes);
       const currentIndex = modes.indexOf(currentPerformanceMode);
       const nextIndex = (currentIndex + 1) % modes.length;
       setPerformanceMode(modes[nextIndex]);
+    } else if (e.key.toLowerCase() === 'm' && e.shiftKey) {
+      setPerformanceMode('mobile-plus');
     }
   });
 }
@@ -963,18 +1030,18 @@ function setPerformanceMode(mode) {
 
   currentPerformanceMode = mode;
   const config = performanceModes[mode];
-  
+
   // Update body class
   document.body.className = document.body.className.replace(/\b\w+-mode\b/g, '');
   document.body.classList.add(mode + '-mode');
-  
+
   // Update maxFloatingElements
   maxFloatingElements = config.particles;
-  
+
   // Update UI indicators
   const modeText = document.getElementById('mode-text');
   if (modeText) modeText.textContent = config.name;
-  
+
   // Update active cards
   document.querySelectorAll('.mode-card').forEach(card => {
     card.classList.remove('active');
@@ -989,24 +1056,22 @@ function setPerformanceMode(mode) {
 
   // Save preference
   localStorage.setItem('performanceMode', mode);
-  
+
   // Apply performance adjustments
   applyPerformanceSettings();
-  
+
   console.log(`Performance mode set to: ${config.name}`);
 }
 
 function applyPerformanceSettings() {
   const config = performanceModes[currentPerformanceMode];
-  
+
   // Adjust animation speeds
-  const animatableElements = document.querySelectorAll('.aurora, .corner-accent, .note, .bubble');
-  animatableElements.forEach(el => {
-    const currentDuration = parseFloat(getComputedStyle(el).animationDuration) || 1;
-    const newDuration = currentDuration / config.animationSpeed;
-    el.style.animationDuration = newDuration + 's';
-  });
-  
+  const root = document.documentElement;
+  root.style.setProperty('--animation-speed', config.animationSpeed);
+  root.style.setProperty('--particle-count', config.particles);
+  root.style.setProperty('--effect-intensity', config.effectIntensity);
+
   // Update performance metrics display
   updatePerformanceMetrics();
 }
@@ -1015,21 +1080,23 @@ function updatePerformanceMetrics() {
   const fpsDisplay = document.getElementById('fps-display');
   const effectsLevel = document.getElementById('effects-level');
   const particlesCount = document.getElementById('particles-count');
-  
+
   if (fpsDisplay) fpsDisplay.textContent = performanceCheck.avgFps + ' FPS';
   if (effectsLevel) {
-    const levels = { ultra: 'Maximum', high: 'High', balanced: 'Medium', performance: 'Low' };
+    const levels = { ultra: 'Maximum', high: 'High', balanced: 'Medium', performance: 'Low', 'mobile-plus': 'Minimal' };
     effectsLevel.textContent = levels[currentPerformanceMode];
   }
   if (particlesCount) particlesCount.textContent = maxFloatingElements + ' Active';
 }
 
-/* ENHANCED: Sophisticated Cursor System */
-function initEnhancedCursor(){
+/* OPTIMIZED: Cursor System - Desktop Only */
+let trailCount = 0;
+const maxTrails = 3;
+
+function initOptimizedCursor(){
   if (isMobileDevice()) return;
-  
+
   const cursor = document.getElementById('cursor');
-  let trailCount = 0;
   let isMoving = false;
   let moveTimeout;
 
@@ -1038,15 +1105,15 @@ function initEnhancedCursor(){
     mouseY = e.clientY;
 
     cursor.style.transform = `translate3d(${mouseX - 10}px, ${mouseY - 10}px, 0)`;
-    
+
     isMoving = true;
     clearTimeout(moveTimeout);
-    
-    // Enhanced trail with performance awareness
+
+    // Optimized trail with performance limits
     const config = performanceModes[currentPerformanceMode];
-    const shouldCreateTrail = Math.random() > (0.88 - (config.effectIntensity * 0.1));
-    
-    if(shouldCreateTrail && trailCount < Math.floor(5 * config.effectIntensity)) {
+    const shouldCreateTrail = Math.random() > (0.9 - (config.effectIntensity * 0.1));
+
+    if(shouldCreateTrail && trailCount < maxTrails) {
       trailCount++;
       const trail = document.createElement('div');
       trail.className = 'cursor-trail';
@@ -1054,34 +1121,30 @@ function initEnhancedCursor(){
       document.body.appendChild(trail);
 
       setTimeout(function() {
-        if (trail.parentNode) trail.remove();
-        trailCount--;
-      }, 800 * config.animationSpeed);
+        if (trail.parentNode) {
+          trail.remove();
+          trailCount--;
+        }
+      }, 800);
     }
-    
+
     moveTimeout = setTimeout(() => { isMoving = false; }, 150);
   });
 
-  // Enhanced hover effects with smooth transitions
+  // Optimized hover effects
   const interactiveElements = 'button, .control-btn, .emoji-btn, .mute-btn, .row, .shortcut-item, .mode-card, .performance-toggle';
-  
+
   document.addEventListener('mouseenter', function(e) {
     if (e.target.matches(interactiveElements)) {
       cursor.classList.add('hover');
     }
   }, true);
-  
+
   document.addEventListener('mouseleave', function(e) {
     if (e.target.matches(interactiveElements)) {
       cursor.classList.remove('hover');
     }
   }, true);
-
-  document.addEventListener('scroll', function() {
-    if (isMoving) {
-      cursor.style.transform = `translate3d(${mouseX - 10}px, ${mouseY - 10}px, 0)`;
-    }
-  }, { passive: true });
 }
 
 function isMobileDevice() {
@@ -1089,7 +1152,7 @@ function isMobileDevice() {
          (window.innerWidth <= 768 && 'ontouchstart' in window);
 }
 
-/* Enhanced Audio Enable */
+/* OPTIMIZED: Audio Enable */
 function initSimpleAudioEnable() {
   const overlay = document.getElementById('unmute-overlay');
   const unmuteBtn = document.getElementById('unmute-btn');
@@ -1108,7 +1171,7 @@ function initSimpleAudioEnable() {
     try {
       if (!audioContext) {
         audioContext = new (window.AudioContext || window.webkitAudioContext)();
-        initEnhancedAudioAnalysis();
+        initOptimizedAudioAnalysis();
       }
     } catch (e) {
       console.log('Audio context creation failed, continuing without visualizer');
@@ -1121,7 +1184,7 @@ function initSimpleAudioEnable() {
   }
 }
 
-/* Enhanced Schedules */
+/* OPTIMIZED: Schedules */
 const SCHEDULE_A = [
   { title:"Dance in Front of the Library of Alexandria", url:"https://ik.imagekit.io/plerqlkuh/A%20dance%20in%20front%20of%20the%20Library%20of%20Alexandria.mp4", duration:155, start:0, end:2.667 },
   { title:"✨ Belly dance ✨ - sensual dance", url:"https://ik.imagekit.io/plerqlkuh/%E2%9C%A8%20Belly%20dance%20%E2%9C%A8%20-%20-%20sensual%20dance.mp4", duration:113, start:2.667, end:5.333 },
@@ -1146,6 +1209,8 @@ const SCHEDULE_B = [
   { title:"✨ Belly dance ✨ - secret of the goddess", url:"https://ik.imagekit.io/b3mprpaei/%E2%9C%A8%20Belly%20dance%20%E2%9C%A8%20-%20secret%20of%20the%20goddess.mp4", duration:166, start:19.1, end:21 }
 ];
 
+const USE_UTC = true;
+
 /* Utilities */
 function nowHour(){
   const n=new Date();
@@ -1156,7 +1221,7 @@ function utcDayIndex(){ return (new Date()).getUTCDay(); }
 function secFmt(s){return `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`;}
 function clamp(n,min,max){return Math.max(min,Math.min(max,n));}
 
-/* Enhanced Control Functions (same as before but with performance awareness) */
+/* OPTIMIZED: Control Functions */
 function initMuteControl() {
   const muteBtn = document.getElementById('mute-btn');
   const muteIcon = document.getElementById('mute-icon');
@@ -1179,14 +1244,9 @@ function initMuteControl() {
       muteBtn.classList.remove('muted');
     }
 
-    const config = performanceModes[currentPerformanceMode];
-    const animationDuration = 300 * config.animationSpeed;
-    
-    muteBtn.animate([
-      {transform: 'scale(1)'},
-      {transform: 'scale(1.25)'},
-      {transform: 'scale(1)'}
-    ], {duration: animationDuration, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)'});
+    // Optimized animation
+    muteBtn.style.transform = 'scale(1.25)';
+    setTimeout(() => { muteBtn.style.transform = ''; }, 200);
   });
 }
 
@@ -1229,15 +1289,6 @@ function initTheaterMode() {
     isTheaterMode = !isTheaterMode;
     document.body.classList.toggle('theater-mode', isTheaterMode);
     theaterBtn.classList.toggle('active', isTheaterMode);
-
-    const config = performanceModes[currentPerformanceMode];
-    const animationDuration = 500 * config.animationSpeed;
-
-    theaterBtn.animate([
-      {transform: 'rotateY(0deg) scale(1)'},
-      {transform: 'rotateY(180deg) scale(1.1)'},
-      {transform: 'rotateY(0deg) scale(1)'}
-    ], {duration: animationDuration, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)'});
   });
 }
 
@@ -1261,7 +1312,7 @@ function initFullscreenControl() {
 
   document.addEventListener('fullscreenchange', function() {
     isFullscreen = !!document.fullscreenElement;
-    fullscreenBtn.classList.toggle('active', isFullscreen);
+    document.getElementById('fullscreen-btn').classList.toggle('active', isFullscreen);
   });
 }
 
@@ -1309,7 +1360,7 @@ function initKeyboardShortcuts() {
   document.addEventListener('keydown', function(e) {
     switch(e.key.toLowerCase()) {
       case 'm':
-        document.getElementById('mute-btn').click();
+        if (!e.shiftKey) document.getElementById('mute-btn').click();
         break;
       case 'f':
         document.getElementById('fullscreen-btn').click();
@@ -1320,9 +1371,6 @@ function initKeyboardShortcuts() {
       case 'p':
         document.getElementById('pip-btn').click();
         break;
-      case 'q':
-        // Performance mode cycling handled in initPerformanceModeSystem
-        break;
       case 'arrowup':
         e.preventDefault();
         if (audioEnabled) {
@@ -1414,9 +1462,11 @@ function initQualityIndicator() {
   });
 }
 
-/* Enhanced Floating Elements with Performance Awareness */
+/* OPTIMIZED: Floating Elements with Performance Limits */
 let activeFloatingElements = 0;
-function createEnhancedFloatingNote(){
+let noteCreateTimer = null;
+
+function createOptimizedFloatingNote(){
   const config = performanceModes[currentPerformanceMode];
   if(activeFloatingElements >= config.particles) return;
 
@@ -1431,26 +1481,30 @@ function createEnhancedFloatingNote(){
 
   activeFloatingElements++;
   document.getElementById('music-notes').appendChild(note);
+  
   setTimeout(function() {
-    note.remove();
-    activeFloatingElements--;
-  }, 14000 / config.animationSpeed);
+    if (note.parentNode) {
+      note.remove();
+      activeFloatingElements--;
+    }
+  }, 12000 / config.animationSpeed);
 }
 
-function initEnhancedColorSampling(){
+function initOptimizedColorSampling(){
   const canvas = document.getElementById('color-canvas');
   const ctx = canvas.getContext('2d');
   const video = document.getElementById('player');
+  let colorSampleTimer = null;
 
-  function sampleEnhancedColors(){
+  function sampleColors(){
     if(!video.videoWidth || !video.videoHeight) return;
 
-    canvas.width = 40;
-    canvas.height = 22;
+    canvas.width = 30;
+    canvas.height = 20;
 
     try{
-      ctx.drawImage(video, 0, 0, 40, 22);
-      const imageData = ctx.getImageData(10, 6, 20, 10);
+      ctx.drawImage(video, 0, 0, 30, 20);
+      const imageData = ctx.getImageData(5, 5, 20, 10);
       const data = imageData.data;
 
       let r = 0, g = 0, b = 0, count = 0;
@@ -1466,24 +1520,25 @@ function initEnhancedColorSampling(){
         r = Math.floor(r / count);
         g = Math.floor(g / count);
         b = Math.floor(b / count);
-
-        updateEnhancedDynamicColors(r, g, b);
+        updateDynamicColors(r, g, b);
       }
     }catch(e){
+      // Fallback to time-based colors
       const time = Date.now() / 2500;
       const r = Math.floor(128 + 127 * Math.sin(time * 0.15));
       const g = Math.floor(128 + 127 * Math.sin(time * 0.25));
       const b = Math.floor(128 + 127 * Math.sin(time * 0.35));
-      updateEnhancedDynamicColors(r, g, b);
+      updateDynamicColors(r, g, b);
     }
   }
 
   const config = performanceModes[currentPerformanceMode];
-  const interval = 700 / config.animationSpeed;
-  setInterval(sampleEnhancedColors, interval);
+  const interval = Math.max(500, 1000 / config.animationSpeed);
+  
+  colorSampleTimer = setInterval(sampleColors, interval);
 }
 
-function updateEnhancedDynamicColors(r, g, b){
+function updateDynamicColors(r, g, b){
   const root = document.documentElement;
   const config = performanceModes[currentPerformanceMode];
 
@@ -1496,13 +1551,13 @@ function updateEnhancedDynamicColors(r, g, b){
   const compG = Math.max(0, 255 - g + intensity * 0.5);
   const compB = Math.max(0, 255 - b + intensity * 0.875);
 
-  root.style.setProperty('--neon-primary', 'rgb(' + enhancedR + ', ' + enhancedG + ', ' + enhancedB + ')');
-  root.style.setProperty('--neon-secondary', 'rgb(' + compR + ', ' + compG + ', ' + compB + ')');
+  root.style.setProperty('--neon-primary', `rgb(${enhancedR}, ${enhancedG}, ${enhancedB})`);
+  root.style.setProperty('--neon-secondary', `rgb(${compR}, ${compG}, ${compB})`);
 
-  currentDominantColor = 'rgb(' + enhancedR + ', ' + enhancedG + ', ' + enhancedB + ')';
+  currentDominantColor = `rgb(${enhancedR}, ${enhancedG}, ${enhancedB})`;
 }
 
-function initEnhancedAudioAnalysis(){
+function initOptimizedAudioAnalysis(){
   if (!audioEnabled || !audioContext) return;
 
   const video = document.getElementById('player');
@@ -1518,11 +1573,15 @@ function initEnhancedAudioAnalysis(){
     const bufferLength = analyser.frequencyBinCount;
     const dataArray = new Uint8Array(bufferLength);
 
-    function updateEnhancedVisualizer(){
+    let visualizerFrame = 0;
+
+    function updateVisualizer(){
       const config = performanceModes[currentPerformanceMode];
-      
-      if(frameCount % Math.max(1, Math.floor(3 / config.animationSpeed)) !== 0) {
-        requestAnimationFrame(updateEnhancedVisualizer);
+
+      // Throttle updates based on performance mode
+      if(visualizerFrame % Math.max(1, Math.floor(4 / config.animationSpeed)) !== 0) {
+        visualizerFrame++;
+        requestAnimationFrame(updateVisualizer);
         return;
       }
 
@@ -1533,21 +1592,22 @@ function initEnhancedAudioAnalysis(){
         const value = dataArray[i] || 0;
         const normalizedValue = value / 255;
         const height = Math.max(8, normalizedValue * 50 * config.effectIntensity);
-
         bar.style.height = height + 'px';
       });
 
-      requestAnimationFrame(updateEnhancedVisualizer);
+      visualizerFrame++;
+      requestAnimationFrame(updateVisualizer);
     }
 
-    updateEnhancedVisualizer();
+    updateVisualizer();
 
   }catch(e){
+    // Fallback to random visualization
     const bars = document.querySelectorAll('.audio-bar');
     bars.forEach(function(bar, i) {
       const config = performanceModes[currentPerformanceMode];
-      const interval = (120 + Math.random() * 180) / config.animationSpeed;
-      
+      const interval = Math.max(100, (120 + Math.random() * 180) / config.animationSpeed);
+
       setInterval(function() {
         const randomHeight = (8 + Math.random() * 40) * config.effectIntensity;
         bar.style.height = randomHeight + 'px';
@@ -1556,13 +1616,14 @@ function initEnhancedAudioAnalysis(){
   }
 }
 
-/* Rest of the JavaScript code continues with the same pattern... */
+/* Schedule and Content Management */
 function todaySchedule(){
   const d = utcDayIndex();
   if(d===1 || d===2 || d===3) return { which:'A (Mon-Tue-Wed)', list: SCHEDULE_A };
   return { which:'B (Thu-Fri-Sat-Sun)', list: SCHEDULE_B };
 }
 
+// Cache DOM elements for better performance
 const $player = document.getElementById('player');
 const $vtitle = document.getElementById('vtitle');
 const $vmeta = document.getElementById('vmeta');
@@ -1604,7 +1665,7 @@ function showSchedule() {
   isScheduleVisible = true;
 
   if (autoHideTimer) clearTimeout(autoHideTimer);
-  autoHideTimer = setTimeout(function() { hideSchedule(); }, 6000);
+  autoHideTimer = setTimeout(hideSchedule, 6000);
 }
 
 function hideSchedule() {
@@ -1634,7 +1695,7 @@ document.addEventListener('click', function(e) {
   if (!isMobilePortrait()) return;
   if (e.target.closest('.emoji-btn') || e.target.closest('.bottom-sheet') ||
       e.target.closest('header') || e.target.closest('.info') || e.target.closest('.schedule') ||
-      e.target.closest('.control-panel') || e.target.closest('.mobile-perf-toggle') || 
+      e.target.closest('.control-panel') || e.target.closest('.mobile-perf-toggle') ||
       e.target.closest('.mobile-perf-panel')) return;
 
   const currentTime = new Date().getTime();
@@ -1751,13 +1812,17 @@ $player.addEventListener('loadedmetadata', function(){
   }
 
   setTimeout(function() {
-    initEnhancedColorSampling();
+    initOptimizedColorSampling();
   }, 1000);
 });
 
-function createEnhancedBubble(){
+/* OPTIMIZED: Bubble System */
+let activeBubbles = 0;
+const maxBubbles = 10;
+
+function createOptimizedBubble(){
   const config = performanceModes[currentPerformanceMode];
-  if(activeFloatingElements >= config.particles) return;
+  if(activeBubbles >= Math.min(maxBubbles, config.particles)) return;
 
   const b = document.createElement('div');
   b.className = 'bubble';
@@ -1768,14 +1833,18 @@ function createEnhancedBubble(){
   b.style.animationDuration = ((25 + Math.random() * 25) / config.animationSpeed) + 's';
   b.style.opacity = 0.5 * config.effectIntensity;
 
-  activeFloatingElements++;
+  activeBubbles++;
   document.getElementById('bubbles').appendChild(b);
+  
   setTimeout(function() {
-    b.remove();
-    activeFloatingElements--;
-  }, 50000 / config.animationSpeed);
+    if (b.parentNode) {
+      b.remove();
+      activeBubbles--;
+    }
+  }, 40000 / config.animationSpeed);
 }
 
+/* OPTIMIZED: Live Count System */
 const $liveCount = document.getElementById('live-count');
 const BUCKETS = [
   {start:0,end:6,min:700,max:2000},
@@ -1814,6 +1883,7 @@ document.addEventListener('visibilitychange', function(){
 initLive();
 liveTimer = setTimeout(tickLive, delay());
 
+/* OPTIMIZED: Reactions System */
 const EMOJIS = [{key:'heart',sym:'❤️'},{key:'fire',sym:'🔥'},{key:'dancer',sym:'💃'},{key:'spark',sym:'✨'}];
 const STORAGE_PREFIX = 'pro-reactions:';
 function utcDateKey(){ const d=new Date(); return d.getUTCFullYear() + '-' + String(d.getUTCMonth()+1).padStart(2,'0') + '-' + String(d.getUTCDate()).padStart(2,'0'); }
@@ -1856,10 +1926,13 @@ function renderReactions(){
     'Today ❤️' + reactionCounts.heart + ' 🔥' + reactionCounts.fire + ' 💃' + reactionCounts.dancer + ' ✨' + reactionCounts.spark;
 }
 
+/* OPTIMIZED: Particle System */
 let activeParticles = 0;
-function spawnEnhancedParticles(type, x, y){
+const maxParticles = 15;
+
+function spawnOptimizedParticles(type, x, y){
   const config = performanceModes[currentPerformanceMode];
-  if(activeParticles > 20 * config.effectIntensity) return;
+  if(activeParticles > maxParticles * config.effectIntensity) return;
 
   const pane = document.getElementById('panel').getBoundingClientRect();
   const burst = document.createElement('div');
@@ -1871,12 +1944,15 @@ function spawnEnhancedParticles(type, x, y){
   burst.style.filter = 'drop-shadow(0 0 15px ' + currentDominantColor + ')';
   document.getElementById('panel').appendChild(burst);
   activeParticles++;
+  
   setTimeout(function(){
-    burst.remove();
-    activeParticles--;
-  },1000 / config.animationSpeed);
+    if (burst.parentNode) {
+      burst.remove();
+      activeParticles--;
+    }
+  }, 1000);
 
-  const particleCount = Math.floor((performanceMode ? 5 : 10) * config.effectIntensity);
+  const particleCount = Math.floor((config.effectIntensity > 0.5 ? 8 : 4) * config.effectIntensity);
   for(let i=0;i<particleCount;i++){
     const p = document.createElement('div');
     p.className='particle';
@@ -1888,10 +1964,13 @@ function spawnEnhancedParticles(type, x, y){
     p.style.filter = 'drop-shadow(0 0 10px ' + currentDominantColor + ')';
     document.getElementById('panel').appendChild(p);
     activeParticles++;
+    
     setTimeout(function(){
-      p.remove();
-      activeParticles--;
-    },2000 / config.animationSpeed);
+      if (p.parentNode) {
+        p.remove();
+        activeParticles--;
+      }
+    }, 2000);
   }
 }
 
@@ -1907,16 +1986,11 @@ function setupEmojiClicks(){
     reactionCounts[type] = (reactionCounts[type]||0) + 1;
     saveLocalInc(type);
     renderReactions();
-    spawnEnhancedParticles(type, x, y);
-    
-    const config = performanceModes[currentPerformanceMode];
-    const animationDuration = 400 * config.animationSpeed;
-    
-    btn.animate([
-      {transform:'scale(1) rotateZ(0deg)', filter:'brightness(1)'},
-      {transform:'scale(1.2) rotateZ(15deg)', filter:'brightness(1.4)'},
-      {transform:'scale(1) rotateZ(0deg)', filter:'brightness(1)'}
-    ],{duration: animationDuration, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)'});
+    spawnOptimizedParticles(type, x, y);
+
+    // Optimized animation
+    btn.style.transform = 'scale(1.2) rotateZ(15deg)';
+    setTimeout(() => { btn.style.transform = ''; }, 300);
   });
 }
 loadReactions();
@@ -1935,7 +2009,7 @@ function isMobilePortrait(){
 
 function applyMobileLayout(){
   if(isMobilePortrait()) {
-    setTimeout(function() { showSchedule(); }, 800);
+    setTimeout(showSchedule, 800);
   } else {
     $header.classList.add('visible');
     $info.classList.add('visible');
@@ -1948,18 +2022,18 @@ function applyMobileLayout(){
   }
 }
 
-// Initialize everything
+// OPTIMIZED: Initialize everything with proper cleanup
 document.addEventListener('DOMContentLoaded', function() {
-  // NEW: Initialize performance mode system first
+  // Initialize performance mode system first
   initPerformanceModeSystem();
-  
+
   initSimpleAudioEnable();
   initWelcomeText();
-  
+
   if (!isMobileDevice()) {
-    initEnhancedCursor();
+    initOptimizedCursor();
   }
-  
+
   applyMobileLayout();
   window.addEventListener('resize', applyMobileLayout);
 
@@ -1975,25 +2049,44 @@ document.addEventListener('DOMContentLoaded', function() {
 
   schedulePlay();
 
-  // Performance-aware intervals
-  setInterval(function() {
+  // OPTIMIZED: Performance-aware intervals with cleanup
+  const noteInterval = setInterval(function() {
     const config = performanceModes[currentPerformanceMode];
-    if(Math.random() > (1 - config.effectIntensity * 0.7)) createEnhancedFloatingNote();
-  }, 5000);
+    if(Math.random() > (1 - config.effectIntensity * 0.5)) {
+      createOptimizedFloatingNote();
+    }
+  }, 4000);
 
-  setInterval(function() {
+  const bubbleInterval = setInterval(function() {
     const config = performanceModes[currentPerformanceMode];
-    if(Math.random() > (1 - config.effectIntensity * 0.8)) createEnhancedBubble();
-  }, 1000);
+    if(Math.random() > (1 - config.effectIntensity * 0.6)) {
+      createOptimizedBubble();
+    }
+  }, 1500);
 
-  function enhancedPerformanceMonitor() {
+  // OPTIMIZED: Performance monitoring with throttling
+  function optimizedPerformanceMonitor() {
     frameCount++;
-    performanceCheck.update();
-    requestAnimationFrame(enhancedPerformanceMonitor);
+    
+    // Only update performance check every 60 frames
+    if (frameCount % 60 === 0) {
+      performanceCheck.update();
+    }
+    
+    requestAnimationFrame(optimizedPerformanceMonitor);
   }
-  requestAnimationFrame(enhancedPerformanceMonitor);
+  requestAnimationFrame(optimizedPerformanceMonitor);
+
+  // Cleanup on page unload
+  window.addEventListener('beforeunload', function() {
+    clearInterval(noteInterval);
+    clearInterval(bubbleInterval);
+    if (playTimer) clearTimeout(playTimer);
+    if (liveTimer) clearTimeout(liveTimer);
+    if (autoHideTimer) clearTimeout(autoHideTimer);
+  });
 });
 
 </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Meneman/bdance" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</body>
 </html>