<!DOCTYPE html>
<html lang="es">
    <head>
        <title>{{ $game_title }}</title>
        <link rel="shortcut icon" href="favicon.ico">
        <link rel="stylesheet" type="text/css" href="{{ $css_path }}default.css">
        <link rel="stylesheet" type="text/css" href="{{ $css_path }}redesign.css">
        <link rel="stylesheet" type="text/css" href="{{ $css_path }}formate.css">
        <link rel="stylesheet" type="text/css" href="{{ $skin_path }}formate.css">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="generator" content="XG Proyect {{ $version }}" />
        <script type="text/javascript" src="{{ $js_path }}overlib-min.js"></script>
        {!! $meta_tags !!}
    </head>
    <body>
        <a href="#content" class="sr-only sr-only-focusable">Saltar al contenido principal</a>
        <a href="javascript:void(0)" id="trigger-acc-menu" class="sr-only sr-only-focusable">Menú de accesibilidad (Ctrl+M)</a>
        <a href="javascript:void(0)" id="trigger-help-menu" class="sr-only sr-only-focusable">Ayuda de teclas (Ctrl+H)</a>

        <!-- MENUS DE ACCESIBILIDAD -->
        <div id="acc-menu-overlay" role="dialog" style="display: none; position: fixed; top: 10%; left: 25%; width: 50%; background: #0c1a30; border: 3px solid #ff8c00; color: #fff; padding: 20px; z-index: 99999; box-shadow: 0 0 15px rgba(0,0,0,0.8); font-family: Tahoma, sans-serif; border-radius: 8px;" aria-modal="true" aria-labelledby="acc-menu-title">
            <h2 id="acc-menu-title" tabindex="-1" style="margin-top: 0; color: #ff8c00; border-bottom: 1px solid #415680; padding-bottom: 10px; font-size: 18px; outline: none;">Menú de Accesibilidad</h2>
            
            <div style="margin: 15px 0; background: #162a4a; padding: 10px; border-radius: 6px; border: 1px solid #415680;">
                <label for="acc-menu-input" style="font-weight: bold; color: #ff8c00; font-size: 14px; display: block; margin-bottom: 8px;">Pulsa Ctrl + Letra de atajo para ir a esa sección (ej. Ctrl + V para Visión General, Ctrl + G para Galaxia):</label>
                <input type="text" id="acc-menu-input" maxlength="1" style="background: #344566; border: 2px solid #ff8c00; color: #fff; padding: 6px 10px; width: 60px; text-align: center; font-size: 18px; font-weight: bold; border-radius: 4px; outline: none;" autocomplete="off" />
            </div>

            <p style="font-size: 12px; color: #a0a0a0; margin-bottom: 15px;">Listado de atajos rápidos disponibles (mantén pulsado Ctrl + Letra):</p>
            <ul style="list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 14px;">
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + V</kbd> - Visión general</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + I</kbd> - Imperio</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + R</kbd> - Recursos</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + C</kbd> - Configuración de recursos</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + E</kbd> - Estación espacial</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + M</kbd> - Mercader</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + T</kbd> - Investigación/Tecnología</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + H</kbd> - Hangar (Construcción de naves)</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + D</kbd> - Defensa</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + F</kbd> - Flota</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + G</kbd> - Galaxia</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + S</kbd> - Alianza</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + O</kbd> - Oficiales</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + A</kbd> - Administración</li>
            </ul>
            <div style="margin-top: 20px; text-align: right;">
                <button id="close-acc-menu" style="background: #344566; border: 1px solid #415680; color: #fff; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: bold;">Cerrar (Esc)</button>
            </div>
        </div>

        <div id="help-menu-overlay" role="dialog" style="display: none; position: fixed; top: 15%; left: 25%; width: 50%; background: #0c1a30; border: 3px solid #ff8c00; color: #fff; padding: 20px; z-index: 99999; box-shadow: 0 0 15px rgba(0,0,0,0.8); font-family: Tahoma, sans-serif; border-radius: 8px;" aria-modal="true" aria-labelledby="help-menu-title">
            <h2 id="help-menu-title" tabindex="-1" style="margin-top: 0; color: #ff8c00; border-bottom: 1px solid #415680; padding-bottom: 10px; font-size: 18px; outline: none;">Ayuda de Teclado y Atajos</h2>
            <p style="font-size: 12px; color: #a0a0a0; margin-bottom: 15px;">Listado de combinaciones globales disponibles en el juego. Pulsa ESC para salir.</p>
            <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px;">
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + M</kbd> - Abre el Menú de Accesibilidad con accesos rápidos directos a las páginas principales.</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Ctrl + H</kbd> - Abre esta ventana de Ayuda de Teclado.</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Tabulador</kbd> - Navega secuencialmente a través de todos los enlaces y elementos interactivos del juego.</li>
                <li><kbd style="background: #344566; padding: 2px 6px; border-radius: 3px; border: 1px solid #415680; font-weight: bold; color: #ff8c00;">Escape</kbd> - Cierra cualquier ventana modal o menú de accesibilidad que esté abierto.</li>
            </ul>
            <div style="margin-top: 20px; text-align: right;">
                <button id="close-help-menu" style="background: #344566; border: 1px solid #415680; color: #fff; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: bold;">Cerrar (Esc)</button>
            </div>
        </div>

        <script type="text/javascript">
        (function() {
            var lastActiveElement = null;

            // Global Keydown Listener for opening/closing modals
            document.addEventListener('keydown', function(e) {
                var isCtrl = e.ctrlKey || e.metaKey;
                
                // Ctrl + M: Toggle Accessibility Menu
                if (isCtrl && e.key.toLowerCase() === 'm') {
                    var accMenu = document.getElementById('acc-menu-overlay');
                    if (accMenu && accMenu.style.display === 'block') {
                        // Let the menu's keydown handler handle it instead of toggling!
                        return;
                    }
                    e.preventDefault();
                    toggleAccMenu();
                }
                
                // Ctrl + H: Toggle Help Menu
                if (isCtrl && e.key.toLowerCase() === 'h') {
                    var accMenu = document.getElementById('acc-menu-overlay');
                    if (accMenu && accMenu.style.display === 'block') {
                        // Let the menu's keydown handler handle it instead of toggling!
                        return;
                    }
                    e.preventDefault();
                    toggleHelpMenu();
                }
                
                // Escape: Close menus
                if (e.key === 'Escape') {
                    var accMenu = document.getElementById('acc-menu-overlay');
                    var helpMenu = document.getElementById('help-menu-overlay');
                    if ((accMenu && accMenu.style.display === 'block') || (helpMenu && helpMenu.style.display === 'block')) {
                        e.preventDefault();
                        closeAllMenus();
                    }
                }
            });

            // Focus containment (prevent tabbing/clicking out of the modal)
            document.addEventListener('focusin', function(e) {
                var accMenu = document.getElementById('acc-menu-overlay');
                var helpMenu = document.getElementById('help-menu-overlay');
                
                if (accMenu && accMenu.style.display === 'block') {
                    if (!accMenu.contains(e.target)) {
                        e.stopImmediatePropagation();
                        var inputEl = document.getElementById('acc-menu-input');
                        if (inputEl) inputEl.focus();
                    }
                } else if (helpMenu && helpMenu.style.display === 'block') {
                    if (!helpMenu.contains(e.target)) {
                        e.stopImmediatePropagation();
                        var helpTitle = document.getElementById('help-menu-title');
                        if (helpTitle) helpTitle.focus();
                    }
                }
            });

            function toggleAccMenu() {
                var accMenu = document.getElementById('acc-menu-overlay');
                if (accMenu) {
                    if (accMenu.style.display === 'none') {
                        closeAllMenus();
                        lastActiveElement = document.activeElement;
                        accMenu.style.display = 'block';
                        
                        // Force a layout pass and wait a bit before focusing the input
                        // to ensure the screen reader switches to Focus Mode.
                        var inputEl = document.getElementById('acc-menu-input');
                        if (inputEl) {
                            inputEl.value = '';
                            setTimeout(function() {
                                inputEl.focus();
                            }, 80);
                        }
                    } else {
                        closeAllMenus();
                    }
                }
            }

            function toggleHelpMenu() {
                var helpMenu = document.getElementById('help-menu-overlay');
                if (helpMenu) {
                    if (helpMenu.style.display === 'none') {
                        closeAllMenus();
                        lastActiveElement = document.activeElement;
                        helpMenu.style.display = 'block';
                        
                        // Focus the title with a small timeout for screen readers
                        var helpTitle = document.getElementById('help-menu-title');
                        if (helpTitle) {
                            setTimeout(function() {
                                helpTitle.focus();
                            }, 80);
                        }
                    } else {
                        closeAllMenus();
                    }
                }
            }

            function closeAllMenus() {
                var accMenu = document.getElementById('acc-menu-overlay');
                var helpMenu = document.getElementById('help-menu-overlay');
                if (accMenu) accMenu.style.display = 'none';
                if (helpMenu) helpMenu.style.display = 'none';
                if (lastActiveElement) {
                    lastActiveElement.focus();
                    lastActiveElement = null;
                }
            }

            function setupFocusTrap(container, firstEl, lastEl) {
                container.addEventListener('keydown', function(e) {
                    if (e.key === 'Tab') {
                        if (e.shiftKey) {
                            if (document.activeElement === firstEl) {
                                e.preventDefault();
                                lastEl.focus();
                            } else if (document.activeElement === lastEl && firstEl.getAttribute('tabindex') === '-1') {
                                e.preventDefault();
                                firstEl.focus();
                            }
                        } else {
                            if (document.activeElement === lastEl) {
                                e.preventDefault();
                                firstEl.focus();
                            } else if (document.activeElement === firstEl && firstEl.getAttribute('tabindex') === '-1') {
                                e.preventDefault();
                                lastEl.focus();
                            }
                        }
                    }
                });
            }

            var bindEvents = function() {
                var triggerAcc = document.getElementById('trigger-acc-menu');
                if (triggerAcc) {
                    triggerAcc.addEventListener('click', function(e) {
                        e.preventDefault();
                        toggleAccMenu();
                    });
                }
                
                var triggerHelp = document.getElementById('trigger-help-menu');
                if (triggerHelp) {
                    triggerHelp.addEventListener('click', function(e) {
                        e.preventDefault();
                        toggleHelpMenu();
                    });
                }

                var closeAcc = document.getElementById('close-acc-menu');
                if (closeAcc) {
                    closeAcc.addEventListener('click', function(e) {
                        e.preventDefault();
                        closeAllMenus();
                    });
                }

                var closeHelp = document.getElementById('close-help-menu');
                if (closeHelp) {
                    closeHelp.addEventListener('click', function(e) {
                        e.preventDefault();
                        closeAllMenus();
                    });
                }

                // Set up focus trapping
                var accOverlay = document.getElementById('acc-menu-overlay');
                var accInput = document.getElementById('acc-menu-input');
                var closeAccBtn = document.getElementById('close-acc-menu');
                if (accOverlay && accInput && closeAccBtn) {
                    setupFocusTrap(accOverlay, accInput, closeAccBtn);

                    // Hotkey routing listener inside the Accessibility Menu
                    accOverlay.addEventListener('keydown', function(e) {
                        var isCtrl = e.ctrlKey || e.metaKey;
                        // We require Ctrl to be held down for hotkeys
                        if (isCtrl && e.key.length === 1) {
                            var key = e.key.toLowerCase();
                            var links = {
                                'v': 'game.php?page=overview',
                                'i': 'game.php?page=empire',
                                'r': 'game.php?page=resources',
                                'c': 'game.php?page=resourceSettings',
                                'e': 'game.php?page=station',
                                'm': 'game.php?page=traderOverview',
                                't': 'game.php?page=research',
                                'h': 'game.php?page=shipyard',
                                'd': 'game.php?page=defense',
                                'f': 'game.php?page=fleetTable',
                                'g': 'game.php?page=galaxy',
                                's': 'game.php?page=alliance',
                                'o': 'game.php?page=officier',
                                'a': 'admin.php'
                            };
                            if (links[key]) {
                                e.preventDefault();
                                e.stopPropagation(); // Stop propagation to avoid reopening/toggling the menus
                                var dest = links[key];
                                closeAllMenus();
                                window.location.href = dest;
                            } else {
                                // Block other Ctrl + keys
                                e.preventDefault();
                            }
                        } else if (!isCtrl && !e.shiftKey && e.key.length === 1) {
                            // Block any other lowercase character input to keep the input empty
                            e.preventDefault();
                        }
                    });
                }

                var helpOverlay = document.getElementById('help-menu-overlay');
                var helpTitle = document.getElementById('help-menu-title');
                var closeHelpBtn = document.getElementById('close-help-menu');
                if (helpOverlay && helpTitle && closeHelpBtn) {
                    setupFocusTrap(helpOverlay, helpTitle, closeHelpBtn);
                }
            };

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', bindEvents);
            } else {
                bindEvents();
            }
        })();
        </script>
    </body>
</html>