ALL HAIL THE SHADER BACKGROUND

frontend/src/GameList.tsx

@@ -128,7 +128,7 @@ export function GameList() {
   };
 
   const formHeaderStyles: React.CSSProperties = {
-    background: "linear-gradient(135deg, var(--accent-color) 0%, #0a4f8c 100%)",
+    background: "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
     padding: "1.5rem 2rem",
     display: "flex",
     alignItems: "center",
@@ -195,7 +195,7 @@ export function GameList() {
   const submitButtonStyles: React.CSSProperties = {
     width: "100%",
     padding: "1rem",
-    background: "linear-gradient(135deg, var(--accent-color) 0%, #0a4f8c 100%)",
+    background: "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
     border: "none",
     borderRadius: "12px",
     color: "white",

frontend/src/ShaderBackground.tsx

@@ -200,6 +200,18 @@ export const ShaderBackground = () => {
   });
 
   return (
-    <canvas ref={canvasRef} id="blackhole_canvas" width="800" height="450" />
+    <canvas
+      ref={canvasRef}
+      id="blackhole_canvas"
+      style={{
+        width: "100vw",
+        height: "100vh",
+        position: "fixed",
+        top: 0,
+        left: 0,
+        zIndex: -1,
+        pointerEvents: "none",
+      }}
+    />
   );
 };

frontend/src/index.css

@@ -4,6 +4,7 @@
   --secondary-alt-bg: #191f2e;
   --tertiary-bg: #101320;
   --accent-color: #096dc0;
+  --secondary-accent: #0a4f8c;
   --text-color: #ffffff;
   --text-muted: #a0a0a0;
   --border-color: #2a3045;
@@ -101,6 +102,8 @@ ul {
   --tertiary-bg: rgba(40, 40, 40, 0.8);
   --border-color: rgba(255, 255, 255, 0.15);
   --text-color: #ffffff;
+  --accent-color: #121212;
+  --secondary-accent: #212121;
 }
 
 .shader-theme body {