From b0fae10aa1a57b486e13d03f7fc1ce35fbfbc9f6 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Thu, 26 Feb 2026 21:53:29 +0100
Subject: [PATCH] Enhance seasonal themes: update Pi-Day to Matrix, add
 Underwater theme options, and refine descriptions for various settings

---
 .../Configuration/configPage.html             | 333 +++++++++++++++---
 1 file changed, 291 insertions(+), 42 deletions(-)

diff --git a/Jellyfin.Plugin.Seasonals/Configuration/configPage.html b/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
index 7bae820..423da88 100644
--- a/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
+++ b/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
@@ -76,17 +76,17 @@
                                 <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="piday">Pi-Day (Matrix Rain)</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>
                                 <option value="starwars">Star Wars Day (May 4th)</option>
                                 <option value="oktoberfest">Oktoberfest</option>
                                 <option value="friday13">Friday the 13th</option>
-                                <option value="eid">Eid al-Fitr</option>
+                                <option value="eidalfitr">Eid al-Fitr (Sugar Feast)</option>
                                 <option value="spooky">Spooky</option>
                             </select>
                             <div class="fieldDescription">The season to display if automation is disabled or no "Auto Selection" rule matches the current date.</div>
@@ -123,7 +123,7 @@
                     <!-- Advanced Tab -->
                     <div id="seasonals-advanced" class="seasonals-tab-content" style="display: none;">
                         <h2 class="sectionTitle">Configure specific settings for each seasonal theme</h2>
-                        <!-- <p>Configure specific settings for each seasonal theme below.</p> -->
+                        <!-- <p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p> -->
                         <p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p>
                         <details>
                             <summary>Autumn</summary>
@@ -151,7 +151,7 @@
                             <div class="inputContainer">
                                 <label class="inputLabel" for="AutumnLeafCount">Leaf Count</label>
                                 <input is="emby-input" type="number" id="AutumnLeafCount" name="AutumnLeafCount" />
-                                <div class="fieldDescription">Number of additional leaves displayed on screen (if enabled)</div>
+                                <div class="fieldDescription">Number of additional leaves displayed (if enabled)</div>
                             </div>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
@@ -371,7 +371,7 @@
                         <hr style="max-width: 800px; margin: 1em 0;">
 
                         <details>
-                            <summary>Spooky Theme</summary>
+                            <summary>Spooky</summary>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
                                     <input id="EnableSpooky" name="EnableSpooky" type="checkbox" is="emby-checkbox" />
@@ -403,6 +403,47 @@
                         </details>
                         <hr style="max-width: 800px; margin: 1em 0;">
 
+                        <details>
+                            <summary>Underwater</summary>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableUnderwater" name="EnableUnderwater" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Underwater Seasonal</span>
+                                </label>
+                                <div class="fieldDescription">Enable the Underwater theme (fishes, bubbles, seaweed).</div>
+                            </div>
+                            <div class="checkboxContainer">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableUnderwaterLightRays" name="EnableUnderwaterLightRays" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Light Rays (God Rays)</span>
+                                </label>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="UnderwaterSymbolCount">Symbol Count</label>
+                                <input is="emby-input" type="number" id="UnderwaterSymbolCount" name="UnderwaterSymbolCount" />
+                                <div class="fieldDescription">Number of sea creatures.</div>
+                            </div>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableRandomUnderwater" name="EnableRandomUnderwater" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Additional Random Symbols</span>
+                                </label>
+                            </div>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableRandomUnderwaterMobile" name="EnableRandomUnderwaterMobile" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Additional Random Symbols on Mobile</span>
+                                </label>
+                            </div>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableDifferentDurationUnderwater" name="EnableDifferentDurationUnderwater" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Different Duration</span>
+                                </label>
+                            </div>
+                        </details>
+                        <hr style="max-width: 800px; margin: 1em 0;">
+
                         <details>
                             <summary>Hearts</summary>
                             <div class="checkboxContainer checkboxContainer-withDescription">
@@ -894,6 +935,65 @@
                                     <span>Enable Different Duration</span>
                                 </label>
                             </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="TurfColor">Turf Color</label>
