Story phase 3: the act card, the ceremony with its loot, the act's end

Three animated screens in the storyboard's look, built in the page over
a paused world:
- The act title card: the act's court pans in behind ACT n, its league,
  its court and its goal; it closes itself after three seconds or on a
  tap.
- The cup's ceremony: YOU CLEARED THE COURT, the rounds and the run's
  xp, then the act's weapons drop into a rack one by one ("…and gained
  these for the hordes to come"), and the chapter preview with the
  mid-boss named and game 10 still "???" until the transformation.
- The act card: what the act cost (bodies, bosses, deaths), what it
  opened in the arcade, and the next act's court; CONTINUE goes straight
  on, THE CLUBHOUSE goes home.

The checkpoint keeps its in-game banner. Headless, every screen falls
back to the plain card it replaced. v381, staging only.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

index.html

@@ -122,6 +122,51 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
   #qAsk { position: fixed; inset: 0; z-index: 6; background: rgba(0,0,0,0.55);
           display: flex; align-items: center; justify-content: center; }
   #quit[hidden], #qAsk[hidden] { display: none; }
+  /* THE STORY's screens — the storyboard's look: a dark club at night, Bangers shouting, Silkscreen
+     labelling, the weapons the only pink. One column, phone first; the world is paused beneath. */
+  #sty { position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; overflow: hidden;
+         background: radial-gradient(circle at 50% 28%, var(--sty-glow, #3a1d16), #0b0a0c 72%);
+         color: #e8e8dc; font: 400 14px Silkscreen, monospace; -webkit-tap-highlight-color: transparent;
+         padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px)); }
+  #sty[hidden] { display: none; }
+  #sty .col { width: min(420px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; }
+  #sty .bgc { position: absolute; inset: 0; background-size: cover; background-position: center 30%;
+              image-rendering: pixelated; opacity: .55; }
+  #sty .bgc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#0009, #000d 80%); }
+  #sty .col { position: relative; }
+  #sty .lab { font: 400 10px Silkscreen, monospace; letter-spacing: 2px; color: #8fa0b8; text-transform: uppercase; }
+  #sty .gold { color: #e0cc72; } #sty .hot { color: #d9705f; } #sty .pink { color: #ff5cf0; }
+  #sty .huge { font: 400 92px/0.9 Bangers, Impact, sans-serif; text-shadow: 4px 4px 0 #000; margin: 0; }
+  #sty .big { font: 400 34px/1 Bangers, Impact, sans-serif; text-shadow: 3px 3px 0 #000; margin: 0; }
+  #sty .mid { font: 400 24px/1 Bangers, Impact, sans-serif; text-shadow: 2px 2px 0 #000; }
+  #sty img { image-rendering: pixelated; }
+  #sty .badge { width: 46px; }
+  #sty .stats { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; text-align: left;
+                font: 400 18px 'Jersey 15', sans-serif; }
+  #sty .stats b { font-weight: 400; font-variant-numeric: tabular-nums; }
+  #sty .rack { width: 100%; display: flex; justify-content: space-around; align-items: end; gap: 6px; min-height: 92px;
+               padding: 12px 6px; border-block: 3px solid #6b4a2a; background: #0006; flex-wrap: wrap; }
+  #sty .rack div { display: grid; justify-items: center; gap: 4px; }
+  #sty .rack img { height: 40px; filter: drop-shadow(0 0 6px #ff5cf0); }
+  #sty .pips { width: 100%; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
+  #sty .pips i { height: 10px; border-radius: 2px; background: #ffffff30; }
+  #sty .pips i.m { background: #e0cc72; } #sty .pips i.b { background: #d9705f; }
+  #sty .row { width: 100%; display: flex; justify-content: space-between; }
+  #sty .chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
+  #sty .chip { font: 400 9px Silkscreen, monospace; letter-spacing: 1px; padding: 6px 8px; border: 1px solid #ffffff40; border-radius: 3px; }
+  #sty .next { width: 100%; height: 92px; border-radius: 4px; background-size: cover; background-position: center;
+               image-rendering: pixelated; display: flex; align-items: flex-end; padding: 8px; text-align: left; box-sizing: border-box; }
+  #sty .next .lab { text-shadow: 1px 1px 0 #000, 0 0 6px #000; }
+  #sty .btn { max-width: 320px; }
+  #sty .tap { animation: styBlink 1.2s steps(2) infinite; }
+  #sty .r { animation: styRise .5s ease-out both; } #sty .s { animation: stySlam .55s cubic-bezier(.2,.9,.3,1.2) both; }
+  #sty .d { animation: styDrop .6s cubic-bezier(.2,.8,.3,1.1) both; } #sty .p { animation: styPan 2.4s ease-out both; }
+  @keyframes styRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
+  @keyframes stySlam { 0% { opacity: 0; transform: scale(2.2); } 60% { opacity: 1; transform: scale(.94); } 100% { transform: none; } }
+  @keyframes styDrop { 0% { opacity: 0; transform: translateY(-110px) rotate(-12deg); } 70% { opacity: 1; transform: translateY(6px) rotate(3deg); } 100% { transform: none; } }
+  @keyframes styPan { from { background-position: center 0%; } to { background-position: center 55%; } }
+  @keyframes styBlink { 50% { opacity: .3; } }
+  @media (prefers-reduced-motion: reduce) { #sty * { animation: none !important; } }
   .qBox { background: var(--solid); border: 2px solid var(--line); padding: 18px 16px;
           width: min(320px, 84vw); display: flex; flex-direction: column; gap: 10px; }
   /* it is a QUESTION, and a question calls — the one Bangers line on this overlay */
@@ -871,6 +916,9 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
     <button class="btn sec" id="qYes">LEAVE MATCH</button>
   </div>
 </div>
+<!-- THE STORY's screens (2026-10-15, PROJECT.md "THE STORY", phase 3): the act title card, the cup's
+     ceremony with its loot, and the act card. Built by main.storyScreen; the world is paused under it. -->
+<div id="sty" hidden></div>
 <div id="intro" data-stage="splash">
   <div class="card">
     <!-- The title screen IS the menu. A separate menu stage behind it was the same logo over the
@@ -1140,6 +1188,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
   </div>
 </div>
 <span id="recLamp" hidden>REC</span>
-<script type="module" src="src/main.js?v=380"></script>
+<script type="module" src="src/main.js?v=381"></script>
 </body>
 </html>