refactor: replace shots bar with inline SOG on team rows

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/static/script.js

@@ -40,8 +40,6 @@ function renderLiveGame(game) {
 
     const dot = running ? `<span class="live-dot"></span>` : '';
 
-    const shots = shotsBar(game['Away Shots'], game['Home Shots']);
-
     const hype = !intermission ? `
         <div class="hype-meter">
             <span class="hype-label">Hype Meter</span>
@@ -60,7 +58,6 @@ function renderLiveGame(game) {
                 ${dot}
             </div>
             ${teamRow(game, 'Away', 'live')}
-            ${shots}
             ${teamRow(game, 'Home', 'live')}
             ${hype}
         </div>`;
@@ -104,7 +101,7 @@ function teamRow(game, side, state) {
     const pp     = game[`${side} Power Play`];
     const record = game[`${side} Record`];
 
-    const sogHtml = (state === 'final' && sog !== undefined)
+    const sogHtml = (state === 'live' || state === 'final') && sog !== undefined
         ? `<span class="team-sog">${sog} SOG</span>` : '';
     const ppHtml  = pp ? `<span class="team-pp">${pp}</span>` : '';
 
@@ -123,26 +120,6 @@ function teamRow(game, side, state) {
         </div>`;
 }
 
-// ── Shots Bar ────────────────────────────────────────
-
-function shotsBar(away, home) {
-    const total = (away || 0) + (home || 0);
-    const awayPct = total > 0 ? (away / total) * 100 : 50;
-    const homePct = total > 0 ? (home / total) * 100 : 50;
-    return `
-        <div class="shots-bar">
-            <div class="shots-row">
-                <span class="shots-num">${away}</span>
-                <div class="shots-track">
-                    <div class="shots-fill shots-fill-away" style="width:${awayPct}%"></div>
-                    <div class="shots-fill shots-fill-home" style="width:${homePct}%"></div>
-                </div>
-                <span class="shots-num">${home}</span>
-            </div>
-            <span class="shots-label">Shots on Goal</span>
-        </div>`;
-}
-
 // ── Gauge ────────────────────────────────────────────
 
 function updateGauges() {

app/static/styles.css

@@ -145,10 +145,6 @@ main {
     border-top: 1px solid var(--card-border);
 }
 
-.team-row + .shots-bar + .team-row {
-    border-top: none;
-}
-
 .team-logo {
     width: 30px;
     height: 30px;
@@ -200,61 +196,6 @@ main {
     white-space: nowrap;
 }
 
-/* ── Shots Bar ──────────────────────────────────── */
-
-.shots-bar {
-    margin: 0.2rem 0;
-}
-
-.shots-row {
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-}
-
-.shots-track {
-    flex: 1;
-    height: 5px;
-    border-radius: 99px;
-    overflow: hidden;
-    display: flex;
-    background: var(--badge-bg);
-}
-
-.shots-fill {
-    height: 100%;
-    transition: width 0.5s ease;
-}
-
-.shots-fill-away {
-    background: #e5e7eb;
-    border-radius: 99px 0 0 99px;
-}
-
-.shots-fill-home {
-    background: #6b7280;
-    border-radius: 0 99px 99px 0;
-}
-
-.shots-num {
-    font-size: 0.72rem;
-    font-weight: 700;
-    color: var(--text);
-    min-width: 1.25rem;
-    text-align: center;
-}
-
-.shots-label {
-    display: block;
-    font-size: 0.6rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--text-muted);
-    margin-top: 0.25rem;
-    text-align: center;
-}
-
 /* ── Hype Meter ─────────────────────────────────── */
 
 .hype-meter {