feat: inline power play indicator as compact badge in card header

Moves the PP team + countdown into the badges row next to period and
clock, freeing up a full line of vertical space on each live card.

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

app/static/script.js

@@ -69,12 +69,12 @@ function renderLiveGame(game) {
                 <div class="badges">
                     ${periodLabel}
                     <span class="badge" ${clockAttrs}>${time}</span>
+                    ${ppBadge(game)}
                 </div>
                 ${dot}
             </div>
             ${teamRow(game, 'Away', 'live')}
             ${teamRow(game, 'Home', 'live')}
-            ${ppIndicator(game)}
             ${hype}
         </div>`;
 }
@@ -134,7 +134,7 @@ function teamRow(game, side, state) {
         </div>`;
 }
 
-function ppIndicator(game) {
+function ppBadge(game) {
     const awayPP = game['Away Power Play'];
     const homePP = game['Home Power Play'];
     const pp     = awayPP || homePP;
@@ -145,12 +145,7 @@ function ppIndicator(game) {
     const seconds = timeToSeconds(timeStr);
     const attrs   = `data-seconds="${seconds}" data-received-at="${Date.now()}" data-pp-clock`;
 
-    return `
-        <div class="pp-indicator">
-            <span class="pp-label">PP</span>
-            <span class="pp-team">${team}</span>
-            <span class="pp-clock" ${attrs}>${timeStr}</span>
-        </div>`;
+    return `<span class="badge badge-pp">PP ${team} <span ${attrs}>${timeStr}</span></span>`;
 }
 
 // ── Gauge ────────────────────────────────────────────