refactor: move power play indicator onto the team row, drop the team name

The header PP badge repeated the team name that was already visible a row below. Put the indicator on the team that actually has the advantage: "PP 01:47" appears inline next to SOG, and the old ppBadge + .badge-pp styling go away.

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

app/static/script.js

@@ -150,7 +150,6 @@ function renderLiveGame(game, opts = {}) {
                 <div class="badges">
                     ${periodBadge}
                     <span class="badge" ${clockAttrs}>${time}</span>
-                    ${ppBadge(game)}
                 </div>
                 ${dot}
             </div>
@@ -241,9 +240,14 @@ function teamRow(game, side, state) {
     const score  = game[`${side} Score`];
     const sog    = game[`${side} Shots`];
     const record = game[`${side} Record`];
+    const pp     = game[`${side} Power Play`];
 
     const sogHtml = (state === 'live' || state === 'final') && sog !== undefined
         ? `<span class="team-sog">${sog} SOG</span>` : '';
+    const ppHtml = state === 'live' && pp ? teamPpIndicator(pp) : '';
+
+    const subParts = [sogHtml, ppHtml].filter(Boolean).join('');
+    const subline  = subParts ? `<div class="team-subline">${subParts}</div>` : '';
 
     const right = state === 'pre'
         ? `<span class="team-record">${record}</span>`
@@ -254,24 +258,17 @@ function teamRow(game, side, state) {
             <img src="${logo}" alt="${name} logo" class="team-logo">
             <div class="team-meta">
                 <span class="team-name">${name}</span>
-                ${sogHtml}
+                ${subline}
             </div>
             ${right}
         </div>`;
 }
 
-function ppBadge(game) {
+function teamPpIndicator(pp) {
-    const awayPP = game['Away Power Play'];
-    const homePP = game['Home Power Play'];
-    const pp     = awayPP || homePP;
-    if (!pp) return '';
-
-    const team    = awayPP ? game['Away Team'] : game['Home Team'];
     const timeStr = pp.replace('PP ', '');
     const seconds = timeToSeconds(timeStr);
     const attrs   = `data-seconds="${seconds}" data-received-at="${Date.now()}" data-pp-clock`;
-
+    return `<span class="team-pp">PP <span ${attrs}>${timeStr}</span></span>`;
-    return `<span class="badge badge-pp">PP ${team} <span ${attrs}>${timeStr}</span></span>`;
 }
 
 function gameKey(game) {

app/static/styles.css

@@ -209,6 +209,13 @@ main {
     font-size: 0.68rem;
     color: var(--red);
     font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+
+.team-subline {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
 }
 
 .team-score {
@@ -229,15 +236,6 @@ main {
     white-space: nowrap;
 }
 
-/* ── Power Play Badge (inline in card header) ─── */
-
-.badge-pp {
-    background: rgba(239, 68, 68, 0.15);
-    color: var(--red);
-    border: 1px solid rgba(239, 68, 68, 0.35);
-    font-variant-numeric: tabular-nums;
-}
-
 /* ── Hype Meter ─────────────────────────────────── */
 
 .hype-meter {