From aceb783584438e2528947708fabc4afc07b45f9e Mon Sep 17 00:00:00 2001
From: schmop <lars.richard@rocketmail.com>
Date: Sun, 31 May 2026 17:28:34 +0200
Subject: [PATCH] =?UTF-8?q?Highscore-Hintergrund:=20gr=C3=B6=C3=9Fere,=20a?=
 =?UTF-8?q?bwechslungsreichere=20und=20kr=C3=A4ftigere=20Animationen;=20Mo?=
 =?UTF-8?q?nd=20zieht=20=C3=BCber=20die=20volle=20Breite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/home/HighscoreColumn.svelte    |  13 +-
 src/lib/components/home/StageAmbience.svelte  | 199 +++++++++---------
 2 files changed, 107 insertions(+), 105 deletions(-)

diff --git a/src/lib/components/home/HighscoreColumn.svelte b/src/lib/components/home/HighscoreColumn.svelte
index 79ad9c0..940cb4b 100644
--- a/src/lib/components/home/HighscoreColumn.svelte
+++ b/src/lib/components/home/HighscoreColumn.svelte
@@ -60,9 +60,14 @@
     gap: 10px;
     height: 100%;
   }
+  /* Karten sind bewusst deckend (dunkel, frosted): die Hintergrund-Animationen
+     laufen dahinter und können die Inhalte nie überdecken oder unleserlich machen. */
   .slot {
     position: relative;
-    background: rgba(255, 255, 255, 0.16);
+    background: rgba(16, 26, 54, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
     border-radius: 14px;
     display: flex;
     align-items: center;
@@ -71,11 +76,11 @@
     min-height: 56px;
   }
   .slot.empty {
-    background: rgba(255, 255, 255, 0.06);
+    background: rgba(16, 26, 54, 0.45);
   }
   .slot.current {
-    background: rgba(255, 229, 102, 0.3);
-    box-shadow: 0 0 0 3px var(--c-rocket-window);
+    border-color: var(--c-rocket-window);
+    box-shadow: 0 0 0 2px var(--c-rocket-window), 0 0 18px rgba(255, 229, 102, 0.5);
   }
   .crown {
     position: absolute;
diff --git a/src/lib/components/home/StageAmbience.svelte b/src/lib/components/home/StageAmbience.svelte
index a2b67d0..8d51337 100644
--- a/src/lib/components/home/StageAmbience.svelte
+++ b/src/lib/components/home/StageAmbience.svelte
@@ -8,158 +8,155 @@
 
   let { stage }: { stage: Stage } = $props();
 
-  // Deko lebt ausschließlich in zwei Seiten-Zonen links und rechts der zentrierten
-  // Highscore-Spalte. Die Zonen klammern die Spalte aus und sind geclippt, sodass
-  // keine Animation jemals über eine Karte läuft.
-  // l = Position in % innerhalb der Zone, t/b = oben/unten in %, s = Größe,
-  // d = Dauer (s), dl = Verzögerung (s), side = Zone.
-  type Side = 'l' | 'r';
-  type Deco = { side: Side; l: number; t?: number; b?: number; s: number; d: number; dl: number };
+  // Animationen füllen die ganze Fläche hinter den (deckenden) Karten. l/t/b in %,
+  // s = Größe, d = Dauer (s), dl = Verzögerung (s), flip/rot = Variation, c/sc/cv = Symbol-Variante.
+  type Deco = {
+    l: number; t?: number; b?: number; s: number; d: number; dl: number;
+    flip?: boolean; rot?: number; c?: number; sc?: number; cv?: number;
+  };
+
+  // Ballon-Farbvarianten [Körper, Kontur].
+  const BALLOON_COLORS = [
+    ['#ff8aa8', '#c25578'],
+    ['#6cc2ff', '#3a82c2'],
+    ['#7ad17a', '#3f8f3f'],
+    ['#ffd24a', '#c79a2a'],
+    ['#c79aff', '#8a5fd0'],
+  ];
+  const STAR_COLORS = ['#ffe34a', '#ffffff', '#a8e8ff', '#ffd24a'];
 
   const balloons: Deco[] = [
-    { side: 'l', l: 55, t: 58, s: 62, d: 4.5, dl: 0 },
-    { side: 'l', l: 25, t: 26, s: 44, d: 5.2, dl: 0.6 },
-    { side: 'l', l: 70, t: 82, s: 38, d: 5.0, dl: 0.4 },
-    { side: 'r', l: 40, t: 54, s: 68, d: 4.0, dl: 0.3 },
-    { side: 'r', l: 65, t: 22, s: 48, d: 5.6, dl: 0.9 },
-    { side: 'r', l: 20, t: 78, s: 40, d: 4.8, dl: 1.2 },
+    { l: 5, t: 52, s: 92, c: 0, rot: -5, d: 3.6, dl: 0 },
+    { l: 17, t: 12, s: 62, c: 1, flip: true, rot: 7, d: 4.3, dl: 0.7 },
+    { l: 31, t: 76, s: 76, c: 2, rot: 3, d: 3.9, dl: 0.3 },
+    { l: 58, t: 28, s: 70, c: 3, flip: true, rot: -6, d: 4.6, dl: 1.0 },
+    { l: 80, t: 60, s: 96, c: 4, rot: 4, d: 3.4, dl: 0.2 },
+    { l: 91, t: 16, s: 58, c: 1, flip: true, rot: -3, d: 4.8, dl: 0.5 },
+    { l: 69, t: 86, s: 60, c: 0, rot: 5, d: 4.0, dl: 0.9 },
   ];
 
   const clouds: Deco[] = [
-    { side: 'l', l: 18, t: 16, s: 88, d: 9, dl: 0 },
-    { side: 'l', l: 42, t: 70, s: 78, d: 10, dl: 0.5 },
-    { side: 'l', l: 58, t: 44, s: 68, d: 9.5, dl: 0.8 },
-    { side: 'r', l: 22, t: 24, s: 100, d: 11, dl: 1 },
-    { side: 'r', l: 40, t: 78, s: 92, d: 8.5, dl: 1.5 },
-  ];
-
-  const moonStars: Deco[] = [
-    { side: 'l', l: 30, t: 24, s: 24, d: 2.2, dl: 0 },
-    { side: 'l', l: 55, t: 58, s: 18, d: 2.8, dl: 0.5 },
-    { side: 'l', l: 18, t: 76, s: 22, d: 2.4, dl: 0.9 },
-    { side: 'r', l: 65, t: 62, s: 20, d: 2.6, dl: 0.3 },
-    { side: 'r', l: 35, t: 44, s: 16, d: 3.0, dl: 1.1 },
-    { side: 'r', l: 72, t: 32, s: 16, d: 2.5, dl: 0.7 },
+    { l: 3, t: 16, s: 124, cv: 0, d: 7.5, dl: 0 },
+    { l: 24, t: 62, s: 102, cv: 1, flip: true, d: 9, dl: 0.6 },
+    { l: 13, t: 82, s: 92, cv: 0, flip: true, d: 8.4, dl: 1.2 },
+    { l: 57, t: 22, s: 146, cv: 1, d: 7, dl: 0.3 },
+    { l: 79, t: 64, s: 112, cv: 0, flip: true, d: 9.4, dl: 0.9 },
+    { l: 88, t: 38, s: 96, cv: 1, d: 8, dl: 1.5 },
   ];
 
   const stars: Deco[] = [
-    { side: 'l', l: 25, t: 18, s: 28, d: 2.2, dl: 0 },
-    { side: 'l', l: 55, t: 46, s: 20, d: 2.6, dl: 0.6 },
-    { side: 'l', l: 18, t: 70, s: 24, d: 2.4, dl: 1.0 },
-    { side: 'l', l: 65, t: 82, s: 16, d: 3.0, dl: 0.3 },
-    { side: 'l', l: 40, t: 32, s: 14, d: 3.1, dl: 1.4 },
-    { side: 'r', l: 60, t: 20, s: 26, d: 2.3, dl: 0.8 },
-    { side: 'r', l: 35, t: 46, s: 18, d: 2.7, dl: 0.2 },
-    { side: 'r', l: 70, t: 70, s: 22, d: 2.5, dl: 1.2 },
-    { side: 'r', l: 30, t: 82, s: 16, d: 2.9, dl: 0.5 },
-    { side: 'r', l: 55, t: 34, s: 14, d: 2.8, dl: 0.9 },
+    { l: 7, t: 15, s: 42, sc: 0, rot: 0, d: 1.8, dl: 0 },
+    { l: 19, t: 49, s: 28, sc: 1, rot: 18, d: 2.4, dl: 0.5 },
+    { l: 11, t: 79, s: 36, sc: 2, rot: -12, d: 2.0, dl: 1.0 },
+    { l: 34, t: 29, s: 24, sc: 0, rot: 8, d: 2.6, dl: 0.3 },
+    { l: 29, t: 88, s: 32, sc: 3, rot: -8, d: 2.2, dl: 0.8 },
+    { l: 61, t: 13, s: 34, sc: 0, rot: 14, d: 1.9, dl: 0.4 },
+    { l: 73, t: 47, s: 48, sc: 1, rot: -10, d: 2.3, dl: 0.1 },
+    { l: 66, t: 82, s: 26, sc: 2, rot: 6, d: 2.7, dl: 1.1 },
+    { l: 87, t: 23, s: 40, sc: 0, rot: -16, d: 2.0, dl: 0.7 },
+    { l: 93, t: 61, s: 30, sc: 3, rot: 10, d: 2.5, dl: 0.2 },
   ];
 
   const grass: Deco[] = [
-    { side: 'l', l: 25, b: 2, s: 46, d: 3.0, dl: 0 },
-    { side: 'l', l: 60, b: 2, s: 38, d: 3.4, dl: 0.4 },
-    { side: 'r', l: 30, b: 2, s: 44, d: 2.8, dl: 0.2 },
-    { side: 'r', l: 65, b: 2, s: 36, d: 3.2, dl: 0.6 },
+    { l: 5, b: 1, s: 66, d: 2.4, dl: 0 },
+    { l: 19, b: 2, s: 48, flip: true, d: 2.8, dl: 0.4 },
+    { l: 33, b: 1, s: 56, d: 2.2, dl: 0.7 },
+    { l: 63, b: 2, s: 50, flip: true, d: 2.6, dl: 0.2 },
+    { l: 78, b: 1, s: 70, d: 2.3, dl: 0.9 },
+    { l: 90, b: 2, s: 46, flip: true, d: 2.7, dl: 0.5 },
   ];
 
-  function pos(d: Deco): string {
+  function baseStyle(d: Deco): string {
     const vert = d.b != null ? `bottom:${d.b}%` : `top:${d.t}%`;
-    return `left:${d.l}%; ${vert}; --dur:${d.d}s; animation-delay:${d.dl}s`;
+    return `left:${d.l}%; ${vert}; transform: scaleX(${d.flip ? -1 : 1}) rotate(${d.rot ?? 0}deg);`;
   }
+  const fx = (d: Deco) => `--dur:${d.d}s; animation-delay:${d.dl}s`;
 </script>
 
-{#snippet layer(side: Side)}
+<div class="ambience" aria-hidden="true">
   {#if stage === 1}
-    {#each balloons.filter((d) => d.side === side) as d, i (i)}
-      <span class="deco bob" style={pos(d)}><Balloon size={d.s} /></span>
+    {#each balloons as d, i (i)}
+      <span class="deco" style={baseStyle(d)}>
+        <span class="anim float" style={fx(d)}>
+          <Balloon size={d.s} color={BALLOON_COLORS[d.c ?? 0][0]} stroke={BALLOON_COLORS[d.c ?? 0][1]} />
+        </span>
+      </span>
     {/each}
   {:else if stage === 2}
-    {#each clouds.filter((d) => d.side === side) as d, i (i)}
-      <span class="deco drift" style={pos(d)}><Cloud size={d.s} opacity={0.92} /></span>
+    {#each clouds as d, i (i)}
+      <span class="deco" style={baseStyle(d)}>
+        <span class="anim drift" style={fx(d)}><Cloud size={d.s} variant={d.cv ?? 0} opacity={0.95} /></span>
+      </span>
     {/each}
   {:else if stage === 3}
-    {#if side === 'r'}
-      <span class="deco glow" style="left:42%; top:14%; --dur:5s; animation-delay:0s"><Moon size={80} /></span>
-    {/if}
-    {#each moonStars.filter((d) => d.side === side) as d, i (i)}
-      <span class="deco twinkle" style={pos(d)}><Star size={d.s} color="#fff7c8" /></span>
-    {/each}
+    <!-- Mond zieht eine Bahn über die ganze Breite, keine Sterne (sonst Verwechslung mit dem Stern-Level). -->
+    <span class="moon"><Moon size={104} /></span>
   {:else if stage >= 4}
-    {#each stars.filter((d) => d.side === side) as d, i (i)}
-      <span class="deco twinkle" style={pos(d)}><Star size={d.s} /></span>
+    {#each stars as d, i (i)}
+      <span class="deco" style={baseStyle(d)}>
+        <span class="anim twinkle" style={fx(d)}><Star size={d.s} color={STAR_COLORS[d.sc ?? 0]} /></span>
+      </span>
     {/each}
   {:else}
-    {#each grass.filter((d) => d.side === side) as d, i (i)}
-      <span class="deco sway" style={pos(d)}><Ground size={d.s} /></span>
+    {#each grass as d, i (i)}
+      <span class="deco" style={baseStyle(d)}>
+        <span class="anim sway" style={fx(d)}><Ground size={d.s} /></span>
+      </span>
     {/each}
   {/if}
-{/snippet}
-
-<div class="ambience" aria-hidden="true">
-  <div class="zone left">{@render layer('l')}</div>
-  <div class="zone right">{@render layer('r')}</div>
 </div>
 
 <style>
-  /* --reserve = halbe Kartenbreite (60px) + Abstand. So bleibt die zentrierte
-     Spalte garantiert frei und die Zonen clippen alles, was hineinragen würde. */
   .ambience {
     position: absolute;
     inset: 0;
+    overflow: hidden;
     pointer-events: none;
     z-index: 1;
-    --reserve: 80px;
-  }
-  .zone {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    overflow: hidden;
-  }
-  .zone.left {
-    left: 0;
-    right: calc(50% + var(--reserve));
-  }
-  .zone.right {
-    left: calc(50% + var(--reserve));
-    right: 0;
   }
   .deco {
     position: absolute;
-    opacity: 0.9;
+  }
+  .anim {
+    display: inline-block;
   }
 
-  .bob { animation: bob var(--dur, 4s) ease-in-out infinite alternate; }
-  @keyframes bob {
-    from { transform: translateY(8px) rotate(-3deg); }
-    to   { transform: translateY(-16px) rotate(3deg); }
+  .float { animation: float var(--dur, 3.6s) ease-in-out infinite alternate; }
+  @keyframes float {
+    0%   { transform: translateY(18px) rotate(-5deg); }
+    100% { transform: translateY(-30px) rotate(5deg); }
   }
 
-  .drift { animation: drift var(--dur, 9s) ease-in-out infinite alternate; }
+  .drift { animation: drift var(--dur, 8s) ease-in-out infinite alternate; }
   @keyframes drift {
-    from { transform: translateX(-22px); }
-    to   { transform: translateX(22px); }
+    from { transform: translateX(-55px); }
+    to   { transform: translateX(55px); }
   }
 
-  .twinkle { animation: twinkle var(--dur, 2.4s) ease-in-out infinite; }
+  .twinkle { animation: twinkle var(--dur, 2.2s) ease-in-out infinite; }
   @keyframes twinkle {
-    0%, 100% { opacity: 0.3; transform: scale(0.75); }
-    50%      { opacity: 1;   transform: scale(1.15); }
+    0%, 100% { opacity: 0.25; transform: scale(0.5); }
+    50%      { opacity: 1;    transform: scale(1.35); }
   }
 
-  .glow { animation: glow var(--dur, 5s) ease-in-out infinite alternate; }
-  @keyframes glow {
-    from { filter: drop-shadow(0 0 4px rgba(255, 233, 163, 0.4)); transform: translateY(0); }
-    to   { filter: drop-shadow(0 0 16px rgba(255, 233, 163, 0.9)); transform: translateY(-8px); }
-  }
-
-  .sway { animation: sway var(--dur, 3s) ease-in-out infinite alternate; transform-origin: bottom center; }
+  .sway { animation: sway var(--dur, 2.5s) ease-in-out infinite alternate; transform-origin: bottom center; }
   @keyframes sway {
-    from { transform: rotate(-7deg); }
-    to   { transform: rotate(7deg); }
+    from { transform: rotate(-12deg); }
+    to   { transform: rotate(12deg); }
+  }
+
+  .moon {
+    position: absolute;
+    filter: drop-shadow(0 0 18px rgba(255, 233, 163, 0.85));
+    animation: moonpath 12s linear infinite;
+  }
+  @keyframes moonpath {
+    0%   { left: -16%; top: 36%; }
+    50%  { top: 14%; }
+    100% { left: 112%; top: 36%; }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .deco { animation: none; }
+    .anim, .moon { animation: none; }
   }
 </style>