feat: responsive desktop scaling for game cards

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

@@ -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) {