feat: add shots on goal bar to live game cards, clean up gitignore

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

app/static/script.js

@@ -40,6 +40,8 @@ function renderLiveGame(game) {
 
     const dot = running ? `<span class="live-dot"></span>` : '';
 
+    const shots = !intermission ? shotsBar(game['Away Shots'], game['Home Shots']) : '';
+
     const hype = !intermission ? `
         <div class="hype-meter">
             <span class="hype-label">Hype Meter</span>
@@ -59,6 +61,7 @@ function renderLiveGame(game) {
             </div>
             ${teamRow(game, 'Away', 'live')}
             ${teamRow(game, 'Home', 'live')}
+            ${shots}
             ${hype}
         </div>`;
 }
@@ -101,7 +104,7 @@ function teamRow(game, side, state) {
     const pp     = game[`${side} Power Play`];
     const record = game[`${side} Record`];
 
-    const sogHtml = (state !== 'pre' && sog !== undefined)
+    const sogHtml = (state === 'final' && sog !== undefined)
         ? `<span class="team-sog">${sog} SOG</span>` : '';
     const ppHtml  = pp ? `<span class="team-pp">${pp}</span>` : '';
 
@@ -120,6 +123,26 @@ 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

@@ -196,6 +196,61 @@ main {
     white-space: nowrap;
 }
 
+/* ── Shots Bar ──────────────────────────────────── */
+
+.shots-bar {
+    margin-top: 0.75rem;
+}
+
+.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: #4a90e2;
+    border-radius: 99px 0 0 99px;
+}
+
+.shots-fill-home {
+    background: #f97316;
+    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 {