diff --git "a/GG.html" "b/GG.html"
--- "a/GG.html"
+++ "b/GG.html"
@@ -1,1603 +1,1607 @@
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Random Genshin Impact</title>
-    <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">
-    <style>
-        body {
-            font-family: 'Inter', sans-serif;
-            transition: background-color 0.3s, color 0.3s;
-        }
-        .dark {
-            background-color: #1a202c;
-            color: #e2e8f0;
-        }
-        .light {
-            background-color: #FDF8F0;
-            color: #4A4A4A;
-        }
-        .loader {
-            width: 48px;
-            height: 48px;
-            border: 5px solid #FDF8F0;
-            border-bottom-color: #A089D0;
-            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; 
-                transform: scale(0.8); 
-                filter: brightness(1.5) drop-shadow(0 0 5px rgba(220, 168, 82, 0.0));
-            }
-            50% { 
-                opacity: 1; 
-                transform: scale(1.1);
-                filter: brightness(1.8) drop-shadow(0 0 20px rgba(220, 168, 82, 0.8));
-            }
-            100% { 
-                opacity: 1; 
-                transform: scale(1);
-                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;
-        }
-        .player-char-card.selected {
-            border-color: #DCA852;
-        }
-        .player-char-card .remove-btn {
-            position: absolute;
-            top: -5px;
-            right: -5px;
-            background-color: red;
-            color: white;
-            border-radius: 50%;
-            width: 20px;
-            height: 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 0.8rem;
-            font-weight: bold;
-            cursor: pointer;
-            opacity: 0;
-            transition: opacity 0.2s;
-        }
-        .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);
-            text-align: center;
-            flex-shrink: 0;
-            width: 100px;
-        }
-        .dark .full-history-character-card {
-            background-color: #4a5568;
-        }
-        .full-history-character-card img {
-            width: 64px;
-            height: 64px;
-            border-radius: 50%;
-            margin-bottom: 4px;
-            object-fit: cover;
-            border: 2px solid #DCA852;
-        }
-        .full-history-character-card p {
-            font-size: 0.875rem;
-            font-weight: 500;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            width: 100%;
-        }
-        .dark .full-history-character-card p {
-            color: #e2e8f0;
-        }
-        .custom-scrollbar::-webkit-scrollbar {
-            height: 8px;
-        }
-        .custom-scrollbar::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-        }
-        .custom-scrollbar::-webkit-scrollbar-thumb {
-            background: #888;
-            border-radius: 10px;
-        }
-        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-            background: #555;
-        }
-        .dark .custom-scrollbar::-webkit-scrollbar-track {
-            background: #2d3748;
-        }
-        .dark .custom-scrollbar::-webkit-scrollbar-thumb {
-            background: #a0aec0;
-        }
-        .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-            background: #cbd5e0;
-        }
-        .boss-card {
-            flex: 1;
-            min-width: 200px;
-            max-width: 250px;
-            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;
-            border: 2px solid #5BC0DE;
-            cursor: pointer;
-        }
-        .dark .boss-card {
-            background: #4a5568;
-        }
-        .boss-card:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-        }
-        .boss-card img {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            object-fit: cover;
-            border: 3px solid #5BC0DE;
-            margin-bottom: 8px;
-        }
-        .boss-card h3 {
-            font-weight: bold;
-            margin-bottom: 4px;
-        }
-        .boss-card p {
-            font-size: 0.9rem;
-            color: #666;
-        }
-        .dark .boss-card p {
-            color: #cbd5e0;
-        }
-        .category-select {
-            background-color: #FDF8F0;
-            border: 2px solid #EFEAE4;
-            border-radius: 12px;
-            padding: 12px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-        }
-        .dark .category-select {
-            background-color: #2d3748;
-            border-color: #4a5568;
-        }
-        .category-select label {
-            display: block;
-            font-weight: 600;
-            margin-bottom: 8px;
-            color: #4A4A4A;
-        }
-        .dark .category-select label {
-            color: #e2e8f0;
-        }
-        .category-select select {
-            width: 100%;
-            padding: 8px 12px;
-            border-radius: 8px;
-            border: 1px solid #ddd;
-            background-color: white;
-            font-size: 1rem;
-        }
-        .dark .category-select select {
-            background-color: #4a5568;
-            color: #e2e8f0;
-            border-color: #718096;
-        }
-        .boss-section {
-            margin-bottom: 32px;
-        }
-        .history-item {
-            border-left: 4px solid #DCA852;
-            padding-left: 12px;
-        }
-        .boss-history-item {
-            border-left: 4px solid #A089D0;
-            padding-left: 12px;
-        }
-        .legend-section {
-            background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
-            color: white;
-        }
-        .legend-section h2 {
-            color: white;
-        }
-        .legend-card {
-            border: 2px solid #9B59B6;
-        }
-        .legend-settings {
-            background-color: #FDF8F0;
-            border: 2px solid #EFEAE4;
-            border-radius: 12px;
-            padding: 12px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-        }
-        .dark .legend-settings {
-            background-color: #2d3748;
-            border-color: #4a5568;
-        }
-        .legend-settings label {
-            display: block;
-            font-weight: 600;
-            margin-bottom: 8px;
-            color: #4A4A4A;
-        }
-        .dark .legend-settings label {
-            color: #e2e8f0;
-        }
-        .boss-toggle {
-            margin-bottom: 8px;
-            padding: 8px;
-            border-radius: 8px;
-            transition: background-color 0.2s;
-        }
-        .boss-toggle:hover {
-            background-color: #f0f0f0;
-        }
-        .dark .boss-toggle:hover {
-            background-color: #3d4a5c;
-        }
-        .boss-toggle input {
-            margin-right: 8px;
-        }
-    </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>
-            <h1 class="text-4xl md:text-5xl font-bold text-[#4A4A4A] dark:text-[#e2e8f0] mb-2">Рулетка Genshin Impact</h1>
-            <p class="text-lg text-[#6B6B6B] dark:text-[#a0aec0] max-w-2xl mx-auto">
-                Случайный выбор персонажей, боссов и местных легенд для вашей игры в Genshin Impact
-            </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>
-                        <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">
-                            <option value="4">4</option>
-                            <option value="3">3</option>
-                            <option value="2">2</option>
-                            <option value="1">1</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label for="animation-speed" class="block text-sm font-medium mb-2 dark:text-gray-300">Скорость анимации</label>
-                        <select id="animation-speed" class="w-full p-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
-                            <option value="fast">Быстрая</option>
-                            <option value="medium" selected>Средняя</option>
-                            <option value="slow">Медленная</option>
-                        </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">
-                    Выберите персонажей, которыми вы владеете, чтобы рулетка использовала только их. Если ни один не выбран, будут использоваться все персонажи.
-                </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>
-                <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>
-                </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">
-                    Выберите, какие боссы и местные легенды должны участвовать в рандомизации
-                </p>
-                
-                <div class="mb-4">
-                    <div class="legend-settings">
-                        <label for="boss-category-select">Категория:</label>
-                        <select id="boss-category-select" class="w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
-                            <option value="world-bosses">Мировые боссы</option>
-                            <option value="weekly-bosses">Еженедельные боссы</option>
-                            <option value="local-legends">Местные легенды</option>
-                        </select>
-                    </div>
-                </div>
-                
-                <div id="bosses-settings-container" class="max-h-80 overflow-y-auto pr-2">
-                    <!-- Динамически генерируемые настройки для боссов -->
-                </div>
-            </div>
-            
-            <div class="category-select">
-                <label for="category-select">Выберите категорию для рандомизации:</label>
-                <select id="category-select" class="w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
-                    <option value="characters">Отряд персонажей</option>
-                    <option value="world-bosses">Мировые боссы</option>
-                    <option value="weekly-bosses">Еженедельные боссы</option>
-                    <option value="local-legends">Местные легенды</option>
-                </select>
-            </div>
-            
-            <!-- Секция для персонажей -->
-            <section id="characters-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg">
-                <h2 class="text-3xl font-bold text-center text-[#4A4A4A] dark:text-white mb-8">Сформировать отряд персонажей</h2>
-                <div class="flex justify-center mb-8">
-                    <button id="spin-characters-button" class="bg-[#DCA852] text-white font-bold py-4 px-10 rounded-lg text-xl shadow-md hover:bg-[#c3914a] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#DCA852]/50">
-                        Крутить отряд!
-                    </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-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">
-                        Сохранить отряд
-                    </button>
-                </div>
-            </section>
-            
-            <!-- Секция для мировых боссов -->
-            <section id="world-bosses-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg hidden">
-                <h2 class="text-3xl font-bold text-center text-[#4A4A4A] dark:text-white mb-8">Рандом мирового босса</h2>
-                <div class="flex justify-center mb-8">
-                    <button id="spin-world-boss-button" class="bg-[#5BC0DE] text-white font-bold py-4 px-10 rounded-lg text-xl shadow-md hover:bg-[#3bb5d9] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#5BC0DE]/50">
-                        Выбрать босса!
-                    </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-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">
-                        Сохранить в историю
-                    </button>
-                </div>
-            </section>
-            
-            <!-- Секция для еженедельных боссов -->
-            <section id="weekly-bosses-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg hidden">
-                <h2 class="text-3xl font-bold text-center text-[#4A4A4A] dark:text-white mb-8">Рандом еженедельного босса</h2>
-                <div class="flex justify-center mb-8">
-                    <button id="spin-weekly-boss-button" class="bg-[#FF7B7B] text-white font-bold py-4 px-10 rounded-lg text-xl shadow-md hover:bg-[#ff5f5f] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#FF7B7B]/50">
-                        Выбрать босса!
-                    </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-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">
-                        Сохранить в историю
-                    </button>
-                </div>
-            </section>
-            
-            <!-- Секция для местных легенд -->
-            <section id="local-legends-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg hidden">
-                <h2 class="text-3xl font-bold text-center text-[#4A4A4A] dark:text-white mb-8">Рандом местной легенды</h2>
-                <div class="flex justify-center mb-8">
-                    <button id="spin-legend-button" class="bg-[#9B59B6] text-white font-bold py-4 px-10 rounded-lg text-xl shadow-md hover:bg-[#8e44ad] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#9B59B6]/50">
-                        Выбрать легенду!
-                    </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-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">
-                        Сохранить в историю
-                    </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">
-                            Вся история
-                        </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>
-                    </div>
-                </div>
-                <div id="history-content" class="flex flex-col gap-6">
-                    <p id="history-placeholder" class="text-center text-[#888] dark:text-gray-400">История ваших случайных выборов будет отображаться здесь.</p>
-                </div>
-            </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">
-                Это фанатский проект. Не аффилирован и не одобрен HoYoverse.
-            </p>
-        </footer>
-    </div>
-    <div id="confirm-modal" class="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center hidden p-4">
-        <div class="bg-[#FDF8F0] dark:bg-gray-800 rounded-2xl w-full max-w-sm shadow-2xl relative text-center p-6 transform transition-all duration-300 scale-95 opacity-0" id="confirm-modal-content">
-            <h3 class="text-2xl font-bold mb-4 text-[#4A4A4A] dark:text-white">Подтверждение</h3>
-            <p id="confirm-modal-message" class="text-lg text-[#6B6B6B] dark:text-gray-300 mb-6">Вы уверены, что хотите очистить историю?</p>
-            <div class="flex justify-around gap-4">
-                <button id="confirm-modal-cancel" class="bg-[#A089D0] text-white font-bold py-2 px-6 rounded-lg hover:bg-[#8e7abf]">Отмена</button>
-                <button id="confirm-modal-ok" class="bg-red-500 text-white font-bold py-2 px-6 rounded-lg hover:bg-red-600">Очистить</button>
-            </div>
-        </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>
-        </div>
-    </div>
-    <audio id="boom-sound" src="boom.mp3" preload="auto" volume="1.0"></audio> 
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            // Локальные данные персонажей
-            const LOCAL_CHARACTERS = [
-                { "name": "Альбедо", "icon": "pic/albedo.png", "element": "Geo" },
-                { "name": "Аль-Хайтам", "icon": "pic/alhaitham.png", "element": "Dendro" },
-                { "name": "Алой", "icon": "pic/aloy.png", "element": "Cryo" },
-                { "name": "Эмбер", "icon": "pic/amber.png", "element": "Pyro" },
-                { "name": "Аратаки Итто", "icon": "pic/arataki_itto.png", "element": "Geo" },
-                { "name": "Арлекино", "icon": "pic/arlecchino.png", "element": "Pyro" },
-                { "name": "Бай Чжу", "icon": "pic/baizhu.png", "element": "Dendro" },
-                { "name": "Барбара", "icon": "pic/barbara.png", "element": "Hydro" },
-                { "name": "Бэй Доу", "icon": "pic/beidou.png", "element": "Electro" },
-                { "name": "Беннет", "icon": "pic/bennett.png", "element": "Pyro" },
-                { "name": "Кандакия", "icon": "pic/candace.png", "element": "Hydro" },
-                { "name": "Шарлотта", "icon": "pic/charlotte.png", "element": "Cryo" },
-                { "name": "Часка", "icon": "pic/chasca.png", "element": "Anemo" },
-                { "name": "Тиори", "icon": "pic/chiori.png", "element": "Geo" },
-                { "name": "Чун Юнь", "icon": "pic/chongyun.png", "element": "Cryo" },
-                { "name": "Ситлали", "icon": "pic/citlali.png", "element": "Cryo"  },
-                { "name": "Клоринда", "icon": "pic/clorinde.png", "element": "Electro" },
-                { "name": "Коллеи", "icon": "pic/collei.png", "element": "Dendro" },
-                { "name": "Сайно", "icon": "pic/cyno.png", "element": "Electro" },
-                { "name": "Дэхья", "icon": "pic/dehya.png", "element": "Pyro" },
-                { "name": "Дилюк", "icon": "pic/diluc.png", "element": "Pyro" },
-                { "name": "Диона", "icon": "pic/diona.png", "element": "Cryo" },
-                { "name": "Дори", "icon": "pic/dori.png", "element": "Electro" },
-                { "name": "Эмилия", "icon": "pic/emilie.png" , "element": "Dendro" }, 
-                { "name": "Эскофье", "icon": "pic/escoffier.png", "element": "Cryo"  },
-                { "name": "Эола", "icon": "pic/eula.png", "element": "Cryo" },
-                { "name": "Фарузан", "icon": "pic/faruzan.png", "element": "Anemo" },
-                { "name": "Фишль", "icon": "pic/fischl.png", "element": "Electro" },
-                { "name": "Фремине", "icon": "pic/freminet.png", "element": "Cryo" },
-                { "name": "Фурина", "icon": "pic/furina.png", "element": "Hydro" },
-                { "name": "Га Мин", "icon": "pic/gaming.png", "element": "Pyro" },
-                { "name": "Гань Юй", "icon": "pic/ganyu.png", "element": "Cryo" },
-                { "name": "Горо", "icon": "pic/gorou.png", "element": "Geo" },
-                { "name": "Ху Тао", "icon": "pic/hu_tao.png", "element": "Pyro" },
-                { "name": "Ифу", "icon": "pic/ifa.png", "element": "Anemo"  },
-                { "name": "Иансан", "icon": "pic/iansan.png", "element": "Electro"  },
-                { "name": "Джинн", "icon": "pic/jean.png", "element": "Anemo" },
-                { "name": "Кадзуха", "icon": "pic/kaedehara_kazuha.png", "element": "Anemo" },
-                { "name": "Кэйа", "icon": "pic/kaeya.png", "element": "Cryo" },
-                { "name": "Качина", "icon": "pic/Kachina.webp", "element": "Geo" },
-                { "name": "Аяка", "icon": "pic/kamisato_ayaka.png", "element": "Cryo" },
-                { "name": "Аято", "icon": "pic/kamisato_ayato.png", "element": "Hydro" },
-                { "name": "Кавэх", "icon": "pic/kaveh.png", "element": "Dendro" },
-                { "name": "Кэ Цин", "icon": "pic/keqing.png", "element": "Electro" },
-                { "name": "Кинич", "icon": "pic/kinich.png", "element": "Dendro" }, 
-                { "name": "Кирара", "icon": "pic/kirara.png", "element": "Dendro" },
-                { "name": "Кли", "icon": "pic/klee.png", "element": "Pyro" },
-                { "name": "Сара", "icon": "pic/kujou_sara.png", "element": "Electro" },
-                { "name": "Шинобу", "icon": "pic/kuki_shinobu.png", "element": "Electro" },
-                { "name": "Лань Янь", "icon": "pic/lan_yan.png", "element": "Anemo" },
-                { "name": "Лейла", "icon": "pic/layla.png", "element": "Cryo" },
-                { "name": "Лиза", "icon": "pic/lisa.png", "element": "Electro" },
-                { "name": "Линнет", "icon": "pic/lynette.png", "element": "Anemo" },
-                { "name": "Лини", "icon": "pic/lyney.png", "element": "Pyro" },
-                { "name": "Мавуика", "icon": "pic/mavuika.png", "element": "Pyro" }, 
-                { "name": "Мика", "icon": "pic/mika.png", "element": "Cryo" },
-                { "name": "Мона", "icon": "pic/mona.png", "element": "Hydro" },
-                { "name": "Муалани", "icon": "pic/mualani.png", "element": "Hydro" },
-                { "name": "Нахида", "icon": "pic/nahida.png", "element": "Dendro" },
-                { "name": "Навия", "icon": "pic/navia.png", "element": "Geo" },
-                { "name": "Нёвиллет", "icon": "pic/neuvillette.png", "element": "Hydro" },
-                { "name": "Нилу", "icon": "pic/nilou.png", "element": "Hydro" },
-                { "name": "Нин Гуан", "icon": "pic/ningguang.png", "element": "Geo" },
-                { "name": "Ноэлль", "icon": "pic/noelle.png", "element": "Geo" },
-                { "name": "Оророн", "icon": "pic/ororon.png", "element": "Electro" }, 
-                { "name": "Ци Ци", "icon": "pic/qiqi.png", "element": "Cryo" },
-                { "name": "Райдэн", "icon": "pic/raiden_shogun.png", "element": "Electro" },
-                { "name": "Рэйзор", "icon": "pic/razor.png", "element": "Electro" },
-                { "name": "Розалья", "icon": "pic/rosaria.png", "element": "Cryo" },
-                { "name": "Кокоми", "icon": "pic/sangonomiya_kokomi.png", "element": "Hydro" },
-                { "name": "Саю", "icon": "pic/sayu.png", "element": "Anemo" },
-                { "name": "Сетос", "icon": "pic/sethos.png", "element": "Electro" },
-                { "name": "Шэнь Хэ", "icon": "pic/shenhe.png", "element": "Cryo" },
-                { "name": "Хэйдзо", "icon": "pic/shikanoin_heizou.png", "element": "Anemo" },
-                { "name": "Сиджвин", "icon": "pic/sigewinne.png", "element": "Hydro" },
-                { "name": "Сахароза", "icon": "pic/sucrose.png", "element": "Anemo" },
-                { "name": "Тарталья", "icon": "pic/tartaglia.png", "element": "Hydro" },
-                { "name": "Тома", "icon": "pic/thoma.png", "element": "Pyro" },
-                { "name": "Т��гнари", "icon": "pic/tighnari.png", "element": "Dendro" },
-                { "name": "Вареса", "icon": "pic/varesa.png", "element": "Electro" }, 
-                { "name": "Венти", "icon": "pic/venti.png", "element": "Anemo" },
-                { "name": "Странник", "icon": "pic/wanderer.png", "element": "Anemo" },
-                { "name": "Ризли", "icon": "pic/wriothesley.png", "element": "Cryo" },
-                { "name": "Сяо", "icon": "pic/xiao.png", "element": "Anemo" },
-                { "name": "Сян Линь", "icon": "pic/xiangling.png", "element": "Pyro" },
-                { "name": "Сянь Юнь", "icon": "pic/xianyun.png", "element": "Anemo" },
-                { "name": "Шилонен", "icon": "pic/xilonen.png",   "element": "Geo" }, 
-                { "name": "Син Цю", "icon": "pic/xingqiu.png", "element": "Hydro" },
-                { "name": "Синь Янь", "icon": "pic/xinyan.png", "element": "Pyro" },
-                { "name": "Яэ Мико", "icon": "pic/yae_miko.png", "element": "Electro" },
-                { "name": "Янь Фэй", "icon": "pic/yanfei.png", "element": "Pyro" },
-                { "name": "Яо Яо", "icon": "pic/yaoyao.png", "element": "Dendro" },
-                { "name": "Е Лань", "icon": "pic/yelan.png", "element": "Hydro" },
-                { "name": "Ёимия", "icon": "pic/yoimiya.png", "element": "Pyro" },
-                { "name": "Юнь Цзинь", "icon": "pic/yun_jin.png", "element": "Geo" },
-                { "name": "Паймон", "icon": "pic/paimon.png", "element": "Anemo" },
-                { "name": "ГГ(Анемо)", "icon": "pic/traveler.webp", "element": "Anemo" },
-                { "name": "ГГ (Гео)", "icon": "pic/traveler.webp", "element": "Geo" },
-                { "name": "ГГ (Электро)", "icon": "pic/traveler.webp", "element": "Electro" },
-                { "name": "ГГ (Дендро)", "icon": "pic/traveler.webp", "element": "Dendro" },
-                { "name": "ГГ (Гидро)", "icon": "pic/traveler.webp", "element": "Hydro" },
-                { "name": "Мидзуки", "icon": "pic/yumemizuki_mizuki.png", "element": "Anemo" },
-                { "name": "Чжун Ли", "icon": "pic/zhongli.png", "element": "Geo" },
-
-
-                { "name": "Скирк", "icon": "pic/skirk.png", "element": "Cryo" },
-                { "name": "Далия", "icon": "pic/daliya.png", "element": "Hydro" },
-                { "name": "Инеффа", "icon": "pic/ineffa.png", "element": "Electro" },
-                { "name": "Лаума", "icon": "pic/lauma_icon.webp", "element": "Dendro" },
-                { "name": "Айно", "icon": "pic/aino_icon.webp", "element": "Hydro" },
-                { "name": "Флинс", "icon": "pic/flins_icon.webp", "element": "Electro" },
-                { "name": "Нефер", "icon": "pic/Nefer.webp", "element": "Dendro" },
-                { "name": "Ягода", "icon": "pic/YAgoda.webp", "element": "Anemo" },
-                { "name": "Дурин", "icon": "pic/Durin.webp", "element": "Pyro" },
-            ];
-            
-            // Мировые боссы
-            const WORLD_BOSSES = [
-                { "name": "Сверхтяжёлый сухопутный крейсер: Мобильная крепость", "icon": "pic/WorldBoss/Sverkhtyazhyelyy-sukhoputnyy-kreyser.webp" },
-                { "name": "Повелитель морозной ночи", "icon": "pic/WorldBoss/Povelitel-moroznoy-nochi.webp" },
-                { "name": "Лучезарный мотылёк-призрак", "icon": "pic/WorldBoss/Luchezarnyy-motylyek_prizrak.webp" },
-                { "name": "Железный утёнок", "icon": "pic/WorldBoss/ZHeleznyy-utyenok.webp" },
-                { "name": "Автоматон: Надсмотрщик", "icon": "pic/WorldBoss/Secret-Source-Automaton-Overseer-Device.webp" },
-                { "name": "Статуя лавового дракона", "icon": "pic/WorldBoss/Statuya-lavovogo-drakona.webp" },
-                { "name": "Говорящая с духами отшельница", "icon": "pic/WorldBoss/Govoryashchaya-s-dukhami-otshelnitsa.webp" },
-                { "name": "Сумрачная папилла", "icon": "pic/WorldBoss/Sumrachnaya-papilla.webp" },
-                { "name": "Автоматон: Конфигуратор", "icon": "pic/WorldBoss/Avtomaton-tainstvennogo-istochnika.webp" },
-                { "name": "Прожорливый Горный король-юмказавр", "icon": "pic/WorldBoss/Prozhorlivyy-gornyy-korol-yumkazavr.webp" },
-                { "name": "Кукузавр-тиран золотого пламени", "icon": "pic/WorldBoss/Prozhorlivyi_-Gornyi_-korol_yumkazavr.webp" },
-                { "name": "Легат големов", "icon": "pic/WorldBoss/Kapitan-golemov.webp" },
-                { "name": "Суаньни-отшельник", "icon": "pic/WorldBoss/Suanni_otshelnik.webp" },
-                { "name": "Гидротульпа", "icon": "pic/WorldBoss/Probuzhdyennaya-zhizn.webp" },
-                { "name": "Экспериментальный генератор поля", "icon": "pic/WorldBoss/Eksperimentalnyy-generator-polya.webp" },
-                { "name": "Морской конёк тысячелетней жемчужины", "icon": "pic/WorldBoss/Morskoy-konyek-tysyacheletney-zhemchuzhiny.webp" },
-                { "name": "Император огня и железа", "icon": "pic/WorldBoss/Imperator-ognya-i-zheleza.webp" },
-                { "name": "Сюита ледяного ветра", "icon": "pic/WorldBoss/Syuita-ledyanogo-vetra.webp" },
-                { "name": "Чудовищный креститель", "icon": "pic/WorldBoss/CHudovishchnyy-krestitel.webp" },
-                { "name": "Унут Сетеха", "icon": "pic/WorldBoss/Unut-Setekha.webp" },
-                { "name": "Дендро Гипостазис", "icon": "pic/WorldBoss/Dendro-Gipostazis.png" },
-                { "name": "Алгоритм полуизвечной матрицы оператора наблюдения", "icon": "pic/WorldBoss/Poluvechnaya-matritsa-upravleniya.webp" },
-                { "name": "Дракон вечных бедствий", "icon": "pic/WorldBoss/Drakon-vechnykh-bedstviy.webp" },
-                { "name": "Электро папоротник", "icon": "pic/WorldBoss/Elektro-paporotnik.webp" },
-                { "name": "Пернатый плесенник", "icon": "pic/WorldBoss/Pernatyy-plesennik.webp" },
-                { "name": "Змей руин", "icon": "pic/WorldBoss/Zmey-ruin.webp" },
-                { "name": "Стая вишапов глубин", "icon": "pic/WorldBoss/Staya-vishapov-glubin.webp" },
-                { "name": "Золотой волчий вожак", "icon": "pic/WorldBoss/Golden-Wolflord.png" },
-                { "name": "Гидро Гипостазис", "icon": "pic/WorldBoss/Gidro-Gipostazis.png" },
-                { "name": "Манифестация грома", "icon": "pic/WorldBoss/Elektro-Okeanid.png" },
-                { "name": "Бесконечный механический массив", "icon": "pic/WorldBoss/Beskonechnyy-mekhanicheskiy-massiv.png" },
-                { "name": "Пиро гипостазис", "icon": "pic/WorldBoss/Piro-gipostazis.png" },
-                { "name": "Магу Кенки", "icon": "pic/WorldBoss/Magu-Kenki.webp" },
-                { "name": "Крио гипостазис", "icon": "pic/WorldBoss/Cryo_Hypostasis.webp" },
-                { "name": "Древний геовишап", "icon": "pic/WorldBoss/Drevniy-geovishap.webp" },
-                { "name": "Гео гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Rock.png" },
-                { "name": "Электро гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Electric.png" },
-                { "name": "Анемо гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Wind.png" },
-                { "name": "Крио папоротник", "icon": "pic/WorldBoss/UI_MonsterIcon_cryo_regisvine.png" },
-                { "name": "Пиро орхидея", "icon": "pic/WorldBoss/UI_MonsterIcon_Regisvine_Fire.png" },
-                { "name": "Океанид", "icon": "pic/WorldBoss/Okeanid.webp" }
-            ];
-            // Еженедельные боссы
-            const WEEKLY_BOSSES = [
-                { "name": "Игра перед вратами", "icon": "pic/Allweeklybosses/Igra-pered-vratami.webp" },
-                { "name": "Владыка истлевшего первобытного пламени", "icon": "pic/Allweeklybosses/Lord-of-Eroded-Primal-Fire.webp" },
-                { "name": "Слуга", "icon": "pic/Allweeklybosses/Nomer-chetyre-iz-Predvestnikov-Fatui_-Arlekino.webp" },
-                { "name": "Всепожирающий нарвал", "icon": "pic/Allweeklybosses/Vsepozhirayushchiy-narval.webp" },
-                { "name": "Страж оазиса Апепа", "icon": "pic/Allweeklybosses/Strazh-oazisa-Apepa.webp" },
-                { "name": "Сёки но Ками", "icon": "pic/Allweeklybosses/Syeki-no-Kami.webp" },
-                { "name": "Магацу митакэ Наруками но микото", "icon": "pic/Allweeklybosses/m_29060201.webp" },
-                { "name": "Синьора", "icon": "pic/Allweeklybosses/Sinora.png" },
-                { "name": "Аждаха", "icon": "pic/Allweeklybosses/Azhdaha.png" },
-                { "name": "Чайльд", "icon": "pic/Allweeklybosses/Childe.png" },
-                { "name": "Лупус Бореалис, Волчий лорд", "icon": "pic/Allweeklybosses/UI_MonsterIcon_LupiBoreas.png" },
-                { "name": "Ужас бури", "icon": "pic/Allweeklybosses/Stormterror.png" }
-            ];
-            
-            // Местные Легенды
-            const LOCAL_LEGENDS = [
-                { "name": "Сигурд", "icon": "pic/LocalLegends/Sigurd.png", "guideUrl": "#" },
-                { "name": "Волшебные рыцари-близнецы", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-284766-1-800x476.jpg", "guideUrl": "https://wotpack.ru/volshebnye-rycari-bliznecy-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Окружной судья океана", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-284964-4.jpg", "guideUrl": "https://wotpack.ru/okruzhnoj-sudja-okeana-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Дева озера Вивианна", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283768-1-800x425.jpg", "guideUrl": "https://wotpack.ru/deva-ozera-vivianna-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Дева озера Нинианна", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283708-1-800x423.jpg", "guideUrl": "https://wotpack.ru/deva-ozera-ninianna-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Угасающий старый солдат", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283590-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/ugasajushhij-staryj-soldat-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Владыка отшельников Доварху", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283520-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/vladyka-otshelnikov-dovarhu-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Меч ущелья", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283554-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/mech-ushhelja-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Железный виконт", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-284964-10.jpg", "guideUrl": "https://wotpack.ru/zheleznyj-vikont-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Автоматический генератор полей сверхвычислений", "icon": "https://wotpack.ru/wp-content/uploads/2023/09/word-image-301036-4.jpeg", "guideUrl": "https://wotpack.ru/avtomaticheskij-generator-polej-sverhvychislenij-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Лиахра Блистательная", "icon": "https://wotpack.ru/wp-content/uploads/2023/09/word-image-301327-4.jpeg", "guideUrl": "https://wotpack.ru/liahra-blistatelnaja-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Изольт", "icon": "https://wotpack.ru/wp-content/uploads/2023/09/word-image-301389-1-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/izolt-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Шассанион", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-321383-7-800x450.jpeg", "guideUrl": "https://wotpack.ru/shassanion-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Деянейра Снежневна", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/1-10-800x450.jpg", "guideUrl": "https://wotpack.ru/dejanejra-snezhnevna-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Роки Авилдсен", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-321618-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/roki-avildsen-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Магический меч Круж", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-322447-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/magicheskij-mech-kruzh-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Лиям", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-321469-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/lijam-v-genshin-impact-kak-najti-i-pobedit/" },
-                { "name": "Киней", "icon": "https://wotpack.ru/wp-content/uploads/2024/04/Kinej-v-Genshin-Impact-800x450.jpg", "guideUrl": "https://wotpack.ru/kinej-v-genshin-impact-kak-najti-i-pobedit/" },
-
-
-                { "name": "Три полихромные звезды", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/mestnaya-legenda-tri-polihromnye-zvezdy-3-800x449.jpg", "guideUrl": "https://wotpack.ru/tri-polihromnye-zvezdy-v-genshin-impact-kak-nayti-i-pobedit-vasiliya-sidorenko-i-nomonkonova/" },
-                { "name": "Косихо", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/kosiho-v-genshin-impact-kak-nayti-i-pobedit-800x450.jpg", "guideUrl": "https://wotpack.ru/kosiho-v-genshin-impact-kak-nayti-i-pobedit-cherepahu/" },
-                { "name": "Сапфо среди волн", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/sapfo-sredi-voln-v-genshin-impact-kak-nayti-i-pobedit-800x450.jpg", "guideUrl": "https://wotpack.ru/sapfo-sredi-voln-v-genshin-impact-kak-nayti-i-pobedit/" },
-                { "name": "Балачко", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/balachko-v-genshin-impact-kak-nayti-i-pobedit-397x206.jpg", "guideUrl": "https://wotpack.ru/balachko-v-genshin-impact-kak-nayti-i-pobedit/" },
-                { "name": "Рилай", "icon": "https://wotpack.ru/wp-content/uploads/2024/11/rilay-v-genshin-impact-800x450.jpg", "guideUrl": "https://wotpack.ru/rilay-v-genshin-impact-kak-nayti-i-pobedit/" },
-                { "name": "Короля кабанов", "icon": "https://wotpack.ru/wp-content/uploads/2021/11/%D0%BA%D0%BE%D1%80%D0%BE%D0%BB%D1%8C-%D1%81%D0%BD%D0%B5%D0%B6%D0%BD%D1%8B%D1%85-%D0%BA%D0%B0%D0%B1%D0%B0%D0%BD%D0%BE%D0%B2-348x220.jpg", "guideUrl": "https://wotpack.ru/genshin-impact-ah-svezhee-mjaso-prohozhdenie-kvesta-gajd/" },
-                { "name": "Бронзовый замок", "icon": "https://wotpack.ru/wp-content/uploads/2024/11/bronzovyy-2.jpg", "guideUrl": "https://wotpack.ru/bronzovyy-zamok-v-genshin-impact-kak-nayti-i-pobedit/" },
-                { "name": "Ничтожный", "icon": "https://wotpack.ru/wp-content/uploads/2025/03/nichtozhnyy-v-mire-vid.jpg", "guideUrl": "https://wotpack.ru/nichtozhnyy-v-genshin-impact-kak-nayti-i-pobedit/" },
-                { "name": "Пик", "icon": "https://wotpack.ru/wp-content/uploads/2025/03/pik-v-genshin-impact-kak-pobedit-mutanta-730x411.jpg", "guideUrl": "https://wotpack.ru/pik-v-genshin-impact-kak-nayti-i-pobedit-mutanta/" },
-                { "name": "Боевой козел и Железный коготь", "icon": "https://wotpack.ru/wp-content/uploads/2025/03/boevoy-kozyol-i-zheleznyy-kogot-v-genshin-impact_-kak-nayti-i-pobedit-730x411.jpg", "guideUrl": "https://wotpack.ru/boevoy-kozyol-i-zheleznyy-kogot-v-genshin-impact-kak-nayti-i-pobedit/" },
-
-                { "name": "Теночцитока", "icon": "https://wotpack.ru/wp-content/uploads/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
-            function getOrCreateUID() {
-                let uid = localStorage.getItem('genshinRouletteUID');
-                if (!uid) {
-                    uid = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-                    localStorage.setItem('genshinRouletteUID', uid);
-                }
-                return uid;
-            }
-            const currentUserUID = getOrCreateUID();
-            
-            // Конфигурация
-            const config = {
-                teamSize: parseInt(localStorage.getItem(`${currentUserUID}_teamSize`)) || 4,
-                animationSpeed: localStorage.getItem(`${currentUserUID}_animationSpeed`) || 'medium',
-                darkMode: localStorage.getItem('theme') === 'dark',
-                category: localStorage.getItem('genshinCategory') || 'characters',
-                excludedBosses: JSON.parse(localStorage.getItem(`${currentUserUID}_excludedBosses`)) || {
-                    'world-bosses': [],
-                    'weekly-bosses': [],
-                    'local-legends': []
-                }
-            };
-            
-            // Состояние приложения
-            let allCharacters = [...LOCAL_CHARACTERS];
-            let historyTeams = JSON.parse(localStorage.getItem(`${currentUserUID}_genshinTeamsHistory`)) || [];
-            let historyBosses = JSON.parse(localStorage.getItem(`${currentUserUID}_genshinBossesHistory`)) || [];
-            let playerCharacters = JSON.parse(localStorage.getItem(`${currentUserUID}_playerCharacters`)) || [];
-            let isSpinning = false;
-            let currentGeneratedTeam = [];
-            let currentGeneratedBoss = null;
-            let isWorldBoss = true;
-            let isLegend = false;
-            
-            // Элементы DOM
-            const spinCharactersButton = document.getElementById('spin-characters-button');
-            const spinWorldBossButton = document.getElementById('spin-world-boss-button');
-            const spinWeeklyBossButton = document.getElementById('spin-weekly-boss-button');
-            const spinLegendButton = document.getElementById('spin-legend-button');
-            const categorySelect = document.getElementById('category-select');
-            const charactersResult = document.getElementById('characters-result');
-            const worldBossResult = document.getElementById('world-boss-result');
-            const weeklyBossResult = document.getElementById('weekly-boss-result');
-            const legendResult = document.getElementById('legend-result');
-            const charactersPlaceholder = document.getElementById('characters-placeholder');
-            const worldBossPlaceholder = document.getElementById('world-boss-placeholder');
-            const weeklyBossPlaceholder = document.getElementById('weekly-boss-placeholder');
-            const legendPlaceholder = document.getElementById('legend-placeholder');
-            const charactersLoader = document.getElementById('characters-loader');
-            const worldBossLoader = document.getElementById('world-boss-loader');
-            const weeklyBossLoader = document.getElementById('weekly-boss-loader');
-            const legendLoader = document.getElementById('legend-loader');
-            const historyContent = document.getElementById('history-content');
-            const historyPlaceholder = document.getElementById('history-placeholder');
-            const clearHistoryButton = document.getElementById('clear-history-button');
-            const showFullHistoryButton = document.getElementById('show-full-history-button');
-            const themeToggle = document.getElementById('theme-toggle');
-            const settingsToggle = document.getElementById('settings-toggle');
-            const settingsPanel = document.getElementById('settings-panel');
-            const teamSizeSelect = document.getElementById('team-size');
-            const animationSpeedSelect = document.getElementById('animation-speed');
-            const confirmModal = document.getElementById('confirm-modal');
-            const confirmModalContent = document.getElementById('confirm-modal-content');
-            const confirmModalMessage = document.getElementById('confirm-modal-message');
-            const confirmModalCancel = document.getElementById('confirm-modal-cancel');
-            const confirmModalOk = document.getElementById('confirm-modal-ok');
-            const playerCharactersSelection = document.getElementById('player-characters-selection');
-            const characterSearchInput = document.getElementById('character-search');
-            const clearPlayerCharactersButton = document.getElementById('clear-player-characters');
-            const saveTeamSection = document.getElementById('save-characters-section');
-            const teamNameInput = document.getElementById('team-name-input');
-            const saveTeamButton = document.getElementById('save-team-button');
-            const saveWorldBossSection = document.getElementById('save-world-boss-section');
-            const saveWorldBossButton = document.getElementById('save-world-boss-button');
-            const saveWeeklyBossSection = document.getElementById('save-weekly-boss-section');
-            const saveWeeklyBossButton = document.getElementById('save-weekly-boss-button');
-            const saveLegendSection = document.getElementById('save-legend-section');
-            const saveLegendButton = document.getElementById('save-legend-button');
-            const boomSound = document.getElementById('boom-sound');
-            const charactersSection = document.getElementById('characters-section');
-            const worldBossesSection = document.getElementById('world-bosses-section');
-            const weeklyBossesSection = document.getElementById('weekly-bosses-section');
-            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');
-            
-            // Инициализация темы
-            function initTheme() {
-                if (config.darkMode) {
-                    document.body.classList.remove('light');
-                    document.body.classList.add('dark');
-                } else {
-                    document.body.classList.remove('dark');
-                    document.body.classList.add('light');
-                }
-            }
-            
-            // Переключение темы
-            function toggleTheme() {
-                config.darkMode = !config.darkMode;
-                initTheme();
-                localStorage.setItem('theme', config.darkMode ? 'dark' : 'light');
-            }
-            
-            // Переключение настроек
-            function toggleSettings() {
-                settingsPanel.classList.toggle('open');
-            }
-            
-            // Изменение категории
-            function changeCategory() {
-                config.category = categorySelect.value;
-                localStorage.setItem('genshinCategory', config.category);
-                
-                // Скрываем все секции
-                charactersSection.classList.add('hidden');
-                worldBossesSection.classList.add('hidden');
-                weeklyBossesSection.classList.add('hidden');
-                localLegendsSection.classList.add('hidden');
-                
-                // Показываем выбранную секцию
-                if (config.category === 'characters') {
-                    charactersSection.classList.remove('hidden');
-                } else if (config.category === 'world-bosses') {
-                    worldBossesSection.classList.remove('hidden');
-                } else if (config.category === 'weekly-bosses') {
-                    weeklyBossesSection.classList.remove('hidden');
-                } else if (config.category === 'local-legends') {
-                    localLegendsSection.classList.remove('hidden');
-                }
-            }
-            
-            // Создание карточки персонажа
-            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.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>
-                `;
-                return card;
-            }
-            
-            // Создание карточки босса
-            function createBossCard(boss) {
-                const card = document.createElement('div');
-                card.className = `boss-card`;
-                card.innerHTML = `
-                    <img src="${boss.icon}" alt="${boss.name}" 
-                         onerror="this.onerror=null;this.src='https://placehold.co/80x80/EFEAE4/4A4A4A?text=N/A'">
-                    <h3 class="font-bold text-lg dark:text-white">${boss.name}</h3>
-                `;
-                return card;
-            }
-            
-            // Создание карточки местной легенды (кликабельной)
-            function createLegendCard(legend) {
-                const card = document.createElement('div');
-                card.className = `boss-card legend-card`;
-                // Делаем карточку кликабельной только если есть ссылка на гайд
-                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';
-                    card.addEventListener('click', () => {
-                        window.open(legend.guideUrl, '_blank');
-                    });
-                }
-                
-                return 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.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}">` : '';
-                card.innerHTML = `
-                    <div class="relative">
-                        <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'">
-                        ${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);
-                    } else {
-                        togglePlayerCharacter(character);
-                    }
-                });
-                return card;
-            }
-            
-            // Рендеринг настроек для боссов
-            function renderBossSettings() {
-                const category = bossCategorySelect.value;
-                let bosses = [];
-                
-                if (category === 'world-bosses') {
-                    bosses = WORLD_BOSSES;
-                } else if (category === 'weekly-bosses') {
-                    bosses = WEEKLY_BOSSES;
-                } else if (category === 'local-legends') {
-                    bosses = LOCAL_LEGENDS;
-                }
-                
-                bossesSettingsContainer.innerHTML = '';
-                
-                bosses.forEach(boss => {
-                    const isExcluded = config.excludedBosses[category].includes(boss.name);
-                    const bossToggle = document.createElement('div');
-                    bossToggle.className = 'boss-toggle flex items-center';
-                    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>
-                    `;
-                    bossesSettingsContainer.appendChild(bossToggle);
-                    
-                    const checkbox = bossToggle.querySelector('.boss-toggle-checkbox');
-                    checkbox.addEventListener('change', (e) => {
-                        const excludedList = config.excludedBosses[category];
-                        if (e.target.checked) {
-                            // Включить босса - убрать из списка исключенных
-                            const index = excludedList.indexOf(boss.name);
-                            if (index > -1) {
-                                excludedList.splice(index, 1);
-                            }
-                        } else {
-                            // Исключить босса - добавить в список исключенных
-                            if (!excludedList.includes(boss.name)) {
-                                excludedList.push(boss.name);
-                            }
-                        }
-                        localStorage.setItem(`${currentUserUID}_excludedBosses`, JSON.stringify(config.excludedBosses));
-                    });
-                });
-            }
-            
-            // Рендеринг списка персонажей для выбора
-            function renderPlayerCharactersSelection(filter = '') {
-                playerCharactersSelection.innerHTML = '';
-                const filteredCharacters = allCharacters.filter(char => 
-                    char.name.toLowerCase().includes(filter.toLowerCase())
-                );
-                filteredCharacters.forEach(char => {
-                    playerCharactersSelection.appendChild(createPlayerCharacterSelectionCard(char));
-                });
-                updateClearPlayerCharactersButtonVisibility();
-            }
-            
-            // Добавление/удаление персонажа из списка игрока
-            function togglePlayerCharacter(character) {
-                const index = playerCharacters.findIndex(c => c.name === character.name);
-                if (index > -1) {
-                    playerCharacters.splice(index, 1);
-                } else {
-                    playerCharacters.push(character);
-                }
-                localStorage.setItem(`${currentUserUID}_playerCharacters`, JSON.stringify(playerCharacters));
-                renderPlayerCharactersSelection(characterSearchInput.value);
-                updateClearPlayerCharactersButtonVisibility();
-            }
-            
-            // Удаление персонажа из списка игрока по имени
-            function removePlayerCharacter(characterName) {
-                playerCharacters = playerCharacters.filter(c => c.name !== characterName);
-                localStorage.setItem(`${currentUserUID}_playerCharacters`, JSON.stringify(playerCharacters));
-                renderPlayerCharactersSelection(characterSearchInput.value);
-                updateClearPlayerCharactersButtonVisibility();
-            }
-            
-            // Очистка всех персонажей игрока
-            function clearPlayerCharacters() {
-                playerCharacters = [];
-                localStorage.removeItem(`${currentUserUID}_playerCharacters`);
-                renderPlayerCharactersSelection('');
-                hideConfirmModal();
-            }
-            
-            // Обновление видимости кнопки "Очистить выбранных персонажей"
-            function updateClearPlayerCharactersButtonVisibility() {
-                if (playerCharacters.length > 0) {
-                    clearPlayerCharactersButton.classList.remove('hidden');
-                } else {
-                    clearPlayerCharactersButton.classList.add('hidden');
-                }
-            }
-            
-            // Отображение результата рулетки с плавной анимацией и "бум" эффектом
-            async function renderCharactersResult(team) {
-                charactersResult.innerHTML = '';
-                charactersPlaceholder.classList.add('hidden');
-                saveTeamSection.classList.add('hidden');
-                
-                for (let i = 0; i < team.length; i++) {
-                    const char = team[i];
-                    const card = createCharacterCard(char);
-                    card.classList.add('roulette-item-boom-enter');
-                    charactersResult.appendChild(card);
-                    
-                    if (boomSound) {
-                        boomSound.currentTime = 0; 
-                        boomSound.play().catch(e => console.error("Error playing sound:", e));
-                    }
-                    
-                    await new Promise(resolve => setTimeout(resolve, 100));
-                    card.classList.add('roulette-item-boom-enter-active');
-                    await new Promise(resolve => setTimeout(resolve, 500)); 
-                }
-                
-                saveTeamSection.classList.remove('hidden');
-                teamNameInput.value = '';
-                currentGeneratedTeam = team;
-            }
-            
-            // Отображение результата для босса
-            async function renderBossResult(boss, isWorld) {
-                const resultDiv = isWorld ? worldBossResult : weeklyBossResult;
-                const placeholder = isWorld ? worldBossPlaceholder : weeklyBossPlaceholder;
-                const saveSection = isWorld ? saveWorldBossSection : saveWeeklyBossSection;
-                
-                resultDiv.innerHTML = '';
-                placeholder.classList.add('hidden');
-                saveSection.classList.add('hidden');
-                
-                const card = createBossCard(boss);
-                card.classList.add('roulette-item-boom-enter');
-                resultDiv.appendChild(card);
-                
-                if (boomSound) {
-                    boomSound.currentTime = 0; 
-                    boomSound.play().catch(e => console.error("Error playing sound:", e));
-                }
-                
-                await new Promise(resolve => setTimeout(resolve, 100));
-                card.classList.add('roulette-item-boom-enter-active');
-                await new Promise(resolve => setTimeout(resolve, 500));
-                
-                saveSection.classList.remove('hidden');
-                currentGeneratedBoss = boss;
-                isWorldBoss = isWorld;
-                isLegend = false;
-            }
-            
-            // Отображение результата для местной легенды
-            async function renderLegendResult(legend) {
-                legendResult.innerHTML = '';
-                legendPlaceholder.classList.add('hidden');
-                saveLegendSection.classList.add('hidden');
-                
-                const card = createLegendCard(legend);
-                card.classList.add('roulette-item-boom-enter');
-                legendResult.appendChild(card);
-                
-                if (boomSound) {
-                    boomSound.currentTime = 0; 
-                    boomSound.play().catch(e => console.error("Error playing sound:", e));
-                }
-                
-                await new Promise(resolve => setTimeout(resolve, 100));
-                card.classList.add('roulette-item-boom-enter-active');
-                await new Promise(resolve => setTimeout(resolve, 500));
-                
-                saveLegendSection.classList.remove('hidden');
-                currentGeneratedBoss = legend;
-                isWorldBoss = false;
-                isLegend = true;
-            }
-            
-            // Отображение истории
-            function renderHistory(limit = 3) {
-                historyContent.innerHTML = '';
-                const allHistory = [...historyTeams, ...historyBosses].sort((a, b) => new Date(b.date) - new Date(a.date));
-                
-                if (allHistory.length === 0) {
-                    historyPlaceholder.classList.remove('hidden');
-                    clearHistoryButton.classList.add('hidden');
-                    showFullHistoryButton.classList.add('hidden');
-                } else {
-                    historyPlaceholder.classList.add('hidden');
-                    clearHistoryButton.classList.remove('hidden');
-                    showFullHistoryButton.classList.remove('hidden');
-                    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'}`;
-                        
-                        const title = document.createElement('h3');
-                        title.className = 'text-lg font-semibold mb-3 dark:text-white';
-                        
-                        if (item.type === 'team') {
-                            const teamName = item.name ? `"${item.name}" - ` : '';
-                            title.textContent = `${teamName}Отряд (${new Date(item.date).toLocaleString()})`;
-                        } else if (item.type === 'legend') {
-                            title.textContent = `${item.name} (Местная легенда) (${new Date(item.date).toLocaleString()})`;
-                        } else {
-                            title.textContent = `${item.name} (${new Date(item.date).toLocaleString()})`;
-                        }
-                        
-                        itemElement.appendChild(title);
-                        
-                        const container = document.createElement('div');
-                        container.className = 'flex flex-wrap justify-center gap-3';
-                        
-                        if (item.type === 'team') {
-                            item.characters.forEach(char => {
-                                container.appendChild(createCharacterCard(char));
-                            });
-                        } else if (item.type === 'legend') {
-                            container.appendChild(createLegendCard(item));
-                        } else {
-                            container.appendChild(createBossCard(item));
-                        }
-                        
-                        itemElement.appendChild(container);
-                        historyContent.appendChild(itemElement);
-                    });
-                }
-            }
-            
-            // Показать модальное окно всей истории
-            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>';
-                } 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'}`;
-                        
-                        const title = document.createElement('h3');
-                        title.className = 'text-lg font-semibold mb-3 text-[#4A4A4A] dark:text-white';
-                        
-                        if (item.type === 'team') {
-                            const teamName = item.name ? `"${item.name}" - ` : '';
-                            title.textContent = `${teamName}Отряд (${new Date(item.date).toLocaleString()})`;
-                        } else if (item.type === 'legend') {
-                            title.textContent = `${item.name} (Местная легенда) (${new Date(item.date).toLocaleString()})`;
-                        } else {
-                            title.textContent = `${item.name} (${new Date(item.date).toLocaleString()})`;
-                        }
-                        
-                        itemElement.appendChild(title);
-                        
-                        const container = document.createElement('div');
-                        container.className = 'flex gap-3 overflow-x-auto pb-2 custom-scrollbar';
-                        
-                        if (item.type === 'team') {
-                            item.characters.forEach(char => {
-                                const card = document.createElement('div');
-                                card.className = 'full-history-character-card';
-                                card.innerHTML = `
-                                    <img src="${char.icon}" alt="${char.name}" 
-                                         class="w-16 h-16 rounded-full mb-1 object-cover border-2"
-                                         onerror="this.onerror=null;this.src='https://placehold.co/64x64/EFEAE4/4A4A4A?text=N/A'">
-                                    <p class="font-medium text-sm truncate w-full">${char.name}</p>
-                                `;
-                                container.appendChild(card);
-                            });
-                        } else if (item.type === 'legend') {
-                            const legendCard = document.createElement('div');
-                            legendCard.className = 'full-history-character-card';
-                            legendCard.innerHTML = `
-                                <img src="${item.icon}" alt="${item.name}" 
-                                     class="w-16 h-16 rounded-full mb-1 object-cover border-2"
-                                     onerror="this.onerror=null;this.src='https://placehold.co/64x64/EFEAE4/4A4A4A?text=N/A'">
-                                <p class="font-medium text-sm truncate w-full">${item.name}</p>
-                                <p class="text-xs text-gray-500 dark:text-gray-400">Местная легенда</p>
-                            `;
-                            container.appendChild(legendCard);
-                        } else {
-                            const bossCard = document.createElement('div');
-                            bossCard.className = 'full-history-character-card';
-                            bossCard.innerHTML = `
-                                <img src="${item.icon}" alt="${item.name}" 
-                                     class="w-16 h-16 rounded-full mb-1 object-cover border-2"
-                                     onerror="this.onerror=null;this.src='https://placehold.co/64x64/EFEAE4/4A4A4A?text=N/A'">
-                                <p class="font-medium text-sm truncate w-full">${item.name}</p>
-                            `;
-                            container.appendChild(bossCard);
-                        }
-                        
-                        itemElement.appendChild(container);
-                        fullHistoryModalContentInner.appendChild(itemElement);
-                    });
-                }
-                
-                fullHistoryModal.classList.remove('hidden');
-                setTimeout(() => {
-                    fullHistoryModalContent.classList.remove('scale-95', 'opacity-0');
-                    fullHistoryModalContent.classList.add('scale-100', 'opacity-100');
-                }, 10);
-            }
-            
-            // Скрыть модальное окно всей истории
-            function hideFullHistoryModal() {
-                fullHistoryModalContent.classList.add('scale-95', 'opacity-0');
-                fullHistoryModalContent.classList.remove('scale-100', 'opacity-100');
-                setTimeout(() => {
-                    fullHistoryModal.classList.add('hidden');
-                }, 300);
-            }
-            
-            // Сохранение отряда в историю
-            function saveTeamToHistory(team, name = '') {
-                historyTeams.unshift({
-                    date: new Date().toISOString(),
-                    characters: team,
-                    name: name,
-                    type: 'team'
-                });
-                localStorage.setItem(`${currentUserUID}_genshinTeamsHistory`, JSON.stringify(historyTeams));
-                renderHistory();
-            }
-            
-            // Сохранение босса в историю
-            function saveBossToHistory(boss, isWorld, isLegendType = false) {
-                const type = isLegendType ? 'legend' : (isWorld ? 'world-boss' : 'weekly-boss');
-                const bossData = {
-                    date: new Date().toISOString(),
-                    name: boss.name,
-                    icon: boss.icon,
-                    type: type
-                };
-                
-                historyBosses.unshift(bossData);
-                localStorage.setItem(`${currentUserUID}_genshinBossesHistory`, JSON.stringify(historyBosses));
-                renderHistory();
-            }
-            
-            // Очистка истории
-            function clearHistory() {
-                historyTeams = [];
-                historyBosses = [];
-                localStorage.removeItem(`${currentUserUID}_genshinTeamsHistory`);
-                localStorage.removeItem(`${currentUserUID}_genshinBossesHistory`);
-                renderHistory();
-                hideConfirmModal();
-            }
-            
-            // Запуск рулетки персонажей
-            async function spinCharacters() {
-                const availableCharsForSpin = playerCharacters.length > 0 ? playerCharacters : allCharacters;
-                if (isSpinning || availableCharsForSpin.length < config.teamSize) {
-                    alert(`Недостаточно персонажей для формирования отряда из ${config.teamSize} человек. Доступно: ${availableCharsForSpin.length}`);
-                    return;
-                }
-                
-                isSpinning = true;
-                spinCharactersButton.disabled = true;
-                spinCharactersButton.textContent = 'Крутим...';
-                charactersResult.innerHTML = '';
-                charactersPlaceholder.classList.add('hidden');
-                charactersLoader.classList.remove('hidden');
-                saveTeamSection.classList.add('hidden');
-                
-                const teamSize = parseInt(teamSizeSelect.value);
-                let charsPool = [...availableCharsForSpin];
-                const selectedTeam = [];
-                let spinDurationMs; 
-                
-                switch (animationSpeedSelect.value) {
-                    case 'fast': spinDurationMs = 1500; break; 
-                    case 'slow': spinDurationMs = 4000; break; 
-                    default: spinDurationMs = 2500; 
-                }
-                
-                const individualSpinTime = spinDurationMs / teamSize;
-                
-                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]';
-                    charactersResult.appendChild(tempDiv);
-                    
-                    let startTime = Date.now();
-                    let animationFrame;
-                    
-                    const animateSpin = () => {
-                        const elapsedTime = Date.now() - startTime;
-                        if (elapsedTime < individualSpinTime) {
-                            const randomChar = charsPool[Math.floor(Math.random() * charsPool.length)];
-                            tempDiv.innerHTML = '';
-                            const tempCard = createCharacterCard(randomChar);
-                            tempCard.classList.add('roulette-item-spin');
-                            tempDiv.appendChild(tempCard);
-                            animationFrame = requestAnimationFrame(animateSpin);
-                        } else {
-                            cancelAnimationFrame(animationFrame);
-                            const selectedIndex = Math.floor(Math.random() * charsPool.length);
-                            const selectedChar = charsPool.splice(selectedIndex, 1)[0];
-                            selectedTeam.push(selectedChar);
-                            tempDiv.innerHTML = '';
-                        }
-                    };
-                    
-                    animateSpin();
-                    await new Promise(resolve => setTimeout(resolve, individualSpinTime + 100));
-                }
-                
-                // Завершение рулетки
-                charactersLoader.classList.add('hidden');
-                spinCharactersButton.disabled = false;
-                spinCharactersButton.textContent = 'Крут��ть ещё!';
-                isSpinning = false;
-                
-                renderCharactersResult(selectedTeam);
-            }
-            
-            // Запуск рулетки мирового босса
-            async function spinWorldBoss() {
-                if (isSpinning) return;
-                
-                isSpinning = true;
-                spinWorldBossButton.disabled = true;
-                spinWorldBossButton.textContent = 'Выбираем...';
-                worldBossResult.innerHTML = '';
-                worldBossPlaceholder.classList.add('hidden');
-                worldBossLoader.classList.remove('hidden');
-                saveWorldBossSection.classList.add('hidden');
-                
-                await new Promise(resolve => setTimeout(resolve, 1000));
-                
-                // Фильтруем исключенных боссов
-                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>';
-                    worldBossLoader.classList.add('hidden');
-                    spinWorldBossButton.disabled = false;
-                    spinWorldBossButton.textContent = 'Выбрать ещё!';
-                    isSpinning = false;
-                    return;
-                }
-                
-                const randomBoss = availableBosses[Math.floor(Math.random() * availableBosses.length)];
-                worldBossLoader.classList.add('hidden');
-                spinWorldBossButton.disabled = false;
-                spinWorldBossButton.textContent = 'Выбрать ещё!';
-                isSpinning = false;
-                
-                renderBossResult(randomBoss, true);
-            }
-            
-            // Запуск рулетки еженедельного босса
-            async function spinWeeklyBoss() {
-                if (isSpinning) return;
-                
-                isSpinning = true;
-                spinWeeklyBossButton.disabled = true;
-                spinWeeklyBossButton.textContent = 'Выбираем...';
-                weeklyBossResult.innerHTML = '';
-                weeklyBossPlaceholder.classList.add('hidden');
-                weeklyBossLoader.classList.remove('hidden');
-                saveWeeklyBossSection.classList.add('hidden');
-                
-                await new Promise(resolve => setTimeout(resolve, 1000));
-                
-                // Фильтруем исключенных боссов
-                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>';
-                    weeklyBossLoader.classList.add('hidden');
-                    spinWeeklyBossButton.disabled = false;
-                    spinWeeklyBossButton.textContent = 'Выбрать ещё!';
-                    isSpinning = false;
-                    return;
-                }
-                
-                const randomBoss = availableBosses[Math.floor(Math.random() * availableBosses.length)];
-                weeklyBossLoader.classList.add('hidden');
-                spinWeeklyBossButton.disabled = false;
-                spinWeeklyBossButton.textContent = 'Выбрать ещё!';
-                isSpinning = false;
-                
-                renderBossResult(randomBoss, false);
-            }
-            
-            // Запуск рулетки местной легенды
-            async function spinLocalLegend() {
-                if (isSpinning) return;
-                
-                isSpinning = true;
-                spinLegendButton.disabled = true;
-                spinLegendButton.textContent = 'Выбираем...';
-                legendResult.innerHTML = '';
-                legendPlaceholder.classList.add('hidden');
-                legendLoader.classList.remove('hidden');
-                saveLegendSection.classList.add('hidden');
-                
-                await new Promise(resolve => setTimeout(resolve, 1000));
-                
-                // Фильтруем исключенных легенд
-                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>';
-                    legendLoader.classList.add('hidden');
-                    spinLegendButton.disabled = false;
-                    spinLegendButton.textContent = 'Выбрать ещё!';
-                    isSpinning = false;
-                    return;
-                }
-                
-                const randomLegend = availableLegends[Math.floor(Math.random() * availableLegends.length)];
-                legendLoader.classList.add('hidden');
-                spinLegendButton.disabled = false;
-                spinLegendButton.textContent = 'Выбрать ещё!';
-                isSpinning = false;
-                
-                renderLegendResult(randomLegend);
-            }
-            
-            // Модальное окно подтверждения
-            function showConfirmModal(message, callback) {
-                confirmModalMessage.textContent = message;
-                confirmModal.classList.remove('hidden');
-                setTimeout(() => {
-                    confirmModalContent.classList.remove('scale-95', 'opacity-0');
-                    confirmModalContent.classList.add('scale-100', 'opacity-100');
-                }, 10);
-                
-                const handleConfirm = () => {
-                    callback();
-                    confirmModalOk.removeEventListener('click', handleConfirm);
-                    confirmModalCancel.removeEventListener('click', handleCancel);
-                };
-                
-                const handleCancel = () => {
-                    hideConfirmModal();
-                    confirmModalOk.removeEventListener('click', handleConfirm);
-                    confirmModalCancel.removeEventListener('click', handleCancel);
-                };
-                
-                confirmModalOk.addEventListener('click', handleConfirm);
-                confirmModalCancel.addEventListener('click', handleCancel);
-            }
-            
-            function hideConfirmModal() {
-                confirmModalContent.classList.add('scale-95', 'opacity-0');
-                confirmModalContent.classList.remove('scale-100', 'opacity-100');
-                setTimeout(() => {
-                    confirmModal.classList.add('hidden');
-                }, 300);
-            }
-            
-            // Обработчики событий
-            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);
-            });
-            
-            clearPlayerCharactersButton.addEventListener('click', () => {
-                showConfirmModal('Вы уверены, что хотите очистить список ваших персонажей?', 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) {
-                    saveTeamToHistory(currentGeneratedTeam, teamName);
-                    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(); // Показать выбранную категорию при загрузке
-        });
-    </script>
-</body>
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random Genshin Impact</title>
+    <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">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .dark {
+            background-color: #1a202c;
+            color: #e2e8f0;
+        }
+        .light {
+            background-color: #FDF8F0;
+            color: #4A4A4A;
+        }
+        .loader {
+            width: 48px;
+            height: 48px;
+            border: 5px solid #FDF8F0;
+            border-bottom-color: #A089D0;
+            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; 
+                transform: scale(0.8); 
+                filter: brightness(1.5) drop-shadow(0 0 5px rgba(220, 168, 82, 0.0));
+            }
+            50% { 
+                opacity: 1; 
+                transform: scale(1.1);
+                filter: brightness(1.8) drop-shadow(0 0 20px rgba(220, 168, 82, 0.8));
+            }
+            100% { 
+                opacity: 1; 
+                transform: scale(1);
+                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;
+        }
+        .player-char-card.selected {
+            border-color: #DCA852;
+        }
+        .player-char-card .remove-btn {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            background-color: red;
+            color: white;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 0.8rem;
+            font-weight: bold;
+            cursor: pointer;
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+        .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);
+            text-align: center;
+            flex-shrink: 0;
+            width: 100px;
+        }
+        .dark .full-history-character-card {
+            background-color: #4a5568;
+        }
+        .full-history-character-card img {
+            width: 64px;
+            height: 64px;
+            border-radius: 50%;
+            margin-bottom: 4px;
+            object-fit: cover;
+            border: 2px solid #DCA852;
+        }
+        .full-history-character-card p {
+            font-size: 0.875rem;
+            font-weight: 500;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            width: 100%;
+        }
+        .dark .full-history-character-card p {
+            color: #e2e8f0;
+        }
+        .custom-scrollbar::-webkit-scrollbar {
+            height: 8px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        .dark .custom-scrollbar::-webkit-scrollbar-track {
+            background: #2d3748;
+        }
+        .dark .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: #a0aec0;
+        }
+        .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: #cbd5e0;
+        }
+        .boss-card {
+            flex: 1;
+            min-width: 200px;
+            max-width: 250px;
+            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;
+            border: 2px solid #5BC0DE;
+            cursor: pointer;
+        }
+        .dark .boss-card {
+            background: #4a5568;
+        }
+        .boss-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+        }
+        .boss-card img {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 3px solid #5BC0DE;
+            margin-bottom: 8px;
+        }
+        .boss-card h3 {
+            font-weight: bold;
+            margin-bottom: 4px;
+        }
+        .boss-card p {
+            font-size: 0.9rem;
+            color: #666;
+        }
+        .dark .boss-card p {
+            color: #cbd5e0;
+        }
+        .category-select {
+            background-color: #FDF8F0;
+            border: 2px solid #EFEAE4;
+            border-radius: 12px;
+            padding: 12px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        }
+        .dark .category-select {
+            background-color: #2d3748;
+            border-color: #4a5568;
+        }
+        .category-select label {
+            display: block;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #4A4A4A;
+        }
+        .dark .category-select label {
+            color: #e2e8f0;
+        }
+        .category-select select {
+            width: 100%;
+            padding: 8px 12px;
+            border-radius: 8px;
+            border: 1px solid #ddd;
+            background-color: white;
+            font-size: 1rem;
+        }
+        .dark .category-select select {
+            background-color: #4a5568;
+            color: #e2e8f0;
+            border-color: #718096;
+        }
+        .boss-section {
+            margin-bottom: 32px;
+        }
+        .history-item {
+            border-left: 4px solid #DCA852;
+            padding-left: 12px;
+        }
+        .boss-history-item {
+            border-left: 4px solid #A089D0;
+            padding-left: 12px;
+        }
+        .legend-section {
+            background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
+            color: white;
+        }
+        .legend-section h2 {
+            color: white;
+        }
+        .legend-card {
+            border: 2px solid #9B59B6;
+        }
+        .legend-settings {
+            background-color: #FDF8F0;
+            border: 2px solid #EFEAE4;
+            border-radius: 12px;
+            padding: 12px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        }
+        .dark .legend-settings {
+            background-color: #2d3748;
+            border-color: #4a5568;
+        }
+        .legend-settings label {
+            display: block;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #4A4A4A;
+        }
+        .dark .legend-settings label {
+            color: #e2e8f0;
+        }
+        .boss-toggle {
+            margin-bottom: 8px;
+            padding: 8px;
+            border-radius: 8px;
+            transition: background-color 0.2s;
+        }
+        .boss-toggle:hover {
+            background-color: #f0f0f0;
+        }
+        .dark .boss-toggle:hover {
+            background-color: #3d4a5c;
+        }
+        .boss-toggle input {
+            margin-right: 8px;
+        }
+    </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>
+            <h1 class="text-4xl md:text-5xl font-bold text-[#4A4A4A] dark:text-[#e2e8f0] mb-2">Рулетка Genshin Impact</h1>
+            <p class="text-lg text-[#6B6B6B] dark:text-[#a0aec0] max-w-2xl mx-auto">
+                Случайный выбор персонажей, боссов и местных легенд для вашей игры в Genshin Impact
+            </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>
+                        <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">
+                            <option value="4">4</option>
+                            <option value="3">3</option>
+                            <option value="2">2</option>
+                            <option value="1">1</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label for="animation-speed" class="block text-sm font-medium mb-2 dark:text-gray-300">Скорость анимации</label>
+                        <select id="animation-speed" class="w-full p-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
+                            <option value="fast">Быстрая</option>
+                            <option value="medium" selected>Средняя</option>
+                            <option value="slow">Медленная</option>
+                        </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">
+                    Выберите персонажей, которыми вы владеете, чтобы рулетка использовала только их. Если ни ��дин не выбран, будут использоваться все персонажи.
+                </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>
+                <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>
+                </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">
+                    Выберите, какие боссы и местные легенды должны участвовать в рандомизации
+                </p>
+                
+                <div class="mb-4">
+                    <div class="legend-settings">
+                        <label for="boss-category-select">Категория:</label>
+                        <select id="boss-category-select" class="w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
+                            <option value="world-bosses">Мировые боссы</option>
+                            <option value="weekly-bosses">Еженедельные боссы</option>
+                            <option value="local-legends">Местные легенды</option>
+                        </select>
+                    </div>
+                </div>
+                
+                <div id="bosses-settings-container" class="max-h-80 overflow-y-auto pr-2">
+                    <!-- Динамически генерируемые настройки для боссов -->
+                </div>
+            </div>
+            
+            <div class="category-select">
+                <label for="category-select">Выберите категорию для рандомизации:</label>
+                <select id="category-select" class="w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
+                    <option value="characters">Отряд персонажей</option>
+                    <option value="world-bosses">Мировые боссы</option>
+                    <option value="weekly-bosses">Еженедельные боссы</option>
+                    <option value="local-legends">Местные легенды</option>
+                </select>
+            </div>
+            
+            <!-- Секция для персонажей -->
+            <section id="characters-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg">
+                <h2 class="text-3xl font-bold text-center text-[#4A4A4A] dark:text-white mb-8">Сформировать отряд персонажей</h2>
+                <div class="flex justify-center mb-8">
+                    <button id="spin-characters-button" class="bg-[#DCA852] text-white font-bold py-4 px-10 rounded-lg text-xl shadow-md hover:bg-[#c3914a] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#DCA852]/50">
+                        Крутить отряд!
+                    </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-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">
+                        Сохранить отряд
+                    </button>
+                </div>
+            </section>
+            
+            <!-- Секция для мировых боссов -->
+            <section id="world-bosses-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg hidden">
+                <h2 class="text-3xl font-bold text-center text-[#4A4A4A] dark:text-white mb-8">Рандом мирового босса</h2>
+                <div class="flex justify-center mb-8">
+                    <button id="spin-world-boss-button" class="bg-[#5BC0DE] text-white font-bold py-4 px-10 rounded-lg text-xl shadow-md hover:bg-[#3bb5d9] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#5BC0DE]/50">
+                        Выбрать босса!
+                    </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-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">
+                        Сохранить в историю
+                    </button>
+                </div>
+            </section>
+            
+            <!-- Секция для еженедельных боссов -->
+            <section id="weekly-bosses-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg hidden">
+                <h2 class="text-3xl font-bold text-center text-[#4A4A4A] dark:text-white mb-8">Рандом еженедельного босса</h2>
+                <div class="flex justify-center mb-8">
+                    <button id="spin-weekly-boss-button" class="bg-[#FF7B7B] text-white font-bold py-4 px-10 rounded-lg text-xl shadow-md hover:bg-[#ff5f5f] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#FF7B7B]/50">
+                        Выбрать босса!
+                    </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-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">
+                        Сохранить в историю
+                    </button>
+                </div>
+            </section>
+            
+            <!-- Секция для местных легенд -->
+            <section id="local-legends-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg hidden">
+                <h2 class="text-3xl font-bold text-center text-[#4A4A4A] dark:text-white mb-8">Рандом местной легенды</h2>
+                <div class="flex justify-center mb-8">
+                    <button id="spin-legend-button" class="bg-[#9B59B6] text-white font-bold py-4 px-10 rounded-lg text-xl shadow-md hover:bg-[#8e44ad] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#9B59B6]/50">
+                        Выбрать легенду!
+                    </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-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">
+                        Сохранить в историю
+                    </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">
+                            Вся история
+                        </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>
+                    </div>
+                </div>
+                <div id="history-content" class="flex flex-col gap-6">
+                    <p id="history-placeholder" class="text-center text-[#888] dark:text-gray-400">История ваших случайных выборов будет отображаться здесь.</p>
+                </div>
+            </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">
+                Это фанатский проект. Не аффилирован и не одобрен HoYoverse.
+            </p>
+        </footer>
+    </div>
+    <div id="confirm-modal" class="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center hidden p-4">
+        <div class="bg-[#FDF8F0] dark:bg-gray-800 rounded-2xl w-full max-w-sm shadow-2xl relative text-center p-6 transform transition-all duration-300 scale-95 opacity-0" id="confirm-modal-content">
+            <h3 class="text-2xl font-bold mb-4 text-[#4A4A4A] dark:text-white">Подтверждение</h3>
+            <p id="confirm-modal-message" class="text-lg text-[#6B6B6B] dark:text-gray-300 mb-6">Вы уверены, что хотите очистить историю?</p>
+            <div class="flex justify-around gap-4">
+                <button id="confirm-modal-cancel" class="bg-[#A089D0] text-white font-bold py-2 px-6 rounded-lg hover:bg-[#8e7abf]">Отмена</button>
+                <button id="confirm-modal-ok" class="bg-red-500 text-white font-bold py-2 px-6 rounded-lg hover:bg-red-600">Очистить</button>
+            </div>
+        </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>
+        </div>
+    </div>
+    <audio id="boom-sound" src="boom.mp3" preload="auto" volume="1.0"></audio> 
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Локальные данные персонажей
+            const LOCAL_CHARACTERS = [
+                { "name": "Альбедо", "icon": "pic/albedo.png", "element": "Geo" },
+                { "name": "Аль-Хайтам", "icon": "pic/alhaitham.png", "element": "Dendro" },
+                { "name": "Алой", "icon": "pic/aloy.png", "element": "Cryo" },
+                { "name": "Эмбер", "icon": "pic/amber.png", "element": "Pyro" },
+                { "name": "Аратаки Итто", "icon": "pic/arataki_itto.png", "element": "Geo" },
+                { "name": "Арлекино", "icon": "pic/arlecchino.png", "element": "Pyro" },
+                { "name": "Бай Чжу", "icon": "pic/baizhu.png", "element": "Dendro" },
+                { "name": "Барбара", "icon": "pic/barbara.png", "element": "Hydro" },
+                { "name": "Бэй Доу", "icon": "pic/beidou.png", "element": "Electro" },
+                { "name": "Беннет", "icon": "pic/bennett.png", "element": "Pyro" },
+                { "name": "Кандакия", "icon": "pic/candace.png", "element": "Hydro" },
+                { "name": "Шарлотта", "icon": "pic/charlotte.png", "element": "Cryo" },
+                { "name": "Часка", "icon": "pic/chasca.png", "element": "Anemo" },
+                { "name": "Тиори", "icon": "pic/chiori.png", "element": "Geo" },
+                { "name": "Чун Юнь", "icon": "pic/chongyun.png", "element": "Cryo" },
+                { "name": "Ситлали", "icon": "pic/citlali.png", "element": "Cryo"  },
+                { "name": "Клоринда", "icon": "pic/clorinde.png", "element": "Electro" },
+                { "name": "Коллеи", "icon": "pic/collei.png", "element": "Dendro" },
+                { "name": "Сайно", "icon": "pic/cyno.png", "element": "Electro" },
+                { "name": "Дэхья", "icon": "pic/dehya.png", "element": "Pyro" },
+                { "name": "Дилюк", "icon": "pic/diluc.png", "element": "Pyro" },
+                { "name": "Диона", "icon": "pic/diona.png", "element": "Cryo" },
+                { "name": "Дори", "icon": "pic/dori.png", "element": "Electro" },
+                { "name": "Эмилия", "icon": "pic/emilie.png" , "element": "Dendro" }, 
+                { "name": "Эскофье", "icon": "pic/escoffier.png", "element": "Cryo"  },
+                { "name": "Эола", "icon": "pic/eula.png", "element": "Cryo" },
+                { "name": "Фарузан", "icon": "pic/faruzan.png", "element": "Anemo" },
+                { "name": "Фишль", "icon": "pic/fischl.png", "element": "Electro" },
+                { "name": "Фремине", "icon": "pic/freminet.png", "element": "Cryo" },
+                { "name": "Фурина", "icon": "pic/furina.png", "element": "Hydro" },
+                { "name": "Га Мин", "icon": "pic/gaming.png", "element": "Pyro" },
+                { "name": "Гань Юй", "icon": "pic/ganyu.png", "element": "Cryo" },
+                { "name": "Горо", "icon": "pic/gorou.png", "element": "Geo" },
+                { "name": "Ху Тао", "icon": "pic/hu_tao.png", "element": "Pyro" },
+                { "name": "Ифу", "icon": "pic/ifa.png", "element": "Anemo"  },
+                { "name": "Иансан", "icon": "pic/iansan.png", "element": "Electro"  },
+                { "name": "Джинн", "icon": "pic/jean.png", "element": "Anemo" },
+                { "name": "Кадзуха", "icon": "pic/kaedehara_kazuha.png", "element": "Anemo" },
+                { "name": "Кэйа", "icon": "pic/kaeya.png", "element": "Cryo" },
+                { "name": "Качина", "icon": "pic/Kachina.webp", "element": "Geo" },
+                { "name": "Аяка", "icon": "pic/kamisato_ayaka.png", "element": "Cryo" },
+                { "name": "Аято", "icon": "pic/kamisato_ayato.png", "element": "Hydro" },
+                { "name": "Кавэх", "icon": "pic/kaveh.png", "element": "Dendro" },
+                { "name": "Кэ Цин", "icon": "pic/keqing.png", "element": "Electro" },
+                { "name": "Кинич", "icon": "pic/kinich.png", "element": "Dendro" }, 
+                { "name": "Кирара", "icon": "pic/kirara.png", "element": "Dendro" },
+                { "name": "Кли", "icon": "pic/klee.png", "element": "Pyro" },
+                { "name": "Сара", "icon": "pic/kujou_sara.png", "element": "Electro" },
+                { "name": "Шинобу", "icon": "pic/kuki_shinobu.png", "element": "Electro" },
+                { "name": "Лань Янь", "icon": "pic/lan_yan.png", "element": "Anemo" },
+                { "name": "Лейла", "icon": "pic/layla.png", "element": "Cryo" },
+                { "name": "Лиза", "icon": "pic/lisa.png", "element": "Electro" },
+                { "name": "Линнет", "icon": "pic/lynette.png", "element": "Anemo" },
+                { "name": "Лини", "icon": "pic/lyney.png", "element": "Pyro" },
+                { "name": "Мавуика", "icon": "pic/mavuika.png", "element": "Pyro" }, 
+                { "name": "Мика", "icon": "pic/mika.png", "element": "Cryo" },
+                { "name": "Мона", "icon": "pic/mona.png", "element": "Hydro" },
+                { "name": "Муалани", "icon": "pic/mualani.png", "element": "Hydro" },
+                { "name": "Нахида", "icon": "pic/nahida.png", "element": "Dendro" },
+                { "name": "Навия", "icon": "pic/navia.png", "element": "Geo" },
+                { "name": "Нёвиллет", "icon": "pic/neuvillette.png", "element": "Hydro" },
+                { "name": "Нилу", "icon": "pic/nilou.png", "element": "Hydro" },
+                { "name": "Нин Гуан", "icon": "pic/ningguang.png", "element": "Geo" },
+                { "name": "Ноэлль", "icon": "pic/noelle.png", "element": "Geo" },
+                { "name": "Оророн", "icon": "pic/ororon.png", "element": "Electro" }, 
+                { "name": "Ци Ци", "icon": "pic/qiqi.png", "element": "Cryo" },
+                { "name": "Райдэн", "icon": "pic/raiden_shogun.png", "element": "Electro" },
+                { "name": "Рэйзор", "icon": "pic/razor.png", "element": "Electro" },
+                { "name": "Розалья", "icon": "pic/rosaria.png", "element": "Cryo" },
+                { "name": "Кокоми", "icon": "pic/sangonomiya_kokomi.png", "element": "Hydro" },
+                { "name": "Саю", "icon": "pic/sayu.png", "element": "Anemo" },
+                { "name": "Сетос", "icon": "pic/sethos.png", "element": "Electro" },
+                { "name": "Шэнь Хэ", "icon": "pic/shenhe.png", "element": "Cryo" },
+                { "name": "Хэйдзо", "icon": "pic/shikanoin_heizou.png", "element": "Anemo" },
+                { "name": "Сиджвин", "icon": "pic/sigewinne.png", "element": "Hydro" },
+                { "name": "Сахароза", "icon": "pic/sucrose.png", "element": "Anemo" },
+                { "name": "Тарталья", "icon": "pic/tartaglia.png", "element": "Hydro" },
+                { "name": "Тома", "icon": "pic/thoma.png", "element": "Pyro" },
+                { "name": "Тигнари", "icon": "pic/tighnari.png", "element": "Dendro" },
+                { "name": "Вареса", "icon": "pic/varesa.png", "element": "Electro" }, 
+                { "name": "Венти", "icon": "pic/venti.png", "element": "Anemo" },
+                { "name": "Странник", "icon": "pic/wanderer.png", "element": "Anemo" },
+                { "name": "Ризли", "icon": "pic/wriothesley.png", "element": "Cryo" },
+                { "name": "Сяо", "icon": "pic/xiao.png", "element": "Anemo" },
+                { "name": "Сян Линь", "icon": "pic/xiangling.png", "element": "Pyro" },
+                { "name": "Сянь Юнь", "icon": "pic/xianyun.png", "element": "Anemo" },
+                { "name": "Шилонен", "icon": "pic/xilonen.png",   "element": "Geo" }, 
+                { "name": "Син Цю", "icon": "pic/xingqiu.png", "element": "Hydro" },
+                { "name": "Синь Янь", "icon": "pic/xinyan.png", "element": "Pyro" },
+                { "name": "Яэ Мико", "icon": "pic/yae_miko.png", "element": "Electro" },
+                { "name": "Янь Фэй", "icon": "pic/yanfei.png", "element": "Pyro" },
+                { "name": "Яо Яо", "icon": "pic/yaoyao.png", "element": "Dendro" },
+                { "name": "Е Лань", "icon": "pic/yelan.png", "element": "Hydro" },
+                { "name": "Ёимия", "icon": "pic/yoimiya.png", "element": "Pyro" },
+                { "name": "Юнь Цзинь", "icon": "pic/yun_jin.png", "element": "Geo" },
+                { "name": "Паймон", "icon": "pic/paimon.png", "element": "Anemo" },
+                { "name": "ГГ(Анемо)", "icon": "pic/traveler.webp", "element": "Anemo" },
+                { "name": "ГГ (Гео)", "icon": "pic/traveler.webp", "element": "Geo" },
+                { "name": "ГГ (Электро)", "icon": "pic/traveler.webp", "element": "Electro" },
+                { "name": "ГГ (Дендро)", "icon": "pic/traveler.webp", "element": "Dendro" },
+                { "name": "ГГ (Гидро)", "icon": "pic/traveler.webp", "element": "Hydro" },
+                { "name": "Мидзуки", "icon": "pic/yumemizuki_mizuki.png", "element": "Anemo" },
+                { "name": "Чжун Ли", "icon": "pic/zhongli.png", "element": "Geo" },
+
+
+                { "name": "Скирк", "icon": "pic/skirk.png", "element": "Cryo" },
+                { "name": "Далия", "icon": "pic/daliya.png", "element": "Hydro" },
+                { "name": "Инеффа", "icon": "pic/ineffa.png", "element": "Electro" },
+                { "name": "Лаума", "icon": "pic/lauma_icon.webp", "element": "Dendro" },
+                { "name": "Айно", "icon": "pic/aino_icon.webp", "element": "Hydro" },
+                { "name": "Флинс", "icon": "pic/flins_icon.webp", "element": "Electro" },
+                { "name": "Нефер", "icon": "pic/Nefer.webp", "element": "Dendro" },
+                { "name": "Ягода", "icon": "pic/YAgoda.webp", "element": "Anemo" },
+                { "name": "Дурин", "icon": "pic/Durin.webp", "element": "Pyro" },
+				
+				{ "name": "Иллуги", "icon": "pic/Illuga.png", "element": "Geo" },
+				{ "name": "Цзы Бай", "icon": "pic/zibai.png", "element": "Geo" },
+				{ "name": "Коломбина", "icon": "pic/Columbina.png", "element": "Hydro" },
+            ];
+            
+            // Мировые боссы
+            const WORLD_BOSSES = [
+                { "name": "Сверхтяжёлый сухопутный крейсер: Мобильная крепость", "icon": "pic/WorldBoss/Sverkhtyazhyelyy-sukhoputnyy-kreyser.webp" },
+                { "name": "Повелитель морозной ночи", "icon": "pic/WorldBoss/Povelitel-moroznoy-nochi.webp" },
+                { "name": "Лучезарный мотылёк-призрак", "icon": "pic/WorldBoss/Luchezarnyy-motylyek_prizrak.webp" },
+                { "name": "Железный утёнок", "icon": "pic/WorldBoss/ZHeleznyy-utyenok.webp" },
+                { "name": "Автоматон: Надсмотрщик", "icon": "pic/WorldBoss/Secret-Source-Automaton-Overseer-Device.webp" },
+                { "name": "Статуя лавового дракона", "icon": "pic/WorldBoss/Statuya-lavovogo-drakona.webp" },
+                { "name": "Говорящая с духами отшельница", "icon": "pic/WorldBoss/Govoryashchaya-s-dukhami-otshelnitsa.webp" },
+                { "name": "Сумрачная папилла", "icon": "pic/WorldBoss/Sumrachnaya-papilla.webp" },
+                { "name": "Автоматон: Конфигуратор", "icon": "pic/WorldBoss/Avtomaton-tainstvennogo-istochnika.webp" },
+                { "name": "Прожорливый Горный король-юмказавр", "icon": "pic/WorldBoss/Prozhorlivyy-gornyy-korol-yumkazavr.webp" },
+                { "name": "Кукузавр-тиран золотого пламени", "icon": "pic/WorldBoss/Prozhorlivyi_-Gornyi_-korol_yumkazavr.webp" },
+                { "name": "Легат големов", "icon": "pic/WorldBoss/Kapitan-golemov.webp" },
+                { "name": "Суаньни-отшельник", "icon": "pic/WorldBoss/Suanni_otshelnik.webp" },
+                { "name": "Гидротульпа", "icon": "pic/WorldBoss/Probuzhdyennaya-zhizn.webp" },
+                { "name": "Экспериментальный генератор поля", "icon": "pic/WorldBoss/Eksperimentalnyy-generator-polya.webp" },
+                { "name": "Морской конёк тысячелетней жемчужины", "icon": "pic/WorldBoss/Morskoy-konyek-tysyacheletney-zhemchuzhiny.webp" },
+                { "name": "Император огня и железа", "icon": "pic/WorldBoss/Imperator-ognya-i-zheleza.webp" },
+                { "name": "Сюита ледяного ветра", "icon": "pic/WorldBoss/Syuita-ledyanogo-vetra.webp" },
+                { "name": "Чудовищный креститель", "icon": "pic/WorldBoss/CHudovishchnyy-krestitel.webp" },
+                { "name": "Унут Сетеха", "icon": "pic/WorldBoss/Unut-Setekha.webp" },
+                { "name": "Дендро Гипостазис", "icon": "pic/WorldBoss/Dendro-Gipostazis.png" },
+                { "name": "Алгоритм полуизвечной матрицы оператора наблюдения", "icon": "pic/WorldBoss/Poluvechnaya-matritsa-upravleniya.webp" },
+                { "name": "Дракон вечных бедствий", "icon": "pic/WorldBoss/Drakon-vechnykh-bedstviy.webp" },
+                { "name": "Электро папоротник", "icon": "pic/WorldBoss/Elektro-paporotnik.webp" },
+                { "name": "Пернатый плесенник", "icon": "pic/WorldBoss/Pernatyy-plesennik.webp" },
+                { "name": "Змей руин", "icon": "pic/WorldBoss/Zmey-ruin.webp" },
+                { "name": "Стая вишапов глубин", "icon": "pic/WorldBoss/Staya-vishapov-glubin.webp" },
+                { "name": "Золотой волчий вожак", "icon": "pic/WorldBoss/Golden-Wolflord.png" },
+                { "name": "Гидро Гипостазис", "icon": "pic/WorldBoss/Gidro-Gipostazis.png" },
+                { "name": "Манифестация грома", "icon": "pic/WorldBoss/Elektro-Okeanid.png" },
+                { "name": "Бесконечный механический массив", "icon": "pic/WorldBoss/Beskonechnyy-mekhanicheskiy-massiv.png" },
+                { "name": "Пиро гипостазис", "icon": "pic/WorldBoss/Piro-gipostazis.png" },
+                { "name": "Магу Кенки", "icon": "pic/WorldBoss/Magu-Kenki.webp" },
+                { "name": "Крио гипостазис", "icon": "pic/WorldBoss/Cryo_Hypostasis.webp" },
+                { "name": "Древний геовишап", "icon": "pic/WorldBoss/Drevniy-geovishap.webp" },
+                { "name": "Гео гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Rock.png" },
+                { "name": "Электро гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Electric.png" },
+                { "name": "Анемо гипостазис", "icon": "pic/WorldBoss/UI_MonsterIcon_Effigy_Wind.png" },
+                { "name": "Крио папоротник", "icon": "pic/WorldBoss/UI_MonsterIcon_cryo_regisvine.png" },
+                { "name": "Пиро орхидея", "icon": "pic/WorldBoss/UI_MonsterIcon_Regisvine_Fire.png" },
+                { "name": "Океанид", "icon": "pic/WorldBoss/Okeanid.webp" }
+            ];
+            // Еженедельные боссы
+            const WEEKLY_BOSSES = [
+                { "name": "Игра перед вратами", "icon": "pic/Allweeklybosses/Igra-pered-vratami.webp" },
+                { "name": "Владыка истлевшего первобытного пламени", "icon": "pic/Allweeklybosses/Lord-of-Eroded-Primal-Fire.webp" },
+                { "name": "Слуга", "icon": "pic/Allweeklybosses/Nomer-chetyre-iz-Predvestnikov-Fatui_-Arlekino.webp" },
+                { "name": "Всепожирающий нарвал", "icon": "pic/Allweeklybosses/Vsepozhirayushchiy-narval.webp" },
+                { "name": "Страж оазиса Апепа", "icon": "pic/Allweeklybosses/Strazh-oazisa-Apepa.webp" },
+                { "name": "Сёки но Ками", "icon": "pic/Allweeklybosses/Syeki-no-Kami.webp" },
+                { "name": "Магацу митакэ Наруками но микото", "icon": "pic/Allweeklybosses/m_29060201.webp" },
+                { "name": "Синьора", "icon": "pic/Allweeklybosses/Sinora.png" },
+                { "name": "Аждаха", "icon": "pic/Allweeklybosses/Azhdaha.png" },
+                { "name": "Чайльд", "icon": "pic/Allweeklybosses/Childe.png" },
+                { "name": "Лупус Бореалис, Волчий лорд", "icon": "pic/Allweeklybosses/UI_MonsterIcon_LupiBoreas.png" },
+                { "name": "Ужас бури", "icon": "pic/Allweeklybosses/Stormterror.png" }
+            ];
+            
+            // Местные Легенды
+            const LOCAL_LEGENDS = [
+                { "name": "Сигурд", "icon": "pic/LocalLegends/Sigurd.png", "guideUrl": "#" },
+                { "name": "Волшебные рыцари-близнецы", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-284766-1-800x476.jpg", "guideUrl": "https://wotpack.ru/volshebnye-rycari-bliznecy-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Окружной судья океана", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-284964-4.jpg", "guideUrl": "https://wotpack.ru/okruzhnoj-sudja-okeana-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Дева озера Вивианна", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283768-1-800x425.jpg", "guideUrl": "https://wotpack.ru/deva-ozera-vivianna-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Дева озера Нинианна", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283708-1-800x423.jpg", "guideUrl": "https://wotpack.ru/deva-ozera-ninianna-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Угасающий старый солдат", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283590-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/ugasajushhij-staryj-soldat-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Владыка отшельников Доварху", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283520-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/vladyka-otshelnikov-dovarhu-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Меч ущелья", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-283554-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/mech-ushhelja-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Железный виконт", "icon": "https://wotpack.ru/wp-content/uploads/2023/08/word-image-284964-10.jpg", "guideUrl": "https://wotpack.ru/zheleznyj-vikont-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Автоматический генератор полей сверхвычислений", "icon": "https://wotpack.ru/wp-content/uploads/2023/09/word-image-301036-4.jpeg", "guideUrl": "https://wotpack.ru/avtomaticheskij-generator-polej-sverhvychislenij-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Лиахра Блистательная", "icon": "https://wotpack.ru/wp-content/uploads/2023/09/word-image-301327-4.jpeg", "guideUrl": "https://wotpack.ru/liahra-blistatelnaja-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Изольт", "icon": "https://wotpack.ru/wp-content/uploads/2023/09/word-image-301389-1-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/izolt-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Шассанион", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-321383-7-800x450.jpeg", "guideUrl": "https://wotpack.ru/shassanion-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Деянейра Снежневна", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/1-10-800x450.jpg", "guideUrl": "https://wotpack.ru/dejanejra-snezhnevna-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Роки Авилдсен", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-321618-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/roki-avildsen-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Магический меч Круж", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-322447-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/magicheskij-mech-kruzh-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Лиям", "icon": "https://wotpack.ru/wp-content/uploads/2023/11/word-image-321469-1-800x450.jpeg", "guideUrl": "https://wotpack.ru/lijam-v-genshin-impact-kak-najti-i-pobedit/" },
+                { "name": "Киней", "icon": "https://wotpack.ru/wp-content/uploads/2024/04/Kinej-v-Genshin-Impact-800x450.jpg", "guideUrl": "https://wotpack.ru/kinej-v-genshin-impact-kak-najti-i-pobedit/" },
+
+
+                { "name": "Три полихромные звезды", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/mestnaya-legenda-tri-polihromnye-zvezdy-3-800x449.jpg", "guideUrl": "https://wotpack.ru/tri-polihromnye-zvezdy-v-genshin-impact-kak-nayti-i-pobedit-vasiliya-sidorenko-i-nomonkonova/" },
+                { "name": "Косихо", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/kosiho-v-genshin-impact-kak-nayti-i-pobedit-800x450.jpg", "guideUrl": "https://wotpack.ru/kosiho-v-genshin-impact-kak-nayti-i-pobedit-cherepahu/" },
+                { "name": "Сапфо среди волн", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/sapfo-sredi-voln-v-genshin-impact-kak-nayti-i-pobedit-800x450.jpg", "guideUrl": "https://wotpack.ru/sapfo-sredi-voln-v-genshin-impact-kak-nayti-i-pobedit/" },
+                { "name": "Балачко", "icon": "https://wotpack.ru/wp-content/uploads/2024/08/balachko-v-genshin-impact-kak-nayti-i-pobedit-397x206.jpg", "guideUrl": "https://wotpack.ru/balachko-v-genshin-impact-kak-nayti-i-pobedit/" },
+                { "name": "Рилай", "icon": "https://wotpack.ru/wp-content/uploads/2024/11/rilay-v-genshin-impact-800x450.jpg", "guideUrl": "https://wotpack.ru/rilay-v-genshin-impact-kak-nayti-i-pobedit/" },
+                { "name": "Короля кабанов", "icon": "https://wotpack.ru/wp-content/uploads/2021/11/%D0%BA%D0%BE%D1%80%D0%BE%D0%BB%D1%8C-%D1%81%D0%BD%D0%B5%D0%B6%D0%BD%D1%8B%D1%85-%D0%BA%D0%B0%D0%B1%D0%B0%D0%BD%D0%BE%D0%B2-348x220.jpg", "guideUrl": "https://wotpack.ru/genshin-impact-ah-svezhee-mjaso-prohozhdenie-kvesta-gajd/" },
+                { "name": "Бронзовый замок", "icon": "https://wotpack.ru/wp-content/uploads/2024/11/bronzovyy-2.jpg", "guideUrl": "https://wotpack.ru/bronzovyy-zamok-v-genshin-impact-kak-nayti-i-pobedit/" },
+                { "name": "Ничтожный", "icon": "https://wotpack.ru/wp-content/uploads/2025/03/nichtozhnyy-v-mire-vid.jpg", "guideUrl": "https://wotpack.ru/nichtozhnyy-v-genshin-impact-kak-nayti-i-pobedit/" },
+                { "name": "Пик", "icon": "https://wotpack.ru/wp-content/uploads/2025/03/pik-v-genshin-impact-kak-pobedit-mutanta-730x411.jpg", "guideUrl": "https://wotpack.ru/pik-v-genshin-impact-kak-nayti-i-pobedit-mutanta/" },
+                { "name": "Боевой козел и Железный коготь", "icon": "https://wotpack.ru/wp-content/uploads/2025/03/boevoy-kozyol-i-zheleznyy-kogot-v-genshin-impact_-kak-nayti-i-pobedit-730x411.jpg", "guideUrl": "https://wotpack.ru/boevoy-kozyol-i-zheleznyy-kogot-v-genshin-impact-kak-nayti-i-pobedit/" },
+
+                { "name": "Теночцитока", "icon": "https://wotpack.ru/wp-content/uploads/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
+            function getOrCreateUID() {
+                let uid = localStorage.getItem('genshinRouletteUID');
+                if (!uid) {
+                    uid = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+                    localStorage.setItem('genshinRouletteUID', uid);
+                }
+                return uid;
+            }
+            const currentUserUID = getOrCreateUID();
+            
+            // Конфигурация
+            const config = {
+                teamSize: parseInt(localStorage.getItem(`${currentUserUID}_teamSize`)) || 4,
+                animationSpeed: localStorage.getItem(`${currentUserUID}_animationSpeed`) || 'medium',
+                darkMode: localStorage.getItem('theme') === 'dark',
+                category: localStorage.getItem('genshinCategory') || 'characters',
+                excludedBosses: JSON.parse(localStorage.getItem(`${currentUserUID}_excludedBosses`)) || {
+                    'world-bosses': [],
+                    'weekly-bosses': [],
+                    'local-legends': []
+                }
+            };
+            
+            // Состояние приложения
+            let allCharacters = [...LOCAL_CHARACTERS];
+            let historyTeams = JSON.parse(localStorage.getItem(`${currentUserUID}_genshinTeamsHistory`)) || [];
+            let historyBosses = JSON.parse(localStorage.getItem(`${currentUserUID}_genshinBossesHistory`)) || [];
+            let playerCharacters = JSON.parse(localStorage.getItem(`${currentUserUID}_playerCharacters`)) || [];
+            let isSpinning = false;
+            let currentGeneratedTeam = [];
+            let currentGeneratedBoss = null;
+            let isWorldBoss = true;
+            let isLegend = false;
+            
+            // Элементы DOM
+            const spinCharactersButton = document.getElementById('spin-characters-button');
+            const spinWorldBossButton = document.getElementById('spin-world-boss-button');
+            const spinWeeklyBossButton = document.getElementById('spin-weekly-boss-button');
+            const spinLegendButton = document.getElementById('spin-legend-button');
+            const categorySelect = document.getElementById('category-select');
+            const charactersResult = document.getElementById('characters-result');
+            const worldBossResult = document.getElementById('world-boss-result');
+            const weeklyBossResult = document.getElementById('weekly-boss-result');
+            const legendResult = document.getElementById('legend-result');
+            const charactersPlaceholder = document.getElementById('characters-placeholder');
+            const worldBossPlaceholder = document.getElementById('world-boss-placeholder');
+            const weeklyBossPlaceholder = document.getElementById('weekly-boss-placeholder');
+            const legendPlaceholder = document.getElementById('legend-placeholder');
+            const charactersLoader = document.getElementById('characters-loader');
+            const worldBossLoader = document.getElementById('world-boss-loader');
+            const weeklyBossLoader = document.getElementById('weekly-boss-loader');
+            const legendLoader = document.getElementById('legend-loader');
+            const historyContent = document.getElementById('history-content');
+            const historyPlaceholder = document.getElementById('history-placeholder');
+            const clearHistoryButton = document.getElementById('clear-history-button');
+            const showFullHistoryButton = document.getElementById('show-full-history-button');
+            const themeToggle = document.getElementById('theme-toggle');
+            const settingsToggle = document.getElementById('settings-toggle');
+            const settingsPanel = document.getElementById('settings-panel');
+            const teamSizeSelect = document.getElementById('team-size');
+            const animationSpeedSelect = document.getElementById('animation-speed');
+            const confirmModal = document.getElementById('confirm-modal');
+            const confirmModalContent = document.getElementById('confirm-modal-content');
+            const confirmModalMessage = document.getElementById('confirm-modal-message');
+            const confirmModalCancel = document.getElementById('confirm-modal-cancel');
+            const confirmModalOk = document.getElementById('confirm-modal-ok');
+            const playerCharactersSelection = document.getElementById('player-characters-selection');
+            const characterSearchInput = document.getElementById('character-search');
+            const clearPlayerCharactersButton = document.getElementById('clear-player-characters');
+            const saveTeamSection = document.getElementById('save-characters-section');
+            const teamNameInput = document.getElementById('team-name-input');
+            const saveTeamButton = document.getElementById('save-team-button');
+            const saveWorldBossSection = document.getElementById('save-world-boss-section');
+            const saveWorldBossButton = document.getElementById('save-world-boss-button');
+            const saveWeeklyBossSection = document.getElementById('save-weekly-boss-section');
+            const saveWeeklyBossButton = document.getElementById('save-weekly-boss-button');
+            const saveLegendSection = document.getElementById('save-legend-section');
+            const saveLegendButton = document.getElementById('save-legend-button');
+            const boomSound = document.getElementById('boom-sound');
+            const charactersSection = document.getElementById('characters-section');
+            const worldBossesSection = document.getElementById('world-bosses-section');
+            const weeklyBossesSection = document.getElementById('weekly-bosses-section');
+            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');
+            
+            // Инициализация темы
+            function initTheme() {
+                if (config.darkMode) {
+                    document.body.classList.remove('light');
+                    document.body.classList.add('dark');
+                } else {
+                    document.body.classList.remove('dark');
+                    document.body.classList.add('light');
+                }
+            }
+            
+            // Переключение темы
+            function toggleTheme() {
+                config.darkMode = !config.darkMode;
+                initTheme();
+                localStorage.setItem('theme', config.darkMode ? 'dark' : 'light');
+            }
+            
+            // Переключение настроек
+            function toggleSettings() {
+                settingsPanel.classList.toggle('open');
+            }
+            
+            // Изменение категории
+            function changeCategory() {
+                config.category = categorySelect.value;
+                localStorage.setItem('genshinCategory', config.category);
+                
+                // Скрываем все секции
+                charactersSection.classList.add('hidden');
+                worldBossesSection.classList.add('hidden');
+                weeklyBossesSection.classList.add('hidden');
+                localLegendsSection.classList.add('hidden');
+                
+                // Показываем выбранную секцию
+                if (config.category === 'characters') {
+                    charactersSection.classList.remove('hidden');
+                } else if (config.category === 'world-bosses') {
+                    worldBossesSection.classList.remove('hidden');
+                } else if (config.category === 'weekly-bosses') {
+                    weeklyBossesSection.classList.remove('hidden');
+                } else if (config.category === 'local-legends') {
+                    localLegendsSection.classList.remove('hidden');
+                }
+            }
+            
+            // Создание карточки персонажа
+            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.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>
+                `;
+                return card;
+            }
+            
+            // Создание карточки босса
+            function createBossCard(boss) {
+                const card = document.createElement('div');
+                card.className = `boss-card`;
+                card.innerHTML = `
+                    <img src="${boss.icon}" alt="${boss.name}" 
+                         onerror="this.onerror=null;this.src='https://placehold.co/80x80/EFEAE4/4A4A4A?text=N/A'">
+                    <h3 class="font-bold text-lg dark:text-white">${boss.name}</h3>
+                `;
+                return card;
+            }
+            
+            // Создание карточки местной легенды (кликабельной)
+            function createLegendCard(legend) {
+                const card = document.createElement('div');
+                card.className = `boss-card legend-card`;
+                // Делаем карточку кликабельной только если есть ссылка на гайд
+                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';
+                    card.addEventListener('click', () => {
+                        window.open(legend.guideUrl, '_blank');
+                    });
+                }
+                
+                return 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.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}">` : '';
+                card.innerHTML = `
+                    <div class="relative">
+                        <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'">
+                        ${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);
+                    } else {
+                        togglePlayerCharacter(character);
+                    }
+                });
+                return card;
+            }
+            
+            // Рендеринг настроек для боссов
+            function renderBossSettings() {
+                const category = bossCategorySelect.value;
+                let bosses = [];
+                
+                if (category === 'world-bosses') {
+                    bosses = WORLD_BOSSES;
+                } else if (category === 'weekly-bosses') {
+                    bosses = WEEKLY_BOSSES;
+                } else if (category === 'local-legends') {
+                    bosses = LOCAL_LEGENDS;
+                }
+                
+                bossesSettingsContainer.innerHTML = '';
+                
+                bosses.forEach(boss => {
+                    const isExcluded = config.excludedBosses[category].includes(boss.name);
+                    const bossToggle = document.createElement('div');
+                    bossToggle.className = 'boss-toggle flex items-center';
+                    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>
+                    `;
+                    bossesSettingsContainer.appendChild(bossToggle);
+                    
+                    const checkbox = bossToggle.querySelector('.boss-toggle-checkbox');
+                    checkbox.addEventListener('change', (e) => {
+                        const excludedList = config.excludedBosses[category];
+                        if (e.target.checked) {
+                            // Включить босса - убрать из списка исключенных
+                            const index = excludedList.indexOf(boss.name);
+                            if (index > -1) {
+                                excludedList.splice(index, 1);
+                            }
+                        } else {
+                            // Исключить босса - добавить в список исключенных
+                            if (!excludedList.includes(boss.name)) {
+                                excludedList.push(boss.name);
+                            }
+                        }
+                        localStorage.setItem(`${currentUserUID}_excludedBosses`, JSON.stringify(config.excludedBosses));
+                    });
+                });
+            }
+            
+            // Рендеринг списка персонажей для выбора
+            function renderPlayerCharactersSelection(filter = '') {
+                playerCharactersSelection.innerHTML = '';
+                const filteredCharacters = allCharacters.filter(char => 
+                    char.name.toLowerCase().includes(filter.toLowerCase())
+                );
+                filteredCharacters.forEach(char => {
+                    playerCharactersSelection.appendChild(createPlayerCharacterSelectionCard(char));
+                });
+                updateClearPlayerCharactersButtonVisibility();
+            }
+            
+            // Добавление/удаление персонажа из списка игрока
+            function togglePlayerCharacter(character) {
+                const index = playerCharacters.findIndex(c => c.name === character.name);
+                if (index > -1) {
+                    playerCharacters.splice(index, 1);
+                } else {
+                    playerCharacters.push(character);
+                }
+                localStorage.setItem(`${currentUserUID}_playerCharacters`, JSON.stringify(playerCharacters));
+                renderPlayerCharactersSelection(characterSearchInput.value);
+                updateClearPlayerCharactersButtonVisibility();
+            }
+            
+            // Удаление персонажа из списка игрока по имени
+            function removePlayerCharacter(characterName) {
+                playerCharacters = playerCharacters.filter(c => c.name !== characterName);
+                localStorage.setItem(`${currentUserUID}_playerCharacters`, JSON.stringify(playerCharacters));
+                renderPlayerCharactersSelection(characterSearchInput.value);
+                updateClearPlayerCharactersButtonVisibility();
+            }
+            
+            // Очистка всех персонажей игрока
+            function clearPlayerCharacters() {
+                playerCharacters = [];
+                localStorage.removeItem(`${currentUserUID}_playerCharacters`);
+                renderPlayerCharactersSelection('');
+                hideConfirmModal();
+            }
+            
+            // Обновление видимости кнопки "Очистить выбранных персонажей"
+            function updateClearPlayerCharactersButtonVisibility() {
+                if (playerCharacters.length > 0) {
+                    clearPlayerCharactersButton.classList.remove('hidden');
+                } else {
+                    clearPlayerCharactersButton.classList.add('hidden');
+                }
+            }
+            
+            // Отображение результата рулетки с плавной анимацией и "бум" эффектом
+            async function renderCharactersResult(team) {
+                charactersResult.innerHTML = '';
+                charactersPlaceholder.classList.add('hidden');
+                saveTeamSection.classList.add('hidden');
+                
+                for (let i = 0; i < team.length; i++) {
+                    const char = team[i];
+                    const card = createCharacterCard(char);
+                    card.classList.add('roulette-item-boom-enter');
+                    charactersResult.appendChild(card);
+                    
+                    if (boomSound) {
+                        boomSound.currentTime = 0; 
+                        boomSound.play().catch(e => console.error("Error playing sound:", e));
+                    }
+                    
+                    await new Promise(resolve => setTimeout(resolve, 100));
+                    card.classList.add('roulette-item-boom-enter-active');
+                    await new Promise(resolve => setTimeout(resolve, 500)); 
+                }
+                
+                saveTeamSection.classList.remove('hidden');
+                teamNameInput.value = '';
+                currentGeneratedTeam = team;
+            }
+            
+            // Отображение результата для босса
+            async function renderBossResult(boss, isWorld) {
+                const resultDiv = isWorld ? worldBossResult : weeklyBossResult;
+                const placeholder = isWorld ? worldBossPlaceholder : weeklyBossPlaceholder;
+                const saveSection = isWorld ? saveWorldBossSection : saveWeeklyBossSection;
+                
+                resultDiv.innerHTML = '';
+                placeholder.classList.add('hidden');
+                saveSection.classList.add('hidden');
+                
+                const card = createBossCard(boss);
+                card.classList.add('roulette-item-boom-enter');
+                resultDiv.appendChild(card);
+                
+                if (boomSound) {
+                    boomSound.currentTime = 0; 
+                    boomSound.play().catch(e => console.error("Error playing sound:", e));
+                }
+                
+                await new Promise(resolve => setTimeout(resolve, 100));
+                card.classList.add('roulette-item-boom-enter-active');
+                await new Promise(resolve => setTimeout(resolve, 500));
+                
+                saveSection.classList.remove('hidden');
+                currentGeneratedBoss = boss;
+                isWorldBoss = isWorld;
+                isLegend = false;
+            }
+            
+            // Отображение результата для местной легенды
+            async function renderLegendResult(legend) {
+                legendResult.innerHTML = '';
+                legendPlaceholder.classList.add('hidden');
+                saveLegendSection.classList.add('hidden');
+                
+                const card = createLegendCard(legend);
+                card.classList.add('roulette-item-boom-enter');
+                legendResult.appendChild(card);
+                
+                if (boomSound) {
+                    boomSound.currentTime = 0; 
+                    boomSound.play().catch(e => console.error("Error playing sound:", e));
+                }
+                
+                await new Promise(resolve => setTimeout(resolve, 100));
+                card.classList.add('roulette-item-boom-enter-active');
+                await new Promise(resolve => setTimeout(resolve, 500));
+                
+                saveLegendSection.classList.remove('hidden');
+                currentGeneratedBoss = legend;
+                isWorldBoss = false;
+                isLegend = true;
+            }
+            
+            // Отображение истории
+            function renderHistory(limit = 3) {
+                historyContent.innerHTML = '';
+                const allHistory = [...historyTeams, ...historyBosses].sort((a, b) => new Date(b.date) - new Date(a.date));
+                
+                if (allHistory.length === 0) {
+                    historyPlaceholder.classList.remove('hidden');
+                    clearHistoryButton.classList.add('hidden');
+                    showFullHistoryButton.classList.add('hidden');
+                } else {
+                    historyPlaceholder.classList.add('hidden');
+                    clearHistoryButton.classList.remove('hidden');
+                    showFullHistoryButton.classList.remove('hidden');
+                    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'}`;
+                        
+                        const title = document.createElement('h3');
+                        title.className = 'text-lg font-semibold mb-3 dark:text-white';
+                        
+                        if (item.type === 'team') {
+                            const teamName = item.name ? `"${item.name}" - ` : '';
+                            title.textContent = `${teamName}Отряд (${new Date(item.date).toLocaleString()})`;
+                        } else if (item.type === 'legend') {
+                            title.textContent = `${item.name} (Местная легенда) (${new Date(item.date).toLocaleString()})`;
+                        } else {
+                            title.textContent = `${item.name} (${new Date(item.date).toLocaleString()})`;
+                        }
+                        
+                        itemElement.appendChild(title);
+                        
+                        const container = document.createElement('div');
+                        container.className = 'flex flex-wrap justify-center gap-3';
+                        
+                        if (item.type === 'team') {
+                            item.characters.forEach(char => {
+                                container.appendChild(createCharacterCard(char));
+                            });
+                        } else if (item.type === 'legend') {
+                            container.appendChild(createLegendCard(item));
+                        } else {
+                            container.appendChild(createBossCard(item));
+                        }
+                        
+                        itemElement.appendChild(container);
+                        historyContent.appendChild(itemElement);
+                    });
+                }
+            }
+            
+            // Показать модальное окно всей истории
+            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>';
+                } 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'}`;
+                        
+                        const title = document.createElement('h3');
+                        title.className = 'text-lg font-semibold mb-3 text-[#4A4A4A] dark:text-white';
+                        
+                        if (item.type === 'team') {
+                            const teamName = item.name ? `"${item.name}" - ` : '';
+                            title.textContent = `${teamName}Отряд (${new Date(item.date).toLocaleString()})`;
+                        } else if (item.type === 'legend') {
+                            title.textContent = `${item.name} (Местная легенда) (${new Date(item.date).toLocaleString()})`;
+                        } else {
+                            title.textContent = `${item.name} (${new Date(item.date).toLocaleString()})`;
+                        }
+                        
+                        itemElement.appendChild(title);
+                        
+                        const container = document.createElement('div');
+                        container.className = 'flex gap-3 overflow-x-auto pb-2 custom-scrollbar';
+                        
+                        if (item.type === 'team') {
+                            item.characters.forEach(char => {
+                                const card = document.createElement('div');
+                                card.className = 'full-history-character-card';
+                                card.innerHTML = `
+                                    <img src="${char.icon}" alt="${char.name}" 
+                                         class="w-16 h-16 rounded-full mb-1 object-cover border-2"
+                                         onerror="this.onerror=null;this.src='https://placehold.co/64x64/EFEAE4/4A4A4A?text=N/A'">
+                                    <p class="font-medium text-sm truncate w-full">${char.name}</p>
+                                `;
+                                container.appendChild(card);
+                            });
+                        } else if (item.type === 'legend') {
+                            const legendCard = document.createElement('div');
+                            legendCard.className = 'full-history-character-card';
+                            legendCard.innerHTML = `
+                                <img src="${item.icon}" alt="${item.name}" 
+                                     class="w-16 h-16 rounded-full mb-1 object-cover border-2"
+                                     onerror="this.onerror=null;this.src='https://placehold.co/64x64/EFEAE4/4A4A4A?text=N/A'">
+                                <p class="font-medium text-sm truncate w-full">${item.name}</p>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">Местная легенда</p>
+                            `;
+                            container.appendChild(legendCard);
+                        } else {
+                            const bossCard = document.createElement('div');
+                            bossCard.className = 'full-history-character-card';
+                            bossCard.innerHTML = `
+                                <img src="${item.icon}" alt="${item.name}" 
+                                     class="w-16 h-16 rounded-full mb-1 object-cover border-2"
+                                     onerror="this.onerror=null;this.src='https://placehold.co/64x64/EFEAE4/4A4A4A?text=N/A'">
+                                <p class="font-medium text-sm truncate w-full">${item.name}</p>
+                            `;
+                            container.appendChild(bossCard);
+                        }
+                        
+                        itemElement.appendChild(container);
+                        fullHistoryModalContentInner.appendChild(itemElement);
+                    });
+                }
+                
+                fullHistoryModal.classList.remove('hidden');
+                setTimeout(() => {
+                    fullHistoryModalContent.classList.remove('scale-95', 'opacity-0');
+                    fullHistoryModalContent.classList.add('scale-100', 'opacity-100');
+                }, 10);
+            }
+            
+            // Скрыть модальное окно всей истории
+            function hideFullHistoryModal() {
+                fullHistoryModalContent.classList.add('scale-95', 'opacity-0');
+                fullHistoryModalContent.classList.remove('scale-100', 'opacity-100');
+                setTimeout(() => {
+                    fullHistoryModal.classList.add('hidden');
+                }, 300);
+            }
+            
+            // Сохранение отряда в историю
+            function saveTeamToHistory(team, name = '') {
+                historyTeams.unshift({
+                    date: new Date().toISOString(),
+                    characters: team,
+                    name: name,
+                    type: 'team'
+                });
+                localStorage.setItem(`${currentUserUID}_genshinTeamsHistory`, JSON.stringify(historyTeams));
+                renderHistory();
+            }
+            
+            // Сохранение босса в историю
+            function saveBossToHistory(boss, isWorld, isLegendType = false) {
+                const type = isLegendType ? 'legend' : (isWorld ? 'world-boss' : 'weekly-boss');
+                const bossData = {
+                    date: new Date().toISOString(),
+                    name: boss.name,
+                    icon: boss.icon,
+                    type: type
+                };
+                
+                historyBosses.unshift(bossData);
+                localStorage.setItem(`${currentUserUID}_genshinBossesHistory`, JSON.stringify(historyBosses));
+                renderHistory();
+            }
+            
+            // Очистка истории
+            function clearHistory() {
+                historyTeams = [];
+                historyBosses = [];
+                localStorage.removeItem(`${currentUserUID}_genshinTeamsHistory`);
+                localStorage.removeItem(`${currentUserUID}_genshinBossesHistory`);
+                renderHistory();
+                hideConfirmModal();
+            }
+            
+            // Запуск рулетки персонажей
+            async function spinCharacters() {
+                const availableCharsForSpin = playerCharacters.length > 0 ? playerCharacters : allCharacters;
+                if (isSpinning || availableCharsForSpin.length < config.teamSize) {
+                    alert(`Недостаточно персонажей для формирования отряда из ${config.teamSize} человек. Доступно: ${availableCharsForSpin.length}`);
+                    return;
+                }
+                
+                isSpinning = true;
+                spinCharactersButton.disabled = true;
+                spinCharactersButton.textContent = 'Крутим...';
+                charactersResult.innerHTML = '';
+                charactersPlaceholder.classList.add('hidden');
+                charactersLoader.classList.remove('hidden');
+                saveTeamSection.classList.add('hidden');
+                
+                const teamSize = parseInt(teamSizeSelect.value);
+                let charsPool = [...availableCharsForSpin];
+                const selectedTeam = [];
+                let spinDurationMs; 
+                
+                switch (animationSpeedSelect.value) {
+                    case 'fast': spinDurationMs = 1500; break; 
+                    case 'slow': spinDurationMs = 4000; break; 
+                    default: spinDurationMs = 2500; 
+                }
+                
+                const individualSpinTime = spinDurationMs / teamSize;
+                
+                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]';
+                    charactersResult.appendChild(tempDiv);
+                    
+                    let startTime = Date.now();
+                    let animationFrame;
+                    
+                    const animateSpin = () => {
+                        const elapsedTime = Date.now() - startTime;
+                        if (elapsedTime < individualSpinTime) {
+                            const randomChar = charsPool[Math.floor(Math.random() * charsPool.length)];
+                            tempDiv.innerHTML = '';
+                            const tempCard = createCharacterCard(randomChar);
+                            tempCard.classList.add('roulette-item-spin');
+                            tempDiv.appendChild(tempCard);
+                            animationFrame = requestAnimationFrame(animateSpin);
+                        } else {
+                            cancelAnimationFrame(animationFrame);
+                            const selectedIndex = Math.floor(Math.random() * charsPool.length);
+                            const selectedChar = charsPool.splice(selectedIndex, 1)[0];
+                            selectedTeam.push(selectedChar);
+                            tempDiv.innerHTML = '';
+                        }
+                    };
+                    
+                    animateSpin();
+                    await new Promise(resolve => setTimeout(resolve, individualSpinTime + 100));
+                }
+                
+                // Завершение рулетки
+                charactersLoader.classList.add('hidden');
+                spinCharactersButton.disabled = false;
+                spinCharactersButton.textContent = 'Крутить ещё!';
+                isSpinning = false;
+                
+                renderCharactersResult(selectedTeam);
+            }
+            
+            // Запуск рулетки мирового босса
+            async function spinWorldBoss() {
+                if (isSpinning) return;
+                
+                isSpinning = true;
+                spinWorldBossButton.disabled = true;
+                spinWorldBossButton.textContent = 'Выбираем...';
+                worldBossResult.innerHTML = '';
+                worldBossPlaceholder.classList.add('hidden');
+                worldBossLoader.classList.remove('hidden');
+                saveWorldBossSection.classList.add('hidden');
+                
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                
+                // Фильтруем исключенных боссов
+                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>';
+                    worldBossLoader.classList.add('hidden');
+                    spinWorldBossButton.disabled = false;
+                    spinWorldBossButton.textContent = 'Выбрать ещё!';
+                    isSpinning = false;
+                    return;
+                }
+                
+                const randomBoss = availableBosses[Math.floor(Math.random() * availableBosses.length)];
+                worldBossLoader.classList.add('hidden');
+                spinWorldBossButton.disabled = false;
+                spinWorldBossButton.textContent = 'Выбрать ещё!';
+                isSpinning = false;
+                
+                renderBossResult(randomBoss, true);
+            }
+            
+            // Запуск рулетки еженедельного босса
+            async function spinWeeklyBoss() {
+                if (isSpinning) return;
+                
+                isSpinning = true;
+                spinWeeklyBossButton.disabled = true;
+                spinWeeklyBossButton.textContent = 'Выбираем...';
+                weeklyBossResult.innerHTML = '';
+                weeklyBossPlaceholder.classList.add('hidden');
+                weeklyBossLoader.classList.remove('hidden');
+                saveWeeklyBossSection.classList.add('hidden');
+                
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                
+                // Фильтруем исключенных боссов
+                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>';
+                    weeklyBossLoader.classList.add('hidden');
+                    spinWeeklyBossButton.disabled = false;
+                    spinWeeklyBossButton.textContent = 'Выбрать ещё!';
+                    isSpinning = false;
+                    return;
+                }
+                
+                const randomBoss = availableBosses[Math.floor(Math.random() * availableBosses.length)];
+                weeklyBossLoader.classList.add('hidden');
+                spinWeeklyBossButton.disabled = false;
+                spinWeeklyBossButton.textContent = 'Выбрать ещё!';
+                isSpinning = false;
+                
+                renderBossResult(randomBoss, false);
+            }
+            
+            // Запуск рулетки местной легенды
+            async function spinLocalLegend() {
+                if (isSpinning) return;
+                
+                isSpinning = true;
+                spinLegendButton.disabled = true;
+                spinLegendButton.textContent = 'Выбираем...';
+                legendResult.innerHTML = '';
+                legendPlaceholder.classList.add('hidden');
+                legendLoader.classList.remove('hidden');
+                saveLegendSection.classList.add('hidden');
+                
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                
+                // Фильтруем исключенных легенд
+                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>';
+                    legendLoader.classList.add('hidden');
+                    spinLegendButton.disabled = false;
+                    spinLegendButton.textContent = 'Выбрать ещё!';
+                    isSpinning = false;
+                    return;
+                }
+                
+                const randomLegend = availableLegends[Math.floor(Math.random() * availableLegends.length)];
+                legendLoader.classList.add('hidden');
+                spinLegendButton.disabled = false;
+                spinLegendButton.textContent = 'Выбрать ещё!';
+                isSpinning = false;
+                
+                renderLegendResult(randomLegend);
+            }
+            
+            // Модальное окно подтверждения
+            function showConfirmModal(message, callback) {
+                confirmModalMessage.textContent = message;
+                confirmModal.classList.remove('hidden');
+                setTimeout(() => {
+                    confirmModalContent.classList.remove('scale-95', 'opacity-0');
+                    confirmModalContent.classList.add('scale-100', 'opacity-100');
+                }, 10);
+                
+                const handleConfirm = () => {
+                    callback();
+                    confirmModalOk.removeEventListener('click', handleConfirm);
+                    confirmModalCancel.removeEventListener('click', handleCancel);
+                };
+                
+                const handleCancel = () => {
+                    hideConfirmModal();
+                    confirmModalOk.removeEventListener('click', handleConfirm);
+                    confirmModalCancel.removeEventListener('click', handleCancel);
+                };
+                
+                confirmModalOk.addEventListener('click', handleConfirm);
+                confirmModalCancel.addEventListener('click', handleCancel);
+            }
+            
+            function hideConfirmModal() {
+                confirmModalContent.classList.add('scale-95', 'opacity-0');
+                confirmModalContent.classList.remove('scale-100', 'opacity-100');
+                setTimeout(() => {
+                    confirmModal.classList.add('hidden');
+                }, 300);
+            }
+            
+            // Обработчики событий
+            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);
+            });
+            
+            clearPlayerCharactersButton.addEventListener('click', () => {
+                showConfirmModal('Вы уверены, что хотите очистить список ваших персонажей?', 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) {
+                    saveTeamToHistory(currentGeneratedTeam, teamName);
+                    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(); // Показать выбранную категорию при загрузке
+        });
+    </script>
+</body>
 </html>
\ No newline at end of file
