diff --git a/src/app/AppRoutes.tsx b/src/app/AppRoutes.tsx
index 58c582b..a191e47 100644
--- a/src/app/AppRoutes.tsx
+++ b/src/app/AppRoutes.tsx
@@ -1,27 +1,31 @@
+import { lazy, Suspense } from 'react'
 import { Navigate, Route, Routes } from 'react-router-dom'
 import { AppLayout } from './AppLayout'
 import { ROUTE_PATHS } from './route-paths'
-import { CreditsPage } from '../pages/CreditsPage'
-import { EndOfGamePage } from '../pages/EndOfGamePage'
-import { GamePage } from '../pages/GamePage'
 import { HomePage } from '../pages/HomePage'
 import { IntroPage } from '../pages/IntroPage'
-import { LeaderboardPage } from '../pages/LeaderboardPage'
-import { SongSelectionPage } from '../pages/SongSelectionPage'
+
+const GamePage = lazy(() => import('../pages/GamePage').then(m => ({ default: m.GamePage })))
+const SongSelectionPage = lazy(() => import('../pages/SongSelectionPage').then(m => ({ default: m.SongSelectionPage })))
+const EndOfGamePage = lazy(() => import('../pages/EndOfGamePage').then(m => ({ default: m.EndOfGamePage })))
+const LeaderboardPage = lazy(() => import('../pages/LeaderboardPage').then(m => ({ default: m.LeaderboardPage })))
+const CreditsPage = lazy(() => import('../pages/CreditsPage').then(m => ({ default: m.CreditsPage })))
 
 export function AppRoutes() {
   return (
-    <Routes>
-      <Route element={<AppLayout />}>
-        <Route path={ROUTE_PATHS.intro} element={<IntroPage />} />
-        <Route path={ROUTE_PATHS.home} element={<HomePage />} />
-        <Route path={ROUTE_PATHS.songSelection} element={<SongSelectionPage />} />
-        <Route path={ROUTE_PATHS.game} element={<GamePage />} />
-        <Route path={ROUTE_PATHS.endOfGame} element={<EndOfGamePage />} />
-        <Route path={ROUTE_PATHS.leaderboard} element={<LeaderboardPage />} />
-        <Route path={ROUTE_PATHS.credits} element={<CreditsPage />} />
-        <Route path="*" element={<Navigate to={ROUTE_PATHS.intro} replace />} />
-      </Route>
-    </Routes>
+    <Suspense fallback={null}>
+      <Routes>
+        <Route element={<AppLayout />}>
+          <Route path={ROUTE_PATHS.intro} element={<IntroPage />} />
+          <Route path={ROUTE_PATHS.home} element={<HomePage />} />
+          <Route path={ROUTE_PATHS.songSelection} element={<SongSelectionPage />} />
+          <Route path={ROUTE_PATHS.game} element={<GamePage />} />
+          <Route path={ROUTE_PATHS.endOfGame} element={<EndOfGamePage />} />
+          <Route path={ROUTE_PATHS.leaderboard} element={<LeaderboardPage />} />
+          <Route path={ROUTE_PATHS.credits} element={<CreditsPage />} />
+          <Route path="*" element={<Navigate to={ROUTE_PATHS.intro} replace />} />
+        </Route>
+      </Routes>
+    </Suspense>
   )
 }
diff --git a/src/main.tsx b/src/main.tsx
index 772be77..9cfbad4 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,18 +1,21 @@
-import { StrictMode } from 'react'
+import { lazy, StrictMode, Suspense } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import './lib/sounds'
 import './index.css'
 import App from './App.tsx'
-import { DebugApp } from './DebugApp.tsx'
+
+const DebugApp = lazy(() => import('./DebugApp.tsx').then(m => ({ default: m.DebugApp })))
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter>
-      <Routes>
-        <Route path="/debug/*" element={<DebugApp />} />
-        <Route path="*" element={<App />} />
-      </Routes>
+      <Suspense fallback={null}>
+        <Routes>
+          <Route path="/debug/*" element={<DebugApp />} />
+          <Route path="*" element={<App />} />
+        </Routes>
+      </Suspense>
     </BrowserRouter>
   </StrictMode>,
 )
