diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -7,56 +7,154 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
+        :root {
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+            --secondary: #8b5cf6;
+            --accent: #f59e0b;
+            --success: #10b981;
+            --danger: #ef4444;
+            --card-bg-light: #ffffff;
+            --card-bg-dark: #2d3748;
+            --surface-light: #f8fafc;
+            --surface-dark: #1e293b;
+        }
+        
         body {
             font-family: 'Inter', sans-serif;
-            transition: background-color 0.3s, color 0.3s;
+            transition: all 0.3s ease;
         }
-        .dark {
-            background-color: #1a202c;
-            color: #e2e8f0;
+        
+        .modern-card {
+            background: linear-gradient(145deg, var(--card-bg-light), #f1f5f9);
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            transition: all 0.3s ease;
         }
-        .light {
-            background-color: #FDF8F0;
-            color: #4A4A4A;
+        
+        .dark .modern-card {
+            background: linear-gradient(145deg, var(--card-bg-dark), #1a202c);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+        }
+        
+        .modern-button {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            color: white;
+            font-weight: 600;
+            padding: 14px 28px;
+            border-radius: 12px;
+            border: none;
+            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .modern-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: 0.5s;
+        }
+        
+        .modern-button:hover::before {
+            left: 100%;
+        }
+        
+        .modern-button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
+        }
+        
+        .modern-button:active {
+            transform: translateY(-1px);
+        }
+        
+        .modern-button-secondary {
+            background: linear-gradient(135deg, #8b5cf6, #a78bfa);
         }
+        
+        .modern-button-accent {
+            background: linear-gradient(135deg, var(--accent), #fbbf24);
+        }
+        
+        .modern-button-success {
+            background: linear-gradient(135deg, var(--success), #34d399);
+        }
+        
+        .modern-button-danger {
+            background: linear-gradient(135deg, var(--danger), #f87171);
+        }
+        
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        
+        .dark .glass-effect {
+            background: rgba(30, 41, 59, 0.7);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .title-font {
+            font-family: 'Poppins', sans-serif;
+            font-weight: 700;
+        }
+        
         .loader {
             width: 48px;
             height: 48px;
-            border: 5px solid #FDF8F0;
-            border-bottom-color: #A089D0;
+            border: 5px solid #f1f5f9;
+            border-bottom-color: var(--primary);
             border-radius: 50%;
             display: inline-block;
             box-sizing: border-box;
             animation: rotation 1s linear infinite;
         }
+        
         @keyframes rotation {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+        
         .settings-panel {
             max-height: 0;
             overflow: hidden;
-            transition: max-height 0.3s ease-out;
+            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
         }
+        
         .settings-panel.open {
-            max-height: 1000px;
+            max-height: 2000px;
         }
+        
         .roulette-item-spin {
             animation: spin-in-place 0.2s ease-in-out infinite alternate;
         }
+        
         @keyframes spin-in-place {
             0% { transform: scale(0.9) rotate(-2deg); opacity: 0.7; }
             100% { transform: scale(1.1) rotate(2deg); opacity: 1; }
         }
+        
         .roulette-item-boom-enter {
             opacity: 0;
             transform: scale(0.8);
         }
+        
         .roulette-item-boom-enter-active {
             animation: boom-effect 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
         }
+        
         @keyframes boom-effect {
             0% { 
                 opacity: 0; 
@@ -74,253 +172,315 @@
                 filter: brightness(1) drop-shadow(0 0 10px rgba(220, 168, 82, 0.5));
             }
         }
+        
         .player-char-card {
             position: relative;
             cursor: pointer;
             border: 2px solid transparent;
-            transition: border-color 0.2s;
+            transition: all 0.3s ease;
+            border-radius: 12px;
         }
+        
         .player-char-card.selected {
-            border-color: #DCA852;
+            border-color: var(--accent);
+            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
         }
+        
         .player-char-card .remove-btn {
             position: absolute;
-            top: -5px;
-            right: -5px;
-            background-color: red;
+            top: -8px;
+            right: -8px;
+            background-color: var(--danger);
             color: white;
             border-radius: 50%;
-            width: 20px;
-            height: 20px;
+            width: 24px;
+            height: 24px;
             display: flex;
             justify-content: center;
             align-items: center;
-            font-size: 0.8rem;
+            font-size: 0.9rem;
             font-weight: bold;
             cursor: pointer;
             opacity: 0;
-            transition: opacity 0.2s;
+            transition: all 0.3s ease;
+            z-index: 10;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
         }
+        
         .player-char-card:hover .remove-btn {
             opacity: 1;
+            transform: scale(1.1);
         }
+        
         .full-history-character-card {
             display: flex;
             flex-direction: column;
             align-items: center;
-            padding: 8px;
-            border-radius: 8px;
-            background-color: #ffffff;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            padding: 12px;
+            border-radius: 12px;
+            background-color: var(--card-bg-light);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
             text-align: center;
             flex-shrink: 0;
-            width: 100px;
+            width: 120px;
+            transition: all 0.3s ease;
+        }
+        
+        .full-history-character-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
         }
+        
         .dark .full-history-character-card {
-            background-color: #4a5568;
+            background-color: var(--card-bg-dark);
         }
+        
         .full-history-character-card img {
-            width: 64px;
-            height: 64px;
+            width: 72px;
+            height: 72px;
             border-radius: 50%;
-            margin-bottom: 4px;
+            margin-bottom: 8px;
             object-fit: cover;
-            border: 2px solid #DCA852;
+            border: 3px solid var(--accent);
         }
+        
         .full-history-character-card p {
             font-size: 0.875rem;
-            font-weight: 500;
+            font-weight: 600;
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
             width: 100%;
         }
-        .dark .full-history-character-card p {
-            color: #e2e8f0;
-        }
-        .custom-scrollbar::-webkit-scrollbar {
-            height: 8px;
-        }
-        .custom-scrollbar::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-        }
-        .custom-scrollbar::-webkit-scrollbar-thumb {
-            background: #888;
-            border-radius: 10px;
-        }
-        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-            background: #555;
-        }
-        .dark .custom-scrollbar::-webkit-scrollbar-track {
-            background: #2d3748;
-        }
-        .dark .custom-scrollbar::-webkit-scrollbar-thumb {
-            background: #a0aec0;
-        }
-        .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-            background: #cbd5e0;
-        }
+        
         .boss-card {
             flex: 1;
-            min-width: 200px;
-            max-width: 250px;
+            min-width: 220px;
+            max-width: 280px;
             text-align: center;
-            padding: 10px;
-            border-radius: 12px;
-            background: white;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            transition: all 0.3s ease;
+            padding: 20px;
+            border-radius: 16px;
+            background: linear-gradient(145deg, var(--card-bg-light), #f1f5f9);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+            transition: all 0.4s ease;
             border: 2px solid #5BC0DE;
             cursor: pointer;
         }
+        
         .dark .boss-card {
-            background: #4a5568;
+            background: linear-gradient(145deg, var(--card-bg-dark), #1a202c);
         }
+        
         .boss-card:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
         }
+        
         .boss-card img {
-            width: 80px;
-            height: 80px;
+            width: 100px;
+            height: 100px;
             border-radius: 50%;
             object-fit: cover;
-            border: 3px solid #5BC0DE;
-            margin-bottom: 8px;
+            border: 4px solid #5BC0DE;
+            margin-bottom: 12px;
+            box-shadow: 0 5px 15px rgba(91, 192, 222, 0.3);
         }
+        
         .boss-card h3 {
-            font-weight: bold;
-            margin-bottom: 4px;
-        }
-        .boss-card p {
-            font-size: 0.9rem;
-            color: #666;
-        }
-        .dark .boss-card p {
-            color: #cbd5e0;
+            font-weight: 700;
+            margin-bottom: 8px;
+            font-size: 1.25rem;
         }
+        
         .category-select {
-            background-color: #FDF8F0;
-            border: 2px solid #EFEAE4;
-            border-radius: 12px;
-            padding: 12px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            background: linear-gradient(145deg, var(--card-bg-light), #f1f5f9);
+            border-radius: 16px;
+            padding: 20px;
+            margin-bottom: 24px;
+            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
+            border: 1px solid rgba(255, 255, 255, 0.3);
         }
+        
         .dark .category-select {
-            background-color: #2d3748;
-            border-color: #4a5568;
+            background: linear-gradient(145deg, var(--card-bg-dark), #1a202c);
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
+        
         .category-select label {
             display: block;
-            font-weight: 600;
-            margin-bottom: 8px;
+            font-weight: 700;
+            margin-bottom: 12px;
             color: #4A4A4A;
+            font-size: 1.1rem;
         }
+        
         .dark .category-select label {
             color: #e2e8f0;
         }
+        
         .category-select select {
             width: 100%;
-            padding: 8px 12px;
-            border-radius: 8px;
-            border: 1px solid #ddd;
+            padding: 14px 16px;
+            border-radius: 12px;
+            border: 2px solid #e2e8f0;
             background-color: white;
             font-size: 1rem;
+            font-weight: 500;
+            transition: all 0.3s ease;
         }
+        
+        .category-select select:focus {
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+            outline: none;
+        }
+        
         .dark .category-select select {
-            background-color: #4a5568;
+            background-color: #374151;
             color: #e2e8f0;
-            border-color: #718096;
-        }
-        .boss-section {
-            margin-bottom: 32px;
+            border-color: #4b5563;
         }
+        
         .history-item {
-            border-left: 4px solid #DCA852;
-            padding-left: 12px;
+            border-left: 5px solid var(--accent);
+            padding-left: 20px;
+            border-radius: 0 12px 12px 0;
         }
+        
         .boss-history-item {
-            border-left: 4px solid #A089D0;
-            padding-left: 12px;
+            border-left: 5px solid var(--secondary);
+            padding-left: 20px;
+            border-radius: 0 12px 12px 0;
         }
+        
         .legend-section {
             background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
             color: white;
+            border-radius: 20px;
+            overflow: hidden;
+        }
+        
+        .legend-card {
+            border: 3px solid #9B59B6;
+            box-shadow: 0 5px 20px rgba(155, 89, 182, 0.3);
         }
-        .legend-section h2 {
+        
+        .tab-button {
+            padding: 12px 24px;
+            border-radius: 10px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            background: transparent;
+            color: #6b7280;
+        }
+        
+        .tab-button.active {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: white;
+            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
         }
-        .legend-card {
-            border: 2px solid #9B59B6;
+        
+        .section-title {
+            position: relative;
+            display: inline-block;
+            margin-bottom: 2rem;
         }
-        .legend-settings {
-            background-color: #FDF8F0;
-            border: 2px solid #EFEAE4;
-            border-radius: 12px;
-            padding: 12px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        
+        .section-title::after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 0;
+            width: 60px;
+            height: 4px;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            border-radius: 2px;
         }
-        .dark .legend-settings {
-            background-color: #2d3748;
-            border-color: #4a5568;
+        
+        .text-center .section-title::after {
+            left: 50%;
+            transform: translateX(-50%);
         }
-        .legend-settings label {
-            display: block;
-            font-weight: 600;
-            margin-bottom: 8px;
-            color: #4A4A4A;
+        
+        .floating {
+            animation: floating 3s ease-in-out infinite;
         }
-        .dark .legend-settings label {
-            color: #e2e8f0;
+        
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
         }
-        .boss-toggle {
-            margin-bottom: 8px;
-            padding: 8px;
-            border-radius: 8px;
-            transition: background-color 0.2s;
+        
+        .pulse {
+            animation: pulse 2s infinite;
         }
-        .boss-toggle:hover {
-            background-color: #f0f0f0;
+        
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
+            70% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
         }
-        .dark .boss-toggle:hover {
-            background-color: #3d4a5c;
+        
+        .gradient-text {
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
-        .boss-toggle input {
-            margin-right: 8px;
+        
+        .dark .gradient-text {
+            background: linear-gradient(90deg, #8b5cf6, #a78bfa);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .neon-glow {
+            box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
+        }
+        
+        .dark .neon-glow {
+            box-shadow: 0 0 25px rgba(139, 92, 246, 0.6);
         }
     </style>
 </head>
-<body class="light">
-    <div id="app-container" class="container mx-auto px-4 py-8 md:py-12 max-w-4xl">
-        <header class="text-center mb-10">
-            <div class="flex justify-between items-center mb-4">
-                <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800 dark:text-yellow-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                    </svg>
-                </button>
-                <button id="settings-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+<body class="light bg-gradient-to-br from-slate-50 to-blue-50 dark:from-gray-900 dark:to-gray-800">
+    <div id="app-container" class="container mx-auto px-4 py-8 md:py-12 max-w-5xl">
+        <header class="text-center mb-12">
+            <div class="flex justify-between items-center mb-8">
+                <div class="flex gap-3">
+                    <button id="theme-toggle" class="p-3 rounded-xl glass-effect hover:scale-105 transition-all duration-300" title="Переключить тему">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800 dark:text-yellow-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                        </svg>
+                    </button>
+                    <button id="language-toggle" class="p-3 rounded-xl glass-effect hover:scale-105 transition-all duration-300" title="Switch language">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
+                        </svg>
+                    </button>
+                </div>
+                <button id="settings-toggle" class="p-3 rounded-xl glass-effect hover:scale-105 transition-all duration-300" title="Настройки">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                     </svg>
                 </button>
             </div>
-            <h1 class="text-4xl md:text-5xl font-bold text-[#4A4A4A] dark:text-[#e2e8f0] mb-2">Рулетка Genshin Impact</h1>
-            <p class="text-lg text-[#6B6B6B] dark:text-[#a0aec0] max-w-2xl mx-auto">
-                Случайный выбор персонажей, боссов и местных легенд для вашей игры в Genshin Impact
+            <h1 class="text-5xl md:text-6xl font-bold title-font mb-4 gradient-text">Genshin Roulette</h1>
+            <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+                <span data-i18n="subtitle">Случайный выбор персонажей, боссов и местных легенд для вашей игры в Genshin Impact</span>
             </p>
         </header>
+        
         <main>
-            <div id="settings-panel" class="settings-panel bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg mb-6">
-                <h3 class="text-xl font-bold mb-4 dark:text-white">Настройки рулетки</h3>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+            <div id="settings-panel" class="settings-panel modern-card p-8 mb-8">
+                <h3 class="text-2xl font-bold mb-6 dark:text-white section-title" data-i18n="settings.title">Настройки рулетки</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                     <div>
-                        <label for="team-size" class="block text-sm font-medium mb-2 dark:text-gray-300">Количество персонажей в отряде</label>
-                        <select id="team-size" class="w-full p-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
+                        <label for="team-size" class="block text-sm font-semibold mb-3 dark:text-gray-300" data-i18n="settings.teamSize">Количество персонажей в отряде</label>
+                        <select id="team-size" class="w-full p-3 rounded-xl border-2 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all duration-300">
                             <option value="4">4</option>
                             <option value="3">3</option>
                             <option value="2">2</option>
@@ -328,403 +488,611 @@
                         </select>
                     </div>
                     <div>
-                        <label for="animation-speed" class="block text-sm font-medium mb-2 dark:text-gray-300">Скорость анимации</label>
-                        <select id="animation-speed" class="w-full p-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
-                            <option value="fast">Быстрая</option>
-                            <option value="medium" selected>Средняя</option>
-                            <option value="slow">Медленная</option>
+                        <label for="animation-speed" class="block text-sm font-semibold mb-3 dark:text-gray-300" data-i18n="settings.animationSpeed">Скорость анимации</label>
+                        <select id="animation-speed" class="w-full p-3 rounded-xl border-2 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all duration-300">
+                            <option value="fast" data-i18n="settings.fast">Быстрая</option>
+                            <option value="medium" selected data-i18n="settings.medium">Средняя</option>
+                            <option value="slow" data-i18n="settings.slow">Медленная</option>
                         </select>
                     </div>
                 </div>
-                <h3 class="text-xl font-bold mb-4 dark:text-white">Мои персонажи</h3>
-                <p class="text-sm text-[#6B6B6B] dark:text-[#a0aec0] mb-4">
+                <h3 class="text-2xl font-bold mb-6 dark:text-white section-title" data-i18n="settings.myCharacters">Мои персонажи</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400 mb-6" data-i18n="settings.myCharactersDesc">
                     Выберите персонажей, которыми вы владеете, чтобы рулетка использовала только их. Если ни один не выбран, будут использоваться все персонажи.
                 </p>
-                <div class="mb-4">
-                    <input type="text" id="character-search" placeholder="Поиск персонажей..." class="w-full p-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
+                <div class="mb-6">
+                    <input type="text" id="character-search" placeholder="Поиск персонажей..." class="w-full p-3 rounded-xl border-2 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all duration-300" data-i18n-placeholder="settings.searchPlaceholder">
+                </div>
+                <div id="player-characters-selection" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-4 mb-8 max-h-80 overflow-y-auto pr-3">
+                    <!-- Динамически генерируемые карточки персонажей -->
                 </div>
-                <div id="player-characters-selection" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3 mb-6 max-h-60 overflow-y-auto pr-2">
-                    </div>
                 <div class="text-center">
-                    <button id="clear-player-characters" class="bg-red-500 text-white font-bold py-2 px-4 rounded-lg text-sm shadow-md hover:bg-red-600 transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-red-500/50 hidden">
+                    <button id="clear-player-characters" class="modern-button-danger font-bold py-3 px-6 rounded-xl text-sm shadow-md transition-transform duration-300 hidden" data-i18n="settings.clearCharacters">
                         Очистить выбранных персонажей
                     </button>
                 </div>
                 
-                <h3 class="text-xl font-bold mb-4 mt-6 dark:text-white">Настройки боссов</h3>
-                <p class="text-sm text-[#6B6B6B] dark:text-[#a0aec0] mb-4">
+                <h3 class="text-2xl font-bold mb-6 mt-8 dark:text-white section-title" data-i18n="settings.bossSettings">Настройки боссов</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400 mb-6" data-i18n="settings.bossSettingsDesc">
                     Выберите, какие боссы и местные легенды должны участвовать в рандомизации
                 </p>
                 
-                <div class="mb-4">
-                    <div class="legend-settings">
-                        <label for="boss-category-select">Категория:</label>
-                        <select id="boss-category-select" class="w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
-                            <option value="world-bosses">Мировые боссы</option>
-                            <option value="weekly-bosses">Еженедельные боссы</option>
-                            <option value="local-legends">Местные легенды</option>
+                <div class="mb-6">
+                    <div class="modern-card p-6 mb-6">
+                        <label for="boss-category-select" class="block font-semibold mb-3 dark:text-white" data-i18n="settings.category">Категория:</label>
+                        <select id="boss-category-select" class="w-full p-3 rounded-xl border-2 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all duration-300">
+                            <option value="world-bosses" data-i18n="bosses.world">Мировые боссы</option>
+                            <option value="weekly-bosses" data-i18n="bosses.weekly">Еженедельные боссы</option>
+                            <option value="local-legends" data-i18n="bosses.legends">Местные легенды</option>
                         </select>
                     </div>
                 </div>
                 
-                <div id="bosses-settings-container" class="max-h-80 overflow-y-auto pr-2">
+                <div id="bosses-settings-container" class="max-h-96 overflow-y-auto pr-3">
                     <!-- Динамически генерируемые настройки для боссов -->
                 </div>
             </div>
             
-            <div class="category-select">
-                <label for="category-select">Выберите категорию для рандомизации:</label>
-                <select id="category-select" class="w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
-                    <option value="characters">Отряд персонажей</option>
-                    <option value="world-bosses">Мировые боссы</option>
-                    <option value="weekly-bosses">Еженедельные боссы</option>
-                    <option value="local-legends">Местные легенды</option>
+            <div class="modern-card p-6 mb-8">
+                <label for="category-select" class="block font-bold text-lg mb-4 dark:text-white" data-i18n="main.selectCategory">Выберите категорию для рандомизации:</label>
+                <select id="category-select" class="w-full p-4 rounded-2xl border-2 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all duration-300">
+                    <option value="characters" data-i18n="categories.characters">Отряд персонажей</option>
+                    <option value="world-bosses" data-i18n="categories.worldBosses">Мировые боссы</option>
+                    <option value="weekly-bosses" data-i18n="categories.weeklyBosses">Еженедельные боссы</option>
+                    <option value="local-legends" data-i18n="categories.localLegends">Местные легенды</option>
                 </select>
             </div>
             
             <!-- Секция для персонажей -->
-            <section id="characters-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg">
-                <h2 class="text-3xl font-bold text-center text-[#4A4A4A] dark:text-white mb-8">Сформировать отряд персонажей</h2>
-                <div class="flex justify-center mb-8">
-                    <button id="spin-characters-button" class="bg-[#DCA852] text-white font-bold py-4 px-10 rounded-lg text-xl shadow-md hover:bg-[#c3914a] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#DCA852]/50">
-                        Крутить отряд!
+            <section id="characters-section" class="mb-16 modern-card p-8">
+                <h2 class="text-3xl font-bold text-center title-font dark:text-white mb-10 section-title" data-i18n="sections.characters">Сформировать отряд персонажей</h2>
+                <div class="flex justify-center mb-10">
+                    <button id="spin-characters-button" class="modern-button pulse text-xl">
+                        <span data-i18n="buttons.spinTeam">Крутить отряд!</span>
                     </button>
                 </div>
-                <div id="characters-result" class="min-h-[180px] bg-[#FDF8F0] dark:bg-gray-800 rounded-xl p-4 flex flex-wrap justify-center items-center gap-4 transition-all duration-300 flex-col sm:flex-row">
-                    <p id="characters-placeholder" class="text-[#888] dark:text-gray-400">Ваш случайный отряд появится здесь.</p>
+                <div id="characters-result" class="min-h-[220px] modern-card p-6 rounded-2xl flex flex-wrap justify-center items-center gap-6 transition-all duration-300 flex-col sm:flex-row">
+                    <p id="characters-placeholder" class="text-gray-500 dark:text-gray-400 text-lg" data-i18n="placeholders.characters">Ваш случайный отряд появится здесь.</p>
                     <div id="characters-loader" class="loader hidden"></div>
                 </div>
-                <div id="save-characters-section" class="mt-4 flex flex-col sm:flex-row justify-center items-center gap-4 hidden">
-                    <input type="text" id="team-name-input" placeholder="Название отряда (необязательно)" class="p-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white w-full sm:w-auto flex-grow">
-                    <button id="save-team-button" class="bg-[#A089D0] text-white font-bold py-2 px-6 rounded-lg shadow-md hover:bg-[#8e7abf] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#A089D0]/50 w-full sm:w-auto">
+                <div id="save-characters-section" class="mt-8 flex flex-col sm:flex-row justify-center items-center gap-4 hidden">
+                    <input type="text" id="team-name-input" placeholder="Название отряда (необязательно)" class="p-3 rounded-xl border-2 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white w-full sm:w-auto flex-grow focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all duration-300" data-i18n-placeholder="placeholders.teamName">
+                    <button id="save-team-button" class="modern-button-secondary font-bold py-3 px-8 rounded-xl shadow-md transition-transform duration-300" data-i18n="buttons.saveTeam">
                         Сохранить отряд
                     </button>
                 </div>
             </section>
             
             <!-- Секция для мировых боссов -->
-            <section id="world-bosses-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg hidden">
-                <h2 class="text-3xl font-bold text-center text-[#4A4A4A] dark:text-white mb-8">Рандом мирового босса</h2>
-                <div class="flex justify-center mb-8">
-                    <button id="spin-world-boss-button" class="bg-[#5BC0DE] text-white font-bold py-4 px-10 rounded-lg text-xl shadow-md hover:bg-[#3bb5d9] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#5BC0DE]/50">
-                        Выбрать босса!
+            <section id="world-bosses-section" class="mb-16 modern-card p-8 hidden">
+                <h2 class="text-3xl font-bold text-center title-font dark:text-white mb-10 section-title" data-i18n="sections.worldBosses">Рандом мирового босса</h2>
+                <div class="flex justify-center mb-10">
+                    <button id="spin-world-boss-button" class="modern-button text-xl" style="background: linear-gradient(135deg, #5BC0DE, #36B3D9);">
+                        <span data-i18n="buttons.spinBoss">Выбрать босса!</span>
                     </button>
                 </div>
-                <div id="world-boss-result" class="min-h-[180px] bg-[#FDF8F0] dark:bg-gray-800 rounded-xl p-4 flex flex-wrap justify-center items-center gap-4 transition-all duration-300 flex-col sm:flex-row">
-                    <p id="world-boss-placeholder" class="text-[#888] dark:text-gray-400">Случайный мировой босс появится здесь.</p>
+                <div id="world-boss-result" class="min-h-[220px] modern-card p-6 rounded-2xl flex flex-wrap justify-center items-center gap-6 transition-all duration-300 flex-col sm:flex-row">
+                    <p id="world-boss-placeholder" class="text-gray-500 dark:text-gray-400 text-lg" data-i18n="placeholders.worldBoss">Случайный мировой босс появится здесь.</p>
                     <div id="world-boss-loader" class="loader hidden"></div>
                 </div>
-                <div id="save-world-boss-section" class="mt-4 flex justify-center hidden">
-                    <button id="save-world-boss-button" class="bg-[#A089D0] text-white font-bold py-2 px-6 rounded-lg shadow-md hover:bg-[#8e7abf] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#A089D0]/50">
+                <div id="save-world-boss-section" class="mt-8 flex justify-center hidden">
+                    <button id="save-world-boss-button" class="modern-button-secondary font-bold py-3 px-8 rounded-xl shadow-md transition-transform duration-300" data-i18n="buttons.saveToHistory">
                         Сохранить в историю
                     </button>
                 </div>
             </section>
             
             <!-- Секция для еженедельных боссов -->
-            <section id="weekly-bosses-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg hidden">
-                <h2 class="text-3xl font-bold text-center text-[#4A4A4A] dark:text-white mb-8">Рандом еженедельного босса</h2>
-                <div class="flex justify-center mb-8">
-                    <button id="spin-weekly-boss-button" class="bg-[#FF7B7B] text-white font-bold py-4 px-10 rounded-lg text-xl shadow-md hover:bg-[#ff5f5f] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#FF7B7B]/50">
-                        Выбрать босса!
+            <section id="weekly-bosses-section" class="mb-16 modern-card p-8 hidden">
+                <h2 class="text-3xl font-bold text-center title-font dark:text-white mb-10 section-title" data-i18n="sections.weeklyBosses">Рандом еженедельного босса</h2>
+                <div class="flex justify-center mb-10">
+                    <button id="spin-weekly-boss-button" class="modern-button text-xl" style="background: linear-gradient(135deg, #FF7B7B, #FF5F5F);">
+                        <span data-i18n="buttons.spinBoss">Выбрать босса!</span>
                     </button>
                 </div>
-                <div id="weekly-boss-result" class="min-h-[180px] bg-[#FDF8F0] dark:bg-gray-800 rounded-xl p-4 flex flex-wrap justify-center items-center gap-4 transition-all duration-300 flex-col sm:flex-row">
-                    <p id="weekly-boss-placeholder" class="text-[#888] dark:text-gray-400">Случайный еженедельный босс появится здесь.</p>
+                <div id="weekly-boss-result" class="min-h-[220px] modern-card p-6 rounded-2xl flex flex-wrap justify-center items-center gap-6 transition-all duration-300 flex-col sm:flex-row">
+                    <p id="weekly-boss-placeholder" class="text-gray-500 dark:text-gray-400 text-lg" data-i18n="placeholders.weeklyBoss">Случайный еженедельный босс появится здесь.</p>
                     <div id="weekly-boss-loader" class="loader hidden"></div>
                 </div>
-                <div id="save-weekly-boss-section" class="mt-4 flex justify-center hidden">
-                    <button id="save-weekly-boss-button" class="bg-[#A089D0] text-white font-bold py-2 px-6 rounded-lg shadow-md hover:bg-[#8e7abf] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#A089D0]/50">
+                <div id="save-weekly-boss-section" class="mt-8 flex justify-center hidden">
+                    <button id="save-weekly-boss-button" class="modern-button-secondary font-bold py-3 px-8 rounded-xl shadow-md transition-transform duration-300" data-i18n="buttons.saveToHistory">
                         Сохранить в историю
                     </button>
                 </div>
             </section>
             
             <!-- Секция для местных легенд -->
-            <section id="local-legends-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg hidden">
-                <h2 class="text-3xl font-bold text-center text-[#4A4A4A] dark:text-white mb-8">Рандом местной легенды</h2>
-                <div class="flex justify-center mb-8">
-                    <button id="spin-legend-button" class="bg-[#9B59B6] text-white font-bold py-4 px-10 rounded-lg text-xl shadow-md hover:bg-[#8e44ad] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#9B59B6]/50">
-                        Выбрать легенду!
+            <section id="local-legends-section" class="mb-16 modern-card p-8 hidden">
+                <h2 class="text-3xl font-bold text-center title-font dark:text-white mb-10 section-title" data-i18n="sections.localLegends">Рандом местной легенды</h2>
+                <div class="flex justify-center mb-10">
+                    <button id="spin-legend-button" class="modern-button text-xl" style="background: linear-gradient(135deg, #9B59B6, #8E44AD);">
+                        <span data-i18n="buttons.spinLegend">Выбрать легенду!</span>
                     </button>
                 </div>
-                <div id="legend-result" class="min-h-[180px] bg-[#FDF8F0] dark:bg-gray-800 rounded-xl p-4 flex flex-wrap justify-center items-center gap-4 transition-all duration-300 flex-col sm:flex-row">
-                    <p id="legend-placeholder" class="text-[#888] dark:text-gray-400">Случайная местная легенда появится здесь.</p>
+                <div id="legend-result" class="min-h-[220px] modern-card p-6 rounded-2xl flex flex-wrap justify-center items-center gap-6 transition-all duration-300 flex-col sm:flex-row">
+                    <p id="legend-placeholder" class="text-gray-500 dark:text-gray-400 text-lg" data-i18n="placeholders.legend">Случайная местная легенда появится здесь.</p>
                     <div id="legend-loader" class="loader hidden"></div>
                 </div>
-                <div id="save-legend-section" class="mt-4 flex justify-center hidden">
-                    <button id="save-legend-button" class="bg-[#A089D0] text-white font-bold py-2 px-6 rounded-lg shadow-md hover:bg-[#8e7abf] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#A089D0]/50">
+                <div id="save-legend-section" class="mt-8 flex justify-center hidden">
+                    <button id="save-legend-button" class="modern-button-secondary font-bold py-3 px-8 rounded-xl shadow-md transition-transform duration-300" data-i18n="buttons.saveToHistory">
                         Сохранить в историю
                     </button>
                 </div>
             </section>
             
-            <section id="history-section" class="bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg">
-                <div class="flex justify-between items-center mb-8">
-                    <h2 class="text-3xl font-bold text-[#4A4A4A] dark:text-white">История</h2>
-                    <div class="flex gap-2">
-                        <button id="show-full-history-button" class="bg-[#A089D0] text-white font-bold py-2 px-4 rounded-lg text-sm shadow-md hover:bg-[#8e7abf] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#A089D0]/50 hidden">
+            <section id="history-section" class="modern-card p-8">
+                <div class="flex flex-col sm:flex-row justify-between items-center mb-10">
+                    <h2 class="text-3xl font-bold title-font dark:text-white mb-4 sm:mb-0 section-title" data-i18n="sections.history">История</h2>
+                    <div class="flex gap-3">
+                        <button id="show-full-history-button" class="modern-button-secondary font-bold py-3 px-6 rounded-xl text-sm shadow-md transition-transform duration-300 hidden" data-i18n="buttons.fullHistory">
                             Вся история
                         </button>
-                        <button id="clear-history-button" class="bg-[#A089D0] text-white font-bold py-2 px-4 rounded-lg text-sm shadow-md hover:bg-[#8e7abf] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#A089D0]/50 hidden">
+                        <button id="clear-history-button" class="modern-button-danger font-bold py-3 px-6 rounded-xl text-sm shadow-md transition-transform duration-300 hidden" data-i18n="buttons.clearHistory">
                             Очистить
                         </button>
                     </div>
                 </div>
-                <div id="history-content" class="flex flex-col gap-6">
-                    <p id="history-placeholder" class="text-center text-[#888] dark:text-gray-400">История ваших случайных выборов будет отображаться здесь.</p>
+                <div id="history-content" class="flex flex-col gap-8">
+                    <p id="history-placeholder" class="text-center text-gray-500 dark:text-gray-400 text-lg" data-i18n="placeholders.history">История ваших случайных выборов будет отображаться здесь.</p>
                 </div>
             </section>
         </main>
-        <footer class="text-center mt-16 pt-8 border-t border-[#EFEAE4] dark:border-gray-600">
-            <p class="text-sm text-[#888] dark:text-gray-400">
+        <footer class="text-center mt-16 pt-8 border-t border-gray-200 dark:border-gray-700">
+            <p class="text-sm text-gray-500 dark:text-gray-400" data-i18n="footer.disclaimer">
                 Это фанатский проект. Не аффилирован и не одобрен HoYoverse.
             </p>
         </footer>
     </div>
-    <div id="confirm-modal" class="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center hidden p-4">
-        <div class="bg-[#FDF8F0] dark:bg-gray-800 rounded-2xl w-full max-w-sm shadow-2xl relative text-center p-6 transform transition-all duration-300 scale-95 opacity-0" id="confirm-modal-content">
-            <h3 class="text-2xl font-bold mb-4 text-[#4A4A4A] dark:text-white">Подтверждение</h3>
-            <p id="confirm-modal-message" class="text-lg text-[#6B6B6B] dark:text-gray-300 mb-6">Вы уверены, что хотите очистить историю?</p>
-            <div class="flex justify-around gap-4">
-                <button id="confirm-modal-cancel" class="bg-[#A089D0] text-white font-bold py-2 px-6 rounded-lg hover:bg-[#8e7abf]">Отмена</button>
-                <button id="confirm-modal-ok" class="bg-red-500 text-white font-bold py-2 px-6 rounded-lg hover:bg-red-600">Очистить</button>
+    
+    <!-- Модальные окна -->
+    <div id="confirm-modal" class="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center hidden p-4 backdrop-blur-sm">
+        <div class="modern-card w-full max-w-sm shadow-2xl relative p-8 transform transition-all duration-300 scale-95 opacity-0" id="confirm-modal-content">
+            <h3 class="text-2xl font-bold mb-6 text-center dark:text-white" data-i18n="modals.confirm.title">Подтверждение</h3>
+            <p id="confirm-modal-message" class="text-lg text-gray-600 dark:text-gray-300 mb-8 text-center" data-i18n="modals.confirm.clearHistory">Вы уверены, что хотите очистить историю?</p>
+            <div class="flex justify-center gap-6">
+                <button id="confirm-modal-cancel" class="modern-button-secondary font-bold py-3 px-8 rounded-xl" data-i18n="buttons.cancel">Отмена</button>
+                <button id="confirm-modal-ok" class="modern-button-danger font-bold py-3 px-8 rounded-xl" data-i18n="buttons.clear">Очистить</button>
             </div>
         </div>
     </div>
-    <div id="full-history-modal" class="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center hidden p-4">
-        <div class="bg-[#FDF8F0] dark:bg-gray-800 rounded-2xl w-full max-w-4xl h-[90vh] shadow-2xl relative flex flex-col p-6 transform transition-all duration-300 scale-95 opacity-0" id="full-history-modal-content">
-            <h2 class="text-3xl md:text-4xl font-bold text-center mb-6 text-[#4A4A4A] dark:text-[#e2e8f0]">Вся История</h2>
-            <div id="full-history-modal-content-inner" class="flex flex-col gap-6 overflow-y-auto flex-grow pr-2">
-                </div>
-            <div class="text-center mt-6">
-                <button id="full-history-modal-close" class="bg-[#A089D0] text-white font-bold py-2 px-6 rounded-lg hover:bg-[#8e7abf]">Закрыть</button>
+    
+    <div id="full-history-modal" class="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center hidden p-4 backdrop-blur-sm">
+        <div class="modern-card w-full max-w-5xl h-[90vh] shadow-2xl relative flex flex-col p-8 transform transition-all duration-300 scale-95 opacity-0" id="full-history-modal-content">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-8 title-font dark:text-white section-title" data-i18n="modals.fullHistory.title">Вся История</h2>
+            <div id="full-history-modal-content-inner" class="flex flex-col gap-8 overflow-y-auto flex-grow pr-4">
+                <!-- Контент истории будет здесь -->
+            </div>
+            <div class="text-center mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
+                <button id="full-history-modal-close" class="modern-button-secondary font-bold py-3 px-10 rounded-xl" data-i18n="buttons.close">Закрыть</button>
             </div>
         </div>
     </div>
-    <audio id="boom-sound" src="boom.mp3" preload="auto" volume="1.0"></audio> 
+    
+    <audio id="boom-sound" src="boom.mp3" preload="auto" volume="0.7"></audio>
+    
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            // Локальные данные персонажей
-            const LOCAL_CHARACTERS = [
-                { "name": "Альбедо", "icon": "pic/albedo.png", "element": "Geo" },
-                { "name": "Аль-Хайтам", "icon": "pic/alhaitham.png", "element": "Dendro" },
-                { "name": "Алой", "icon": "pic/aloy.png", "element": "Cryo" },
-                { "name": "Эмбер", "icon": "pic/amber.png", "element": "Pyro" },
-                { "name": "Аратаки Итто", "icon": "pic/arataki_itto.png", "element": "Geo" },
-                { "name": "Арлекино", "icon": "pic/arlecchino.png", "element": "Pyro" },
-                { "name": "Бай Чжу", "icon": "pic/baizhu.png", "element": "Dendro" },
-                { "name": "Барбара", "icon": "pic/barbara.png", "element": "Hydro" },
-                { "name": "Бэй Доу", "icon": "pic/beidou.png", "element": "Electro" },
-                { "name": "Беннет", "icon": "pic/bennett.png", "element": "Pyro" },
-                { "name": "Кандакия", "icon": "pic/candace.png", "element": "Hydro" },
-                { "name": "Шарлотта", "icon": "pic/charlotte.png", "element": "Cryo" },
-                { "name": "Часка", "icon": "pic/chasca.png", "element": "Anemo" },
-                { "name": "Тиори", "icon": "pic/chiori.png", "element": "Geo" },
-                { "name": "Чун Юнь", "icon": "pic/chongyun.png", "element": "Cryo" },
-                { "name": "Ситлали", "icon": "pic/citlali.png", "element": "Cryo"  },
-                { "name": "Клоринда", "icon": "pic/clorinde.png", "element": "Electro" },
-                { "name": "Коллеи", "icon": "pic/collei.png", "element": "Dendro" },
-                { "name": "Сайно", "icon": "pic/cyno.png", "element": "Electro" },
-                { "name": "Дэхья", "icon": "pic/dehya.png", "element": "Pyro" },
-                { "name": "Дилюк", "icon": "pic/diluc.png", "element": "Pyro" },
-                { "name": "Диона", "icon": "pic/diona.png", "element": "Cryo" },
-                { "name": "Дори", "icon": "pic/dori.png", "element": "Electro" },
-                { "name": "Эмилия", "icon": "pic/emilie.png" , "element": "Dendro" }, 
-                { "name": "Эскофье", "icon": "pic/escoffier.png", "element": "Cryo"  },
-                { "name": "Эола", "icon": "pic/eula.png", "element": "Cryo" },
-                { "name": "Фарузан", "icon": "pic/faruzan.png", "element": "Anemo" },
-                { "name": "Фишль", "icon": "pic/fischl.png", "element": "Electro" },
-                { "name": "Фремине", "icon": "pic/freminet.png", "element": "Cryo" },
-                { "name": "Фурина", "icon": "pic/furina.png", "element": "Hydro" },
-                { "name": "Га Мин", "icon": "pic/gaming.png", "element": "Pyro" },
-                { "name": "Гань Юй", "icon": "pic/ganyu.png", "element": "Cryo" },
-                { "name": "Горо", "icon": "pic/gorou.png", "element": "Geo" },
-                { "name": "Ху Тао", "icon": "pic/hu_tao.png", "element": "Pyro" },
-                { "name": "Ифу", "icon": "pic/ifa.png", "element": "Anemo"  },
-                { "name": "Иансан", "icon": "pic/iansan.png", "element": "Electro"  },
-                { "name": "Джинн", "icon": "pic/jean.png", "element": "Anemo" },
-                { "name": "Кадзуха", "icon": "pic/kaedehara_kazuha.png", "element": "Anemo" },
-                { "name": "Кэйа", "icon": "pic/kaeya.png", "element": "Cryo" },
-                { "name": "Качина", "icon": "pic/Kachina.webp", "element": "Geo" },
-                { "name": "Аяка", "icon": "pic/kamisato_ayaka.png", "element": "Cryo" },
-                { "name": "Аято", "icon": "pic/kamisato_ayato.png", "element": "Hydro" },
-                { "name": "Кавэх", "icon": "pic/kaveh.png", "element": "Dendro" },
-                { "name": "Кэ Цин", "icon": "pic/keqing.png", "element": "Electro" },
-                { "name": "Кинич", "icon": "pic/kinich.png", "element": "Dendro" }, 
-                { "name": "Кирара", "icon": "pic/kirara.png", "element": "Dendro" },
-                { "name": "Кли", "icon": "pic/klee.png", "element": "Pyro" },
-                { "name": "Сара", "icon": "pic/kujou_sara.png", "element": "Electro" },
-                { "name": "Шинобу", "icon": "pic/kuki_shinobu.png", "element": "Electro" },
-                { "name": "Лань Янь", "icon": "pic/lan_yan.png", "element": "Anemo" },
-                { "name": "Лейла", "icon": "pic/layla.png", "element": "Cryo" },
-                { "name": "Лиза", "icon": "pic/lisa.png", "element": "Electro" },
-                { "name": "Линнет", "icon": "pic/lynette.png", "element": "Anemo" },
-                { "name": "Лини", "icon": "pic/lyney.png", "element": "Pyro" },
-                { "name": "Мавуика", "icon": "pic/mavuika.png", "element": "Pyro" }, 
-                { "name": "Мика", "icon": "pic/mika.png", "element": "Cryo" },
-                { "name": "Мона", "icon": "pic/mona.png", "element": "Hydro" },
-                { "name": "Муалани", "icon": "pic/mualani.png", "element": "Hydro" },
-                { "name": "Нахида", "icon": "pic/nahida.png", "element": "Dendro" },
-                { "name": "Навия", "icon": "pic/navia.png", "element": "Geo" },
-                { "name": "Нёвиллет", "icon": "pic/neuvillette.png", "element": "Hydro" },
-                { "name": "Нилу", "icon": "pic/nilou.png", "element": "Hydro" },
-                { "name": "Нин Гуан", "icon": "pic/ningguang.png", "element": "Geo" },
-                { "name": "Ноэлль", "icon": "pic/noelle.png", "element": "Geo" },
-                { "name": "Оророн", "icon": "pic/ororon.png", "element": "Electro" }, 
-                { "name": "Ци Ци", "icon": "pic/qiqi.png", "element": "Cryo" },
-                { "name": "Райдэн", "icon": "pic/raiden_shogun.png", "element": "Electro" },
-                { "name": "Рэйзор", "icon": "pic/razor.png", "element": "Electro" },
-                { "name": "Розалья", "icon": "pic/rosaria.png", "element": "Cryo" },
-                { "name": "Кокоми", "icon": "pic/sangonomiya_kokomi.png", "element": "Hydro" },
-                { "name": "Саю", "icon": "pic/sayu.png", "element": "Anemo" },
-                { "name": "Сетос", "icon": "pic/sethos.png", "element": "Electro" },
-                { "name": "Шэнь Хэ", "icon": "pic/shenhe.png", "element": "Cryo" },
-                { "name": "Хэйдзо", "icon": "pic/shikanoin_heizou.png", "element": "Anemo" },
-                { "name": "Сиджвин", "icon": "pic/sigewinne.png", "element": "Hydro" },
-                { "name": "Сахароза", "icon": "pic/sucrose.png", "element": "Anemo" },
-                { "name": "Тарталья", "icon": "pic/tartaglia.png", "element": "Hydro" },
-                { "name": "Тома", "icon": "pic/thoma.png", "element": "Pyro" },
-                { "name": "Тигнари", "icon": "pic/tighnari.png", "element": "Dendro" },
-                { "name": "Вареса", "icon": "pic/varesa.png", "element": "Electro" }, 
-                { "name": "Венти", "icon": "pic/venti.png", "element": "Anemo" },
-                { "name": "Странник", "icon": "pic/wanderer.png", "element": "Anemo" },
-                { "name": "Ризли", "icon": "pic/wriothesley.png", "element": "Cryo" },
-                { "name": "Сяо", "icon": "pic/xiao.png", "element": "Anemo" },
-                { "name": "Сян Линь", "icon": "pic/xiangling.png", "element": "Pyro" },
-                { "name": "Сянь Юнь", "icon": "pic/xianyun.png", "element": "Anemo" },
-                { "name": "Шилонен", "icon": "pic/xilonen.png",   "element": "Geo" }, 
-                { "name": "Син Цю", "icon": "pic/xingqiu.png", "element": "Hydro" },
-                { "name": "Синь Янь", "icon": "pic/xinyan.png", "element": "Pyro" },
-                { "name": "Яэ Мико", "icon": "pic/yae_miko.png", "element": "Electro" },
-                { "name": "Янь Фэй", "icon": "pic/yanfei.png", "element": "Pyro" },
-                { "name": "Яо Яо", "icon": "pic/yaoyao.png", "element": "Dendro" },
-                { "name": "Е Лань", "icon": "pic/yelan.png", "element": "Hydro" },
-                { "name": "Ёимия", "icon": "pic/yoimiya.png", "element": "Pyro" },
-                { "name": "Юнь Цзинь", "icon": "pic/yun_jin.png", "element": "Geo" },
-                { "name": "Паймон", "icon": "pic/paimon.png", "element": "Anemo" },
-                { "name": "ГГ(Анемо)", "icon": "pic/traveler.webp", "element": "Anemo" },
-                { "name": "ГГ (Гео)", "icon": "pic/traveler.webp", "element": "Geo" },
-                { "name": "ГГ (Электро)", "icon": "pic/traveler.webp", "element": "Electro" },
-                { "name": "ГГ (Дендро)", "icon": "pic/traveler.webp", "element": "Dendro" },
-                { "name": "ГГ (Гидро)", "icon": "pic/traveler.webp", "element": "Hydro" },
-                { "name": "Мидзуки", "icon": "pic/yumemizuki_mizuki.png", "element": "Anemo" },
-                { "name": "Чжун Ли", "icon": "pic/zhongli.png", "element": "Geo" },
+        // Система локализации
+        const translations = {
+            ru: {
+                // Основные элементы
+                "subtitle": "Случайный выбор персонажей, боссов и местных легенд для вашей игры в Genshin Impact",
+                "footer.disclaimer": "Это фанатский проект. Не аффилирован и не одобрен HoYoverse.",
+                
+                // Настройки
+                "settings.title": "Настройки рулетки",
+                "settings.teamSize": "Количество персонажей в отряде",
+                "settings.animationSpeed": "Скорость анимации",
+                "settings.fast": "Быстрая",
+                "settings.medium": "Средняя",
+                "settings.slow": "Медленная",
+                "settings.myCharacters": "Мои персонажи",
+                "settings.myCharactersDesc": "Выберите персонажей, которыми вы владеете, чтобы рулетка использовала только их. Если ни один не выбран, будут использоваться все персонажи.",
+                "settings.searchPlaceholder": "Поиск персонажей...",
+                "settings.clearCharacters": "Очистить выбранных персонажей",
+                "settings.bossSettings": "Настройки боссов",
+                "settings.bossSettingsDesc": "Выберите, какие боссы и местные легенды должны участвовать в рандомизации",
+                "settings.category": "Категория:",
+                
+                // Основной интерфейс
+                "main.selectCategory": "Выберите категорию для рандомизации:",
+                "categories.characters": "Отряд персонажей",
+                "categories.worldBosses": "Мировые боссы",
+                "categories.weeklyBosses": "Еженедельные боссы",
+                "categories.localLegends": "Местные легенды",
+                
+                // Боссы
+                "bosses.world": "Мировые боссы",
+                "bosses.weekly": "Еженедельные боссы",
+                "bosses.legends": "Местные легенды",
+                
+                // Секции
+                "sections.characters": "Сформировать отряд персонажей",
+                "sections.worldBosses": "Рандом мирового босса",
+                "sections.weeklyBosses": "Рандом еженедельного босса",
+                "sections.localLegends": "Рандом местной легенды",
+                "sections.history": "История",
+                
+                // Кнопки
+                "buttons.spinTeam": "Крутить отряд!",
+                "buttons.spinBoss": "Выбрать босса!",
+                "buttons.spinLegend": "Выбрать легенду!",
+                "buttons.saveTeam": "Сохранить отряд",
+                "buttons.saveToHistory": "Сохранить в историю",
+                "buttons.fullHistory": "Вся история",
+                "buttons.clearHistory": "Очистить",
+                "buttons.cancel": "Отмена",
+                "buttons.clear": "Очистить",
+                "buttons.close": "Закрыть",
+                
+                // Плейсхолдеры
+                "placeholders.characters": "Ваш случайный ��тряд появится здесь.",
+                "placeholders.teamName": "Название отряда (необязательно)",
+                "placeholders.worldBoss": "Случайный мировой босс появится здесь.",
+                "placeholders.weeklyBoss": "Случайный еженедельный босс появится здесь.",
+                "placeholders.legend": "Случайная местная легенда появится здесь.",
+                "placeholders.history": "История ваших случайных выборов будет отображаться здесь.",
+                
+                // Модальные окна
+                "modals.confirm.title": "Подтверждение",
+                "modals.confirm.clearHistory": "Вы уверены, что хотите очистить историю?",
+                "modals.confirm.clearCharacters": "Вы уверены, что хотите очистить список ваших персонажей?",
+                "modals.fullHistory.title": "Вся История",
+                
+                // Сообщения
+                "messages.notEnoughChars": "Недостаточно персонажей для формирования отряда из {0} человек. Доступно: {1}",
+                "messages.noBossesAvailable": "Нет доступных боссов! Проверьте настройки.",
+                "messages.noLegendsAvailable": "Нет доступных легенд! Проверьте настройки.",
+                "messages.teamSaved": "Отряд сохранен в историю!",
+                "messages.bossSaved": "Босс сохранен в историю!",
+                "messages.legendSaved": "Легенда сохранена в историю!"
+            },
+            
+            en: {
+                // Main elements
+                "subtitle": "Random selection of characters, bosses and local legends for your Genshin Impact gameplay",
+                "footer.disclaimer": "This is a fan project. Not affiliated with or endorsed by HoYoverse.",
+                
+                // Settings
+                "settings.title": "Roulette Settings",
+                "settings.teamSize": "Number of characters in team",
+                "settings.animationSpeed": "Animation speed",
+                "settings.fast": "Fast",
+                "settings.medium": "Medium",
+                "settings.slow": "Slow",
+                "settings.myCharacters": "My Characters",
+                "settings.myCharactersDesc": "Select the characters you own so the roulette uses only them. If none are selected, all characters will be used.",
+                "settings.searchPlaceholder": "Search characters...",
+                "settings.clearCharacters": "Clear selected characters",
+                "settings.bossSettings": "Boss Settings",
+                "settings.bossSettingsDesc": "Select which bosses and local legends should participate in randomization",
+                "settings.category": "Category:",
+                
+                // Main interface
+                "main.selectCategory": "Select category for randomization:",
+                "categories.characters": "Character Team",
+                "categories.worldBosses": "World Bosses",
+                "categories.weeklyBosses": "Weekly Bosses",
+                "categories.localLegends": "Local Legends",
+                
+                // Bosses
+                "bosses.world": "World Bosses",
+                "bosses.weekly": "Weekly Bosses",
+                "bosses.legends": "Local Legends",
+                
+                // Sections
+                "sections.characters": "Form Character Team",
+                "sections.worldBosses": "Random World Boss",
+                "sections.weeklyBosses": "Random Weekly Boss",
+                "sections.localLegends": "Random Local Legend",
+                "sections.history": "History",
+                
+                // Buttons
+                "buttons.spinTeam": "Spin Team!",
+                "buttons.spinBoss": "Select Boss!",
+                "buttons.spinLegend": "Select Legend!",
+                "buttons.saveTeam": "Save Team",
+                "buttons.saveToHistory": "Save to History",
+                "buttons.fullHistory": "Full History",
+                "buttons.clearHistory": "Clear",
+                "buttons.cancel": "Cancel",
+                "buttons.clear": "Clear",
+                "buttons.close": "Close",
+                
+                // Placeholders
+                "placeholders.characters": "Your random team will appear here.",
+                "placeholders.teamName": "Team name (optional)",
+                "placeholders.worldBoss": "Random world boss will appear here.",
+                "placeholders.weeklyBoss": "Random weekly boss will appear here.",
+                "placeholders.legend": "Random local legend will appear here.",
+                "placeholders.history": "Your random selection history will be displayed here.",
+                
+                // Modals
+                "modals.confirm.title": "Confirmation",
+                "modals.confirm.clearHistory": "Are you sure you want to clear history?",
+                "modals.confirm.clearCharacters": "Are you sure you want to clear your character list?",
+                "modals.fullHistory.title": "Full History",
+                
+                // Messages
+                "messages.notEnoughChars": "Not enough characters to form a team of {0}. Available: {1}",
+                "messages.noBossesAvailable": "No bosses available! Check settings.",
+                "messages.noLegendsAvailable": "No legends available! Check settings.",
+                "messages.teamSaved": "Team saved to history!",
+                "messages.bossSaved": "Boss saved to history!",
+                "messages.legendSaved": "Legend saved to history!"
+            }
+        };
 
+        // Текущий язык
+        let currentLang = localStorage.getItem('genshinRouletteLang') || 'ru';
+        
+        // Функция для установки языка
+        function setLanguage(lang) {
+            if (!translations[lang]) return;
+            
+            currentLang = lang;
+            localStorage.setItem('genshinRouletteLang', lang);
+            
+            // Обновляем все элементы с атрибутом data-i18n
+            document.querySelectorAll('[data-i18n]').forEach(element => {
+                const key = element.getAttribute('data-i18n');
+                if (translations[lang][key]) {
+                    element.textContent = translations[lang][key];
+                }
+            });
+            
+            // Обновляем все плейсхолдеры
+            document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
+                const key = element.getAttribute('data-i18n-placeholder');
+                if (translations[lang][key]) {
+                    element.placeholder = translations[lang][key];
+                }
+            });
+            
+            // Обновляем опции в select
+            document.querySelectorAll('option[data-i18n]').forEach(option => {
+                const key = option.getAttribute('data-i18n');
+                if (translations[lang][key]) {
+                    option.textContent = translations[lang][key];
+                }
+            });
+            
+            // Обновляем атрибут lang у html
+            document.documentElement.lang = lang;
+        }
+        
+        // Функция для получения переведенного текста
+        function t(key, ...params) {
+            let text = translations[currentLang][key] || key;
+            
+            // Заменяем плейсхолдеры {0}, {1}, и т.д.
+            params.forEach((param, index) => {
+                text = text.replace(`{${index}}`, param);
+            });
+            
+            return text;
+        }
 
-                { "name": "Скирк", "icon": "pic/skirk.png", "element": "Cryo" },
-                { "name": "Далия", "icon": "pic/daliya.png", "element": "Hydro" },
-                { "name": "Инеффа", "icon": "pic/ineffa.png", "element": "Electro" },
-                { "name": "Лаума", "icon": "pic/lauma_icon.webp", "element": "Dendro" },
-                { "name": "Айно", "icon": "pic/aino_icon.webp", "element": "Hydro" },
-                { "name": "Флинс", "icon": "pic/flins_icon.webp", "element": "Electro" },
-                { "name": "Нефер", "icon": "pic/Nefer.webp", "element": "Dendro" },
-                { "name": "Ягода", "icon": "pic/YAgoda.webp", "element": "Anemo" },
-                { "name": "Дурин", "icon": "pic/Durin.webp", "element": "Pyro" },
-            ];
-            
-            // Мировые боссы
-            const WORLD_BOSSES = [
-                { "name": "Сверхтяжёлый сухопутный крейсер: Мобильная крепость", "icon": "pic/WorldBoss/Sverkhtyazhyelyy-sukhoputnyy-kreyser.webp" },
-                { "name": "Повелитель морозной ночи", "icon": "pic/WorldBoss/Povelitel-moroznoy-nochi.webp" },
-                { "name": "Лучезарный мотылёк-призрак", "icon": "pic/WorldBoss/Luchezarnyy-motylyek_prizrak.webp" },
-                { "name": "Железный утёнок", "icon": "pic/WorldBoss/ZHeleznyy-utyenok.webp" },
-                { "name": "Автоматон: Надсмотрщик", "icon": "pic/WorldBoss/Secret-Source-Automaton-Overseer-Device.webp" },
-                { "name": "Статуя лавового дракона", "icon": "pic/WorldBoss/Statuya-lavovogo-drakona.webp" },
-                { "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/Kapitan-golemov.webp" },
-                { "name": "Суаньни-отшельник", "icon": "pic/WorldBoss/Suanni_otshelnik.webp" },
-                { "name": "Гидротульпа", "icon": "pic/WorldBoss/Probuzhdyennaya-zhizn.webp" },
-                { "name": "Экспериментальный генератор поля", "icon": "pic/WorldBoss/Eksperimentalnyy-generator-polya.webp" },
-                { "name": "Морской конёк тысячелетней жемчужины", "icon": "pic/WorldBoss/Morskoy-konyek-tysyacheletney-zhemchuzhiny.webp" },
-                { "name": "Император огня и железа", "icon": "pic/WorldBoss/Imperator-ognya-i-zheleza.webp" },
-                { "name": "Сюита ледяного ветра", "icon": "pic/WorldBoss/Syuita-ledyanogo-vetra.webp" },
-                { "name": "Чудовищный креститель", "icon": "pic/WorldBoss/CHudovishchnyy-krestitel.webp" },
-                { "name": "Унут Сетеха", "icon": "pic/WorldBoss/Unut-Setekha.webp" },
-                { "name": "Дендро Гипостазис", "icon": "pic/WorldBoss/Dendro-Gipostazis.png" },
-                { "name": "Алгоритм полуизвечной матрицы оператора наблюдения", "icon": "pic/WorldBoss/Poluvechnaya-matritsa-upravleniya.webp" },
-                { "name": "Дракон вечных бедствий", "icon": "pic/WorldBoss/Drakon-vechnykh-bedstviy.webp" },
-                { "name": "Электро папоротник", "icon": "pic/WorldBoss/Elektro-paporotnik.webp" },
-                { "name": "Пернатый плесенник", "icon": "pic/WorldBoss/Pernatyy-plesennik.webp" },
-                { "name": "Змей руин", "icon": "pic/WorldBoss/Zmey-ruin.webp" },
-                { "name": "Стая вишапов глубин", "icon": "pic/WorldBoss/Staya-vishapov-glubin.webp" },
-                { "name": "Золотой волчий вожак", "icon": "pic/WorldBoss/Golden-Wolflord.png" },
-                { "name": "Гидро Гипостазис", "icon": "pic/WorldBoss/Gidro-Gipostazis.png" },
-                { "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/Cryo_Hypostasis.webp" },
-                { "name": "Древний геовишап", "icon": "pic/WorldBoss/Drevniy-geovishap.webp" },
-                { "name": "Гео гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Rock.png" },
-                { "name": "Электро гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Electric.png" },
-                { "name": "Анемо гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Wind.png" },
-                { "name": "Крио папоротник", "icon": "pic/WorldBoss/UI_MonsterIcon_cryo_regisvine.png" },
-                { "name": "Пиро орхидея", "icon": "pic/WorldBoss/UI_MonsterIcon_Regisvine_Fire.png" },
-                { "name": "Океанид", "icon": "pic/WorldBoss/Okeanid.webp" }
-            ];
-            // Еженедельные боссы
-            const WEEKLY_BOSSES = [
-                { "name": "Игра перед вратами", "icon": "pic/Allweeklybosses/Igra-pered-vratami.webp" },
-                { "name": "Владыка истлевшего первобытного пламени", "icon": "pic/Allweeklybosses/Lord-of-Eroded-Primal-Fire.webp" },
-                { "name": "Слуга", "icon": "pic/Allweeklybosses/Nomer-chetyre-iz-Predvestnikov-Fatui_-Arlekino.webp" },
-                { "name": "Всепожирающий нарвал", "icon": "pic/Allweeklybosses/Vsepozhirayushchiy-narval.webp" },
-                { "name": "Страж оазиса Апепа", "icon": "pic/Allweeklybosses/Strazh-oazisa-Apepa.webp" },
-                { "name": "Сёки но Ками", "icon": "pic/Allweeklybosses/Syeki-no-Kami.webp" },
-                { "name": "Маг��цу митакэ Наруками но микото", "icon": "pic/Allweeklybosses/m_29060201.webp" },
-                { "name": "Синьора", "icon": "pic/Allweeklybosses/Sinora.png" },
-                { "name": "Аждаха", "icon": "pic/Allweeklybosses/Azhdaha.png" },
-                { "name": "Чайльд", "icon": "pic/Allweeklybosses/Childe.png" },
-                { "name": "Лупус Бореалис, Волчий лорд", "icon": "pic/Allweeklybosses/UI_MonsterIcon_LupiBoreas.png" },
-                { "name": "Ужас бури", "icon": "pic/Allweeklybosses/Stormterror.png" }
-            ];
-            
-            // Местные Легенды
-            const LOCAL_LEGENDS = [
-                { "name": "Сигурд", "icon": "pic/LocalLegends/Sigurd.png", "guideUrl": "#" },
-                { "name": "Волшебные рыцари-близнецы", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-284766-1-800x476.jpg", "guideUrl": "https://wotpack.ru/volshebnye-rycari-bliznecy-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Окружной судья океана", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-284964-4.jpg", "guideUrl": "https://wotpack.ru/okruzhnoj-sudja-okeana-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Дева озера Вивианна", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283768-1-800x425.jpg", "guideUrl": "https://wotpack.ru/deva-ozera-vivianna-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Дева озера Нинианна", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283708-1-800x423.jpg", "guideUrl": "https://wotpack.ru/deva-ozera-ninianna-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Угасающий старый солдат", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283590-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/ugasajushhij-staryj-soldat-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Владыка отшельников Доварху", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283520-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/vladyka-otshelnikov-dovarhu-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Меч ущелья", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283554-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/mech-ushhelja-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Железный виконт", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-284964-10.jpg", "guideUrl": "https://wotpack.ru/zheleznyj-vikont-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Автоматический генератор полей сверхвычислений", "icon": "https://wotpack.ru/wp-content/uploads/2023/09/word-image-301036-4.jpeg", "guideUrl": "https://wotpack.ru/avtomaticheskij-generator-polej-sverhvychislenij-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Лиахра Блистательная", "icon": "https://wotpack.ru/wp-content/uploads/2023/09/word-image-301327-4.jpeg", "guideUrl": "https://wotpack.ru/liahra-blistatelnaja-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Изольт", "icon": "https://wotpack.ru/wp-content/uploads/2023/09/word-image-301389-1-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/izolt-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Шассанион", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-321383-7-800x450.jpeg", "guideUrl": "https://wotpack.ru/shassanion-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Деянейра Снежневна", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/1-10-800x450.jpg", "guideUrl": "https://wotpack.ru/dejanejra-snezhnevna-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Роки Авилдсен", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-321618-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/roki-avildsen-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Магический меч Круж", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-322447-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/magicheskij-mech-kruzh-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Лиям", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-321469-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/lijam-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Киней", "icon": "https://wotpack.ru/wp-content/uploads/2024/04/Kinej-v-Genshin-Impact-800x450.jpg", "guideUrl": "https://wotpack.ru/kinej-v-genshin-impact-kak-najti-i-pobedit/" },
+        // Локальные данные персонажей
+        const LOCAL_CHARACTERS = [
+            { "name": "Альбедо", "icon": "pic/albedo.png", "element": "Geo" },
+            { "name": "Аль-Хайтам", "icon": "pic/alhaitham.png", "element": "Dendro" },
+            { "name": "Алой", "icon": "pic/aloy.png", "element": "Cryo" },
+            { "name": "Эмбер", "icon": "pic/amber.png", "element": "Pyro" },
+            { "name": "Аратаки Итто", "icon": "pic/arataki_itto.png", "element": "Geo" },
+            { "name": "Арлекино", "icon": "pic/arlecchino.png", "element": "Pyro" },
+            { "name": "Бай Чжу", "icon": "pic/baizhu.png", "element": "Dendro" },
+            { "name": "Барбара", "icon": "pic/barbara.png", "element": "Hydro" },
+            { "name": "Бэй Доу", "icon": "pic/beidou.png", "element": "Electro" },
+            { "name": "Беннет", "icon": "pic/bennett.png", "element": "Pyro" },
+            { "name": "Кандакия", "icon": "pic/candace.png", "element": "Hydro" },
+            { "name": "Шарлотта", "icon": "pic/charlotte.png", "element": "Cryo" },
+            { "name": "Часка", "icon": "pic/chasca.png", "element": "Anemo" },
+            { "name": "Тиори", "icon": "pic/chiori.png", "element": "Geo" },
+            { "name": "Чун Юнь", "icon": "pic/chongyun.png", "element": "Cryo" },
+            { "name": "Ситлали", "icon": "pic/citlali.png", "element": "Cryo"  },
+            { "name": "Клоринда", "icon": "pic/clorinde.png", "element": "Electro" },
+            { "name": "Коллеи", "icon": "pic/collei.png", "element": "Dendro" },
+            { "name": "Сайно", "icon": "pic/cyno.png", "element": "Electro" },
+            { "name": "Дэхья", "icon": "pic/dehya.png", "element": "Pyro" },
+            { "name": "Дилюк", "icon": "pic/diluc.png", "element": "Pyro" },
+            { "name": "Диона", "icon": "pic/diona.png", "element": "Cryo" },
+            { "name": "Дори", "icon": "pic/dori.png", "element": "Electro" },
+            { "name": "Эмилия", "icon": "pic/emilie.png" , "element": "Dendro" }, 
+            { "name": "Эскофье", "icon": "pic/escoffier.png", "element": "Cryo"  },
+            { "name": "Эола", "icon": "pic/eula.png", "element": "Cryo" },
+            { "name": "Фарузан", "icon": "pic/faruzan.png", "element": "Anemo" },
+            { "name": "Фишль", "icon": "pic/fischl.png", "element": "Electro" },
+            { "name": "Фремине", "icon": "pic/freminet.png", "element": "Cryo" },
+            { "name": "Фурина", "icon": "pic/furina.png", "element": "Hydro" },
+            { "name": "Га Мин", "icon": "pic/gaming.png", "element": "Pyro" },
+            { "name": "Гань Юй", "icon": "pic/ganyu.png", "element": "Cryo" },
+            { "name": "Горо", "icon": "pic/gorou.png", "element": "Geo" },
+            { "name": "Ху Тао", "icon": "pic/hu_tao.png", "element": "Pyro" },
+            { "name": "Ифу", "icon": "pic/ifa.png", "element": "Anemo"  },
+            { "name": "Иансан", "icon": "pic/iansan.png", "element": "Electro"  },
+            { "name": "Джинн", "icon": "pic/jean.png", "element": "Anemo" },
+            { "name": "Кадзуха", "icon": "pic/kaedehara_kazuha.png", "element": "Anemo" },
+            { "name": "Кэйа", "icon": "pic/kaeya.png", "element": "Cryo" },
+            { "name": "Качина", "icon": "pic/Kachina.webp", "element": "Geo" },
+            { "name": "Аяка", "icon": "pic/kamisato_ayaka.png", "element": "Cryo" },
+            { "name": "Аято", "icon": "pic/kamisato_ayato.png", "element": "Hydro" },
+            { "name": "Кавэх", "icon": "pic/kaveh.png", "element": "Dendro" },
+            { "name": "Кэ Цин", "icon": "pic/keqing.png", "element": "Electro" },
+            { "name": "Кинич", "icon": "pic/kinich.png", "element": "Dendro" }, 
+            { "name": "Кирара", "icon": "pic/kirara.png", "element": "Dendro" },
+            { "name": "Кли", "icon": "pic/klee.png", "element": "Pyro" },
+            { "name": "Сара", "icon": "pic/kujou_sara.png", "element": "Electro" },
+            { "name": "Шинобу", "icon": "pic/kuki_shinobu.png", "element": "Electro" },
+            { "name": "Лань Янь", "icon": "pic/lan_yan.png", "element": "Anemo" },
+            { "name": "Лейла", "icon": "pic/layla.png", "element": "Cryo" },
+            { "name": "Лиза", "icon": "pic/lisa.png", "element": "Electro" },
+            { "name": "Линнет", "icon": "pic/lynette.png", "element": "Anemo" },
+            { "name": "Лини", "icon": "pic/lyney.png", "element": "Pyro" },
+            { "name": "Мавуика", "icon": "pic/mavuika.png", "element": "Pyro" }, 
+            { "name": "Мика", "icon": "pic/mika.png", "element": "Cryo" },
+            { "name": "Мона", "icon": "pic/mona.png", "element": "Hydro" },
+            { "name": "Муалани", "icon": "pic/mualani.png", "element": "Hydro" },
+            { "name": "Нахида", "icon": "pic/nahida.png", "element": "Dendro" },
+            { "name": "Навия", "icon": "pic/navia.png", "element": "Geo" },
+            { "name": "Нёвиллет", "icon": "pic/neuvillette.png", "element": "Hydro" },
+            { "name": "Нилу", "icon": "pic/nilou.png", "element": "Hydro" },
+            { "name": "Нин Гуан", "icon": "pic/ningguang.png", "element": "Geo" },
+            { "name": "Ноэлль", "icon": "pic/noelle.png", "element": "Geo" },
+            { "name": "Оророн", "icon": "pic/ororon.png", "element": "Electro" }, 
+            { "name": "Ци Ци", "icon": "pic/qiqi.png", "element": "Cryo" },
+            { "name": "Райдэн", "icon": "pic/raiden_shogun.png", "element": "Electro" },
+            { "name": "Рэйзор", "icon": "pic/razor.png", "element": "Electro" },
+            { "name": "Розалья", "icon": "pic/rosaria.png", "element": "Cryo" },
+            { "name": "Кокоми", "icon": "pic/sangonomiya_kokomi.png", "element": "Hydro" },
+            { "name": "Саю", "icon": "pic/sayu.png", "element": "Anemo" },
+            { "name": "Сетос", "icon": "pic/sethos.png", "element": "Electro" },
+            { "name": "Шэнь Хэ", "icon": "pic/shenhe.png", "element": "Cryo" },
+            { "name": "Хэйдзо", "icon": "pic/shikanoin_heizou.png", "element": "Anemo" },
+            { "name": "Сиджвин", "icon": "pic/sigewinne.png", "element": "Hydro" },
+            { "name": "Сахароза", "icon": "pic/sucrose.png", "element": "Anemo" },
+            { "name": "Тарталья", "icon": "pic/tartaglia.png", "element": "Hydro" },
+            { "name": "Тома", "icon": "pic/thoma.png", "element": "Pyro" },
+            { "name": "Тигнари", "icon": "pic/tighnari.png", "element": "Dendro" },
+            { "name": "Вареса", "icon": "pic/varesa.png", "element": "Electro" }, 
+            { "name": "Венти", "icon": "pic/venti.png", "element": "Anemo" },
+            { "name": "Странник", "icon": "pic/wanderer.png", "element": "Anemo" },
+            { "name": "Ризли", "icon": "pic/wriothesley.png", "element": "Cryo" },
+            { "name": "Сяо", "icon": "pic/xiao.png", "element": "Anemo" },
+            { "name": "Сян Линь", "icon": "pic/xiangling.png", "element": "Pyro" },
+            { "name": "Сянь Юнь", "icon": "pic/xianyun.png", "element": "Anemo" },
+            { "name": "Шилонен", "icon": "pic/xilonen.png",   "element": "Geo" }, 
+            { "name": "Син Цю", "icon": "pic/xingqiu.png", "element": "Hydro" },
+            { "name": "Синь Янь", "icon": "pic/xinyan.png", "element": "Pyro" },
+            { "name": "Яэ Мико", "icon": "pic/yae_miko.png", "element": "Electro" },
+            { "name": "Янь Фэй", "icon": "pic/yanfei.png", "element": "Pyro" },
+            { "name": "Яо Яо", "icon": "pic/yaoyao.png", "element": "Dendro" },
+            { "name": "Е Лань", "icon": "pic/yelan.png", "element": "Hydro" },
+            { "name": "Ёимия", "icon": "pic/yoimiya.png", "element": "Pyro" },
+            { "name": "Юнь Цзинь", "icon": "pic/yun_jin.png", "element": "Geo" },
+            { "name": "Паймон", "icon": "pic/paimon.png", "element": "Anemo" },
+            { "name": "ГГ(Анемо)", "icon": "pic/traveler.webp", "element": "Anemo" },
+            { "name": "ГГ (Гео)", "icon": "pic/traveler.webp", "element": "Geo" },
+            { "name": "ГГ (Электро)", "icon": "pic/traveler.webp", "element": "Electro" },
+            { "name": "ГГ (Дендро)", "icon": "pic/traveler.webp", "element": "Dendro" },
+            { "name": "ГГ (Гидро)", "icon": "pic/traveler.webp", "element": "Hydro" },
+            { "name": "Мидзуки", "icon": "pic/yumemizuki_mizuki.png", "element": "Anemo" },
+            { "name": "Чжун Ли", "icon": "pic/zhongli.png", "element": "Geo" },
 
+            { "name": "Скирк", "icon": "pic/skirk.png", "element": "Cryo" },
+            { "name": "Далия", "icon": "pic/daliya.png", "element": "Hydro" },
+            { "name": "Инеффа", "icon": "pic/ineffa.png", "element": "Electro" },
+            { "name": "Лаума", "icon": "pic/lauma_icon.webp", "element": "Dendro" },
+            { "name": "Айно", "icon": "pic/aino_icon.webp", "element": "Hydro" },
+            { "name": "Флинс", "icon": "pic/flins_icon.webp", "element": "Electro" },
+            { "name": "Нефер", "icon": "pic/Nefer.webp", "element": "Dendro" },
+            { "name": "Ягода", "icon": "pic/YAgoda.webp", "element": "Anemo" },
+            { "name": "Дурин", "icon": "pic/Durin.webp", "element": "Pyro" },
+        ];
+        
+        // Мировые боссы
+        const WORLD_BOSSES = [
+            { "name": "Сверхтяжёлый сухопутный крейсер: Мобильная крепость", "icon": "pic/WorldBoss/Sverkhtyazhyelyy-sukhoputnyy-kreyser.webp" },
+            { "name": "Повелитель морозной ночи", "icon": "pic/WorldBoss/Povelitel-moroznoy-nochi.webp" },
+            { "name": "Лучезарный мотылёк-призрак", "icon": "pic/WorldBoss/Luchezarnyy-motylyek_prizrak.webp" },
+            { "name": "Железный утёнок", "icon": "pic/WorldBoss/ZHeleznyy-utyenok.webp" },
+            { "name": "Автоматон: Надсмотрщик", "icon": "pic/WorldBoss/Secret-Source-Automaton-Overseer-Device.webp" },
+            { "name": "Статуя лавового дракона", "icon": "pic/WorldBoss/Statuya-lavovogo-drakona.webp" },
+            { "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/Kapitan-golemov.webp" },
+            { "name": "Суаньни-отшельник", "icon": "pic/WorldBoss/Suanni_otshelnik.webp" },
+            { "name": "Гидротульпа", "icon": "pic/WorldBoss/Probuzhdyennaya-zhizn.webp" },
+            { "name": "Экспериментальный генератор поля", "icon": "pic/WorldBoss/Eksperimentalnyy-generator-polya.webp" },
+            { "name": "Морской конёк тысячелетней жемчужины", "icon": "pic/WorldBoss/Morskoy-konyek-tysyacheletney-zhemchuzhiny.webp" },
+            { "name": "Император огня и железа", "icon": "pic/WorldBoss/Imperator-ognya-i-zheleza.webp" },
+            { "name": "Сюита ледяного ветра", "icon": "pic/WorldBoss/Syuita-ledyanogo-vetra.webp" },
+            { "name": "Чудовищный креститель", "icon": "pic/WorldBoss/CHudovishchnyy-krestitel.webp" },
+            { "name": "Унут Сетеха", "icon": "pic/WorldBoss/Unut-Setekha.webp" },
+            { "name": "Дендро Гипостазис", "icon": "pic/WorldBoss/Dendro-Gipostazis.png" },
+            { "name": "Алгоритм полуизвечной матрицы оператора наблюдения", "icon": "pic/WorldBoss/Poluvechnaya-matritsa-upravleniya.webp" },
+            { "name": "Дракон вечных бедствий", "icon": "pic/WorldBoss/Drakon-vechnykh-bedstviy.webp" },
+            { "name": "Электро папоротник", "icon": "pic/WorldBoss/Elektro-paporotnik.webp" },
+            { "name": "Пернатый плесенник", "icon": "pic/WorldBoss/Pernatyy-plesennik.webp" },
+            { "name": "Змей руин", "icon": "pic/WorldBoss/Zmey-ruin.webp" },
+            { "name": "Стая вишапов глубин", "icon": "pic/WorldBoss/Staya-vishapov-glubin.webp" },
+            { "name": "Золотой волчий вожак", "icon": "pic/WorldBoss/Golden-Wolflord.png" },
+            { "name": "Гидро Гипостазис", "icon": "pic/WorldBoss/Gidro-Gipostazis.png" },
+            { "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/Cryo_Hypostasis.webp" },
+            { "name": "Древний геовишап", "icon": "pic/WorldBoss/Drevniy-geovishap.webp" },
+            { "name": "Гео гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Rock.png" },
+            { "name": "Электро гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Electric.png" },
+            { "name": "Анемо гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Wind.png" },
+            { "name": "Крио папоротник", "icon": "pic/WorldBoss/UI_MonsterIcon_cryo_regisvine.png" },
+            { "name": "Пиро орхидея", "icon": "pic/WorldBoss/UI_MonsterIcon_Regisvine_Fire.png" },
+            { "name": "Океанид", "icon": "pic/WorldBoss/Okeanid.webp" }
+        ];
+        
+        // Еженедельные боссы
+        const WEEKLY_BOSSES = [
+            { "name": "Игра перед вратами", "icon": "pic/Allweeklybosses/Igra-pered-vratami.webp" },
+            { "name": "Владыка истлевшего первобытного пламени", "icon": "pic/Allweeklybosses/Lord-of-Eroded-Primal-Fire.webp" },
+            { "name": "Слуга", "icon": "pic/Allweeklybosses/Nomer-chetyre-iz-Predvestnikov-Fatui_-Arlekino.webp" },
+            { "name": "Всепожирающий нарвал", "icon": "pic/Allweeklybosses/Vsepozhirayushchiy-narval.webp" },
+            { "name": "Страж оазиса Апепа", "icon": "pic/Allweeklybosses/Strazh-oazisa-Apepa.webp" },
+            { "name": "Сёки но Ками", "icon": "pic/Allweeklybosses/Syeki-no-Kami.webp" },
+            { "name": "Магацу митакэ Наруками но микото", "icon": "pic/Allweeklybosses/m_29060201.webp" },
+            { "name": "Синьора", "icon": "pic/Allweeklybosses/Sinora.png" },
+            { "name": "Аждаха", "icon": "pic/Allweeklybosses/Azhdaha.png" },
+            { "name": "Чайльд", "icon": "pic/Allweeklybosses/Childe.png" },
+            { "name": "Лупус Бореалис, Волчий лорд", "icon": "pic/Allweeklybosses/UI_MonsterIcon_LupiBoreas.png" },
+            { "name": "Ужас бури", "icon": "pic/Allweeklybosses/Stormterror.png" }
+        ];
+        
+        // Местные Легенды
+        const LOCAL_LEGENDS = [
+            { "name": "Сигурд", "icon": "pic/LocalLegends/Sigurd.png", "guideUrl": "#" },
+            { "name": "Волшебные рыцари-близнецы", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-284766-1-800x476.jpg", "guideUrl": "https://wotpack.ru/volshebnye-rycari-bliznecy-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Окружной судья океана", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-284964-4.jpg", "guideUrl": "https://wotpack.ru/okruzhnoj-sudja-okeana-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Дева озера Вивианна", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283768-1-800x425.jpg", "guideUrl": "https://wotpack.ru/deva-ozera-vivianna-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Дева озера Нинианна", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283708-1-800x423.jpg", "guideUrl": "https://wotpack.ru/deva-ozera-ninianna-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Угасающий старый солдат", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283590-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/ugasajushhij-staryj-soldat-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Владыка отшельников Доварху", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283520-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/vladyka-otshelnikov-dovarhu-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Меч ущелья", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283554-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/mech-ushhelja-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Железный виконт", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-284964-10.jpg", "guideUrl": "https://wotpack.ru/zheleznyj-vikont-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Автоматический генератор полей сверхвычислений", "icon": "https://wotpack.ru/wp-content/uploads/2023/09/word-image-301036-4.jpeg", "guideUrl": "https://wotpack.ru/avtomaticheskij-generator-polej-sverhvychislenij-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Лиахра Блистательная", "icon": "https://wotpack.ru/wp-content/uploads/2023/09/word-image-301327-4.jpeg", "guideUrl": "https://wotpack.ru/liahra-blistatelnaja-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Изольт", "icon": "https://wotpack.ru/wp-content/uploads/2023/09/word-image-301389-1-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/izolt-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Шассанион", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-321383-7-800x450.jpeg", "guideUrl": "https://wotpack.ru/shassanion-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Деянейра Снежневна", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/1-10-800x450.jpg", "guideUrl": "https://wotpack.ru/dejanejra-snezhnevna-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Роки Авилдсен", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-321618-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/roki-avildsen-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Магический меч Круж", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-322447-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/magicheskij-mech-kruzh-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Лиям", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-321469-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/lijam-v-genshin-impact-kak-najti-i-pobedit/" },
+            { "name": "Киней", "icon": "https://wotpack.ru/wp-content/uploads/2024/04/Kinej-v-Genshin-Impact-800x450.jpg", "guideUrl": "https://wotpack.ru/kinej-v-genshin-impact-kak-najti-i-pobedit/" },
 
-                { "name": "Три полихромные звезды", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/mestnaya-legenda-tri-polihromnye-zvezdy-3-800x449.jpg", "guideUrl": "https://wotpack.ru/tri-polihromnye-zvezdy-v-genshin-impact-kak-nayti-i-pobedit-vasiliya-sidorenko-i-nomonkonova/" },
-                { "name": "Косихо", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/kosiho-v-genshin-impact-kak-nayti-i-pobedit-800x450.jpg", "guideUrl": "https://wotpack.ru/kosiho-v-genshin-impact-kak-nayti-i-pobedit-cherepahu/" },
-                { "name": "Сапфо среди волн", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/sapfo-sredi-voln-v-genshin-impact-kak-nayti-i-pobedit-800x450.jpg", "guideUrl": "https://wotpack.ru/sapfo-sredi-voln-v-genshin-impact-kak-nayti-i-pobedit/" },
-                { "name": "Балачко", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/balachko-v-genshin-impact-kak-nayti-i-pobedit-397x206.jpg", "guideUrl": "https://wotpack.ru/balachko-v-genshin-impact-kak-nayti-i-pobedit/" },
-                { "name": "Рилай", "icon": "https://wotpack.ru/wp-content/uploads/2024/11/rilay-v-genshin-impact-800x450.jpg", "guideUrl": "https://wotpack.ru/rilay-v-genshin-impact-kak-nayti-i-pobedit/" },
-                { "name": "Короля кабанов", "icon": "https://wotpack.ru/wp-content/uploads/2021/11/%D0%BA%D0%BE%D1%80%D0%BE%D0%BB%D1%8C-%D1%81%D0%BD%D0%B5%D0%B6%D0%BD%D1%8B%D1%85-%D0%BA%D0%B0%D0%B1%D0%B0%D0%BD%D0%BE%D0%B2-348x220.jpg", "guideUrl": "https://wotpack.ru/genshin-impact-ah-svezhee-mjaso-prohozhdenie-kvesta-gajd/" },
-                { "name": "Бронзовый замок", "icon": "https://wotpack.ru/wp-content/uploads/2024/11/bronzovyy-2.jpg", "guideUrl": "https://wotpack.ru/bronzovyy-zamok-v-genshin-impact-kak-nayti-i-pobedit/" },
-                { "name": "Ничтожный", "icon": "https://wotpack.ru/wp-content/uploads/2025/03/nichtozhnyy-v-mire-vid.jpg", "guideUrl": "https://wotpack.ru/nichtozhnyy-v-genshin-impact-kak-nayti-i-pobedit/" },
-                { "name": "Пик", "icon": "https://wotpack.ru/wp-content/uploads/2025/03/pik-v-genshin-impact-kak-pobedit-mutanta-730x411.jpg", "guideUrl": "https://wotpack.ru/pik-v-genshin-impact-kak-nayti-i-pobedit-mutanta/" },
-                { "name": "Боевой козел и Железный коготь", "icon": "https://wotpack.ru/wp-content/uploads/2025/03/boevoy-kozyol-i-zheleznyy-kogot-v-genshin-impact_-kak-nayti-i-pobedit-730x411.jpg", "guideUrl": "https://wotpack.ru/boevoy-kozyol-i-zheleznyy-kogot-v-genshin-impact-kak-nayti-i-pobedit/" },
+            { "name": "Три полихромные звезды", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/mestnaya-legenda-tri-polihromnye-zvezdy-3-800x449.jpg", "guideUrl": "https://wotpack.ru/tri-polihromnye-zvezdy-v-genshin-impact-kak-nayti-i-pobedit-vasiliya-sidorenko-i-nomonkonova/" },
+            { "name": "Косихо", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/kosiho-v-genshin-impact-kak-nayti-i-pobedit-800x450.jpg", "guideUrl": "https://wotpack.ru/kosiho-v-genshin-impact-kak-nayti-i-pobedit-cherepahu/" },
+            { "name": "Сапфо среди волн", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/sapfo-sredi-voln-v-genshin-impact-kak-nayti-i-pobedit-800x450.jpg", "guideUrl": "https://wotpack.ru/sapfo-sredi-voln-v-genshin-impact-kak-nayti-i-pobedit/" },
+            { "name": "Балачко", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/balachko-v-genshin-impact-kak-nayti-i-pobedit-397x206.jpg", "guideUrl": "https://wotpack.ru/balachko-v-genshin-impact-kak-nayti-i-pobedit/" },
+            { "name": "Рилай", "icon": "https://wotpack.ru/wp-content/uploads/2024/11/rilay-v-genshin-impact-800x450.jpg", "guideUrl": "https://wotpack.ru/rilay-v-genshin-impact-kak-nayti-i-pobedit/" },
+            { "name": "Короля кабанов", "icon": "https://wotpack.ru/wp-content/uploads/2021/11/%D0%BA%D0%BE%D1%80%D0%BE%D0%BB%D1%8C-%D1%81%D0%BD%D0%B5%D0%B6%D0%BD%D1%8B%D1%85-%D0%BA%D0%B0%D0%B1%D0%B0%D0%BD%D0%BE%D0%B2-348x220.jpg", "guideUrl": "https://wotpack.ru/genshin-impact-ah-svezhee-mjaso-prohozhdenie-kvesta-gajd/" },
+            { "name": "Бронзовый замок", "icon": "https://wotpack.ru/wp-content/uploads/2024/11/bronzovyy-2.jpg", "guideUrl": "https://wotpack.ru/bronzovyy-zamok-v-genshin-impact-kak-nayti-i-pobedit/" },
+            { "name": "Ничтожный", "icon": "https://wotpack.ru/wp-content/uploads/2025/03/nichtozhnyy-v-mire-vid.jpg", "guideUrl": "https://wotpack.ru/nichtozhnyy-v-genshin-impact-kak-nayti-i-pobedit/" },
+            { "name": "Пик", "icon": "https://wotpack.ru/wp-content/uploads/2025/03/pik-v-genshin-impact-kak-pobedit-mutanta-730x411.jpg", "guideUrl": "https://wotpack.ru/pik-v-genshin-impact-kak-nayti-i-pobedit-mutanta/" },
+            { "name": "Боевой козел и Железный коготь", "icon": "https://wotpack.ru/wp-content/uploads/2025/03/boevoy-kozyol-i-zheleznyy-kogot-v-genshin-impact_-kak-nayti-i-pobedit-730x411.jpg", "guideUrl": "https://wotpack.ru/boevoy-kozyol-i-zheleznyy-kogot-v-genshin-impact-kak-nayti-i-pobedit/" },
 
-                { "name": "Теночцитока", "icon": "https://wotpack.ru/wp-content/uploads/2025/07/posledniy-vyzhivshiy-iz-tenochtsitoka-v-genshin-impact-730x455.jpg", "guideUrl": "https://wotpack.ru/posledniy-vyzhivshiy-iz-tenochtsitoka-v-genshin-impact-kak-nayti-i-pobedit/" },
+            { "name": "Теночцитока", "icon": "https://wotpack.ru/wp-content/uploads/2025/07/posledniy-vyzhivshiy-iz-tenochtsitoka-v-genshin-impact-730x455.jpg", "guideUrl": "https://wotpack.ru/posledniy-vyzhivshiy-iz-tenochtsitoka-v-genshin-impact-kak-nayti-i-pobedit/" },
 
-                { "name": "Царь-краб, хозяин дворца", "icon": "https://wotpack.ru/wp-content/uploads/2025/09/word-image-546429-2.jpeg", "guideUrl": "https://wotpack.ru/tsarskiy-krab-v-genshin-impact-kak-pobedit-i-proyti-ispytanie/" },
-                { "name": "Сигурд", "icon": "https://wotpack.ru/wp-content/uploads/2025/09/sigurd-v-genshin-impact-730x411.jpg", "guideUrl": "https://wotpack.ru/sigurd-v-genshin-impact-kak-pobedit-i-proyti-ispytanie/" },
-                { "name": "Раскольников", "icon": "https://wotpack.ru/wp-content/uploads/2025/09/raskolnikov-v-genshin-impact-730x411.jpg", "guideUrl": "https://wotpack.ru/raskolnikov-v-genshin-impact-kak-pobedit-i-proyti-ispytanie/" },
-                
-                { "name": "Ицзи и Тяньюнь", "icon": "https://wotpack.ru/wp-content/uploads/2024/01/20240131070630.jpg", "guideUrl": "https://wotpack.ru/vladyki-gor-chichzhan-v-genshin-impact-kak-najti-i-pobedit-iczi-i-tjanjun/" },
-            ];
+            { "name": "Царь-краб, хозяин дворца", "icon": "https://wotpack.ru/wp-content/uploads/2025/09/word-image-546429-2.jpeg", "guideUrl": "https://wotpack.ru/tsarskiy-krab-v-genshin-impact-kak-pobedit-i-proyti-ispytanie/" },
+            { "name": "Сигурд", "icon": "https://wotpack.ru/wp-content/uploads/2025/09/sigurd-v-genshin-impact-730x411.jpg", "guideUrl": "https://wotpack.ru/sigurd-v-genshin-impact-kak-pobedit-i-proyti-ispytanie/" },
+            { "name": "Раскольников", "icon": "https://wotpack.ru/wp-content/uploads/2025/09/raskolnikov-v-genshin-impact-730x411.jpg", "guideUrl": "https://wotpack.ru/raskolnikov-v-genshin-impact-kak-pobedit-i-proyti-ispytanie/" },
             
+            { "name": "Ицзи и Тяньюнь", "icon": "https://wotpack.ru/wp-content/uploads/2024/01/20240131070630.jpg", "guideUrl": "https://wotpack.ru/vladyki-gor-chichzhan-v-genshin-impact-kak-najti-i-pobedit-iczi-i-tjanjun/" },
+        ];
+
+        // Инициализация при загрузке DOM
+        document.addEventListener('DOMContentLoaded', () => {
             // Генерация или получение UID
             function getOrCreateUID() {
                 let uid = localStorage.getItem('genshinRouletteUID');
@@ -734,6 +1102,7 @@
                 }
                 return uid;
             }
+            
             const currentUserUID = getOrCreateUID();
             
             // Конфигурация
@@ -783,6 +1152,7 @@
             const clearHistoryButton = document.getElementById('clear-history-button');
             const showFullHistoryButton = document.getElementById('show-full-history-button');
             const themeToggle = document.getElementById('theme-toggle');
+            const languageToggle = document.getElementById('language-toggle');
             const settingsToggle = document.getElementById('settings-toggle');
             const settingsPanel = document.getElementById('settings-panel');
             const teamSizeSelect = document.getElementById('team-size');
@@ -818,6 +1188,21 @@
             const fullHistoryModalContentInner = document.getElementById('full-history-modal-content-inner');
             const fullHistoryModalCloseButton = document.getElementById('full-history-modal-close');
             
+            // Установка языка при загрузке
+            setLanguage(currentLang);
+            
+            // Переключение языка
+            languageToggle.addEventListener('click', () => {
+                const newLang = currentLang === 'ru' ? 'en' : 'ru';
+                setLanguage(newLang);
+                
+                // Показываем анимацию смены языка
+                languageToggle.classList.add('neon-glow');
+                setTimeout(() => {
+                    languageToggle.classList.remove('neon-glow');
+                }, 1000);
+            });
+            
             // Инициализация темы
             function initTheme() {
                 if (config.darkMode) {
@@ -834,11 +1219,23 @@
                 config.darkMode = !config.darkMode;
                 initTheme();
                 localStorage.setItem('theme', config.darkMode ? 'dark' : 'light');
+                
+                // Анимация переключения
+                themeToggle.classList.add('neon-glow');
+                setTimeout(() => {
+                    themeToggle.classList.remove('neon-glow');
+                }, 1000);
             }
             
             // Переключение настроек
             function toggleSettings() {
                 settingsPanel.classList.toggle('open');
+                
+                // Анимация
+                settingsToggle.classList.add('neon-glow');
+                setTimeout(() => {
+                    settingsToggle.classList.remove('neon-glow');
+                }, 500);
             }
             
             // Изменение категории
@@ -864,15 +1261,21 @@
                 }
             }
             
-            // Создание карточки персонажа
+            // Создание карточки персонажа (улучшенный дизайн)
             function createCharacterCard(character) {
                 const card = document.createElement('div');
-                card.className = `flex flex-col items-center p-2 rounded-lg bg-white dark:bg-gray-700 shadow-sm text-center flex-shrink-0 w-[100px] sm:w-[120px] md:w-[130px] lg:w-[140px]`;
+                card.className = `flex flex-col items-center p-4 rounded-2xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 shadow-lg hover:shadow-xl transition-all duration-300 text-center flex-shrink-0 w-[130px] sm:w-[150px] hover:scale-105 border border-gray-100 dark:border-gray-700`;
                 card.innerHTML = `
-                    <img src="${character.icon}" alt="${character.name}" 
-                         class="w-16 h-16 sm:w-20 sm:h-20 rounded-full mb-1 object-cover border-2"
-                         onerror="this.onerror=null;this.src='https://placehold.co/80x80/EFEAE4/4A4A4A?text=N/A'">
-                    <p class="font-medium text-sm truncate w-full dark:text-white">${character.name}</p>
+                    <div class="relative mb-3">
+                        <img src="${character.icon}" alt="${character.name}" 
+                             class="w-20 h-20 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md"
+                             onerror="this.onerror=null;this.src='https://placehold.co/80x80/6366f1/ffffff?text=${character.name.substring(0,2)}'">
+                        <div class="absolute -bottom-2 -right-2 w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center border-2 border-white dark:border-gray-700">
+                            <img src="pic/Elements/Element_${character.element}.webp" alt="${character.element}" 
+                                  class="w-6 h-6" title="${character.element}">
+                        </div>
+                    </div>
+                    <p class="font-bold text-sm truncate w-full dark:text-white">${character.name}</p>
                 `;
                 return card;
             }
@@ -883,7 +1286,7 @@
                 card.className = `boss-card`;
                 card.innerHTML = `
                     <img src="${boss.icon}" alt="${boss.name}" 
-                         onerror="this.onerror=null;this.src='https://placehold.co/80x80/EFEAE4/4A4A4A?text=N/A'">
+                         onerror="this.onerror=null;this.src='https://placehold.co/100x100/5BC0DE/ffffff?text=BOSS'">
                     <h3 class="font-bold text-lg dark:text-white">${boss.name}</h3>
                 `;
                 return card;
@@ -897,9 +1300,9 @@
                 const isClickable = legend.guideUrl && legend.guideUrl !== "#";
                 card.innerHTML = `
                     <img src="${legend.icon}" alt="${legend.name}" 
-                         onerror="this.onerror=null;this.src='https://placehold.co/80x80/EFEAE4/4A4A4A?text=N/A'">
+                         onerror="this.onerror=null;this.src='https://placehold.co/100x100/9B59B6/ffffff?text=LEGEND'">
                     <h3 class="font-bold text-lg dark:text-white">${legend.name}</h3>
-                    <p class="text-sm dark:text-gray-300">${isClickable ? 'Нажмите чтобы узнать про Легенду' : 'Нет ссылки на гайд'}</p>
+                    <p class="text-sm dark:text-gray-300">${isClickable ? t('messages.clickForGuide') : t('messages.noGuideLink')}</p>
                 `;
                 
                 if (isClickable) {
@@ -915,7 +1318,7 @@
             // Создание карточки персонажа для выбора (в секции "Мои персонажи")
             function createPlayerCharacterSelectionCard(character) {
                 const card = document.createElement('div');
-                card.className = `player-char-card flex flex-col items-center p-1 rounded-lg bg-white dark:bg-gray-800 shadow-sm text-center cursor-pointer relative`;
+                card.className = `player-char-card flex flex-col items-center p-2 rounded-lg bg-white dark:bg-gray-800 shadow-sm text-center cursor-pointer relative`;
                 card.setAttribute('data-name', character.name);
                 const isSelected = playerCharacters.some(c => c.name === character.name);
                 if (isSelected) {
@@ -967,11 +1370,11 @@
                 bosses.forEach(boss => {
                     const isExcluded = config.excludedBosses[category].includes(boss.name);
                     const bossToggle = document.createElement('div');
-                    bossToggle.className = 'boss-toggle flex items-center';
+                    bossToggle.className = 'boss-toggle flex items-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800 mb-2';
                     bossToggle.innerHTML = `
                         <input type="checkbox" id="boss-${category}-${boss.name.replace(/\s+/g, '-')}" 
-                               ${isExcluded ? '' : 'checked'} class="boss-toggle-checkbox">
-                        <label for="boss-${category}-${boss.name.replace(/\s+/g, '-')}" class="ml-2">${boss.name}</label>
+                               ${isExcluded ? '' : 'checked'} class="boss-toggle-checkbox w-5 h-5 text-indigo-600 rounded focus:ring-indigo-500">
+                        <label for="boss-${category}-${boss.name.replace(/\s+/g, '-')}" class="ml-3 dark:text-gray-300">${boss.name}</label>
                     `;
                     bossesSettingsContainer.appendChild(bossToggle);
                     
@@ -1143,16 +1546,16 @@
                     
                     itemsToShow.forEach((item) => {
                         const itemElement = document.createElement('div');
-                        itemElement.className = `bg-[#FDF8F0] dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-[#EFEAE4] dark:border-gray-600 ${item.type === 'team' ? 'history-item' : 'boss-history-item'}`;
+                        itemElement.className = `modern-card p-6 ${item.type === 'team' ? 'history-item' : 'boss-history-item'}`;
                         
                         const title = document.createElement('h3');
-                        title.className = 'text-lg font-semibold mb-3 dark:text-white';
+                        title.className = 'text-xl font-semibold mb-4 dark:text-white';
                         
                         if (item.type === 'team') {
                             const teamName = item.name ? `"${item.name}" - ` : '';
-                            title.textContent = `${teamName}Отряд (${new Date(item.date).toLocaleString()})`;
+                            title.textContent = `${teamName}${t('categories.characters')} (${new Date(item.date).toLocaleString()})`;
                         } else if (item.type === 'legend') {
-                            title.textContent = `${item.name} (Местная легенда) (${new Date(item.date).toLocaleString()})`;
+                            title.textContent = `${item.name} (${t('categories.localLegends')}) (${new Date(item.date).toLocaleString()})`;
                         } else {
                             title.textContent = `${item.name} (${new Date(item.date).toLocaleString()})`;
                         }
@@ -1160,7 +1563,7 @@
                         itemElement.appendChild(title);
                         
                         const container = document.createElement('div');
-                        container.className = 'flex flex-wrap justify-center gap-3';
+                        container.className = 'flex flex-wrap justify-center gap-4';
                         
                         if (item.type === 'team') {
                             item.characters.forEach(char => {
@@ -1184,20 +1587,20 @@
                 const allHistory = [...historyTeams, ...historyBosses].sort((a, b) => new Date(b.date) - new Date(a.date));
                 
                 if (allHistory.length === 0) {
-                    fullHistoryModalContentInner.innerHTML = '<p class="text-center text-[#888] dark:text-gray-400">История пуста.</p>';
+                    fullHistoryModalContentInner.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400">История пуста.</p>';
                 } else {
                     allHistory.forEach((item) => {
                         const itemElement = document.createElement('div');
-                        itemElement.className = `bg-[#EFEAE4] dark:bg-gray-700 rounded-xl p-4 shadow-sm border border-[#EFEAE4] dark:border-gray-600 ${item.type === 'team' ? 'history-item' : 'boss-history-item'}`;
+                        itemElement.className = `modern-card p-6 ${item.type === 'team' ? 'history-item' : 'boss-history-item'}`;
                         
                         const title = document.createElement('h3');
-                        title.className = 'text-lg font-semibold mb-3 text-[#4A4A4A] dark:text-white';
+                        title.className = 'text-lg font-semibold mb-4 text-gray-800 dark:text-white';
                         
                         if (item.type === 'team') {
                             const teamName = item.name ? `"${item.name}" - ` : '';
-                            title.textContent = `${teamName}Отряд (${new Date(item.date).toLocaleString()})`;
+                            title.textContent = `${teamName}${t('categories.characters')} (${new Date(item.date).toLocaleString()})`;
                         } else if (item.type === 'legend') {
-                            title.textContent = `${item.name} (Местная легенда) (${new Date(item.date).toLocaleString()})`;
+                            title.textContent = `${item.name} (${t('categories.localLegends')}) (${new Date(item.date).toLocaleString()})`;
                         } else {
                             title.textContent = `${item.name} (${new Date(item.date).toLocaleString()})`;
                         }
@@ -1205,7 +1608,7 @@
                         itemElement.appendChild(title);
                         
                         const container = document.createElement('div');
-                        container.className = 'flex gap-3 overflow-x-auto pb-2 custom-scrollbar';
+                        container.className = 'flex gap-4 overflow-x-auto pb-2 custom-scrollbar';
                         
                         if (item.type === 'team') {
                             item.characters.forEach(char => {
@@ -1213,9 +1616,9 @@
                                 card.className = 'full-history-character-card';
                                 card.innerHTML = `
                                     <img src="${char.icon}" alt="${char.name}" 
-                                         class="w-16 h-16 rounded-full mb-1 object-cover border-2"
-                                         onerror="this.onerror=null;this.src='https://placehold.co/64x64/EFEAE4/4A4A4A?text=N/A'">
-                                    <p class="font-medium text-sm truncate w-full">${char.name}</p>
+                                         class="w-16 h-16 rounded-full mb-2 object-cover border-2 border-gray-200 dark:border-gray-700"
+                                         onerror="this.onerror=null;this.src='https://placehold.co/64x64/6366f1/ffffff?text=${char.name.substring(0,2)}'">
+                                    <p class="font-bold text-sm truncate w-full dark:text-white">${char.name}</p>
                                 `;
                                 container.appendChild(card);
                             });
@@ -1224,10 +1627,10 @@
                             legendCard.className = 'full-history-character-card';
                             legendCard.innerHTML = `
                                 <img src="${item.icon}" alt="${item.name}" 
-                                     class="w-16 h-16 rounded-full mb-1 object-cover border-2"
-                                     onerror="this.onerror=null;this.src='https://placehold.co/64x64/EFEAE4/4A4A4A?text=N/A'">
-                                <p class="font-medium text-sm truncate w-full">${item.name}</p>
-                                <p class="text-xs text-gray-500 dark:text-gray-400">Местная легенда</p>
+                                     class="w-16 h-16 rounded-full mb-2 object-cover border-2 border-purple-500"
+                                     onerror="this.onerror=null;this.src='https://placehold.co/64x64/9B59B6/ffffff?text=LEGEND'">
+                                <p class="font-bold text-sm truncate w-full dark:text-white">${item.name}</p>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">${t('categories.localLegends')}</p>
                             `;
                             container.appendChild(legendCard);
                         } else {
@@ -1235,9 +1638,9 @@
                             bossCard.className = 'full-history-character-card';
                             bossCard.innerHTML = `
                                 <img src="${item.icon}" alt="${item.name}" 
-                                     class="w-16 h-16 rounded-full mb-1 object-cover border-2"
-                                     onerror="this.onerror=null;this.src='https://placehold.co/64x64/EFEAE4/4A4A4A?text=N/A'">
-                                <p class="font-medium text-sm truncate w-full">${item.name}</p>
+                                     class="w-16 h-16 rounded-full mb-2 object-cover border-2 border-blue-500"
+                                     onerror="this.onerror=null;this.src='https://placehold.co/64x64/5BC0DE/ffffff?text=BOSS'">
+                                <p class="font-bold text-sm truncate w-full dark:text-white">${item.name}</p>
                             `;
                             container.appendChild(bossCard);
                         }
@@ -1273,6 +1676,7 @@
                 });
                 localStorage.setItem(`${currentUserUID}_genshinTeamsHistory`, JSON.stringify(historyTeams));
                 renderHistory();
+                alert(t('messages.teamSaved'));
             }
             
             // Сохранение босса в историю
@@ -1288,6 +1692,7 @@
                 historyBosses.unshift(bossData);
                 localStorage.setItem(`${currentUserUID}_genshinBossesHistory`, JSON.stringify(historyBosses));
                 renderHistory();
+                alert(t(isLegendType ? 'messages.legendSaved' : 'messages.bossSaved'));
             }
             
             // Очистка истории
@@ -1304,13 +1709,14 @@
             async function spinCharacters() {
                 const availableCharsForSpin = playerCharacters.length > 0 ? playerCharacters : allCharacters;
                 if (isSpinning || availableCharsForSpin.length < config.teamSize) {
-                    alert(`Недостаточно персонажей для формирования отряда из ${config.teamSize} человек. Доступно: ${availableCharsForSpin.length}`);
+                    alert(t('messages.notEnoughChars', config.teamSize, availableCharsForSpin.length));
                     return;
                 }
                 
                 isSpinning = true;
                 spinCharactersButton.disabled = true;
-                spinCharactersButton.textContent = 'Крутим...';
+                spinCharactersButton.innerHTML = `<span data-i18n="buttons.spinning">Крутим...</span>`;
+                setLanguage(currentLang); // Обновляем текст кнопки
                 charactersResult.innerHTML = '';
                 charactersPlaceholder.classList.add('hidden');
                 charactersLoader.classList.remove('hidden');
@@ -1331,7 +1737,7 @@
                 
                 for (let i = 0; i < teamSize; i++) {
                     const tempDiv = document.createElement('div');
-                    tempDiv.className = 'flex flex-col items-center flex-shrink-0 w-[100px] sm:w-[120px] md:w-[130px] lg:w-[140px]';
+                    tempDiv.className = 'flex flex-col items-center flex-shrink-0 w-[130px] sm:w-[150px]';
                     charactersResult.appendChild(tempDiv);
                     
                     let startTime = Date.now();
@@ -1362,7 +1768,8 @@
                 // Завершение рулетки
                 charactersLoader.classList.add('hidden');
                 spinCharactersButton.disabled = false;
-                spinCharactersButton.textContent = 'Крутить ещё!';
+                spinCharactersButton.innerHTML = `<span data-i18n="buttons.spinAgain">Крутить ещё!</span>`;
+                setLanguage(currentLang); // Обновляем текст кнопки
                 isSpinning = false;
                 
                 renderCharactersResult(selectedTeam);
@@ -1374,7 +1781,8 @@
                 
                 isSpinning = true;
                 spinWorldBossButton.disabled = true;
-                spinWorldBossButton.textContent = 'Выбираем...';
+                spinWorldBossButton.innerHTML = `<span data-i18n="buttons.selecting">Выбираем...</span>`;
+                setLanguage(currentLang);
                 worldBossResult.innerHTML = '';
                 worldBossPlaceholder.classList.add('hidden');
                 worldBossLoader.classList.remove('hidden');
@@ -1388,10 +1796,11 @@
                 );
                 
                 if (availableBosses.length === 0) {
-                    worldBossResult.innerHTML = '<p class="text-center text-red-500">Нет доступных боссов! Проверьте настройки.</p>';
+                    worldBossResult.innerHTML = `<p class="text-center text-red-500">${t('messages.noBossesAvailable')}</p>`;
                     worldBossLoader.classList.add('hidden');
                     spinWorldBossButton.disabled = false;
-                    spinWorldBossButton.textContent = 'Выбрать ещё!';
+                    spinWorldBossButton.innerHTML = `<span data-i18n="buttons.selectAgain">Выбрать ещё!</span>`;
+                    setLanguage(currentLang);
                     isSpinning = false;
                     return;
                 }
@@ -1399,7 +1808,8 @@
                 const randomBoss = availableBosses[Math.floor(Math.random() * availableBosses.length)];
                 worldBossLoader.classList.add('hidden');
                 spinWorldBossButton.disabled = false;
-                spinWorldBossButton.textContent = 'Выбрать ещё!';
+                spinWorldBossButton.innerHTML = `<span data-i18n="buttons.selectAgain">Выбрать ещё!</span>`;
+                setLanguage(currentLang);
                 isSpinning = false;
                 
                 renderBossResult(randomBoss, true);
@@ -1411,7 +1821,8 @@
                 
                 isSpinning = true;
                 spinWeeklyBossButton.disabled = true;
-                spinWeeklyBossButton.textContent = 'Выбираем...';
+                spinWeeklyBossButton.innerHTML = `<span data-i18n="buttons.selecting">Выбираем...</span>`;
+                setLanguage(currentLang);
                 weeklyBossResult.innerHTML = '';
                 weeklyBossPlaceholder.classList.add('hidden');
                 weeklyBossLoader.classList.remove('hidden');
@@ -1425,10 +1836,11 @@
                 );
                 
                 if (availableBosses.length === 0) {
-                    weeklyBossResult.innerHTML = '<p class="text-center text-red-500">Нет доступных боссов! Проверьте настройки.</p>';
+                    weeklyBossResult.innerHTML = `<p class="text-center text-red-500">${t('messages.noBossesAvailable')}</p>`;
                     weeklyBossLoader.classList.add('hidden');
                     spinWeeklyBossButton.disabled = false;
-                    spinWeeklyBossButton.textContent = 'Выбрать ещё!';
+                    spinWeeklyBossButton.innerHTML = `<span data-i18n="buttons.selectAgain">Выбрать ещё!</span>`;
+                    setLanguage(currentLang);
                     isSpinning = false;
                     return;
                 }
@@ -1436,7 +1848,8 @@
                 const randomBoss = availableBosses[Math.floor(Math.random() * availableBosses.length)];
                 weeklyBossLoader.classList.add('hidden');
                 spinWeeklyBossButton.disabled = false;
-                spinWeeklyBossButton.textContent = 'Выбрать ещё!';
+                spinWeeklyBossButton.innerHTML = `<span data-i18n="buttons.selectAgain">Выбрать ещё!</span>`;
+                setLanguage(currentLang);
                 isSpinning = false;
                 
                 renderBossResult(randomBoss, false);
@@ -1448,7 +1861,8 @@
                 
                 isSpinning = true;
                 spinLegendButton.disabled = true;
-                spinLegendButton.textContent = 'Выбираем...';
+                spinLegendButton.innerHTML = `<span data-i18n="buttons.selecting">Выбираем...</span>`;
+                setLanguage(currentLang);
                 legendResult.innerHTML = '';
                 legendPlaceholder.classList.add('hidden');
                 legendLoader.classList.remove('hidden');
@@ -1462,10 +1876,11 @@
                 );
                 
                 if (availableLegends.length === 0) {
-                    legendResult.innerHTML = '<p class="text-center text-red-500">Нет доступных легенд! Проверьте настройки.</p>';
+                    legendResult.innerHTML = `<p class="text-center text-red-500">${t('messages.noLegendsAvailable')}</p>`;
                     legendLoader.classList.add('hidden');
                     spinLegendButton.disabled = false;
-                    spinLegendButton.textContent = 'Выбрать ещё!';
+                    spinLegendButton.innerHTML = `<span data-i18n="buttons.selectAgain">Выбрать ещё!</span>`;
+                    setLanguage(currentLang);
                     isSpinning = false;
                     return;
                 }
@@ -1473,7 +1888,8 @@
                 const randomLegend = availableLegends[Math.floor(Math.random() * availableLegends.length)];
                 legendLoader.classList.add('hidden');
                 spinLegendButton.disabled = false;
-                spinLegendButton.textContent = 'Выбрать ещё!';
+                spinLegendButton.innerHTML = `<span data-i18n="buttons.selectAgain">Выбрать ещё!</span>`;
+                setLanguage(currentLang);
                 isSpinning = false;
                 
                 renderLegendResult(randomLegend);
@@ -1524,11 +1940,11 @@
             spinLegendButton.addEventListener('click', spinLocalLegend);
             
             clearHistoryButton.addEventListener('click', () => {
-                showConfirmModal('Вы уверены, что хотите очистить всю историю?', clearHistory);
+                showConfirmModal(t('modals.confirm.clearHistory'), clearHistory);
             });
             
             clearPlayerCharactersButton.addEventListener('click', () => {
-                showConfirmModal('Вы уверены, что хотите очистить список ваших персонажей?', clearPlayerCharacters);
+                showConfirmModal(t('modals.confirm.clearCharacters'), clearPlayerCharacters);
             });
             
             showFullHistoryButton.addEventListener('click', showFullHistoryModal);
@@ -1597,6 +2013,24 @@
             renderHistory();
             renderBossSettings();
             changeCategory(); // Показать выбранную категорию при загрузке
+            
+            // Добавляем недостающие переводы
+            translations.ru.messages.clickForGuide = "Нажмите чтобы узнать про Легенду";
+            translations.ru.messages.noGuideLink = "Нет ссылки на гайд";
+            translations.ru.buttons.spinning = "Крутим...";
+            translations.ru.buttons.spinAgain = "Крутить ещё!";
+            translations.ru.buttons.selecting = "Выбираем...";
+            translations.ru.buttons.selectAgain = "Выбрать ещё!";
+            
+            translations.en.messages.clickForGuide = "Click to learn about the Legend";
+            translations.en.messages.noGuideLink = "No guide link";
+            translations.en.buttons.spinning = "Spinning...";
+            translations.en.buttons.spinAgain = "Spin again!";
+            translations.en.buttons.selecting = "Selecting...";
+            translations.en.buttons.selectAgain = "Select again!";
+            
+            // Обновляем переводы после добавления новых ключей
+            setLanguage(currentLang);
         });
     </script>
 </body>