Update index.html

index.html

@@ -24,36 +24,21 @@
         body {
             font-family: 'Inter', sans-serif;
             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
-            min-height: 100vh;
-        }
-        
-        .dark {
             background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            min-height: 100vh;
             color: #e2e8f0;
         }
         
         .glass {
-            background: rgba(255, 255, 255, 0.85);
-            backdrop-filter: blur(12px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-        }
-        
-        .dark .glass {
             background: rgba(30, 41, 59, 0.85);
+            backdrop-filter: blur(12px);
             border: 1px solid rgba(255, 255, 255, 0.1);
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
         }
         
         .card-gradient {
-            background: linear-gradient(145deg, #ffffff, #f1f5f9);
-            border-radius: 20px;
-            box-shadow: 10px 10px 30px #e2e8f0, -10px -10px 30px #ffffff;
-        }
-        
-        .dark .card-gradient {
             background: linear-gradient(145deg, #1e293b, #0f172a);
+            border-radius: 20px;
             box-shadow: 10px 10px 30px #0a0f1a, -10px -10px 30px #2a3a52;
         }
         
@@ -117,10 +102,6 @@
         
         .card-hover:hover {
             transform: translateY(-10px) scale(1.02);
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
-        }
-        
-        .dark .card-hover:hover {
             box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
         }
         
@@ -173,20 +154,15 @@
             width: 28px;
             height: 28px;
             border-radius: 50%;
-            background: white;
+            background: #1e293b;
             padding: 3px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
             display: flex;
             align-items: center;
             justify-content: center;
             z-index: 10;
         }
         
-        .dark .element-icon {
-            background: #1e293b;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-        }
-        
         .tab-active {
             position: relative;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
@@ -195,10 +171,6 @@
         }
         
         .glow {
-            box-shadow: 0 0 25px rgba(102, 126, 234, 0.4);
-        }
-        
-        .dark .glow {
             box-shadow: 0 0 35px rgba(102, 126, 234, 0.6);
         }
         
@@ -262,7 +234,7 @@
         }
         
         .custom-scrollbar::-webkit-scrollbar-track {
-            background: rgba(0, 0, 0, 0.05);
+            background: rgba(255, 255, 255, 0.05);
             border-radius: 10px;
         }
         
@@ -275,10 +247,6 @@
             background: rgba(102, 126, 234, 0.8);
         }
         
-        .dark .custom-scrollbar::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.05);
-        }
-        
         .character-card {
             position: relative;
             overflow: hidden;
@@ -344,12 +312,8 @@
         }
         
         .stats-card {
-            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
-            border-left: 4px solid #667eea;
-        }
-        
-        .dark .stats-card {
             background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
+            border-left: 4px solid #667eea;
         }
         
         .badge {
@@ -376,21 +340,13 @@
         
         .badge-legend {
             background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
-            color: #1e293b;
-        }
-        
-        .dark .badge-legend {
             color: white;
         }
         
         .input-field {
             transition: all 0.3s ease;
-            background: rgba(255, 255, 255, 0.9);
-            border: 2px solid transparent;
-        }
-        
-        .dark .input-field {
             background: rgba(30, 41, 59, 0.9);
+            border: 2px solid transparent;
         }
         
         .input-field:focus {
@@ -444,10 +400,6 @@
             transform: translateX(30px);
         }
         
-        .countdown {
-            font-variant-numeric: tabular-nums;
-        }
-        
         .character-avatar {
             transition: all 0.3s ease;
             position: relative;
@@ -492,8 +444,8 @@
             bottom: 100%;
             left: 50%;
             transform: translateX(-50%);
-            background: rgba(0, 0, 0, 0.8);
-            color: white;
+            background: rgba(255, 255, 255, 0.9);
+            color: #1e293b;
             padding: 6px 12px;
             border-radius: 6px;
             font-size: 0.875rem;
@@ -509,46 +461,37 @@
             left: 50%;
             transform: translateX(-50%);
             border: 5px solid transparent;
-            border-top-color: rgba(0, 0, 0, 0.8);
+            border-top-color: rgba(255, 255, 255, 0.9);
             margin-bottom: -5px;
             z-index: 100;
         }
         
-        .dark .tooltip:hover::after {
-            background: rgba(255, 255, 255, 0.9);
-            color: #1e293b;
-        }
-        
-        .dark .tooltip:hover::before {
-            border-top-color: rgba(255, 255, 255, 0.9);
-        }
-        
         .grid-stack {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-            gap: 1rem;
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            gap: 1.25rem;
         }
         
         @media (min-width: 640px) {
             .grid-stack {
-                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
             }
         }
         
         @media (min-width: 768px) {
             .grid-stack {
-                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+                grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
             }
         }
         
         @media (min-width: 1024px) {
             .grid-stack {
-                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
             }
         }
         
         .result-container {
-            min-height: 300px;
+            min-height: 350px;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -563,12 +506,8 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
-            border-radius: 20px;
-        }
-        
-        .dark .result-container::before {
             background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+            border-radius: 20px;
         }
         
         .history-item {
@@ -635,10 +574,6 @@
         }
         
         .star-rating .empty {
-            color: #d1d5db;
-        }
-        
-        .dark .star-rating .empty {
             color: #4b5563;
         }
         
@@ -651,44 +586,93 @@
             stroke-dashoffset: 283;
             transition: stroke-dashoffset 0.5s ease;
         }
+
+        /* Улучшенные пропорции */
+        .card-padding {
+            padding: 1.75rem;
+        }
+        
+        .section-padding {
+            padding: 3rem;
+        }
+        
+        @media (max-width: 768px) {
+            .section-padding {
+                padding: 1.5rem;
+            }
+            
+            .card-padding {
+                padding: 1.25rem;
+            }
+        }
+        
+        .header-height {
+            min-height: auto;
+            padding: 2rem 0;
+        }
+        
+        .stat-card {
+            padding: 1.5rem;
+            border-radius: 1.25rem;
+        }
+        
+        .character-avatar-lg {
+            width: 110px;
+            height: 110px;
+        }
+        
+        .character-avatar-md {
+            width: 90px;
+            height: 90px;
+        }
+        
+        .boss-avatar {
+            width: 140px;
+            height: 140px;
+        }
+        
+        .button-padding {
+            padding: 1rem 2.5rem;
+        }
+        
+        .tab-button {
+            padding: 0.875rem 2rem;
+            border-radius: 1.25rem;
+        }
     </style>
 </head>
-<body class="light">
-    <div id="app-container" class="container mx-auto px-4 py-6 md:py-10 max-w-7xl">
+<body>
+    <div id="app-container" class="container mx-auto px-4 py-6 md:py-8 max-w-7xl">
         <!-- Header -->
-        <header class="text-center mb-12">
+        <header class="text-center mb-10">
             <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-6">
                 <!-- Left controls -->
                 <div class="flex items-center space-x-4">
-                    <button id="theme-toggle" class="p-3 rounded-2xl glass hover:scale-105 transition-transform duration-300 group tooltip" data-tooltip="Toggle theme">
-                        <i class="fas fa-moon text-gray-700 dark:text-yellow-300 group-hover:rotate-45 transition-transform text-xl"></i>
-                    </button>
-                    
                     <button id="language-toggle" class="p-3 rounded-2xl glass hover:scale-105 transition-transform duration-300 group tooltip" data-tooltip="Switch language">
                         <div class="flex flex-col items-center">
-                            <i class="fas fa-language text-gray-700 dark:text-blue-300 text-xl"></i>
+                            <i class="fas fa-language text-blue-300 text-xl"></i>
                             <span id="language-label" class="text-xs font-medium mt-1">EN</span>
                         </div>
                     </button>
                     
                     <div class="hidden md:flex items-center space-x-2 px-4 py-2 rounded-2xl glass">
-                        <i class="fas fa-user text-purple-500"></i>
-                        <span class="text-sm font-medium dark:text-gray-300">UID:</span>
-                        <span id="user-uid" class="text-sm font-mono bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-lg"></span>
+                        <i class="fas fa-user text-purple-400"></i>
+                        <span class="text-sm font-medium text-gray-300">UID:</span>
+                        <span id="user-uid" class="text-sm font-mono bg-gray-800 px-2 py-1 rounded-lg"></span>
                     </div>
                 </div>
                 
                 <!-- Center title -->
                 <div class="text-center order-first md:order-none">
-                    <div class="flex items-center justify-center mb-2">
-                        <div class="w-10 h-10 rounded-full gradient-primary flex items-center justify-center mr-3">
+                    <div class="flex items-center justify-center mb-3">
+                        <div class="w-12 h-12 rounded-full gradient-primary flex items-center justify-center mr-3">
                             <i class="fas fa-dice text-white text-xl"></i>
                         </div>
-                        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold bg-gradient-to-r from-purple-600 via-blue-500 to-purple-600 bg-clip-text text-transparent animate-pulse">
+                        <h1 class="text-4xl md:text-5xl lg:text-5xl font-bold bg-gradient-to-r from-purple-500 via-blue-400 to-purple-500 bg-clip-text text-transparent animate-pulse">
                             <span data-i18n="title">Genshin Roulette</span>
                         </h1>
                     </div>
-                    <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto" data-i18n="subtitle">
+                    <p class="text-lg text-gray-300 max-w-2xl mx-auto" data-i18n="subtitle">
                         Random characters, bosses & legends for your Genshin Impact adventure
                     </p>
                 </div>
