diff --git a/src/lib/components/PlayerControls.svelte b/src/lib/components/PlayerControls.svelte
index 6d1c3e3..9d1ddf8 100644
--- a/src/lib/components/PlayerControls.svelte
+++ b/src/lib/components/PlayerControls.svelte
@@ -277,7 +277,7 @@
 <style>
   .player-controls-overlay {
     position: absolute;
-    bottom: 48px;
+    bottom: 64px;
     left: 15%;
     right: 15%;
     pointer-events: none;
@@ -293,8 +293,7 @@
 
   .player-controls-panel {
     pointer-events: auto;
-    background: rgba(0, 0, 0, 0.75);
-    backdrop-filter: blur(8px);
+    position: relative;
     border-radius: 12px;
     padding: 12px 16px;
     display: flex;
@@ -302,6 +301,23 @@
     gap: 8px;
   }
 
+  .player-controls-panel::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-radius: 12px;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.25s ease;
+  }
+
+  .player-controls-overlay.visible .player-controls-panel::before {
+    opacity: 1;
+  }
+
   /* --- Seek bar --- */
   .seek-bar {
     width: 100%;