Дополни код, который я написал ниже и напиши с учетом дополнений ВЕСЬ код полностью. Перемести кнопки с количеством людей и "выбрать" и остальные чуть ниже, чтобы синяя полоска заполнения не перекрывала их. Также сделай фоновое аудио arm.mp3 изначально в режиме без звука при запуске сайта. А также добавь еще одно окно количества людей и кнопку "выбрать" для старшого и младшего призыва отдельно, чтобы можно было выбирать людей из отдельных групп, аудио и анимации на кнопках и людях оставь таким же.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Рандомайзер намоток</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.21/vanta.clouds.min.js"></script>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --error-color: #e74c3c;
            --bg-color: rgba(255, 255, 255, 0.9);
            --text-color: #333;
            --highlight-color: #e8f4fc;
        }
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Roboto', sans-serif;
            color: var(--text-color);
            position: relative;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        #vanta-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        .content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: var(--bg-color);
            margin-top: 20px;
            margin-bottom: 20px;
            display: none; /* Скрываем контент до клика */
        }
        
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        
        .dice-container {
            display: inline-block;
            margin-right: 10px;
        }
        
        .dice {
            display: inline-block;
            font-size: 1.2em;
            transition: transform 0.3s;
        }
        
        .rotating {
            animation: dice-rotate 1s linear infinite;
        }
        
        @keyframes dice-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .groups {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }
        
        .group {
            flex: 1;
            min-width: 300px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 15px;
            border-radius: 8px;
        }
        
        .person {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 5px;
            border-bottom: 1px dotted #eee;
        }
        
        .counter {
            background: var(--secondary-color);
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.85em;
            min-width: 20px;
            text-align: center;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            margin: 20px 0;
        }
        
        .secondary-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        
        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        button:hover:not(:disabled) {
            transform: translateY(-2px);
        }
        
        button:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
        
        .result {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            font-size: 1.2em;
            font-weight: bold;
            margin: 20px 0;
            min-height: 60px;
        }
        
        .stats-container {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
        }
        
        .stats-container h2 {
            margin-top: 0;
            color: var(--primary-color);
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        
        .stat-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px dotted #eee;
        }
        
        @keyframes glow {
            0% { box-shadow: 0 0 5px #ff0000; }
            50% { box-shadow: 0 0 20px #ff0000; }
            100% { box-shadow: 0 0 5px #ff0000; }
        }
        
        .glow-effect {
            animation: glow 1s infinite;
        }
        
        .progress-bar {
            height: 5px;
            background-color: #e0e0e0;
            border-radius: 3px;
            margin-top: 10px;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background-color: var(--primary-color);
            width: 0%;
            transition: width 0.1s linear;
        }
        
        .input-container {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        input[type="number"] {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 80px;
            text-align: center;
        }

        .autoplay-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            color: white;
            font-size: 1.5em;
            text-align: center;
            flex-direction: column;
        }
        
        .click-to-start {
            margin-top: 20px;
            padding: 15px 30px;
            background-color: var(--primary-color);
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .click-to-start:hover {
            transform: scale(1.05);
        }

        .audio-controls {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 5px;
            z-index: 100;
        }

        .audio-controls button {
            padding: 5px 10px;
            font-size: 0.8em;
        }

        .audio-controls input[type="range"] {
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="vanta-bg"></div>
    <div class="content" id="main-content">
        <h1>
            <span class="dice-container">
                <span class="dice">🎲</span>
            </span>
            Рандомайзер намоток
        </h1>
        <div class="groups">
            <div class="group" id="senior-group">
                <h2>👨‍✈️ Старший призыв</h2>
                <div id="senior-list"></div>
            </div>
            
            <div class="group" id="junior-group">
                <h2>👶 Младший призыв</h2>
                <div id="junior-list"></div>
            </div>
        </div>
        
        <div class="result" id="result">Нажмите кнопку "Выбрать случайного"</div>
        
        <div class="progress-bar">
            <div class="progress" id="progress"></div>
        </div>
        
        <div class="input-container">
            <input type="number" id="count-input" min="1" max="20" value="1">
            <button id="random-btn">🎲 Выбрать</button>
        </div>
        
        <div class="secondary-controls">
            <button id="reset-btn">🔄 Сбросить</button>
            <button id="export-btn">💾 Экспорт</button>
            <button id="import-btn">📂 Импорт</button>
        </div>
        
        <div class="stats-container">
            <h2>📊 Статистика выборов</h2>
            <div id="stats-list"></div>
        </div>
    </div>

    <div class="autoplay-overlay" id="autoplay-overlay">
        <div class="click-to-start" id="start-button">ЖМИ, СУКА</div>
    </div>

    <div class="audio-controls">
        <button id="toggle-bg-audio">🔇</button>
        <input type="range" id="bg-audio-volume" min="0" max="1" step="0.1" value="0.5">
        <button id="restart-bg-audio">↻</button>
    </div>
    
    <script>
        class Randomizer {
            constructor() {
                this.people = {
                    senior: ["Артем Ш.", "Артем В.", "Олег Щ.", "Дима Г.", "Никита Л.", 
                             "Максим С.", "Леха Д.", "Антон К.", "Арыслан Х.", "Даня Ч."],
                    junior: ["Витя М.", "Андрей Л.", "Андрей Б.", "Серега Л.", "Дима З.", 
                             "Камиль Х.", "Гриша М.", "Валера Р.", "Влад Я.", "Вова К."]
                };
                
                this.audioFiles = {
                    "Антон К.": "audio/Anton.mp3",
                    "Арыслан Х.": "audio/Arislan.mp3",
                    "Вова К.": "audio/Bova.mp3",
                    "Андрей Б.": "audio/Burminov.mp3",
                    "Даня Ч.": "audio/Danny.mp3",
                    "Дима Г.": "audio/Dima.mp3",
                    "Камиль Х.": "audio/Hasan.mp3",
                    "Серега Л.": "audio/Lada.mp3",
                    "Леха Д.": "audio/Lexa.mp3",
                    "Андрей Л.": "audio/Luhmarev.mp3",
                    "Гриша М.": "audio/Mahov.mp3",
                    "Максим С.": "audio/Maks.mp3",
                    "Никита Л.": "audio/Nikita.mp3",
                    "Олег Щ.": "audio/Oleg.mp3",
                    "Валера Р.": "audio/Raev.mp3",
                    "Артем Ш.": "audio/Shmel.mp3",
                    "Артем В.": "audio/Vagi.mp3",
                    "Витя М.": "audio/Vitya.mp3",
                    "Влад Я.": "audio/Yahaev.mp3",
                    "Дима З.": "audio/Zikov.mp3"
                };

                this.loadingAudio = new Audio('audio/Loading.mp3');
                this.openingAudio = new Audio('audio/Otkritie.mp3');
                this.commonAudio = new Audio('audio/Obshee.mp3');
                this.backgroundAudio = new Audio('audio/arm.mp3');
                this.backgroundAudio.loop = true;
                this.backgroundAudio.volume = 0.5;
                
                // Текущее воспроизводимое аудио
                this.currentAudio = null;
                this.isBackgroundAudioPlaying = false;
                this.backgroundAudioPausedTime = 0;

                this.stats = {};
                this.STORAGE_KEY = 'randomizer_stats_opt_v3';
                this.isSelecting = false;
                this.diceElement = document.querySelector('.dice');
                this.progressElement = document.getElementById('progress');
                this.selectDuration = 3000;
                this.countInput = document.getElementById('count-input');
                this.autoplayOverlay = document.getElementById('autoplay-overlay');
                this.startButton = document.getElementById('start-button');
                this.mainContent = document.getElementById('main-content');
                
                // Настройка обработчиков событий
                this.setupAutoplay();
                this.setupAudioControls();
            }

            setupAudioControls() {
                const toggleBtn = document.getElementById('toggle-bg-audio');
                const volumeControl = document.getElementById('bg-audio-volume');
                const restartBtn = document.getElementById('restart-bg-audio');

                toggleBtn.addEventListener('click', () => {
                    if (this.isBackgroundAudioPlaying) {
                        this.pauseBackgroundAudio();
                        toggleBtn.textContent = '🔇';
                    } else {
                        this.playBackgroundAudio();
                        toggleBtn.textContent = '🔊';
                    }
                });

                volumeControl.addEventListener('input', () => {
                    this.backgroundAudio.volume = volumeControl.value;
                });

                restartBtn.addEventListener('click', () => {
                    this.backgroundAudio.currentTime = 0;
                    if (!this.isBackgroundAudioPlaying) {
                        this.playBackgroundAudio();
                        document.getElementById('toggle-bg-audio').textContent = '🔊';
                    }
                });

                // Автовоспроизведение фоновой музыки после клика
                this.startButton.addEventListener('click', () => {
                    this.playBackgroundAudio();
                    toggleBtn.textContent = '🔊';
                }, { once: true });
            }

            playBackgroundAudio() {
                if (this.currentAudio) return; // Не прерываем текущее аудио
                
                this.backgroundAudio.currentTime = this.backgroundAudioPausedTime;
                this.backgroundAudio.play()
                    .then(() => {
                        this.isBackgroundAudioPlaying = true;
                    })
                    .catch(e => console.log("Не удалось воспроизвести фоновую музыку:", e));
            }

            pauseBackgroundAudio() {
                this.backgroundAudioPausedTime = this.backgroundAudio.currentTime;
                this.backgroundAudio.pause();
                this.isBackgroundAudioPlaying = false;
            }

            setupAutoplay() {
                // Вешаем обработчик на кнопку
                this.startButton.addEventListener('click', () => {
                    // Скрываем оверлей
                    this.autoplayOverlay.style.display = 'none';
                    
                    // Показываем основной контент
                    this.mainContent.style.display = 'block';
                    
                    // Воспроизводим звук открытия
                    this.playAudio(this.openingAudio);
                    
                    // Инициализируем приложение
                    this.initBackground();
                    this.initDOM();
                    this.loadStats();
                    this.bindEvents();
                }, { once: true });
            }

            initAudio(audio) {
                audio.currentTime = 0;
                audio.preload = 'auto';
            }

            async playAudio(audio) {
                try {
                    // Останавливаем текущее аудио, если оно играет
                    if (this.currentAudio) {
                        this.currentAudio.pause();
                        this.currentAudio.currentTime = 0;
                    }
                    
                    // Приостанавливаем фоновую музыку, если она играет
                    if (this.isBackgroundAudioPlaying) {
                        this.pauseBackgroundAudio();
                    }
                    
                    // Устанавливаем новое аудио как текущее
                    this.currentAudio = audio;
                    this.currentAudio.currentTime = 0;
                    
                    await this.currentAudio.play();
                    
                    // Когда аудио закончится, возобновляем фоновую музыку
                    this.currentAudio.onended = () => {
                        this.currentAudio = null;
                        if (!this.isBackgroundAudioPlaying) {
                            this.playBackgroundAudio();
                        }
                    };
                    
                    return true;
                } catch (err) {
                    console.log("Ошибка воспроизведения звука:", err);
                    return false;
                }
            }

            getRandomPerson() {
                const group = Math.random() < 0.5 ? 'senior' : 'junior';
                const randomIndex = Math.floor(Math.random() * this.people[group].length);
                return this.people[group][randomIndex];
            }

            getRandomPersons(count) {
                const result = [];
                const allPeople = [...this.people.senior, ...this.people.junior];
                const availablePeople = [...allPeople];
                
                for (let i = 0; i < count && availablePeople.length > 0; i++) {
                    const randomIndex = Math.floor(Math.random() * availablePeople.length);
                    result.push(availablePeople[randomIndex]);
                    availablePeople.splice(randomIndex, 1);
                }
                
                return result;
            }

            selectPerson() {
                if (this.isSelecting) return;

                const count = parseInt(this.countInput.value) || 1;
                if (count < 1) {
                    this.updateResult("Введите число больше 0");
                    return;
                }

                this.isSelecting = true;
                this.startSelectionAnimation();
                this.disableButtons(true);
                this.updateResult("Выбираем...");
                
                this.progressElement.style.width = '0%';
                anime({
                    targets: this.progressElement,
                    width: '100%',
                    duration: this.selectDuration,
                    easing: 'linear'
                });
                
                this.playAudio(this.loadingAudio);

                setTimeout(() => {
                    const persons = this.getRandomPersons(count);
                    let resultText;
                    
                    if (persons.length === 1) {
                        resultText = `Выбран: ${persons[0]}`;
                        this.updateStats(persons[0]);
                        this.playPersonAudio(persons[0]);
                    } else {
                        resultText = `Выбраны: ${persons.join(', ')}`;
                        persons.forEach(person => this.updateStats(person));
                        this.playAudio(this.commonAudio);
                    }
                    
                    this.updateResult(resultText);
                    this.stopSelectionAnimation();
                    this.disableButtons(false);
                    this.isSelecting = false;
                }, this.selectDuration);
            }

            playPersonAudio(person) {
                const audioFile = this.audioFiles[person];
                if (audioFile) {
                    const audio = new Audio(audioFile);
                    this.playAudio(audio);
                }
            }

            initBackground() {
                VANTA.CLOUDS({
                    el: "#vanta-bg",
                    mouseControls: true,
                    touchControls: true,
                    gyroControls: false,
                    skyColor: 0x0,
                    cloudColor: 0x4a6081,
                    cloudShadowColor: 0x506474,
                    sunColor: 0xc51f81,
                    speed: 0.2
                });
            }
            
            initDOM() {
                this.renderList('senior');
                this.renderList('junior');
                this.updateStatsList();
            }
            
            renderList(group) {
                const container = document.getElementById(`${group}-list`);
                container.innerHTML = this.people[group]
                    .map(name => `
                        <div class="person" data-name="${name}">
                            <span class="person-name">${name}</span>
                            <span class="counter">${this.stats[name] || 0}</span>
                        </div>
                    `)
                    .join('');
            }
            
            loadStats() {
                const savedStats = localStorage.getItem(this.STORAGE_KEY);
                if (savedStats) {
                    this.stats = JSON.parse(savedStats);
                } else {
                    this.resetStats();
                }
                this.updateAllCounters();
            }
            
            resetStats() {
                this.stats = {};
                [...this.people.senior, ...this.people.junior].forEach(name => {
                    this.stats[name] = 0;
                });
                this.saveStats();
                this.updateAllCounters();
                this.updateStatsList();
            }
            
            saveStats() {
                localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.stats));
            }
            
            exportData() {
                const dataStr = JSON.stringify(this.stats);
                const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
                const exportFileDefaultName = 'randomizer_stats.json';
                
                const linkElement = document.createElement('a');
                linkElement.setAttribute('href', dataUri);
                linkElement.setAttribute('download', exportFileDefaultName);
                linkElement.click();
            }
            
            importData() {
                const input = document.createElement('input');
                input.type = 'file';
                input.accept = '.json';
                
                input.onchange = e => {
                    const file = e.target.files[0];
                    const reader = new FileReader();
                    
                    reader.onload = event => {
                        try {
                            const importedStats = JSON.parse(event.target.result);
                            if (this.validateStats(importedStats)) {
                                this.stats = importedStats;
                                this.saveStats();
                                this.updateAllCounters();
                                this.updateStatsList();
                                this.updateResult("Данные успешно импортированы");
                            } else {
                                this.updateResult("Ошибка: неверный формат данных");
                            }
                        } catch (error) {
                            this.updateResult("Ошибка при чтении файла");
                            console.error(error);
                        }
                    };
                    
                    reader.readAsText(file);
                };
                
                input.click();
            }
            
            validateStats(stats) {
                const allPeople = [...this.people.senior, ...this.people.junior];
                return allPeople.every(person => stats.hasOwnProperty(person));
            }
            
            updateAllCounters() {
                document.querySelectorAll('.person').forEach(el => {
                    const name = el.dataset.name;
                    el.querySelector('.counter').textContent = this.stats[name] || 0;
                });
            }
            
            updateStatsList() {
                const statsList = document.getElementById('stats-list');
                const sortedStats = Object.entries(this.stats)
                    .sort((a, b) => b[1] - a[1]);
                
                statsList.innerHTML = sortedStats
                    .map(([name, count]) => `
                        <div class="stat-item">
                            <span>${name}</span>
                            <span>${count}</span>
                        </div>
                    `)
                    .join('');
            }
            
            disableButtons(disabled) {
                document.querySelectorAll('button').forEach(btn => {
                    btn.disabled = disabled;
                });
            }
            
            startSelectionAnimation() {
                this.diceElement.classList.add('rotating');
                anime({
                    targets: this.diceElement,
                    rotate: '+=360',
                    duration: 1000,
                    loop: true,
                    easing: 'linear'
                });
            }
            
            stopSelectionAnimation() {
                this.diceElement.classList.remove('rotating');
                anime.remove(this.diceElement);
                anime({
                    targets: this.diceElement,
                    rotate: 0,
                    duration: 300
                });
            }
            
            updateResult(text) {
                const resultEl = document.getElementById('result');
                resultEl.textContent = text;
            }
            
            updateStats(person) {
                if (this.stats[person] !== undefined) {
                    this.stats[person]++;
                    this.saveStats();
                    this.updateAllCounters();
                    this.updateStatsList();
                }
            }

            bindEvents() {
                document.getElementById('random-btn').addEventListener('click', () => this.selectPerson());
                document.getElementById('reset-btn').addEventListener('click', () => {
                    if (confirm('Сбросить статистику?')) {
                        this.resetStats();
                        this.updateResult('Статистика сброшена');
                    }
                });
                document.getElementById('export-btn').addEventListener('click', () => this.exportData());
                document.getElementById('import-btn').addEventListener('click', () => this.importData());
            }
        }
    
        // Инициализируем приложение после полной загрузки страницы
        document.addEventListener('DOMContentLoaded', () => {
            const randomizer = new Randomizer();
            
            // Воспроизводим звук при обновлении страницы
            window.addEventListener('beforeunload', () => {
                const openingAudio = new Audio('audio/Otkritie.mp3');
                openingAudio.volume = 0.5;
                openingAudio.play().catch(e => console.log("Не удалось воспроизвести звук при обновлении"));
            });
        });
    </script>
</body>
</html>