Highscore: Boden-Stufe als erkennbares Gras-Symbol darstellen

src/lib/components/home/HighscoreColumn.svelte

@@ -3,6 +3,7 @@
   import type { Stage } from '../../game/stages';
   import { progress } from '../../stores/progress';
   import Crown from '../svg/Crown.svelte';
+  import Ground from '../svg/Ground.svelte';
   import Balloon from '../svg/Balloon.svelte';
   import Cloud from '../svg/Cloud.svelte';
   import Moon from '../svg/Moon.svelte';
@@ -41,7 +42,7 @@
         {/if}
         <span class="symbol" aria-label={`Stufe ${slot.stage}`}>
           {#if slot.stage === 0}
-            <span class="ground" aria-hidden="true"></span>
+            <Ground size={48} />
           {:else}
             {@const Symbol = SYMBOL[slot.stage as Stage].c}
             <Symbol size={SYMBOL[slot.stage as Stage].size} />
@@ -89,12 +90,6 @@
     align-items: center;
     justify-content: center;
   }
-  .ground {
-    width: 40px;
-    height: 18px;
-    border-radius: 40px 40px 0 0;
-    background: linear-gradient(to top, #4ea34e, var(--c-ground));
-  }
   .placeholder {
     width: 32px;
     height: 32px;

src/lib/components/svg/Ground.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  let { size = 60 }: { size?: number } = $props();
+</script>
+
+<svg width={size} height={size * 0.7} viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <!-- Erde -->
+  <rect x="4" y="36" width="72" height="18" rx="9" fill="#b07a4a" stroke="#8a5a32" stroke-width="2" />
+  <!-- Gras mit welliger Oberkante -->
+  <path
+    d="M5 46 Q5 34 11 34 Q14 27 19 34 Q23 29 28 34 Q32 27 37 34 Q41 29 46 34 Q50 27 55 34 Q59 29 64 34 Q69 27 74 34 Q75 35 75 46 Z"
+    fill="#5fb85f"
+    stroke="#3f8f3f"
+    stroke-width="2"
+    stroke-linejoin="round"
+  />
+</svg>