diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -7,56 +7,132 @@
     <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;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        body {
-            font-family: 'Inter', sans-serif;
-            transition: background-color 0.3s, color 0.3s;
+        :root {
+            --primary-gradient: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
+            --secondary-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+            --accent-gradient: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%);
+            --dark-bg: #0f172a;
+            --card-light-bg: #ffffff;
+            --card-dark-bg: rgba(30, 41, 59, 0.7);
+            --glass-bg: rgba(255, 255, 255, 0.1);
+            --border-light: rgba(239, 234, 228, 0.5);
+            --border-dark: rgba(74, 85, 104, 0.5);
+            --text-light: #4A4A4A;
+            --text-dark: #e2e8f0;
+            --placeholder-light: #888;
+            --placeholder-dark: #a0aec0;
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
+
         .dark {
-            background-color: #1a202c;
-            color: #e2e8f0;
+            --card-bg: var(--card-dark-bg);
+            --glass-bg: rgba(15, 23, 42, 0.7);
+            --border-color: var(--border-dark);
+            --text-color: var(--text-dark);
+            --placeholder-color: var(--placeholder-dark);
+            --section-bg: #1e293b;
         }
+
         .light {
-            background-color: #FDF8F0;
-            color: #4A4A4A;
+            --card-bg: var(--card-light-bg);
+            --glass-bg: rgba(255, 255, 255, 0.8);
+            --border-color: var(--border-light);
+            --text-color: var(--text-light);
+            --placeholder-color: var(--placeholder-light);
+            --section-bg: #fdf8f0;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background-color: var(--bg-color, #fdf8f0);
+            color: var(--text-color, #4A4A4A);
+            transition: var(--transition);
+            line-height: 1.6;
+            letter-spacing: -0.02em;
+        }
+
+        .genshin-card {
+            background: var(--glass-bg);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border-radius: 20px;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+            transition: var(--transition);
+            overflow: hidden;
+            position: relative;
         }
+
+        .genshin-card:hover:not(.no-hover) {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+            border-color: rgba(255, 255, 255, 0.2);
+        }
+
+        .genshin-card::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+            transform: rotate(30deg);
+            z-index: 0;
+        }
+
+        .genshin-card > * {
+            position: relative;
+            z-index: 1;
+        }
+
         .loader {
             width: 48px;
             height: 48px;
-            border: 5px solid #FDF8F0;
-            border-bottom-color: #A089D0;
+            border: 5px solid var(--glass-bg);
+            border-bottom-color: #DCA852;
             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;
         }
+
         .settings-panel.open {
             max-height: 1000px;
         }
+
         .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,20 +150,25 @@
                 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: var(--transition);
+            background: var(--card-bg);
+            border-radius: 12px;
         }
+
         .player-char-card.selected {
             border-color: #DCA852;
         }
+
         .player-char-card .remove-btn {
             position: absolute;
             top: -5px;
             right: -5px;
-            background-color: red;
+            background-color: #ff4d4d;
             color: white;
             border-radius: 50%;
             width: 20px;
@@ -99,26 +180,28 @@
             font-weight: bold;
             cursor: pointer;
             opacity: 0;
-            transition: opacity 0.2s;
+            transition: var(--transition);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
         }
+
         .player-char-card:hover .remove-btn {
             opacity: 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);
+            border-radius: 12px;
+            background: var(--card-bg);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
             text-align: center;
             flex-shrink: 0;
             width: 100px;
+            transition: var(--transition);
         }
-        .dark .full-history-character-card {
-            background-color: #4a5568;
-        }
+
         .full-history-character-card img {
             width: 64px;
             height: 64px;
@@ -126,7 +209,13 @@
             margin-bottom: 4px;
             object-fit: cover;
             border: 2px solid #DCA852;
+            transition: var(--transition);
+        }
+
+        .full-history-character-card:hover img {
+            transform: scale(1.05);
         }
+
         .full-history-character-card p {
             font-size: 0.875rem;
             font-weight: 500;
@@ -134,53 +223,69 @@
             overflow: hidden;
             white-space: nowrap;
             width: 100%;
+            color: var(--text-color);
         }
-        .dark .full-history-character-card p {
-            color: #e2e8f0;
-        }
+
         .custom-scrollbar::-webkit-scrollbar {
             height: 8px;
+            width: 8px;
         }
+
         .custom-scrollbar::-webkit-scrollbar-track {
-            background: #f1f1f1;
+            background: rgba(241, 241, 241, 0.1);
             border-radius: 10px;
         }
+
         .custom-scrollbar::-webkit-scrollbar-thumb {
-            background: #888;
+            background: rgba(136, 136, 136, 0.5);
             border-radius: 10px;
         }
+
         .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-            background: #555;
+            background: rgba(85, 85, 85, 0.7);
         }
+
         .dark .custom-scrollbar::-webkit-scrollbar-track {
-            background: #2d3748;
+            background: rgba(45, 55, 72, 0.3);
         }
+
         .dark .custom-scrollbar::-webkit-scrollbar-thumb {
-            background: #a0aec0;
+            background: rgba(160, 174, 192, 0.5);
         }
+
         .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-            background: #cbd5e0;
+            background: rgba(203, 213, 224, 0.7);
         }
+
         .boss-card {
             flex: 1;
             min-width: 200px;
             max-width: 250px;
             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: 16px;
+            border-radius: 16px;
+            background: var(--card-bg);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            transition: var(--transition);
             border: 2px solid #5BC0DE;
-            cursor: pointer;
+            cursor: default;
         }
-        .dark .boss-card {
-            background: #4a5568;
+
+        .boss-card.legend-card {
+            border-color: #9B59B6;
+            background: var(--card-bg);
         }
+
         .boss-card:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+            transform: translateY(-4px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
         }
+
+        .boss-card.legend-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 8px 20px rgba(155, 89, 182, 0.3);
+        }
+
         .boss-card img {
             width: 80px;
             height: 80px;
@@ -188,139 +293,280 @@
             object-fit: cover;
             border: 3px solid #5BC0DE;
             margin-bottom: 8px;
+            transition: var(--transition);
         }
+
+        .boss-card.legend-card img {
+            border-color: #9B59B6;
+        }
+
+        .boss-card:hover img {
+            transform: scale(1.05);
+        }
+
         .boss-card h3 {
-            font-weight: bold;
+            font-weight: 700;
             margin-bottom: 4px;
+            font-size: 1.1rem;
+            color: var(--text-color);
         }
+
         .boss-card p {
-            font-size: 0.9rem;
-            color: #666;
-        }
-        .dark .boss-card p {
-            color: #cbd5e0;
+            font-size: 0.85rem;
+            color: var(--placeholder-color);
         }
