Add underwater effect to RunnerCanvas and update WebGL rendering check

2026-04-06 20:54:05 +02:00
parent e4146ea35e
commit a46640bfb6
2 changed files with 26 additions and 12 deletions
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -1163,6 +1163,22 @@ button:disabled {
  border-radius: 999px;
 }

+.runner-canvas--underwater {
+  box-shadow: inset 0 0 0 9999px rgba(9, 38, 62, 0.08);
+}
+
+.runner-canvas__underwater {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 50% 18%, rgba(146, 223, 255, 0.2), transparent 42%),
+    linear-gradient(180deg, rgba(38, 113, 153, 0.16), rgba(8, 40, 63, 0.42));
+  backdrop-filter: blur(1.5px) saturate(1.08);
+  mix-blend-mode: screen;
+}
+
 .runner-canvas__prompt {
  position: absolute;
  left: 50%;