+                                <input is="emby-input" type="color" id="TurfColor" name="TurfColor" value="#228b22" />
+                                <div class="fieldDescription">Color for the grass/turf overlay at the bottom.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel">Enabled Sports Balls</label>
+                                <div class="fieldDescription" style="margin-bottom: 8px;">Select which sports balls should be featured.</div>
+                                <div style="display: flex; flex-wrap: wrap; gap: 15px;">
+                                    <label class="emby-checkbox-label">
+                                        <input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="badminton" />
+                                        <span>Badminton</span>
+                                    </label>
+                                    <label class="emby-checkbox-label">
+                                        <input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="baseball" />
+                                        <span>Baseball</span>
+                                    </label>
+                                    <label class="emby-checkbox-label">
+                                        <input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="basketball" />
+                                        <span>Basketball</span>
+                                    </label>
+                                    <label class="emby-checkbox-label">
+                                        <input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="billiard" />
+                                        <span>Billiard</span>
+                                    </label>
+                                    <label class="emby-checkbox-label">
+                                        <input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="bowling" />
+                                        <span>Bowling</span>
+                                    </label>
+                                    <label class="emby-checkbox-label">
+                                        <input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="football" />
+                                        <span>Football/Soccer</span>
+                                    </label>
+                                    <label class="emby-checkbox-label">
+                                        <input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="golf" />
+                                        <span>Golf</span>
+                                    </label>
+                                    <label class="emby-checkbox-label">
+                                        <input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="rugby" />
+                                        <span>Rugby</span>
+                                    </label>
+                                    <label class="emby-checkbox-label">
+                                        <input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="table_tennis" />
+                                        <span>Table Tennis</span>
+                                    </label>
+                                    <label class="emby-checkbox-label">
+                                        <input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="tennis" />
+                                        <span>Tennis</span>
+                                    </label>
+                                    <label class="emby-checkbox-label">
+                                        <input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="volleyball" />
+                                        <span>Volleyball</span>
+                                    </label>
+                                    <label class="emby-checkbox-label">
+                                        <input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="waterball" />
+                                        <span>Waterpolo</span>
+                                    </label>
+                                </div>
+                            </div>
                         </details>
                         <hr style="max-width: 800px; margin: 1em 0;">
 
@@ -976,6 +1076,13 @@
                                 </label>
                                 <div class="fieldDescription">Enable the underwater theme effects in general (e.g. for automation).</div>
                             </div>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableUnderwaterLightRays" name="EnableUnderwaterLightRays" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Light Rays</span>
+                                </label>
+                                <div class="fieldDescription">Enable god rays from the top.</div>
+                            </div>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
                                     <input id="EnableRandomSymbolsUnderwater" name="EnableRandomSymbolsUnderwater" type="checkbox" is="emby-checkbox" />
@@ -989,9 +1096,38 @@
                                 </label>
                             </div>
                             <div class="inputContainer">
-                                <label class="inputLabel" for="UnderwaterSymbolCount">Symbol Count</label>
-                                <input is="emby-input" type="number" id="UnderwaterSymbolCount" name="UnderwaterSymbolCount" />
-                                <div class="fieldDescription">Number of additional symbols displayed (if enabled).</div>
+                                <label class="inputLabel" for="UnderwaterSeaweedCount">Seaweed Count</label>
+                                <input is="emby-input" type="number" id="UnderwaterSeaweedCount" name="UnderwaterSeaweedCount" />
+                                <div class="fieldDescription">Amount of dynamic seaweed (GIFs + Emojis) at the bottom.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="UnderwaterFishCount">Fish Count</label>
+                                <input is="emby-input" type="number" id="UnderwaterFishCount" name="UnderwaterFishCount" />
+                                <div class="fieldDescription">Number of swimming fish.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="UnderwaterSeahorseCount">Seahorse Count</label>
+                                <input is="emby-input" type="number" id="UnderwaterSeahorseCount" name="UnderwaterSeahorseCount" />
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="UnderwaterJellyfishCount">Jellyfish Count</label>
+                                <input is="emby-input" type="number" id="UnderwaterJellyfishCount" name="UnderwaterJellyfishCount" />
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="UnderwaterTurtleCount">Turtle Count</label>
+                                <input is="emby-input" type="number" id="UnderwaterTurtleCount" name="UnderwaterTurtleCount" />
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="UnderwaterCrabCount">Crab Count</label>
+                                <input is="emby-input" type="number" id="UnderwaterCrabCount" name="UnderwaterCrabCount" />
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="UnderwaterStarfishCount">Starfish Count</label>
+                                <input is="emby-input" type="number" id="UnderwaterStarfishCount" name="UnderwaterStarfishCount" />
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="UnderwaterShellCount">Shell Count</label>
+                                <input is="emby-input" type="number" id="UnderwaterShellCount" name="UnderwaterShellCount" />
                             </div>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