@@ -696,15 +680,15 @@
                 <!-- Right controls -->
                 <div class="flex items-center space-x-4">
                     <button id="stats-toggle" class="p-3 rounded-2xl glass hover:scale-105 transition-transform duration-300 group tooltip" data-tooltip="Show stats">
-                        <i class="fas fa-chart-bar text-gray-700 dark:text-green-300 text-xl"></i>
+                        <i class="fas fa-chart-bar text-green-300 text-xl"></i>
                     </button>
                     
                     <button id="settings-toggle" class="p-3 rounded-2xl glass hover:scale-105 transition-transform duration-300 group tooltip" data-tooltip="Settings">
-                        <i class="fas fa-cog text-gray-700 dark:text-gray-300 group-hover:rotate-90 transition-transform text-xl"></i>
+                        <i class="fas fa-cog text-gray-300 group-hover:rotate-90 transition-transform text-xl"></i>
                     </button>
                     
                     <button id="help-toggle" class="p-3 rounded-2xl glass hover:scale-105 transition-transform duration-300 group tooltip" data-tooltip="Help">
-                        <i class="fas fa-question text-gray-700 dark:text-yellow-300 text-xl"></i>
+                        <i class="fas fa-question text-yellow-300 text-xl"></i>
                     </button>
                 </div>
             </div>
@@ -715,12 +699,12 @@
                     <div class="stats-card p-4 rounded-2xl">
                         <div class="flex items-center justify-between">
                             <div>
-                                <p class="text-sm text-gray-500 dark:text-gray-400" data-i18n="stats.characters">Characters</p>
-                                <p class="text-2xl font-bold dark:text-white" id="total-characters">120</p>
+                                <p class="text-sm text-gray-400" data-i18n="stats.characters">Characters</p>
+                                <p class="text-2xl font-bold text-white" id="total-characters">120</p>
                             </div>
-                            <i class="fas fa-users text-purple-500 text-2xl"></i>
+                            <i class="fas fa-users text-purple-400 text-2xl"></i>
                         </div>
-                        <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+                        <div class="mt-2 text-xs text-gray-400">
                             <span data-i18n="stats.owned">Owned:</span> <span id="owned-characters">0</span>
                         </div>
                     </div>
@@ -728,12 +712,12 @@
                     <div class="stats-card p-4 rounded-2xl">
                         <div class="flex items-center justify-between">
                             <div>
-                                <p class="text-sm text-gray-500 dark:text-gray-400" data-i18n="stats.worldBosses">World Bosses</p>
-                                <p class="text-2xl font-bold dark:text-white" id="total-world-bosses">40</p>
+                                <p class="text-sm text-gray-400" data-i18n="stats.worldBosses">World Bosses</p>
+                                <p class="text-2xl font-bold text-white" id="total-world-bosses">40</p>
                             </div>
-                            <i class="fas fa-dragon text-blue-500 text-2xl"></i>
+                            <i class="fas fa-dragon text-blue-400 text-2xl"></i>
                         </div>
-                        <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+                        <div class="mt-2 text-xs text-gray-400">
                             <span data-i18n="stats.available">Available:</span> <span id="available-world-bosses">40</span>
                         </div>
                     </div>
@@ -741,12 +725,12 @@
                     <div class="stats-card p-4 rounded-2xl">
                         <div class="flex items-center justify-between">
                             <div>
-                                <p class="text-sm text-gray-500 dark:text-gray-400" data-i18n="stats.weeklyBosses">Weekly Bosses</p>
-                                <p class="text-2xl font-bold dark:text-white" id="total-weekly-bosses">12</p>
+                                <p class="text-sm text-gray-400" data-i18n="stats.weeklyBosses">Weekly Bosses</p>
+                                <p class="text-2xl font-bold text-white" id="total-weekly-bosses">12</p>
                             </div>
-                            <i class="fas fa-crown text-yellow-500 text-2xl"></i>
+                            <i class="fas fa-crown text-yellow-400 text-2xl"></i>
                         </div>
-                        <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+                        <div class="mt-2 text-xs text-gray-400">
                             <span data-i18n="stats.available">Available:</span> <span id="available-weekly-bosses">12</span>
                         </div>
                     </div>
@@ -754,12 +738,12 @@
                     <div class="stats-card p-4 rounded-2xl">
                         <div class="flex items-center justify-between">
                             <div>
-                                <p class="text-sm text-gray-500 dark:text-gray-400" data-i18n="stats.legends">Legends</p>
-                                <p class="text-2xl font-bold dark:text-white" id="total-legends">30</p>
+                                <p class="text-sm text-gray-400" data-i18n="stats.legends">Legends</p>
+                                <p class="text-2xl font-bold text-white" id="total-legends">30</p>
                             </div>
-                            <i class="fas fa-landmark text-pink-500 text-2xl"></i>
+                            <i class="fas fa-landmark text-pink-400 text-2xl"></i>
                         </div>
-                        <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+                        <div class="mt-2 text-xs text-gray-400">
                             <span data-i18n="stats.available">Available:</span> <span id="available-legends">30</span>
                         </div>
                     </div>
@@ -768,23 +752,23 @@
 
             <!-- Category Tabs -->
             <div class="flex flex-wrap justify-center gap-3 mb-8">
-                <button data-category="characters" class="tab-btn px-6 py-3 rounded-2xl glass font-semibold transition-all duration-300 hover:scale-105 flex items-center group">
-                    <i class="fas fa-users mr-2 text-purple-500 group-hover:text-white transition-colors"></i>
+                <button data-category="characters" class="tab-btn px-6 py-3 rounded-2xl glass font-semibold transition-all duration-300 hover:scale-105 flex items-center group tab-button">
+                    <i class="fas fa-users mr-2 text-purple-400 group-hover:text-white transition-colors"></i>
                     <span data-i18n="tab.characters">Character Team</span>
                 </button>
                 
-                <button data-category="world-bosses" class="tab-btn px-6 py-3 rounded-2xl glass font-semibold transition-all duration-300 hover:scale-105 flex items-center group">
-                    <i class="fas fa-dragon mr-2 text-blue-500 group-hover:text-white transition-colors"></i>
+                <button data-category="world-bosses" class="tab-btn px-6 py-3 rounded-2xl glass font-semibold transition-all duration-300 hover:scale-105 flex items-center group tab-button">
+                    <i class="fas fa-dragon mr-2 text-blue-400 group-hover:text-white transition-colors"></i>
                     <span data-i18n="tab.worldBosses">World Bosses</span>
                 </button>
                 
-                <button data-category="weekly-bosses" class="tab-btn px-6 py-3 rounded-2xl glass font-semibold transition-all duration-300 hover:scale-105 flex items-center group">
-                    <i class="fas fa-crown mr-2 text-yellow-500 group-hover:text-white transition-colors"></i>
+                <button data-category="weekly-bosses" class="tab-btn px-6 py-3 rounded-2xl glass font-semibold transition-all duration-300 hover:scale-105 flex items-center group tab-button">
+                    <i class="fas fa-crown mr-2 text-yellow-400 group-hover:text-white transition-colors"></i>
                     <span data-i18n="tab.weeklyBosses">Weekly Bosses</span>
                 </button>
                 
-                <button data-category="local-legends" class="tab-btn px-6 py-3 rounded-2xl glass font-semibold transition-all duration-300 hover:scale-105 flex items-center group">
-                    <i class="fas fa-landmark mr-2 text-pink-500 group-hover:text-white transition-colors"></i>
+                <button data-category="local-legends" class="tab-btn px-6 py-3 rounded-2xl glass font-semibold transition-all duration-300 hover:scale-105 flex items-center group tab-button">
+                    <i class="fas fa-landmark mr-2 text-pink-400 group-hover:text-white transition-colors"></i>
                     <span data-i18n="tab.localLegends">Local Legends</span>
                 </button>
             </div>
@@ -794,14 +778,14 @@
             <!-- Settings Panel -->
             <div id="settings-panel" class="settings-panel glass rounded-3xl p-8 mb-10">
                 <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
-                    <h3 class="text-2xl font-bold dark:text-white flex items-center">
-                        <i class="fas fa-sliders-h mr-3 text-purple-500"></i>
+                    <h3 class="text-2xl font-bold text-white flex items-center">
+                        <i class="fas fa-sliders-h mr-3 text-purple-400"></i>
                         <span data-i18n="settings.title">Roulette Settings</span>
                     </h3>
                     
                     <div class="flex items-center space-x-4">
                         <div class="flex items-center space-x-2">
-                            <span class="text-sm font-medium dark:text-gray-300" data-i18n="settings.sound">Sound:</span>
+                            <span class="text-sm font-medium text-gray-300" data-i18n="settings.sound">Sound:</span>
                             <label class="toggle-switch">
                                 <input type="checkbox" id="sound-toggle" checked>
                                 <span class="toggle-slider"></span>
@@ -809,7 +793,7 @@
                         </div>
                         
                         <div class="flex items-center space-x-2">
-                            <span class="text-sm font-medium dark:text-gray-300" data-i18n="settings.animations">Animations:</span>
+                            <span class="text-sm font-medium text-gray-300" data-i18n="settings.animations">Animations:</span>
                             <label class="toggle-switch">
                                 <input type="checkbox" id="animations-toggle" checked>
                                 <span class="toggle-slider"></span>
