Refactor birthday, olympia, space, and sports animations; enhance symbol management and visual effects

- Updated birthday.js to improve balloon visuals and confetti effects, including new color schemes and enhanced pop animations.
- Removed legacy fallback logic in olympia.js and improved image error handling.
- Enhanced space.js with configurable counts for planets, astronauts, satellites, ISS, and rockets; improved shooting star animations and added random image swapping.
- Simplified sports.js by removing legacy emoji fallback logic and optimizing ball creation based on selected categories.
- Adjusted CSS styles across birthday, olympia, space, and sports for better visual consistency and performance.
[skip ci]

Jellyfin.Plugin.Seasonals/Configuration/PluginConfiguration.cs

@@ -389,6 +389,7 @@ public class SportsOptions
     public bool EnableDifferentDuration { get; set; } = true;
     public string TurfColor { get; set; } = "#228b22";
     public string SportsBalls { get; set; } = "football,basketball,tennis,volleyball";
+    public bool EnableTrophy { get; set; } = false;
 }
 
 public class OlympiaOptions
@@ -402,7 +403,11 @@ public class OlympiaOptions
 
 public class SpaceOptions
 {
-    public int SymbolCount { get; set; } = 25;
+    public int PlanetCount { get; set; } = 12;
+    public int AstronautCount { get; set; } = 5;
+    public int SatelliteCount { get; set; } = 2;
+    public int IssCount { get; set; } = 1;
+    public int RocketCount { get; set; } = 1;
     public bool EnableSpace { get; set; } = true;
     public bool EnableRandomSymbols { get; set; } = true;
     public bool EnableRandomSymbolsMobile { get; set; } = false;
@@ -429,7 +434,8 @@ public class UnderwaterOptions
 
 public class BirthdayOptions
 {
-    public int SymbolCount { get; set; } = 25;
+    public int SymbolCount { get; set; } = 5;
+    public int ConfettiCount { get; set; } = 60;
     public bool EnableBirthday { get; set; } = true;
     public bool EnableRandomSymbols { get; set; } = true;
     public bool EnableRandomSymbolsMobile { get; set; } = false;

Jellyfin.Plugin.Seasonals/Configuration/configPage.html

@@ -70,16 +70,13 @@
                                 <option value="carnival">Carnival (Confetti)</option>
                                 <option value="cherryblossom">Cherry Blossom</option>
                                 <option value="resurrection">Resurrection by Bioflash257</option>
-                                <option value="championships" disabled>European/World Championships (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
-                                <option value="patrick" disabled>St. Patrick's Day (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
-                                <option value="thanksgiving" disabled>Thanksgiving (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
                                 <option value="earthday">Earth Day (Growing Vines)</option>
                                 <option value="eurovision">Eurovision (Dancing Notes)</option>
                                 <option value="oscar">Oscar Awards (Glamour & Flashes)</option>
                                 <option value="matrix">Matrix</option>
                                 <option value="pride">Pride (Rainbow Border)</option>
                                 <option value="rain">Rain (Pure Rain)</option>
-                                <option value="storm">Storm (Heavy Rain & Lightning (⚠️Epilepsy Warning))</option>
+                                <option value="storm">Storm (Heavy Rain & Lightning (⚠️Epilepsy Warning⚠️))</option>
                                 <option value="frost">Frost / Ice</option>
                                 <option value="filmnoir">Film-Noir (Classic B&W Cinema)</option>
                                 <option value="marioday">Mario Day (March 10)</option>
@@ -88,6 +85,8 @@
                                 <option value="friday13">Friday the 13th</option>
                                 <option value="eidalfitr">Eid al-Fitr (Sugar Feast)</option>
                                 <option value="spooky">Spooky</option>
+                                <option value="patrick" disabled>St. Patrick's Day (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
+                                <option value="thanksgiving" disabled>Thanksgiving (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
                             </select>
                             <div class="fieldDescription">The season to display if automation is disabled or no "Auto Selection" rule matches the current date.</div>
                         </div>
@@ -935,6 +934,13 @@
                                     <span>Enable Different Duration</span>
                                 </label>
                             </div>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableTrophy" name="EnableTrophy" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Trophy</span>
+                                </label>
+                                <div class="fieldDescription">Enable the flying trophy animation.</div>
+                            </div>
                             <div class="inputContainer">
                                 <label class="inputLabel" for="TurfColor">Turf Color</label>
                                 <input is="emby-input" type="color" id="TurfColor" name="TurfColor" value="#228b22" />
@@ -1054,9 +1060,29 @@
                                 </label>
                             </div>
                             <div class="inputContainer">
-                                <label class="inputLabel" for="SpaceSymbolCount">Symbol Count</label>
-                                <input is="emby-input" type="number" id="SpaceSymbolCount" name="SpaceSymbolCount" />
-                                <div class="fieldDescription">Number of additional symbols displayed (if enabled).</div>
+                                <label class="inputLabel" for="PlanetCount">Planet Count</label>
+                                <input is="emby-input" type="number" id="PlanetCount" name="PlanetCount" />
+                                <div class="fieldDescription">Number of planets displayed (if enabled).</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="AstronautCount">Astronaut Count</label>
+                                <input is="emby-input" type="number" id="AstronautCount" name="AstronautCount" />
+                                <div class="fieldDescription">Number of astronauts displayed (if enabled).</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="SatelliteCount">Satellite Count</label>
+                                <input is="emby-input" type="number" id="SatelliteCount" name="SatelliteCount" />
+                                <div class="fieldDescription">Number of satellites displayed (if enabled).</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="IssCount">ISS Count</label>
+                                <input is="emby-input" type="number" id="IssCount" name="IssCount" />
+                                <div class="fieldDescription">Number of ISS symbols displayed (if enabled).</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="RocketCount">Rocket Count</label>
+                                <input is="emby-input" type="number" id="RocketCount" name="RocketCount" />
+                                <div class="fieldDescription">Number of rockets displayed (if enabled).</div>
                             </div>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
@@ -1171,6 +1197,11 @@
                                 <input is="emby-input" type="number" id="BirthdaySymbolCount" name="BirthdaySymbolCount" />
                                 <div class="fieldDescription">Number of additional symbols displayed (if enabled).</div>
                             </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="BirthdayConfettiCount">Confetti Count</label>
+                                <input is="emby-input" type="number" id="BirthdayConfettiCount" name="BirthdayConfettiCount" />
+                                <div class="fieldDescription">Number of confetti pieces created when a balloon bursts.</div>
+                            </div>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
                                     <input id="EnableDifferentDurationBirthday" name="EnableDifferentDurationBirthday" type="checkbox" is="emby-checkbox" />
@@ -1810,7 +1841,11 @@
                         document.querySelector('#EnableRandomSymbolsSpace').checked = config.Space.EnableRandomSymbols || false;
                         document.querySelector('#EnableRandomSymbolsMobileSpace').checked = config.Space.EnableRandomSymbolsMobile || false;
                         document.querySelector('#EnableDifferentDurationSpace').checked = config.Space.EnableDifferentDuration || false;
-                        document.querySelector('#SpaceSymbolCount').value = config.Space.SymbolCount || 25;
+                        document.querySelector('#PlanetCount').value = config.Space.PlanetCount !== undefined ? config.Space.PlanetCount : 12;
+                        document.querySelector('#AstronautCount').value = config.Space.AstronautCount !== undefined ? config.Space.AstronautCount : 5;
+                        document.querySelector('#SatelliteCount').value = config.Space.SatelliteCount !== undefined ? config.Space.SatelliteCount : 2;
+                        document.querySelector('#IssCount').value = config.Space.IssCount !== undefined ? config.Space.IssCount : 1;
+                        document.querySelector('#RocketCount').value = config.Space.RocketCount !== undefined ? config.Space.RocketCount : 1;
 
                         // Underwater
                         document.querySelector('#EnableUnderwater').checked = config.Underwater.EnableUnderwater || false;
@@ -1833,6 +1868,7 @@
                         document.querySelector('#EnableRandomSymbolsMobileBirthday').checked = config.Birthday.EnableRandomSymbolsMobile || false;
                         document.querySelector('#EnableDifferentDurationBirthday').checked = config.Birthday.EnableDifferentDuration || false;
                         document.querySelector('#BirthdaySymbolCount').value = config.Birthday.SymbolCount || 25;
+                        document.querySelector('#BirthdayConfettiCount').value = config.Birthday.ConfettiCount || 60;
 
                         // Sports
                         if (!config.Sports) config.Sports = { EnableSports: true, SymbolCount: 25, EnableRandomSymbols: true, EnableRandomSymbolsMobile: false, EnableDifferentDuration: true };
@@ -1842,6 +1878,7 @@
                         document.querySelector('#EnableDifferentDurationSports').checked = config.Sports.EnableDifferentDuration !== false;
                         document.querySelector('#SportsSymbolCount').value = config.Sports.SymbolCount || 25;
                         document.querySelector('#TurfColor').value = config.Sports.TurfColor || '#228b22';
+                        document.querySelector('#EnableTrophy').checked = config.Sports.EnableTrophy !== false;
                         
                         // Load Checkboxes
                         const savedBallsString = config.Sports.SportsBalls || 'football,basketball,tennis,volleyball';
@@ -2012,6 +2049,7 @@
                         document.querySelector('#EnableBirthday').checked = config.Birthday.EnableBirthday !== false;
                         document.querySelector('#EnableGarland').checked = config.Birthday.EnableGarland !== false;
                         document.querySelector('#BirthdaySymbolCount').value = config.Birthday.SymbolCount || 25;
+                        document.querySelector('#BirthdayConfettiCount').value = config.Birthday.ConfettiCount || 60;
                         document.querySelector('#EnableRandomSymbolsBirthday').checked = config.Birthday.EnableRandomSymbols !== false;
                         document.querySelector('#EnableRandomSymbolsMobileBirthday').checked = config.Birthday.EnableRandomSymbolsMobile === true;
                         document.querySelector('#EnableDifferentDurationBirthday').checked = config.Birthday.EnableDifferentDuration !== false;
@@ -2069,6 +2107,7 @@
                         config.Sports.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSports').checked;
                         config.Sports.SymbolCount = parseInt(document.querySelector('#SportsSymbolCount').value);
                         config.Sports.TurfColor = document.querySelector('#TurfColor').value;
+                        config.Sports.EnableTrophy = document.querySelector('#EnableTrophy').checked;
                         
                         // Save Checkboxes
                         const selectedBalls = Array.from(document.querySelectorAll('.sport-ball-cb'))
@@ -2091,7 +2130,11 @@
                         config.Space.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsSpace').checked;
                         config.Space.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileSpace').checked;
                         config.Space.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSpace').checked;
-                        config.Space.SymbolCount = parseInt(document.querySelector('#SpaceSymbolCount').value);
+                        config.Space.PlanetCount = parseInt(document.querySelector('#PlanetCount').value);
+                        config.Space.AstronautCount = parseInt(document.querySelector('#AstronautCount').value);
+                        config.Space.SatelliteCount = parseInt(document.querySelector('#SatelliteCount').value);
+                        config.Space.IssCount = parseInt(document.querySelector('#IssCount').value);
+                        config.Space.RocketCount = parseInt(document.querySelector('#RocketCount').value);
 
                         // Underwater
                         if (!config.Underwater) config.Underwater = {};
@@ -2117,6 +2160,7 @@
                         config.Birthday.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileBirthday').checked;
                         config.Birthday.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationBirthday').checked;
                         config.Birthday.SymbolCount = parseInt(document.querySelector('#BirthdaySymbolCount').value);
+                        config.Birthday.ConfettiCount = parseInt(document.querySelector('#BirthdayConfettiCount').value);
 
                         // Snowflakes
                         config.Snowflakes.SnowflakeCount = parseInt(document.querySelector('#SnowflakesCount').value);
@@ -2383,6 +2427,7 @@
                         config.Birthday.EnableBirthday = document.querySelector('#EnableBirthday').checked;
                         config.Birthday.EnableGarland = document.querySelector('#EnableGarland').checked;
                         config.Birthday.SymbolCount = parseInt(document.querySelector('#BirthdaySymbolCount').value);
+                        config.Birthday.ConfettiCount = parseInt(document.querySelector('#BirthdayConfettiCount').value);
                         config.Birthday.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsBirthday').checked;
                         config.Birthday.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileBirthday').checked;
                         config.Birthday.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationBirthday').checked;

Jellyfin.Plugin.Seasonals/Web/birthday.css

@@ -10,49 +10,22 @@
     contain: strict;
 }
 
-.birthday-garland {
-    position: absolute;
-    top: -1vh;
-    left: 0;
-    width: 100vw;
-    z-index: 55;
-    pointer-events: none;
-    /* optional: a little drop shadow for depth */
-    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.5));
-}
-
-.birthday-garland img {
-    width: 100%;
-    height: auto;
-    object-fit: cover;
-}
-
-.birthday-cake {
-    position: absolute;
-    bottom: 2vh;
-    left: 50vw;
-    transform: translateX(-50%);
-    font-size: 8rem;
-    z-index: 50;
-    filter: drop-shadow(0 0 10px rgba(255,255,255,0.4));
-    pointer-events: auto;
-}
-
-.birthday-cake img {
-    height: 15vh;
-    width: auto;
-    object-fit: contain;
-    max-height: 150px;
-}
-
 .birthday-symbol {
-    position: absolute;
-    bottom: -10vh; /* balloons rise from bottom */
-    animation: birthday-rise linear infinite;
-    font-size: 3rem;
+    position: fixed;
+    top: 0;
+    left: 0;
+    animation: birthday-rise linear infinite forwards;
     opacity: 0.95;
     z-index: 40;
-    pointer-events: none; /* Container itself should not block clicks */
+    pointer-events: none; 
+}
+
+.birthday-sway {
+    will-change: transform;
+    animation-name: birthday-sway;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
 }
 
 .birthday-inner {
@@ -61,62 +34,73 @@
     display: inline-block;
 }
 
+/* MARK: Balloon Size */
 .birthday-symbol img {
-    width: 6vh;
+    width: 18vh;
     height: auto;
-    max-width: 60px;
+    max-width: 100px;
     object-fit: contain;
 }
 
+.birthday-confetti-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 30;
+    will-change: transform;
+    animation-name: birthday-confetti-fall;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    pointer-events: none;
+}
+
 .birthday-confetti {
-    position: absolute;
-    top: -5vh;
+    width: 8px;
+    height: 16px;
+    background-color: rgb(0, 0, 0);
+    will-change: transform;
+    animation-name: birthday-flutter;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
+.birthday-confetti.circle {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.birthday-confetti.square {
+    width: 8px;
+    height: 8px;
+}
+
+.birthday-confetti.triangle {
     width: 10px;
     height: 10px;
-    opacity: 0.9;
-    animation: birthday-confetti-fall linear infinite;
-    z-index: 30;
-    /* Mix of circles and squares by using CSS variables or random in JS. For simplicity, we make all slightly rounded rectangles */
-    border-radius: 2px;
+    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 }
 
 @keyframes birthday-rise {
-    0% { 
-        transform: translateY(10vh) rotate(var(--start-rot, 0deg)); 
-        opacity: 0; 
-    }
-    10% { 
-        opacity: 1; 
-    }
-    90% {
-        opacity: 1;
-    }
-    100% { 
-        transform: translateY(-110vh) rotate(calc(var(--start-rot, 0deg) * -1)); 
-        opacity: 0; 
-    }
+    0% { transform: translate3d(var(--x-pos, 0vw), 110vh, 0) rotate(var(--start-rot, 0deg)); opacity: 0; }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { transform: translate3d(var(--x-pos, 0vw), -20vh, 0) rotate(calc(var(--start-rot, 0deg) * -1)); opacity: 0; }
 }
 
 @keyframes birthday-confetti-fall {
-    0% {
-        transform: translateY(-5vh) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-        opacity: 0;
-    }
-    5% {
-        opacity: 1;
-    }
-    90% {
-        opacity: 1;
-    }
-    100% {
-        transform: translateY(105vh) rotateX(720deg) rotateY(360deg) rotateZ(180deg);
-        opacity: 0;
-    }
+    0% { transform: translate3d(var(--x-pos, 0vw), -10vh, 0); }
+    100% { transform: translate3d(var(--x-pos, 0vw), 110vh, 0); }
 }
 
 @keyframes birthday-sway {
-    0% { transform: rotate(-8deg) translateX(-5%); }
-    100% { transform: rotate(8deg) translateX(5%); }
+    0% { transform: translateX(calc(var(--sway-amount, 50px) * -1)); }
+    100% { transform: translateX(var(--sway-amount, 50px)); }
+}
+
+@keyframes birthday-flutter {
+    0% { transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), 0deg); }
+    100% { transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), var(--rot-dir, 360deg)); }
 }
 
 @keyframes birthday-pop {
@@ -125,12 +109,17 @@
     100% { transform: scale(0); opacity: 0; filter: brightness(2); }
 }
 
