style(theme): standardize and optimize CSS styling across themes

- Replace CamelCase animation names with kebab-case (e.g., `slideIn` → `slide-in`).
- Update theme class names to remove double hyphens (e.g., `wp-place-theme--classic` → `wp-place-theme-classic`).
- Standardize color syntax to use modern `rgb()` format with percentage-based alpha values.
- Replace long-form hex colors with shorthand where applicable (e.g., `#ffffff` → `#fff`).
- Simplify redundant or theme-specific styles and consolidate them into single rules.
- Modularize theme-specific styling comments and ensure consistent naming conventions.
- Refactor media queries, gradients, and keyframe animations for improved readability and performance.
- Add missing button hover styles and subtle text shadow for improved contrast.
- Introduce pixel-blinking animation and neon glow effects for the neon theme.
- Optimize slider, shadow, and text variants for consistency and maintainability.

Benefits:
- Improves consistency and readability across CSS and JavaScript files.
- Enhances maintainability by modularizing theme-specific styles and adopting modern syntax.
- Reduces redundancy and file size by eliminating unused or repetitive rules.
- Aligns with modern CSS standards for better compatibility and performance.

Note:
- Ensure all theme files are updated in the `feat-external-lang` branch to avoid broken imports.
- Verify browser compatibility for `rgb` with alpha values and RGB hex alpha syntax if targeting older environments.
- Test for unintended visual changes due to removed CSS variables or consolidated rules.

Auto-Image.js

@@ -142,7 +142,7 @@
         animations: {
           glow: false,
           scanline: false,
-          pixelBlink: false,
+          'pixel-blink': false,
         },
       },
       'Classic Light': {
@@ -163,7 +163,7 @@
         animations: {
           glow: false,
           scanline: false,
-          pixelBlink: false,
+          'pixel-blink': false,
         },
       },
       'Neon Retro': {
@@ -187,7 +187,7 @@
         animations: {
           glow: true,
           scanline: true,
-          pixelBlink: true,
+          'pixel-blink': true,
         },
       },
     },
@@ -220,16 +220,16 @@
     const theme = getCurrentTheme();
     // Toggle theme class on documentElement so CSS vars cascade to our UI
     document.documentElement.classList.remove(
-      'wplace-theme--classic',
-      'wplace-theme--classic-light',
-      'wplace-theme--neon'
+      'wplace-theme-classic',
+      'wplace-theme-classic-light',
+      'wplace-theme-neon'
     );
 
-    let themeClass = 'wplace-theme--classic'; // default
+    let themeClass = 'wplace-theme-classic'; // default
     if (CONFIG.currentTheme === 'Neon Retro') {
-      themeClass = 'wplace-theme--neon';
+      themeClass = 'wplace-theme-neon';
     } else if (CONFIG.currentTheme === 'Classic Light') {
-      themeClass = 'wplace-theme--classic-light';
+      themeClass = 'wplace-theme-classic-light';
     }
 
     document.documentElement.classList.add(themeClass);
@@ -1859,7 +1859,7 @@
       document.body.appendChild(alertDiv);
 
       setTimeout(() => {
-        alertDiv.style.animation = 'slideDown 0.3s ease-out reverse';
+        alertDiv.style.animation = 'slide-down 0.3s ease-out reverse';
         setTimeout(() => {
           document.body.removeChild(alertDiv);
         }, 300);
@@ -3514,7 +3514,7 @@
       };
       backdrop-filter: ${theme.backdropFilter || 'blur(10px)'};
       overflow: hidden;
-      animation: settingsSlideIn 0.4s ease-out;
+      animation: settings-slide-in 0.4s ease-out;
       ${
         theme.animations?.glow
           ? `
@@ -3937,7 +3937,7 @@
           to { transform: rotate(360deg); }
         }
 
-        @keyframes settingsSlideIn {
+        @keyframes settings-slide-in {
           from {
             opacity: 0;
             transform: translate(-50%, -50%) scale(0.9);
@@ -3948,7 +3948,7 @@
           }
         }
 
-        @keyframes settingsFadeOut {
+        @keyframes settings-fade-out {
           from {
             opacity: 1;
             transform: translate(-50%, -50%) scale(1);
@@ -4414,7 +4414,7 @@
       settingsBtn.addEventListener('click', () => {
         const isVisible = settingsContainer.classList.contains('show');
         if (isVisible) {
-          settingsContainer.style.animation = 'settingsFadeOut 0.3s ease-out forwards';
+          settingsContainer.style.animation = 'settings-fade-out 0.3s ease-out forwards';
           settingsContainer.classList.remove('show');
           setTimeout(() => {
             settingsContainer.style.animation = '';
@@ -4424,12 +4424,12 @@
           settingsContainer.style.left = '50%';
           settingsContainer.style.transform = 'translate(-50%, -50%)';
           settingsContainer.classList.add('show');
-          settingsContainer.style.animation = 'settingsSlideIn 0.4s ease-out';
+          settingsContainer.style.animation = 'settings-slide-in 0.4s ease-out';
         }
       });
 
       closeSettingsBtn.addEventListener('click', () => {
-        settingsContainer.style.animation = 'settingsFadeOut 0.3s ease-out forwards';
+        settingsContainer.style.animation = 'settings-fade-out 0.3s ease-out forwards';
         settingsContainer.classList.remove('show');
         setTimeout(() => {
           settingsContainer.style.animation = '';
@@ -4984,7 +4984,7 @@
         // Trigger animation only when silent = false
         statusText.style.animation = 'none';
         void statusText.offsetWidth; // trick to restart the animation
-        statusText.style.animation = 'slideIn 0.3s ease-out';
+        statusText.style.animation = 'slide-in 0.3s ease-out';
       }
     };