@@ -821,8 +805,8 @@
                 <!-- Basic Settings -->
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-10">
                     <div class="card-gradient p-6 rounded-2xl">
-                        <label for="team-size" class="block text-sm font-semibold mb-3 dark:text-gray-300 flex items-center">
-                            <i class="fas fa-user-group mr-2 text-purple-500"></i>
+                        <label for="team-size" class="block text-sm font-semibold mb-3 text-gray-300 flex items-center">
+                            <i class="fas fa-user-group mr-2 text-purple-400"></i>
                             <span data-i18n="settings.teamSize">Team Size</span>
                         </label>
                         <select id="team-size" class="w-full p-3 rounded-xl input-field focus:ring-2 focus:ring-purple-500 transition-all">
@@ -834,8 +818,8 @@
                     </div>
                     
                     <div class="card-gradient p-6 rounded-2xl">
-                        <label for="animation-speed" class="block text-sm font-semibold mb-3 dark:text-gray-300 flex items-center">
-                            <i class="fas fa-tachometer-alt mr-2 text-blue-500"></i>
+                        <label for="animation-speed" class="block text-sm font-semibold mb-3 text-gray-300 flex items-center">
+                            <i class="fas fa-tachometer-alt mr-2 text-blue-400"></i>
                             <span data-i18n="settings.animationSpeed">Animation Speed</span>
                         </label>
                         <select id="animation-speed" class="w-full p-3 rounded-xl input-field focus:ring-2 focus:ring-purple-500 transition-all">
@@ -846,8 +830,8 @@
                     </div>
                     
                     <div class="card-gradient p-6 rounded-2xl">
-                        <label for="duplicates" class="block text-sm font-semibold mb-3 dark:text-gray-300 flex items-center">
-                            <i class="fas fa-copy mr-2 text-green-500"></i>
+                        <label for="duplicates" class="block text-sm font-semibold mb-3 text-gray-300 flex items-center">
+                            <i class="fas fa-copy mr-2 text-green-400"></i>
                             <span data-i18n="settings.duplicates">Allow Duplicates</span>
                         </label>
                         <select id="duplicates" class="w-full p-3 rounded-xl input-field focus:ring-2 focus:ring-purple-500 transition-all">
@@ -860,14 +844,14 @@
                 <!-- My Characters Section -->
                 <div class="mb-10">
                     <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
-                        <h3 class="text-2xl font-bold dark:text-white flex items-center">
-                            <i class="fas fa-user-check mr-3 text-green-500"></i>
+                        <h3 class="text-2xl font-bold text-white flex items-center">
+                            <i class="fas fa-user-check mr-3 text-green-400"></i>
                             <span data-i18n="settings.myCharacters">My Characters</span>
                         </h3>
                         
                         <div class="flex items-center space-x-3">
                             <div class="px-4 py-2 rounded-xl glass">
-                                <span class="text-sm font-medium dark:text-gray-300">
+                                <span class="text-sm font-medium text-gray-300">
                                     <span data-i18n="settings.selected">Selected:</span> 
                                     <span id="selected-count">0</span>/<span id="total-characters-count">120</span>
                                 </span>
@@ -883,7 +867,7 @@
                         </div>
                     </div>
                     
-                    <p class="text-gray-600 dark:text-gray-400 mb-6" data-i18n="settings.myCharactersDesc">
+                    <p class="text-gray-400 mb-6" data-i18n="settings.myCharactersDesc">
                         Select characters you own. If none selected, all characters will be used.
                     </p>
                     
@@ -920,11 +904,11 @@
                     
                     <!-- Progress Bar -->
                     <div class="mb-2">
-                        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-1">
+                        <div class="flex justify-between text-sm text-gray-400 mb-1">
                             <span data-i18n="settings.progress">Selection Progress</span>
                             <span id="selection-percentage">0%</span>
                         </div>
-                        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+                        <div class="w-full bg-gray-700 rounded-full h-2.5">
                             <div id="selection-progress-bar" class="progress-bar h-2.5 rounded-full"></div>
                         </div>
                     </div>
@@ -932,39 +916,39 @@
 
                 <!-- Boss Settings -->
                 <div>
-                    <h3 class="text-2xl font-bold mb-6 dark:text-white flex items-center">
-                        <i class="fas fa-dragon mr-3 text-red-500"></i>
+                    <h3 class="text-2xl font-bold mb-6 text-white flex items-center">
+                        <i class="fas fa-dragon mr-3 text-red-400"></i>
                         <span data-i18n="settings.bossSettings">Boss & Legend Settings</span>
                     </h3>
                     
-                    <p class="text-gray-600 dark:text-gray-400 mb-6" data-i18n="settings.bossSettingsDesc">
+                    <p class="text-gray-400 mb-6" data-i18n="settings.bossSettingsDesc">
                         Toggle which bosses and legends should be included in randomization
                     </p>
                     
                     <!-- Category Selector -->
                     <div class="mb-6">
                         <div class="card-gradient p-6 rounded-2xl">
-                            <label for="boss-category-select" class="block text-sm font-semibold mb-3 dark:text-gray-300 flex items-center">
-                                <i class="fas fa-filter mr-2 text-blue-500"></i>
+                            <label for="boss-category-select" class="block text-sm font-semibold mb-3 text-gray-300 flex items-center">
+                                <i class="fas fa-filter mr-2 text-blue-400"></i>
                                 <span data-i18n="settings.category">Category:</span>
                             </label>
                             <div class="flex flex-wrap gap-3">
                                 <button data-boss-category="world-bosses" class="boss-category-btn px-4 py-2 rounded-xl glass font-medium transition-all hover:scale-105 flex items-center">
-                                    <i class="fas fa-dragon mr-2 text-blue-500"></i>
+                                    <i class="fas fa-dragon mr-2 text-blue-400"></i>
                                     <span data-i18n="settings.categories.worldBosses">World Bosses</span>
-                                    <span class="ml-2 px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full" id="world-boss-count">40</span>
+                                    <span class="ml-2 px-2 py-1 text-xs bg-blue-900 text-blue-200 rounded-full" id="world-boss-count">40</span>
                                 </button>
                                 
                                 <button data-boss-category="weekly-bosses" class="boss-category-btn px-4 py-2 rounded-xl glass font-medium transition-all hover:scale-105 flex items-center">
-                                    <i class="fas fa-crown mr-2 text-yellow-500"></i>
+                                    <i class="fas fa-crown mr-2 text-yellow-400"></i>
                                     <span data-i18n="settings.categories.weeklyBosses">Weekly Bosses</span>
-                                    <span class="ml-2 px-2 py-1 text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-full" id="weekly-boss-count">12</span>
+                                    <span class="ml-2 px-2 py-1 text-xs bg-yellow-900 text-yellow-200 rounded-full" id="weekly-boss-count">12</span>
                                 </button>
                                 
                                 <button data-boss-category="local-legends" class="boss-category-btn px-4 py-2 rounded-xl glass font-medium transition-all hover:scale-105 flex items-center active">
-                                    <i class="fas fa-landmark mr-2 text-pink-500"></i>
+                                    <i class="fas fa-landmark mr-2 text-pink-400"></i>
                                     <span data-i18n="settings.categories.localLegends">Local Legends</span>
-                                    <span class="ml-2 px-2 py-1 text-xs bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200 rounded-full" id="legend-count">30</span>
+                                    <span class="ml-2 px-2 py-1 text-xs bg-pink-900 text-pink-200 rounded-full" id="legend-count">30</span>
                                 </button>
                             </div>
                         </div>
@@ -996,20 +980,20 @@
             </div>
 
             <!-- Characters Section -->
-            <section id="characters-section" class="mb-16 glass rounded-3xl p-8 relative overflow-hidden">
+            <section id="characters-section" class="mb-20 glass rounded-3xl p-8 relative overflow-hidden section-padding">
                 <!-- Background Decoration -->
                 <div class="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-full -translate-y-32 translate-x-32"></div>
                 <div class="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-tr from-blue-500/10 to-cyan-500/10 rounded-full translate-y-48 -translate-x-48"></div>
                 
                 <div class="relative z-10">
                     <div class="text-center mb-10">
-                        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full gradient-primary mb-6">
-                            <i class="fas fa-users text-white text-3xl"></i>
+                        <div class="inline-flex items-center justify-center w-24 h-24 rounded-full gradient-primary mb-6">
+                            <i class="fas fa-users text-white text-4xl"></i>
                         </div>
-                        <h2 class="text-4xl font-bold mb-4 dark:text-white" data-i18n="sections.characters.title">
+                        <h2 class="text-5xl font-bold mb-4 text-white" data-i18n="sections.characters.title">
                             Character Team Roulette
                         </h2>
-                        <p class="text-gray-600 dark:text-gray-300 text-lg max-w-2xl mx-auto" data-i18n="sections.characters.subtitle">
+                        <p class="text-gray-300 text-lg max-w-2xl mx-auto" data-i18n="sections.characters.subtitle">
                             Spin to get a random team of characters for your next adventure
                         </p>
                     </div>
@@ -1017,38 +1001,38 @@
                     <!-- Team Configuration -->
                     <div class="flex flex-col md:flex-row justify-between items-center mb-10 gap-6">
                         <div class="flex-1 w-full">
