diff --git a/app/static/script.js b/app/static/script.js
index 2ce4b0c..099ccb5 100644
--- a/app/static/script.js
+++ b/app/static/script.js
@@ -69,12 +69,12 @@ function renderLiveGame(game) {
${periodLabel}
${time}
+ ${ppBadge(game)}
${dot}
${teamRow(game, 'Away', 'live')}
${teamRow(game, 'Home', 'live')}
- ${ppIndicator(game)}
${hype}
`;
}
@@ -134,7 +134,7 @@ function teamRow(game, side, state) {
`;
}
-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 `
-
- PP
- ${team}
- ${timeStr}
-
`;
+ return `PP ${team} ${timeStr}`;
}
// ── Gauge ────────────────────────────────────────────
diff --git a/app/static/styles.css b/app/static/styles.css
index 3e77277..8d100a4 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -212,44 +212,12 @@ main {
white-space: nowrap;
}
-/* ── Power Play Indicator ───────────────────────── */
+/* ── Power Play Badge (inline in card header) ─── */
-.pp-indicator {
- display: flex;
- 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;
+.badge-pp {
+ background: rgba(239, 68, 68, 0.15);
color: var(--red);
- text-transform: uppercase;
- 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;
+ border: 1px solid rgba(239, 68, 68, 0.35);
font-variant-numeric: tabular-nums;
}