-.birthday-burst-confetti {
+.birthday-burst-wrapper {
     position: absolute;
     pointer-events: none;
     z-index: 1000;
     will-change: transform, opacity;
-    animation: birthday-burst-fall 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+    animation: birthday-burst-y 1.2s cubic-bezier(0.42, 0, 1, 1) forwards;
+}
+
+.birthday-burst-confetti {
+    will-change: transform;
+    animation: birthday-burst-x 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
 }
 
 .birthday-burst-confetti.circle {
@@ -138,25 +127,27 @@
 }
 
 .birthday-burst-confetti.triangle {
-    width: 0;
-    height: 0;
-    background-color: transparent !important;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-bottom: 10px solid var(--shape-color, #ff0000);
+    width: 10px;
+    height: 10px;
+    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 }
 
-@keyframes birthday-burst-fall {
+@keyframes birthday-burst-y {
     0% {
-        transform: translate(0, 0) rotate3d(var(--rx), var(--ry), var(--rz), 0deg);
-        opacity: 1;
-    }
-    30% {
-        transform: translate(var(--burst-x), var(--burst-y)) rotate3d(var(--rx), var(--ry), var(--rz), calc(var(--rot-dir) * 0.3));
+        transform: translateY(0);
         opacity: 1;
     }
     100% {
-        transform: translate(var(--burst-x), calc(var(--burst-y) + 150px)) rotate3d(var(--rx), var(--ry), var(--rz), var(--rot-dir));
+        transform: translateY(calc(var(--burst-y) + 150px)); /* Gravity pull downwards */
         opacity: 0;
     }
 }
+
+@keyframes birthday-burst-x {
+    0% {
+        transform: translateX(0) rotate3d(var(--rx), var(--ry), var(--rz), 0deg);
+    }
+    100% {
+        transform: translateX(calc(var(--burst-x) * 1.5)) rotate3d(var(--rx), var(--ry), var(--rz), var(--rot-dir));
+    }
+}

Jellyfin.Plugin.Seasonals/Web/birthday.js

@@ -1,18 +1,37 @@
 const config = window.SeasonalsPluginConfig?.Birthday || {};
 
 const birthday = config.EnableBirthday !== undefined ? config.EnableBirthday : true;
-const symbolCount = config.SymbolCount || 25;
+const symbolCount = config.SymbolCount || 5;
 const useRandomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true;
 const enableRandomMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false;
 const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
-const enableGarland = config.EnableGarland !== undefined ? config.EnableGarland : true;
+
 
 const birthdayImages = [
-    '../Seasonals/Resources/birthday_images/balloon_1.gif',
-    '../Seasonals/Resources/birthday_images/balloon_2.gif',
-    '../Seasonals/Resources/birthday_images/balloon_3.gif'
+    '../Seasonals/Resources/birthday_assets/balloon_blue.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_green.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_lightblue.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_orange.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_pink.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_red.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_yellow.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_turquoise.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_violet.gif'
 ];
 
+
+const balloonColors = {
+    'balloon_blue': ['#3498db', '#2980b9', '#1f618d'],
+    'balloon_green': ['#2ecc71', '#27ae60', '#1e8449'],
+    'balloon_lightblue': ['#36c5f0', '#81ecec', '#00cec9'],
+    'balloon_orange': ['#e67e22', '#d35400', '#a04000'],
+    'balloon_pink': ['#ff726d', '#f4306d', '#e84393'],
+    'balloon_red': ['#e74c3c', '#c0392b', '#922b21'],
+    'balloon_yellow': ['#f1c40f', '#f39c12', '#b7950b'],
+    'balloon_turquoise': ['#36c5f0', '#81ecec', '#00cec9'],
+    'balloon_violet': ['#9b59b6', '#8e44ad', '#6c3483']
+};
+
 let msgPrinted = false;
 
 function toggleBirthday() {
@@ -46,8 +65,8 @@ observer.observe(document.body, {
   attributes: true
 });
 
-function createBalloonPopConfetti(container, x, y) {
-    const popConfettiColors = [
+function createBalloonPopConfetti(container, x, y, colors) {
+    const popConfettiColors = colors || [
         '#fce18a', '#ff726d', '#b48def', '#f4306d', 
         '#36c5f0', '#2ccc5d', '#e9b31d', '#9b59b6', 
         '#3498db', '#e74c3c', '#1abc9c', '#f1c40f'
@@ -57,6 +76,13 @@ function createBalloonPopConfetti(container, x, y) {
     const particleCount = Math.floor(Math.random() * 5) + 15;
     
     for (let i = 0; i < particleCount; i++) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'birthday-burst-wrapper';
+        wrapper.style.position = 'absolute';
+        wrapper.style.left = `${x}px`;
+        wrapper.style.top = `${y}px`;
+        wrapper.style.zIndex = '1000';
+
         const particle = document.createElement('div');
         particle.classList.add('birthday-burst-confetti');
         
@@ -81,11 +107,6 @@ function createBalloonPopConfetti(container, x, y) {
             particle.classList.add('triangle');
         }
 
-        particle.style.position = 'absolute';
-        particle.style.left = `${x}px`;
-        particle.style.top = `${y}px`;
-        particle.style.zIndex = '1000';
-        
         // Random direction for explosion (circular)
         const angle = Math.random() * 2 * Math.PI; 
         const distance = Math.random() * 60 + 20; // 20-80px burst radius
@@ -94,7 +115,7 @@ function createBalloonPopConfetti(container, x, y) {
         const yOffset = Math.sin(angle) * distance;
         
         particle.style.setProperty('--burst-x', `${xOffset}px`);
-        particle.style.setProperty('--burst-y', `${yOffset}px`);
+        wrapper.style.setProperty('--burst-y', `${yOffset}px`);
         
         // Random rotation during fall
         particle.style.setProperty('--rot-dir', `${(Math.random() > 0.5 ? 1 : -1) * 360}deg`);
@@ -102,10 +123,11 @@ function createBalloonPopConfetti(container, x, y) {
         particle.style.setProperty('--ry', Math.random().toFixed(2));
         particle.style.setProperty('--rz', (Math.random() * 0.5).toFixed(2));
         
-        container.appendChild(particle);
+        wrapper.appendChild(particle);
+        container.appendChild(wrapper);
         
         // Remove particle after animation
-        setTimeout(() => particle.remove(), 1500);
+        setTimeout(() => wrapper.remove(), 1000);
     }
 }
 
@@ -118,28 +140,7 @@ function createBirthday() {
         document.body.appendChild(container);
     }
 
-    // Party Garland
-    if (enableGarland) {
-        const garland = document.createElement('div');
-        garland.className = 'birthday-garland';
-        const garlandImg = document.createElement('img');
-        garlandImg.src = '../Seasonals/Resources/birthday_images/garland.png';
-        garlandImg.onerror = function() { this.style.display = 'none'; };
-        garland.appendChild(garlandImg);
-        container.appendChild(garland);
-    }
-
-    // Spawn Birthday Cake at the bottom
-    const cake = document.createElement('div');
-    cake.className = 'birthday-cake';
-    let cakeImg = document.createElement('img');
-    cakeImg.src = `../Seasonals/Resources/birthday_images/cake.gif`;
-    cakeImg.onerror = function() {
-        this.style.display = 'none';
-        this.parentElement.innerHTML = '🎂';
-    };
-    cake.appendChild(cakeImg);
-    container.appendChild(cake);
+    // Cake and Garland have been removed
 
     const standardCount = 15;
     const totalSymbols = symbolCount + standardCount;
@@ -153,13 +154,13 @@ function createBirthday() {
 
     const useRandomDuration = enableDifferentDuration !== false;
 
-    // We'll treat all balloons as rising symbols
-    const activeItems = ['balloon_1', 'balloon_2', 'balloon_3'];
+    // Arrays moved to top of file
 
     for (let i = 0; i < finalCount; i++) {
         let symbol = document.createElement('div');
         
-        const randomItem = activeItems[Math.floor(Math.random() * activeItems.length)];
+        const randomImage = birthdayImages[Math.floor(Math.random() * birthdayImages.length)];
+        const randomItem = randomImage.split('/').pop().split('.')[0]; // Extracts "balloon_blue"
         symbol.className = `birthday-symbol birthday-${randomItem}`;
 
         // Create inner div for sway
@@ -167,20 +168,31 @@ function createBirthday() {
         innerDiv.className = 'birthday-inner';
 
         let img = document.createElement('img');
-        img.src = `../Seasonals/Resources/birthday_images/${randomItem}.gif`; // Use standard pop GIFs
+        img.src = randomImage;
         img.onerror = function() {
-            this.style.display = 'none';
-            this.parentElement.innerHTML = getBirthdayEmojiFallback(randomItem);
+            symbol.remove(); // Remove element completely on error
         };
         innerDiv.appendChild(img);
-        symbol.appendChild(innerDiv);
+        
+        // Sway wrapper
+        let swayWrapper = document.createElement('div');
+        swayWrapper.className = 'birthday-sway';
+        const swayDuration = Math.random() * 3 + 3; // 3-6s per cycle
+        swayWrapper.style.animationDuration = `${swayDuration}s`;
+        swayWrapper.style.animationDelay = `-${Math.random() * 5}s`;
+        const swayAmount = Math.random() * 60 + 20; // 20-80px
+        const direction = Math.random() > 0.5 ? 1 : -1;
+        swayWrapper.style.setProperty('--sway-amount', `${swayAmount * direction}px`);
+        
+        swayWrapper.appendChild(innerDiv);
+        symbol.appendChild(swayWrapper);
 
         const leftPos = Math.random() * 95;
-        const delaySeconds = Math.random() * 10;
         
         // Far away effect
         const depth = Math.random();
-        const scale = 0.5 + depth * 0.7; // 0.5 to 1.2
+        // MARK: balloon size
+        const scale = 0.85 + depth * 0.3; // 0.85 to 1.15
         const zIndex = Math.floor(depth * 30) + 10;
         
         img.style.transform = `scale(${scale})`;
@@ -191,14 +203,15 @@ function createBirthday() {
             // Far strings climb slower
             durationSeconds = (1 - depth) * 6 + 7 + Math.random() * 4; 
         }
+        
+        // Negative delay correctly scatters them initially across the screen vertically
+        // avoiding them all popping up at bottom edge together
+        const delaySeconds = -(Math.random() * durationSeconds);
 
         const isBalloon = randomItem.startsWith('balloon');
 
         if (isBalloon) {
-            // Sway animation
-            const swayDur = Math.random() * 2 + 3; // 3 to 5s
-            const swayDir = Math.random() > 0.5 ? 'normal' : 'reverse';
-            innerDiv.style.animation = `birthday-sway ${swayDur}s ease-in-out infinite alternate ${swayDir}`;
+            // Sway animation is now handled natively by the GIF motion.
             
             // Interaction to pop is handled visually by the GIF, but we can still remove it on hover
             innerDiv.addEventListener('mouseenter', function(e) {
@@ -210,17 +223,18 @@ function createBirthday() {
                     // Create confetti burst at balloon's screen position
                     const rect = this.getBoundingClientRect();
                     const cx = rect.left + rect.width / 2;
-                    const cy = rect.top + rect.height / 2;
+                    // explosion height
+                    const cy = rect.top + rect.height * -0.05;
                     // Ensure the burst container is appended to the main document body or the birthday container
-                    createBalloonPopConfetti(document.body, cx, cy);
+                    createBalloonPopConfetti(document.body, cx, cy, balloonColors[randomItem]);
                 }
             }, { once: true });
         }
 
         const startRot = (Math.random() * 20) - 10; // -10 to +10 spread
         symbol.style.setProperty('--start-rot', `${startRot}deg`);
+        symbol.style.setProperty('--x-pos', `${leftPos}vw`);
 
-        symbol.style.left = `${leftPos}vw`;
         symbol.style.animationDuration = `${durationSeconds}s`;
         symbol.style.animationDelay = `${delaySeconds}s`;
 
@@ -228,33 +242,73 @@ function createBirthday() {
     }
 
     // Party Confetti
-    const confettiColors = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];
-    const confettiCount = isMobile ? 40 : 80;
+    const baseConfettiCount = config.ConfettiCount !== undefined ? config.ConfettiCount : 60;
+    const confettiCount = isMobile ? Math.floor(baseConfettiCount / 2) : baseConfettiCount;
+    const allColors = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];
     
     for (let i = 0; i < confettiCount; i++) {
-        let confetti = document.createElement('div');
-        confetti.className = 'birthday-confetti';
+        const wrapper = document.createElement('div');
+        wrapper.classList.add('birthday-confetti-wrapper');
         
-        const color = confettiColors[Math.floor(Math.random() * confettiColors.length)];
+        // Use carnival.js 3D advanced fluttering logic
+        let swayWrapper = document.createElement('div');
+        swayWrapper.classList.add('birthday-sway');
+        wrapper.appendChild(swayWrapper);
+
+        const confetti = document.createElement('div');
+        confetti.classList.add('birthday-confetti');
+
+        const color = allColors[Math.floor(Math.random() * allColors.length)];
         confetti.style.backgroundColor = color;
+
+        // Shape assignments
+        const shape = Math.random();
+        if (shape > 0.8) confetti.classList.add('circle');
+        else if (shape > 0.6) confetti.classList.add('square');
+        else if (shape > 0.4) confetti.classList.add('triangle');
+        else confetti.classList.add('rect'); // default
+
+        // Sizing
+        if (!confetti.classList.contains('circle') && !confetti.classList.contains('square') && !confetti.classList.contains('triangle')) {
+            const width = Math.random() * 3 + 4; // 4-7px
+            const height = Math.random() * 5 + 8; // 8-13px
+            confetti.style.width = `${width}px`;
+            confetti.style.height = `${height}px`;
+        } else if (confetti.classList.contains('circle') || confetti.classList.contains('square')) {
+            const size = Math.random() * 5 + 5; // 5-10px
+            confetti.style.width = `${size}px`;
+            confetti.style.height = `${size}px`;
+        }
+
+        const duration = Math.random() * 5 + 5; 
+        const delay = -Math.random() * duration; // Spawn fully integrated across screen width/height
         
-        const leftPos = Math.random() * 100;
-        const delaySeconds = Math.random() * 8;
-        const duration = Math.random() * 3 + 4;
+        wrapper.style.setProperty('--x-pos', `${Math.random() * 100}vw`);
+        wrapper.style.animationDelay = `${delay}s`;
+        wrapper.style.animationDuration = `${duration}s`;
+        
+        // Sway handling
+        const swayDuration = Math.random() * 2 + 3; // 3-5s per cycle
+        swayWrapper.style.animationDuration = `${swayDuration}s`;
+        swayWrapper.style.animationDelay = `-${Math.random() * 5}s`;
+        const swayAmount = Math.random() * 70 + 30; // 30-100px
+        const direction = Math.random() > 0.5 ? 1 : -1;
+        swayWrapper.style.setProperty('--sway-amount', `${swayAmount * direction}px`);
+        
+        // 3D Flutter Rotation
+        confetti.style.animationDuration = `${Math.random() * 2 + 1}s`;
+        confetti.style.setProperty('--rx', Math.random().toFixed(2));
+        confetti.style.setProperty('--ry', Math.random().toFixed(2));
+        confetti.style.setProperty('--rz', (Math.random() * 0.5).toFixed(2));
+        const rotDir = Math.random() > 0.5 ? 1 : -1;
+        confetti.style.setProperty('--rot-dir', `${rotDir * 360}deg`);
 
-        confetti.style.left = `${leftPos}vw`;
-        confetti.style.animationDuration = `${duration}s`;
-        confetti.style.animationDelay = `${delaySeconds}s`;
-
-        container.appendChild(confetti);
+        swayWrapper.appendChild(confetti);
+        container.appendChild(wrapper);
     }
 }
 
-function getBirthdayEmojiFallback(type) {
-    if (type.startsWith('balloon')) return '🎈';
-    if (type === 'gift') return '🎁';
-    return '';
-}
+/* Removed fallback logic */
 
 function initializeBirthday() {
   if (!birthday) return;

Jellyfin.Plugin.Seasonals/Web/olympia.css

@@ -13,7 +13,6 @@
 .olympia-symbol {
     position: absolute;
     top: -10vh;
-    font-size: 3rem;
     opacity: 0.95;
     text-shadow: 0 0 10px rgba(255,255,255,0.2);
     z-index: 40;
@@ -48,7 +47,6 @@
 .olympia-symbol {
     position: absolute;
     top: -10vh;
-    font-size: 4rem;
     opacity: 0.95;
     text-shadow: 0 0 10px rgba(255,255,255,0.2);
     z-index: 40;

Jellyfin.Plugin.Seasonals/Web/olympia.js

@@ -107,8 +107,7 @@ function createOlympia() {
             }
             img.src = `../Seasonals/Resources/olympic_assets/${imgName}`;
             img.onerror = function() {
-                this.style.display = 'none';
-                this.parentElement.innerHTML = getOlympiaEmojiFallback(randomItem);
+                symbol.remove();
             };
             innerDiv.appendChild(img);
             
@@ -244,13 +243,6 @@ function createOlympia() {
     }
 }
 
-function getOlympiaEmojiFallback(type) {
-    if (type === 'gold') return '🥇';
-    if (type === 'silver') return '🥈';
-    if (type === 'bronze') return '🥉';
-    return ''; // Rings will be handled by CSS or actual image
-}
-
 function initializeOlympia() {
   if (!olympia) return;
   createOlympia();

Jellyfin.Plugin.Seasonals/Web/space.css

@@ -36,18 +36,19 @@
     position: absolute;
     width: 250px;
     height: 3px;
-    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
     border-radius: 50%;
-    animation: space-shoot 8s linear infinite;
+    animation: space-shoot 25s linear infinite;
     opacity: 0;
     z-index: 12;
 }
 
 @keyframes space-shoot {
-    0% { left: var(--shoot-start-x); top: var(--shoot-start-y); opacity: 1; width: 0; }
-    5% { width: 300px; }
-    15% { left: var(--shoot-end-x); top: var(--shoot-end-y); opacity: 0; width: 0; }
-    100% { left: var(--shoot-end-x); top: var(--shoot-end-y); opacity: 0; width: 0; }
+    0% { transform: rotate(var(--shoot-angle)) translateX(0); opacity: 0; }
+    5% { opacity: 1; }
+    35% { opacity: 1; }
+    40% { transform: rotate(var(--shoot-angle)) translateX(var(--shoot-distance)); opacity: 0; }
+    100% { transform: rotate(var(--shoot-angle)) translateX(var(--shoot-distance)); opacity: 0; }
 }
 
 .space-symbol {
@@ -69,24 +70,30 @@
 }
 
 /* Specific elements scaling */
-.space-planet1, .space-planet2 { font-size: 4rem; }
-.space-planet1 img, .space-planet2 img { width: 8vh; max-width: 80px; }
-.space-star { font-size: 2rem; opacity: 0.6; }
-.space-star img { width: 3vh; max-width: 30px; }
+.space-planet img { width: 8vh; max-width: 80px; }
+.space-astronaut img { width: 10vh; max-width: 100px; }
+.space-satellite img { width: 12vh; max-width: 120px; }
+.space-iss img { width: 25vh; max-width: 180px; }
+.space-rocket img { width: 12vh; max-width: 120px; }
 
 @keyframes space-drift-right {
     0% { transform: translateX(-10vw) translateY(0) scaleX(-1); }
-    50% { transform: translateX(50vw) translateY(-5vh) scaleX(-1); }
-    100% { transform: translateX(110vw) translateY(0) scaleX(-1); }
+    50% { transform: translateX(60vw) translateY(-30vh) scaleX(-1); }
+    100% { transform: translateX(140vw) translateY(0) scaleX(-1); }
 }
 
 @keyframes space-drift-left {
     0% { transform: translateX(10vw) translateY(0); }
-    50% { transform: translateX(-50vw) translateY(5vh); }
-    100% { transform: translateX(-110vw) translateY(0); }
+    50% { transform: translateX(-60vw) translateY(30vh); }
+    100% { transform: translateX(-140vw) translateY(0); }
 }
 
 @keyframes space-slow-spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
+
+@keyframes space-star-drift {
+    from { transform: translateY(0); }
+    to { transform: translateY(-100vh); }
+}

Jellyfin.Plugin.Seasonals/Web/space.js

@@ -1,13 +1,19 @@
 const config = window.SeasonalsPluginConfig?.Space || {};
 
 const space = config.EnableSpace !== undefined ? config.EnableSpace : true;
-const symbolCount = config.SymbolCount || 25;
+const planetCountConf = config.PlanetCount !== undefined ? config.PlanetCount : 6;
+const astronautCountConf = config.AstronautCount !== undefined ? config.AstronautCount : 1;
+const satelliteCountConf = config.SatelliteCount !== undefined ? config.SatelliteCount : 4;
+const issCountConf = config.IssCount !== undefined ? config.IssCount : 1;
+const rocketCountConf = config.RocketCount !== undefined ? config.RocketCount : 1;
 const useRandomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true;
 const enableRandomMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false;
 const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
 
-const spaceImages = [
-    "../Seasonals/Resources/space_assets/astronaut_1.gif",
+const astronautImages = [
+    "../Seasonals/Resources/space_assets/astronaut_1.gif"
+];
+const planetImages = [
     "../Seasonals/Resources/space_assets/planet_1.png",
     "../Seasonals/Resources/space_assets/planet_2.png",
     "../Seasonals/Resources/space_assets/planet_3.png",
@@ -16,13 +22,19 @@ const spaceImages = [
     "../Seasonals/Resources/space_assets/planet_6.png",
     "../Seasonals/Resources/space_assets/planet_7.png",
     "../Seasonals/Resources/space_assets/planet_8.png",
-    "../Seasonals/Resources/space_assets/planet_9.png",
-    "../Seasonals/Resources/space_assets/rocket.gif",
-    "../Seasonals/Resources/space_assets/Satellite_1.gif",
-    "../Seasonals/Resources/space_assets/Satellite_2.gif",
-    "../Seasonals/Resources/space_assets/space-shuttle.png",
-    "../Seasonals/Resources/space_assets/iss.png"
+    "../Seasonals/Resources/space_assets/planet_9.png"
 ];
+const satelliteImages = [
+    "../Seasonals/Resources/space_assets/Satellite_1.gif",
+    "../Seasonals/Resources/space_assets/Satellite_2.gif"
+];
+
+const issImage = "../Seasonals/Resources/space_assets/iss.png";
+
+const rocketImages = [
+    "../Seasonals/Resources/space_assets/rocket.gif",
+    "../Seasonals/Resources/space_assets/space-shuttle.png"
+]
 
 let msgPrinted = false;
 
@@ -66,14 +78,25 @@ function createSpace() {
         document.body.appendChild(container);
     }
 
-    const standardCount = 15;
-    const totalSymbols = symbolCount + standardCount;
-    
-    let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
-    let finalCount = totalSymbols;
+    const standardPlanetCount = 4;
+    const standardAstronautCount = 1;
+    const standardSatelliteCount = 2;
+    const standardIssCount = 1;
+    const standardRocketCount = 1;
 
-    if (isMobile) {
-        finalCount = enableRandomMobile ? totalSymbols : standardCount;
+    let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
+    let pCount = planetCountConf;
+    let aCount = astronautCountConf;
+    let sCount = satelliteCountConf;
+    let iCount = issCountConf;
+    let rCount = rocketCountConf;
+
+    if (isMobile && !enableRandomMobile) {
+        pCount = standardPlanetCount;
+        aCount = standardAstronautCount;
+        sCount = standardSatelliteCount;
+        iCount = standardIssCount;
+        rCount = standardRocketCount;
     }
 
     // Add Nebula Glow
@@ -90,30 +113,43 @@ function createSpace() {
     
     // Generate random stars for parallax starfield using CSS % / vw sizes for responsiveness
     for (let i = 0; i < 150; i++) {
-        boxShadows1.push(`${(Math.random() * 100).toFixed(2)}vw ${(Math.random() * 100).toFixed(2)}vh #FFF`);
-        if (i < 50) boxShadows2.push(`${(Math.random() * 100).toFixed(2)}vw ${(Math.random() * 100).toFixed(2)}vh #FFF`);
-        if (i < 20) boxShadows3.push(`${(Math.random() * 100).toFixed(2)}vw ${(Math.random() * 100).toFixed(2)}vh #FFF`);
+        let x = (Math.random() * 100).toFixed(2);
+        let y = (Math.random() * 100).toFixed(2);
+        boxShadows1.push(`${x}vw ${y}vh #FFF`);
+        boxShadows1.push(`${x}vw ${(parseFloat(y) + 100).toFixed(2)}vh #FFF`);
+    }
+    for (let i = 0; i < 50; i++) {
+        let x = (Math.random() * 100).toFixed(2);
+        let y = (Math.random() * 100).toFixed(2);
+        boxShadows2.push(`${x}vw ${y}vh #FFF`);
+        boxShadows2.push(`${x}vw ${(parseFloat(y) + 100).toFixed(2)}vh #FFF`);
+    }
+    for (let i = 0; i < 20; i++) {
+        let x = (Math.random() * 100).toFixed(2);
+        let y = (Math.random() * 100).toFixed(2);
+        boxShadows3.push(`${x}vw ${y}vh #FFF`);
+        boxShadows3.push(`${x}vw ${(parseFloat(y) + 100).toFixed(2)}vh #FFF`);
     }
 
     const starLayer1 = document.createElement('div');
     starLayer1.style.width = '1px'; starLayer1.style.height = '1px';
     starLayer1.style.background = 'transparent';
     starLayer1.style.boxShadow = boxShadows1.join(", ");
-    starLayer1.style.animation = 'space-slow-spin 200s linear infinite';
+    starLayer1.style.animation = 'space-star-drift 200s linear infinite';
     starfield.appendChild(starLayer1);
 
     const starLayer2 = document.createElement('div');
     starLayer2.style.width = '2px'; starLayer2.style.height = '2px';
     starLayer2.style.background = 'transparent';
     starLayer2.style.boxShadow = boxShadows2.join(", ");
-    starLayer2.style.animation = 'space-slow-spin 150s linear infinite reverse';
+    starLayer2.style.animation = 'space-star-drift 150s linear infinite';
     starfield.appendChild(starLayer2);
 
     const starLayer3 = document.createElement('div');
     starLayer3.style.width = '3px'; starLayer3.style.height = '3px';
     starLayer3.style.background = 'transparent';
     starLayer3.style.boxShadow = boxShadows3.join(", ");
-    starLayer3.style.animation = 'space-slow-spin 100s linear infinite';
+    starLayer3.style.animation = 'space-star-drift 100s linear infinite';
     starfield.appendChild(starLayer3);
     
     container.appendChild(starfield);
@@ -125,85 +161,115 @@ function createSpace() {
         streak.className = 'space-shooting-star';
         // Pick a random tail direction and fall direction to match
         const isFromLeft = Math.random() > 0.5;
-        const rotateAngle = isFromLeft ? 45 : -45;
+        // Direction angle: random between 15deg-75deg (left) or 105deg-165deg (right)
+        // so they don't always fall in the exact same quadrant trajectory
+        let angle = isFromLeft 
+            ? Math.random() * 60 + 15 
+            : Math.random() * 60 + 105;
         
-        streak.style.transform = `rotate(${rotateAngle}deg)`;
-        streak.style.transformOrigin = isFromLeft ? 'left center' : 'right center';
+        streak.style.setProperty('--shoot-angle', `${angle}deg`);
         
         const topStart = Math.random() * 50; 
-        streak.style.setProperty('--shoot-start-x', isFromLeft ? '-20vw' : '120vw');
-        streak.style.setProperty('--shoot-end-x', isFromLeft ? '120vw' : '-20vw');
-        streak.style.setProperty('--shoot-start-y', `${topStart}vh`);
-        streak.style.setProperty('--shoot-end-y', `${topStart + 140}vh`); // 140vh drop to cross screen diagonally
+        streak.style.left = isFromLeft ? '-20vw' : '120vw';
+        streak.style.top = `${topStart}vh`;
+        
+        // Travel 200 viewport widths exactly along the rotated angle
+        streak.style.setProperty('--shoot-distance', '200vw');
+        
+        streak.style.animationDelay = `${Math.random() * 20}s`; 
+        
+        // MARK: Shooting Star Speed
+        const flightCycleDuration = Math.random() * 10 + 15; // 15-25s
+        streak.style.animationDuration = `${flightCycleDuration}s`; 
         
-        streak.style.animationDelay = `${Math.random() * 20}s`; // Less frequent
-        streak.style.animationDuration = `${Math.random() * 2 + 3}s`; // 3-5s
         container.appendChild(streak);
     }
 
     const useRandomDuration = enableDifferentDuration !== false;
 
-    for (let i = 0; i < finalCount; i++) {
-        let symbol = document.createElement('div');
-        
-        const randomImage = spaceImages[Math.floor(Math.random() * spaceImages.length)];
-        symbol.className = `space-symbol`;
+    function createSpaceItem(imageArr, cCount, addedClass) {
+        for (let i = 0; i < cCount; i++) {
+            let symbol = document.createElement('div');
+            
+            const randomImage = imageArr[Math.floor(Math.random() * imageArr.length)];
+            symbol.className = `space-symbol ${addedClass}`;
 
-        let img = document.createElement('img');
-        img.src = randomImage;
-        img.onerror = function() {
-            this.style.display = 'none';
-        }; // removed emoji fallback
-        symbol.appendChild(img);
+            let img = document.createElement('img');
+            img.src = randomImage;
+            img.onerror = function() {
+                this.style.display = 'none';
+            }; 
+            symbol.appendChild(img);
 
-        const topPos = Math.random() * 90; // 0 to 90vh
-        const delaySeconds = Math.random() * 10;
-        
-        // Zero gravity sizes / speeds
-        const depth = Math.random(); 
-        const distanceScale = 0.3 + (depth * 0.7); // 0.3 to 1.0 (decently small)
-        const blurAmount = depth < 0.3 ? (1 - depth) * 2 : 0; 
-        
-        symbol.style.filter = `blur(${blurAmount}px)`;
-        symbol.style.zIndex = Math.floor(depth * 30) + 20;
+            const topPos = Math.random() * 90; // 0 to 90vh
+            
+            // Zero gravity sizes / speeds
+            const depth = Math.random(); 
+            // Make background elements (depth close to 0) much smaller than foreground
+            const distanceScale = 0.15 + (depth * 0.85); // 0.15 to 1.0
+            
+            symbol.style.zIndex = Math.floor(depth * 30) + 20;
 
-        let durationSeconds = 30; // Very slow
-        if (useRandomDuration) {
-            durationSeconds = (1 - depth) * 40 + 30 + Math.random() * 10 - 5; 
+            let durationSeconds = 30; // Very slow
+            if (useRandomDuration) {
+                durationSeconds = (1 - depth) * 40 + 30 + Math.random() * 10 - 5; 
+            }
+
+            // Randomly pick direction: left-to-right OR right-to-left
+            const goRight = Math.random() > 0.5;
+            const baseTransformScale = goRight ? 'scaleX(-1)' : 'scaleX(1)';
+            
+            if (goRight) {
+                symbol.style.animationName = 'space-drift-right';
+                symbol.style.left = '-20vw';
+                symbol.style.right = 'auto';
+            } else {
+                symbol.style.animationName = 'space-drift-left';
+                symbol.style.right = '-20vw';
+                symbol.style.left = 'auto';
+            }
+
+            symbol.style.top = `${topPos}vh`;
+            symbol.style.animationDuration = `${durationSeconds}s`;
+            
+            // Negative delay correctly scatters them initially across the screen 
+            // so they don't all appear to spawn from the edge at the start
+            const delaySeconds = -(Math.random() * durationSeconds);
+            symbol.style.animationDelay = `${delaySeconds}s`;
+            
+            // Slow rotation inside inner div
+            const rotationDiv = document.createElement('div');
+            const rotDur = Math.random() * 20 + 20; // 20-40s spin
+            const spinReverse = Math.random() > 0.5 ? 'reverse' : 'normal';
+            rotationDiv.style.animation = `space-slow-spin ${rotDur}s linear infinite ${spinReverse}`;
+            
+            // Apply final static scaling and facing to inner image directly
+            img.style.transform = `scale(${distanceScale}) ${baseTransformScale}`;
+            
+            rotationDiv.appendChild(img);
+            symbol.appendChild(rotationDiv);
+
+            // Swap to a random image from the pool every time it completes an orbit (disappears)
+            if (imageArr.length > 1) {
+                // The animation delay pushes the initial cycle, so we use setInterval matched to duration
+                setInterval(() => {
+                    // Update only if currently out of bounds to avoid popping
+                    const rect = symbol.getBoundingClientRect();
+                    if (rect.right < 0 || rect.left > window.innerWidth) {
+                        img.src = imageArr[Math.floor(Math.random() * imageArr.length)];
+                    }
+                }, 2000); // Check occasionally if it's off screen
+            }
+
+            container.appendChild(symbol);
         }
-
-        // Randomly pick direction: left-to-right OR right-to-left
-        const goRight = Math.random() > 0.5;
-        const baseTransformScale = goRight ? 'scaleX(-1)' : 'scaleX(1)';
-        
-        if (goRight) {
-            symbol.style.animationName = 'space-drift-right';
-            symbol.style.left = '-15vw';
-        } else {
-            symbol.style.animationName = 'space-drift-left';
-            symbol.style.right = '-15vw';
-        }
-
-        symbol.style.top = `${topPos}vh`;
-        symbol.style.animationDuration = `${durationSeconds}s`;
-        symbol.style.animationDelay = `${delaySeconds}s`;
-        
-        // Slow rotation inside inner div
-        const rotationDiv = document.createElement('div');
-        const rotDur = Math.random() * 20 + 20; // 20-40s spin
-        const spinReverse = Math.random() > 0.5 ? 'reverse' : 'normal';
-        rotationDiv.style.animation = `space-slow-spin ${rotDur}s linear infinite ${spinReverse}`;
-        
-        rotationDiv.appendChild(symbol.cloneNode(true));
-        
-        // Apply final static scaling and facing to inner image
-        rotationDiv.firstChild.style.transform = `scale(${distanceScale}) ${baseTransformScale}`;
-        
-        symbol.innerHTML = '';
-        symbol.appendChild(rotationDiv);
-
-        container.appendChild(symbol);
     }
+
+    createSpaceItem(planetImages, pCount, 'space-planet');
+    createSpaceItem(astronautImages, aCount, 'space-astronaut');
+    createSpaceItem(satelliteImages, sCount, 'space-satellite');
+    createSpaceItem([issImage], iCount, 'space-iss');
+    createSpaceItem(rocketImages, rCount, 'space-rocket');
 }
 
 function initializeSpace() {

Jellyfin.Plugin.Seasonals/Web/sports.css

@@ -13,8 +13,6 @@
 .sports-symbol {
     position: absolute;
     top: -10vh;
-    /* Default is empty, assigned in JS */
-    font-size: 3rem; /* Fallback emoji size */
     opacity: 0.9;
     z-index: 40;
 }

Jellyfin.Plugin.Seasonals/Web/sports.js

@@ -5,6 +5,7 @@ const symbolCount = config.SymbolCount || 5;
 const useRandomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true;
 const enableRandomMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false;
 const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
+const enableTrophy = config.EnableTrophy !== undefined ? config.EnableTrophy : false;
 
 // Pre-declare and manage image assets
 const SPORTS_ASSETS = {
@@ -74,14 +75,11 @@ function createSports() {
     turf.style.background = `linear-gradient(180deg, transparent 0%, ${turfColorHex}4D 30%, ${turfColorHex}CC 100%)`;
     container.appendChild(turf);
 
-    const standardCount = 15;
-    const totalSymbols = symbolCount + standardCount;
-    
     let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
-    let finalCount = totalSymbols;
+    let ballsPerCategory = symbolCount;
 
-    if (isMobile) {
-        finalCount = enableRandomMobile ? totalSymbols : standardCount;
+    if (isMobile && !enableRandomMobile) {
+        ballsPerCategory = Math.min(symbolCount, 3);
     }
 
     const useRandomDuration = enableDifferentDuration !== false;
@@ -89,37 +87,10 @@ function createSports() {
     // Map standard sports balls to spawn based on category configuration
     const rawSportsBalls = config.SportsBalls || 'football,basketball,tennis,volleyball';
     const chosenCategories = rawSportsBalls.split(',').map(s => s.trim()).filter(s => s !== '');
-    
-    // Assemble activeItems from categories
-    let activeItems = [];
-    chosenCategories.forEach(category => {
-        if (SPORTS_ASSETS[category]) {
-            activeItems.push(...SPORTS_ASSETS[category]);
-        } else {
-            // Legacy fallback (in case older explicit filenames remain in config string)
-            activeItems.push(category);
-        }
-    });
 
-    if (activeItems.length === 0) activeItems.push(...SPORTS_ASSETS['football']); // fallback
-
-    // Track items we still need to show at least once
-    let guaranteedItems = [...activeItems];
-
-    // Create falling sports balls
-    for (let i = 0; i < finalCount; i++) {
+    const createBall = (randomItem) => {
         let symbol = document.createElement('div');
         
-        // Pick a guaranteed ball first, otherwise pick completely randomly
-        let randomItem;
-        if (guaranteedItems.length > 0) {
-            const index = Math.floor(Math.random() * guaranteedItems.length);
-            randomItem = guaranteedItems[index];
-            guaranteedItems.splice(index, 1);
-        } else {
-            randomItem = activeItems[Math.floor(Math.random() * activeItems.length)];
-        }
-        
         symbol.className = `sports-symbol sports-${randomItem}`;
 
         // Create inner div for spinning rotation
@@ -130,8 +101,7 @@ function createSports() {
         let img = document.createElement('img');
         img.src = `../Seasonals/Resources/sport_assets/${randomItem}.png`;
         img.onerror = function() {
-            this.style.display = 'none'; // hide broken image icon
-            this.parentElement.innerHTML = getEmojiFallback(randomItem); // inject emoji fallback
+            symbol.remove();
         };
         innerDiv.appendChild(img);
         
@@ -140,6 +110,7 @@ function createSports() {
         symbol.style.animationIterationCount = 'infinite';
         innerDiv.style.animationName = 'sports-spin';
         innerDiv.style.animationIterationCount = 'infinite';
+        innerDiv.style.animationTimingFunction = 'linear';
         
         symbol.appendChild(innerDiv);
 
@@ -164,7 +135,19 @@ function createSports() {
         symbol.style.animationDelay = `${delaySeconds}s`;
 
         container.appendChild(symbol);
-    }
+    };
+
+    // Create falling sports balls
+    chosenCategories.forEach(category => {
+        let variants = SPORTS_ASSETS[category];
+        if (!variants) variants = [category]; // Legacy fallback
+        
+        for (let i = 0; i < ballsPerCategory; i++) {
+            // Pick a random variant
+            const randomItem = variants[Math.floor(Math.random() * variants.length)];
+            createBall(randomItem);
+        }
+    });
     
     // Create the periodic flying trophy arc
     function launchTrophy() {
@@ -224,7 +207,9 @@ function createSports() {
     }
     
     // Launch initial trophy after a short delay
-    setTimeout(launchTrophy, Math.random() * 5000 + 2000);
+    if (enableTrophy) {
+        setTimeout(launchTrophy, Math.random() * 5000 + 2000);
+    }
 
     // Add Germany Colored confetti (Black, Red, Gold)
     const confettiColors = ['#000000', '#FF0000', '#FFCC00'];
@@ -272,20 +257,7 @@ function createSports() {
     }
 }
 
-function getEmojiFallback(type) {
-    if (type.includes('soccer') || type.includes('football')) return '⚽';
-    if (type.includes('baseball')) return '⚾';
-    if (type.includes('basketball')) return '🏀';
-    if (type.includes('billiard')) return '🎱';
-    if (type.includes('bowling')) return '🎳';
-    if (type.includes('golf')) return '⛳';
-    if (type.includes('rugby')) return '🏈';
-    if (type.includes('tennis')) return '🎾';
-    if (type.includes('volleyball')) return '🏐';
-    if (type.includes('badminton')) return '🏸';
-    if (type.includes('waterball')) return '🤽';
-    return '';
-}
+/* Removed legacy fallback logic */
 
 function initializeSports() {
   if (!sports) return;

Jellyfin.Plugin.Seasonals/Web/test-site.html

@@ -256,7 +256,7 @@
             <option value="matrix">Matrix</option>
             <option value="pride">Pride</option>
             <option value="rain">Rain</option>
-            <option value="storm">Storm (⚠️Epilepsy Warning)</option>
+            <option value="storm">Storm (⚠️Epilepsy Warning⚠️)</option>
             <option value="frost">Frost / Ice</option>
             <option value="filmnoir">Film-Noir</option>
             <option value="oscar">Oscar Awards</option>
@@ -265,8 +265,8 @@
             <option value="oktoberfest">Oktoberfest</option>
             <option value="friday13">Friday the 13th</option>
             <option value="eid">Eid al-Fitr</option>
-            <option value="sports">Sports / Football</option>
-            <option value="olympia">Olympia / Games</option>
+            <option value="sports">Sports</option>
+            <option value="olympia">Olympia</option>
             <option value="space">Space / Sci-Fi</option>
             <option value="underwater">Underwater</option>
             <option value="birthday">Birthday</option>