The leagues, phase 3: the character card, the honours collection, the skill trail

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

index.html

@@ -174,7 +174,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
   /* ONE overlay, four panels, swapped by #intro[data-stage]. Keeping the backdrop and the card frame
      alive across every screen is the point — a screen that unmounts the whole overlay flashes the
      court through between menus. */
-  #splash, #setup, #stats, #ranks, #newbest, #secret, #bosses, #stmode, #stsub, #bracket, #vs, #train, #player, #promo { display: none; }
+  #splash, #setup, #stats, #ranks, #newbest, #secret, #bosses, #stmode, #stsub, #bracket, #vs, #train, #player, #promo, #card { display: none; }
   #intro[data-stage="splash"] #splash { display: flex; flex-direction: column; flex: 1; }
   /* flex COLUMN, not block: it is what lets the footer's margin-top:auto reach the bottom of a
      screen whose content does not fill it */
@@ -190,6 +190,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
   #intro[data-stage="vs"]     #vs,
   #intro[data-stage="player"] #player,
   #intro[data-stage="promo"] #promo,
+  #intro[data-stage="card"] #card,
   #intro[data-stage="newbest"] #newbest { display: flex; flex-direction: column; flex: 1;
                                         animation: drop 0.3s ease-out; }
   /* the overlay is HIDDEN during play, not removed: a restart puts it straight back, and the
@@ -274,14 +275,31 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
              image-rendering: pixelated; animation: drop 0.5s ease-out 0.5s backwards; }
   #prCourtName { margin: 0; font: 400 10px Silkscreen, monospace; color: var(--acid);
                  letter-spacing: 1.5px; animation: drop 0.5s ease-out 0.62s backwards; }
+  /* THE CHARACTER CARD (the leagues, phase 3): the player writ large — sprite, crest, level,
+     honours, ledger. The honours row is a collection with visible empty slots: the unearned
+     badges sit dark, which is the whole incentive. */
+  #cdTop { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; }
+  #cdLook { position: static; display: block; flex: none; margin: 0; width: auto; height: 200px;
+            touch-action: auto; image-rendering: pixelated; }
+  #cdMeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
+  #cdBadge { width: 56px; image-rendering: pixelated; }
+  #cdLeague { font: 700 10px Silkscreen, monospace; text-decoration: none; letter-spacing: 1.5px; }
+  #cdLevel { font: 400 30px Bangers, cursive; color: var(--cream); letter-spacing: 1.5px; }
+  #cdXp { display: block; margin-top: 5px; font: 400 9px Silkscreen, monospace; color: var(--dim);
+          text-decoration: none; letter-spacing: 1px; }
+  #cdBadges { display: flex; gap: 10px; align-items: flex-end; }
+  #cdBadges img { height: 46px; image-rendering: pixelated; }
+  #cdBadges img.dark { filter: grayscale(1) brightness(0.3); }
   /* THE LEVEL STRIP: the one meta number over a thin bar, riding the splash foot. The fill colour
      is the acid accent for now; the leagues will hand it the skill colour in phase 3. */
   #xpRow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
   #xpRow u { font: 700 9px Silkscreen, monospace; color: var(--cream); text-decoration: none;
              letter-spacing: 1px; white-space: nowrap; }
-  #xpRow s { flex: 1; height: 6px; background: rgba(255,255,255,0.10); border: 1px solid var(--line);
+  #xpRow { cursor: pointer; }   /* the strip IS the door to the character card */
+  #xpRow s, #cdBar s { flex: 1; height: 6px; background: rgba(255,255,255,0.10); border: 1px solid var(--line);
              text-decoration: none; display: block; }
-  #xpRow s i { display: block; height: 100%; width: 0%;
+  #cdBar s { height: 8px; }
+  #xpRow s i, #cdBar s i { display: block; height: 100%; width: 0%;
                background: linear-gradient(90deg, #3f9560, var(--acid) 55%, #e8b23a);
                transition: width 0.4s ease; }
   /* KIT and SKIN: a row of colour squares, under a label that names whatever is selected. That is
@@ -629,6 +647,30 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
         <button class="btn big" id="prGo">WALK ON</button>
       </div>
     </div>
+    <!-- THE CHARACTER CARD (the leagues): tap the splash's level strip to open. Built by
+         main.buildCard from the profile + stats; the honours row shows every badge slot, earned
+         bright and unearned dark. -->
+    <div id="card">
+      <div class="hdr"><button class="chev" id="cdBack">&lsaquo;</button><h2 id="cdName">YOUR PLAYER</h2></div>
+      <div id="cdTop">
+        <canvas id="cdLook" width="96" height="224"></canvas>
+        <div id="cdMeta">
+          <img id="cdBadge" alt="">
+          <u id="cdLeague"></u>
+          <b id="cdLevel">LEVEL 1</b>
+          <div id="cdBar"><s><i id="cdFill"></i></s><u id="cdXp"></u></div>
+        </div>
+      </div>
+      <h3>HONOURS<span>WIN THE CUP TO CLIMB</span></h3>
+      <div id="cdBadges"></div>
+      <h3>THE LEDGER<span>ALL TIME</span></h3>
+      <div class="figs" id="cdFigs1"></div>
+      <div style="height:8px"></div>
+      <div class="figs" id="cdFigs2"></div>
+      <div class="foot bare">
+        <button class="btn sec" id="cdEdit">EDIT PLAYER<i>NAME · TOUR · COLOURS</i></button>
+      </div>
+    </div>
     <!-- THE DRAW (cup mode only). SERVE UP lands here instead of on a court: the four rounds roll
          through their own band of the ladder and stop, and what you watched land is what walks on
          (main.js hands the settled rungs to startMatch). The rows are built in main.js from
@@ -752,6 +794,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
     </div>
   </div>
 </div>
-<script type="module" src="src/main.js?v=313"></script>
+<script type="module" src="src/main.js?v=314"></script>
 </body>
 </html>