The poster wall gets rooms, not labels: three real sections

Oliver: the group headings were "sehr klein". Each group is a section now with
its posters inside it — the announcement face one size under the screen title,
a rule closing the header, and an inset band down the left. The canonical room
wears the primary's colour, because it is the one that moves your career.

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

index.html

@@ -455,15 +455,25 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
      at cream-on-crowd was the report from the first live look */
   #modeList i, #modeSub i { color: #fff; font-size: 10px; margin-bottom: 0;
                    text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 0 7px #000; }
-  /* THE GROUP HEADINGS (THE SEASON): what the posters under them are FOR — one path up, a room to
-     practise in, a room where nothing counts. Deliberately quiet: the posters are the loud objects
-     on this screen, and a heading competing with them would just be a fourth poster. */
-  #modeList .mgroup { margin: 16px 0 7px; }
-  #modeList .mgroup:first-child { margin-top: 2px; }
-  #modeList .mgroup b { display: block; font: 400 12px Silkscreen, monospace; letter-spacing: 2px;
-                   color: var(--acid); text-shadow: none; }
-  #modeList .mgroup i { display: block; margin: 3px 0 0; font: 400 9px Silkscreen, monospace;
-                   font-style: normal; font-size: 9px; color: var(--dim); text-shadow: none; }
+  /* 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); }
+  /* 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;
+                   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); }
+  #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
      full-height posters centred on their scene, and the difficulty chips are plain acid-outline
      buttons stacked tall — art for EASY/MEDIUM/HARD would be forced, and the chip reads faster. */

src/main.js

@@ -145,13 +145,16 @@ function buildSub(top) {
 // the top posters are rebuilt on every visit so the LAST tag follows what was actually played
 function buildTops() {
   modeList.innerHTML = '';
+  let shelf = modeList;                       // posters land in the section they belong to
   for (const t of MENU) {
-    // a GROUP row is the heading over the posters under it — what that shelf is for (config MENU)
+    // A GROUP ROW OPENS A SECTION (2026-08-31, Oliver: the headings "sind sehr klein, vielleicht
+    // können wir daraus richtige sektionen machen"). The posters go INSIDE it — a heading that
+    // merely floats above a stack is a label, and the wall needs three rooms, not three labels.
     if (t.group) {
-      const h = document.createElement('div');
-      h.className = 'mgroup';
-      h.innerHTML = `<b>${t.group}</b><i>${t.sub}</i>`;
-      modeList.appendChild(h);
+      shelf = document.createElement('section');
+      shelf.className = 'mgroup';
+      shelf.innerHTML = `<header><b>${t.group}</b><i>${t.sub}</i></header>`;
+      modeList.appendChild(shelf);
       continue;
     }
     const b = banner(t.mode ? modeOf(t.mode) : t, 'mode', topOf(pickedMode) === t);
@@ -165,7 +168,7 @@ function buildTops() {
       summary();
       go(t.diffs || t.kids ? 'modesub' : 'setup');
     });
-    modeList.appendChild(b);
+    shelf.appendChild(b);
   }
 }
 buildTops();