// Enhanced connection status handler
function updateConnectionStatus() {
    const isOnline = navigator.onLine;
    const refreshBtn = document.querySelector('button');
    
    if (isOnline) {
        // Create confetti effect when connection is restored
        import('https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js')
            .then(() => {
                confetti({
                    particleCount: 100,
                    spread: 70,
                    origin: { y: 0.6 }
                });
                
                // Update UI
                const icon = document.querySelector('[data-feather="wifi-off"]');
                icon.setAttribute('data-feather', 'wifi');
                feather.replace();
                
                // Change button text temporarily
                refreshBtn.innerHTML = `<i data-feather="check" class="w-6 h-6"></i> Connection Restored!`;
                feather.replace();
                
                setTimeout(() => {
                    refreshBtn.innerHTML = `<i data-feather="refresh-cw" class="w-6 h-6"></i> Refresh Adventure`;
                    feather.replace();
                }, 3000);
            });
    }
}

// Add button click handler
document.querySelector('button').addEventListener('click', () => {
    // Add ripple effect
    const ripple = document.createElement('span');
    ripple.classList.add('ripple');
    this.appendChild(ripple);
    
    setTimeout(() => {
        ripple.remove();
        updateConnectionStatus();
    }, 300);
});

// Listen for connection changes
window.addEventListener('online', updateConnectionStatus);
window.addEventListener('offline', () => {
    const icon = document.querySelector('[data-feather="wifi"]');
    if (icon) {
        icon.setAttribute('data-feather', 'wifi-off');
        feather.replace();
    }
});

// Initial check
updateConnectionStatus();

// Add ripple effect styles dynamically
const style = document.createElement('style');
style.textContent = `
    .ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(255,255,255,0.7);
        transform: scale(0);
        animation: ripple 600ms linear;
    }
    
    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);