-                            <div class="card-gradient p-6 rounded-2xl">
+                            <div class="card-gradient p-6 rounded-2xl card-padding">
                                 <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                                     <div>
-                                        <h4 class="font-bold text-lg dark:text-white mb-2" data-i18n="sections.characters.config">Team Configuration</h4>
-                                        <p class="text-gray-600 dark:text-gray-400 text-sm" data-i18n="sections.characters.configDesc">
+                                        <h4 class="font-bold text-lg text-white mb-2" data-i18n="sections.characters.config">Team Configuration</h4>
+                                        <p class="text-gray-400 text-sm" data-i18n="sections.characters.configDesc">
                                             Configure your team before spinning
                                         </p>
                                     </div>
                                     
-                                    <div class="flex items-center space-x-4">
+                                    <div class="flex items-center space-x-6">
                                         <div class="text-center">
-                                            <div class="text-2xl font-bold dark:text-white" id="current-team-size">4</div>
-                                            <div class="text-xs text-gray-500 dark:text-gray-400" data-i18n="sections.characters.teamSize">Team Size</div>
+                                            <div class="text-3xl font-bold text-white" id="current-team-size">4</div>
+                                            <div class="text-xs text-gray-400" data-i18n="sections.characters.teamSize">Team Size</div>
                                         </div>
                                         
                                         <div class="text-center">
-                                            <div class="text-2xl font-bold dark:text-white" id="available-chars">120</div>
-                                            <div class="text-xs text-gray-500 dark:text-gray-400" data-i18n="sections.characters.available">Available</div>
+                                            <div class="text-3xl font-bold text-white" id="available-chars">120</div>
+                                            <div class="text-xs text-gray-400" data-i18n="sections.characters.available">Available</div>
                                         </div>
                                         
                                         <div class="text-center">
-                                            <div class="text-2xl font-bold dark:text-white" id="owned-chars">0</div>
-                                            <div class="text-xs text-gray-500 dark:text-gray-400" data-i18n="sections.characters.owned">Owned</div>
+                                            <div class="text-3xl font-bold text-white" id="owned-chars">0</div>
+                                            <div class="text-xs text-gray-400" data-i18n="sections.characters.owned">Owned</div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         
-                        <div class="flex-shrink-0">
+                        <div class="flex-shrink-0 mt-4 md:mt-0">
                             <button id="spin-characters-button" 
-                                    class="px-12 py-5 rounded-2xl gradient-primary text-white font-bold text-xl hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-xl relative overflow-hidden group pulse">
+                                    class="px-14 py-6 rounded-2xl gradient-primary text-white font-bold text-xl hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-xl relative overflow-hidden group pulse button-padding">
                                 <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                                 <div class="relative z-10 flex items-center justify-center">
                                     <i class="fas fa-dice-d20 mr-3 text-2xl"></i>
@@ -1061,11 +1045,11 @@
                     <!-- Result Area -->
                     <div id="characters-result" class="result-container rounded-2xl p-8 mb-8">
                         <div class="text-center max-w-md mx-auto">
-                            <div class="text-6xl mb-6 float-animation">🎮</div>
-                            <p id="characters-placeholder" class="text-gray-500 dark:text-gray-400 text-xl mb-4" data-i18n="placeholders.characters">
+                            <div class="text-7xl mb-6 float-animation">🎮</div>
+                            <p id="characters-placeholder" class="text-gray-400 text-xl mb-4" data-i18n="placeholders.characters">
                                 Your random team will appear here
                             </p>
-                            <p class="text-gray-400 dark:text-gray-500 text-sm" data-i18n="placeholders.charactersHint">
+                            <p class="text-gray-500 text-sm" data-i18n="placeholders.charactersHint">
                                 Click the "Spin Team!" button to generate a random team
                             </p>
                         </div>
@@ -1098,27 +1082,27 @@
             </section>
 
             <!-- World Bosses Section -->
-            <section id="world-bosses-section" class="mb-16 glass rounded-3xl p-8 hidden relative overflow-hidden">
+            <section id="world-bosses-section" class="mb-20 glass rounded-3xl p-8 hidden relative overflow-hidden section-padding">
                 <!-- Background Decoration -->
                 <div class="absolute top-0 left-0 w-64 h-64 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-full -translate-y-32 -translate-x-32"></div>
                 <div class="absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-tr from-purple-500/10 to-pink-500/10 rounded-full translate-y-48 translate-x-48"></div>
                 
                 <div class="relative z-10">
                     <div class="text-center mb-10">
-                        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full gradient-accent mb-6">
-                            <i class="fas fa-dragon text-white text-3xl"></i>
+                        <div class="inline-flex items-center justify-center w-24 h-24 rounded-full gradient-accent mb-6">
+                            <i class="fas fa-dragon text-white text-4xl"></i>
                         </div>
-                        <h2 class="text-4xl font-bold mb-4 dark:text-white" data-i18n="sections.worldBosses.title">
+                        <h2 class="text-5xl font-bold mb-4 text-white" data-i18n="sections.worldBosses.title">
                             World Boss Roulette
                         </h2>
-                        <p class="text-gray-600 dark:text-gray-300 text-lg max-w-2xl mx-auto" data-i18n="sections.worldBosses.subtitle">
+                        <p class="text-gray-300 text-lg max-w-2xl mx-auto" data-i18n="sections.worldBosses.subtitle">
                             Challenge a random world boss and test your skills
                         </p>
                     </div>
                     
                     <div class="flex justify-center mb-10">
                         <button id="spin-world-boss-button" 
-                                class="px-12 py-5 rounded-2xl gradient-accent text-white font-bold text-xl hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-xl relative overflow-hidden group">
+                                class="px-14 py-6 rounded-2xl gradient-accent text-white font-bold text-xl hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-xl relative overflow-hidden group button-padding">
                             <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                             <div class="relative z-10 flex items-center justify-center">
                                 <i class="fas fa-dragon mr-3 text-2xl"></i>
@@ -1129,11 +1113,11 @@
                     
                     <div id="world-boss-result" class="result-container rounded-2xl p-8 mb-8">
                         <div class="text-center max-w-md mx-auto">
-                            <div class="text-6xl mb-6 float-animation">🐉</div>
-                            <p id="world-boss-placeholder" class="text-gray-500 dark:text-gray-400 text-xl mb-4" data-i18n="placeholders.worldBoss">
+                            <div class="text-7xl mb-6 float-animation">🐉</div>
+                            <p id="world-boss-placeholder" class="text-gray-400 text-xl mb-4" data-i18n="placeholders.worldBoss">
                                 Random world boss will appear here
                             </p>
-                            <p class="text-gray-400 dark:text-gray-500 text-sm" data-i18n="placeholders.worldBossHint">
+                            <p class="text-gray-500 text-sm" data-i18n="placeholders.worldBossHint">
                                 Click the "Spin Boss!" button to generate a random world boss
                             </p>
                         </div>
@@ -1151,27 +1135,27 @@
             </section>
 
             <!-- Weekly Bosses Section -->
-            <section id="weekly-bosses-section" class="mb-16 glass rounded-3xl p-8 hidden relative overflow-hidden">
+            <section id="weekly-bosses-section" class="mb-20 glass rounded-3xl p-8 hidden relative overflow-hidden section-padding">
                 <!-- Background Decoration -->
                 <div class="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-yellow-500/10 to-orange-500/10 rounded-full -translate-y-32 translate-x-32"></div>
                 <div class="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-tr from-red-500/10 to-pink-500/10 rounded-full translate-y-48 -translate-x-48"></div>
                 
                 <div class="relative z-10">
                     <div class="text-center mb-10">
-                        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full gradient-gold mb-6">
-                            <i class="fas fa-crown text-white text-3xl"></i>
+                        <div class="inline-flex items-center justify-center w-24 h-24 rounded-full gradient-gold mb-6">
+                            <i class="fas fa-crown text-white text-4xl"></i>
                         </div>
-                        <h2 class="text-4xl font-bold mb-4 dark:text-white" data-i18n="sections.weeklyBosses.title">
+                        <h2 class="text-5xl font-bold mb-4 text-white" data-i18n="sections.weeklyBosses.title">
                             Weekly Boss Roulette
                         </h2>
-                        <p class="text-gray-600 dark:text-gray-300 text-lg max-w-2xl mx-auto" data-i18n="sections.weeklyBosses.subtitle">
+                        <p class="text-gray-300 text-lg max-w-2xl mx-auto" data-i18n="sections.weeklyBosses.subtitle">
                             Face a random weekly boss for valuable rewards
                         </p>
                     </div>
                     
                     <div class="flex justify-center mb-10">
                         <button id="spin-weekly-boss-button" 
-                                class="px-12 py-5 rounded-2xl gradient-gold text-white font-bold text-xl hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-xl relative overflow-hidden group">
+                                class="px-14 py-6 rounded-2xl gradient-gold text-white font-bold text-xl hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-xl relative overflow-hidden group button-padding">
                             <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                             <div class="relative z-10 flex items-center justify-center">
                                 <i class="fas fa-crown mr-3 text-2xl"></i>
@@ -1182,11 +1166,11 @@
                     
                     <div id="weekly-boss-result" class="result-container rounded-2xl p-8 mb-8">
                         <div class="text-center max-w-md mx-auto">
