The poster captions sit on a blurred veil that comes out of nothing

The scrim used to be a hard linear-gradient riding in the button's own
background stack. It is a masked backdrop-blur now: nothing at all at its top
edge, a surface by the time it reaches the words. The art stays art where the
art is, the caption gets something to sit on, and no box edge appears anywhere.
Measured on this machine it costs 0.2ms a frame — the backdrop is static while
the menu is.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

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); }

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)