script.js

/**
 * Randomizer — Fast, Flexible & Animated Client-Side Engine
 * Synchronization with GitHub Graphite Design Language & Time-Calculator Layout
 */

document.addEventListener('DOMContentLoaded', () => {
    // --- Application State ---
    let activeTab = 'numbers'; // 'numbers' | 'list' | 'colors' | 'dice' | 'coin'
    let isAnimated = true;
    let isSoundEnabled = true;
    let isRolling = false;
    let rollTimer = null;
    let totalRollsCount = 0;
    let historyList = [];

    // Mode-specific state
    let activeColorMode = 'single'; // 'single' | 'palette'
    let activePaletteType = 'random';
    let activeDiceSides = 6;
    let currentColorData = null;

    // Storage Keys
    const STORAGE_KEY_ANIMATED = 'randomizer_animated';
    const STORAGE_KEY_SOUND = 'randomizer_sound';
    const STORAGE_KEY_HISTORY = 'randomizer_history';
    const STORAGE_KEY_TOTAL_ROLLS = 'randomizer_total_rolls';
    const STORAGE_KEY_SETTINGS = 'randomizer_user_settings';
    const STORAGE_KEY_TAB_RESULTS = 'randomizer_tab_results';

    // Per-tab latest results
    let tabResults = {
        numbers: null,
        list: null,
        colors: null,
        dice: null,
        coin: null
    };

    // --- DOM Elements ---
    // Top Navbar
    const toggleAnimated = document.getElementById('toggle-animated');
    const btnToggleSound = document.getElementById('btn-toggle-sound');
    const iconSoundOn = document.getElementById('icon-sound-on');
    const iconSoundOff = document.getElementById('icon-sound-off');
    const statCount = document.getElementById('stat-count');
    const statTotalRolls = document.getElementById('stat-total-rolls');
    const toastContainer = document.getElementById('toast-container');
    const glowOrb1 = document.getElementById('glow-orb-1');
    const glowOrb2 = document.getElementById('glow-orb-2');

    // Tabs
    const tabButtons = {
        numbers: document.getElementById('tab-numbers'),
        list: document.getElementById('tab-list'),
        colors: document.getElementById('tab-colors'),
        dice: document.getElementById('tab-dice'),
        coin: document.getElementById('tab-coin')
    };

    const modeViews = {
        numbers: document.getElementById('mode-numbers-view'),
        list: document.getElementById('mode-list-view'),
        colors: document.getElementById('mode-colors-view'),
        dice: document.getElementById('mode-dice-view'),
        coin: document.getElementById('mode-coin-view')
    };

    // Mode 1: Numbers DOM
    const numMin = document.getElementById('num-min');
    const numMax = document.getElementById('num-max');
    const numCount = document.getElementById('num-count');
    const checkUnique = document.getElementById('check-unique');
    const checkDecimals = document.getElementById('check-decimals');
    const numSort = document.getElementById('num-sort');

    // Mode 2: List DOM
    const listInput = document.getElementById('list-input');
    const listItemsCount = document.getElementById('list-items-count');
    const listPickCount = document.getElementById('list-pick-count');
    const checkListRemove = document.getElementById('check-list-remove');
    const btnListShuffle = document.getElementById('btn-list-shuffle');
    const btnListClear = document.getElementById('btn-list-clear');

    // Mode 3: Colors DOM
    const btnColorSingle = document.getElementById('btn-color-single');
    const btnColorPalette = document.getElementById('btn-color-palette');
    const paletteTypeWrapper = document.getElementById('palette-type-wrapper');
    const selectPaletteType = document.getElementById('select-palette-type');
    const colorPreviewContainer = document.getElementById('color-preview-container');

    // Mode 4: Dice DOM
    const diceCount = document.getElementById('dice-count');
    const diceModifier = document.getElementById('dice-modifier');

    // Mode 5: Coin DOM
    const coinWrapper = document.getElementById('coin-wrapper');
    const coinDisc = document.getElementById('coin-disc');
    let coinRotationY = 0;

    // Live Result Stage DOM
    const primaryResultText = document.getElementById('primary-result-text');
    const resultBreakdown = document.getElementById('result-breakdown');
    const btnCopyResult = document.getElementById('btn-copy-result');
    const copyBtnLabel = document.getElementById('copy-btn-label');
    const btnRoll = document.getElementById('btn-roll');
    const btnRollText = document.getElementById('btn-roll-text');

    // Right Sidebar (History) DOM
    const historyEmpty = document.getElementById('history-empty');
    const historyItemsList = document.getElementById('history-items-list');
    const btnClearHistory = document.getElementById('btn-clear-history');
    const btnCopyHistory = document.getElementById('btn-copy-history');
    const copySummaryText = document.getElementById('copy-summary-text');

    // Current latest raw result for easy copying
    let latestResultRaw = '';

    // =========================================================================
    // Web Audio Synthesizer (Zero External Audio Files)
    // =========================================================================
    let audioCtx = null;

    function getAudioContext() {
        if (!audioCtx) {
            const AudioContextClass = window.AudioContext || window.webkitAudioContext;
            if (AudioContextClass) {
                audioCtx = new AudioContextClass();
            }
        }
        if (audioCtx && audioCtx.state === 'suspended') {
            audioCtx.resume();
        }
        return audioCtx;
    }

    let clickNoiseBuffer = null;

    function getClickNoiseBuffer(ctx) {
        if (!clickNoiseBuffer) {
            const length = Math.floor(ctx.sampleRate * 0.008);
            clickNoiseBuffer = ctx.createBuffer(1, length, ctx.sampleRate);
            const data = clickNoiseBuffer.getChannelData(0);
            for (let i = 0; i < length; i++) {
                data[i] = (Math.random() * 2 - 1) * Math.exp(-i / (length * 0.25));
            }
        }
        return clickNoiseBuffer;
    }

    function playTickSound() {
        if (!isSoundEnabled) return;
        try {
            const ctx = getAudioContext();
            if (!ctx) return;
            const now = ctx.currentTime;

            // 1. Tactile percussive thud (pitch dropping sine 460Hz -> 65Hz in 12ms)
            const osc = ctx.createOscillator();
            const oscGain = ctx.createGain();
            osc.type = 'sine';
            osc.frequency.setValueAtTime(460, now);
            osc.frequency.exponentialRampToValueAtTime(65, now + 0.012);

            oscGain.gain.setValueAtTime(0.038, now);
            oscGain.gain.exponentialRampToValueAtTime(0.0001, now + 0.014);

            osc.connect(oscGain);
            oscGain.connect(ctx.destination);
            osc.start(now);
            osc.stop(now + 0.015);

            // 2. Crisp mechanical transient (filtered noise snap)
            const noise = ctx.createBufferSource();
            noise.buffer = getClickNoiseBuffer(ctx);

            const filter = ctx.createBiquadFilter();
            filter.type = 'bandpass';
            filter.frequency.setValueAtTime(2600, now);
            filter.Q.setValueAtTime(1.5, now);

            const noiseGain = ctx.createGain();
            noiseGain.gain.setValueAtTime(0.022, now);
            noiseGain.gain.exponentialRampToValueAtTime(0.0001, now + 0.008);

            noise.connect(filter);
            filter.connect(noiseGain);
            noiseGain.connect(ctx.destination);

            noise.start(now);
            noise.stop(now + 0.009);
        } catch (e) {}
    }

    function playSuccessSound() {
        if (!isSoundEnabled) return;
        try {
            const ctx = getAudioContext();
            if (!ctx) return;
            const now = ctx.currentTime;
            
            // Chord: note 1
            const osc1 = ctx.createOscillator();
            const gain1 = ctx.createGain();
            osc1.type = 'sine';
            osc1.frequency.setValueAtTime(587.33, now); // D5
            gain1.gain.setValueAtTime(0.06, now);
            gain1.gain.exponentialRampToValueAtTime(0.001, now + 0.25);
            osc1.connect(gain1);
            gain1.connect(ctx.destination);
            osc1.start(now);
            osc1.stop(now + 0.25);

            // Chord: note 2
            const osc2 = ctx.createOscillator();
            const gain2 = ctx.createGain();
            osc2.type = 'sine';
            osc2.frequency.setValueAtTime(880, now + 0.06); // A5
            gain2.gain.setValueAtTime(0.08, now + 0.06);
            gain2.gain.exponentialRampToValueAtTime(0.001, now + 0.35);
            osc2.connect(gain2);
            gain2.connect(ctx.destination);
            osc2.start(now + 0.06);
            osc2.stop(now + 0.35);
        } catch (e) {}
    }

    // =========================================================================
    // True Cryptographic Random Utilities
    // =========================================================================
    function cryptoRandomFloat() {
        const array = new Uint32Array(1);
        window.crypto.getRandomValues(array);
        return array[0] / (0xFFFFFFFF + 1);
    }

    function cryptoRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        if (min > max) {
            const temp = min;
            min = max;
            max = temp;
        }
        return Math.floor(cryptoRandomFloat() * (max - min + 1)) + min;
    }

    function cryptoShuffle(array) {
        const arr = [...array];
        for (let i = arr.length - 1; i > 0; i--) {
            const j = Math.floor(cryptoRandomFloat() * (i + 1));
            [arr[i], arr[j]] = [arr[j], arr[i]];
        }
        return arr;
    }

    function adjustPrimaryFontSize(text) {
        if (!text) return;
        const len = String(text).length;
        if (len > 35) {
            primaryResultText.style.fontSize = '1.35rem';
        } else if (len > 20) {
            primaryResultText.style.fontSize = '1.8rem';
        } else if (len > 12) {
            primaryResultText.style.fontSize = '2.2rem';
        } else {
            primaryResultText.style.fontSize = '';
        }
    }

    function escapeHtml(str) {
        if (str === null || str === undefined) return '';
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }

    // =========================================================================
    // Mode Switching & Per-Tab Results
    // =========================================================================
    function renderTabResult(result) {
        if (!result) {
            primaryResultText.textContent = '';
            primaryResultText.style.fontSize = '';
            latestResultRaw = '';
            resultBreakdown.innerHTML = '';
            resultBreakdown.classList.add('hidden');
            if (activeTab === 'coin') {
                flipCoinVisual(true, false);
            }
            return;
        }

        latestResultRaw = result.raw || result.primary;

        primaryResultText.classList.remove('animating');
        primaryResultText.classList.remove('result-pop');
        adjustPrimaryFontSize(result.primary);
        primaryResultText.textContent = result.primary;

        if (result.breakdown) {
            resultBreakdown.innerHTML = `<span>${escapeHtml(result.breakdown)}</span>`;
            resultBreakdown.classList.remove('hidden');
        } else {
            resultBreakdown.classList.add('hidden');
        }

        if (result.mode === 'color' && result.colorData) {
            currentColorData = result.colorData;
            const isPalette = Array.isArray(result.colorData);
            setColorSubmode(isPalette ? 'palette' : 'single');
            renderColorPreview();
        } else if (result.mode === 'coin' && result.isHeads !== undefined) {
            flipCoinVisual(result.isHeads, false);
        }
    }

    function cancelRollAnimation() {
        if (rollTimer) {
            clearTimeout(rollTimer);
            rollTimer = null;
        }
        isRolling = false;
        btnRoll.classList.remove('rolling');
        primaryResultText.classList.remove('animating');
    }

    function setActiveTab(tabKey) {
        if (!tabButtons[tabKey] || !modeViews[tabKey]) return;
        if (tabKey === activeTab && !isRolling) return;

        if (isRolling) {
            cancelRollAnimation();
        }

        activeTab = tabKey;

        Object.keys(tabButtons).forEach(key => {
            const btn = tabButtons[key];
            const isTarget = key === tabKey;
            btn.classList.toggle('active', isTarget);
            btn.setAttribute('aria-selected', isTarget ? 'true' : 'false');
        });

        Object.keys(modeViews).forEach(key => {
            modeViews[key].classList.toggle('hidden', key !== tabKey);
        });

        // Render this tab's last result (or emptiness if not rolled yet)
        renderTabResult(tabResults[tabKey]);

        // Persist active tab and settings
        saveSettingsToStorage();
    }

    Object.keys(tabButtons).forEach(key => {
        tabButtons[key].addEventListener('click', () => setActiveTab(key));
    });

    // =========================================================================
    // Mode 1: Numbers Logic (Clean: Min n to Max m)
    // =========================================================================
    function getNumbersConfig() {
        let min = parseFloat(numMin.value);
        let max = parseFloat(numMax.value);
        if (isNaN(min)) min = 1;
        if (isNaN(max)) max = 10;
        if (min > max) [min, max] = [max, min];

        let count = parseInt(numCount.value, 10);
        if (isNaN(count) || count < 1) count = 1;
        if (count > 100) count = 100;

        const unique = checkUnique.checked;
        const isDecimal = checkDecimals.checked;
        const sortType = numSort.value;

        return { min, max, count, unique, isDecimal, sortType };
    }

    function generateNumbersResult() {
        const { min, max, count, unique, isDecimal, sortType } = getNumbersConfig();

        if (isDecimal) {
            const scaledMin = Math.round(min * 100);
            const scaledMax = Math.round(max * 100);
            const possibleDecimals = scaledMax - scaledMin + 1;

            if (unique && count > possibleDecimals) {
                showToast(`Range only contains ${possibleDecimals} unique decimals!`);
                return null;
            }

            let results = [];
            if (unique) {
                if (count === 1) {
                    results = [cryptoRandomInt(scaledMin, scaledMax) / 100];
                } else if (possibleDecimals <= 2000) {
                    const pool = [];
                    for (let i = scaledMin; i <= scaledMax; i++) pool.push(i);
                    for (let i = 0; i < count; i++) {
                        const j = cryptoRandomInt(i, pool.length - 1);
                        const temp = pool[i];
                        pool[i] = pool[j];
                        pool[j] = temp;
                        results.push(pool[i] / 100);
                    }
                } else {
                    const seen = new Set();
                    while (seen.size < count) {
                        seen.add(cryptoRandomInt(scaledMin, scaledMax));
                    }
                    results = Array.from(seen).map(n => n / 100);
                }
            } else {
                for (let i = 0; i < count; i++) {
                    results.push(cryptoRandomInt(scaledMin, scaledMax) / 100);
                }
            }

            if (sortType === 'asc') results.sort((a, b) => a - b);
            if (sortType === 'desc') results.sort((a, b) => b - a);

            const displayStr = results.map(n => n.toFixed(2)).join(', ');
            return {
                primary: displayStr,
                raw: displayStr,
                breakdown: results.length > 1 ? `Count: ${results.length} • Min: ${Math.min(...results).toFixed(2)} • Max: ${Math.max(...results).toFixed(2)} • Sum: ${results.reduce((a, b) => a + b, 0).toFixed(2)}` : null,
                detailTitle: `${(scaledMin / 100).toFixed(2)} to ${(scaledMax / 100).toFixed(2)}`,
                mode: 'numbers'
            };
        }

        const intMin = Math.round(min);
        const intMax = Math.round(max);
        const possibleCount = intMax - intMin + 1;

        if (unique && count > possibleCount) {
            showToast(`Range only contains ${possibleCount} unique integers!`);
            return null;
        }

        let results = [];
        if (unique) {
            if (count === 1) {
                results = [cryptoRandomInt(intMin, intMax)];
            } else if (possibleCount <= 2000) {
                const pool = [];
                for (let i = intMin; i <= intMax; i++) pool.push(i);
                for (let i = 0; i < count; i++) {
                    const j = cryptoRandomInt(i, pool.length - 1);
                    const temp = pool[i];
                    pool[i] = pool[j];
                    pool[j] = temp;
                    results.push(pool[i]);
                }
            } else {
                const seen = new Set();
                while (seen.size < count) {
                    seen.add(cryptoRandomInt(intMin, intMax));
                }
                results = Array.from(seen);
            }
        } else {
            for (let i = 0; i < count; i++) {
                results.push(cryptoRandomInt(intMin, intMax));
            }
        }

        if (sortType === 'asc') results.sort((a, b) => a - b);
        if (sortType === 'desc') results.sort((a, b) => b - a);

        const displayStr = results.join(', ');
        return {
            primary: results.length === 1 ? String(results[0]) : results.join(', '),
            raw: displayStr,
            breakdown: results.length > 1 ? `Count: ${results.length} • Min: ${Math.min(...results)} • Max: ${Math.max(...results)} • Sum: ${results.reduce((a, b) => a + b, 0)}` : null,
            detailTitle: `${intMin} to ${intMax}`,
            mode: 'numbers'
        };
    }

    // =========================================================================
    // Mode 2: List / Phrases Logic (Clean without sample clutter)
    // =========================================================================
    function getListItems() {
        const text = listInput.value;
        if (!text.trim()) return [];

        let items = [];
        if (text.includes('\n')) {
            items = text.split('\n')
                .map(line => line.trim())
                .filter(line => line.length > 0);
        } else if (text.includes(',')) {
            items = text.split(',')
                .map(item => item.trim())
                .filter(item => item.length > 0);
        } else {
            items = [text.trim()];
        }
        return items;
    }

    function updateListCounter() {
        const items = getListItems();
        listItemsCount.textContent = `${items.length} ${items.length === 1 ? 'item' : 'items'}`;
    }

    listInput.addEventListener('input', () => {
        updateListCounter();
        saveSettingsToStorage();
    });

    btnListShuffle.addEventListener('click', () => {
        const items = getListItems();
        if (items.length <= 1) {
            showToast('Enter at least 2 items to shuffle');
            return;
        }
        const shuffled = cryptoShuffle(items);
        listInput.value = shuffled.join('\n');
        saveSettingsToStorage();
        showToast('List shuffled randomly');
    });

    btnListClear.addEventListener('click', () => {
        listInput.value = '';
        updateListCounter();
        saveSettingsToStorage();
        showToast('List cleared');
    });

    function generateListResult(isFinal = true) {
        const items = getListItems();
        if (items.length === 0) {
            if (isFinal) showToast('Please enter at least 1 item in the list!');
            return null;
        }

        let pickCount = parseInt(listPickCount.value, 10);
        if (isNaN(pickCount) || pickCount < 1) pickCount = 1;

        if (pickCount > items.length) {
            pickCount = items.length;
        }

        const shuffled = cryptoShuffle(items);
        const picked = shuffled.slice(0, pickCount);

        // If remove chosen is enabled and this is the final resolution, remove picked items from listInput
        if (isFinal && checkListRemove.checked) {
            const remaining = [...items];
            for (const item of picked) {
                const idx = remaining.indexOf(item);
                if (idx !== -1) {
                    remaining.splice(idx, 1);
                }
            }
            const separator = (!listInput.value.includes('\n') && listInput.value.includes(',')) ? ', ' : '\n';
            listInput.value = remaining.join(separator);
            updateListCounter();
            saveSettingsToStorage();
        }

        const primary = picked.length === 1 ? picked[0] : picked.join(', ');
        return {
            primary: primary,
            raw: picked.join(', '),
            breakdown: picked.length > 1 ? `Picked ${picked.length} of ${items.length} items` : `Picked 1 of ${items.length} items`,
            detailTitle: '',
            mode: 'list'
        };
    }

    // =========================================================================
    // Mode 3: Color Studio Logic
    // =========================================================================
    function hslToRgb(h, s, l) {
        h /= 360; s /= 100; l /= 100;
        let r, g, b;
        if (s === 0) {
            r = g = b = l;
        } else {
            const hue2rgb = (p, q, t) => {
                if (t < 0) t += 1;
                if (t > 1) t -= 1;
                if (t < 1/6) return p + (q - p) * 6 * t;
                if (t < 1/2) return q;
                if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            };
            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            const p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }
        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }

    function rgbToHex(r, g, b) {
        return '#' + [r, g, b].map(x => {
            const hex = x.toString(16);
            return hex.length === 1 ? '0' + hex : hex;
        }).join('').toUpperCase();
    }

    function getLuminance(r, g, b) {
        const a = [r, g, b].map(v => {
            v /= 255;
            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
        });
        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
    }

    function createColorObject(h, s, l) {
        const [r, g, b] = hslToRgb(h, s, l);
        const hex = rgbToHex(r, g, b);
        const luminance = getLuminance(r, g, b);
        const textColor = luminance > 0.4 ? '#0d1117' : '#ffffff';
        return {
            hex,
            rgb: `rgb(${r}, ${g}, ${b})`,
            hsl: `hsl(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%)`,
            textColor,
            r, g, b, h, s, l
        };
    }

    function generateRandomColor() {
        const h = cryptoRandomFloat() * 360;
        const s = 65 + cryptoRandomFloat() * 35;
        const l = 40 + cryptoRandomFloat() * 30;
        return createColorObject(h, s, l);
    }

    function generateColorPalette(type) {
        const baseH = cryptoRandomFloat() * 360;
        const colors = [];

        if (type === 'pastel') {
            for (let i = 0; i < 5; i++) {
                const h = (baseH + i * 45) % 360;
                colors.push(createColorObject(h, 60 + cryptoRandomFloat() * 15, 75 + cryptoRandomFloat() * 10));
            }
        } else if (type === 'monochrome') {
            for (let i = 0; i < 5; i++) {
                const l = 20 + i * 15;
                colors.push(createColorObject(baseH, 70, l));
            }
        } else if (type === 'complementary') {
            const compH = (baseH + 180) % 360;
            colors.push(createColorObject(baseH, 80, 50));
            colors.push(createColorObject(baseH, 60, 65));
            colors.push(createColorObject((baseH + 30) % 360, 70, 55));
            colors.push(createColorObject(compH, 80, 50));
            colors.push(createColorObject((compH + 25) % 360, 70, 60));
        } else if (type === 'triadic') {
            const h2 = (baseH + 120) % 360;
            const h3 = (baseH + 240) % 360;
            colors.push(createColorObject(baseH, 75, 52));
            colors.push(createColorObject(baseH, 60, 70));
            colors.push(createColorObject(h2, 75, 52));
            colors.push(createColorObject(h3, 75, 52));
            colors.push(createColorObject(h3, 60, 70));
        } else {
            // Random mix
            for (let i = 0; i < 5; i++) {
                colors.push(generateRandomColor());
            }
        }
        return colors;
    }

    function setColorSubmode(mode) {
        activeColorMode = mode;
        if (mode === 'palette') {
            btnColorPalette.classList.add('active');
            btnColorSingle.classList.remove('active');
            paletteTypeWrapper.classList.remove('hidden');
        } else {
            btnColorSingle.classList.add('active');
            btnColorPalette.classList.remove('active');
            paletteTypeWrapper.classList.add('hidden');
        }
        renderColorPreview();
    }

    btnColorSingle.addEventListener('click', () => {
        if (activeColorMode === 'single') return;
        setColorSubmode('single');
        saveSettingsToStorage();
        if (activeTab === 'colors') {
            executeRoll();
        }
    });

    btnColorPalette.addEventListener('click', () => {
        if (activeColorMode === 'palette') return;
        setColorSubmode('palette');
        saveSettingsToStorage();
        if (activeTab === 'colors') {
            executeRoll();
        }
    });

    selectPaletteType.addEventListener('change', () => {
        activePaletteType = selectPaletteType.value;
        saveSettingsToStorage();
        if (activeTab === 'colors' && activeColorMode === 'palette') {
            executeRoll();
        }
    });

    function renderColorPreview() {
        if (!currentColorData) return;
        colorPreviewContainer.innerHTML = '';

        if (activeColorMode === 'single') {
            const c = Array.isArray(currentColorData) ? currentColorData[0] : currentColorData;
            const card = document.createElement('div');
            card.className = 'single-color-card';
            card.style.backgroundColor = c.hex;
            card.style.color = c.textColor;
            card.title = 'Click to copy HEX code';

            card.innerHTML = `
                <span class="color-hex-main">${c.hex}</span>
                <div class="color-values-row">
                    <span class="color-code-pill">${c.rgb}</span>
                    <span class="color-code-pill">${c.hsl}</span>
                </div>
            `;

            card.addEventListener('click', () => {
                copyTextToClipboard(c.hex, `Copied ${c.hex}`);
            });

            colorPreviewContainer.appendChild(card);

            // Sync ambient background glow with generated color
            if (glowOrb1) glowOrb1.style.background = `radial-gradient(circle, ${c.hex} 0%, transparent 70%)`;
        } else {
            const colors = Array.isArray(currentColorData) ? currentColorData : generateColorPalette(activePaletteType);
            currentColorData = colors;

            const grid = document.createElement('div');
            grid.className = 'palette-grid';

            colors.forEach(col => {
                const swatch = document.createElement('div');
                swatch.className = 'palette-swatch';
                swatch.style.backgroundColor = col.hex;
                swatch.style.color = col.textColor;
                swatch.title = `Click to copy ${col.hex}`;

                swatch.innerHTML = `
                    <span class="palette-swatch-hex">${col.hex}</span>
                `;

                swatch.addEventListener('click', (e) => {
                    e.stopPropagation();
                    copyTextToClipboard(col.hex, `Copied ${col.hex}`);
                });

                grid.appendChild(swatch);
            });

            colorPreviewContainer.appendChild(grid);
        }
    }

    function generateColorResult(isRollAction = true) {
        if (activeColorMode === 'single') {
            const color = generateRandomColor();
            currentColorData = color;
            renderColorPreview();

            return {
                primary: color.hex,
                raw: `${color.hex}, ${color.rgb}, ${color.hsl}`,
                breakdown: `${color.rgb}, ${color.hsl}`,
                detailTitle: 'Single Color',
                mode: 'color',
                colorData: color
            };
        } else {
            const palette = generateColorPalette(activePaletteType);
            currentColorData = palette;
            renderColorPreview();

            const hexList = palette.map(c => c.hex).join(', ');
            return {
                primary: hexList,
                raw: hexList,
                breakdown: `5-Color Palette (${activePaletteType.toUpperCase()})`,
                detailTitle: `Color Palette (${activePaletteType})`,
                mode: 'color',
                colorData: palette
            };
        }
    }

    // =========================================================================
    // Mode 4: Dice Logic
    // =========================================================================
    function setDiceSides(sides) {
        activeDiceSides = sides;
        document.querySelectorAll('.dice-type-btn').forEach(b => {
            const s = parseInt(b.getAttribute('data-sides'), 10);
            b.classList.toggle('active', s === sides);
        });
    }

    document.querySelectorAll('.dice-type-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const sides = parseInt(btn.getAttribute('data-sides'), 10) || 6;
            setDiceSides(sides);
            saveSettingsToStorage();
        });
    });

    function generateDiceResult() {
        let count = parseInt(diceCount.value, 10);
        if (isNaN(count) || count < 1) count = 1;
        if (count > 12) count = 12;

        let mod = parseInt(diceModifier.value, 10);
        if (isNaN(mod)) mod = 0;

        const rolls = [];
        for (let i = 0; i < count; i++) {
            rolls.push(cryptoRandomInt(1, activeDiceSides));
        }

        const sum = rolls.reduce((a, b) => a + b, 0);
        const total = sum + mod;

        const modStr = mod > 0 ? ` + ${mod}` : (mod < 0 ? ` - ${Math.abs(mod)}` : '');
        const breakdownStr = count > 1 || mod !== 0
            ? `Rolls: [${rolls.join(', ')}]${modStr} = Total: ${total}`
            : `Single D${activeDiceSides}`;

        return {
            primary: String(total),
            raw: `${total} (${count}d${activeDiceSides}${modStr})`,
            breakdown: breakdownStr,
            detailTitle: `${count}d${activeDiceSides}${modStr}`,
            mode: 'dice'
        };
    }

    // =========================================================================
    // Mode 5: Coin Flip Logic
    // =========================================================================
    if (coinWrapper) {
        coinWrapper.addEventListener('click', () => {
            executeRoll();
        });
    }

    function flipCoinVisual(isHeads, animated = true) {
        if (!coinDisc || !coinWrapper) return;

        if (!animated) {
            coinRotationY = isHeads ? 0 : 180;
            coinDisc.style.transition = 'none';
            coinDisc.style.transform = `rotateY(${coinRotationY}deg)`;
            return;
        }

        const currentFacingHeads = (Math.round(coinRotationY / 180) % 2) === 0;
        let extra = 1800;
        if (isHeads) {
            extra += currentFacingHeads ? 0 : 180;
        } else {
            extra += currentFacingHeads ? 180 : 0;
        }
        coinRotationY += extra;

        coinDisc.style.transition = 'transform 0.65s cubic-bezier(0.18, 0.85, 0.3, 1.15)';
        coinDisc.style.transform = `rotateY(${coinRotationY}deg)`;

        coinWrapper.classList.remove('coin-tossing');
        void coinWrapper.offsetWidth;
        coinWrapper.classList.add('coin-tossing');
    }

    function generateCoinResult() {
        const isHeads = cryptoRandomFloat() < 0.5;
        const label = isHeads ? 'Heads' : 'Tails';

        return {
            primary: label,
            raw: label,
            breakdown: '',
            detailTitle: '',
            mode: 'coin',
            isHeads: isHeads
        };
    }

    // =========================================================================
    // Core Roll Engine & The 6-Tick Animated Deceleration
    // =========================================================================
    function getCandidateResult(tabKey = activeTab, isFinal = true) {
        switch (tabKey) {
            case 'numbers': return generateNumbersResult();
            case 'list': return generateListResult(isFinal);
            case 'colors': return generateColorResult(true);
            case 'dice': return generateDiceResult();
            case 'coin': return generateCoinResult();
            default: return generateNumbersResult();
        }
    }

    function executeRoll() {
        if (isRolling) return;

        const rollTab = activeTab;

        // Verify validity before starting animation without side effects
        const initialCheck = getCandidateResult(rollTab, false);
        if (!initialCheck) return;

        isRolling = true;
        btnRoll.classList.add('rolling');

        if (!isAnimated) {
            // Instant generation (Animated OFF)
            try {
                const finalResult = getCandidateResult(rollTab, true);
                if (rollTab === 'coin' && finalResult.isHeads !== undefined) {
                    flipCoinVisual(finalResult.isHeads, false);
                }
                displayFinalResult(finalResult, rollTab);
            } catch (err) {
                console.error("Roll execution error:", err);
            } finally {
                isRolling = false;
                btnRoll.classList.remove('rolling');
            }
            return;
        }

        // =====================================================================
        // ANIMATED MODE: Exactly 6 rapid intermediate random ticks, then 7th final
        // =====================================================================
        const intermediateDelays = [45, 60, 80, 105, 135, 175]; // Easing deceleration
        let tick = 0;

        let targetCoinResult = null;
        if (rollTab === 'coin') {
            targetCoinResult = generateCoinResult();
            flipCoinVisual(targetCoinResult.isHeads, true);
        }

        function runNextTick() {
            // If user switched away or roll was cancelled, stop immediately
            if (!isRolling || activeTab !== rollTab) {
                cancelRollAnimation();
                return;
            }

            if (tick < 6) {
                // Ticks 1 to 6: Intermediate random values (non-final)
                if (targetCoinResult) {
                    primaryResultText.textContent = 'Flipping...';
                    primaryResultText.classList.add('animating');
                    playTickSound();
                } else {
                    const intermediate = getCandidateResult(rollTab, false);
                    if (intermediate) {
                        adjustPrimaryFontSize(intermediate.primary);
                        primaryResultText.textContent = intermediate.primary;
                        primaryResultText.classList.add('animating');
                        playTickSound();
                    }
                }
                const delay = intermediateDelays[tick];
                tick++;
                rollTimer = setTimeout(runNextTick, delay);
            } else {
                // Tick 7: Final Chosen Value Lock-in!
                try {
                    const finalResult = targetCoinResult || getCandidateResult(rollTab, true);
                    displayFinalResult(finalResult, rollTab);
                } catch (err) {
                    console.error("Roll execution error:", err);
                } finally {
                    isRolling = false;
                    rollTimer = null;
                    btnRoll.classList.remove('rolling');
                }
            }
        }

        runNextTick();
    }

    function displayFinalResult(result, targetTab = activeTab) {
        if (!result) return;

        tabResults[targetTab] = result;
        saveTabResultsToStorage();

        // Only update current DOM result stage if the user is still on targetTab
        if (activeTab === targetTab) {
            latestResultRaw = result.raw || result.primary;

            primaryResultText.classList.remove('animating');
            primaryResultText.classList.remove('result-pop');
            adjustPrimaryFontSize(result.primary);
            void primaryResultText.offsetWidth; // Trigger reflow for CSS keyframe
            primaryResultText.classList.add('result-pop');
            primaryResultText.textContent = result.primary;

            if (result.breakdown) {
                resultBreakdown.innerHTML = `<span>${escapeHtml(result.breakdown)}</span>`;
                resultBreakdown.classList.remove('hidden');
            } else {
                resultBreakdown.classList.add('hidden');
            }
        }

        // Play resolution chime
        playSuccessSound();

        // Increment roll counter
        totalRollsCount++;
        statTotalRolls.textContent = String(totalRollsCount);
        try {
            localStorage.setItem(STORAGE_KEY_TOTAL_ROLLS, String(totalRollsCount));
        } catch (e) {}

        // Add to history
        addHistoryItem(result);
    }

    // =========================================================================
    // History Management (Time-Calculator Style, No Timestamps)
    // =========================================================================
    function addHistoryItem(result) {
        const item = {
            id: Date.now() + '-' + Math.random().toString(36).substr(2, 4),
            mode: result.mode,
            title: result.detailTitle,
            value: result.primary,
            raw: result.raw || result.primary
        };

        historyList.unshift(item);
        if (historyList.length > 80) {
            historyList.pop();
        }

        saveHistoryToStorage();
        renderHistoryList();
    }

    function saveHistoryToStorage() {
        try {
            localStorage.setItem(STORAGE_KEY_HISTORY, JSON.stringify(historyList));
        } catch (e) {}
    }

    function renderHistoryList() {
        if (statCount) statCount.textContent = String(historyList.length);

        if (historyList.length === 0) {
            historyEmpty.classList.remove('hidden');
            historyItemsList.classList.add('hidden');
            historyItemsList.innerHTML = '';
            return;
        }

        historyEmpty.classList.add('hidden');
        historyItemsList.classList.remove('hidden');
        historyItemsList.innerHTML = '';

        historyList.forEach((item, index) => {
            const row = document.createElement('div');
            row.className = 'saved-item-row';

            const badgeClass = `badge-${escapeHtml(item.mode)}`;
            let displayTitle = item.title || '';
            if (item.mode === 'list' && displayTitle.toLowerCase().includes('list pick')) {
                displayTitle = '';
            }
            if (item.mode === 'numbers') {
                displayTitle = displayTitle.replace(/^Range:\s*/i, '').replace(/\s*\(Decimals\)/i, '').replace('–', 'to').trim();
            }
            const escapedTitle = escapeHtml(displayTitle);
            const titleHtml = escapedTitle ? `<span class="item-title" title="${escapedTitle}">${escapedTitle}</span>` : '';
            
            let valueHtml = escapeHtml(item.value);
            if (item.mode === 'color' && typeof item.value === 'string') {
                const hexMatches = item.value.match(/#[0-9a-fA-F]{3,8}/g);
                if (hexMatches && hexMatches.length > 0) {
                    valueHtml = hexMatches.map(hex => 
                        `<span class="color-item-chip"><span class="color-swatch-mini" style="background-color: ${hex}"></span>${escapeHtml(hex)}</span>`
                    ).join(', ');
                }
            }
            const escapedRawValue = escapeHtml(item.value);

            row.innerHTML = `
                <div class="item-row-header">
                    <div class="item-meta">
                        <span class="item-num">#${historyList.length - index}</span>
                        <span class="item-badge ${badgeClass}">${escapeHtml(item.mode)}</span>
                        ${titleHtml}
                    </div>
                    <div class="item-actions">
                        <button type="button" class="item-btn item-btn-copy" title="Copy result">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                            </svg>
                        </button>
                        <button type="button" class="item-btn item-btn-remove" title="Remove from list">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="item-row-body">
                    <div class="item-value" title="${escapedRawValue}">${valueHtml}</div>
                </div>
            `;

            // Click row to copy
            row.addEventListener('click', (e) => {
                if (e.target.closest('.item-btn-remove')) return;
                copyTextToClipboard(item.raw, `Copied ${item.raw}`);
            });

            row.querySelector('.item-btn-copy').addEventListener('click', (e) => {
                e.stopPropagation();
                copyTextToClipboard(item.raw, `Copied ${item.raw}`);
            });

            row.querySelector('.item-btn-remove').addEventListener('click', (e) => {
                e.stopPropagation();
                historyList = historyList.filter(h => h.id !== item.id);
                saveHistoryToStorage();
                renderHistoryList();
            });

            historyItemsList.appendChild(row);
        });
    }

    btnClearHistory.addEventListener('click', () => {
        if (historyList.length === 0) return;
        historyList = [];
        saveHistoryToStorage();
        renderHistoryList();
        showToast('History cleared');
    });

    btnCopyHistory.addEventListener('click', () => {
        if (historyList.length === 0) {
            showToast('History is empty');
            return;
        }
        const text = historyList.map(h => `(${h.mode.toUpperCase()}) ${h.value}`).join('\n');
        copyTextToClipboard(text, 'All history copied to clipboard');
        if (copySummaryText) {
            const prev = copySummaryText.textContent;
            copySummaryText.textContent = 'Copied!';
            setTimeout(() => { copySummaryText.textContent = prev; }, 1500);
        }
    });

    // =========================================================================
    // Copy To Clipboard & Toast Helper
    // =========================================================================
    function copyTextToClipboard(text, successMsg, onCopied) {
        if (!text) return;
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text)
                .then(() => {
                    if (successMsg) showToast(successMsg);
                    if (typeof onCopied === 'function') onCopied();
                })
                .catch(() => fallbackCopy(text, successMsg, onCopied));
        } else {
            fallbackCopy(text, successMsg, onCopied);
        }
    }

    function fallbackCopy(text, successMsg, onCopied) {
        const ta = document.createElement('textarea');
        ta.value = text;
        ta.style.position = 'fixed';
        ta.style.opacity = '0';
        document.body.appendChild(ta);
        ta.select();
        try {
            document.execCommand('copy');
            if (successMsg) showToast(successMsg);
            if (typeof onCopied === 'function') onCopied();
        } catch (e) {
            showToast('Unable to copy');
        }
        document.body.removeChild(ta);
    }

    function triggerCopiedBadge() {
        if (copyBtnLabel) {
            const prev = copyBtnLabel.textContent;
            copyBtnLabel.textContent = 'Copied!';
            setTimeout(() => {
                copyBtnLabel.textContent = prev;
            }, 1200);
        }
    }

    function showToast(msg) {
        while (toastContainer.children.length >= 3) {
            toastContainer.firstElementChild.remove();
        }

        const toast = document.createElement('div');
        toast.className = 'toast';
        toast.textContent = msg;
        toastContainer.appendChild(toast);

        setTimeout(() => {
            if (toast.parentNode === toastContainer) {
                toast.remove();
            }
        }, 2200);
    }

    btnCopyResult.addEventListener('click', () => {
        if (!latestResultRaw) {
            showToast('No result to copy yet');
            return;
        }
        copyTextToClipboard(latestResultRaw, 'Result copied to clipboard', triggerCopiedBadge);
    });

    // =========================================================================
    // Global Switches (Animated & Sound)
    // =========================================================================
    toggleAnimated.addEventListener('change', () => {
        isAnimated = toggleAnimated.checked;
        try {
            localStorage.setItem(STORAGE_KEY_ANIMATED, isAnimated ? '1' : '0');
        } catch (e) {}
    });

    btnToggleSound.addEventListener('click', () => {
        isSoundEnabled = !isSoundEnabled;
        updateSoundUI();
        try {
            localStorage.setItem(STORAGE_KEY_SOUND, isSoundEnabled ? '1' : '0');
        } catch (e) {}
        showToast(`Sound ${isSoundEnabled ? 'On' : 'Muted'}`);
        if (isSoundEnabled) playTickSound();
    });

    function updateSoundUI() {
        if (isSoundEnabled) {
            iconSoundOn.classList.remove('hidden');
            iconSoundOff.classList.add('hidden');
            btnToggleSound.classList.add('active');
        } else {
            iconSoundOn.classList.add('hidden');
            iconSoundOff.classList.remove('hidden');
            btnToggleSound.classList.remove('active');
        }
    }

    // Auto-save setting changes on inputs
    numMin.addEventListener('input', saveSettingsToStorage);
    numMax.addEventListener('input', saveSettingsToStorage);
    numCount.addEventListener('input', saveSettingsToStorage);
    checkUnique.addEventListener('change', saveSettingsToStorage);
    checkDecimals.addEventListener('change', () => {
        if (checkDecimals.checked) {
            numMin.step = 'any';
            numMax.step = 'any';
        } else {
            numMin.step = '1';
            numMax.step = '1';
        }
        saveSettingsToStorage();
    });
    numSort.addEventListener('change', saveSettingsToStorage);

    listPickCount.addEventListener('input', saveSettingsToStorage);
    checkListRemove.addEventListener('change', saveSettingsToStorage);

    diceCount.addEventListener('input', saveSettingsToStorage);
    diceModifier.addEventListener('input', saveSettingsToStorage);

    // Primary Roll Button
    btnRoll.addEventListener('click', executeRoll);

    // Keyboard Shortcuts: Space or Enter to Roll (when not interacting with controls)
    window.addEventListener('keydown', (e) => {
        if (e.code !== 'Space' && e.key !== 'Enter') return;

        const activeEl = document.activeElement;
        const activeTag = activeEl ? activeEl.tagName.toLowerCase() : '';

        // If user is focused on a button or link, let native keyboard click activate it
        if (activeTag === 'button' || activeTag === 'a' || (activeEl && activeEl.getAttribute('role') === 'button')) {
            return;
        }

        // If user is in textarea or select, allow normal typing and navigation
        if (activeTag === 'textarea' || activeTag === 'select') {
            return;
        }

        // If in an input field:
        if (activeTag === 'input') {
            const inputType = activeEl.type ? activeEl.type.toLowerCase() : 'text';
            // Allow Enter to trigger roll from number/text inputs
            if (e.key === 'Enter' && inputType !== 'checkbox' && inputType !== 'radio') {
                e.preventDefault();
                executeRoll();
            }
            return;
        }

        // Space or Enter anywhere else on the page triggers roll
        e.preventDefault();
        executeRoll();
    });

    // =========================================================================
    // Persistence: Settings & Per-Tab Results
    // =========================================================================
    function saveTabResultsToStorage() {
        try {
            localStorage.setItem(STORAGE_KEY_TAB_RESULTS, JSON.stringify(tabResults));
        } catch (e) {}
    }

    function loadTabResultsFromStorage() {
        try {
            const raw = localStorage.getItem(STORAGE_KEY_TAB_RESULTS);
            if (raw) {
                const parsed = JSON.parse(raw);
                if (parsed && typeof parsed === 'object') {
                    tabResults = {
                        numbers: parsed.numbers || null,
                        list: parsed.list || null,
                        colors: parsed.colors || null,
                        dice: parsed.dice || null,
                        coin: parsed.coin || null
                    };
                }
            }
        } catch (e) {}
    }

    function saveSettingsToStorage() {
        const settings = {
            activeTab,
            numbers: {
                min: numMin.value,
                max: numMax.value,
                count: numCount.value,
                unique: checkUnique.checked,
                decimals: checkDecimals.checked,
                sort: numSort.value
            },
            list: {
                items: listInput.value,
                pickCount: listPickCount.value,
                removeChosen: checkListRemove.checked
            },
            colors: {
                mode: activeColorMode,
                paletteType: selectPaletteType.value
            },
            dice: {
                sides: activeDiceSides,
                count: diceCount.value,
                modifier: diceModifier.value
            }
        };
        try {
            localStorage.setItem(STORAGE_KEY_SETTINGS, JSON.stringify(settings));
        } catch (e) {}
    }

    function loadSettingsFromStorage() {
        try {
            const raw = localStorage.getItem(STORAGE_KEY_SETTINGS);
            if (!raw) return false;
            const s = JSON.parse(raw);
            if (!s || typeof s !== 'object') return false;

            // Numbers
            if (s.numbers) {
                if (s.numbers.min !== undefined) numMin.value = s.numbers.min;
                if (s.numbers.max !== undefined) numMax.value = s.numbers.max;
                if (s.numbers.count !== undefined) numCount.value = s.numbers.count;
                if (s.numbers.unique !== undefined) checkUnique.checked = !!s.numbers.unique;
                if (s.numbers.decimals !== undefined) {
                    checkDecimals.checked = !!s.numbers.decimals;
                    numMin.step = checkDecimals.checked ? 'any' : '1';
                    numMax.step = checkDecimals.checked ? 'any' : '1';
                }
                if (s.numbers.sort !== undefined) numSort.value = s.numbers.sort;
            }

            // List
            let listLoaded = false;
            if (s.list) {
                if (s.list.items !== undefined) {
                    listInput.value = s.list.items;
                    listLoaded = true;
                }
                if (s.list.pickCount !== undefined) listPickCount.value = s.list.pickCount;
                if (s.list.removeChosen !== undefined) checkListRemove.checked = !!s.list.removeChosen;
                updateListCounter();
            }

            // Colors
            if (s.colors) {
                if (s.colors.mode === 'palette' || s.colors.mode === 'single') {
                    setColorSubmode(s.colors.mode);
                }
                if (s.colors.paletteType && selectPaletteType) {
                    selectPaletteType.value = s.colors.paletteType;
                    activePaletteType = s.colors.paletteType;
                }
            }

            // Dice
            if (s.dice) {
                if (s.dice.sides !== undefined) {
                    setDiceSides(parseInt(s.dice.sides, 10) || 6);
                }
                if (s.dice.count !== undefined) diceCount.value = s.dice.count;
                if (s.dice.modifier !== undefined) diceModifier.value = s.dice.modifier;
            }

            // Active Tab
            if (s.activeTab && tabButtons[s.activeTab]) {
                activeTab = s.activeTab;
            }

            return listLoaded;
        } catch (e) {
            return false;
        }
    }

    // =========================================================================
    // Initialization & State Restoration
    // =========================================================================
    function init() {
        // Restore Animated state
        try {
            const savedAnim = localStorage.getItem(STORAGE_KEY_ANIMATED);
            if (savedAnim !== null) {
                isAnimated = savedAnim === '1';
                toggleAnimated.checked = isAnimated;
            }
        } catch (e) {}

        // Restore Sound state
        try {
            const savedSound = localStorage.getItem(STORAGE_KEY_SOUND);
            if (savedSound !== null) {
                isSoundEnabled = savedSound === '1';
            }
        } catch (e) {}
        updateSoundUI();

        // Restore Total Rolls Count
        try {
            const savedRolls = localStorage.getItem(STORAGE_KEY_TOTAL_ROLLS);
            if (savedRolls) {
                totalRollsCount = parseInt(savedRolls, 10) || 0;
                statTotalRolls.textContent = String(totalRollsCount);
            }
        } catch (e) {}

        // Restore History
        try {
            const savedHist = localStorage.getItem(STORAGE_KEY_HISTORY);
            if (savedHist) {
                historyList = JSON.parse(savedHist);
                if (!Array.isArray(historyList)) historyList = [];
            }
        } catch (e) {}
        renderHistoryList();

        // Restore Settings
        const listLoaded = loadSettingsFromStorage();

        // Restore Per-tab Results
        loadTabResultsFromStorage();

        // Initialize default list only on initial launch when no saved list exists
        if (!listLoaded && !listInput.value.trim()) {
            listInput.value = 'Option 1\nOption 2\nOption 3';
        }
        updateListCounter();

        // Set active tab (which also renders tab's last result or emptiness)
        setActiveTab(activeTab);

        // Register Service Worker for PWA offline capabilities
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('./sw.js', { scope: './' })
                    .then((reg) => {
                        console.log('PWA Service Worker registered:', reg.scope);
                        // Check for service worker updates immediately
                        reg.update();
                    })
                    .catch((err) => {
                        console.warn('PWA Service Worker registration failed:', err);
                    });
            });
        }
    }

    init();
});