From 58c31d676643fc4f0075bfd91402159d9039af93 Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Sun, 29 Mar 2026 19:23:47 -0400
Subject: [PATCH] feat: responsive desktop scaling for game cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds two desktop breakpoints (900px, 1400px) that progressively
increase card width (290→340→400px), logo size (40→48→56px), score
font size (1.6→1.9→2.2rem), and team name size. Adds max-width on
main to keep layout centred on ultra-wide screens.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/static/styles.css | 69 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/app/static/styles.css b/app/static/styles.css
index 951ab88..71fa9c5 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -44,6 +44,9 @@ header {
 
 main {
     padding: 0.75rem 1.25rem 2rem;
+    max-width: 1800px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .section {
@@ -280,6 +283,72 @@ main {
     transition: width 0.5s ease;
 }
 
+/* ── Desktop ────────────────────────────────────── */
+
+@media (min-width: 900px) {
+    :root {
+        --card-w: 340px;
+        --gap: 1.25rem;
+    }
+
+    main {
+        padding: 1rem 2rem 2.5rem;
+    }
+
+    .header-title {
+        font-size: 2.4rem;
+    }
+
+    .game-box {
+        padding: 1.125rem 1.125rem 1rem;
+    }
+
+    .team-logo {
+        width: 48px;
+        height: 48px;
+    }
+
+    .team-name {
+        font-size: 0.95rem;
+    }
+
+    .team-score {
+        font-size: 1.9rem;
+    }
+}
+
+@media (min-width: 1400px) {
+    :root {
+        --card-w: 400px;
+        --gap: 1.5rem;
+    }
+
+    main {
+        padding: 1.25rem 2.5rem 3rem;
+    }
+
+    .header-title {
+        font-size: 2.8rem;
+    }
+
+    .game-box {
+        padding: 1.25rem 1.25rem 1.125rem;
+    }
+
+    .team-logo {
+        width: 56px;
+        height: 56px;
+    }
+
+    .team-name {
+        font-size: 1.05rem;
+    }
+
+    .team-score {
+        font-size: 2.2rem;
+    }
+}
+
 /* ── Mobile ─────────────────────────────────────── */
 
 @media (max-width: 640px) {