diff --git a/index.html b/index.html
index ed3e149..eaa7aa3 100644
--- a/index.html
+++ b/index.html
@@ -473,7 +473,22 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
                    image-rendering: pixelated; border: 2px solid var(--line); color: inherit; font: inherit;
                    text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
                    position: relative; }
-  .last { position: absolute; top: 7px; right: 9px; font: 400 8px Silkscreen, monospace;
+  /* THE CAPTION'S VEIL (2026-08-31, Oliver: "eine blurry verlauf als hintergrund, von oben aus dem
+     nichts kommend"). A hard scrim gradient used to ride in the button's own background stack; this
+     is a BLURRED backdrop instead, masked so it begins as literally nothing at its top edge and
+     only becomes a surface where the words are. Art stays art at the top of the poster, the caption
+     gets something to sit on, and there is no box edge anywhere. */
+  #modeList button.mode::after, #modeSub button.mode::after {
+    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
+    backdrop-filter: blur(7px) saturate(0.85);
+    -webkit-backdrop-filter: blur(7px) saturate(0.85);
+    background: linear-gradient(180deg, rgba(8,12,9,0) 0%, rgba(8,12,9,0.42) 46%, rgba(8,12,9,0.8) 100%);
+    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 44%);
+    mask-image: linear-gradient(180deg, transparent 0%, #000 44%);
+    pointer-events: none; }
+  /* the words and the chips ride ABOVE the veil — a pseudo-element is the last thing painted */
+  #modeList .cb, #modeSub .cb { position: relative; z-index: 2; }
+  .last { position: absolute; z-index: 2; top: 7px; right: 9px; font: 400 8px Silkscreen, monospace;
                    color: var(--acid); background: rgba(0,0,0,0.72); padding: 3px 6px;
                    letter-spacing: 1px; border: 1px solid rgba(188,212,85,0.5); }
   #modeList b, #modeSub b { text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,0.9); }
diff --git a/src/main.js b/src/main.js
index 71f62b7..d1d3218 100644
--- a/src/main.js
+++ b/src/main.js
@@ -127,9 +127,10 @@ const modeSub = document.getElementById('modeSub');
 const banner = (card, cls, last) => {
   const b = document.createElement('button');
   b.className = cls;
-  // the scrim rides IN the background stack (gradient over art), so the caption needs no extra box
-  b.style.backgroundImage =
-    `linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,0.78)), url(assets/${card.art}.png?v=${SPRV})`;
+  // JUST THE ART. The scrim used to ride in this background stack as a hard linear-gradient; the
+  // caption sits on a BLURRED veil now (index.html, button.mode::after) that fades in out of
+  // nothing from above, and stacking the old gradient under it only doubled the darkening.
+  b.style.backgroundImage = `url(assets/${card.art}.png?v=${SPRV})`;
   b.innerHTML = `<span class="cb"><b>${card.name}</b><i>${card.sub}</i></span>`
     + (last ? '<u class="last">LAST</u>' : '')
     // the standing answer to "how do I advance", worn by the poster it is true of (config MODES)