The overlays get their measures: narrower boxes, full-width buttons, air

Oliver's second pass over the new box language. The modal is narrower and the
button spans it; every row got real spacing and the footer its own margin, so
the end screens stop reading as cramped. The xp bar is taller and its ramp now
rides the FILL — spanning the gradient across the whole track meant an early
level only ever showed one flat green inch of it. An illustrated announcement
puts its two lines beside the picture, under the headline, instead of in a
boxed row below its own icon.

The poster wall's section headings leave the announcement face to the posters
(it read as a second card headline), drop the left band and the rule, and let
air do the grouping. On the splash, OTHER GAMES gets its gap to the stats row,
and the boot shows nothing but the court, the title and the loading bar — the
plaque skeleton was still a plaque telling a level-25 player he was level 1.

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

index.html

@@ -457,21 +457,21 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
                    text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 0 7px #000; }
   /* THE SECTIONS (THE SEASON): the wall is three rooms — one path up, a room to practise in, a
      room where nothing counts — so each is a real section with its posters INSIDE it, not a label
-     floating over a stack. The heading takes the announcement face a size under the screen title,
-     so the hierarchy reads screen > section > poster; the rule under it closes the header and the
-     inset band down the left says where the section ends. */
-  #modeList .mgroup { margin: 0 0 22px; padding-left: 10px; border-left: 2px solid var(--line); }
+     floating over a stack. The heading is deliberately NOT the announcement face (Oliver: it read
+     as a second card headline and the two competed); Silkscreen, big and letter-spaced, keeps it
+     a label of a room. No rule, no left band either — the air above each heading does the
+     grouping, which is what air is for. */
+  #modeList .mgroup { margin: 0 0 12px; }
+  #modeList .mgroup + .mgroup { margin-top: 26px; }
   /* text-align rides down from the card, which centres everything on these screens — the section
      header is a header, and headers on this screen are left-aligned (the .hdr title, the posters'
      own captions) */
-  #modeList .mgroup > header { margin: 0 0 10px; padding-bottom: 7px; text-align: left;
-                   border-bottom: 1px solid var(--line); }
-  #modeList .mgroup b { display: block; font: 400 21px Bangers, cursive; letter-spacing: 1.5px;
-                   color: var(--acid); text-shadow: none; line-height: 1.1; }
-  #modeList .mgroup i { display: block; margin: 2px 0 0; font: 400 9px Silkscreen, monospace;
+  #modeList .mgroup > header { margin: 0 0 11px; text-align: left; }
+  #modeList .mgroup b { display: block; font: 700 14px Silkscreen, monospace; letter-spacing: 2.5px;
+                   color: var(--acid); text-shadow: none; line-height: 1.2; }
+  #modeList .mgroup i { display: block; margin: 5px 0 0; font: 400 9px Silkscreen, monospace;
                    font-style: normal; color: var(--dim); letter-spacing: 0.5px; text-shadow: none; }
-  /* the canonical room wears the primary's colour — the one section that moves your career */
-  #modeList .mgroup:first-child { border-left-color: var(--red); }
+  /* the canonical room is named in the primary's colour — the one that moves your career */
   #modeList .mgroup:first-child b { color: #f0a08e; }
   #modeList .mgroup button.mode:last-child { margin-bottom: 0; }
   /* THE SECOND STEP (config.MENU) has its own SCREEN in the wizard: sub-mode cards are
@@ -511,6 +511,8 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
           padding-bottom: max(10px, env(safe-area-inset-bottom));
           border-top: 2px solid var(--line); background: var(--solid); }
   .foot .btn { margin-bottom: 0; }
+  /* ...except the splash's own secondary door: OTHER GAMES sat flush on the STATS/RANKINGS row */
+  .foot.bare #mOther { margin-bottom: 12px; }
   /* the splash's bottom band: no bar, no rule — the court art has to keep running under it */
   .foot.bare { border: 0; background: none; }
   .foot.bare .btn.big { margin-bottom: 10px; }
@@ -524,16 +526,12 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
             font: 400 9px Silkscreen, monospace; color: var(--dim); letter-spacing: 2px; }
   #splash.busy #boot { display: block; }
   #splash.busy .btn, #splash.busy .two, #splash.busy #build { display: none; }
-  /* ...and the PLAQUE boots as a SKELETON: no tap, ghost crest, blank pills where the words go.
-     The profile mirror may still be in flight, and half-true numbers must neither show nor
-     navigate (main.js holds .busy until the pull settles or its 4 s cap fires). */
-  #splash.busy #plaque { pointer-events: none; }
-  #splash.busy #plaque em { visibility: hidden; }
-  #splash.busy #plBadge { opacity: 0.14; filter: grayscale(1); }
-  #splash.busy #plName, #splash.busy #plLv, #splash.busy #plGoal {
-    color: transparent; text-shadow: none; background: rgba(255,255,255,0.08);
-    border-radius: 4px; }
-  #splash.busy #plRow s i { width: 0% !important; }
+  /* NOTHING DATA-DRIVEN DURING THE BOOT (2026-08-31, Oliver: "die oberfläche ist hier regelmäßig
+     in einem undefinierten zustand"). The plaque used to stand there as a skeleton, which is still
+     a plaque saying LEVEL 1 to a level-25 player for as long as the profile takes to land. The
+     title and the court stay — they are the background and they are never undefined. */
+  #splash.busy #plaque { visibility: hidden; }   /* hidden, but it KEEPS ITS SPACE: display:none
+     let the title slide down the screen and jump back up the moment the profile landed */
   #sSum, #brSum { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px;
           font: 400 9px Silkscreen, monospace; color: var(--dim); letter-spacing: 1px; }
   .tabs { display: flex; gap: 6px; margin: 12px 0 14px; }