Add custom overlay image upload feature with style options

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -1103,3 +1103,53 @@
     }
   }
 }
+
+/* Custom Overlay Styles */
+.custom-overlay-style-Shadowed {
+  color: #fff;
+  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.8);
+}
+
+.custom-overlay-style-Frosted {
+  color: #fff;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  padding: 8px 24px;
+  border-radius: 50px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  text-shadow: none; /* override default */
+}
+
+.custom-overlay-style-Cinematic {
+  background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: none; /* override default */
+  filter: drop-shadow(0px 2px 8px rgba(255, 215, 0, 0.4)) drop-shadow(2px 2px 4px rgba(0,0,0,0.8));
+  animation: shineCinematic 4s linear infinite;
+  background-size: 200% auto;
+}
+
+@keyframes shineCinematic {
+  to {
+    background-position: 200% center;
+  }
+}
+
+.custom-overlay-style-Pulse {
+  color: #fff;
+  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.8);
+  animation: pulseOverlayText 3s ease-in-out infinite alternate;
+}
+
+@keyframes pulseOverlayText {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(1.05);
+  }
+}