The way-up ribbon hangs over the border — sized to stay out of the neighbouring poster

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

PROJECT.md

@@ -500,10 +500,11 @@ Oliver's retest ("schon viel besser") with five polish items, all built:
   straight ASCII `<`/`>` instead — the announcement face keeps its job, arrows stop leaning.
 - **The plaque wears rounded corners (8px) and real padding** (12/14 against 8/10).
 - **THE WAY-UP RIBBON**: the tag became a banderole — red field, thick white Silkscreen with a
-  light shadow, rotated -45° over the poster's top-left corner, ends clipped by the poster's own
-  `overflow: hidden` (that clip is what sells the wrap). And it shows on BOTH picker levels: the
-  top-level ZOMBIE TENNIS poster carries it too (`tag` on the MENU row), so the click path to the
-  promotion is marked from the first screen.
+  light shadow, rotated -45° over the poster's top-left corner, and (Oliver's follow-up) hanging
+  PAST the border on both sides rather than being clipped inside it — sized so the overhang stays
+  out of the neighbouring poster (120px band; the first cut at 148px lay across the poster above).
+  It shows on BOTH picker levels: the top-level ZOMBIE TENNIS poster carries it too (`tag` on the
+  MENU row), so the click path to the promotion is marked from the first screen.
 - **Poster captions grew**: titles 12 → 15 bold, sub lines 9 → 10 and a brighter grey — "viel
   Text in sehr kleiner Schrift" was true of every banner.
 - **The card performs its entrance**: earned badges and the current crest BREATHE a subtle gold

index.html

@@ -330,15 +330,16 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
   #cdCareer { display: flex; align-items: center; gap: 8px; }
   #cdCareer u { font: 700 8px Silkscreen, monospace; color: var(--dim); text-decoration: none;
                 letter-spacing: 1px; }
-  /* the WAY-UP RIBBON: the standing answer to "how do I advance", worn as a banderole wrapped
-     over the poster's corner (Oliver: bigger, red, thick white type, light shadow). The poster
-     clips its ends diagonally (overflow hidden + the -45deg rotation), which is what sells the
-     wrap. */
-  .way { position: absolute; top: 20px; left: -42px; width: 150px; transform: rotate(-45deg);
+  /* the WAY-UP RIBBON: the standing answer to "how do I advance", worn as a banderole laid OVER
+     the poster's corner — deliberately hanging past the border on both sides (Oliver), so it
+     reads as wrapped around the button rather than printed on it. z-index above the border,
+     no clipping anywhere on the path. */
+  .way { position: absolute; top: 22px; left: -30px; width: 120px; transform: rotate(-45deg);
+         z-index: 2;
          padding: 6px 0; font: 700 11px Silkscreen, monospace; font-style: normal;
          text-align: center; color: #fff; background: var(--red);
          border-top: 1px solid rgba(255,255,255,0.35); border-bottom: 1px solid #69201c;
-         text-shadow: 1px 1px 0 rgba(0,0,0,0.55); box-shadow: 0 2px 6px rgba(0,0,0,0.4);
+         text-shadow: 1px 1px 0 rgba(0,0,0,0.55); box-shadow: 0 2px 6px rgba(0,0,0,0.45);
          letter-spacing: 1px; text-decoration: none; }
   #plRow s i, #cdBar s i, #cdCareer s i { display: block; height: 100%; width: 0%;
                background: linear-gradient(90deg, #3f9560, var(--acid) 55%, #e8b23a);
@@ -408,8 +409,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
      a live answer to the header's question; tapping answers and advances. The only memory shown is
      the LAST tag — an indicator, not a selection. A border that means "SERVE UP will use this"
      exists solely on the final screen, where a confirm button actually follows. */
-  #modeList button.mode, #modeSub button.mode { overflow: hidden;   /* clips the WAY-UP ribbon's ends */
-                   display: flex; align-items: flex-end; width: 100%; min-height: 96px;
+  #modeList button.mode, #modeSub button.mode { display: flex; align-items: flex-end; width: 100%; min-height: 96px;
                    margin: 0 0 8px; padding: 7px 9px; background-size: cover; background-position: center bottom;
                    image-rendering: pixelated; border: 2px solid var(--line); color: inherit; font: inherit;
                    text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
@@ -846,6 +846,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
     </div>
   </div>
 </div>
-<script type="module" src="src/main.js?v=317"></script>
+<script type="module" src="src/main.js?v=318"></script>
 </body>
 </html>