<!DOCTYPE html>
<html lang="en" data-theme="dragon">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

    <!-- Apply saved theme immediately to prevent flash -->
    <script>
        (function () {
            var theme = localStorage.getItem('mahjong-theme') || 'dragon';
            document.documentElement.setAttribute('data-theme', theme);

            var bgColors = {
                'dragon': '#1c0c0c',
                'dark': '#1f2937',
                'midnight': '#18181b',
                'red': '#7f1d1d'
            };
            var bgColor = bgColors[theme] || '#1c0c0c';
            document.documentElement.style.backgroundColor = bgColor;

            window.updateThemeLogo = function (currentTheme) {
                // Logo and favicon are theme-independent
            };

            document.addEventListener('DOMContentLoaded', function () {
                document.body.setAttribute('data-theme', theme);
                document.body.style.backgroundColor = bgColor;
                window.updateThemeLogo(theme);
            });
        })();
    </script>

    <!-- Critical CSS: inline styles for header + loading to prevent FOUC -->
    <style id="critical-css">
        html, body {
            margin: 0;
            background-color: var(--color-bg-primary, #1c0c0c);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: var(--color-text-primary, #e0e1dd);
        }

        /* Header - must render correctly before external CSS loads */
        .mahjong-site-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.6rem 1rem;
            background: linear-gradient(135deg, var(--color-nav-start, #3a0e0e) 0%, var(--color-nav-end, #1c0606) 100%);
            border-bottom: 1px solid var(--color-nav-border, #b34700);
            position: sticky;
            top: 0;
            z-index: 100;
            box-sizing: border-box;
        }
        .site-brand { display: flex; align-items: center; gap: 0.5rem; }
        .site-logo { width: 32px; height: 32px; }
        .site-name { font-size: 1.15rem; font-weight: 700; color: #fff; }
        .site-nav { display: flex; align-items: center; gap: 0.5rem; }
        .nav-btn, .daily-challenge-btn {
            display: inline-flex; align-items: center; gap: 0.4rem;
            padding: 0.4rem 0.8rem; border: 1px solid rgba(255,255,255,0.25);
            border-radius: 6px; background: rgba(255,255,255,0.1);
            color: #fff; font-size: 0.85rem; font-weight: 600;
            cursor: pointer; text-decoration: none;
        }
        .nav-link { display: inline-flex; align-items: center; gap: 0.35rem;
            padding: 0.4rem 0.6rem; color: rgba(255,255,255,0.85);
            text-decoration: none; font-size: 0.85rem; border-radius: 6px; }
        .solitaire-logo { width: 20px; height: 20px; }
        .dropdown-menu { display: none; }

        /* Game area + loading indicator */
        .game-area { background-color: var(--color-bg-primary, #1c0c0c); min-height: 60vh; }
        .loading-indicator {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; width: 100%; height: 100%;
            min-height: 300px; gap: 1.5rem;
        }
        .loading-grid {
            display: grid; grid-template-columns: repeat(4, 1fr);
            gap: 4px; width: 72px; height: 72px;
        }
        .loading-cell {
            background: var(--color-nav-border, #b34700);
            border-radius: 2px;
            animation: loadPulse 1.2s ease-in-out infinite;
        }
        .loading-cell:nth-child(1) { animation-delay: 0s; }
        .loading-cell:nth-child(2) { animation-delay: 0.1s; }
        .loading-cell:nth-child(3) { animation-delay: 0.15s; }
        .loading-cell:nth-child(4) { animation-delay: 0.2s; }
        .loading-cell:nth-child(5) { animation-delay: 0.3s; }
        .loading-cell:nth-child(6) { animation-delay: 0.4s; }
        .loading-cell:nth-child(7) { animation-delay: 0.5s; }
        .loading-cell:nth-child(8) { animation-delay: 0.6s; }
        @keyframes loadPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
        .loading-indicator .loading-text {
            font-size: 0.9rem; font-weight: 500;
            color: var(--color-text-muted, #94a3b8);
        }

        /* Hide below-fold content until CSS loads */
        .game-content { display: none; }

        /* Hide language dropdown on mobile (available via More menu instead) */
        @media (max-width: 767px) {
            #language-dropdown { display: none; }
        }

        /* Mobile header */
        @media (max-width: 480px) {
            .mahjong-site-header { padding: 0.5rem 0.75rem; }
            .site-name { font-size: 1rem; }
            .nav-btn span, .daily-challenge-btn span, .dropdown-arrow { display: none; }
            .site-nav .nav-link span { display: none; }
        }

        /* Featured Layouts Section */
        .mahjong-featured-layouts {
            max-width: 1100px;
            margin: 2rem auto;
            padding: 0 1.5rem;
        }

        .featured-header {
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .featured-header h2 {
            font-size: 1.6rem;
            font-weight: 700;
            color: #f5f5f5;
            margin: 0 0 0.5rem 0;
            font-family: 'Poppins', sans-serif;
        }

        .featured-header p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1rem;
            margin: 0;
        }

        .layouts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 1rem;
            max-width: 900px;
            margin: 0 auto;
        }

        .layout-card {
            position: relative;
            background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 12px;
            padding: 1.25rem 1rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #f5f5f5;
        }

        .layout-card:hover {
            background: linear-gradient(145deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
            border-color: rgba(255,255,255,0.25);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        }

        .layout-card .layout-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            color: #c41e3a;
        }

        .layout-card h3 {
            font-size: 1rem;
            font-weight: 600;
            margin: 0 0 0.25rem 0;
        }

        .layout-card p {
            font-size: 0.75rem;
            color: rgba(255,255,255,0.6);
            margin: 0;
        }

        .layout-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #c41e3a;
            color: white;
            font-size: 0.65rem;
            font-weight: 600;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            text-transform: uppercase;
        }

        /* Features Section */
        .mahjong-features {
            max-width: 900px;
            margin: 2rem auto;
            padding: 1.5rem;
            background: rgba(0,0,0,0.2);
            border-radius: 16px;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }

        .feature-item {
            text-align: center;
            padding: 1rem 0.5rem;
        }

        .feature-item i {
            font-size: 1.5rem;
            color: #c41e3a;
            margin-bottom: 0.5rem;
        }

        .feature-item h4 {
            font-size: 0.9rem;
            font-weight: 600;
            color: #f5f5f5;
            margin: 0 0 0.25rem 0;
        }

        .feature-item p {
            font-size: 0.75rem;
            color: rgba(255,255,255,0.6);
            margin: 0;
        }

        @media (max-width: 768px) {
            .layouts-grid {
                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
                gap: 0.75rem;
            }

            .layout-card {
                padding: 1rem 0.75rem;
            }

            .layout-card .layout-icon {
                font-size: 1.5rem;
            }

            .layout-card h3 {
                font-size: 0.9rem;
            }

            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .featured-header h2 {
                font-size: 1.3rem;
            }
        }

        @media (max-width: 480px) {
            .layouts-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .layout-card p {
                display: none;
            }

            .features-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.5rem;
            }

            .feature-item {
                padding: 0.75rem 0.25rem;
            }

            .feature-item i {
                font-size: 1.25rem;
            }

            .feature-item h4 {
                font-size: 0.8rem;
            }
        }
    </style>

    <!-- Base URL for SPA routing -->
    <base href="/">

    <!-- Primary Meta Tags -->
    <title>Free Mahjong Solitaire Online | Classic Tile Matching - Try Mahjong</title>
    <meta name="description"
        content="Play free Mahjong Solitaire online with 7 unique layouts. Match tiles, clear the board, track your streaks. No ads, no downloads, no sign-ups.">
    <meta name="author" content="Try Mahjong">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://trymahjong.com/">

    <!-- Hreflang Tags for Multi-Language Support -->
    <link rel="alternate" hreflang="en" href="https://trymahjong.com/">
    <link rel="alternate" hreflang="es" href="https://trymahjong.com/es/">
    <link rel="alternate" hreflang="fr" href="https://trymahjong.com/fr/">
    <link rel="alternate" hreflang="nl" href="https://trymahjong.com/nl/">
    <link rel="alternate" hreflang="de" href="https://trymahjong.com/de/">
    <link rel="alternate" hreflang="sv" href="https://trymahjong.com/sv/">
    <link rel="alternate" hreflang="da" href="https://trymahjong.com/da/">
    <link rel="alternate" hreflang="nb" href="https://trymahjong.com/nb/">
    <link rel="alternate" hreflang="pt" href="https://trymahjong.com/pt/">
    <link rel="alternate" hreflang="it" href="https://trymahjong.com/it/">
    <link rel="alternate" hreflang="ru" href="https://trymahjong.com/ru/">
    <link rel="alternate" hreflang="tr" href="https://trymahjong.com/tr/">
    <link rel="alternate" hreflang="ja" href="https://trymahjong.com/ja/">
    <link rel="alternate" hreflang="ko" href="https://trymahjong.com/ko/">
    <link rel="alternate" hreflang="ar" href="https://trymahjong.com/ar/">
    <link rel="alternate" hreflang="hi" href="https://trymahjong.com/hi/">
    <link rel="alternate" hreflang="pl" href="https://trymahjong.com/pl/">
    <link rel="alternate" hreflang="id" href="https://trymahjong.com/id/">
    <link rel="alternate" hreflang="th" href="https://trymahjong.com/th/">
    <link rel="alternate" hreflang="x-default" href="https://trymahjong.com/">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://trymahjong.com/">
    <meta property="og:title" content="Free Mahjong Solitaire Online | Classic Tile Matching">
    <meta property="og:description"
        content="Play free Mahjong Solitaire online with 7 unique layouts. Match tiles, clear the board, track your streaks. No ads!">
    <meta property="og:image" content="https://trymahjong.com/trymahjong.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="Mahjong Solitaire game screenshot">
    <meta property="og:site_name" content="Try Mahjong">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://trymahjong.com/">
    <meta property="twitter:title" content="Free Mahjong Solitaire Online | Classic Tile Matching">
    <meta property="twitter:description"
        content="Play free Mahjong Solitaire online with 7 unique layouts. Match tiles, clear the board, track your streaks.">
    <meta property="twitter:image" content="https://trymahjong.com/trymahjong.png">
    <meta property="twitter:image:alt" content="Mahjong Solitaire game screenshot">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@600;700&display=swap"
        rel="stylesheet">

    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#3a0e0e">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Try Mahjong">

    <!-- Preload critical assets for fast loading -->
    <link rel="modulepreload" href="/assets/main-DMm5i85i.js">
    <link rel="modulepreload" href="/assets/router-DrZp_fPC.js">
    <link rel="modulepreload" href="/assets/app-DXfd5hfS.js">
    <link rel="modulepreload" href="/assets/i18n-bJmuRIq1.js">
    <link rel="modulepreload" href="/assets/utils-CUU4WxBA.js">
    <link rel="modulepreload" href="/assets/mahjong-Daw7USJP.js">
    <link rel="modulepreload" href="/assets/EventManager-BL7Auksz.js">
    <link rel="modulepreload" href="/assets/index-CEMP2a-m.js">
    <link rel="modulepreload" href="data:text/javascript;base64,Ly8gU3RvcmFnZSBtYW5hZ2VyIGZvciBiZXN0IHRpbWVzIGFuZCBnYW1lIGRhdGEKY29uc3QgU3RvcmFnZSA9IHsKICAgIC8vIFRyeSBsb2NhbFN0b3JhZ2UgZmlyc3QsIGZhbGxiYWNrIHRvIGNvb2tpZXMKICAgIHNldChrZXksIHZhbHVlLCBkYXlzID0gMzY1KSB7CiAgICAgICAgdHJ5IHsKICAgICAgICAgICAgbG9jYWxTdG9yYWdlLnNldEl0ZW0oa2V5LCBKU09OLnN0cmluZ2lmeSh2YWx1ZSkpOwogICAgICAgIH0gY2F0Y2ggKGUpIHsKICAgICAgICAgICAgLy8gRmFsbGJhY2sgdG8gY29va2llCiAgICAgICAgICAgIGNvbnN0IGV4cGlyZXMgPSBuZXcgRGF0ZShEYXRlLm5vdygpICsgZGF5cyAqIDg2NGU1KS50b1VUQ1N0cmluZygpOwogICAgICAgICAgICBkb2N1bWVudC5jb29raWUgPSBgJHtrZXl9PSR7ZW5jb2RlVVJJQ29tcG9uZW50KEpTT04uc3RyaW5naWZ5KHZhbHVlKSl9OyBleHBpcmVzPSR7ZXhwaXJlc307IHBhdGg9LzsgU2FtZVNpdGU9TGF4YDsKICAgICAgICB9CiAgICB9LAoKICAgIGdldChrZXkpIHsKICAgICAgICB0cnkgewogICAgICAgICAgICBjb25zdCBpdGVtID0gbG9jYWxTdG9yYWdlLmdldEl0ZW0oa2V5KTsKICAgICAgICAgICAgcmV0dXJuIGl0ZW0gPyBKU09OLnBhcnNlKGl0ZW0pIDogbnVsbDsKICAgICAgICB9IGNhdGNoIChlKSB7CiAgICAgICAgICAgIC8vIEZhbGxiYWNrIHRvIGNvb2tpZQogICAgICAgICAgICBjb25zdCBtYXRjaCA9IGRvY3VtZW50LmNvb2tpZS5tYXRjaChuZXcgUmVnRXhwKCcoXnwgKScgKyBrZXkgKyAnPShbXjtdKyknKSk7CiAgICAgICAgICAgIGlmIChtYXRjaCkgewogICAgICAgICAgICAgICAgdHJ5IHsKICAgICAgICAgICAgICAgICAgICByZXR1cm4gSlNPTi5wYXJzZShkZWNvZGVVUklDb21wb25lbnQobWF0Y2hbMl0pKTsKICAgICAgICAgICAgICAgIH0gY2F0Y2ggKGVycikgewogICAgICAgICAgICAgICAgICAgIHJldHVybiBudWxsOwogICAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHJldHVybiBudWxsOwogICAgICAgIH0KICAgIH0sCgogICAgLy8gR2V0IHJhdyBzdHJpbmcgdmFsdWUgKG5vIEpTT04gcGFyc2luZykKICAgIGdldFN0cmluZyhrZXksIGRlZmF1bHRWYWx1ZSA9IG51bGwpIHsKICAgICAgICB0cnkgewogICAgICAgICAgICBjb25zdCBpdGVtID0gbG9jYWxTdG9yYWdlLmdldEl0ZW0oa2V5KTsKICAgICAgICAgICAgcmV0dXJuIGl0ZW0gIT09IG51bGwgPyBpdGVtIDogZGVmYXVsdFZhbHVlOwogICAgICAgIH0gY2F0Y2ggKGUpIHsKICAgICAgICAgICAgLy8gRmFsbGJhY2sgdG8gY29va2llCiAgICAgICAgICAgIGNvbnN0IG1hdGNoID0gZG9jdW1lbnQuY29va2llLm1hdGNoKG5ldyBSZWdFeHAoJyhefCApJyArIGtleSArICc9KFteO10rKScpKTsKICAgICAgICAgICAgcmV0dXJuIG1hdGNoID8gZGVjb2RlVVJJQ29tcG9uZW50KG1hdGNoWzJdKSA6IGRlZmF1bHRWYWx1ZTsKICAgICAgICB9CiAgICB9LAoKICAgIC8vIFNldCByYXcgc3RyaW5nIHZhbHVlIChubyBKU09OIHN0cmluZ2lmaWNhdGlvbikKICAgIHNldFN0cmluZyhrZXksIHZhbHVlLCBkYXlzID0gMzY1KSB7CiAgICAgICAgdHJ5IHsKICAgICAgICAgICAgbG9jYWxTdG9yYWdlLnNldEl0ZW0oa2V5LCB2YWx1ZSk7CiAgICAgICAgfSBjYXRjaCAoZSkgewogICAgICAgICAgICAvLyBGYWxsYmFjayB0byBjb29raWUKICAgICAgICAgICAgY29uc3QgZXhwaXJlcyA9IG5ldyBEYXRlKERhdGUubm93KCkgKyBkYXlzICogODY0ZTUpLnRvVVRDU3RyaW5nKCk7CiAgICAgICAgICAgIGRvY3VtZW50LmNvb2tpZSA9IGAke2tleX09JHtlbmNvZGVVUklDb21wb25lbnQodmFsdWUpfTsgZXhwaXJlcz0ke2V4cGlyZXN9OyBwYXRoPS87IFNhbWVTaXRlPUxheGA7CiAgICAgICAgfQogICAgfSwKCiAgICAvLyBHZXQgbnVtYmVyIHZhbHVlCiAgICBnZXROdW1iZXIoa2V5LCBkZWZhdWx0VmFsdWUgPSAwKSB7CiAgICAgICAgY29uc3QgdmFsdWUgPSB0aGlzLmdldFN0cmluZyhrZXkpOwogICAgICAgIGlmICh2YWx1ZSA9PT0gbnVsbCkgcmV0dXJuIGRlZmF1bHRWYWx1ZTsKICAgICAgICBjb25zdCBudW0gPSBOdW1iZXIodmFsdWUpOwogICAgICAgIHJldHVybiBpc05hTihudW0pID8gZGVmYXVsdFZhbHVlIDogbnVtOwogICAgfSwKCiAgICAvLyBHZXQgYm9vbGVhbiB2YWx1ZQogICAgZ2V0Qm9vbGVhbihrZXksIGRlZmF1bHRWYWx1ZSA9IGZhbHNlKSB7CiAgICAgICAgY29uc3QgdmFsdWUgPSB0aGlzLmdldFN0cmluZyhrZXkpOwogICAgICAgIGlmICh2YWx1ZSA9PT0gbnVsbCkgcmV0dXJuIGRlZmF1bHRWYWx1ZTsKICAgICAgICByZXR1cm4gdmFsdWUgPT09ICd0cnVlJzsKICAgIH0sCgogICAgLy8gR2V0IG9iamVjdCB2YWx1ZSAod2l0aCBKU09OIHBhcnNpbmcpCiAgICBnZXRPYmplY3Qoa2V5LCBkZWZhdWx0VmFsdWUgPSBudWxsKSB7CiAgICAgICAgcmV0dXJuIHRoaXMuZ2V0KGtleSkgfHwgZGVmYXVsdFZhbHVlOwogICAgfSwKCiAgICAvLyBSZW1vdmUgYW4gaXRlbQogICAgcmVtb3ZlKGtleSkgewogICAgICAgIHRyeSB7CiAgICAgICAgICAgIGxvY2FsU3RvcmFnZS5yZW1vdmVJdGVtKGtleSk7CiAgICAgICAgfSBjYXRjaCAoZSkgewogICAgICAgICAgICAvLyBSZW1vdmUgZnJvbSBjb29raWUKICAgICAgICAgICAgZG9jdW1lbnQuY29va2llID0gYCR7a2V5fT07IGV4cGlyZXM9VGh1LCAwMSBKYW4gMTk3MCAwMDowMDowMCBVVEM7IHBhdGg9LztgOwogICAgICAgIH0KICAgIH0sCgogICAgLy8gQ2xlYXIgYWxsIGl0ZW1zICh1c2Ugd2l0aCBjYXV0aW9uKQogICAgY2xlYXIoKSB7CiAgICAgICAgdHJ5IHsKICAgICAgICAgICAgbG9jYWxTdG9yYWdlLmNsZWFyKCk7CiAgICAgICAgfSBjYXRjaCAoZSkgewogICAgICAgICAgICAvLyBDYW5ub3QgY2xlYXIgYWxsIGNvb2tpZXMgZWFzaWx5LCBzbyBkbyBub3RoaW5nCiAgICAgICAgfQogICAgfSwKCiAgICBnZXRCZXN0VGltZShnYW1lKSB7CiAgICAgICAgY29uc3QgZGF0YSA9IHRoaXMuZ2V0KGBiZXN0VGltZV8ke2dhbWV9YCk7CiAgICAgICAgcmV0dXJuIGRhdGE/LnRpbWUgPz8gbnVsbDsKICAgIH0sCgogICAgc2V0QmVzdFRpbWUoZ2FtZSwgdGltZSkgewogICAgICAgIHRoaXMuc2V0KGBiZXN0VGltZV8ke2dhbWV9YCwgeyB0aW1lLCBkYXRlOiBEYXRlLm5vdygpIH0pOwogICAgfSwKCiAgICBjaGVja0FuZFVwZGF0ZUJlc3RUaW1lKGdhbWUsIHRpbWUpIHsKICAgICAgICBjb25zdCBjdXJyZW50QmVzdCA9IHRoaXMuZ2V0QmVzdFRpbWUoZ2FtZSk7CiAgICAgICAgaWYgKGN1cnJlbnRCZXN0ID09PSBudWxsIHx8IHRpbWUgPCBjdXJyZW50QmVzdCkgewogICAgICAgICAgICB0aGlzLnNldEJlc3RUaW1lKGdhbWUsIHRpbWUpOwogICAgICAgICAgICByZXR1cm4gdHJ1ZTsgLy8gTmV3IHJlY29yZAogICAgICAgIH0KICAgICAgICByZXR1cm4gZmFsc2U7CiAgICB9Cn07CgovLyBFUzYgbW9kdWxlIGV4cG9ydApleHBvcnQgZGVmYXVsdCBTdG9yYWdlOwo=">
    <link rel="modulepreload" href="/assets/UnifiedStatsManager-GpQQm4nG.js">
    <link rel="modulepreload" href="/assets/gameRelationships-D9TQh6OO.js">

    <!-- Stylesheets -->

    <!-- Font Awesome Icons (deferred to prevent render blocking) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" media="print" onload="this.media='all';"
        id="font-awesome-css">

    <!-- Font Awesome font-display override (after CSS loads) -->
    <script>
        document.getElementById('font-awesome-css').addEventListener('load', function () {
            const style = document.createElement('style');
            style.textContent = '@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:swap;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2) format("woff2")}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:swap;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff2) format("woff2")}';
            document.head.appendChild(style);
        });
    </script>

    <!-- Structured Data for SEO -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "Try Mahjong",
        "description": "Free online Mahjong Solitaire with 7 unique layouts and daily challenges",
        "url": "https://trymahjong.com",
        "applicationCategory": "GameApplication",
        "operatingSystem": "Any",
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD"
        },
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "4.7",
            "ratingCount": "850"
        }
    }
    </script>
  <script type="module" crossorigin src="/js/main-BFFnPVOs.js"></script>
  <link rel="modulepreload" crossorigin href="/js/stats-Bo2vwcN3.js">
  <link rel="modulepreload" crossorigin href="/js/overlays-K-SBji8g.js">
  <link rel="modulepreload" crossorigin href="/js/daily-challenge-DTXvChe0.js">
  <link rel="modulepreload" crossorigin href="/js/vendor-pLvt0g6t.js">
  <link rel="modulepreload" crossorigin href="/js/ui-modules-CKaqUHNH.js">
  <link rel="stylesheet" crossorigin href="/assets/main-BvTQ338k.css">
<link rel="modulepreload" crossorigin href="/js/klondike-BqFlSPlF.js">
</head>

<body data-game="mahjong">

    <!-- Site Header -->
    <header class="mahjong-site-header">
        <div class="site-brand">
            <img src="/logo.webp" alt="Try Mahjong" class="site-logo" width="32" height="32" id="site-logo">
            <span class="site-name">Try Mahjong</span>
            <!-- Layout Dropdown - Next to brand -->
            <div class="nav-dropdown" id="layout-dropdown">
                <button class="nav-btn dropdown-toggle" id="layout-btn" title="Choose Layout">
                    <i class="fas fa-plus"></i>
                    <span data-i18n="nav.newGame">New Game</span>
                    <i class="fas fa-chevron-down dropdown-arrow"></i>
                </button>
                <div class="dropdown-menu" style="max-height: 400px; overflow-y: auto;">
                    <button class="dropdown-item" data-layout="turtle" data-i18n="mahjong.layouts.turtle">Turtle (Classic)</button>
                    <button class="dropdown-item" data-layout="altar" data-i18n="mahjong.layouts.altar">Altar</button>
                    <button class="dropdown-item" data-layout="arena" data-i18n="mahjong.layouts.arena">Arena</button>
                    <button class="dropdown-item" data-layout="arrow" data-i18n="mahjong.layouts.arrow">Arrow</button>
                    <button class="dropdown-item" data-layout="balance" data-i18n="mahjong.layouts.balance">Balance</button>
                    <button class="dropdown-item" data-layout="bat" data-i18n="mahjong.layouts.bat">Bat</button>
                    <button class="dropdown-item" data-layout="bug" data-i18n="mahjong.layouts.bug">Bug</button>
                    <button class="dropdown-item" data-layout="cat" data-i18n="mahjong.layouts.cat">Cat</button>
                    <button class="dropdown-item" data-layout="checkered" data-i18n="mahjong.layouts.checkered">Checkered</button>
                    <button class="dropdown-item" data-layout="chip" data-i18n="mahjong.layouts.chip">Chip</button>
                    <button class="dropdown-item" data-layout="columns" data-i18n="mahjong.layouts.columns">Columns</button>
                    <button class="dropdown-item" data-layout="crab" data-i18n="mahjong.layouts.crab">Crab</button>
                    <button class="dropdown-item" data-layout="dragon" data-i18n="mahjong.layouts.dragon">Dragon</button>
                    <button class="dropdown-item" data-layout="eagle" data-i18n="mahjong.layouts.eagle">Eagle</button>
                    <button class="dropdown-item" data-layout="enterprise" data-i18n="mahjong.layouts.enterprise">Enterprise</button>
                    <button class="dropdown-item" data-layout="flowers" data-i18n="mahjong.layouts.flowers">Flowers</button>
                    <button class="dropdown-item" data-layout="future" data-i18n="mahjong.layouts.future">Future</button>
                    <button class="dropdown-item" data-layout="garden" data-i18n="mahjong.layouts.garden">Garden</button>
                    <button class="dropdown-item" data-layout="glade" data-i18n="mahjong.layouts.glade">Glade</button>
                    <button class="dropdown-item" data-layout="helios" data-i18n="mahjong.layouts.helios">Helios</button>
                    <button class="dropdown-item" data-layout="innercircle" data-i18n="mahjong.layouts.innercircle">Inner Circle</button>
                    <button class="dropdown-item" data-layout="km" data-i18n="mahjong.layouts.km">KM</button>
                    <button class="dropdown-item" data-layout="maya" data-i18n="mahjong.layouts.maya">Maya</button>
                    <button class="dropdown-item" data-layout="mesh" data-i18n="mahjong.layouts.mesh">Mesh</button>
                    <button class="dropdown-item" data-layout="moth" data-i18n="mahjong.layouts.moth">Moth</button>
                    <button class="dropdown-item" data-layout="order" data-i18n="mahjong.layouts.order">Order</button>
                    <button class="dropdown-item" data-layout="pattern" data-i18n="mahjong.layouts.pattern">Pattern</button>
                    <button class="dropdown-item" data-layout="pirates" data-i18n="mahjong.layouts.pirates">Pirates</button>
                    <button class="dropdown-item" data-layout="rocket" data-i18n="mahjong.layouts.rocket">Rocket</button>
                    <button class="dropdown-item" data-layout="shield" data-i18n="mahjong.layouts.shield">Shield</button>
                    <button class="dropdown-item" data-layout="spider" data-i18n="mahjong.layouts.spider">Spider</button>
                    <button class="dropdown-item" data-layout="squares" data-i18n="mahjong.layouts.squares">Squares</button>
                    <button class="dropdown-item" data-layout="squaring" data-i18n="mahjong.layouts.squaring">Squaring</button>
                    <button class="dropdown-item" data-layout="stairs" data-i18n="mahjong.layouts.stairs">Stairs</button>
                    <button class="dropdown-item" data-layout="temple" data-i18n="mahjong.layouts.temple">Temple</button>
                </div>
            </div>
            <!-- Daily Challenge Button -->
            <button class="nav-btn daily-challenge-btn" id="daily-challenge-btn" title="Daily Mahjong Challenge">
                <i class="fas fa-calendar-day"></i>
                <span data-i18n="mahjong.dailyChallenge">Daily Challenge</span>
            </button>
        </div>
        <nav class="site-nav">
            <a href="https://trysolitaire.com" class="nav-link solitaire-link" title="Play Solitaire">
                <img src="https://trysolitaire.com/logo.webp" alt="TrySolitaire" class="solitaire-logo" width="20"
                    height="20">
                <span>Solitaire</span>
            </a>
            <a href="https://try-sudoku.com" class="nav-link" title="Play Sudoku">
                <i class="fas fa-th"></i>
                <span>Sudoku</span>
            </a>
            <!-- Language Switcher Dropdown (hidden on mobile, available via More menu there) -->
            <div class="nav-dropdown" id="language-dropdown">
                <button class="nav-btn dropdown-toggle" id="language-btn" title="Change Language">
                    <i class="fas fa-globe"></i>
                </button>
                <div class="dropdown-menu language-menu">
                    <button class="dropdown-item language-option" data-lang="en">English</button>
                    <button class="dropdown-item language-option" data-lang="es">Español</button>
                    <button class="dropdown-item language-option" data-lang="fr">Français</button>
                    <button class="dropdown-item language-option" data-lang="nl">Nederlands</button>
                    <button class="dropdown-item language-option" data-lang="de">Deutsch</button>
                    <button class="dropdown-item language-option" data-lang="sv">Svenska</button>
                    <button class="dropdown-item language-option" data-lang="da">Dansk</button>
                    <button class="dropdown-item language-option" data-lang="nb">Norsk</button>
                    <button class="dropdown-item language-option" data-lang="pt">Português</button>
                    <button class="dropdown-item language-option" data-lang="it">Italiano</button>
                    <button class="dropdown-item language-option" data-lang="ru">Русский</button>
                    <button class="dropdown-item language-option" data-lang="tr">Türkçe</button>
                    <button class="dropdown-item language-option" data-lang="ja">日本語</button>
                    <button class="dropdown-item language-option" data-lang="ko">한국어</button>
                    <button class="dropdown-item language-option" data-lang="ar">العربية</button>
                    <button class="dropdown-item language-option" data-lang="hi">हिन्दी</button>
                    <button class="dropdown-item language-option" data-lang="pl">Polski</button>
                    <button class="dropdown-item language-option" data-lang="id">Bahasa Indonesia</button>
                    <button class="dropdown-item language-option" data-lang="th">ไทย</button>
                </div>
            </div>
            <button class="nav-btn settings-btn" id="mahjong-settings-btn" title="Settings">
                <i class="fas fa-cog"></i>
            </button>
        </nav>
    </header>

    <!-- Game Container - same structure as trysolitaire.com -->
    <div class="game-container">
        <!-- Game Zone: Contains game area and overlay for alignment -->
        <div class="game-zone">
        <!-- Main Game Area -->
        <main id="game-area" class="game-area" role="main" aria-label="Mahjong Solitaire game board">
            <!-- Game content loaded dynamically -->
            <div class="loading-indicator">
                <div class="loading-grid">
                    <div class="loading-cell"></div>
                    <div class="loading-cell"></div>
                    <div class="loading-cell"></div>
                    <div class="loading-cell"></div>
                    <div class="loading-cell"></div>
                    <div class="loading-cell"></div>
                    <div class="loading-cell"></div>
                    <div class="loading-cell"></div>
                </div>
                <span class="loading-text">Loading tiles...</span>
            </div>
        </main>

        <!-- Game Info Overlay - Outside game-area so it doesn't get cleared by render() -->
        <div class="game-info-overlay" id="game-info-overlay">
            <!-- Left: Time -->
            <div class="info-item time-item timer-group">
                <span class="time-value-row">
                    <span class="info-value" id="timer">00:00</span>
                    <button class="pause-timer-btn" id="pause-timer-btn" title="Pause timer">
                        <i class="fas fa-pause pause-icon"></i>
                        <i class="fas fa-play play-icon" style="display:none;"></i>
                    </button>
                </span>
                <span class="btn-sublabel" data-i18n="stats.time">Time</span>
            </div>

            <!-- Center elements -->
            <div class="center-items">
                <!-- Moves/Matches -->
                <div class="info-item vertical-item">
                    <span class="info-value" id="current-moves">0</span>
                    <span class="info-sublabel" data-i18n="mahjong.matches">Matches</span>
                </div>

                <!-- Tiles Remaining -->
                <div class="info-item vertical-item" id="stock-display">
                    <span class="info-value" id="stock-count">144</span>
                    <span class="info-sublabel" data-i18n="mahjong.tiles">Tiles</span>
                </div>

                <!-- Hint -->
                <button class="info-item info-btn hint-btn" id="hint-btn" title="Show hint">
                    <i class="fas fa-lightbulb"></i>
                    <span class="btn-sublabel" data-i18n="nav.hint">Hint</span>
                </button>

                <!-- Undo -->
                <button class="info-item info-btn undo-btn-overlay" id="undo-btn" title="Undo last move">
                    <i class="fas fa-undo-alt btn-icon"></i>
                    <span class="btn-label" data-i18n="nav.undo">Undo</span>
                    <span class="btn-sublabel" data-i18n="nav.undo">Undo</span>
                </button>

                <!-- Three-dot menu (mobile only, hidden on desktop) -->
                <button class="info-item info-btn more-menu-btn" id="more-menu-btn" title="More options">
                    <i class="fas fa-ellipsis-v"></i>
                    <span class="btn-sublabel">More</span>
                </button>

                <!-- Shuffles -->
                <div class="info-item vertical-item" id="shuffle-display">
                    <span class="info-value" id="shuffle-count">5</span>
                    <span class="info-sublabel" data-i18n="mahjong.shuffles">Shuffles</span>
                </div>

                <!-- Points -->
                <div class="info-item points-item">
                    <span class="points-label"><span data-i18n="mahjong.pointsLabel">Points:</span> <span id="overlay-score">0</span></span>
                    <span class="btn-sublabel" data-i18n="stats.score">Score</span>
                </div>
            </div>
        </div>
        </div><!-- /.game-zone -->
    </div><!-- /.game-container -->

    <!-- Featured Layouts Section -->
    <section class="mahjong-featured-layouts" aria-label="Choose a Mahjong Layout">
        <div class="featured-header">
            <h2 data-i18n="mahjong.chooseLayout">Choose Your Layout</h2>
            <p data-i18n="mahjong.layoutsDescription">35 unique Mahjong layouts to master. Match tiles, clear the board, track your streaks!</p>
        </div>
        <div class="layouts-grid">
            <button class="layout-card" data-layout="turtle"><h3 data-i18n="mahjong.layouts.turtle">Turtle</h3><span class="layout-badge popular" data-i18n="mahjong.classic">Classic</span></button>
            <button class="layout-card" data-layout="altar"><h3 data-i18n="mahjong.layouts.altar">Altar</h3></button>
            <button class="layout-card" data-layout="arena"><h3 data-i18n="mahjong.layouts.arena">Arena</h3></button>
            <button class="layout-card" data-layout="arrow"><h3 data-i18n="mahjong.layouts.arrow">Arrow</h3></button>
            <button class="layout-card" data-layout="balance"><h3 data-i18n="mahjong.layouts.balance">Balance</h3></button>
            <button class="layout-card" data-layout="bat"><h3 data-i18n="mahjong.layouts.bat">Bat</h3></button>
            <button class="layout-card" data-layout="bug"><h3 data-i18n="mahjong.layouts.bug">Bug</h3></button>
            <button class="layout-card" data-layout="cat"><h3 data-i18n="mahjong.layouts.cat">Cat</h3></button>
            <button class="layout-card" data-layout="checkered"><h3 data-i18n="mahjong.layouts.checkered">Checkered</h3></button>
            <button class="layout-card" data-layout="chip"><h3 data-i18n="mahjong.layouts.chip">Chip</h3></button>
            <button class="layout-card" data-layout="columns"><h3 data-i18n="mahjong.layouts.columns">Columns</h3></button>
            <button class="layout-card" data-layout="crab"><h3 data-i18n="mahjong.layouts.crab">Crab</h3></button>
            <button class="layout-card" data-layout="dragon"><h3 data-i18n="mahjong.layouts.dragon">Dragon</h3></button>
            <button class="layout-card" data-layout="eagle"><h3 data-i18n="mahjong.layouts.eagle">Eagle</h3></button>
            <button class="layout-card" data-layout="enterprise"><h3 data-i18n="mahjong.layouts.enterprise">Enterprise</h3></button>
            <button class="layout-card" data-layout="flowers"><h3 data-i18n="mahjong.layouts.flowers">Flowers</h3></button>
            <button class="layout-card" data-layout="future"><h3 data-i18n="mahjong.layouts.future">Future</h3></button>
            <button class="layout-card" data-layout="garden"><h3 data-i18n="mahjong.layouts.garden">Garden</h3></button>
            <button class="layout-card" data-layout="glade"><h3 data-i18n="mahjong.layouts.glade">Glade</h3></button>
            <button class="layout-card" data-layout="helios"><h3 data-i18n="mahjong.layouts.helios">Helios</h3></button>
            <button class="layout-card" data-layout="innercircle"><h3 data-i18n="mahjong.layouts.innercircle">Inner Circle</h3></button>
            <button class="layout-card" data-layout="km"><h3 data-i18n="mahjong.layouts.km">KM</h3></button>
            <button class="layout-card" data-layout="maya"><h3 data-i18n="mahjong.layouts.maya">Maya</h3></button>
            <button class="layout-card" data-layout="mesh"><h3 data-i18n="mahjong.layouts.mesh">Mesh</h3></button>
            <button class="layout-card" data-layout="moth"><h3 data-i18n="mahjong.layouts.moth">Moth</h3></button>
            <button class="layout-card" data-layout="order"><h3 data-i18n="mahjong.layouts.order">Order</h3></button>
            <button class="layout-card" data-layout="pattern"><h3 data-i18n="mahjong.layouts.pattern">Pattern</h3></button>
            <button class="layout-card" data-layout="pirates"><h3 data-i18n="mahjong.layouts.pirates">Pirates</h3></button>
            <button class="layout-card" data-layout="rocket"><h3 data-i18n="mahjong.layouts.rocket">Rocket</h3></button>
            <button class="layout-card" data-layout="shield"><h3 data-i18n="mahjong.layouts.shield">Shield</h3></button>
            <button class="layout-card" data-layout="spider"><h3 data-i18n="mahjong.layouts.spider">Spider</h3></button>
            <button class="layout-card" data-layout="squares"><h3 data-i18n="mahjong.layouts.squares">Squares</h3></button>
            <button class="layout-card" data-layout="squaring"><h3 data-i18n="mahjong.layouts.squaring">Squaring</h3></button>
            <button class="layout-card" data-layout="stairs"><h3 data-i18n="mahjong.layouts.stairs">Stairs</h3></button>
            <button class="layout-card" data-layout="temple"><h3 data-i18n="mahjong.layouts.temple">Temple</h3></button>
        </div>
    </section>

    <!-- Quick Stats & Features Section -->
    <section class="mahjong-features" aria-label="Game Features">
        <div class="features-grid">
            <div class="feature-item">
                <i class="fas fa-ban"></i>
                <h4 data-i18n="mahjong.features.noAds">No Ads</h4>
                <p data-i18n="mahjong.features.noAdsDesc">Pure gaming experience</p>
            </div>
            <div class="feature-item">
                <i class="fas fa-download"></i>
                <h4 data-i18n="mahjong.features.noDownloads">No Downloads</h4>
                <p data-i18n="mahjong.features.noDownloadsDesc">Play instantly in browser</p>
            </div>
            <div class="feature-item">
                <i class="fas fa-chart-line"></i>
                <h4 data-i18n="mahjong.features.trackProgress">Track Progress</h4>
                <p data-i18n="mahjong.features.trackProgressDesc">Stats & win streaks</p>
            </div>
            <div class="feature-item">
                <i class="fas fa-calendar-day"></i>
                <h4 data-i18n="mahjong.features.dailyChallenges">Daily Challenges</h4>
                <p data-i18n="mahjong.features.dailyChallengesDesc">New puzzles every day</p>
            </div>
        </div>
    </section>

    <!-- How to Play Content Section -->
    <section id="game-content" class="game-content mahjong-how-to-play" aria-label="How to play Mahjong Solitaire">
        <!-- Content loaded dynamically from /content/en/mahjong.json -->
    </section>

    <!-- Modals container -->
    <div id="modals-container"></div>

    <!-- Main JavaScript Module -->

    <!-- Initialize App UI Handlers -->

    <!-- Site Footer -->
    <footer class="mahjong-site-footer">
        <div class="footer-content">
            <!-- Mahjong Guides Section -->
            <div class="footer-section">
                <h4 class="footer-section-title">
                    <i class="fas fa-book"></i> <span data-i18n="footer.mahjongGuides">Mahjong Guides</span>
                </h4>
                <div class="footer-links">
                    <a href="/how-to-play-mahjong" class="footer-link">
                        <span data-i18n="footer.howToPlayMahjong">How to Play Mahjong</span>
                    </a>
                    <a href="/mahjong-tiles-guide" class="footer-link">
                        <span data-i18n="footer.mahjongTilesGuide">Mahjong Tiles Guide</span>
                    </a>
                    <a href="/mahjong-layouts-guide" class="footer-link">
                        <span data-i18n="footer.mahjongLayouts">Mahjong Layouts</span>
                    </a>
                    <a href="/mahjong-scoring" class="footer-link">
                        <span data-i18n="footer.mahjongScoring">Mahjong Scoring</span>
                    </a>
                    <a href="/daily-mahjong" class="footer-link">
                        <span data-i18n="footer.dailyMahjong">Daily Mahjong</span>
                    </a>
                </div>
            </div>

            <!-- Learn & Strategy Section -->
            <div class="footer-section">
                <h4 class="footer-section-title">
                    <i class="fas fa-graduation-cap"></i> <span data-i18n="footer.learnAndStrategy">Learn & Strategy</span>
                </h4>
                <div class="footer-links">
                    <a href="/mahjong-strategy" class="footer-link">
                        <span data-i18n="footer.mahjongStrategy">Mahjong Strategy</span>
                    </a>
                    <a href="/mahjong-history" class="footer-link">
                        <span data-i18n="footer.mahjongHistory">History of Mahjong</span>
                    </a>
                    <a href="/mahjong-cognitive-benefits" class="footer-link">
                        <span data-i18n="footer.cognitiveBenefits">Cognitive Benefits</span>
                    </a>
                    <a href="/mahjong-solitaire-vs-traditional" class="footer-link">
                        <span data-i18n="footer.solitaireVsTraditional">Solitaire vs Traditional</span>
                    </a>
                </div>
            </div>

            <!-- Cross-Links Section -->
            <div class="footer-section">
                <h4 class="footer-section-title">
                    <i class="fas fa-gamepad"></i> <span data-i18n="footer.moreGames">More Games</span>
                </h4>
                <div class="footer-links">
                    <a href="https://trysolitaire.com" class="footer-link">
                        <span data-i18n="footer.solitaire">Solitaire</span>
                    </a>
                    <a href="https://try-sudoku.com" class="footer-link">
                        <span data-i18n="games.sudoku">Sudoku</span>
                    </a>
                    <a href="https://trysolitaire.com/play/2048" class="footer-link">
                        <span data-i18n="games.2048">2048</span>
                    </a>
                </div>
            </div>

            <!-- Legal Links Section -->
            <div class="footer-section">
                <h4 class="footer-section-title">
                    <i class="fas fa-info-circle"></i> <span data-i18n="footer.information">Information</span>
                </h4>
                <div class="footer-links">
                    <a href="/about.html" class="footer-link">
                        <span data-i18n="nav.about">About</span>
                    </a>
                    <a href="/privacy.html" class="footer-link">
                        <span data-i18n="nav.privacy">Privacy</span>
                    </a>
                    <a href="/terms.html" class="footer-link">
                        <span data-i18n="nav.terms">Terms</span>
                    </a>
                </div>
            </div>

            <p class="footer-copyright">&copy; <span id="mahjong-current-year">2026</span> <span data-i18n="footer.tryMahjong">Try Mahjong</span>. <span data-i18n="footer.allRightsReserved">All rights reserved</span>.</p>
        </div>
    </footer>

    <!-- Mobile More Menu (bottom sheet) -->
    <div class="more-menu-overlay" id="more-menu-overlay"></div>
    <div class="more-menu-sheet" id="more-menu-sheet">
        <div class="more-menu-header">
            <span class="more-menu-title">Options</span>
            <button class="more-menu-close" id="more-menu-close">&times;</button>
        </div>
        <div class="more-menu-items">
            <button class="more-menu-item" id="more-menu-how-to-play">
                <i class="fas fa-book-open"></i> <span data-i18n="nav.howToPlay">How to Play</span>
            </button>
            <button class="more-menu-item" id="more-menu-settings">
                <i class="fas fa-cog"></i> <span data-i18n="settings.preferences">Settings</span>
            </button>
            <button class="more-menu-item" id="more-menu-language">
                <i class="fas fa-globe"></i> <span id="more-menu-language-label">English</span>
            </button>
        </div>
    </div>

    <!-- How to Play Sheet (mobile) -->
    <div class="how-to-play-overlay" id="how-to-play-overlay"></div>
    <div class="how-to-play-sheet" id="how-to-play-sheet">
        <div class="how-to-play-header">
            <button class="how-to-play-back" id="how-to-play-back">
                <i class="fas fa-arrow-left"></i>
            </button>
            <span class="how-to-play-title" id="how-to-play-title">How to Play</span>
            <button class="how-to-play-close" id="how-to-play-close">&times;</button>
        </div>
        <div class="how-to-play-content" id="how-to-play-content">
            <!-- Populated dynamically from game content JSON -->
        </div>
    </div>

    <!-- Language Picker Sheet (mobile) -->
    <div class="language-picker-overlay" id="language-picker-overlay"></div>
    <div class="language-picker-sheet" id="language-picker-sheet">
        <div class="language-picker-header">
            <button class="language-picker-back" id="language-picker-back">
                <i class="fas fa-arrow-left"></i>
            </button>
            <span class="language-picker-title">Language</span>
            <button class="language-picker-close" id="language-picker-close">&times;</button>
        </div>
        <div class="language-picker-list" id="language-picker-list">
            <!-- Populated dynamically from i18n.getSupportedLanguages() -->
        </div>
    </div>

    <!-- Router (loaded before main.js for availability, minified) -->
    <script src="/js/router.min.js"></script>

    <!-- Error Tracking & Performance Monitoring (non-critical, deferred, minified) -->
    <script src="/js/errorTracking.min.js" defer></script>
    <script src="/js/performanceMonitor.min.js" defer></script>

    <!-- PWA Initialization (minified) -->
    <script src="/js/pwa-init.min.js" defer></script>
</body>

</html>
