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 `
+    return `<span class="badge badge-pp">PP ${team} <span ${attrs}>${timeStr}</span></span>`;
-        <div class="pp-indicator">
-            <span class="pp-label">PP</span>
-            <span class="pp-team">${team}</span>
-            <span class="pp-clock" ${attrs}>${timeStr}</span>
-        </div>`;
 }
 
 // ── Gauge ────────────────────────────────────────────

app/static/styles.css

@@ -212,44 +212,12 @@ main {
     white-space: nowrap;
 }
 
-/* ── Power Play Indicator ───────────────────────── */
+/* ── Power Play Badge (inline in card header) ─── */
 
-.pp-indicator {
+.badge-pp {
-    display: flex;
+    background: rgba(239, 68, 68, 0.15);
-    align-items: center;
-    gap: 0.4rem;
-    margin-top: 0.5rem;
-    padding: 0.35rem 0.5rem;
-    background: rgba(239, 68, 68, 0.1);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-    border-radius: 6px;
-}
-
-.pp-label {
-    font-size: 0.6rem;
-    font-weight: 700;
-    letter-spacing: 0.08em;
     color: var(--red);
-    text-transform: uppercase;
+    border: 1px solid rgba(239, 68, 68, 0.35);
-    flex-shrink: 0;
-}
-
-.pp-team {
-    font-size: 0.72rem;
-    font-weight: 600;
-    color: var(--text);
-    flex: 1;
-    min-width: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.pp-clock {
-    font-size: 0.72rem;
-    font-weight: 700;
-    color: var(--red);
-    flex-shrink: 0;
     font-variant-numeric: tabular-nums;
 }