Make application responsive for mobile and tablet

Breakpoints at 600px (tablet) and 420px (mobile):
- Header: smaller emblem and title on mobile
- StandingsTable: hide DV/DT/Vorm at 600px, also W/D/L at 420px
- TeamMatchesModal: bottom sheet on mobile, hide matchday column
- CompetitionPicker: smaller buttons, hide country label on mobile

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

src/components/StandingsTable.module.css

@@ -86,7 +86,7 @@
   align-items: center;
   gap: 0.6rem;
   text-align: left !important;
-  min-width: 180px;
+  min-width: 140px;
 }
 
 .crest {
@@ -145,3 +145,47 @@
   padding-top: 1rem;
   border-top: 1px solid #1f1f1f;
 }
+
+/*
+  Column order in thead/tbody:
+  1=pos  2=team  3=G  4=W  5=D  6=L  7=DV  8=DT  9=DS  10=Ptn  11=Vorm
+*/
+
+/* Tablet: hide DV, DT, Vorm */
+@media (max-width: 600px) {
+  .table th:nth-child(7),
+  .table td:nth-child(7),
+  .table th:nth-child(8),
+  .table td:nth-child(8),
+  .table th:nth-child(11),
+  .table td:nth-child(11) {
+    display: none;
+  }
+
+  .table th,
+  .table td {
+    padding: 0.6rem 0.5rem;
+  }
+}
+
+/* Mobile: also hide W, D, L */
+@media (max-width: 420px) {
+  .table th:nth-child(4),
+  .table td:nth-child(4),
+  .table th:nth-child(5),
+  .table td:nth-child(5),
+  .table th:nth-child(6),
+  .table td:nth-child(6) {
+    display: none;
+  }
+
+  .team {
+    min-width: 110px;
+  }
+
+  .table th,
+  .table td {
+    padding: 0.55rem 0.35rem;
+    font-size: 0.8rem;
+  }
+}