-                            <div class="text-6xl mb-6 float-animation">⚔️</div>
-                            <p id="weekly-boss-placeholder" class="text-gray-500 dark:text-gray-400 text-xl mb-4" data-i18n="placeholders.weeklyBoss">
+                            <div class="text-7xl mb-6 float-animation">⚔️</div>
+                            <p id="weekly-boss-placeholder" class="text-gray-400 text-xl mb-4" data-i18n="placeholders.weeklyBoss">
                                 Random weekly boss will appear here
                             </p>
-                            <p class="text-gray-400 dark:text-gray-500 text-sm" data-i18n="placeholders.weeklyBossHint">
+                            <p class="text-gray-500 text-sm" data-i18n="placeholders.weeklyBossHint">
                                 Click the "Spin Weekly Boss!" button to generate a random weekly boss
                             </p>
                         </div>
@@ -1204,27 +1188,27 @@
             </section>
 
             <!-- Local Legends Section -->
-            <section id="local-legends-section" class="mb-16 glass rounded-3xl p-8 hidden relative overflow-hidden">
+            <section id="local-legends-section" class="mb-20 glass rounded-3xl p-8 hidden relative overflow-hidden section-padding">
                 <!-- Background Decoration -->
                 <div class="absolute top-0 left-0 w-64 h-64 bg-gradient-to-br from-pink-500/10 to-purple-500/10 rounded-full -translate-y-32 -translate-x-32"></div>
                 <div class="absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-tr from-green-500/10 to-cyan-500/10 rounded-full translate-y-48 translate-x-48"></div>
                 
                 <div class="relative z-10">
                     <div class="text-center mb-10">
-                        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full gradient-purple mb-6">
-                            <i class="fas fa-landmark text-white text-3xl"></i>
+                        <div class="inline-flex items-center justify-center w-24 h-24 rounded-full gradient-purple mb-6">
+                            <i class="fas fa-landmark text-white text-4xl"></i>
                         </div>
-                        <h2 class="text-4xl font-bold mb-4 dark:text-white" data-i18n="sections.localLegends.title">
+                        <h2 class="text-5xl font-bold mb-4 text-white" data-i18n="sections.localLegends.title">
                             Local Legends Roulette
                         </h2>
-                        <p class="text-gray-600 dark:text-gray-300 text-lg max-w-2xl mx-auto" data-i18n="sections.localLegends.subtitle">
+                        <p class="text-gray-300 text-lg max-w-2xl mx-auto" data-i18n="sections.localLegends.subtitle">
                             Discover and challenge random local legends across Teyvat
                         </p>
                     </div>
                     
                     <div class="flex justify-center mb-10">
                         <button id="spin-legend-button" 
-                                class="px-12 py-5 rounded-2xl gradient-purple text-white font-bold text-xl hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-xl relative overflow-hidden group">
+                                class="px-14 py-6 rounded-2xl gradient-purple text-white font-bold text-xl hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-xl relative overflow-hidden group button-padding">
                             <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                             <div class="relative z-10 flex items-center justify-center">
                                 <i class="fas fa-landmark mr-3 text-2xl"></i>
@@ -1235,11 +1219,11 @@
                     
                     <div id="legend-result" class="result-container rounded-2xl p-8 mb-8">
                         <div class="text-center max-w-md mx-auto">
-                            <div class="text-6xl mb-6 float-animation">🏆</div>
-                            <p id="legend-placeholder" class="text-gray-500 dark:text-gray-400 text-xl mb-4" data-i18n="placeholders.legend">
+                            <div class="text-7xl mb-6 float-animation">🏆</div>
+                            <p id="legend-placeholder" class="text-gray-400 text-xl mb-4" data-i18n="placeholders.legend">
                                 Random local legend will appear here
                             </p>
-                            <p class="text-gray-400 dark:text-gray-500 text-sm" data-i18n="placeholders.legendHint">
+                            <p class="text-gray-500 text-sm" data-i18n="placeholders.legendHint">
                                 Click the "Spin Legend!" button to discover a random local legend
                             </p>
                         </div>
@@ -1257,18 +1241,18 @@
             </section>
 
             <!-- History Section -->
-            <section id="history-section" class="glass rounded-3xl p-8 relative overflow-hidden">
+            <section id="history-section" class="glass rounded-3xl p-8 relative overflow-hidden section-padding">
                 <!-- Background Decoration -->
                 <div class="absolute top-0 right-0 w-48 h-48 bg-gradient-to-br from-gray-500/10 to-gray-700/10 rounded-full -translate-y-24 translate-x-24"></div>
                 
                 <div class="relative z-10">
                     <div class="flex flex-col md:flex-row justify-between items-center mb-10 gap-6">
                         <div>
-                            <h2 class="text-4xl font-bold dark:text-white flex items-center">
-                                <i class="fas fa-history mr-4 text-purple-500"></i>
+                            <h2 class="text-5xl font-bold text-white flex items-center">
+                                <i class="fas fa-history mr-4 text-purple-400"></i>
                                 <span data-i18n="history.title">History</span>
                             </h2>
-                            <p class="text-gray-600 dark:text-gray-400 mt-2" data-i18n="history.subtitle">
+                            <p class="text-gray-400 mt-2" data-i18n="history.subtitle">
                                 Your recent random selections
                             </p>
                         </div>
@@ -1303,22 +1287,22 @@
                             </button>
                             
                             <button data-history-filter="team" class="history-filter-btn px-4 py-2 rounded-xl glass font-medium transition-all hover:scale-105">
-                                <i class="fas fa-users mr-2 text-purple-500"></i>
+                                <i class="fas fa-users mr-2 text-purple-400"></i>
                                 <span data-i18n="history.filters.teams">Teams</span>
                             </button>
                             
                             <button data-history-filter="world-boss" class="history-filter-btn px-4 py-2 rounded-xl glass font-medium transition-all hover:scale-105">
-                                <i class="fas fa-dragon mr-2 text-blue-500"></i>
+                                <i class="fas fa-dragon mr-2 text-blue-400"></i>
                                 <span data-i18n="history.filters.worldBosses">World Bosses</span>
                             </button>
                             
                             <button data-history-filter="weekly-boss" class="history-filter-btn px-4 py-2 rounded-xl glass font-medium transition-all hover:scale-105">
-                                <i class="fas fa-crown mr-2 text-yellow-500"></i>
+                                <i class="fas fa-crown mr-2 text-yellow-400"></i>
                                 <span data-i18n="history.filters.weeklyBosses">Weekly Bosses</span>
                             </button>
                             
                             <button data-history-filter="legend" class="history-filter-btn px-4 py-2 rounded-xl glass font-medium transition-all hover:scale-105">
-                                <i class="fas fa-landmark mr-2 text-pink-500"></i>
+                                <i class="fas fa-landmark mr-2 text-pink-400"></i>
                                 <span data-i18n="history.filters.legends">Legends</span>
                             </button>
                         </div>
@@ -1326,32 +1310,32 @@
                     
                     <!-- History Content -->
                     <div id="history-content" class="space-y-6">
-                        <p id="history-placeholder" class="text-center text-gray-500 dark:text-gray-400 text-lg py-12" data-i18n="placeholders.history">
+                        <p id="history-placeholder" class="text-center text-gray-400 text-lg py-12" data-i18n="placeholders.history">
                             Your random selections history will appear here
                         </p>
                     </div>
                     
                     <!-- History Stats -->
-                    <div class="mt-10 pt-8 border-t border-gray-200 dark:border-gray-700">
+                    <div class="mt-10 pt-8 border-t border-gray-700">
                         <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                            <div class="text-center p-4 rounded-2xl glass">
-                                <div class="text-2xl font-bold dark:text-white" id="history-total">0</div>
-                                <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="history.stats.total">Total Entries</div>
+                            <div class="text-center p-4 rounded-2xl glass stat-card">
+                                <div class="text-2xl font-bold text-white" id="history-total">0</div>
+                                <div class="text-sm text-gray-400" data-i18n="history.stats.total">Total Entries</div>
                             </div>
                             
-                            <div class="text-center p-4 rounded-2xl glass">
-                                <div class="text-2xl font-bold dark:text-white" id="history-teams">0</div>
-                                <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="history.stats.teams">Teams</div>
+                            <div class="text-center p-4 rounded-2xl glass stat-card">
+                                <div class="text-2xl font-bold text-white" id="history-teams">0</div>
+                                <div class="text-sm text-gray-400" data-i18n="history.stats.teams">Teams</div>
                             </div>
                             
-                            <div class="text-center p-4 rounded-2xl glass">
-                                <div class="text-2xl font-bold dark:text-white" id="history-bosses">0</div>
-                                <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="history.stats.bosses">Bosses</div>
+                            <div class="text-center p-4 rounded-2xl glass stat-card">
+                                <div class="text-2xl font-bold text-white" id="history-bosses">0</div>
+                                <div class="text-sm text-gray-400" data-i18n="history.stats.bosses">Bosses</div>
                             </div>
                             
-                            <div class="text-center p-4 rounded-2xl glass">
-                                <div class="text-2xl font-bold dark:text-white" id="history-legends">0</div>
-                                <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="history.stats.legends">Legends</div>
+                            <div class="text-center p-4 rounded-2xl glass stat-card">
+                                <div class="text-2xl font-bold text-white" id="history-legends">0</div>
+                                <div class="text-sm text-gray-400" data-i18n="history.stats.legends">Legends</div>
                             </div>
                         </div>
                     </div>
