From 871e0dc3f311764537858580c419d18bc6a71a0f Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Thu, 20 Nov 2025 08:35:58 -0500
Subject: [PATCH] Lighten core gameplay area and sharpen overlay edges

---
 app.js    | 14 +++++++-------
 style.css |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app.js b/app.js
index 5e7118e..c5c7c3f 100644
--- a/app.js
+++ b/app.js
@@ -667,12 +667,12 @@
         const overlay = document.getElementById('dementor-overlay');
         positionDementorOverlay();
         const p = dementor.progress > 1 ? 1 : dementor.progress;
-        const opacity = 0.18 + (p * 0.62);
-        const size = 14 + (p * 24); // start at edges, creep inward
-        const darkness = 0.3 + (p * 0.55);
-        const vignette = 0.35 + (p * 0.35);
-        const blur = 0 + (p * 2);
-        const glow = 0.08 + (p * 0.92);
+        const opacity = 0.12 + (p * 0.45);
+        const size = 14 + (p * 20); // start at edges, creep inward
+        const darkness = 0.24 + (p * 0.4);
+        const vignette = 0.25 + (p * 0.25);
+        const blur = 0 + (p * 1.5);
+        const glow = 0.1 + (p * 0.8);
         overlay.style.opacity = opacity;
         overlay.style.setProperty('--circle-size', `${size}%`);
         overlay.style.setProperty('--circle-strength', darkness.toFixed(2));
@@ -688,7 +688,7 @@
         overlay.style.setProperty('--circle-size', '12%');
         overlay.style.setProperty('--circle-strength', '0.25');
         overlay.style.setProperty('--circle-blur', '0px');
-        overlay.style.setProperty('--vignette-strength', '0.35');
+        overlay.style.setProperty('--vignette-strength', '0.25');
         document.documentElement.style.setProperty('--focus-glow', '0');
         saveData();
     }
diff --git a/style.css b/style.css
index 357d61b..821c75b 100644
--- a/style.css
+++ b/style.css
@@ -128,7 +128,7 @@
             --circle-size: 12%;
             --circle-strength: 0.25;
             --circle-blur: 0px;
-            --vignette-strength: 0.35;
+            --vignette-strength: 0.25;
             background:
                 radial-gradient(circle at 0% 12%, rgba(0,0,0,var(--circle-strength)) 0%, rgba(0,0,0,var(--circle-strength)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
                 radial-gradient(circle at 100% 12%, rgba(0,0,0,var(--circle-strength)) 0%, rgba(0,0,0,var(--circle-strength)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
@@ -138,7 +138,7 @@
                 radial-gradient(circle at 100% 50%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
                 radial-gradient(circle at 50% 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
                 radial-gradient(circle at 50% 100%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
-                radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,var(--vignette-strength)) 78%, rgba(0,0,0,calc(var(--vignette-strength) * 1.2)) 100%);
+                radial-gradient(circle at 50% 50%, transparent 48%, rgba(0,0,0,calc(var(--vignette-strength) * 0.4)) 70%, rgba(0,0,0,var(--vignette-strength)) 90%, rgba(0,0,0,calc(var(--vignette-strength) * 1.1)) 100%);
             opacity: 0;
             filter: blur(var(--circle-blur));
             mix-blend-mode: multiply;