From a135ee5a3443a05dbe4634163ca5a70033fb131b Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Sat, 6 Jun 2026 01:05:09 -0400
Subject: [PATCH] fix: individual frosted glass per cell, only outer corners
 rounded

Top bar: rounded-t-2xl. Left: rounded-bl-2xl. Right: rounded-br-2xl.
Bottom: rounded-b-2xl. Center stays transparent. Frame look, no blur bleed.
---
 frontend/src/App.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 45186fe..efe85c2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -116,10 +116,10 @@ export default function App() {
 
       <Particles type={currentScene.particles ?? 'none'} />
       <div className="relative z-20 h-full p-4">
-        <div className="h-full bg-white/40 backdrop-blur-xl rounded-2xl grid grid-rows-[auto_1fr_auto] grid-cols-[288px_1fr_256px] overflow-hidden">
+        <div className="h-full grid grid-rows-[auto_1fr_auto] grid-cols-[288px_1fr_256px]">
 
           {/* ── Top bar: scene selector + clock ── */}
-          <div className="col-span-3 flex items-center justify-between px-5 py-3 shrink-0">
+          <div className="col-span-3 flex items-center justify-between px-5 py-3 shrink-0 bg-white/40 backdrop-blur-xl rounded-t-2xl">
             <div className="flex items-center gap-1">
               {SCENES.map((s) => (
                 <button key={s.id} onClick={() => handleSceneChange(s.id)}
@@ -138,7 +138,7 @@ export default function App() {
           </div>
 
           {/* ── Left sidebar ── */}
-          <div className="flex flex-col gap-3 p-3 overflow-y-auto border-r border-white/20">
+          <div className="flex flex-col gap-3 p-3 overflow-y-auto bg-white/40 backdrop-blur-xl rounded-bl-2xl">
             <div className="shrink-0">
               <Timer />
             </div>
@@ -149,7 +149,7 @@ export default function App() {
           </div>
 
           {/* ── Center: transparent for Live2D ── */}
-          <div className="min-w-0 overflow-hidden bg-transparent backdrop-blur-none">
+          <div className="min-w-0 overflow-hidden">
             <KiraAvatar
               isSpeaking={isKiraSpeaking}
               isListening={isRecording}
@@ -162,7 +162,7 @@ export default function App() {
           </div>
 
           {/* ── Right sidebar ── */}
-          <div className="flex flex-col p-3 overflow-y-auto border-l border-white/20">
+          <div className="flex flex-col p-3 overflow-y-auto bg-white/40 backdrop-blur-xl rounded-br-2xl">
             <div className="flex-1 flex flex-col gap-3 overflow-y-auto">
               <MusicPlayer />
               <WhiteNoise />
@@ -171,7 +171,7 @@ export default function App() {
           </div>
 
           {/* ── Bottom status bar ── */}
-          <div className="col-span-3 shrink-0 px-5 py-2 flex items-center justify-between text-[11px] text-kira-plum/30 border-t border-white/20">
+          <div className="col-span-3 shrink-0 px-5 py-2 flex items-center justify-between text-[11px] text-kira-plum/30 bg-white/40 backdrop-blur-xl rounded-b-2xl">
             <div className="flex items-center gap-2">
               <span className={`w-1.5 h-1.5 rounded-full ${
                 isRecording ? 'bg-red-400 animate-pulse'