@@ -1360,16 +1344,16 @@
         </main>
         
         <!-- Footer -->
-        <footer class="text-center mt-16 pt-10 border-t border-gray-200 dark:border-gray-700">
+        <footer class="text-center mt-20 pt-10 border-t border-gray-700">
             <div class="flex flex-col lg:flex-row justify-between items-center mb-8 gap-8">
                 <div class="text-left">
                     <div class="flex items-center mb-4">
-                        <div class="w-10 h-10 rounded-full gradient-primary flex items-center justify-center mr-3">
+                        <div class="w-12 h-12 rounded-full gradient-primary flex items-center justify-center mr-3">
                             <i class="fas fa-dice text-white"></i>
                         </div>
-                        <h3 class="text-xl font-bold dark:text-white">Genshin Roulette</h3>
+                        <h3 class="text-xl font-bold text-white">Genshin Roulette</h3>
                     </div>
-                    <p class="text-sm text-gray-600 dark:text-gray-400 max-w-md" data-i18n="footer.disclaimer">
+                    <p class="text-sm text-gray-400 max-w-md" data-i18n="footer.disclaimer">
                         This is a fan-made project. Not affiliated with or endorsed by HoYoverse.
                     </p>
                 </div>
@@ -1378,30 +1362,30 @@
                 </div>
             </div>
             
-            <div class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-gray-200 dark:border-gray-700 gap-4">
+            <div class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-gray-700 gap-4">
                 <div class="flex items-center space-x-6">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
+                    <span class="text-sm text-gray-400">
                         <span data-i18n="footer.version">Version:</span> <span class="font-mono">2.1.0</span>
                     </span>
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
+                    <span class="text-sm text-gray-400">
                         <span data-i18n="footer.characters">Characters:</span> <span class="font-bold">120</span>
                     </span>
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
+                    <span class="text-sm text-gray-400">
                         <span data-i18n="footer.bosses">Bosses:</span> <span class="font-bold">82</span>
                     </span>
                 </div>
                 
                 <div class="flex items-center space-x-4">
                     <button id="back-to-top" class="p-2 rounded-full glass hover:scale-105 transition-transform tooltip" data-tooltip="Back to top">
-                        <i class="fas fa-arrow-up text-gray-700 dark:text-gray-300"></i>
+                        <i class="fas fa-arrow-up text-gray-300"></i>
                     </button>
                     
                     <a href="#" class="p-2 rounded-full glass hover:scale-105 transition-transform tooltip" data-tooltip="GitHub">
-                        <i class="fab fa-github text-gray-700 dark:text-gray-300"></i>
+                        <i class="fab fa-github text-gray-300"></i>
                     </a>
                     
                     <a href="#" class="p-2 rounded-full glass hover:scale-105 transition-transform tooltip" data-tooltip="Discord">
-                        <i class="fab fa-discord text-gray-700 dark:text-gray-300"></i>
+                        <i class="fab fa-discord text-gray-300"></i>
                     </a>
                 </div>
             </div>
@@ -1414,8 +1398,8 @@
             <div class="w-20 h-20 rounded-full gradient-danger flex items-center justify-center mx-auto mb-6">
                 <i class="fas fa-exclamation text-white text-3xl"></i>
             </div>
-            <h3 class="text-2xl font-bold mb-4 dark:text-white" data-i18n="modals.confirm.title">Confirmation</h3>
-            <p id="confirm-modal-message" class="text-gray-600 dark:text-gray-300 mb-8 text-lg" data-i18n="modals.confirm.message">
+            <h3 class="text-2xl font-bold mb-4 text-white" data-i18n="modals.confirm.title">Confirmation</h3>
+            <p id="confirm-modal-message" class="text-gray-300 mb-8 text-lg" data-i18n="modals.confirm.message">
                 Are you sure you want to clear history?
             </p>
             <div class="flex justify-center gap-4">
@@ -1434,12 +1418,12 @@
     <div id="full-history-modal" class="fixed inset-0 bg-black/70 z-50 flex justify-center items-center hidden p-4 modal-backdrop">
         <div class="glass rounded-3xl w-full max-w-6xl h-[90vh] flex flex-col p-8 modal-content">
             <div class="flex justify-between items-center mb-8">
-                <h2 class="text-4xl font-bold dark:text-white flex items-center">
-                    <i class="fas fa-history mr-4 text-purple-500"></i>
+                <h2 class="text-4xl font-bold text-white flex items-center">
+                    <i class="fas fa-history mr-4 text-purple-400"></i>
                     <span data-i18n="modals.fullHistory.title">Full History</span>
                 </h2>
                 <button id="full-history-modal-close" class="p-3 rounded-2xl glass hover:scale-105 transition-transform">
-                    <i class="fas fa-times text-gray-700 dark:text-gray-300 text-xl"></i>
+                    <i class="fas fa-times text-gray-300 text-xl"></i>
                 </button>
             </div>
             
@@ -1447,7 +1431,7 @@
                 <!-- History items will be dynamically added here -->
             </div>
             
-            <div class="text-center mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
+            <div class="text-center mt-8 pt-6 border-t border-gray-700">
                 <button id="full-history-modal-close-bottom" class="px-8 py-3 rounded-2xl glass font-semibold hover:scale-105 transition-transform flex items-center mx-auto">
                     <i class="fas fa-times mr-3"></i>
                     <span data-i18n="buttons.close">Close</span>
@@ -1460,25 +1444,25 @@
     <div id="help-modal" class="fixed inset-0 bg-black/70 z-50 flex justify-center items-center hidden p-4 modal-backdrop">
         <div class="glass rounded-3xl w-full max-w-4xl h-[80vh] flex flex-col p-8 modal-content">
             <div class="flex justify-between items-center mb-8">
-                <h2 class="text-4xl font-bold dark:text-white flex items-center">
-                    <i class="fas fa-question-circle mr-4 text-yellow-500"></i>
+                <h2 class="text-4xl font-bold text-white flex items-center">
+                    <i class="fas fa-question-circle mr-4 text-yellow-400"></i>
                     <span data-i18n="modals.help.title">Help & Guide</span>
                 </h2>
                 <button id="help-modal-close" class="p-3 rounded-2xl glass hover:scale-105 transition-transform">
-                    <i class="fas fa-times text-gray-700 dark:text-gray-300 text-xl"></i>
+                    <i class="fas fa-times text-gray-300 text-xl"></i>
                 </button>
             </div>
             
             <div class="flex-1 overflow-y-auto pr-4 space-y-8 custom-scrollbar">
                 <div>
-                    <h3 class="text-2xl font-bold dark:text-white mb-4" data-i18n="help.gettingStarted">Getting Started</h3>
+                    <h3 class="text-2xl font-bold text-white mb-4" data-i18n="help.gettingStarted">Getting Started</h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div class="card-gradient p-6 rounded-2xl">
                             <div class="w-12 h-12 rounded-full gradient-primary flex items-center justify-center mb-4">
                                 <i class="fas fa-users text-white"></i>
                             </div>
-                            <h4 class="font-bold text-lg dark:text-white mb-2" data-i18n="help.selectCharacters">Select Your Characters</h4>
-                            <p class="text-gray-600 dark:text-gray-400" data-i18n="help.selectCharactersDesc">
+                            <h4 class="font-bold text-lg text-white mb-2" data-i18n="help.selectCharacters">Select Your Characters</h4>
+                            <p class="text-gray-400" data-i18n="help.selectCharactersDesc">
                                 Go to Settings → My Characters and select all characters you own. This ensures the roulette only uses characters you have.
                             </p>
                         </div>
@@ -1487,8 +1471,8 @@
                             <div class="w-12 h-12 rounded-full gradient-accent flex items-center justify-center mb-4">
                                 <i class="fas fa-sliders-h text-white"></i>
                             </div>
-                            <h4 class="font-bold text-lg dark:text-white mb-2" data-i18n="help.configureSettings">Configure Settings</h4>
-                            <p class="text-gray-600 dark:text-gray-400" data-i18n="help.configureSettingsDesc">
+                            <h4 class="font-bold text-lg text-white mb-2" data-i18n="help.configureSettings">Configure Settings</h4>
+                            <p class="text-gray-400" data-i18n="help.configureSettingsDesc">
                                 Adjust team size, animation speed, and boss preferences in the settings panel to customize your experience.
                             </p>
                         </div>
@@ -1496,34 +1480,34 @@
                 </div>
                 
                 <div>
-                    <h3 class="text-2xl font-bold dark:text-white mb-4" data-i18n="help.features">Features</h3>
+                    <h3 class="text-2xl font-bold text-white mb-4" data-i18n="help.features">Features</h3>
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                         <div class="card-gradient p-6 rounded-2xl">
-                            <h4 class="font-bold text-lg dark:text-white mb-2 flex items-center">
-                                <i class="fas fa-users mr-2 text-purple-500"></i>
+                            <h4 class="font-bold text-lg text-white mb-2 flex items-center">
+                                <i class="fas fa-users mr-2 text-purple-400"></i>
                                 <span data-i18n="help.teamRoulette">Team Roulette</span>
                             </h4>
-                            <p class="text-gray-600 dark:text-gray-400 text-sm" data-i18n="help.teamRouletteDesc">
+                            <p class="text-gray-400 text-sm" data-i18n="help.teamRouletteDesc">
                                 Generate random teams of 1-4 characters for new gameplay challenges.
                             </p>
                         </div>
                         
                         <div class="card-gradient p-6 rounded-2xl">
