From 56feb0a5f26b7b31e7a90b3d44ada7548c641b83 Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Sun, 29 Mar 2026 14:00:18 -0400
Subject: [PATCH] polish: improve game card aesthetics

- larger scores (1.6rem), logos (40px), and card width (290px)
- green top border accent on live game cards
- section headings reduced to small muted caps
- more breathing room in team rows
- slightly larger card radius and gap

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/static/script.js  |  2 +-
 app/static/styles.css | 39 ++++++++++++++++++++++++---------------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/app/static/script.js b/app/static/script.js
index 4de508f..a61132f 100644
--- a/app/static/script.js
+++ b/app/static/script.js
@@ -49,7 +49,7 @@ function renderLiveGame(game) {
         </div>` : '';
 
     return `
-        <div class="game-box">
+        <div class="game-box game-box-live">
             <div class="card-header">
                 <div class="badges">
                     ${periodLabel}
diff --git a/app/static/styles.css b/app/static/styles.css
index 101c35d..8ffac7e 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -4,13 +4,14 @@
     --card-border: #2a2a2a;
     --badge-bg: #2a2a2a;
     --text: #f0f0f0;
-    --text-muted: #777;
+    --text-muted: #666;
     --green-bg: #14532d;
     --green-text: #86efac;
+    --green-accent: #22c55e;
     --red: #ef4444;
-    --gap: 0.875rem;
-    --radius: 10px;
-    --card-w: 250px;
+    --gap: 1rem;
+    --radius: 12px;
+    --card-w: 290px;
 }
 
 *, *::before, *::after {
@@ -54,12 +55,14 @@ main {
 }
 
 .section-heading {
-    font-size: 2rem;
+    font-size: 0.7rem;
     font-weight: 700;
     text-align: center;
-    color: var(--text);
-    margin-bottom: 1rem;
-    margin-top: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--text-muted);
+    margin-bottom: 0.875rem;
+    margin-top: 0.25rem;
 }
 
 .games-grid {
@@ -75,9 +78,14 @@ main {
     background: var(--card);
     border: 1px solid var(--card-border);
     border-radius: var(--radius);
-    padding: 0.875rem;
+    padding: 1rem 1rem 0.875rem;
     width: var(--card-w);
     flex-shrink: 0;
+    border-top-width: 3px;
+}
+
+.game-box-live {
+    border-top-color: var(--green-accent);
 }
 
 /* ── Card Header (badges + live dot) ───────────── */
@@ -137,8 +145,8 @@ main {
 .team-row {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    padding: 0.45rem 0;
+    gap: 0.625rem;
+    padding: 0.55rem 0;
 }
 
 .team-row + .team-row {
@@ -146,8 +154,8 @@ main {
 }
 
 .team-logo {
-    width: 30px;
-    height: 30px;
+    width: 40px;
+    height: 40px;
     object-fit: contain;
     flex-shrink: 0;
 }
@@ -180,12 +188,13 @@ main {
 }
 
 .team-score {
-    font-size: 1.2rem;
+    font-size: 1.6rem;
     font-weight: 700;
     margin-left: auto;
     flex-shrink: 0;
-    min-width: 1.5rem;
+    min-width: 1.75rem;
     text-align: right;
+    letter-spacing: -0.02em;
 }
 
 .team-record {