document.addEventListener('DOMContentLoaded', () => {
    const aboutLink = document.getElementById('about');
    const controlsLink = document.getElementById('controls');

    const aboutModal = document.getElementById('about-modal');
    const controlsModal = document.getElementById('controls-modal');

    const closeButtons = document.querySelectorAll('.close-modal');

    function showModal(modal) {
        // Hide any other open modals first
        hideAllModals();
        modal.classList.add('show');
    }

    function hideAllModals() {
        document.querySelectorAll('.modal.show').forEach(m => m.classList.remove('show'));
    }

    aboutLink.addEventListener('click', (e) => {
        e.stopPropagation();
        showModal(aboutModal);
    });

    controlsLink.addEventListener('click', (e) => {
        e.stopPropagation();
        showModal(controlsModal);
    });

    closeButtons.forEach(button => {
        button.addEventListener('click', () => {
            hideAllModals();
        });
    });

    // Optional: Close modal if clicking outside of it
    document.addEventListener('click', (e) => {
        if (!e.target.closest('.modal')) {
            hideAllModals();
        }
    });
});