style: tighten playoff banner, series, and bracket at ≤480px

Adds a consolidated narrow-phone breakpoint so the playoff UI reads
cleanly on 375–428px viewports: banner meta stacks vertically (killing
the dangling dot separator), title and trophy shrink, series hero padding
and logos tighten, and the bracket accordion's matchup rows get more
breathing room.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

app/static/styles.css

@@ -370,6 +370,43 @@ main {
     }
 }
 
+/* Narrow-phone (≤480px) playoff polish — banner, series, bracket, headings */
+@media (max-width: 480px) {
+    .playoff-banner { gap: 0.5rem; }
+    .banner-main    { gap: 0.6rem; }
+    .banner-trophy  { width: 30px; height: 36px; }
+    .banner-title   { font-size: 0.82rem; letter-spacing: 0.08em; }
+    .banner-year    { margin-left: 0.25rem; }
+
+    .banner-meta {
+        flex-direction: column;
+        gap: 0.15rem;
+        font-size: 0.7rem;
+        letter-spacing: 0.05em;
+    }
+    .banner-meta > span:not(.hidden) + span:not(.hidden)::before {
+        content: none;
+    }
+
+    .series-hero          { padding: 1rem 0.875rem; gap: 0.75rem; }
+    .series-team-logo     { width: 48px; height: 48px; }
+    .series-team-name     { font-size: 0.95rem; }
+    .series-team-wins     { font-size: 2rem; }
+    .series-next-matchup  { font-size: 1rem; }
+
+    .bracket-round-summary { padding: 0.65rem 0.85rem; }
+    .bracket-round-body    { padding: 0 0.65rem 0.65rem; }
+    .bracket-matchup       { padding: 0.4rem 0.5rem; }
+    .bracket-team {
+        font-size: 0.8rem;
+        grid-template-columns: 20px 1fr auto auto;
+        gap: 0.35rem;
+    }
+    .bracket-team-logo { width: 20px; height: 20px; }
+
+    .playoff-mode .section-heading-gold { letter-spacing: 0.14em; }
+}
+
 /* ── Playoff Banner ─────────────────────────────── */
 
 .playoff-banner {