From f6fb680fbd58fd0025ee6eb5a2eccd0a012526cb Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Sat, 15 Aug 2026 20:04:34 +0200
Subject: [PATCH] FIX - give Control Center an opaque backdrop

Replace the scene-dependent background with a stable layered material and keep the control panel above it. Performance mode now uses the same readable fallback without relying on blur.
---
 frontend/src/assets/main.css                  |  4 +++-
 .../src/components/PhoneControlCenter.vue     | 19 +++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 1997b10..2e07095 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -446,7 +446,9 @@ button {
   box-shadow: none;
 }
 .phone-app--performance .control-center__backdrop {
-  background: rgb(20 20 24 / 92%);
+  background:
+    radial-gradient(circle at 16% 12%, rgb(77 96 135 / 20%), transparent 46%),
+    linear-gradient(180deg, #191b23 0%, #11131a 100%) !important;
 }
 .phone-app--performance .app-dock {
   background-color: rgb(38 38 46 / 92%);
diff --git a/frontend/src/components/PhoneControlCenter.vue b/frontend/src/components/PhoneControlCenter.vue
index 263b50a..cf8489d 100644
--- a/frontend/src/components/PhoneControlCenter.vue
+++ b/frontend/src/components/PhoneControlCenter.vue
@@ -573,18 +573,29 @@ onBeforeUnmount(() => {
 
 .control-center__backdrop {
   position: absolute;
-  z-index: -1;
+  z-index: 0;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
-  background: rgba(20, 20, 24, 0.34);
-  backdrop-filter: blur(25px) saturate(1.45);
-  -webkit-backdrop-filter: blur(25px) saturate(1.45);
+  background:
+    radial-gradient(circle at 16% 12%, rgb(77 96 135 / 24%), transparent 46%),
+    linear-gradient(180deg, #191b23 0%, #11131a 100%);
+}
+
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .control-center__backdrop {
+    background:
+      radial-gradient(circle at 16% 12%, rgb(77 96 135 / 14%), transparent 46%),
+      linear-gradient(180deg, rgb(20 22 29 / 72%) 0%, rgb(13 15 21 / 86%) 100%);
+    backdrop-filter: blur(32px) brightness(0.76) saturate(0.82);
+    -webkit-backdrop-filter: blur(32px) brightness(0.76) saturate(0.82);
+  }
 }
 
 .control-center__panel {
   position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 12px;