-                            <h4 class="font-bold text-lg dark:text-white mb-2 flex items-center">
-                                <i class="fas fa-dragon mr-2 text-blue-500"></i>
+                            <h4 class="font-bold text-lg text-white mb-2 flex items-center">
+                                <i class="fas fa-dragon mr-2 text-blue-400"></i>
                                 <span data-i18n="help.bossRoulette">Boss Roulette</span>
                             </h4>
-                            <p class="text-gray-600 dark:text-gray-400 text-sm" data-i18n="help.bossRouletteDesc">
+                            <p class="text-gray-400 text-sm" data-i18n="help.bossRouletteDesc">
                                 Get random world bosses, weekly bosses, or local legends to challenge.
                             </p>
                         </div>
                         
                         <div class="card-gradient p-6 rounded-2xl">
-                            <h4 class="font-bold text-lg dark:text-white mb-2 flex items-center">
-                                <i class="fas fa-history mr-2 text-green-500"></i>
+                            <h4 class="font-bold text-lg text-white mb-2 flex items-center">
+                                <i class="fas fa-history mr-2 text-green-400"></i>
                                 <span data-i18n="help.history">History & Stats</span>
                             </h4>
-                            <p class="text-gray-600 dark:text-gray-400 text-sm" data-i18n="help.historyDesc">
+                            <p class="text-gray-400 text-sm" data-i18n="help.historyDesc">
                                 Track all your generated teams and bosses with detailed statistics.
                             </p>
                         </div>
@@ -1531,31 +1515,31 @@
                 </div>
                 
                 <div>
-                    <h3 class="text-2xl font-bold dark:text-white mb-4" data-i18n="help.tips">Tips & Tricks</h3>
+                    <h3 class="text-2xl font-bold text-white mb-4" data-i18n="help.tips">Tips & Tricks</h3>
                     <div class="space-y-4">
                         <div class="flex items-start">
-                            <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-4 flex-shrink-0">
-                                <i class="fas fa-lightbulb text-green-500"></i>
+                            <div class="w-8 h-8 rounded-full bg-green-900 flex items-center justify-center mr-4 flex-shrink-0">
+                                <i class="fas fa-lightbulb text-green-400"></i>
                             </div>
-                            <p class="text-gray-600 dark:text-gray-400" data-i18n="help.tip1">
+                            <p class="text-gray-400" data-i18n="help.tip1">
                                 Use the "My Characters" feature to limit the roulette to only characters you own for more realistic teams.
                             </p>
                         </div>
                         
                         <div class="flex items-start">
-                            <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-4 flex-shrink-0">
-                                <i class="fas fa-lightbulb text-blue-500"></i>
+                            <div class="w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center mr-4 flex-shrink-0">
+                                <i class="fas fa-lightbulb text-blue-400"></i>
                             </div>
-                            <p class="text-gray-600 dark:text-gray-400" data-i18n="help.tip2">
+                            <p class="text-gray-400" data-i18n="help.tip2">
                                 Save your favorite teams with custom names for quick reference later.
                             </p>
                         </div>
                         
                         <div class="flex items-start">
-                            <div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-4 flex-shrink-0">
-                                <i class="fas fa-lightbulb text-purple-500"></i>
+                            <div class="w-8 h-8 rounded-full bg-purple-900 flex items-center justify-center mr-4 flex-shrink-0">
+                                <i class="fas fa-lightbulb text-purple-400"></i>
                             </div>
-                            <p class="text-gray-600 dark:text-gray-400" data-i18n="help.tip3">
+                            <p class="text-gray-400" data-i18n="help.tip3">
                                 Enable sound effects for a more immersive spinning experience.
                             </p>
                         </div>
@@ -2039,8 +2023,8 @@
                 { "name": "Говорящая с духами отшельница", "icon": "pic/WorldBoss/Govoryashchaya-s-dukhami-otshelnitsa.webp" },
                 { "name": "Сумрачная папилла", "icon": "pic/WorldBoss/Sumrachnaya-papilla.webp" },
                 { "name": "Автоматон: Конфигуратор", "icon": "pic/WorldBoss/Avtomaton-tainstvennogo-istochnika.webp" },
-                { "name": "Прожорливый Горный король-юмказавр", "icon": "pic/WorldBoss/Prozhorlivyy-gornyy-korol-yumkazavr.webp" },
-                { "name": "Кукузавр-тиран золотого пламени", "icon": "pic/WorldBoss/Prozhorlivyi_-Gornyi_-korol_yumkazavr.webp" },
+                { "name": "Прожорливый Горный корень-юмказавр", "icon": "pic/WorldBoss/Prozhorlivyy-gornyy-koren-yumkazavr.webp" },
+                { "name": "Кукузавр-тиран золотого пламени", "icon": "pic/WorldBoss/Prozhorlivyi_-Gornyi_-koren_yumkazavr.webp" },
                 { "name": "Легат големов", "icon": "pic/WorldBoss/Kapitan-golemov.webp" },
                 { "name": "Суаньни-отшельник", "icon": "pic/WorldBoss/Suanni_otshelnik.webp" },
                 { "name": "Гидротульпа", "icon": "pic/WorldBoss/Probuzhdyennaya-zhizn.webp" },
@@ -2062,7 +2046,7 @@
                 { "name": "Манифестация грома", "icon": "pic/WorldBoss/Elektro-Okeanid.png" },
                 { "name": "Бесконечный механический массив", "icon": "pic/WorldBoss/Beskonechnyy-mekhanicheskiy-massiv.png" },
                 { "name": "Пиро гипостазис", "icon": "pic/WorldBoss/Piro-gipostazis.png" },
-                { "name": "Магу Кенки", "icon": "pic/WorldBoss/Magu-Kenki.webp" },
+                { "name": "Магу Кенки", "icon": "pic/WorldBoss/show.png" },
                 { "name": "Крио гипостазис", "icon": "pic/WorldBoss/Cryo_Hypostasis.webp" },
                 { "name": "Древний геовишап", "icon": "pic/WorldBoss/Drevniy-geovishap.webp" },
                 { "name": "Гео гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Rock.png" },
@@ -2153,7 +2137,6 @@
             const config = {
                 teamSize: parseInt(localStorage.getItem(`${currentUserUID}_teamSize`)) || 4,
                 animationSpeed: localStorage.getItem(`${currentUserUID}_animationSpeed`) || 'medium',
-                darkMode: localStorage.getItem('theme') === 'dark',
                 category: localStorage.getItem('genshinCategory') || 'characters',
                 soundEnabled: localStorage.getItem('soundEnabled') !== 'false',
                 animationsEnabled: localStorage.getItem('animationsEnabled') !== 'false',
@@ -2198,7 +2181,6 @@
             const historyPlaceholder = document.getElementById('history-placeholder');
             const clearHistoryButton = document.getElementById('clear-history-button');
             const showFullHistoryButton = document.getElementById('show-full-history-button');
-            const themeToggle = document.getElementById('theme-toggle');
             const statsToggle = document.getElementById('stats-toggle');
             const statsPanel = document.getElementById('stats-panel');
             const settingsToggle = document.getElementById('settings-toggle');
@@ -2386,24 +2368,6 @@
                 }
             }
             
