Levelauswahl: nicht volle letzte Reihe zentrieren statt linksbündig

src/lib/components/home/NumberCard.svelte

@@ -44,6 +44,7 @@
     border-radius: var(--radius-card);
     box-shadow: var(--shadow-soft);
     aspect-ratio: 3 / 4;
+    width: 100%;
     min-width: 0;
     padding: 12px;
     display: grid;

src/lib/screens/HomeScreen.svelte

@@ -37,7 +37,7 @@
 
   <div class="cards-grid">
     {#each TARGETS as target (target)}
-      <NumberCard {target} onClick={handlePick} />
+      <div class="cell"><NumberCard {target} onClick={handlePick} /></div>
     {/each}
   </div>
 </div>
@@ -72,12 +72,14 @@
   }
   .cards-grid {
     /* Karten haben aspect-ratio 3/4. Bei 7 Karten ergeben sich je nach Spaltenzahl
-       2/3/4 Reihen — Grid-Breite wird so begrenzt, dass die Reihen in die verfügbare
-       Höhe passen. Formel: max-width = C·3·(H - (R-1)·g) / (4R) + (C-1)·g. */
+       2/3/4 Reihen — Breite wird so begrenzt, dass die Reihen in die verfügbare
+       Höhe passen. Formel: max-width = C·3·(H - (R-1)·g) / (4R) + (C-1)·g.
+       Flexbox statt Grid, damit eine nicht volle letzte Reihe zentriert wird. */
     --gap: 14px;
     --avail-h: calc(100dvh - 130px);
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    --cols: 4;
+    display: flex;
+    flex-wrap: wrap;
     gap: var(--gap);
     align-content: center;
     justify-content: center;
@@ -87,16 +89,20 @@
     margin-inline: auto;
     padding-bottom: 10px;
   }
+  .cell {
+    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
+    min-width: 0;
+  }
   @media (max-width: 640px) {
     .cards-grid {
-      grid-template-columns: repeat(3, 1fr);
+      --cols: 3;
       /* 3 Spalten, 3 Reihen */
       max-width: calc(var(--avail-h) * 0.75 + var(--gap) * 0.5);
     }
   }
   @media (max-width: 380px) {
     .cards-grid {
-      grid-template-columns: repeat(2, 1fr);
+      --cols: 2;
       /* 2 Spalten, 4 Reihen */
       max-width: calc(var(--avail-h) * 0.375 - var(--gap) * 0.125);
     }