@@ -1011,6 +1147,13 @@
                                 </label>
                                 <div class="fieldDescription">Enable the birthday theme effects in general (e.g. for automation).</div>
                             </div>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableGarland" name="EnableGarland" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Garland</span>
+                                </label>
+                                <div class="fieldDescription">Enable dropping confetti / popping a garland at the top.</div>
+                            </div>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
                                     <input id="EnableRandomSymbolsBirthday" name="EnableRandomSymbolsBirthday" type="checkbox" is="emby-checkbox" />
@@ -1093,46 +1236,51 @@
                         <hr style="max-width: 800px; margin: 1em 0;">
 
                         <details>
-                            <summary>Pi-Day</summary>
+                            <summary>Matrix</summary>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
-                                    <input id="EnablePiDay" name="EnablePiDay" type="checkbox" is="emby-checkbox" />
-                                    <span>Enable Pi-Day Seasonal</span>
+                                    <input id="EnableMatrix" name="EnableMatrix" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Matrix Seasonal</span>
                                 </label>
-                                <div class="fieldDescription">Enable the Pi-Day theme in general (e.g. for automation).</div>
+                                <div class="fieldDescription">Enable the Matrix theme in general (e.g. for automation).</div>
                             </div>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
-                                    <input id="EnableRandomPiDay" name="EnableRandomPiDay" type="checkbox" is="emby-checkbox" />
-                                    <span>Enable Additional Random Pi Symbols</span>
+                                    <input id="EnableRandomMatrix" name="EnableRandomMatrix" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Additional Random Matrix Symbols</span>
                                 </label>
                                 <div class="fieldDescription">Displays additional digital rain elements.</div>
                             </div>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
-                                    <input id="EnableRandomPiDayMobile" name="EnableRandomPiDayMobile" type="checkbox" is="emby-checkbox" />
-                                    <span>Enable Additional Random Pi Symbols on Mobile</span>
+                                    <input id="EnableRandomMatrixMobile" name="EnableRandomMatrixMobile" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Additional Random Matrix Symbols on Mobile</span>
                                 </label>
                                 <div class="fieldDescription">Displays additional digital rain elements on mobile devices. Warning: High values may affect performance.</div>
                             </div>
                             <div class="inputContainer">
-                                <label class="inputLabel" for="PiDaySymbolCount">Symbol Count</label>
-                                <input is="emby-input" type="number" id="PiDaySymbolCount" name="PiDaySymbolCount" />
+                                <label class="inputLabel" for="MatrixSymbolCount">Symbol Count</label>
+                                <input is="emby-input" type="number" id="MatrixSymbolCount" name="MatrixSymbolCount" />
                                 <div class="fieldDescription">Number of additional digital rain columns (if enabled).</div>
                             </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="MatrixChars">Raining Characters</label>
+                                <input is="emby-input" type="text" id="MatrixChars" name="MatrixChars" />
+                                <div class="fieldDescription">Characters to use for the rain effect (default is 0-9).</div>
+                            </div>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
-                                    <input id="EnableDifferentDurationPiDay" name="EnableDifferentDurationPiDay" type="checkbox" is="emby-checkbox" />
+                                    <input id="EnableDifferentDurationMatrix" name="EnableDifferentDurationMatrix" type="checkbox" is="emby-checkbox" />
                                     <span>Enable Different Falling Speed</span>
                                 </label>
                                 <div class="fieldDescription">Randomize the digital rain falling speed.</div>
                             </div>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
-                                    <input id="EnablePiDayBackground" name="EnablePiDayBackground" type="checkbox" is="emby-checkbox" />
+                                    <input id="EnableMatrixBackground" name="EnableMatrixBackground" type="checkbox" is="emby-checkbox" />
                                     <span>Background Mode (Behind UI)</span>
                                 </label>
-                                <div class="fieldDescription">Displays the Pi-Day animation behind library tiles and content.</div>
+                                <div class="fieldDescription">Displays the Matrix animation behind library tiles and content.</div>
                             </div>
                         </details>
                         <hr style="max-width: 800px; margin: 1em 0;">
@@ -1200,6 +1348,7 @@
 
                         <details>
                             <summary>Storm</summary>
