The plaque becomes a letterhead: crest left, the level line writ large beside it, the bar full-width

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

index.html

@@ -348,29 +348,31 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
          -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat;
          mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%2024%22%20shape-rendering=%22crispEdges%22%3E%3Cg%20fill=%22%23000%22%3E%3Crect%20x=%220%22%20y=%220%22%20width=%22140%22%20height=%2224%22/%3E%3Crect%20x=%22140%22%20y=%220%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22140%22%20y=%226%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22140%22%20y=%2212%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22140%22%20y=%2218%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22146%22%20y=%220%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22146%22%20y=%2212%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22152%22%20y=%226%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22152%22%20y=%2218%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22158%22%20y=%220%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22158%22%20y=%2212%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22170%22%20y=%220%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22170%22%20y=%2212%22%20width=%226%22%20height=%226%22/%3E%3C/g%3E%3C/svg%3E");
          mask-size: 100% 100%; mask-repeat: no-repeat; }
-  /* THE PLAYER PLAQUE: centred under the title on a TRANSLUCENT surface (no solid panel — the
+  /* THE PLAYER PLAQUE: a LETTERHEAD, not a centred stack (Oliver: the stack sat cramped) — the
-     splash art, blood pool included, stays visible through and around it; Oliver's call, the
+     crest on the left, name over the big LEVEL · LEAGUE line beside it, the chevron on the
-     solid panel in the foot sat exactly on the backdrop's blood). LEVEL · LEAGUE wears the
+     right; the bar runs the full width below and the goal line closes left-aligned. Translucent
-     announcement face now, writ large; the goal line stands under the bar; the chevron on the
+     surface, generous rows — the splash art, blood pool included, stays visible around it. */
-     right edge says the whole thing opens. The badge COLLECTION stays on the card. */
+  #plaque { display: grid; column-gap: 14px; align-items: center; text-align: left;
-  #plaque { position: relative; display: flex; flex-direction: column; align-items: center;
+            grid-template-columns: auto 1fr auto;
-            gap: 6px; margin: 22px auto 0; width: auto; max-width: 88%;
+            grid-template-areas: "badge name chev" "badge lv chev" "bar bar bar" "goal goal goal";
-            padding: 14px 40px 12px; background: rgba(8, 14, 10, 0.48); border: 0;
+            margin: 24px auto 0; width: min(330px, 92%); box-sizing: border-box;
+            padding: 18px 18px 15px; background: rgba(8, 14, 10, 0.48); border: 0;
             border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
-  #plBadge { height: 46px; image-rendering: pixelated;
+  #plBadge { grid-area: badge; height: 54px; image-rendering: pixelated;
              filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
-  #plName { font: 700 11px Silkscreen, monospace; color: var(--cream); letter-spacing: 2px;
+  #plName { grid-area: name; align-self: end; padding-bottom: 3px;
-            white-space: nowrap; }
+            font: 700 10px Silkscreen, monospace; color: var(--cream); letter-spacing: 2px;
-  #plLv { font: 400 27px Bangers, cursive; color: var(--acid); letter-spacing: 1.5px;
+            white-space: nowrap; overflow: hidden; }
-          text-decoration: none; text-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
+  #plLv { grid-area: lv; align-self: start; font: 400 26px Bangers, cursive; color: var(--acid);
-  #plRow { display: block; width: 200px; max-width: 100%; }
+          letter-spacing: 1.5px; text-decoration: none; text-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
+  #plRow { grid-area: bar; display: block; width: auto; margin-top: 15px; }
   /* NO nowrap here: the longest goal line is ~380px and a nowrap child sets the CARD's
      min-content past the viewport — that was the phantom horizontal scrollbar Oliver spotted */
-  #plGoal { font: 400 9px Silkscreen, monospace; font-style: normal; color: var(--warm);
+  #plGoal { grid-area: goal; margin-top: 10px; font: 400 9px Silkscreen, monospace;
-            letter-spacing: 1px; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); text-align: center;
+            font-style: normal; color: var(--warm); letter-spacing: 1px;
-            line-height: 1.6; }
+            text-shadow: 1px 1px 0 rgba(0,0,0,0.5); text-align: left; line-height: 1.6; }
-  #plaque em { position: absolute; right: 13px; top: 50%; margin-top: -8px;
+  #plaque em { grid-area: chev; font: 700 15px Silkscreen, monospace; font-style: normal;
-               font: 700 15px Silkscreen, monospace; font-style: normal; color: var(--acid); }
+               color: var(--acid); }
   #plRow s, #cdBar s, #cdCareer s { flex: 1; height: 6px; background: rgba(255,255,255,0.10);
              border: 1px solid var(--line); text-decoration: none; display: block; }
   #cdBar s { height: 8px; }
@@ -893,6 +895,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
     </div>
   </div>
 </div>
-<script type="module" src="src/main.js?v=326"></script>
+<script type="module" src="src/main.js?v=327"></script>
 </body>
 </html>