The setup grows a league face: badge, felled tally, the band's roster — and a bigger ribbon

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

index.html

@@ -330,6 +330,28 @@ 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 LEAGUE PANEL: the setup's league-mode face. The badge breathes like the card's, the
+     name is the announcement face in the league's own colour, and the band's roster stands in a
+     row — felled bodies in colour with their all-time count, the rest grey and waiting. */
+  #lgPanel { display: none; }
+  #lgHead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
+  #lgBadge { height: 56px; image-rendering: pixelated; animation: badgeGlow 2.6s ease-in-out infinite; }
+  #lgHead b { display: block; font: 400 24px Bangers, cursive; letter-spacing: 1.5px; }
+  #lgHead i { display: block; margin-top: 3px; font: 400 9px Silkscreen, monospace;
+              color: var(--dim); font-style: normal; letter-spacing: 1px; }
+  #lgFoes { display: flex; gap: 7px; }
+  .lgFoe { flex: 1; min-width: 0; padding: 7px 2px 6px; background: var(--panel);
+           border: 2px solid var(--line); text-align: center; }
+  .lgFoe img { height: 42px; image-rendering: pixelated; }
+  .lgFoe b { display: block; margin-top: 4px; font: 700 8px Silkscreen, monospace;
+             color: var(--cream); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; }
+  .lgFoe i { display: block; margin-top: 2px; font: 400 8px Silkscreen, monospace;
+             color: var(--acid); font-style: normal; }
+  .lgFoe.un { opacity: 0.55; }
+  .lgFoe.un img { filter: grayscale(1) brightness(0.6); }
+  .lgFoe.un i { color: var(--dim); }
+  /* the band's top rung is the final — it wears the door's own red */
+  .lgFoe.fin { border-color: var(--red); }
   /* the WAY-UP RIBBON, horizontal (Oliver's call after two diagonal cuts — a rotated pixel font
      was the one anti-aliased thing in the menu): a red band running in from OVER the left border,
      dissolving rightward through a real PIXEL FADE — an inline-SVG mask of 6px cells thresholded
@@ -339,7 +361,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
      shadow survives the mask and follows the dither blocks (a box-shadow on the masked element
      itself was eaten with it). */
   .way { position: absolute; top: 12px; left: -8px; z-index: 2; white-space: nowrap;
-         padding: 5px 56px 5px 14px; font: 700 10px Silkscreen, monospace; font-style: normal;
+         padding: 8px 64px 8px 16px; font: 700 13px Silkscreen, monospace; font-style: normal;
          color: #fff;
          text-shadow: 1px 1px 0 rgba(0,0,0,0.55);
          filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
@@ -676,7 +698,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
            the court off the bottom of the phone. The tiles are gone: the live player IS the picture,
            so who-you-are shrinks to two words, and every control that changes him stands beside him
            where you can watch it land. Kit and skin rows are built in main.js from the tables. -->
-      <h3>01 · PLAYER</h3>
+      <h3 id="s01">01 · PLAYER</h3>
       <div id="who">
         <canvas id="look" width="96" height="224"></canvas>
         <div id="whoCtl">
@@ -687,6 +709,18 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
           <div id="skinRow" class="swrow"></div>
         </div>
       </div>
+      <!-- THE LEAGUE PANEL (the leagues): on the league modes this stands where the player block
+           does elsewhere — the identity already lives on the card, so the setup shows the thing
+           that matters HERE instead: your league, writ large, and who of its band you have
+           already felled (all-time, from the stats' own per-foe tallies). Built by
+           main.buildLeaguePanel, toggled by syncSetup. -->
+      <div id="lgPanel">
+        <div id="lgHead">
+          <img id="lgBadge" alt="">
+          <div><b id="lgName"></b><i id="lgSub"></i></div>
+        </div>
+        <div id="lgFoes"></div>
+      </div>
       <h3>02 · COURT</h3>
       <div id="courtList"></div>
       <div class="foot">
@@ -884,6 +918,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
     </div>
   </div>
 </div>
-<script type="module" src="src/main.js?v=322"></script>
+<script type="module" src="src/main.js?v=323"></script>
 </body>
 </html>