Ergebnis-Ansicht: Highscore zentrieren, Rakete und Zielzahl entfernen

src/lib/screens/ResultScreen.svelte

@@ -5,7 +5,6 @@
   import { startGame } from '../stores/game';
   import { goHome, goGame } from '../stores/route';
   import { play, unlockAudio } from '../audio/soundManager';
-  import Rocket from '../components/svg/Rocket.svelte';
   import Rainbow from '../components/svg/Rainbow.svelte';
   import HighscoreColumn from '../components/home/HighscoreColumn.svelte';
 
@@ -32,26 +31,16 @@
 </script>
 
 <div class="screen" in:fade={{ duration: 240 }}>
-  <header>
-    <h2 class="target-label">
-      <span class="num">{target}</span>
-    </h2>
-  </header>
-
   <div class="celebration">
     {#if isWin}
       <div class="rainbow-wrap" in:fly={{ y: 30, duration: 600 }}>
-        <Rainbow size={260} />
+        <Rainbow size={300} />
       </div>
     {/if}
-    <div class="rocket-wrap" in:fly={{ y: 60, duration: 700 }}>
-      <Rocket size={160} flameAnimated={false} />
-    </div>
-  </div>
-
-  <aside class="scores">
+    <div class="scores" in:fly={{ y: 40, duration: 500 }}>
       <HighscoreColumn {target} highlightDate={lastRunDate} />
-  </aside>
+    </div>
+  </div>
 
   <footer class="actions">
     <button class="action retry" type="button" onclick={retry} aria-label="Nochmal">
@@ -72,43 +61,31 @@
   .screen {
     height: 100%;
     display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: auto 1fr auto;
-    grid-template-areas:
-      'header header'
-      'celebration scores'
-      'actions actions';
+    grid-template-rows: 1fr auto;
     padding: 16px;
     gap: 12px;
   }
-  header { grid-area: header; display: flex; justify-content: center; }
-  .target-label .num {
-    font-size: clamp(48px, 8vw, 80px);
-    font-weight: 900;
-    color: var(--c-text-on-dark);
-    background: rgba(255,255,255,0.18);
-    border-radius: 18px;
-    padding: 6px 28px;
-  }
   .celebration {
-    grid-area: celebration;
     display: grid;
     place-items: center;
     position: relative;
+    min-height: 0;
   }
-  .rocket-wrap { z-index: 2; }
   .rainbow-wrap {
     position: absolute;
-    bottom: 12%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     z-index: 1;
+    opacity: 0.85;
   }
   .scores {
-    grid-area: scores;
-    width: 110px;
-    height: 100%;
+    position: relative;
+    z-index: 2;
+    width: 120px;
+    height: min(82%, 460px);
   }
   .actions {
-    grid-area: actions;
     display: flex;
     justify-content: center;
     gap: 24px;