+                            <div><p>⚠️ Epilepsy warning ⚠️</p></div>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
                                     <input id="EnableStorm" name="EnableStorm" type="checkbox" is="emby-checkbox" />
@@ -1310,7 +1459,7 @@
                         <hr style="max-width: 800px; margin: 1em 0;">
 
                         <details>
-                            <summary>Zuckerfest (Eid)</summary>
+                            <summary>Eid al-Fitr (Sugar Feast)</summary>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
                                     <input id="EnableEid" name="EnableEid" type="checkbox" is="emby-checkbox" />
@@ -1319,7 +1468,6 @@
                             </div>
                         </details>
                     </div>
-                
                     <div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;">
                         <i class="material-icons" style="color: #00a4dc; font-size: 24px;">info</i>
                         <div>
@@ -1502,7 +1650,7 @@
                         '            <option value="cherryblossom">Cherry Blossom</option>' +
                         '            <option value="earthday">Earth Day</option>' +
                         '            <option value="eurovision">Eurovision</option>' +
-                        '            <option value="piday">Pi-Day</option>' +
+                        '            <option value="matrix">Matrix</option>' +
                         '            <option value="pride">Pride</option>' +
                         '            <option value="rain">Rain</option>' +
                         '            <option value="storm">Storm (Epilepsy Warning!)</option>' +
@@ -1514,7 +1662,8 @@
                         '            <option value="starwars">Star Wars Day</option>' +
                         '            <option value="oktoberfest">Oktoberfest</option>' +
                         '            <option value="friday13">Friday the 13th</option>' +
-                        '            <option value="eid">Eid al-Fitr</option>' +
+                        '            <option value="eidalfitr">Eid al-Fitr</option>' +
+                        '            <option value="spooky">Spooky</option>' +
                         '            <option value="legacyhalloween">Legacy Halloween</option>' +
                         '        </select>' +
                         '    </div>' +
@@ -1668,15 +1817,48 @@
                         document.querySelector('#EnableRandomSymbolsUnderwater').checked = config.Underwater.EnableRandomSymbols || false;
                         document.querySelector('#EnableRandomSymbolsMobileUnderwater').checked = config.Underwater.EnableRandomSymbolsMobile || false;
                         document.querySelector('#EnableDifferentDurationUnderwater').checked = config.Underwater.EnableDifferentDuration || false;
-                        document.querySelector('#UnderwaterSymbolCount').value = config.Underwater.SymbolCount || 15;
+                        document.querySelector('#UnderwaterSeaweedCount').value = config.Underwater.SeaweedCount !== undefined ? config.Underwater.SeaweedCount : 30;
+                        document.querySelector('#UnderwaterFishCount').value = config.Underwater.FishCount !== undefined ? config.Underwater.FishCount : 15;
+                        document.querySelector('#UnderwaterSeahorseCount').value = config.Underwater.SeahorseCount !== undefined ? config.Underwater.SeahorseCount : 3;
+                        document.querySelector('#UnderwaterJellyfishCount').value = config.Underwater.JellyfishCount !== undefined ? config.Underwater.JellyfishCount : 3;
+                        document.querySelector('#UnderwaterTurtleCount').value = config.Underwater.TurtleCount !== undefined ? config.Underwater.TurtleCount : 1;
+                        document.querySelector('#UnderwaterCrabCount').value = config.Underwater.CrabCount !== undefined ? config.Underwater.CrabCount : 2;
+                        document.querySelector('#UnderwaterStarfishCount').value = config.Underwater.StarfishCount !== undefined ? config.Underwater.StarfishCount : 2;
+                        document.querySelector('#UnderwaterShellCount').value = config.Underwater.ShellCount !== undefined ? config.Underwater.ShellCount : 2;
 
                         // Birthday
                         document.querySelector('#EnableBirthday').checked = config.Birthday.EnableBirthday || false;
+                        document.querySelector('#EnableGarland').checked = config.Birthday.EnableGarland !== false;
                         document.querySelector('#EnableRandomSymbolsBirthday').checked = config.Birthday.EnableRandomSymbols || false;
                         document.querySelector('#EnableRandomSymbolsMobileBirthday').checked = config.Birthday.EnableRandomSymbolsMobile || false;
                         document.querySelector('#EnableDifferentDurationBirthday').checked = config.Birthday.EnableDifferentDuration || false;
                         document.querySelector('#BirthdaySymbolCount').value = config.Birthday.SymbolCount || 25;
 