-            // ==================== THEME SYSTEM ====================
-            function initTheme() {
-                if (config.darkMode) {
-                    document.body.classList.remove('light');
-                    document.body.classList.add('dark');
-                } else {
-                    document.body.classList.remove('dark');
-                    document.body.classList.add('light');
-                }
-            }
-            
-            function toggleTheme() {
-                config.darkMode = !config.darkMode;
-                initTheme();
-                localStorage.setItem('theme', config.darkMode ? 'dark' : 'light');
-                playSound('click');
-            }
-            
             // ==================== TAB SYSTEM ====================
             function switchTab(category) {
                 // Update tab buttons
@@ -2464,9 +2428,9 @@
                 const elementName = translations[currentLanguage][`elements.${character.element.toLowerCase()}`] || character.element;
                 
                 card.innerHTML = `
-                    <div class="relative mb-3 mx-auto" style="width: 80px; height: 80px;">
+                    <div class="relative mb-3 mx-auto character-avatar-lg">
                         <img src="${character.icon}" alt="${character.name}" 
-                             class="w-full h-full rounded-full object-cover border-4 ${isSelected ? 'border-purple-500' : 'border-white dark:border-gray-700'}">
+                             class="w-full h-full rounded-full object-cover border-4 ${isSelected ? 'border-purple-500' : 'border-gray-700'}">
                         ${character.element ? `
                             <div class="element-icon tooltip" data-tooltip="${elementName}">
                                 <img src="pic/Elements/Element_${character.element}.webp" 
@@ -2480,7 +2444,7 @@
                             </div>
                         ` : ''}
                     </div>
-                    <p class="font-semibold text-sm dark:text-white truncate">${character.name}</p>
+                    <p class="font-semibold text-sm text-white truncate">${character.name}</p>
                 `;
                 
                 if (isSelectable) {
@@ -2503,8 +2467,8 @@
                 
                 card.innerHTML = `
                     <img src="${boss.icon}" alt="${boss.name}" 
-                         class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 ${isLegend ? 'border-purple-500' : 'border-blue-500'}">
-                    <h3 class="font-bold text-lg mb-2 dark:text-white">${boss.name}</h3>
+                         class="boss-avatar rounded-full object-cover mx-auto mb-4 border-4 ${isLegend ? 'border-purple-500' : 'border-blue-500'}">
+                    <h3 class="font-bold text-lg mb-2 text-white">${boss.name}</h3>
                     ${isClickable ? `
                         <a href="${boss.guideUrl}" target="_blank" 
                            class="inline-block mt-3 px-4 py-2 rounded-xl gradient-secondary text-white text-sm font-semibold hover:scale-105 transition-transform">
@@ -2615,12 +2579,12 @@
                     
                     bossToggle.innerHTML = `
                         <div class="flex items-center">
-                            <div class="w-12 h-12 rounded-full overflow-hidden mr-4 flex-shrink-0">
+                            <div class="w-16 h-16 rounded-full overflow-hidden mr-4 flex-shrink-0">
                                 <img src="${boss.icon}" alt="${boss.name}" class="w-full h-full object-cover">
                             </div>
                             <div>
-                                <h4 class="font-semibold dark:text-white text-sm">${boss.name}</h4>
-                                <p class="text-xs text-gray-500 dark:text-gray-400">${categoryName}</p>
+                                <h4 class="font-semibold text-white text-sm">${boss.name}</h4>
+                                <p class="text-xs text-gray-400">${categoryName}</p>
                             </div>
                         </div>
                         <label class="toggle-switch">
@@ -2730,10 +2694,10 @@
                     const placeholder = document.createElement('div');
                     placeholder.className = 'flex flex-col items-center p-4';
                     placeholder.innerHTML = `
-                        <div class="w-20 h-20 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mb-3">
-                            <i class="fas fa-question text-white text-2xl"></i>
+                        <div class="w-24 h-24 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mb-3">
+                            <i class="fas fa-question text-white text-3xl"></i>
                         </div>
-                        <div class="w-24 h-4 bg-gradient-to-r from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700 rounded-full"></div>
+                        <div class="w-32 h-4 bg-gradient-to-r from-gray-600 to-gray-700 rounded-full"></div>
                     `;
                     charactersResult.appendChild(placeholder);
                 }
@@ -2757,16 +2721,21 @@
                 charactersLoader.classList.add('hidden');
                 charactersResult.innerHTML = '';
                 
+                // Create a grid container for better layout
+                const gridContainer = document.createElement('div');
+                gridContainer.className = 'grid grid-cols-2 md:grid-cols-4 gap-6 w-full';
+                
                 for (let i = 0; i < selectedTeam.length; i++) {
                     const char = selectedTeam[i];
                     const card = createCharacterCard(char);
                     card.classList.add('reveal-animation');
                     card.style.animationDelay = `${i * 0.1}s`;
-                    charactersResult.appendChild(card);
+                    gridContainer.appendChild(card);
                     
                     createParticles(card, 10, '#667eea');
                 }
                 
+                charactersResult.appendChild(gridContainer);
                 playSound('reveal');
                 createConfetti(50);
                 
@@ -2806,8 +2775,8 @@
                     worldBossResult.innerHTML = `
                         <div class="text-center p-8">
                             <div class="text-5xl mb-4">⚠️</div>
-                            <h3 class="text-xl font-bold dark:text-white mb-2">No Bosses Available</h3>
-                            <p class="text-gray-600 dark:text-gray-400">Enable some bosses in the settings to spin!</p>
+                            <h3 class="text-xl font-bold text-white mb-2">No Bosses Available</h3>
+                            <p class="text-gray-400">Enable some bosses in the settings to spin!</p>
                         </div>
                     `;
                     worldBossLoader.classList.add('hidden');
@@ -2863,8 +2832,8 @@
                     weeklyBossResult.innerHTML = `
                         <div class="text-center p-8">
                             <div class="text-5xl mb-4">⚠️</div>
-                            <h3 class="text-xl font-bold dark:text-white mb-2">No Bosses Available</h3>
-                            <p class="text-gray-600 dark:text-gray-400">Enable some bosses in the settings to spin!</p>
+                            <h3 class="text-xl font-bold text-white mb-2">No Bosses Available</h3>
+                            <p class="text-gray-400">Enable some bosses in the settings to spin!</p>
                         </div>
                     `;
                     weeklyBossLoader.classList.add('hidden');
@@ -2920,8 +2889,8 @@
                     legendResult.innerHTML = `
                         <div class="text-center p-8">
                             <div class="text-5xl mb-4">⚠️</div>
-                            <h3 class="text-xl font-bold dark:text-white mb-2">No Legends Available</h3>
-                            <p class="text-gray-600 dark:text-gray-400">Enable some legends in the settings to spin!</p>
+                            <h3 class="text-xl font-bold text-white mb-2">No Legends Available</h3>
+                            <p class="text-gray-400">Enable some legends in the settings to spin!</p>
                         </div>
                     `;
                     legendLoader.classList.add('hidden');
@@ -3033,8 +3002,8 @@
                                     ${item.characters.map(char => `
                                         <div class="flex flex-col items-center">
                                             <img src="${char.icon}" alt="${char.name}" 
-                                                 class="w-12 h-12 rounded-full object-cover border-2 border-white dark:border-gray-700">
-                                            <span class="text-xs mt-1 dark:text-gray-300">${char.name}</span>
+                                                 class="w-16 h-16 rounded-full object-cover border-2 border-gray-700">
+                                            <span class="text-xs mt-1 text-gray-300">${char.name}</span>
                                         </div>
                                     `).join('')}
                                 </div>
@@ -3056,7 +3025,7 @@
                             content = `
                                 <div class="flex items-center justify-center mt-4">
                                     <img src="${item.icon}" alt="${item.name}" 
-                                         class="w-20 h-20 rounded-full object-cover border-4 ${item.type === 'legend' ? 'border-purple-500' : 'border-blue-500'}">
+                                         class="w-24 h-24 rounded-full object-cover border-4 ${item.type === 'legend' ? 'border-purple-500' : 'border-blue-500'}">
                                 </div>
                             `;
                         }
@@ -3069,7 +3038,7 @@
                                             ${icon}${badgeText}
                                         </span>
                                     </div>
-                                    <h3 class="font-bold dark:text-white">${title}</h3>
+                                    <h3 class="font-bold text-white">${title}</h3>
                                 </div>
                                 <button class="delete-history-item p-2 rounded-lg glass hover:bg-red-500 hover:text-white transition-colors" data-index="${index}" data-type="${item.type}">
                                     <i class="fas fa-times"></i>
@@ -3122,8 +3091,8 @@
                     fullHistoryModalContentInner.innerHTML = `
                         <div class="text-center py-12">
                             <div class="text-5xl mb-4">📜</div>
-                            <h3 class="text-xl font-bold dark:text-white mb-2">No History</h3>
-                            <p class="text-gray-600 dark:text-gray-400">Your history will appear here after you save some results.</p>
+                            <h3 class="text-xl font-bold text-white mb-2">No History</h3>
+                            <p class="text-gray-400">Your history will appear here after you save some results.</p>
                         </div>
                     `;
                 } else {
@@ -3149,8 +3118,8 @@
                                     ${item.characters.map(char => `
                                         <div class="flex-shrink-0 flex flex-col items-center">
                                             <img src="${char.icon}" alt="${char.name}" 
-                                                 class="w-16 h-16 rounded-full object-cover border-2 border-white dark:border-gray-700">
-                                            <span class="text-xs mt-1 dark:text-gray-300 text-center">${char.name}</span>
+                                                 class="w-20 h-20 rounded-full object-cover border-2 border-gray-700">
+                                            <span class="text-xs mt-1 text-gray-300 text-center">${char.name}</span>
                                         </div>
                                     `).join('')}
                                 </div>
@@ -3172,7 +3141,7 @@
                             content = `
                                 <div class="flex items-center justify-center mt-4">
                                     <img src="${item.icon}" alt="${item.name}" 
-                                         class="w-24 h-24 rounded-full object-cover border-4 ${item.type === 'legend' ? 'border-purple-500' : 'border-blue-500'}">
+                                         class="w-28 h-28 rounded-full object-cover border-4 ${item.type === 'legend' ? 'border-purple-500' : 'border-blue-500'}">
                                 </div>
                             `;
                         }
@@ -3187,8 +3156,8 @@
                                             ${icon}${badgeText}
                                         </span>
                                     </div>
-                                    <h3 class="font-bold dark:text-white">${title}</h3>
-                                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">${date}</p>
+                                    <h3 class="font-bold text-white">${title}</h3>
+                                    <p class="text-sm text-gray-400 mt-1">${date}</p>
                                 </div>
                             </div>
                             ${content}
@@ -3270,10 +3239,6 @@
             }
             
             // ==================== EVENT LISTENERS ====================
-            // Theme toggle
-            themeToggle.addEventListener('click', toggleTheme);
-            themeToggle.addEventListener('mousedown', createRipple);
-            
             // Stats toggle
             statsToggle.addEventListener('click', () => {
                 statsPanel.classList.toggle('open');
@@ -3476,7 +3441,6 @@
             animationsToggle.checked = config.animationsEnabled;
             
             // ==================== INITIALIZATION ====================
-            initTheme();
             renderPlayerCharactersSelection('', 'all');
             renderBossSettings('world-bosses');
             renderHistory('all');