-        .category-select {
-            background-color: #FDF8F0;
-            border: 2px solid #EFEAE4;
-            border-radius: 12px;
-            padding: 12px;
+
+        .category-select, .legend-settings {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            padding: 16px;
             margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
         }
-        .dark .category-select {
-            background-color: #2d3748;
-            border-color: #4a5568;
-        }
-        .category-select label {
+
+        .category-select label, .legend-settings label {
             display: block;
             font-weight: 600;
-            margin-bottom: 8px;
-            color: #4A4A4A;
+            margin-bottom: 10px;
+            color: var(--text-color);
+            font-size: 0.95rem;
         }
-        .dark .category-select label {
-            color: #e2e8f0;
-        }
-        .category-select select {
+
+        .category-select select, .legend-settings select {
             width: 100%;
-            padding: 8px 12px;
-            border-radius: 8px;
-            border: 1px solid #ddd;
-            background-color: white;
+            padding: 12px 16px;
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            background: var(--card-bg);
             font-size: 1rem;
+            color: var(--text-color);
+            transition: var(--transition);
         }
-        .dark .category-select select {
-            background-color: #4a5568;
-            color: #e2e8f0;
-            border-color: #718096;
+
+        .category-select select:focus, .legend-settings select:focus {
+            outline: none;
+            border-color: #DCA852;
+            box-shadow: 0 0 0 3px rgba(220, 168, 82, 0.2);
         }
+
         .boss-section {
             margin-bottom: 32px;
         }
+
         .history-item {
             border-left: 4px solid #DCA852;
-            padding-left: 12px;
+            padding-left: 16px;
         }
+
         .boss-history-item {
-            border-left: 4px solid #A089D0;
-            padding-left: 12px;
+            border-left: 4px solid #5BC0DE;
+        }
+
+        .legend-history-item {
+            border-left: 4px solid #9B59B6;
+        }
+
+        .genshin-button {
+            position: relative;
+            overflow: hidden;
+            border-radius: 16px;
+            font-weight: 600;
+            letter-spacing: -0.01em;
+            transition: var(--transition);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .genshin-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: left 0.7s;
+        }
+
+        .genshin-button:hover::before {
+            left: 100%;
+        }
+
+        .genshin-button:active {
+            transform: scale(0.96);
+        }
+
+        .genshin-button-primary {
+            background: var(--primary-gradient);
+            color: white;
+            box-shadow: 0 4px 15px rgba(110, 142, 251, 0.4);
+        }
+
+        .genshin-button-secondary {
+            background: var(--secondary-gradient);
+            color: white;
+            box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4);
         }
-        .legend-section {
+
+        .genshin-button-accent {
+            background: var(--accent-gradient);
+            color: white;
+            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
+        }
+
+        .genshin-button-purple {
             background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
             color: white;
+            box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
         }
-        .legend-section h2 {
+
+        .genshin-button-blue {
+            background: linear-gradient(135deg, #5BC0DE 0%, #3498db 100%);
             color: white;
+            box-shadow: 0 4px 15px rgba(91, 192, 222, 0.4);
         }
-        .legend-card {
-            border: 2px solid #9B59B6;
+
+        h1 {
+            font-weight: 800;
+            font-size: 2.5rem;
+            letter-spacing: -0.03em;
+            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 2px 10px rgba(110, 142, 251, 0.1);
+            margin-bottom: 0.5rem;
+        }
+
+        h2 {
+            font-weight: 700;
+            font-size: 1.875rem;
+            color: var(--text-color);
+        }
+
+        .header-buttons {
+            display: flex;
+            gap: 12px;
+            align-items: center;
         }
-        .legend-settings {
-            background-color: #FDF8F0;
-            border: 2px solid #EFEAE4;
+
+        .lang-toggle {
+            display: flex;
+            gap: 4px;
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
             border-radius: 12px;
-            padding: 12px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            overflow: hidden;
+            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
         }
-        .dark .legend-settings {
-            background-color: #2d3748;
-            border-color: #4a5568;
+
+        .lang-btn {
+            padding: 6px 12px;
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-weight: 500;
+            transition: var(--transition);
+            color: var(--placeholder-color);
         }
-        .legend-settings label {
-            display: block;
-            font-weight: 600;
-            margin-bottom: 8px;
-            color: #4A4A4A;
+
+        .lang-btn.active {
+            background: var(--primary-gradient);
+            color: white;
         }
-        .dark .legend-settings label {
-            color: #e2e8f0;
+
+        .lang-btn:not(.active):hover {
+            background: rgba(0,0,0,0.03);
         }
-        .boss-toggle {
-            margin-bottom: 8px;
-            padding: 8px;
-            border-radius: 8px;
-            transition: background-color 0.2s;
+
+        .dark .lang-btn:not(.active):hover {
+            background: rgba(255,255,255,0.05);
         }
-        .boss-toggle:hover {
-            background-color: #f0f0f0;
+
+        #app-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 1.5rem;
         }
-        .dark .boss-toggle:hover {
-            background-color: #3d4a5c;
+
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 2rem;
+            }
+            
+            h2 {
+                font-size: 1.5rem;
+            }
+            
+            .genshin-card {
+                border-radius: 16px;
+            }
+            
+            .header-buttons {
+                flex-direction: row-reverse;
+                justify-content: space-between;
+            }
         }
-        .boss-toggle input {
-            margin-right: 8px;
+
+        @media (max-width: 480px) {
+            .genshin-button {
+                width: 100%;
+                padding: 14px;
+                font-size: 1.1rem;
+            }
+            
+            #app-container {
+                padding: 1rem;
+            }
+            
+            .characters-grid {
+                grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+            }
+            
+            .lang-toggle {
+                width: 100%;
+            }
         }
     </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">
-                        <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 id="app-container">
+        <header class="text-center mb-12 mt-4">
+            <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6 gap-4">
+                <div class="header-buttons">
+                    <button id="theme-toggle" class="p-3 rounded-xl bg-gray-100 dark:bg-gray-800 shadow-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-all">
+                        <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-3 rounded-xl bg-gray-100 dark:bg-gray-800 shadow-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-all">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
+                <div class="lang-toggle">
+                    <button class="lang-btn active" data-lang="ru">RU</button>
+                    <button class="lang-btn" data-lang="en">EN</button>
+                </div>
             </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">
+            <h1 class="text-center mb-3">Рулетка Genshin Impact</h1>
+            <p class="text-lg text-center max-w-2xl mx-auto text-gray-600 dark:text-gray-300">
                 Случайный выбор персонажей, боссов и местных легенд для вашей игры в Genshin Impact
             </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 genshin-card p-6 mb-8">
+                <h3 class="text-2xl font-bold mb-5 text-center">Настройки рулетки</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-medium mb-2">Количество персонажей в отряде</label>
+                        <select id="team-size" class="w-full p-3 rounded-xl border border-gray-300 dark:border-gray-600">
                             <option value="4">4</option>
                             <option value="3">3</option>
                             <option value="2">2</option>
@@ -328,184 +574,376 @@
                         </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">
+                        <label for="animation-speed" class="block text-sm font-medium mb-2">Скорость анимации</label>
+                        <select id="animation-speed" class="w-full p-3 rounded-xl border border-gray-300 dark:border-gray-600">
                             <option value="fast">Быстрая</option>
                             <option value="medium" selected>Средняя</option>
                             <option value="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-5 text-center mt-8">Мои персонажи</h3>
+                <p class="text-sm text-center mb-5 text-gray-600 dark:text-gray-300">
                     Выберите персонажей, которыми вы владеете, чтобы рулетка использовала только их. Если ни один не выбран, будут использоваться все персонажи.
                 </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 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                </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-8 max-h-60 overflow-y-auto pr-2 custom-scrollbar">
+                    <!-- Characters will be loaded here -->
                 </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="genshin-button genshin-button-accent py-2 px-6 rounded-xl text-sm hidden">
                         Очистить выбранных персонажей
                     </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-5 text-center mt-10">Настройки боссов</h3>
+                <p class="text-sm text-center mb-5 text-gray-600 dark:text-gray-300">
                     Выберите, какие боссы и местные легенды должны участвовать в рандомизации
                 </p>
-                
-                <div class="mb-4">
+                <div class="mb-6">
                     <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">
+                        <select id="boss-category-select" class="w-full p-3 rounded-xl border border-gray-300 dark:border-gray-600">
                             <option value="world-bosses">Мировые боссы</option>
                             <option value="weekly-bosses">Еженедельные боссы</option>
                             <option value="local-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-80 overflow-y-auto pr-2 custom-scrollbar">
+                    <!-- Boss settings will be loaded here -->
                 </div>
             </div>
-            
-            <div class="category-select">
+            <div class="category-select mb-8">
                 <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">
+                <select id="category-select" class="w-full p-3 rounded-xl border border-gray-300 dark:border-gray-600">
                     <option value="characters">Отряд персонажей</option>
                     <option value="world-bosses">Мировые боссы</option>
                     <option value="weekly-bosses">Еженедельные боссы</option>
                     <option value="local-legends">Местные легенды</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>
+            <!-- Characters Section -->
+            <section id="characters-section" class="mb-12 genshin-card p-6">
+                <h2 class="text-center 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">
-                        Крутить отряд!
+                    <button id="spin-characters-button" class="genshin-button genshin-button-primary py-4 px-12 text-lg font-bold">
+                        <i class="fas fa-sync-alt mr-2"></i>Крутить отряд!
                     </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-[180px] rounded-2xl p-6 bg-card-bg backdrop-blur-sm border border-gray-200 dark:border-gray-700 flex flex-wrap justify-center items-center gap-4 transition-all duration-300 flex-col sm:flex-row">
+                    <p id="characters-placeholder" class="text-center text-gray-500 dark:text-gray-400">Ваш случайный отряд появится здесь.</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-6 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 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white w-full sm:w-auto flex-grow">
+                    <button id="save-team-button" class="genshin-button genshin-button-secondary py-3 px-8 rounded-xl font-medium w-full sm:w-auto">
+                        <i class="fas fa-save mr-2"></i>Сохранить отряд
                     </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>
+            <!-- World Bosses Section -->
+            <section id="world-bosses-section" class="mb-12 genshin-card p-6 hidden">
+                <h2 class="text-center 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">
-                        Выбрать босса!
+                    <button id="spin-world-boss-button" class="genshin-button genshin-button-blue py-4 px-12 text-lg font-bold">
+                        <i class="fas fa-dragon mr-2"></i>Выбрать босса!
                     </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-[180px] rounded-2xl p-6 bg-card-bg backdrop-blur-sm border border-gray-200 dark:border-gray-700 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-center text-gray-500 dark:text-gray-400">Случайный мировой босс появится здесь.</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-6 flex justify-center hidden">
+                    <button id="save-world-boss-button" class="genshin-button genshin-button-secondary py-3 px-8 rounded-xl font-medium">
+                        <i class="fas fa-history mr-2"></i>Сохранить в историю
                     </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>
+            <!-- Weekly Bosses Section -->
+            <section id="weekly-bosses-section" class="mb-12 genshin-card p-6 hidden">
+                <h2 class="text-center 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">
-                        Выбрать босса!
+                    <button id="spin-weekly-boss-button" class="genshin-button genshin-button-accent py-4 px-12 text-lg font-bold">
+                        <i class="fas fa-ghost mr-2"></i>Выбрать босса!
                     </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-[180px] rounded-2xl p-6 bg-card-bg backdrop-blur-sm border border-gray-200 dark:border-gray-700 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-center text-gray-500 dark:text-gray-400">Случайный еженедельный босс появится здесь.</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-6 flex justify-center hidden">
+                    <button id="save-weekly-boss-button" class="genshin-button genshin-button-secondary py-3 px-8 rounded-xl font-medium">
+                        <i class="fas fa-history mr-2"></i>Сохранить в историю
                     </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>
+            <!-- Local Legends Section -->
+            <section id="local-legends-section" class="mb-12 genshin-card p-6 hidden">
+                <h2 class="text-center 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">
-                        Выбрать легенду!
+                    <button id="spin-legend-button" class="genshin-button genshin-button-purple py-4 px-12 text-lg font-bold">
+                        <i class="fas fa-crown mr-2"></i>Выбрать легенду!
                     </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-[180px] rounded-2xl p-6 bg-card-bg backdrop-blur-sm border border-gray-200 dark:border-gray-700 flex flex-wrap justify-center items-center gap-4 transition-all duration-300 flex-col sm:flex-row">
+                    <p id="legend-placeholder" class="text-center text-gray-500 dark:text-gray-400">Случайная местная легенда появится здесь.</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-6 flex justify-center hidden">
+                    <button id="save-legend-button" class="genshin-button genshin-button-secondary py-3 px-8 rounded-xl font-medium">
+                        <i class="fas fa-history mr-2"></i>Сохранить в историю
                     </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="genshin-card p-6">
+                <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-8 gap-4">
+                    <h2 class="text-xl font-bold">История</h2>
+                    <div class="flex flex-wrap gap-3 justify-center sm:justify-start">
+                        <button id="show-full-history-button" class="genshin-button genshin-button-secondary py-2 px-6 text-sm hidden">
+                            <i class="fas fa-list mr-1"></i>Вся история
                         </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="genshin-button genshin-button-accent py-2 px-6 text-sm hidden">
+                            <i class="fas fa-trash-alt mr-1"></i>Очистить
                         </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>
+                    <p id="history-placeholder" class="text-center text-gray-500 dark:text-gray-400">История ваших случа��ных выборов будет отображаться здесь.</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-12 pt-8 pb-6 border-t border-gray-200 dark:border-gray-700">
+            <p class="text-sm text-gray-500 dark:text-gray-400">
                 Это фанатский проект. Не аффилирован и не одобрен 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="bg-white dark:bg-gray-800 rounded-2xl w-full max-w-sm shadow-2xl relative text-center p-7 transform transition-all duration-300 scale-95 opacity-0" id="confirm-modal-content">
+            <h3 class="text-2xl font-bold mb-5">Подтверждение</h3>
+            <p id="confirm-modal-message" class="mb-7 text-gray-600 dark:text-gray-300">Вы уверены, что хотите очистить историю?</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>
+                <button id="confirm-modal-cancel" class="genshin-button genshin-button-secondary py-2 px-8 rounded-xl">Отмена</button>
+                <button id="confirm-modal-ok" class="genshin-button genshin-button-accent py-2 px-8 rounded-xl">Очистить</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 class="bg-white dark:bg-gray-800 rounded-2xl w-full max-w-4xl 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 font-bold text-center mb-8">Вся История</h2>
+            <div id="full-history-modal-content-inner" class="flex flex-col gap-7 overflow-y-auto flex-grow pr-3 custom-scrollbar">
+                <!-- Full history will be loaded here -->
+            </div>
+            <div class="text-center mt-8">
+                <button id="full-history-modal-close" class="genshin-button genshin-button-secondary py-3 px-10 rounded-xl font-medium">
+                    <i class="fas fa-times mr-2"></i>Закрыть
+                </button>
             </div>
         </div>
     </div>
-    <audio id="boom-sound" src="boom.mp3" preload="auto" volume="1.0"></audio> 
+    <audio id="boom-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-game-ball-tap-2073.mp3" preload="auto"></audio> 
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // Локальные данные персонажей
+            // Localization
+            const translations = {
+                ru: {
+                    title: 'Рулетка Genshin Impact',
+                    description: 'Случайный выбор персонажей, боссов и местных легенд для вашей игры в Genshin Impact',
+                    settingsTitle: 'Настройки рулетки',
+                    teamSizeLabel: 'Количество персонажей в отряде',
+                    animationSpeedLabel: 'Скорость анимации',
+                    animationFast: 'Быстрая',
+                    animationMedium: 'Средняя',
+                    animationSlow: 'Медленная',
+                    myCharacters: 'Мои персонажи',
+                    characterSearchPlaceholder: 'Поиск персонажей...',
+                    clearSelectedCharacters: 'Очистить выбранных персонажей',
+                    bossSettings: 'Настройки боссов',
+                    bossCategoryLabel: 'Категория:',
+                    worldBossesOption: 'Мировые боссы',
+                    weeklyBossesOption: 'Еженедельные боссы',
+                    localLegendsOption: 'Местные легенды',
+                    categorySelectLabel: 'Выберите категорию для рандомизации:',
+                    charactersOption: 'Отряд персонажей',
+                    worldBossesSectionTitle: 'Рандом мирового босса',
+                    weeklyBossesSectionTitle: 'Рандом еженедельного босса',
+                    localLegendsSectionTitle: 'Рандом местной легенды',
+                    charactersSectionTitle: 'Сформировать отряд персонажей',
+                    spinCharactersButton: 'Крутить отряд!',
+                    spinWorldBossButton: 'Выбрать босса!',
+                    spinWeeklyBossButton: 'Выбрать босса!',
+                    spinLegendButton: 'Выбрать легенду!',
+                    charactersPlaceholder: 'Ваш случайный отряд появится здесь.',
+                    worldBossPlaceholder: 'Случайный мировой босс появится здесь.',
+                    weeklyBossPlaceholder: 'Случайный еженедельный босс появится здесь.',
+                    legendPlaceholder: 'Случайная местная легенда появится здесь.',
+                    saveTeamButton: 'Сохранить отряд',
+                    saveBossButton: 'Сохранить в историю',
+                    teamNamePlaceholder: 'Название отряда (необязательно)',
+                    historyTitle: 'История',
+                    showFullHistoryButton: 'Вся история',
+                    clearHistoryButton: 'Очистить',
+                    noHistory: 'История ваших случайных выборов будет отображаться здесь.',
+                    confirmTitle: 'Подтверждение',
+                    confirmClearHistory: 'Вы уверены, что хотите очистить всю историю?',
+                    confirmClearCharacters: 'Вы уверены, что хотите очистить список ваших персонажей?',
+                    footerText: 'Это фанатский проект. Не аффилирован и не одобрен HoYoverse.',
+                    fullHistoryTitle: 'Вся История',
+                    closeModalButton: 'Закрыть',
+                    cancel: 'Отмена',
+                    confirm: 'Очистить',
+                    selectCharacters: 'Выберите персонажей, которыми вы владеете, чтобы рулетка использовала только их. Если ни один не выбран, будут использоваться все персонажи.',
+                    selectBosses: 'Выберите, какие боссы и местные легенды должны участвовать в рандомизации'
+                },
+                en: {
+                    title: 'Genshin Impact Roulette',
+                    description: 'Random selection of characters, bosses, and local legends for your Genshin Impact game',
+                    settingsTitle: 'Roulette Settings',
+                    teamSizeLabel: 'Number of characters in the team',
+                    animationSpeedLabel: 'Animation Speed',
+                    animationFast: 'Fast',
+                    animationMedium: 'Medium',
+                    animationSlow: 'Slow',
+                    myCharacters: 'My Characters',
+                    characterSearchPlaceholder: 'Search characters...',
+                    clearSelectedCharacters: 'Clear selected characters',
+                    bossSettings: 'Boss Settings',
+                    bossCategoryLabel: 'Category:',
+                    worldBossesOption: 'World Bosses',
+                    weeklyBossesOption: 'Weekly Bosses',
+                    localLegendsOption: 'Local Legends',
+                    categorySelectLabel: 'Select category for randomization:',
+                    charactersOption: 'Character Team',
+                    worldBossesSectionTitle: 'Random World Boss',
+                    weeklyBossesSectionTitle: 'Random Weekly Boss',
+                    localLegendsSectionTitle: 'Random Local Legend',
+                    charactersSectionTitle: 'Form a character team',
+                    spinCharactersButton: 'Spin Team!',
+                    spinWorldBossButton: 'Select Boss!',
+                    spinWeeklyBossButton: 'Select Boss!',
+                    spinLegendButton: 'Select Legend!',
+                    charactersPlaceholder: 'Your random team will appear here.',
+                    worldBossPlaceholder: 'A random world boss will appear here.',
+                    weeklyBossPlaceholder: 'A random weekly boss will appear here.',
+                    legendPlaceholder: 'A random local legend will appear here.',
+                    saveTeamButton: 'Save Team',
+                    saveBossButton: 'Save to History',
+                    teamNamePlaceholder: 'Team name (optional)',
+                    historyTitle: 'History',
+                    showFullHistoryButton: 'Full History',
+                    clearHistoryButton: 'Clear',
+                    noHistory: 'History of your random selections will be displayed here.',
+                    confirmTitle: 'Confirmation',
+                    confirmClearHistory: 'Are you sure you want to clear all history?',
+                    confirmClearCharacters: 'Are you sure you want to clear your character list?',
+                    footerText: 'This is a fan project. Not affiliated with or endorsed by HoYoverse.',
+                    fullHistoryTitle: 'Full History',
+                    closeModalButton: 'Close',
+                    cancel: 'Cancel',
+                    confirm: 'Clear',
+                    selectCharacters: 'Select the characters you own so the roulette only uses them. If none are selected, all characters will be used.',
+                    selectBosses: 'Select which bosses and local legends should participate in randomization'
+                }
+            };
+
+            // Language state
+            let currentLang = localStorage.getItem('genshinRouletteLang') || 'ru';
+            
+            // Update UI with current language
+            function updateLanguage(lang) {
+                currentLang = lang;
+                localStorage.setItem('genshinRouletteLang', lang);
+                
+                // Update buttons
+                document.querySelectorAll('.lang-btn').forEach(btn => {
+                    btn.classList.toggle('active', btn.dataset.lang === lang);
+                });
+                
+                // Update text content
+                document.querySelector('h1').textContent = translations[lang].title;
+                document.querySelector('p.text-lg').textContent = translations[lang].description;
+                
+                // Settings panel
+                document.querySelector('#settings-panel h3').textContent = translations[lang].settingsTitle;
+                document.querySelector('label[for="team-size"]').textContent = translations[lang].teamSizeLabel;
+                document.querySelector('label[for="animation-speed"]').textContent = translations[lang].animationSpeedLabel;
+                document.getElementById('animation-speed').options[0].text = translations[lang].animationFast;
+                document.getElementById('animation-speed').options[1].text = translations[lang].animationMedium;
+                document.getElementById('animation-speed').options[2].text = translations[lang].animationSlow;
+                document.querySelector('#settings-panel h3:nth-of-type(2)').textContent = translations[lang].myCharacters;
+                document.querySelector('#settings-panel p:nth-of-type(2)').textContent = translations[lang].selectCharacters;
+                document.getElementById('character-search').placeholder = translations[lang].characterSearchPlaceholder;
+                document.getElementById('clear-player-characters').textContent = translations[lang].clearSelectedCharacters;
+                document.querySelector('#settings-panel h3:nth-of-type(3)').textContent = translations[lang].bossSettings;
+                document.querySelector('#settings-panel p:nth-of-type(4)').textContent = translations[lang].selectBosses;
+                document.querySelector('label[for="boss-category-select"]').textContent = translations[lang].bossCategoryLabel;
+                document.getElementById('boss-category-select').options[0].text = translations[lang].worldBossesOption;
+                document.getElementById('boss-category-select').options[1].text = translations[lang].weeklyBossesOption;
+                document.getElementById('boss-category-select').options[2].text = translations[lang].localLegendsOption;
+                
+                // Category select
+                document.querySelector('label[for="category-select"]').textContent = translations[lang].categorySelectLabel;
+                document.getElementById('category-select').options[0].text = translations[lang].charactersOption;
+                document.getElementById('category-select').options[1].text = translations[lang].worldBossesOption;
+                document.getElementById('category-select').options[2].text = translations[lang].weeklyBossesOption;
+                document.getElementById('category-select').options[3].text = translations[lang].localLegendsOption;
+                
+                // Sections
+                document.querySelector('#characters-section h2').textContent = translations[lang].charactersSectionTitle;
+                document.getElementById('spin-characters-button').innerHTML = `<i class="fas fa-sync-alt mr-2"></i>${translations[lang].spinCharactersButton}`;
+                document.getElementById('characters-placeholder').textContent = translations[lang].charactersPlaceholder;
+                document.getElementById('save-team-button').innerHTML = `<i class="fas fa-save mr-2"></i>${translations[lang].saveTeamButton}`;
+                document.getElementById('team-name-input').placeholder = translations[lang].teamNamePlaceholder;
+                
+                document.querySelector('#world-bosses-section h2').textContent = translations[lang].worldBossesSectionTitle;
+                document.getElementById('spin-world-boss-button').innerHTML = `<i class="fas fa-dragon mr-2"></i>${translations[lang].spinWorldBossButton}`;
+                document.getElementById('world-boss-placeholder').textContent = translations[lang].worldBossPlaceholder;
+                document.getElementById('save-world-boss-button').innerHTML = `<i class="fas fa-history mr-2"></i>${translations[lang].saveBossButton}`;
+                
+                document.querySelector('#weekly-bosses-section h2').textContent = translations[lang].weeklyBossesSectionTitle;
+                document.getElementById('spin-weekly-boss-button').innerHTML = `<i class="fas fa-ghost mr-2"></i>${translations[lang].spinWeeklyBossButton}`;
+                document.getElementById('weekly-boss-placeholder').textContent = translations[lang].weeklyBossPlaceholder;
+                document.getElementById('save-weekly-boss-button').innerHTML = `<i class="fas fa-history mr-2"></i>${translations[lang].saveBossButton}`;
+                
+                document.querySelector('#local-legends-section h2').textContent = translations[lang].localLegendsSectionTitle;
+                document.getElementById('spin-legend-button').innerHTML = `<i class="fas fa-crown mr-2"></i>${translations[lang].spinLegendButton}`;
+                document.getElementById('legend-placeholder').textContent = translations[lang].legendPlaceholder;
+                document.getElementById('save-legend-button').innerHTML = `<i class="fas fa-history mr-2"></i>${translations[lang].saveBossButton}`;
+                
+                // History section
+                document.querySelector('#history-section h2').textContent = translations[lang].historyTitle;
+                document.getElementById('show-full-history-button').innerHTML = `<i class="fas fa-list mr-1"></i>${translations[lang].showFullHistoryButton}`;
+                document.getElementById('clear-history-button').innerHTML = `<i class="fas fa-trash-alt mr-1"></i>${translations[lang].clearHistoryButton}`;
+                document.getElementById('history-placeholder').textContent = translations[lang].noHistory;
+                
+                // Modals
+                document.getElementById('confirm-modal-content').querySelector('h3').textContent = translations[lang].confirmTitle;
+                document.getElementById('confirm-modal-cancel').textContent = translations[lang].cancel;
+                document.getElementById('confirm-modal-ok').textContent = translations[lang].confirm;
+                document.getElementById('full-history-modal-content').querySelector('h2').textContent = translations[lang].fullHistoryTitle;
+                document.getElementById('full-history-modal-close').innerHTML = `<i class="fas fa-times mr-2"></i>${translations[lang].closeModalButton}`;
+                
+                // Footer
+                document.querySelector('footer p').textContent = translations[lang].footerText;
+                
+                // Update boss category in settings
+                updateBossSettings();
+            }
+            
+            // Initialize language
+            updateLanguage(currentLang);
+            
+            // Language toggle buttons
+            document.querySelectorAll('.lang-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const lang = btn.dataset.lang;
+                    updateLanguage(lang);
+                });
+            });
+
+            // Local data
             const LOCAL_CHARACTERS = [
                 { "name": "Альбедо", "icon": "pic/albedo.png", "element": "Geo" },
                 { "name": "Аль-Хайтам", "icon": "pic/alhaitham.png", "element": "Dendro" },
@@ -618,8 +1056,7 @@
                 { "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" },
@@ -663,7 +1100,7 @@
                 { "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" },
@@ -678,8 +1115,7 @@
                 { "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/" },
@@ -699,8 +1135,6 @@
                 { "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/" },
@@ -711,17 +1145,14 @@
                 { "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/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/" },
             ];
-            
-            // Генерация или получение UID
+
+            // UID generation
             function getOrCreateUID() {
                 let uid = localStorage.getItem('genshinRouletteUID');
                 if (!uid) {
@@ -730,9 +1161,10 @@
                 }
                 return uid;
             }
+
             const currentUserUID = getOrCreateUID();
-            
-            // Конфигурация
+
+            // Configuration
             const config = {
                 teamSize: parseInt(localStorage.getItem(`${currentUserUID}_teamSize`)) || 4,
                 animationSpeed: localStorage.getItem(`${currentUserUID}_animationSpeed`) || 'medium',
@@ -742,10 +1174,11 @@
                     'world-bosses': [],
                     'weekly-bosses': [],
                     'local-legends': []
-                }
+                },
+                language: currentLang
             };
-            
-            // Состояние приложения
+
+            // State
             let allCharacters = [...LOCAL_CHARACTERS];
             let historyTeams = JSON.parse(localStorage.getItem(`${currentUserUID}_genshinTeamsHistory`)) || [];
             let historyBosses = JSON.parse(localStorage.getItem(`${currentUserUID}_genshinBossesHistory`)) || [];
@@ -755,8 +1188,8 @@
             let currentGeneratedBoss = null;
             let isWorldBoss = true;
             let isLegend = false;
-            
-            // Элементы DOM
+
+            // DOM elements
             const spinCharactersButton = document.getElementById('spin-characters-button');
             const spinWorldBossButton = document.getElementById('spin-world-boss-button');
             const spinWeeklyBossButton = document.getElementById('spin-weekly-boss-button');
@@ -807,14 +1240,12 @@
             const localLegendsSection = document.getElementById('local-legends-section');
             const bossCategorySelect = document.getElementById('boss-category-select');
             const bossesSettingsContainer = document.getElementById('bosses-settings-container');
-            
-            // Full History Modal elements
             const fullHistoryModal = document.getElementById('full-history-modal');
             const fullHistoryModalContent = document.getElementById('full-history-modal-content');
             const fullHistoryModalContentInner = document.getElementById('full-history-modal-content-inner');
             const fullHistoryModalCloseButton = document.getElementById('full-history-modal-close');
-            
-            // Инициализация темы
+
+            // Initialize theme
             function initTheme() {
                 if (config.darkMode) {
                     document.body.classList.remove('light');
@@ -824,31 +1255,31 @@
                     document.body.classList.add('light');
                 }
             }
-            
-            // Переключение темы
+
+            // Toggle theme
             function toggleTheme() {
                 config.darkMode = !config.darkMode;
                 initTheme();
                 localStorage.setItem('theme', config.darkMode ? 'dark' : 'light');
             }
-            
-            // Переключение настроек
+
+            // Toggle settings
             function toggleSettings() {
                 settingsPanel.classList.toggle('open');
             }
-            
-            // Изменение категории
+
+            // Change category
             function changeCategory() {
                 config.category = categorySelect.value;
                 localStorage.setItem('genshinCategory', config.category);
                 
-                // Скрываем все секции
+                // Hide all sections
                 charactersSection.classList.add('hidden');
                 worldBossesSection.classList.add('hidden');
                 weeklyBossesSection.classList.add('hidden');
                 localLegendsSection.classList.add('hidden');
                 
-                // Показываем выбранную секцию
+                // Show selected section
                 if (config.category === 'characters') {
                     charactersSection.classList.remove('hidden');
                 } else if (config.category === 'world-bosses') {
@@ -859,44 +1290,41 @@
                     localLegendsSection.classList.remove('hidden');
                 }
             }
-            
-            // Создание карточки персонажа
+
+            // Create character card
             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-3 rounded-xl bg-white dark:bg-gray-700 shadow-md text-center flex-shrink-0 w-[100px] sm:w-[120px] md:w-[130px] lg:w-[140px] transition-all hover:shadow-lg cursor-pointer`;
                 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 w-20 h-20 mb-2">
+                        <img src="${character.icon}" alt="${character.name}" 
+                             class="w-full h-full rounded-full object-cover border-2 border-white dark:border-gray-800 shadow-md"
+                             onerror="this.onerror=null;this.src='https://placehold.co/80x80/EFEAE4/4A4A4A?text=N/A'">
+                        ${character.element ? `<div class="absolute -bottom-1 -right-1 bg-black bg-opacity-70 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center border-2 border-white">${character.element.charAt(0)}</div>` : ''}
+                    </div>
+                    <p class="font-medium text-sm truncate w-full dark:text-white font-medium">${character.name}</p>
                 `;
                 return card;
             }
-            
-            // Создание карточки босса
-            function createBossCard(boss) {
+
+            // Create boss card
+            function createBossCard(boss, isLegend = false) {
                 const card = document.createElement('div');
-                card.className = `boss-card`;
+                card.className = `boss-card ${isLegend ? 'legend-card' : ''}`;
+                const borderClass = isLegend ? 'border-purple-500' : 'border-blue-400';
                 card.innerHTML = `
                     <img src="${boss.icon}" alt="${boss.name}" 
-                         onerror="this.onerror=null;this.src='https://placehold.co/80x80/EFEAE4/4A4A4A?text=N/A'">
-                    <h3 class="font-bold text-lg dark:text-white">${boss.name}</h3>
+                         class="w-24 h-24 rounded-full object-cover mb-3 border-4 ${borderClass}"
+                         onerror="this.onerror=null;this.src='https://placehold.co/96x96/EFEAE4/4A4A4A?text=N/A'">
+                    <h3 class="font-bold text-lg dark:text-white line-clamp-2">${boss.name}</h3>
                 `;
                 return card;
             }
-            
-            // Создание карточки местной легенды (кликабельной)
+
+            // Create legend card (clickable)
             function createLegendCard(legend) {
-                const card = document.createElement('div');
-                card.className = `boss-card legend-card`;
-                // Делаем карточку кликабельной только если есть ссылка на гайд
+                const card = createBossCard(legend, true);
                 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'">
-                    <h3 class="font-bold text-lg dark:text-white">${legend.name}</h3>
-                    <p class="text-sm dark:text-gray-300">${isClickable ? 'Нажмите чтобы узнать про Легенду' : 'Нет ссылки на гайд'}</p>
-                `;
                 
                 if (isClickable) {
                     card.style.cursor = 'pointer';
@@ -907,34 +1335,33 @@
                 
                 return card;
             }
-            
-            // Создание карточки персонажа для выбора (в секции "Мои персонажи")
+
+            // Create player character selection card
             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-xl shadow-sm text-center cursor-pointer relative transition-all hover:scale-[1.02]`;
                 card.setAttribute('data-name', character.name);
+                
                 const isSelected = playerCharacters.some(c => c.name === character.name);
+                
                 if (isSelected) {
                     card.classList.add('selected');
                 }
+                
                 const elementIconHtml = character.element ? 
-                    `<img src="pic/Elements/Element_${character.element}.webp" alt="${character.element}" 
-                          class="w-5 h-5 absolute top-0 right-0 -mt-1 -mr-1" title="${character.element}">` : '';
+                    `<div class="absolute -top-1 -right-1 bg-black bg-opacity-70 text-white text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center border-2 border-white">${character.element.charAt(0)}</div>` : '';
+                
                 card.innerHTML = `
-                    <div class="relative">
+                    <div class="relative mb-1">
                         <img src="${character.icon}" alt="${character.name}" 
-                             class="w-12 h-12 rounded-full mb-1 object-cover border-2 border-transparent"
-                             onerror="this.onerror=null;this.src='https://placehold.co/48x48/EFEAE4/4A4A4A?text=N/A'">
+                             class="w-14 h-14 rounded-full object-cover border-2 ${isSelected ? 'border-[#DCA852]' : 'border-transparent'}"
+                             onerror="this.onerror=null;this.src='https://placehold.co/56x56/EFEAE4/4A4A4A?text=N/A'">
                         ${elementIconHtml}
                     </div>
                     <p class="font-medium text-xs truncate w-full dark:text-white">${character.name}</p>
                     ${isSelected ? '<button class="remove-btn" title="Удалить">&times;</button>' : ''}
                 `;
-                const img = card.querySelector('img');
-                if (isSelected) {
-                    img.classList.remove('border-transparent');
-                    img.classList.add('border-[#DCA852]');
-                }
+                
                 card.addEventListener('click', (event) => {
                     if (event.target.classList.contains('remove-btn')) {
                         removePlayerCharacter(character.name);
@@ -942,11 +1369,17 @@
                         togglePlayerCharacter(character);
                     }
                 });
+                
                 return card;
             }
-            
-            // Рендеринг настроек для боссов
+
+            // Render boss settings
             function renderBossSettings() {
+                updateBossSettings();
+            }
+
+            // Update boss settings
+            function updateBossSettings() {
                 const category = bossCategorySelect.value;
                 let bosses = [];
                 
@@ -963,11 +1396,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-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors';
                     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 h-5 w-5 text-[#DCA852] rounded focus:ring-[#DCA852]">
+                        <label for="boss-${category}-${boss.name.replace(/\s+/g, '-')}" class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">${boss.name}</label>
                     `;
                     bossesSettingsContainer.appendChild(bossToggle);
                     
@@ -975,13 +1408,13 @@
                     checkbox.addEventListener('change', (e) => {
                         const excludedList = config.excludedBosses[category];
                         if (e.target.checked) {
-                            // Включить босса - убрать из списка исключенных
+                            // Include boss - remove from excluded list
                             const index = excludedList.indexOf(boss.name);
                             if (index > -1) {
                                 excludedList.splice(index, 1);
                             }
                         } else {
-                            // Исключить босса - добавить в список исключенных
+                            // Exclude boss - add to excluded list
                             if (!excludedList.includes(boss.name)) {
                                 excludedList.push(boss.name);
                             }
@@ -990,20 +1423,22 @@
                     });
                 });
             }
-            
-            // Рендеринг списка персонажей для выбора
+
+            // Render player characters selection
             function renderPlayerCharactersSelection(filter = '') {
                 playerCharactersSelection.innerHTML = '';
                 const filteredCharacters = allCharacters.filter(char => 
                     char.name.toLowerCase().includes(filter.toLowerCase())
                 );
+                
                 filteredCharacters.forEach(char => {
                     playerCharactersSelection.appendChild(createPlayerCharacterSelectionCard(char));
                 });
+                
                 updateClearPlayerCharactersButtonVisibility();
             }
-            
-            // Добавление/удаление персонажа из списка игрока
+
+            // Toggle player character
             function togglePlayerCharacter(character) {
                 const index = playerCharacters.findIndex(c => c.name === character.name);
                 if (index > -1) {
@@ -1015,24 +1450,24 @@
                 renderPlayerCharactersSelection(characterSearchInput.value);
                 updateClearPlayerCharactersButtonVisibility();
             }
-            
-            // Удаление персонажа из списка игрока по имени
+
+            // Remove player character by name
             function removePlayerCharacter(characterName) {
                 playerCharacters = playerCharacters.filter(c => c.name !== characterName);
                 localStorage.setItem(`${currentUserUID}_playerCharacters`, JSON.stringify(playerCharacters));
                 renderPlayerCharactersSelection(characterSearchInput.value);
                 updateClearPlayerCharactersButtonVisibility();
             }
-            
-            // Очистка всех персонажей игрока
+
+            // Clear all player characters
             function clearPlayerCharacters() {
                 playerCharacters = [];
                 localStorage.removeItem(`${currentUserUID}_playerCharacters`);
                 renderPlayerCharactersSelection('');
                 hideConfirmModal();
             }
-            
-            // Обновление видимости кнопки "Очистить выбранных персонажей"
+
+            // Update clear button visibility
             function updateClearPlayerCharactersButtonVisibility() {
                 if (playerCharacters.length > 0) {
                     clearPlayerCharactersButton.classList.remove('hidden');
@@ -1040,8 +1475,8 @@
                     clearPlayerCharactersButton.classList.add('hidden');
                 }
             }
-            
-            // Отображение результата рулетки с плавной анимацией и "бум" эффектом
+
+            // Render characters result with animation
             async function renderCharactersResult(team) {
                 charactersResult.innerHTML = '';
                 charactersPlaceholder.classList.add('hidden');
@@ -1054,7 +1489,8 @@
                     charactersResult.appendChild(card);
                     
                     if (boomSound) {
-                        boomSound.currentTime = 0; 
+                        boomSound.currentTime = 0;
+                        boomSound.volume = 0.5;
                         boomSound.play().catch(e => console.error("Error playing sound:", e));
                     }
                     
@@ -1067,8 +1503,8 @@
                 teamNameInput.value = '';
                 currentGeneratedTeam = team;
             }
-            
-            // Отображение результата для босса
+
+            // Render boss result
             async function renderBossResult(boss, isWorld) {
                 const resultDiv = isWorld ? worldBossResult : weeklyBossResult;
                 const placeholder = isWorld ? worldBossPlaceholder : weeklyBossPlaceholder;
@@ -1083,7 +1519,8 @@
                 resultDiv.appendChild(card);
                 
                 if (boomSound) {
-                    boomSound.currentTime = 0; 
+                    boomSound.currentTime = 0;
+                    boomSound.volume = 0.5;
                     boomSound.play().catch(e => console.error("Error playing sound:", e));
                 }
                 
@@ -1096,8 +1533,8 @@
                 isWorldBoss = isWorld;
                 isLegend = false;
             }
-            
-            // Отображение результата для местной легенды
+
+            // Render legend result
             async function renderLegendResult(legend) {
                 legendResult.innerHTML = '';
                 legendPlaceholder.classList.add('hidden');
@@ -1108,7 +1545,8 @@
                 legendResult.appendChild(card);
                 
                 if (boomSound) {
-                    boomSound.currentTime = 0; 
+                    boomSound.currentTime = 0;
+                    boomSound.volume = 0.5;
                     boomSound.play().catch(e => console.error("Error playing sound:", e));
                 }
                 
@@ -1121,8 +1559,8 @@
                 isWorldBoss = false;
                 isLegend = true;
             }
-            
-            // Отображение истории
+
+            // Render history
             function renderHistory(limit = 3) {
                 historyContent.innerHTML = '';
                 const allHistory = [...historyTeams, ...historyBosses].sort((a, b) => new Date(b.date) - new Date(a.date));
@@ -1135,22 +1573,24 @@
                     historyPlaceholder.classList.add('hidden');
                     clearHistoryButton.classList.remove('hidden');
                     showFullHistoryButton.classList.remove('hidden');
-                    const itemsToShow = allHistory.slice(0, limit);
                     
+                    const itemsToShow = allHistory.slice(0, limit);
                     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 = `bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-200 dark:border-gray-700 ${item.type === 'team' ? 'history-item' : (item.type === 'legend' ? 'legend-history-item' : 'boss-history-item')}`;
                         
                         const title = document.createElement('h3');
                         title.className = 'text-lg font-semibold mb-3 dark:text-white';
                         
+                        const date = new Date(item.date).toLocaleString(currentLang === 'ru' ? 'ru-RU' : 'en-US');
+                        
                         if (item.type === 'team') {
                             const teamName = item.name ? `"${item.name}" - ` : '';
-                            title.textContent = `${teamName}Отряд (${new Date(item.date).toLocaleString()})`;
+                            title.textContent = `${teamName}Отряд (${date})`;
                         } else if (item.type === 'legend') {
-                            title.textContent = `${item.name} (Местная легенда) (${new Date(item.date).toLocaleString()})`;
+                            title.textContent = `${item.name} (Местная легенда) (${date})`;
                         } else {
-                            title.textContent = `${item.name} (${new Date(item.date).toLocaleString()})`;
+                            title.textContent = `${item.name} (${date})`;
                         }
                         
                         itemElement.appendChild(title);
@@ -1173,29 +1613,31 @@
                     });
                 }
             }
-            
-            // Показать модальное окно всей истории
+
+            // Show full history modal
             function showFullHistoryModal() {
                 fullHistoryModalContentInner.innerHTML = '';
                 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 py-10">История пуста.</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 = `bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-200 dark:border-gray-700 mb-4 ${item.type === 'team' ? 'history-item' : (item.type === 'legend' ? 'legend-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-3 dark:text-white';
+                        
+                        const date = new Date(item.date).toLocaleString(currentLang === 'ru' ? 'ru-RU' : 'en-US');
                         
                         if (item.type === 'team') {
                             const teamName = item.name ? `"${item.name}" - ` : '';
-                            title.textContent = `${teamName}Отряд (${new Date(item.date).toLocaleString()})`;
+                            title.textContent = `${teamName}Отряд (${date})`;
                         } else if (item.type === 'legend') {
-                            title.textContent = `${item.name} (Местная легенда) (${new Date(item.date).toLocaleString()})`;
+                            title.textContent = `${item.name} (Местная легенда) (${date})`;
                         } else {
-                            title.textContent = `${item.name} (${new Date(item.date).toLocaleString()})`;
+                            title.textContent = `${item.name} (${date})`;
                         }
                         
                         itemElement.appendChild(title);
@@ -1209,7 +1651,7 @@
                                 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"
+                                         class="w-16 h-16 rounded-full mb-1 object-cover border-2 border-white dark:border-gray-800 shadow-sm"
                                          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>
                                 `;
@@ -1220,10 +1662,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"
+                                     class="w-16 h-16 rounded-full mb-1 object-cover border-2 border-white dark:border-gray-800 shadow-sm"
                                      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>
+                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Местная легенда</p>
                             `;
                             container.appendChild(legendCard);
                         } else {
@@ -1231,7 +1673,7 @@
                             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"
+                                     class="w-16 h-16 rounded-full mb-1 object-cover border-2 border-white dark:border-gray-800 shadow-sm"
                                      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>
                             `;
@@ -1249,8 +1691,8 @@
                     fullHistoryModalContent.classList.add('scale-100', 'opacity-100');
                 }, 10);
             }
-            
-            // Скрыть модальное окно всей истории
+
+            // Hide full history modal
             function hideFullHistoryModal() {
                 fullHistoryModalContent.classList.add('scale-95', 'opacity-0');
                 fullHistoryModalContent.classList.remove('scale-100', 'opacity-100');
@@ -1258,8 +1700,8 @@
                     fullHistoryModal.classList.add('hidden');
                 }, 300);
             }
-            
-            // Сохранение отряда в историю
+
+            // Save team to history
             function saveTeamToHistory(team, name = '') {
                 historyTeams.unshift({
                     date: new Date().toISOString(),
@@ -1270,8 +1712,8 @@
                 localStorage.setItem(`${currentUserUID}_genshinTeamsHistory`, JSON.stringify(historyTeams));
                 renderHistory();
             }
-            
-            // Сохранение босса в историю
+
+            // Save boss to history
             function saveBossToHistory(boss, isWorld, isLegendType = false) {
                 const type = isLegendType ? 'legend' : (isWorld ? 'world-boss' : 'weekly-boss');
                 const bossData = {
@@ -1280,13 +1722,12 @@
                     icon: boss.icon,
                     type: type
                 };
-                
                 historyBosses.unshift(bossData);
                 localStorage.setItem(`${currentUserUID}_genshinBossesHistory`, JSON.stringify(historyBosses));
                 renderHistory();
             }
-            
-            // Очистка истории
+
+            // Clear history
             function clearHistory() {
                 historyTeams = [];
                 historyBosses = [];
@@ -1295,18 +1736,21 @@
                 renderHistory();
                 hideConfirmModal();
             }
-            
-            // Запуск рулетки персонажей
+
+            // Spin characters
             async function spinCharacters() {
                 const availableCharsForSpin = playerCharacters.length > 0 ? playerCharacters : allCharacters;
                 if (isSpinning || availableCharsForSpin.length < config.teamSize) {
-                    alert(`Недостаточно персонажей для формирования отряда из ${config.teamSize} человек. Доступно: ${availableCharsForSpin.length}`);
+                    const alertText = currentLang === 'ru' 
+                        ? `Недостаточно персонажей для формирования отряда из ${config.teamSize} человек. Доступно: ${availableCharsForSpin.length}`
+                        : `Not enough characters to form a team of ${config.teamSize}. Available: ${availableCharsForSpin.length}`;
+                    alert(alertText);
                     return;
                 }
                 
                 isSpinning = true;
                 spinCharactersButton.disabled = true;
-                spinCharactersButton.textContent = 'Крутим...';
+                spinCharactersButton.innerHTML = `<i class="fas fa-spinner fa-spin mr-2"></i>${currentLang === 'ru' ? 'Крутим...' : 'Spinning...'}`;
                 charactersResult.innerHTML = '';
                 charactersPlaceholder.classList.add('hidden');
                 charactersLoader.classList.remove('hidden');
@@ -1327,7 +1771,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-[100px] sm:w-[120px] md:w-[130px] lg:w-[140px] opacity-50';
                     charactersResult.appendChild(tempDiv);
                     
                     let startTime = Date.now();
@@ -1355,22 +1799,21 @@
                     await new Promise(resolve => setTimeout(resolve, individualSpinTime + 100));
                 }
                 
-                // Завершение рулетки
+                // Finish spinning
                 charactersLoader.classList.add('hidden');
                 spinCharactersButton.disabled = false;
-                spinCharactersButton.textContent = 'Крутить ещё!';
+                spinCharactersButton.innerHTML = `<i class="fas fa-sync-alt mr-2"></i>${currentLang === 'ru' ? 'Крутить ещё!' : 'Spin Again!'}`;
                 isSpinning = false;
-                
                 renderCharactersResult(selectedTeam);
             }
-            
-            // Запуск рулетки мирового босса
+
+            // Spin world boss
             async function spinWorldBoss() {
                 if (isSpinning) return;
                 
                 isSpinning = true;
                 spinWorldBossButton.disabled = true;
-                spinWorldBossButton.textContent = 'Выбираем...';
+                spinWorldBossButton.innerHTML = `<i class="fas fa-spinner fa-spin mr-2"></i>${currentLang === 'ru' ? 'Выбираем...' : 'Selecting...'}`;
                 worldBossResult.innerHTML = '';
                 worldBossPlaceholder.classList.add('hidden');
                 worldBossLoader.classList.remove('hidden');
@@ -1378,16 +1821,16 @@
                 
                 await new Promise(resolve => setTimeout(resolve, 1000));
                 
-                // Фильтруем исключенных боссов
+                // Filter excluded bosses
                 const availableBosses = WORLD_BOSSES.filter(boss => 
                     !config.excludedBosses['world-bosses'].includes(boss.name)
                 );
                 
                 if (availableBosses.length === 0) {
-                    worldBossResult.innerHTML = '<p class="text-center text-red-500">Нет доступных боссов! Проверьте настройки.</p>';
+                    worldBossResult.innerHTML = `<p class="text-center text-red-500 py-4">${currentLang === 'ru' ? 'Нет доступных боссов! Проверьте настройки.' : 'No available bosses! Check settings.'}</p>`;
                     worldBossLoader.classList.add('hidden');
                     spinWorldBossButton.disabled = false;
-                    spinWorldBossButton.textContent = 'Выбрать ещё!';
+                    spinWorldBossButton.innerHTML = `<i class="fas fa-dragon mr-2"></i>${currentLang === 'ru' ? 'Выбрать ещё!' : 'Select Again!'}`;
                     isSpinning = false;
                     return;
                 }
@@ -1395,19 +1838,18 @@
                 const randomBoss = availableBosses[Math.floor(Math.random() * availableBosses.length)];
                 worldBossLoader.classList.add('hidden');
                 spinWorldBossButton.disabled = false;
-                spinWorldBossButton.textContent = 'Выбрать ещё!';
+                spinWorldBossButton.innerHTML = `<i class="fas fa-dragon mr-2"></i>${currentLang === 'ru' ? 'Выбрать ещё!' : 'Select Again!'}`;
                 isSpinning = false;
-                
                 renderBossResult(randomBoss, true);
             }
-            
-            // Запуск рулетки еженедельного босса
+
+            // Spin weekly boss
             async function spinWeeklyBoss() {
                 if (isSpinning) return;
                 
                 isSpinning = true;
                 spinWeeklyBossButton.disabled = true;
-                spinWeeklyBossButton.textContent = 'Выбираем...';
+                spinWeeklyBossButton.innerHTML = `<i class="fas fa-spinner fa-spin mr-2"></i>${currentLang === 'ru' ? 'Выбираем...' : 'Selecting...'}`;
                 weeklyBossResult.innerHTML = '';
                 weeklyBossPlaceholder.classList.add('hidden');
                 weeklyBossLoader.classList.remove('hidden');
@@ -1415,16 +1857,16 @@
                 
                 await new Promise(resolve => setTimeout(resolve, 1000));
                 
-                // Фильтруем исключенных боссов
+                // Filter excluded bosses
                 const availableBosses = WEEKLY_BOSSES.filter(boss => 
                     !config.excludedBosses['weekly-bosses'].includes(boss.name)
                 );
                 
                 if (availableBosses.length === 0) {
-                    weeklyBossResult.innerHTML = '<p class="text-center text-red-500">Нет доступных боссов! Проверьте настройки.</p>';
+                    weeklyBossResult.innerHTML = `<p class="text-center text-red-500 py-4">${currentLang === 'ru' ? 'Нет доступных боссов! Проверьте настройки.' : 'No available bosses! Check settings.'}</p>`;
                     weeklyBossLoader.classList.add('hidden');
                     spinWeeklyBossButton.disabled = false;
-                    spinWeeklyBossButton.textContent = 'Выбрать ещё!';
+                    spinWeeklyBossButton.innerHTML = `<i class="fas fa-ghost mr-2"></i>${currentLang === 'ru' ? 'Выбрать ещё!' : 'Select Again!'}`;
                     isSpinning = false;
                     return;
                 }
@@ -1432,19 +1874,18 @@
                 const randomBoss = availableBosses[Math.floor(Math.random() * availableBosses.length)];
                 weeklyBossLoader.classList.add('hidden');
                 spinWeeklyBossButton.disabled = false;
-                spinWeeklyBossButton.textContent = 'Выбрать ещё!';
+                spinWeeklyBossButton.innerHTML = `<i class="fas fa-ghost mr-2"></i>${currentLang === 'ru' ? 'Выбрать ещё!' : 'Select Again!'}`;
                 isSpinning = false;
-                
                 renderBossResult(randomBoss, false);
             }
-            
-            // Запуск рулетки местной легенды
+
+            // Spin local legend
             async function spinLocalLegend() {
                 if (isSpinning) return;
                 
                 isSpinning = true;
                 spinLegendButton.disabled = true;
-                spinLegendButton.textContent = 'Выбираем...';
+                spinLegendButton.innerHTML = `<i class="fas fa-spinner fa-spin mr-2"></i>${currentLang === 'ru' ? 'Выбираем...' : 'Selecting...'}`;
                 legendResult.innerHTML = '';
                 legendPlaceholder.classList.add('hidden');
                 legendLoader.classList.remove('hidden');
@@ -1452,16 +1893,16 @@
                 
                 await new Promise(resolve => setTimeout(resolve, 1000));
                 
-                // Фильтруем исключенных легенд
+                // Filter excluded legends
                 const availableLegends = LOCAL_LEGENDS.filter(legend => 
                     !config.excludedBosses['local-legends'].includes(legend.name)
                 );
                 
                 if (availableLegends.length === 0) {
-                    legendResult.innerHTML = '<p class="text-center text-red-500">Нет доступных легенд! Проверьте настройки.</p>';
+                    legendResult.innerHTML = `<p class="text-center text-red-500 py-4">${currentLang === 'ru' ? 'Нет доступных легенд! Проверьте настройки.' : 'No available legends! Check settings.'}</p>`;
                     legendLoader.classList.add('hidden');
                     spinLegendButton.disabled = false;
-                    spinLegendButton.textContent = 'Выбрать ещё!';
+                    spinLegendButton.innerHTML = `<i class="fas fa-crown mr-2"></i>${currentLang === 'ru' ? 'Выбрать ещё!' : 'Select Again!'}`;
                     isSpinning = false;
                     return;
                 }
@@ -1469,13 +1910,12 @@
                 const randomLegend = availableLegends[Math.floor(Math.random() * availableLegends.length)];
                 legendLoader.classList.add('hidden');
                 spinLegendButton.disabled = false;
-                spinLegendButton.textContent = 'Выбрать ещё!';
+                spinLegendButton.innerHTML = `<i class="fas fa-crown mr-2"></i>${currentLang === 'ru' ? 'Выбрать ещё!' : 'Select Again!'}`;
                 isSpinning = false;
-                
                 renderLegendResult(randomLegend);
             }
-            
-            // Модальное окно подтверждения
+
+            // Show confirm modal
             function showConfirmModal(message, callback) {
                 confirmModalMessage.textContent = message;
                 confirmModal.classList.remove('hidden');
@@ -1499,7 +1939,8 @@
                 confirmModalOk.addEventListener('click', handleConfirm);
                 confirmModalCancel.addEventListener('click', handleCancel);
             }
-            
+
+            // Hide confirm modal
             function hideConfirmModal() {
                 confirmModalContent.classList.add('scale-95', 'opacity-0');
                 confirmModalContent.classList.remove('scale-100', 'opacity-100');
@@ -1507,32 +1948,49 @@
                     confirmModal.classList.add('hidden');
                 }, 300);
             }
-            
-            // Обработчики событий
+
+            // Initialize app
+            function initApp() {
+                initTheme();
+                renderPlayerCharactersSelection();
+                renderHistory();
+                renderBossSettings();
+                changeCategory();
+                
+                // Set saved settings
+                teamSizeSelect.value = config.teamSize;
+                animationSpeedSelect.value = config.animationSpeed;
+                categorySelect.value = config.category;
+                bossCategorySelect.value = 'world-bosses';
+                characterSearchInput.placeholder = translations[currentLang].characterSearchPlaceholder;
+            }
+
+            // Event listeners
             themeToggle.addEventListener('click', toggleTheme);
             settingsToggle.addEventListener('click', toggleSettings);
             categorySelect.addEventListener('change', changeCategory);
             bossCategorySelect.addEventListener('change', renderBossSettings);
-            
             spinCharactersButton.addEventListener('click', spinCharacters);
             spinWorldBossButton.addEventListener('click', spinWorldBoss);
             spinWeeklyBossButton.addEventListener('click', spinWeeklyBoss);
             spinLegendButton.addEventListener('click', spinLocalLegend);
-            
             clearHistoryButton.addEventListener('click', () => {
-                showConfirmModal('Вы уверены, что хотите очистить всю историю?', clearHistory);
+                const message = currentLang === 'ru' 
+                    ? translations.ru.confirmClearHistory
+                    : translations.en.confirmClearHistory;
+                showConfirmModal(message, clearHistory);
             });
-            
             clearPlayerCharactersButton.addEventListener('click', () => {
-                showConfirmModal('Вы уверены, что хотите очистить список ваших персонажей?', clearPlayerCharacters);
+                const message = currentLang === 'ru' 
+                    ? translations.ru.confirmClearCharacters
+                    : translations.en.confirmClearCharacters;
+                showConfirmModal(message, clearPlayerCharacters);
             });
-            
             showFullHistoryButton.addEventListener('click', showFullHistoryModal);
             fullHistoryModalCloseButton.addEventListener('click', hideFullHistoryModal);
             fullHistoryModal.addEventListener('click', (e) => {
                 if (e.target === fullHistoryModal) hideFullHistoryModal();
             });
-            
             saveTeamButton.addEventListener('click', () => { 
                 const teamName = teamNameInput.value.trim();
                 if (currentGeneratedTeam.length > 0) {
@@ -1540,59 +1998,41 @@
                     saveTeamSection.classList.add('hidden'); 
                 }
             });
-            
             saveWorldBossButton.addEventListener('click', () => {
                 if (currentGeneratedBoss) {
                     saveBossToHistory(currentGeneratedBoss, true);
                     saveWorldBossSection.classList.add('hidden');
                 }
             });
-            
             saveWeeklyBossButton.addEventListener('click', () => {
                 if (currentGeneratedBoss) {
                     saveBossToHistory(currentGeneratedBoss, false);
                     saveWeeklyBossSection.classList.add('hidden');
                 }
             });
-            
             saveLegendButton.addEventListener('click', () => {
                 if (currentGeneratedBoss) {
                     saveBossToHistory(currentGeneratedBoss, false, true);
                     saveLegendSection.classList.add('hidden');
                 }
             });
-            
             confirmModal.addEventListener('click', (e) => {
                 if (e.target === confirmModal) hideConfirmModal();
             });
-            
             characterSearchInput.addEventListener('input', (e) => {
                 renderPlayerCharactersSelection(e.target.value);
             });
-            
-            // Сохранение настроек при изменении
             teamSizeSelect.addEventListener('change', (e) => {
                 config.teamSize = parseInt(e.target.value);
                 localStorage.setItem(`${currentUserUID}_teamSize`, config.teamSize);
             });
-            
             animationSpeedSelect.addEventListener('change', (e) => {
                 config.animationSpeed = e.target.value;
                 localStorage.setItem(`${currentUserUID}_animationSpeed`, config.animationSpeed);
             });
-            
-            // Установка сохраненных настроек при загрузке
-            teamSizeSelect.value = config.teamSize;
-            animationSpeedSelect.value = config.animationSpeed;
-            categorySelect.value = config.category;
-            bossCategorySelect.value = 'world-bosses';
-            
-            // Инициализация приложения
-            initTheme();
-            renderPlayerCharactersSelection();
-            renderHistory();
-            renderBossSettings();
-            changeCategory(); // Показать выбранную категорию при загрузке
+
+            // Initialize app
+            initApp();
         });
     </script>
 </body>