<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ultimate Clicker Game</title>
    <!-- Include Google Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        /* Importing Google Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

        :root {
            /* Light Mode Colors */
            --color-background-light: #f0f8ff;
            --color-primary-light: #4CAF50;
            --color-secondary-light: #ffffff;
            --color-accent-light: #ff5722;
            --color-text-light: #333333;

            /* Dark Mode Colors */
            --color-background-dark: #1e1e1e;
            --color-primary-dark: #bb86fc;
            --color-secondary-dark: #2c2c2c;
            --color-accent-dark: #03dac6;
            --color-text-dark: #ffffff;

            /* Default Theme: Dark */
            --color-background: var(--color-background-dark);
            --color-primary: var(--color-primary-dark);
            --color-secondary: var(--color-secondary-dark);
            --color-accent: var(--color-accent-dark);
            --color-text: var(--color-text-dark);

            --font-family: 'Roboto', sans-serif;
            --transition-speed: 0.3s;
        }

        body.light-mode {
            --color-background: var(--color-background-light);
            --color-primary: var(--color-primary-light);
            --color-secondary: var(--color-secondary-light);
            --color-accent: var(--color-accent-light);
            --color-text: var(--color-text-light);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-family);
            background: linear-gradient(-45deg, #2c3e50, #bdc3c7, #2c3e50, #bdc3c7);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            color: var(--color-text);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background var(--transition-speed), color var(--transition-speed);
            position: relative;
            overflow: hidden;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            text-align: center;
            max-width: 500px;
            width: 90%;
            animation: fadeIn 1s ease-in-out;
            transition: background var(--transition-speed), box-shadow var(--transition-speed);
            position: relative;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        #score {
            font-size: 3rem;
            margin-bottom: 30px;
            position: relative;
            display: inline-block;
            min-height: 3.5rem; /* Ensures space for animated increments */
        }

        /* Animated Score Increment */
        .score-increment {
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 1.5rem;
            color: var(--color-accent);
            animation: pop 0.5s forwards;
        }

        @keyframes pop {
            0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -20px) scale(1.5); }
        }

        #click-button {
            position: relative;
            padding: 20px 40px;
            font-size: 1.5rem;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: var(--color-secondary);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed), background 0.3s;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            outline: none;
        }

        /* Hover Effect */
        #click-button:hover {
            transform: scale(1.05);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
        }

        /* Press Animation */
        #click-button:active {
            transform: scale(0.95);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }

        /* Ripple Effect */
        #click-button .ripple {
            position: absolute;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.7);
            transform: scale(0);
            animation: ripple 0.6s linear;
        }

        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        #upgrade-section {
            margin-top: 40px;
            text-align: left;
        }

        .upgrade {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 15px 0;
            padding: 15px 20px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: background var(--transition-speed);
        }

        .upgrade:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .upgrade-info {
            display: flex;
            flex-direction: column;
        }

        .upgrade-info span {
            font-size: 1rem;
            color: var(--color-text);
        }

        .upgrade-info .upgrade-title {
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--color-text);
        }

        .upgrade button {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            font-size: 1rem;
            background: linear-gradient(45deg, var(--color-accent), var(--color-primary));
            color: var(--color-secondary);
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed), background 0.3s;
            outline: none;
            overflow: hidden;
            position: relative;
        }

        .upgrade button .material-icons {
            margin-right: 8px;
            font-size: 20px;
        }

        /* Hover Effect for Buy Buttons */
        .upgrade button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
            background: linear-gradient(45deg, var(--color-primary), var(--color-accent));
        }

        /* Press Animation */
        .upgrade button:active {
            transform: translateY(-1px);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }

        /* Icons */
        .icon {
            position: fixed;
            width: 50px;
            height: 50px;
            cursor: pointer;
            transition: transform var(--transition-speed);
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--color-text);
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            padding: 5px;
        }

        #settings-icon {
            top: 20px;
            left: 20px;
        }

        #shop-icon {
            top: 20px;
            right: 20px;
        }

        .icon:hover {
            transform: scale(1.1);
            background: rgba(255, 255, 255, 0.3);
        }

        /* Shop and Settings Overlays */
        #shop-overlay, #settings-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            animation: fadeInOverlay 0.5s forwards;
            z-index: 100;
        }

        @keyframes fadeInOverlay {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .shop-container, .settings-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            width: 80%;
            max-width: 700px;
            position: relative;
            animation: slideIn 0.5s forwards;
            transition: background var(--transition-speed), box-shadow var(--transition-speed);
            max-height: 90vh;
            overflow-y: auto;
        }

        @keyframes slideIn {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .close-overlay {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 2rem;
            cursor: pointer;
            color: var(--color-text);
            transition: transform var(--transition-speed);
        }

        .close-overlay:hover {
            transform: rotate(90deg);
        }

        /* Tabs */
        .tabs {
            display: flex;
            margin-bottom: 30px;
            border-bottom: 2px solid var(--color-primary);
        }

        .tab {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            font-weight: 700;
            color: var(--color-text);
            transition: background var(--transition-speed), color var(--transition-speed);
        }

        .tab.active {
            background: var(--color-primary);
            color: var(--color-secondary);
            border-radius: 5px 5px 0 0;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Theme Toggle */
        .theme-toggle {
            display: flex;
            align-items: center;
            margin-top: 20px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
            margin-left: 10px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: var(--color-primary);
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        /* Responsive Design */
        @media (max-width: 600px) {
            .tabs {
                flex-direction: column;
            }

            .tab {
                padding: 10px 0;
            }

            .upgrade {
                flex-direction: column;
                align-items: flex-start;
            }

            .upgrade button {
                margin-top: 10px;
                width: 100%;
                justify-content: center;
            }
        }

        /* Modern Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--color-primary);
            border-radius: 10px;
        }

        /* Purchase Notification */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0,0,0,0.8);
            color: #fff;
            padding: 15px 25px;
            border-radius: 10px;
            font-size: 1rem;
            display: flex;
            align-items: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            animation: slideIn 0.5s, fadeOut 3s 2.5s forwards;
            z-index: 200;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateX(100%); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

    </style>
</head>
<body> <!-- Removed class="light-mode" to start in Dark Mode -->
    <!-- Settings Icon -->
    <div id="settings-icon" class="icon">
        <i class="material-icons">settings</i>
    </div>

    <!-- Shop Icon -->
    <div id="shop-icon" class="icon">
        <i class="material-icons">shopping_cart</i>
    </div>

    <!-- Settings Overlay -->
    <div id="settings-overlay">
        <div class="settings-container">
            <span class="close-overlay">&times;</span>
            <h2>Settings</h2>
            <div class="theme-toggle">
                <span>Light Mode</span>
                <label class="switch">
                    <input type="checkbox" id="theme-toggle-checkbox-settings">
                    <span class="slider"></span>
                </label>
            </div>
            <div class="theme-toggle">
                <span>Background Music</span>
                <label class="switch">
                    <input type="checkbox" id="music-toggle-checkbox" checked>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="theme-toggle">
                <span>Sound Effects</span>
                <label class="switch">
                    <input type="checkbox" id="sfx-toggle-checkbox" checked>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="theme-toggle">
                <span>Background Music Volume</span>
                <input type="range" id="music-volume" min="0" max="1" step="0.01" value="1">
            </div>
            <div class="theme-toggle">
                <span>Sound Effects Volume</span>
                <input type="range" id="sfx-volume" min="0" max="1" step="0.01" value="1">
            </div>
        </div>
    </div>

    <!-- Shop Overlay -->
    <div id="shop-overlay">
        <div class="shop-container">
            <span class="close-overlay">&times;</span>
            <h2>Shop</h2>
            <div class="tabs">
                <div class="tab active" data-tab="upgrades">Upgrades</div>
                <div class="tab" data-tab="cosmetics">Cosmetics</div>
                <div class="tab" data-tab="boosters">Boosters</div>
            </div>
            <!-- Upgrades Tab -->
            <div class="tab-content active" id="upgrades">
                <div class="upgrade">
                    <div class="upgrade-info">
                        <span class="upgrade-title">Auto-Clicker</span>
                        <span>Cost: <span id="auto-clicker-shop-cost">50</span> Points</span>
                    </div>
                    <button class="buy-upgrade" data-upgrade="auto-clicker">
                        <i class="material-icons">add_shopping_cart</i> Buy
                    </button>
                </div>
                <div class="upgrade">
                    <div class="upgrade-info">
                        <span class="upgrade-title">Double Click</span>
                        <span>Cost: <span id="double-click-shop-cost">100</span> Points</span>
                    </div>
                    <button class="buy-upgrade" data-upgrade="double-click">
                        <i class="material-icons">add_shopping_cart</i> Buy
                    </button>
                </div>
                <div class="upgrade">
                    <div class="upgrade-info">
                        <span class="upgrade-title">Triple Click</span>
                        <span>Cost: <span id="triple-click-shop-cost">250</span> Points</span>
                    </div>
                    <button class="buy-upgrade" data-upgrade="triple-click">
                        <i class="material-icons">add_shopping_cart</i> Buy
                    </button>
                </div>
            </div>
            <!-- Cosmetics Tab -->
            <div class="tab-content" id="cosmetics">
                <div class="upgrade">
                    <div class="upgrade-info">
                        <span class="upgrade-title">Special Button Skin - Gold</span>
                        <span>Cost: <span id="skin-shop-cost">200</span> Points</span>
                    </div>
                    <button class="buy-upgrade" data-upgrade="skin">
                        <i class="material-icons">add_shopping_cart</i> Buy
                    </button>
                </div>
                <div class="upgrade">
                    <div class="upgrade-info">
                        <span class="upgrade-title">Animated Score</span>
                        <span>Cost: <span id="animation-shop-cost">300</span> Points</span>
                    </div>
                    <button class="buy-upgrade" data-upgrade="animation">
                        <i class="material-icons">add_shopping_cart</i> Buy
                    </button>
                </div>
            </div>
            <!-- Boosters Tab -->
            <div class="tab-content" id="boosters">
                <div class="upgrade">
                    <div class="upgrade-info">
                        <span class="upgrade-title">Booster - 100 Auto-Clickers</span>
                        <span>Cost: <span id="booster-shop-cost">500</span> Points</span>
                    </div>
                    <button class="buy-upgrade" data-upgrade="booster">
                        <i class="material-icons">add_shopping_cart</i> Buy
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Purchase Notification Template -->
    <template id="notification-template">
        <div class="notification">
            <span class="material-icons">check_circle</span>
            <p></p>
        </div>
    </template>

    <!-- Main Game Container -->
    <div class="container">
        <div id="score">Score: 0</div>
        <button id="click-button">Click Me!</button>
        <div id="stats">
            <p>Auto-Clickers: <span id="auto-clickers-count">0</span></p>
            <p>Click Multiplier: <span id="click-multiplier">1x</span></p>
        </div>
    </div>

    <!-- Audio Elements for Sound Effects and Music -->
    <audio id="click-sound" src="https://www.soundjay.com/buttons/sounds/button-16.mp3" preload="auto"></audio>
    <audio id="purchase-sound" src="https://www.soundjay.com/buttons/sounds/button-09.mp3" preload="auto"></audio>
    <audio id="booster-sound" src="https://www.soundjay.com/buttons/sounds/button-10.mp3" preload="auto"></audio>
    <audio id="background-music" src="https://www.bensound.com/bensound-music/bensound-creativeminds.mp3" preload="auto" loop></audio>

    <script>
        // Game Variables
        let score = 0;
        let autoClickers = 0;
        let clickMultiplier = 1;
        let isAnimatedScore = false;
        let soundEffectsEnabled = true;
        let backgroundMusicEnabled = true;
        let musicVolume = 1;
        let sfxVolume = 1;

        // Costs Dictionary
        const costs = {
            'auto-clicker': 50,
            'double-click': 100,
            'triple-click': 250,
            'skin': 200,
            'animation': 300,
            'booster': 500
        };

        // DOM Elements
        const clickButton = document.getElementById('click-button');
        const scoreDisplay = document.getElementById('score');
        const buyUpgradeButtons = document.querySelectorAll('.buy-upgrade');
        const shopIcon = document.getElementById('shop-icon');
        const shopOverlay = document.getElementById('shop-overlay');
        const settingsIcon = document.getElementById('settings-icon');
        const settingsOverlay = document.getElementById('settings-overlay');
        const closeOverlayButtons = document.querySelectorAll('.close-overlay');
        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');
        const themeToggleCheckboxSettings = document.getElementById('theme-toggle-checkbox-settings');
        const musicToggleCheckbox = document.getElementById('music-toggle-checkbox');
        const sfxToggleCheckbox = document.getElementById('sfx-toggle-checkbox');
        const musicVolumeSlider = document.getElementById('music-volume');
        const sfxVolumeSlider = document.getElementById('sfx-volume');
        const autoClickersCount = document.getElementById('auto-clickers-count');
        const clickMultiplierDisplay = document.getElementById('click-multiplier');
        const notificationTemplate = document.getElementById('notification-template');

        // Audio Elements
        const clickSound = document.getElementById('click-sound');
        const purchaseSound = document.getElementById('purchase-sound');
        const boosterSound = document.getElementById('booster-sound');
        const backgroundMusic = document.getElementById('background-music');

        // Initialize Shop and Settings Costs Display
        function updateShopCosts() {
            document.getElementById('auto-clicker-shop-cost').textContent = costs['auto-clicker'];
            document.getElementById('double-click-shop-cost').textContent = costs['double-click'];
            document.getElementById('triple-click-shop-cost').textContent = costs['triple-click'];
            document.getElementById('skin-shop-cost').textContent = costs['skin'];
            document.getElementById('animation-shop-cost').textContent = costs['animation'];
            document.getElementById('booster-shop-cost').textContent = costs['booster'];
        }

        // Initialize Game
        updateShopCosts();
        updateScore();
        updateStats();

        // Function to update the score display
        function updateScore() {
            scoreDisplay.textContent = 'Score: ' + score;
            updateStats();
        }

        // Function to update the stats display
        function updateStats() {
            autoClickersCount.textContent = autoClickers;
            clickMultiplierDisplay.textContent = clickMultiplier + 'x';
        }

        // Function to handle score increment animations
        function animateScoreIncrement(amount) {
            if (!isAnimatedScore) return;
            const increment = document.createElement('div');
            increment.classList.add('score-increment');
            increment.textContent = '+' + amount;
            scoreDisplay.appendChild(increment);
            setTimeout(() => {
                increment.remove();
            }, 500);
        }

        // Toggle Animated Score based on cosmetics
        function toggleAnimatedScore(enabled) {
            isAnimatedScore = enabled;
        }

        // Click Event for Main Button with Ripple Effect
        clickButton.addEventListener('click', (e) => {
            if (soundEffectsEnabled) {
                clickSound.currentTime = 0;
                clickSound.play();
            }

            // Create Ripple
            const ripple = document.createElement('span');
            const rect = clickButton.getBoundingClientRect();
            const size = Math.max(clickButton.clientWidth, clickButton.clientHeight);
            ripple.style.width = ripple.style.height = `${size}px`;
            ripple.style.left = `${e.clientX - rect.left - size / 2}px`;
            ripple.style.top = `${e.clientY - rect.top - size / 2}px`;
            ripple.classList.add('ripple');
            clickButton.appendChild(ripple);
            setTimeout(() => {
                ripple.remove();
            }, 600);

            // Update Score
            let totalClick = clickMultiplier;
            score += totalClick;
            updateScore();
            animateScoreIncrement(totalClick);
        });

        // Buy Upgrade Function
        function buyUpgrade(upgrade) {
            if (score >= costs[upgrade]) {
                score -= costs[upgrade];
                // Increase the cost for next purchase
                costs[upgrade] = Math.floor(costs[upgrade] * 1.5);
                switch(upgrade) {
                    case 'auto-clicker':
                        autoClickers += 1;
                        break;
                    case 'double-click':
                        clickMultiplier *= 2;
                        clickButton.textContent = 'Click Me!';
                        break;
                    case 'triple-click':
                        clickMultiplier *= 3;
                        clickButton.textContent = 'Click Me!';
                        break;
                    case 'skin':
                        clickButton.style.background = 'linear-gradient(135deg, #FFD700, #FFA500)';
                        break;
                    case 'animation':
                        toggleAnimatedScore(true);
                        break;
                    case 'booster':
                        activateBooster();
                        break;
                }
                updateScore();
                updateShopCosts();
                updateUpgradeButtons();
                showPurchaseNotification(upgrade);
                if (soundEffectsEnabled) {
                    purchaseSound.currentTime = 0;
                    purchaseSound.play();
                }
            } else {
                alert('Not enough score to buy this upgrade!');
            }
        }

        // Update Upgrade Buttons in Shop
        function updateUpgradeButtons() {
            buyUpgradeButtons.forEach(button => {
                const upgrade = button.getAttribute('data-upgrade');
                const cost = costs[upgrade];
                const costSpan = button.querySelector('span');
                costSpan.textContent = cost;
            });
        }

        // Buy Upgrade Event Listener
        buyUpgradeButtons.forEach(button => {
            button.addEventListener('click', () => {
                const upgrade = button.getAttribute('data-upgrade');
                buyUpgrade(upgrade);
            });
        });

        // Show Purchase Notification
        function showPurchaseNotification(upgrade) {
            const notificationClone = notificationTemplate.content.cloneNode(true);
            const notification = notificationClone.querySelector('.notification');
            notification.querySelector('p').textContent = `${capitalizeFirstLetter(upgrade.replace('-', ' '))} Purchased!`;
            document.body.appendChild(notification);
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }

        // Capitalize Function
        function capitalizeFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
        }

        // Auto-Clicker Functionality
        function autoClick() {
            if (autoClickers > 0) {
                score += autoClickers;
                updateScore();
                if (isAnimatedScore) animateScoreIncrement(autoClickers);
            }
        }

        setInterval(autoClick, 1000);

        // Shop Icon Click Event
        shopIcon.addEventListener('click', () => {
            shopOverlay.style.display = 'flex';
        });

        // Settings Icon Click Event
        settingsIcon.addEventListener('click', () => {
            settingsOverlay.style.display = 'flex';
        });

        // Close Shop and Settings Overlays
        closeOverlayButtons.forEach(button => {
            button.addEventListener('click', () => {
                shopOverlay.style.display = 'none';
                settingsOverlay.style.display = 'none';
            });
        });

        // Tab Functionality
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                const target = tab.getAttribute('data-tab');
                tabContents.forEach(content => {
                    if(content.id === target) {
                        content.classList.add('active');
                    } else {
                        content.classList.remove('active');
                    }
                });
            });
        });

        // Theme Toggle Functionality (Settings)
        themeToggleCheckboxSettings.addEventListener('change', () => {
            if(themeToggleCheckboxSettings.checked) {
                document.body.classList.add('light-mode');
            } else {
                document.body.classList.remove('light-mode');
            }
            saveSettings();
        });

        // Background Music Toggle
        musicToggleCheckbox.addEventListener('change', () => {
            if(musicToggleCheckbox.checked) {
                backgroundMusic.play();
            } else {
                backgroundMusic.pause();
            }
            saveSettings();
        });

        // Sound Effects Toggle
        sfxToggleCheckbox.addEventListener('change', () => {
            soundEffectsEnabled = sfxToggleCheckbox.checked;
            saveSettings();
        });

        // Background Music Volume Control
        musicVolumeSlider.addEventListener('input', () => {
            musicVolume = musicVolumeSlider.value;
            backgroundMusic.volume = musicVolume;
            saveSettings();
        });

        // Sound Effects Volume Control
        sfxVolumeSlider.addEventListener('input', () => {
            sfxVolume = sfxVolumeSlider.value;
            clickSound.volume = sfxVolume;
            purchaseSound.volume = sfxVolume;
            boosterSound.volume = sfxVolume;
            saveSettings();
        });

        // Show Purchase Notification
        function showPurchaseNotification(upgrade) {
            const notificationClone = notificationTemplate.content.cloneNode(true);
            const notification = notificationClone.querySelector('.notification');
            notification.querySelector('p').textContent = `${capitalizeFirstLetter(upgrade.replace('-', ' '))} Purchased!`;
            document.body.appendChild(notification);
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }

        // Booster Functionality
        function activateBooster() {
            // Booster grants 100 auto-clickers
            autoClickers += 100;
            updateScore();
            if (soundEffectsEnabled) {
                boosterSound.currentTime = 0;
                boosterSound.play();
            }
            showPurchaseNotification('booster');
            alert('Booster Activated! You received 100 Auto-Clickers!');
        }

        // Persistent Storage Functions
        function saveSettings() {
            localStorage.setItem('isLightMode', document.body.classList.contains('light-mode'));
            localStorage.setItem('backgroundMusic', musicToggleCheckbox.checked);
            localStorage.setItem('soundEffects', soundEffectsEnabled);
            localStorage.setItem('musicVolume', musicVolumeSlider.value);
            localStorage.setItem('sfxVolume', sfxVolumeSlider.value);
            localStorage.setItem('score', score);
            localStorage.setItem('autoClickers', autoClickers);
            localStorage.setItem('clickMultiplier', clickMultiplier);
            localStorage.setItem('isAnimatedScore', isAnimatedScore);
        }

        function loadSettings() {
            const isLightMode = localStorage.getItem('isLightMode');
            if(isLightMode === 'true') {
                document.body.classList.add('light-mode');
                themeToggleCheckboxSettings.checked = true;
            } else {
                document.body.classList.remove('light-mode');
                themeToggleCheckboxSettings.checked = false;
            }

            const backgroundMusicEnabled = localStorage.getItem('backgroundMusic');
            if(backgroundMusicEnabled === 'true') {
                musicToggleCheckbox.checked = true;
                backgroundMusic.play();
            } else {
                musicToggleCheckbox.checked = false;
                backgroundMusic.pause();
            }

            const soundEffectsStatus = localStorage.getItem('soundEffects');
            soundEffectsEnabled = soundEffectsStatus === 'false' ? false : true;
            sfxToggleCheckbox.checked = soundEffectsEnabled;

            const bgVolume = localStorage.getItem('musicVolume');
            if(bgVolume !== null) {
                musicVolumeSlider.value = bgVolume;
                backgroundMusic.volume = bgVolume;
            }

            const sfxVol = localStorage.getItem('sfxVolume');
            if(sfxVol !== null) {
                sfxVolumeSlider.value = sfxVol;
                clickSound.volume = sfxVol;
                purchaseSound.volume = sfxVol;
                boosterSound.volume = sfxVol;
            }

            const savedScore = localStorage.getItem('score');
            if(savedScore !== null) {
                score = parseInt(savedScore);
            }

            const savedAutoClickers = localStorage.getItem('autoClickers');
            if(savedAutoClickers !== null) {
                autoClickers = parseInt(savedAutoClickers);
            }

            const savedClickMultiplier = localStorage.getItem('clickMultiplier');
            if(savedClickMultiplier !== null) {
                clickMultiplier = parseInt(savedClickMultiplier);
                clickButton.textContent = 'Click Me!';
            }

            const savedAnimatedScore = localStorage.getItem('isAnimatedScore');
            if(savedAnimatedScore === 'true') {
                isAnimatedScore = true;
            } else {
                isAnimatedScore = false;
            }

            updateShopCosts();
            updateScore();
            updateUpgradeButtons();
        }

        window.onload = loadSettings;

        // Save settings when window unloads
        window.addEventListener('beforeunload', saveSettings);

    </script>
</body>
</html>

Make it so the click me button is always under the score. Also make all of the texts have cool fonts. Add 10 more items to the shop. Also, add more music that can be selected using the polished drop down button in the options menu.