+                        // Sports
+                        if (!config.Sports) config.Sports = { EnableSports: true, SymbolCount: 25, EnableRandomSymbols: true, EnableRandomSymbolsMobile: false, EnableDifferentDuration: true };
+                        document.querySelector('#EnableSports').checked = config.Sports.EnableSports !== false;
+                        document.querySelector('#EnableRandomSymbolsSports').checked = config.Sports.EnableRandomSymbols !== false;
+                        document.querySelector('#EnableRandomSymbolsMobileSports').checked = config.Sports.EnableRandomSymbolsMobile === true;
+                        document.querySelector('#EnableDifferentDurationSports').checked = config.Sports.EnableDifferentDuration !== false;
+                        document.querySelector('#SportsSymbolCount').value = config.Sports.SymbolCount || 25;
+                        document.querySelector('#TurfColor').value = config.Sports.TurfColor || '#228b22';
+                        
+                        // Load Checkboxes
+                        const savedBallsString = config.Sports.SportsBalls || 'football,basketball,tennis,volleyball';
+                        const savedBalls = savedBallsString.split(',');
+                        document.querySelectorAll('.sport-ball-cb').forEach(cb => {
+                            // Support for both new category string and legacy filename strings
+                            cb.checked = savedBalls.some(b => b === cb.value || b.startsWith(cb.value + '_'));
+                        });
+
+                        // Olympia
+                        if (!config.Olympia) config.Olympia = { EnableOlympia: true, SymbolCount: 25, EnableRandomSymbols: true, EnableRandomSymbolsMobile: false, EnableDifferentDuration: true };
+                        document.querySelector('#EnableOlympia').checked = config.Olympia.EnableOlympia !== false;
+                        document.querySelector('#EnableRandomSymbolsOlympia').checked = config.Olympia.EnableRandomSymbols !== false;
+                        document.querySelector('#EnableRandomSymbolsMobileOlympia').checked = config.Olympia.EnableRandomSymbolsMobile === true;
+                        document.querySelector('#EnableDifferentDurationOlympia').checked = config.Olympia.EnableDifferentDuration !== false;
+                        document.querySelector('#OlympiaSymbolCount').value = config.Olympia.SymbolCount || 25;
+
                         // Halloween
                         document.querySelector('#EnableHalloween').checked = config.Halloween.EnableHalloween;
                         document.querySelector('#HalloweenCount').value = config.Halloween.SymbolCount;
@@ -1781,13 +1963,14 @@
                         document.querySelector('#EurovisionColors').value = config.Eurovision.EurovisionColors;
                         document.querySelector('#EurovisionGlowSize').value = config.Eurovision.EurovisionGlowSize;
 
-                        // Pi-Day
-                        document.querySelector('#EnablePiDay').checked = config.PiDay.EnablePiDay;
-                        document.querySelector('#PiDaySymbolCount').value = config.PiDay.SymbolCount;
-                        document.querySelector('#EnableRandomPiDay').checked = config.PiDay.EnableRandomPiDay;
-                        document.querySelector('#EnableRandomPiDayMobile').checked = config.PiDay.EnableRandomPiDayMobile;
-                        document.querySelector('#EnableDifferentDurationPiDay').checked = config.PiDay.EnableDifferentDuration;
-                        document.querySelector('#EnablePiDayBackground').checked = config.PiDay.EnablePiDayBackground !== undefined ? config.PiDay.EnablePiDayBackground : false;
+                        // Matrix
+                        document.querySelector('#EnableMatrix').checked = config.Matrix.EnableMatrix;
+                        document.querySelector('#MatrixSymbolCount').value = config.Matrix.SymbolCount;
+                        document.querySelector('#MatrixChars').value = config.Matrix.MatrixChars !== undefined ? config.Matrix.MatrixChars : '0123456789';
+                        document.querySelector('#EnableRandomMatrix').checked = config.Matrix.EnableRandomMatrix;
+                        document.querySelector('#EnableRandomMatrixMobile').checked = config.Matrix.EnableRandomMatrixMobile;
+                        document.querySelector('#EnableDifferentDurationMatrix').checked = config.Matrix.EnableDifferentDuration;
+                        document.querySelector('#EnableMatrixBackground').checked = config.Matrix.EnableMatrixBackground !== undefined ? config.Matrix.EnableMatrixBackground : false;
 
                         // Pride
                         document.querySelector('#EnablePride').checked = config.Pride.EnablePride;
