Fix positioning of olympia-symbol and adjust ring CSS for improved alignment [skip ci]

Jellyfin.Plugin.Seasonals/Web/halloween.js

@@ -182,14 +182,18 @@ function createSpider(container) {
         
         setTimeout(() => {
             wrapper.remove();
-            setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
+            if (document.body.contains(container)) {
+                setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
+            }
         }, 500);
     });
     
     wrapper.addEventListener('animationend', () => {
         if (isRetreating) return;
         wrapper.remove();
-        setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
+        if (document.body.contains(container)) {
+            setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
+        }
     });
     
     container.appendChild(wrapper);
@@ -223,7 +227,9 @@ function createMouse(container) {
     
     mouse.addEventListener('animationend', () => {
         mouse.remove();
-        setTimeout(() => createMouse(container), Math.random() * 4000 + 2000);
+        if (document.body.contains(container)) {
+            setTimeout(() => createMouse(container), Math.random() * 4000 + 2000);
+        }
     });
     
     container.appendChild(mouse);

Jellyfin.Plugin.Seasonals/Web/olympia.css

@@ -12,10 +12,11 @@
 
 .olympia-symbol {
     position: absolute;
-    top: -10vh;
+    top: 0;
     opacity: 0.95;
     text-shadow: 0 0 10px rgba(255,255,255,0.2);
     z-index: 40;
+    translate: 0 -10vh;
 }
 
 .olympia-flame {
@@ -34,8 +35,8 @@
 .olympia-ring-css::before {
     content: '';
     position: absolute;
-    top: 50%; left: 50%;
-    transform: translate(-50%, -50%);
+    top: 0;
+    translate: -50% -50%;
     width: 30px;
     height: 30px;
     border: 5px solid #0081C8; /* Default blue ring */
@@ -46,13 +47,15 @@
 }
 .olympia-symbol {
     position: absolute;
-    top: -10vh;
+    top: 0;
     opacity: 0.95;
     text-shadow: 0 0 10px rgba(255,255,255,0.2);
     z-index: 40;
+    translate: 0 -10vh;
 }
 
 .olympia-inner {
+    will-change: transform;
     display: inline-block;
     animation: olympia-sway linear infinite alternate;
 }