diff --git a/src/pages/HomePage.module.css b/src/pages/HomePage.module.css
index 2eca3ef..73eeeb3 100644
--- a/src/pages/HomePage.module.css
+++ b/src/pages/HomePage.module.css
@@ -118,8 +118,7 @@
   margin-bottom: 10px;
   padding: 20px 25px 20px 18px;
   border: 2px solid rgb(255 78 203 / 0.15);
-  background: rgb(0 0 0 / 0.45);
-  backdrop-filter: blur(12px);
+  background: rgb(0 0 0 / 0.65);
   text-align: left;
   color: #fff;
   cursor: pointer;
@@ -300,8 +299,7 @@
   padding: 5px 14px;
   border: 2px solid rgb(0 200 255 / 0.22);
   border-radius: 5px;
-  background: rgb(0 0 0 / 0.45);
-  backdrop-filter: blur(12px);
+  background: rgb(0 0 0 / 0.65);
 }
 
 .poseDot {
@@ -343,8 +341,7 @@
   padding: 22px 25px;
   border-radius: 7px;
   border: 2px solid rgb(0 200 255 / 0.22);
-  background: rgb(0 0 0 / 0.45);
-  backdrop-filter: blur(12px);
+  background: rgb(0 0 0 / 0.65);
   text-align: right;
   overflow: hidden;
 }
@@ -534,21 +531,14 @@
   box-shadow:
     0 0 10px rgb(34 211 238 / 0.1),
     inset 0 1px 0 rgb(255 255 255 / 0.06);
+  position: relative;
+  will-change: opacity;
   animation: homeTileGlow 1.8s ease-in-out infinite;
 }
 
 @keyframes homeTileGlow {
-  0%,
-  100% {
-    background: rgb(40 20 70 / 0.7);
-    box-shadow: 0 0 8px rgb(34 211 238 / 0.1);
-    border-color: rgb(34 211 238 / 0.2);
-  }
-  50% {
-    background: rgb(80 30 90 / 0.55);
-    box-shadow: 0 0 16px rgb(240 171 252 / 0.2);
-    border-color: rgb(240 171 252 / 0.35);
-  }
+  0%, 100% { opacity: 0.7; }
+  50% { opacity: 1; }
 }
 
 @keyframes eqBounce {
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index a91a7cd..2c4aba6 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -147,14 +147,14 @@ function drawSkeleton(ctx: CanvasRenderingContext2D, skeleton: Skeleton, width:
 
   ctx.clearRect(0, 0, width, height)
 
-  ctx.save()
-  ctx.globalAlpha = 0.22
-  ctx.filter = 'blur(9px)'
-  line(p('lSh'), p('lEl'), '#ff4ecb', 18)
-  line(p('lEl'), p('lWr'), '#ff4ecb', 18)
-  line(p('rSh'), p('rEl'), '#00c8ff', 18)
-  line(p('rEl'), p('rWr'), '#00c8ff', 18)
-  ctx.restore()
+  line(p('lSh'), p('lEl'), 'rgba(255,78,203,0.12)', 24)
+  line(p('lEl'), p('lWr'), 'rgba(255,78,203,0.12)', 24)
+  line(p('rSh'), p('rEl'), 'rgba(0,200,255,0.12)', 24)
+  line(p('rEl'), p('rWr'), 'rgba(0,200,255,0.12)', 24)
+  line(p('lSh'), p('lEl'), 'rgba(255,78,203,0.08)', 36)
+  line(p('lEl'), p('lWr'), 'rgba(255,78,203,0.08)', 36)
+  line(p('rSh'), p('rEl'), 'rgba(0,200,255,0.08)', 36)
+  line(p('rEl'), p('rWr'), 'rgba(0,200,255,0.08)', 36)
 
   line(p('lSh'), p('lEl'), '#ff4ecb', 4.5)
   line(p('lEl'), p('lWr'), '#ff4ecb', 3.6)