@@ -1815,6 +1998,24 @@
                         document.querySelector('#StormRainSpeed').value = config.Storm.RainSpeed;
                         document.querySelector('#StormEnableLightning').checked = config.Storm.EnableLightning;
 
+                        // Underwater
+                        config.Underwater = config.Underwater || {};
+                        document.querySelector('#EnableUnderwater').checked = config.Underwater.EnableUnderwater !== false;
+                        document.querySelector('#EnableUnderwaterLightRays').checked = config.Underwater.EnableLightRays !== false;
+                        document.querySelector('#UnderwaterSymbolCount').value = config.Underwater.SymbolCount || 15;
+                        document.querySelector('#EnableRandomSymbolsUnderwater').checked = config.Underwater.EnableRandomSymbols !== false;
+                        document.querySelector('#EnableRandomSymbolsMobileUnderwater').checked = config.Underwater.EnableRandomSymbolsMobile === true;
+                        document.querySelector('#EnableDifferentDurationUnderwater').checked = config.Underwater.EnableDifferentDuration !== false;
+
+                        // Birthday
+                        config.Birthday = config.Birthday || {};
+                        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('#EnableRandomSymbolsBirthday').checked = config.Birthday.EnableRandomSymbols !== false;
+                        document.querySelector('#EnableRandomSymbolsMobileBirthday').checked = config.Birthday.EnableRandomSymbolsMobile === true;
+                        document.querySelector('#EnableDifferentDurationBirthday').checked = config.Birthday.EnableDifferentDuration !== false;
+
                         Dashboard.hideLoadingMsg();
                     });
                 });
@@ -1867,6 +2068,14 @@
                         config.Sports.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileSports').checked;
                         config.Sports.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSports').checked;
                         config.Sports.SymbolCount = parseInt(document.querySelector('#SportsSymbolCount').value);
+                        config.Sports.TurfColor = document.querySelector('#TurfColor').value;
+                        
+                        // Save Checkboxes
+                        const selectedBalls = Array.from(document.querySelectorAll('.sport-ball-cb'))
+                            .filter(cb => cb.checked)
+                            .map(cb => cb.value);
+                        
+                        config.Sports.SportsBalls = selectedBalls.join(',');
 
                         // Olympia
                         if (!config.Olympia) config.Olympia = {};
@@ -1887,14 +2096,23 @@
                         // Underwater
                         if (!config.Underwater) config.Underwater = {};
                         config.Underwater.EnableUnderwater = document.querySelector('#EnableUnderwater').checked;
+                        config.Underwater.EnableUnderwaterLightRays = document.querySelector('#EnableUnderwaterLightRays').checked;
                         config.Underwater.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsUnderwater').checked;
                         config.Underwater.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileUnderwater').checked;
                         config.Underwater.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationUnderwater').checked;
-                        config.Underwater.SymbolCount = parseInt(document.querySelector('#UnderwaterSymbolCount').value);
+                        config.Underwater.SeaweedCount = parseInt(document.querySelector('#UnderwaterSeaweedCount').value);
+                        config.Underwater.FishCount = parseInt(document.querySelector('#UnderwaterFishCount').value);
+                        config.Underwater.SeahorseCount = parseInt(document.querySelector('#UnderwaterSeahorseCount').value);
+                        config.Underwater.JellyfishCount = parseInt(document.querySelector('#UnderwaterJellyfishCount').value);
+                        config.Underwater.TurtleCount = parseInt(document.querySelector('#UnderwaterTurtleCount').value);
+                        config.Underwater.CrabCount = parseInt(document.querySelector('#UnderwaterCrabCount').value);
+                        config.Underwater.StarfishCount = parseInt(document.querySelector('#UnderwaterStarfishCount').value);
+                        config.Underwater.ShellCount = parseInt(document.querySelector('#UnderwaterShellCount').value);
 
                         // Birthday
                         if (!config.Birthday) config.Birthday = {};
                         config.Birthday.EnableBirthday = document.querySelector('#EnableBirthday').checked;
+                        config.Birthday.EnableGarland = document.querySelector('#EnableGarland').checked;
                         config.Birthday.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsBirthday').checked;
                         config.Birthday.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileBirthday').checked;
                         config.Birthday.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationBirthday').checked;
@@ -2041,13 +2259,14 @@
                         config.Eurovision.EurovisionColors = document.querySelector('#EurovisionColors').value;
                         config.Eurovision.EurovisionGlowSize = parseInt(document.querySelector('#EurovisionGlowSize').value);
 
-                        // Pi-Day
-                        config.PiDay.EnablePiDay = document.querySelector('#EnablePiDay').checked;
-                        config.PiDay.SymbolCount = parseInt(document.querySelector('#PiDaySymbolCount').value);
-                        config.PiDay.EnableRandomPiDay = document.querySelector('#EnableRandomPiDay').checked;
-                        config.PiDay.EnableRandomPiDayMobile = document.querySelector('#EnableRandomPiDayMobile').checked;
-                        config.PiDay.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationPiDay').checked;
-                        config.PiDay.EnablePiDayBackground = document.querySelector('#EnablePiDayBackground').checked;
+                        // Matrix
+                        config.Matrix.EnableMatrix = document.querySelector('#EnableMatrix').checked;
+                        config.Matrix.SymbolCount = parseInt(document.querySelector('#MatrixSymbolCount').value);
+                        config.Matrix.MatrixChars = document.querySelector('#MatrixChars').value;
+                        config.Matrix.EnableRandomMatrix = document.querySelector('#EnableRandomMatrix').checked;
+                        config.Matrix.EnableRandomMatrixMobile = document.querySelector('#EnableRandomMatrixMobile').checked;
+                        config.Matrix.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationMatrix').checked;
+                        config.Matrix.EnableMatrixBackground = document.querySelector('#EnableMatrixBackground').checked;
 
                         // Pride
                         config.Pride.EnablePride = document.querySelector('#EnablePride').checked;
@@ -2068,6 +2287,14 @@
                         config.Storm.RainSpeed = parseFloat(document.querySelector('#StormRainSpeed').value);
                         config.Storm.EnableLightning = document.querySelector('#StormEnableLightning').checked;
 
+                        // Underwater
+                        config.Underwater.EnableUnderwater = document.querySelector('#EnableUnderwater').checked;
+                        config.Underwater.EnableLightRays = document.querySelector('#EnableUnderwaterLightRays').checked;
+                        config.Underwater.SymbolCount = parseInt(document.querySelector('#UnderwaterSymbolCount').value);
+                        config.Underwater.EnableRandomSymbols = document.querySelector('#EnableRandomUnderwater').checked;
+                        config.Underwater.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomUnderwaterMobile').checked;
+                        config.Underwater.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationUnderwater').checked;
+
                         // New Themes
                         config.Frost.EnableFrost = document.querySelector('#EnableFrost').checked;
                         config.FilmNoir.EnableFilmNoir = document.querySelector('#EnableFilmNoir').checked;
@@ -2152,6 +2379,28 @@
                         config.Eurovision.EurovisionColors = document.querySelector('#EurovisionColors').value;
                         config.Eurovision.EurovisionGlowSize = parseInt(document.querySelector('#EurovisionGlowSize').value);
 
+                        // Birthday
+                        config.Birthday.EnableBirthday = document.querySelector('#EnableBirthday').checked;
+                        config.Birthday.EnableGarland = document.querySelector('#EnableGarland').checked;
+                        config.Birthday.SymbolCount = parseInt(document.querySelector('#BirthdaySymbolCount').value);
+                        config.Birthday.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsBirthday').checked;
+                        config.Birthday.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileBirthday').checked;
+                        config.Birthday.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationBirthday').checked;
+
+                        // Sports
+                        config.Sports.EnableSports = document.querySelector('#EnableSports').checked;
+                        config.Sports.SymbolCount = parseInt(document.querySelector('#SportsSymbolCount').value);
+                        config.Sports.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsSports').checked;
+                        config.Sports.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileSports').checked;
+                        config.Sports.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSports').checked;
+
+                        // Olympia
+                        config.Olympia.EnableOlympia = document.querySelector('#EnableOlympia').checked;
+                        config.Olympia.SymbolCount = parseInt(document.querySelector('#OlympiaSymbolCount').value);
+                        config.Olympia.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsOlympia').checked;
+                        config.Olympia.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileOlympia').checked;
+                        config.Olympia.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationOlympia').checked;
+
                         // Pi-Day
                         config.PiDay.EnablePiDay = document.querySelector('#EnablePiDay').checked;
                         config.PiDay.SymbolCount = parseInt(document.querySelector('#PiDaySymbolCount').value);