<!-- 
  GameHubJS - Guest Gate Page
  Shown when a guest clicks a member-only feature (Support, Report a
  Bug, Suggest a Game, Chat Room, Leaderboard, Notifications).
  Presents the tester community as an invitation, not a paywall.

  DESIGN PRINCIPLES:
  - Same visual language as auth/login.html and donations/index.html:
    dark gradient background, glass-morphism card, brand gradient CTAs.
  - Feature-aware copy: the headline and preview card change based on
    the ?feature= query param, so the guest sees exactly what they
    were trying to reach.
  - Never says "must", "sign up to continue", or anything that reads
    as a fence. Every string is invitational.
  - No mention of payment anywhere. Support is framed as optional
    AFTER joining, not as the price of entry.
  - The "Maybe later" link ALWAYS sends the guest back to the
    homepage, never to the gated feature. Clicking a gated feature
    is not a commitment; the escape hatch must return the guest to
    a page they can actually access as a guest. The gated feature
    URL is passed to the auth routes (Google / signup / login) via
    `next` so that after authentication the user lands on the feature
    they wanted. Only "Maybe later" ignores that value.

  ROUTE CONTRACT:
  - The /gate route in main.py passes:
      feature   -- one of 'support' | 'bug' | 'suggest' | 'join'
                   | 'chat' | 'leaderboard' | 'notifications'
      next_url  -- a same-origin path the guest should return to
                   AFTER authentication
      oauth_enabled -- whether Google sign-in is configured
  - This template never trusts the raw query string; the route
    validates both params before rendering.

  I18N:
  - Every user-visible string is wrapped in _() with a LITERAL string
    argument. Babel's extractor cannot pick up _() calls where the
    argument is a variable -- it only extracts string literals.
  - The feature-aware copy is therefore written as an if/elif chain
    where each branch contains its own literal _('...') call. This is
    slightly more verbose but makes every string discoverable by the
    extractor on the next pybabel run.
  - No JS-rendered strings on this page, so no I18N constants block
    is needed.

  NOTE ON gate.chat_note:
  - The translation key `gate.chat_note` ("Chat is for logged-in
    testers...") still exists in every locale's messages.po. It is
    no longer referenced by this template. It will show up as an
    obsolete entry (#~) on the next pybabel extract run. That's fine:
    the value is preserved in case the copy is ever wanted again.
    Delete it from the .po files if you want a cleaner catalog.

  Filename: app/templates/gate.html
  Signed: admin@thepandadev.com
-->

<!-- 
  GameHubJS - App-Shell Layout (v11)
  Professional, clean design with dark theme.

  APP-LIKE LAYOUT (v8):
  - The top navbar is GONE on mobile (<992px) and on desktop (>=992px).
    Navigation has two modes:
      * Mobile  (<992px)  → bottom tab bar (5 items) + full-screen
                            "More" drawer
      * Desktop (>=992px) → permanent LEFT SIDEBAR with the same
                            primary nav + secondary actions + user
                            block pinned to the bottom

  DESKTOP SIDEBAR — 3 ZONES (v9, restructured in v10):
  - Zone 1 (top):       brand + primary navigation
                        (Home, Games, Chat Room, Leaderboard)
  - Zone 2 (middle):    gated features + utility actions
                        Order: Suggest, Support, Report a Bug,
                        Notifications | divider | Contact, Language,
                        Install App
  - Zone 3 (bottom):    user block pinned to the bottom.
                        Logged in: Profile + Admin + Logout
                        Guest:     Login + Join Now

  GUEST GATE (v10):
  - Every member-only feature is visible to guests, but clicking
    routes to /gate?feature=X&next=Y.
  - Gated features: Chat Room, Leaderboard, Suggest a Game, Support,
    Report a Bug, Notifications.
  - Open features: Home, Games, Contact Us, Language, Install App.

  MOBILE MORE DRAWER (v11 restructure):
  - Gated features (Chat Room, Leaderboard, Suggest, Support,
    Report a Bug, Notifications) live in a "Features" collapsible.
  - Open utilities (Contact Us, Language, About, Privacy, Terms)
    live in an "Explore" collapsible.
  - Admin collapsible (admins only).
  - Always visible: user block (if logged in), Install App,
    Logout (if logged in), Guest CTA (if guest).
  - Logout is directly in the drawer body, NOT inside any
    collapsible, so it's one tap away.

  MOBILE BOTTOM NAV (v8):
  - Logged in: Home | Games | Rank | Chat | More
  - Guest:     Home | Games | Login | Join | More
  - The Chat tab uses nav.chat_short ("Chat") so the strip stays
    compact. The sidebar uses nav.chat ("Chat Room").

  PWA INSTALL (v1 → v9):
  - Install App rows live in the sidebar footer (desktop) and in the
    More drawer (mobile). Both are always visible except when the
    app is already installed as a PWA.
  - Click routing by platform: Chrome prompt / iOS / Firefox /
    already installed. Handled by the JS block at the bottom of the
    file.

  LANGUAGE FLAGS:
  - Every language shows its country flag emoji alongside the native
    name.

  LEGACY NOTES:
  - Every Jinja tag inside an HTML comment MUST be wrapped in
    .... Jinja parses tags inside HTML comments;
    it does NOT ignore them. This has broken the file five times.

  I18N (v7.17):
  - Every user-visible string is wrapped in _() so it is picked up
    by pybabel extract.
  - The language switcher iterates over the `languages` context
    variable provided by inject_languages() in app/__init__.py.

  NEW I18N KEYS (v10 + v11):
    nav.chat_short  -- "Chat" (used only in the mobile bottom nav)
    drawer.explore  -- "Explore" (used as the collapsible header for
                       the utilities group in the mobile drawer)

  VALUE CHANGES (v10):
    nav.chat      -- "Chat"     → "Chat Room"
    nav.rankings  -- "Rankings" → "Leaderboard"

  I18N ESCAPING FIX (v7.17b):
  - The 7 BUG_MSG_* constants in the extra_js script block now use
    the Jinja `|tojson` filter instead of `"..."`. The
    previous form breaks the JS parser the moment a translated value
    contains a newline or certain quote characters, which silently
    kills the entire IIFE — the sidebar, drawer, notifications, and
    PWA install flows all stop working with no visible error beyond
    a console message.
  - The fix removes the surrounding `"..."` quotes because |tojson
    produces them. Runtime behavior is identical for every
    single-line value; multi-line values now compile cleanly to
    `"...\n\n..."`.
  - This is the same fix applied to profile.html in the same batch.
    The pattern `"..."` is a trap in any template that
    embeds translated strings into JavaScript; use |tojson instead.

  Filename: app/templates/base.html
  Signed: admin@thepandadev.com
-->
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta name="theme-color" content="#0a0a1a">
    <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="GameHubJS">

    <title>Únete a los testers - GameHubJS</title>

    <!-- CSRF Token -->
    <meta name="csrf-token" content="IjAyNzI2MDMyNzBkODk1MDZmYWU4YWRmN2ZiZTk4YjYyZTc1NjVjMzQi.atIolA.z7nVsh6E9442kjn-aacig_xMmH4">

    <!-- PWA manifest -->
    <link rel="manifest" href="/manifest.json">

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/static/images/brand/favicon.svg?v=ffce7d19730e">
    <link rel="icon" type="image/x-icon" href="/static/images/brand/favicon.ico?v=7ce10e92a752">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/brand/apple-touch-icon.png?v=823ab9386581">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎮</text></svg>">

    <!-- 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@300;400;500;600;700;800;900&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">

    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Main CSS -->
    <link href="/static/css/main.css?v=bf7d06f3a878" rel="stylesheet">

    <!-- Games CSS -->
    <link href="/static/css/games.css?v=ba828cf476b6" rel="stylesheet">

    <!-- Chat CSS -->
    <link href="/static/css/chat.css?v=b8813b64263f" rel="stylesheet">

    <!-- ============================================
         EARLY beforeinstallprompt CAPTURE
         ============================================
         The Chromium `beforeinstallprompt` event can fire on very fast
         connections before our body scripts run. Registering a listener
         here — in the <head> — guarantees we capture it. -->
    <script>
        (function () {
            'use strict';
            window.__gamehubDeferredInstallPrompt = null;
            window.addEventListener('beforeinstallprompt', function (e) {
                e.preventDefault();
                window.__gamehubDeferredInstallPrompt = e;
                try {
                    window.dispatchEvent(new CustomEvent('gamehub:pwa-captured'));
                } catch (err) { /* ignore */ }
            });
            window.addEventListener('appinstalled', function () {
                window.__gamehubDeferredInstallPrompt = null;
                try {
                    window.dispatchEvent(new CustomEvent('gamehub:pwa-installed'));
                } catch (err) { /* ignore */ }
            });
        })();
    </script>

    <!-- ============================================
         SIDEBAR v9.1 — small additions
         ============================================ -->
    <style>
        /* Report a Bug + Notifications rows.
           Both inherit .app-sidebar-link's base styling; only the
           notification badge needs its own rule. */

        /* Notification badge — a small violet pill anchored to the
           right edge of the Notifications row. Hidden when unread
           count is 0 (the template conditionally omits it, and the
           JS can also toggle .hidden). */
        .app-sidebar-notif-badge {
            margin-left: auto;
            background: linear-gradient(135deg, #6c63ff, #ff6584);
            color: #fff;
            font-family: 'Orbitron', sans-serif;
            font-size: 0.6rem;
            font-weight: 700;
            padding: 0.1rem 0.45rem;
            border-radius: 1rem;
            line-height: 1;
            min-width: 1.4rem;
            text-align: center;
            box-shadow: 0 0 8px rgba(108, 99, 255, 0.5);
        }
        .app-sidebar-notif-badge.hidden { display: none; }

        /* On the mobile drawer, the same badge styling works but we
           need to push it to the right with margin-left:auto. */
        .app-drawer-item .app-sidebar-notif-badge {
            margin-left: auto;
        }

        /* Bug report modal — self-contained so it works on any page.
           Uses the same visual language as the profile page modals. */
        .ghc-bug-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 3000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        .ghc-bug-modal.visible { display: flex; }
        .ghc-bug-modal-content {
            background: linear-gradient(135deg, #1a1a3e, #0a0a1a);
            border: 1px solid rgba(255, 107, 107, 0.25);
            border-radius: 1.25rem;
            max-width: 520px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            padding: 1.5rem;
            box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);
        }
        .ghc-bug-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
            padding-bottom: 0.85rem;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .ghc-bug-modal-title {
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
            font-size: 1.05rem;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .ghc-bug-modal-title i { color: #ff6b6b; }
        .ghc-bug-modal-close {
            width: 32px; height: 32px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.03);
            color: #a0aec0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .ghc-bug-modal-close:hover {
            background: rgba(255, 107, 107, 0.1);
            color: #ff6b6b;
        }
        .ghc-bug-form-group { margin-bottom: 0.85rem; }
        .ghc-bug-form-label {
            display: block;
            font-size: 0.78rem;
            font-weight: 600;
            color: #cbd5e0;
            margin-bottom: 0.35rem;
        }
        .ghc-bug-form-control {
            width: 100%;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            color: #fff;
            border-radius: 0.7rem;
            padding: 0.6rem 0.85rem;
            font-size: 0.88rem;
            font-family: inherit;
            box-sizing: border-box;
        }
        .ghc-bug-form-control:focus {
            outline: none;
            background: rgba(255,255,255,0.05);
            border-color: #6c63ff;
            box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
        }
        .ghc-bug-form-control.textarea {
            resize: vertical;
            min-height: 70px;
        }
        .ghc-bug-modal-footer {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255,255,255,0.05);
        }
        .ghc-bug-btn {
            flex: 1;
            padding: 0.65rem 1rem;
            border-radius: 0.75rem;
            border: none;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .ghc-bug-btn-secondary {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            color: #a0aec0;
        }
        .ghc-bug-btn-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; }
        .ghc-bug-btn-primary {
            background: linear-gradient(135deg, #ff6b6b, #ff9f43);
            color: #fff;
        }
        .ghc-bug-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4); }
        .ghc-bug-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
        .ghc-bug-status {
            margin-top: 0.6rem;
            font-size: 0.8rem;
            text-align: center;
            min-height: 1.2rem;
        }
        .ghc-bug-status.success { color: #48bb78; }
        .ghc-bug-status.error { color: #ff6b6b; }
    </style>

    
<style>
/* ============================================
   Gate Page Styles
   Mirrors the login page's visual language so the
   transition feels like part of the same flow.
   ============================================ */

.gate-wrapper {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0a0a1a 100%);
    position: relative;
    overflow: hidden;
}

/* Two soft radial glows, same treatment as the login page. */
.gate-wrapper::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(108, 99, 255, 0.10) 0%, transparent 70%);
    pointer-events: none;
}
.gate-wrapper::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -15%;
    width: 440px;
    height: 440px;
    background: radial-gradient(circle, rgba(255, 101, 132, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

.gate-card {
    background: rgba(26, 26, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    padding: 2.25rem 2rem;
    max-width: 520px;
    width: 100%;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

/* Brand icon — identical treatment to auth/login.html. */
.gate-brand-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #6c63ff, #ff6584);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin: 0 auto 1.25rem;
    color: #fff;
    box-shadow: 0 8px 30px rgba(108, 99, 255, 0.3);
}

/* Small pill above the headline. */
.gate-eyebrow {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border-radius: 2rem;
    background: rgba(108, 99, 255, 0.12);
    border: 1px solid rgba(108, 99, 255, 0.22);
    color: #a99fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
    text-align: center;
    width: 100%;
}

.gate-heading {
    color: #fff;
    font-weight: 700;
    font-size: 1.55rem;
    line-height: 1.25;
    text-align: center;
    margin-bottom: 0.65rem;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.01em;
}

.gate-subheading {
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
}

/* Feature preview card — shows what the guest was trying to reach. */
.gate-preview {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.9rem;
    margin-bottom: 1rem;
}
.gate-preview-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    color: #fff;
}
.gate-preview-icon.tint-support       { background: linear-gradient(135deg, #ff6584, #ff9f43); }
.gate-preview-icon.tint-bug           { background: linear-gradient(135deg, #ff6b6b, #ff9f43); }
.gate-preview-icon.tint-suggest       { background: linear-gradient(135deg, #6c63ff, #4facfe); }
.gate-preview-icon.tint-join          { background: linear-gradient(135deg, #6c63ff, #ff6584); }
.gate-preview-icon.tint-chat          { background: linear-gradient(135deg, #4facfe, #6c63ff); }
.gate-preview-icon.tint-leaderboard   { background: linear-gradient(135deg, #ffd93d, #ff9f43); }
.gate-preview-icon.tint-notifications { background: linear-gradient(135deg, #6c63ff, #a855f7); }

.gate-preview-body {
    flex: 1;
    min-width: 0;
}
.gate-preview-title {
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    margin: 0 0 0.15rem;
}
.gate-preview-desc {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
}

/* CTA stack */
.gate-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.gate-btn {
    width: 100%;
    height: 50px;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    text-decoration: none;
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}

/* Primary — brand gradient. Used for Google sign-in (or email signup
   if Google is disabled). */
.gate-btn-primary {
    background: linear-gradient(135deg, #6c63ff, #ff6584);
    color: #fff;
    box-shadow: 0 8px 30px rgba(108, 99, 255, 0.25);
}
.gate-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 36px rgba(108, 99, 255, 0.4);
    color: #fff;
    text-decoration: none;
}

/* Secondary — outlined surface. Email signup / login. */
.gate-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}
.gate-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
    text-decoration: none;
}

.gate-btn i { font-size: 1.05rem; }

/* Divider — same treatment as the login page's "or continue with". */
.gate-divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0.35rem 0;
}
.gate-divider::before,
.gate-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

/* "Maybe later" back link — always goes to the homepage, never to
   the gated feature. See the header comment for the rationale. */
.gate-back {
    display: block;
    text-align: center;
    margin-top: 1.4rem;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 0.2s ease;
}
.gate-back:hover {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

/* Trust line at the bottom */
.gate-trust {
    text-align: center;
    margin-top: 1.1rem;
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}
.gate-trust i { margin-right: 0.3rem; }

/* Responsive */
@media (max-width: 576px) {
    .gate-card {
        padding: 1.5rem 1.25rem;
        border-radius: 1.1rem;
    }
    .gate-brand-icon {
        width: 48px;
        height: 48px;
        font-size: 1.35rem;
        border-radius: 0.85rem;
    }
    .gate-heading { font-size: 1.2rem; }
    .gate-subheading { font-size: 0.85rem; }
    .gate-btn { height: 46px; font-size: 0.86rem; }
}
</style>

</head>
<body>

    <!-- ============================================
         DESKTOP SIDEBAR  (>=992px)
         3-zone layout: primary nav / secondary / user block at bottom.
         Hidden on mobile and on the game play page.
         ============================================ -->
    <aside class="app-sidebar d-none d-lg-flex" id="appSidebar">

        <!-- ============ ZONE 1: brand + primary nav ============ -->
        <a class="app-sidebar-brand" href="/">
            <div class="app-sidebar-brand-mark">
                <i class="fas fa-gamepad"></i>
            </div>
            <span class="app-sidebar-brand-text">GameHubJS</span>
        </a>

        <nav class="app-sidebar-nav">
            <a class="app-sidebar-link "
               href="/">
                <i class="fas fa-home"></i>
                <span>Inicio</span>
            </a>

            <a class="app-sidebar-link "
               href="/games/lobby">
                <i class="fas fa-gamepad"></i>
                <span>Juegos</span>
                
                    <span class="app-sidebar-badge">60</span>
                
            </a>

            
                <a class="app-sidebar-link" href="/gate?feature=chat&amp;next=/chat">
                    <i class="fas fa-comments"></i>
                    <span>Sala de chat</span>
                </a>
            
            
                <a class="app-sidebar-link" href="/gate?feature=leaderboard&amp;next=/leaderboard">
                    <i class="fas fa-trophy"></i>
                    <span>Clasificación</span>
                </a>
            
        </nav>

        <!-- ============ ZONE 2: gated features + utility ============ -->
        <div class="app-sidebar-secondary">

            
                <a class="app-sidebar-link" href="/gate?feature=suggest&amp;next=/suggest">
                    <i class="fas fa-lightbulb" style="color:#ffd93d;"></i>
                    <span>Sugerir un Juego</span>
                </a>
            

                <a class="app-sidebar-link" href="/gate?feature=support&amp;next=/donations/">
                    <i class="fas fa-heart" style="color:#ff6584;"></i>
                    <span>Apoyar</span>
                </a>
            

                <a class="app-sidebar-link" href="/gate?feature=bug&amp;next=/">
                    <i class="fas fa-bug" style="color:#ff6b6b;"></i>
                    <span>Reportar un Error</span>
                </a>
            

                <a class="app-sidebar-link" href="/gate?feature=notifications&amp;next=/notifications">
                    <i class="fas fa-bell" style="color:#6c63ff;"></i>
                    <span>Notificaciones</span>
                </a>
            

            <a class="app-sidebar-link "
               href="/contact">
                <i class="fas fa-envelope" style="color:#4facfe;"></i>
                <span>Contáctanos</span>
            </a>

            <!-- Language -->
            <div class="app-sidebar-lang-wrap">
                <button class="app-sidebar-link app-sidebar-lang-btn" type="button" id="sidebarLangBtn">
                    <i class="fas fa-globe"></i>
                    <span>Idioma</span>
                    <span class="app-sidebar-lang-code">ES</span>
                </button>
                <div class="app-sidebar-lang-menu" id="sidebarLangMenu">
                    
                        <a class="app-sidebar-lang-item "
                           href="?lang=en">
                            <i class="fas fa-check"></i>
                            <span>🇺🇸 English</span>
                        </a>
                    
                        <a class="app-sidebar-lang-item active"
                           href="?lang=es">
                            <i class="fas fa-check"></i>
                            <span>🇪🇸 Español</span>
                        </a>
                    
                        <a class="app-sidebar-lang-item "
                           href="?lang=hi">
                            <i class="fas fa-check"></i>
                            <span>🇮🇳 हिन्दी</span>
                        </a>
                    
                        <a class="app-sidebar-lang-item "
                           href="?lang=de">
                            <i class="fas fa-check"></i>
                            <span>🇩🇪 Deutsch</span>
                        </a>
                    
                </div>
            </div>

            <!-- Install App — gradient accent, works on every platform.
                 The inline style="display:none;" is removed by JS the
                 moment the row should be visible (see install flow). -->
            <button class="app-sidebar-link app-install-highlight" type="button" id="sidebarInstallBtn">
                <i class="fas fa-download"></i>
                <span>Instalar App</span>
            </button>
        </div>

        <!-- ============ ZONE 3: user block pinned to bottom ============ -->
        <div class="app-sidebar-user-zone">

            
                <a class="app-sidebar-link" href="/auth/login">
                    <i class="fas fa-sign-in-alt"></i>
                    <span>Iniciar Sesión</span>
                </a>
                <a class="app-sidebar-link app-sidebar-link-accent" href="/auth/register">
                    <i class="fas fa-user-plus"></i>
                    <span>Únete Ahora</span>
                </a>
            
        </div>
    </aside>

    <!-- ============================================
         MOBILE MORE DRAWER  (<992px)
         Full-screen slide-up panel. Opened by the "More" bottom tab.

         v11 restructure:
         - Gated features (Chat, Leaderboard, Suggest, Support,
           Report a Bug, Notifications) are in a "Features"
           collapsible.
         - Utilities (Contact, Language, About, Privacy, Terms) are
           in an "Explore" collapsible.
         - Always visible: user block (if logged in), Install App,
           Logout (if logged in), Guest CTA (if guest).
         - Admin collapsible (admins only).
         ============================================ -->
    <div class="app-drawer" id="appDrawer" aria-hidden="true">
        <div class="app-drawer-scrim" onclick="closeAppDrawer()"></div>
        <div class="app-drawer-panel" role="dialog" aria-modal="true" aria-label="Más opciones">
            <div class="app-drawer-handle" onclick="closeAppDrawer()">
                <span></span>
            </div>

            <div class="app-drawer-header">
                <h5>Más</h5>
                <button class="app-drawer-close" type="button" onclick="closeAppDrawer()" aria-label="Cerrar">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="app-drawer-body">

                <!-- ===== Always visible: user block (logged in) ===== -->
                

                <!-- ===== Collapsible: Features (gated) ===== -->
                <div class="app-drawer-collapse" data-collapse-id="features">
                    <button type="button" class="app-drawer-collapse-header" onclick="toggleDrawerSection('features', this)">
                        <i class="fas fa-sliders-h"></i>
                        <span>Funciones</span>
                        <i class="fas fa-chevron-down app-drawer-collapse-chevron"></i>
                    </button>
                    <div class="app-drawer-collapse-body">
                        <div class="app-drawer-collapse-inner">

                            
                                <a class="app-drawer-item" href="/gate?feature=chat&amp;next=/chat" onclick="closeAppDrawer()">
                                    <i class="fas fa-comments" style="color:#4facfe;"></i>
                                    <span>Sala de chat</span>
                                </a>
                            

                                <a class="app-drawer-item" href="/gate?feature=leaderboard&amp;next=/leaderboard" onclick="closeAppDrawer()">
                                    <i class="fas fa-trophy" style="color:#ffd93d;"></i>
                                    <span>Clasificación</span>
                                </a>
                            

                                <a class="app-drawer-item" href="/gate?feature=suggest&amp;next=/suggest" onclick="closeAppDrawer()">
                                    <i class="fas fa-lightbulb" style="color:#ffd93d;"></i>
                                    <span>Sugerir un Juego</span>
                                </a>
                            

                                <a class="app-drawer-item" href="/gate?feature=support&amp;next=/donations/" onclick="closeAppDrawer()">
                                    <i class="fas fa-heart" style="color:#ff6584;"></i>
                                    <span>Apoyar</span>
                                </a>
                            

                                <a class="app-drawer-item" href="/gate?feature=bug&amp;next=/" onclick="closeAppDrawer()">
                                    <i class="fas fa-bug" style="color:#ff6b6b;"></i>
                                    <span>Reportar un Error</span>
                                </a>
                            

                                <a class="app-drawer-item" href="/gate?feature=notifications&amp;next=/notifications" onclick="closeAppDrawer()">
                                    <i class="fas fa-bell" style="color:#6c63ff;"></i>
                                    <span>Notificaciones</span>
                                </a>
                            

                        </div>
                    </div>
                </div>

                <!-- ===== Collapsible: Explore (utilities) ===== -->
                <div class="app-drawer-collapse" data-collapse-id="explore">
                    <button type="button" class="app-drawer-collapse-header" onclick="toggleDrawerSection('explore', this)">
                        <i class="fas fa-compass"></i>
                        <span>Explorar</span>
                        <i class="fas fa-chevron-down app-drawer-collapse-chevron"></i>
                    </button>
                    <div class="app-drawer-collapse-body">
                        <div class="app-drawer-collapse-inner">
                            <a class="app-drawer-item" href="/contact" onclick="closeAppDrawer()">
                                <i class="fas fa-envelope" style="color:#4facfe;"></i>
                                <span>Contáctanos</span>
                            </a>
                            <div class="app-drawer-lang-grid">
                                
                                    <a class="app-drawer-lang-btn "
                                       href="?lang=en">
                                        🇺🇸 English
                                    </a>
                                
                                    <a class="app-drawer-lang-btn active"
                                       href="?lang=es">
                                        🇪🇸 Español
                                    </a>
                                
                                    <a class="app-drawer-lang-btn "
                                       href="?lang=hi">
                                        🇮🇳 हिन्दी
                                    </a>
                                
                                    <a class="app-drawer-lang-btn "
                                       href="?lang=de">
                                        🇩🇪 Deutsch
                                    </a>
                                
                            </div>
                            <a class="app-drawer-item" href="/about" onclick="closeAppDrawer()">
                                <i class="fas fa-info-circle"></i>
                                <span>Acerca de GameHubJS</span>
                            </a>
                            <a class="app-drawer-item" href="/privacy" onclick="closeAppDrawer()">
                                <i class="fas fa-lock"></i>
                                <span>Privacidad</span>
                            </a>
                            <a class="app-drawer-item" href="/terms" onclick="closeAppDrawer()">
                                <i class="fas fa-file-contract"></i>
                                <span>Términos</span>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- ===== Collapsible: Admin (admins only) ===== -->
                

                <!-- ===== Always visible: Install App ===== -->
                <button class="app-drawer-item app-install-highlight" type="button" id="drawerInstallBtn" onclick="handleInstallClick()">
                    <i class="fas fa-download"></i>
                    <span>Instalar App</span>
                </button>

                <!-- ===== Always visible: Logout (logged in only) ===== -->
                

                <!-- ===== Always visible: Guest CTA ===== -->
                
                    <a class="app-drawer-item app-drawer-item-accent"
                       href="/auth/register" onclick="closeAppDrawer()">
                        <i class="fas fa-user-plus"></i>
                        <span>Crear Cuenta</span>
                    </a>
                
            </div>
        </div>
    </div>

    <!-- ============================================
         APP CONTENT WRAPPER
         ============================================ -->
    <div class="app-content" id="appContent">

        
<div class="gate-wrapper">
    <div class="gate-card">

        <!-- Brand icon -->
        <div class="gate-brand-icon">
            <i class="fas fa-gamepad"></i>
        </div>

        <!-- Eyebrow -->
        <div class="gate-eyebrow">Únete a los Testers de GameHubJS</div>

        <!-- Headline (feature-aware, literal _() per branch) -->
        <h1 class="gate-heading">
            
                Únete a la conversación
            
        </h1>

        <!-- Subheadline -->
        <p class="gate-subheading">GameHubJS está formado por su comunidad. Los testers obtienen acceso anticipado a nuevos juegos, reportan errores y sugieren lo que construimos después.</p>

        <!-- Feature preview card (literal _() per branch) -->
        <div class="gate-preview">
            <div class="gate-preview-icon tint-chat">
                <i class="fas fa-comments"></i>
            </div>
            <div class="gate-preview-body">
                <p class="gate-preview-title">
                    
                        Sala de chat
                    
                </p>
                <p class="gate-preview-desc">
                    
                        Habla con otros testers, crea salas privadas y comparte lo que estás jugando.
                    
                </p>
            </div>
        </div>

        <!-- CTA stack -->
        <div class="gate-actions">

            
                <a href="/auth/google?next=/chat"
                   class="gate-btn gate-btn-primary">
                    <i class="fab fa-google"></i>
                    Continuar con Google
                </a>

                <div class="gate-divider">o</div>

                <a href="/auth/register?next=/chat"
                   class="gate-btn gate-btn-secondary">
                    <i class="fas fa-envelope"></i>
                    Registrarse con correo
                </a>
            

            <a href="/auth/login?next=/chat"
               class="gate-btn gate-btn-secondary">
                <i class="fas fa-sign-in-alt"></i>
                Ya tengo una cuenta
            </a>
        </div>

        <!-- Maybe later — ALWAYS returns to the homepage, never to
             the gated feature. Clicking a gated feature is not a
             commitment; this escape hatch must land on a page a
             guest can actually access. -->
        <a href="/" class="gate-back">
            <i class="fas fa-arrow-left" style="margin-right:0.35rem;"></i>
            Quizás después
        </a>

        <!-- Trust line -->
        <div class="gate-trust">
            <i class="fas fa-shield-alt"></i>
            Gratis unirse · Sin spam · Sal cuando quieras
        </div>

    </div>
</div>

    </div>

    <!-- ============================================
         MOBILE BOTTOM TAB BAR  (<992px)
         ============================================ -->
    <nav class="mobile-bottom-nav d-lg-none" id="mobileBottomNav">
        <a href="/"
           class="bottom-nav-item ">
            <i class="fas fa-home"></i>
            <span>Inicio</span>
        </a>

        <a href="/games/lobby"
           class="bottom-nav-item ">
            <i class="fas fa-gamepad"></i>
            <span>Juegos</span>
            
                <span class="bottom-nav-badge">60</span>
            
        </a>

        
            <a href="/auth/login" class="bottom-nav-item">
                <i class="fas fa-sign-in-alt"></i>
                <span>Iniciar Sesión</span>
            </a>

            <a href="/auth/register" class="bottom-nav-item bottom-nav-item-join">
                <i class="fas fa-user-plus"></i>
                <span>Unirse</span>
            </a>
        

        <button type="button" class="bottom-nav-item" onclick="openAppDrawer()">
            <i class="fas fa-ellipsis-h"></i>
            <span>Más</span>
        </button>
    </nav>

    <!-- ============================================
         FOOTER (desktop only)
         ============================================ -->
    <footer class="app-footer d-none d-lg-block">
        <div class="container">
            <div class="row align-items-center g-3">
                <div class="col-md-4 text-center text-md-start">
                    <div style="display: flex; align-items: center; gap: 0.5rem; justify-content: center; justify-content: flex-start;">
                        <i class="fas fa-gamepad" style="background: linear-gradient(135deg, #6c63ff, #ff6584); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.2rem;"></i>
                        <span style="font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.9rem; background: linear-gradient(135deg, #6c63ff, #ff6584); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">GameHubJS</span>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div style="display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;">
                        <a href="/about" style="color: #718096; text-decoration: none; font-size: 0.75rem;">Acerca de</a>
                        <a href="/privacy" style="color: #718096; text-decoration: none; font-size: 0.75rem;">Privacidad</a>
                        <a href="/terms" style="color: #718096; text-decoration: none; font-size: 0.75rem;">Términos</a>
                        <a href="/suggest" style="color: #ffd93d; text-decoration: none; font-size: 0.75rem;">Sugerir un Juego</a>
                        <a href="/donations/" style="color: #ff6584; text-decoration: none; font-size: 0.75rem;">Apoyar</a>
                    </div>
                </div>
                <div class="col-md-4 text-center text-md-end">
                    <div style="display: flex; gap: 0.75rem; justify-content: center; justify-content: flex-end;">
                        <a href="#" style="width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; color: #718096; text-decoration: none;"><i class="fab fa-twitch"></i></a>
                        <a href="#" style="width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; color: #718096; text-decoration: none;"><i class="fab fa-discord"></i></a>
                        <a href="#" style="width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; color: #718096; text-decoration: none;"><i class="fab fa-youtube"></i></a>
                        <a href="#" style="width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; color: #718096; text-decoration: none;"><i class="fab fa-twitter"></i></a>
                    </div>
                </div>
                <div class="col-12 text-center" style="margin-top: 0.5rem;">
                    <span style="font-size: 0.65rem; color: #718096;">© 2026 GameHubJS. Todos los derechos reservados.</span>
                </div>
            </div>
        </div>
    </footer>

    <!-- ============================================
         iOS PWA INSTALL MODAL
         ============================================ -->
    <div class="pwa-ios-modal" id="pwaIosModal">
        <div class="pwa-ios-modal-content">
            <h5>Instalar GameHubJS</h5>
            <p>Agrega GameHubJS a tu pantalla de inicio para acceso con un toque:</p>
            <div class="pwa-ios-step">
                <i class="fas fa-share-from-square"></i>
                <span>Toca el botón &lt;strong&gt;Compartir&lt;/strong&gt; en la barra de Safari</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-plus-square"></i>
                <span>Desplázate y toca &lt;strong&gt;Agregar a pantalla de inicio&lt;/strong&gt;</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-check-circle"></i>
                <span>Toca &lt;strong&gt;Agregar&lt;/strong&gt; en la esquina superior derecha</span>
            </div>
            <button type="button" class="pwa-ios-close" onclick="document.getElementById('pwaIosModal').classList.remove('visible')">
                Entendido
            </button>
        </div>
    </div>

    <!-- ============================================
         CHROME DESKTOP INSTALL MODAL (v9)
         ============================================ -->
    <div class="pwa-ios-modal" id="pwaChromeModal">
        <div class="pwa-ios-modal-content">
            <h5>Instalar GameHubJS</h5>
            <p>Agrega GameHubJS a tu computadora para acceso con un clic desde tu escritorio o lanzador de apps:</p>
            <div class="pwa-ios-step">
                <i class="fas fa-ellipsis-v"></i>
                <span>Haz clic en el &lt;strong&gt;menú de tres puntos&lt;/strong&gt; (⋮) en la barra de Chrome</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-download"></i>
                <span>Elige &lt;strong&gt;Guardar y compartir&lt;/strong&gt; → &lt;strong&gt;Instalar página como app&lt;/strong&gt;</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-check-circle"></i>
                <span>Confirma y GameHubJS aparecerá en tus aplicaciones</span>
            </div>
            <button type="button" class="pwa-ios-close" onclick="document.getElementById('pwaChromeModal').classList.remove('visible')">
                Entendido
            </button>
        </div>
    </div>

    <!-- ============================================
         FIREFOX INSTALL HINT MODAL
         ============================================ -->
    <div class="pwa-ios-modal" id="pwaFirefoxModal">
        <div class="pwa-ios-modal-content">
            <h5>Instalar GameHubJS</h5>
            <p>Firefox aún no admite instalación con un toque, pero puedes agregar GameHubJS a tus aplicaciones:</p>
            <div class="pwa-ios-step">
                <i class="fas fa-ellipsis-v"></i>
                <span>Abre el menú de Firefox (⋮ en la esquina superior derecha)</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-download"></i>
                <span>Haz clic en &lt;strong&gt;Instalar este sitio como app&lt;/strong&gt;</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-check-circle"></i>
                <span>Confirma y aparecerá en tus aplicaciones</span>
            </div>
            <button type="button" class="pwa-ios-close" onclick="document.getElementById('pwaFirefoxModal').classList.remove('visible')">
                Entendido
            </button>
        </div>
    </div>

    <!-- ============================================
         BUG REPORT MODAL (v9.1)
         Self-contained. Opened by the sidebar / drawer "Report a Bug"
         rows via window.openBugReportModal(). Posts to the existing
         POST /api/bug/report route in main.py.

         GUEST GATE: This modal is still gated to logged-in users.
         The sidebar and drawer "Report a Bug" rows now route guests
         to /gate, so the modal is only ever opened by logged-in users.
         The gate is the primary defense; this block is the second line.
         ============================================ -->
    

    <!-- ============================================
         HIDDEN INSTALL BUTTON (JS target only — never rendered)
         ============================================ -->
    <button type="button" class="pwa-install-btn" id="pwaInstallBtn" aria-hidden="true"
            style="position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;">
        <i class="fas fa-download"></i>
        <span>Instalar</span>
    </button>

    <!-- ============================================
         SCRIPTS
         ============================================ -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // ============================================
        // i18n — translated strings for JS-rendered UI
        // ============================================
        // IMPORTANT — |tojson is load-bearing:
        //   These constants previously used the pattern
        //       const X = "some.key";
        //   which breaks the JS parser whenever the translated value
        //   contains a newline (or certain quote characters). A single
        //   bad value killed the entire IIFE — the sidebar, drawer,
        //   notifications, and PWA flows all stopped working with no
        //   visible error beyond a console message.
        //
        //   The fix: use Jinja's |tojson filter, which produces a
        //   properly-escaped JS string literal (`\n` for newlines,
        //   `\"` for quotes, correct Unicode). The surrounding
        //   `"..."` quotes are REMOVED — tojson includes them.
        //   Never reintroduce the quoted form.
        const BUG_MSG_GAME_NAME_REQUIRED = "Por favor ingresa el nombre de un juego o \"General\".";
        const BUG_MSG_DESCRIPTION_REQUIRED = "Por favor describe qu\u00e9 sali\u00f3 mal.";
        const BUG_MSG_SUBMITTING = "Enviando...";
        const BUG_MSG_SUBMITTED = "\u00a1Gracias! Tu reporte fue enviado.";
        const BUG_MSG_SUBMIT_FAILED = "No se pudo enviar. Por favor intenta de nuevo.";
        const BUG_MSG_NETWORK_ERROR = "Error de red. Por favor intenta de nuevo.";
        const BUG_MSG_SUBMITTED_BTN = "Enviado";

        // ============================================
        // Auto-dismiss flash messages
        // ============================================
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.alert').forEach(function(alert) {
                setTimeout(function() {
                    const closeBtn = alert.querySelector('.btn-close');
                    if (closeBtn) closeBtn.click();
                }, 5000);
            });
        });

        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

        // ============================================
        // APP DRAWER (mobile "More" panel)
        // ============================================
        function openAppDrawer() {
            var drawer = document.getElementById('appDrawer');
            if (!drawer) return;
            drawer.classList.add('visible');
            drawer.setAttribute('aria-hidden', 'false');
            document.body.style.overflow = 'hidden';
        }

        function closeAppDrawer() {
            var drawer = document.getElementById('appDrawer');
            if (!drawer) return;
            drawer.classList.remove('visible');
            drawer.setAttribute('aria-hidden', 'true');
            document.body.style.overflow = '';
        }

        window.openAppDrawer = openAppDrawer;
        window.closeAppDrawer = closeAppDrawer;

        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') {
                var drawer = document.getElementById('appDrawer');
                if (drawer && drawer.classList.contains('visible')) {
                    closeAppDrawer();
                }
            }
        });

        // ============================================
        // COLLAPSIBLE DRAWER SECTIONS
        // ============================================
        // Toggles a section open/closed. Uses the CSS class
        // `expanded` on the parent .app-drawer-collapse wrapper —
        // the actual show/hide is CSS (grid-template-rows trick for
        // smooth animation). Section state is NOT persisted between
        // drawer opens; each open starts with all sections collapsed
        // for a consistent, uncluttered initial view.
        window.toggleDrawerSection = function (id, btnEl) {
            var wrapper = document.querySelector('.app-drawer-collapse[data-collapse-id="' + id + '"]');
            if (!wrapper) return;
            wrapper.classList.toggle('expanded');
        };

        // ============================================
        // BUG REPORT MODAL (v9.1)
        // ============================================
        // Open / close / submit for the shared bug-report modal.
        // The modal posts to POST /api/bug/report (main.report_bug),
        // which is @login_required, so the modal is only rendered for
        // authenticated users.

        window.openBugReportModal = function () {
            var modal = document.getElementById('ghcBugModal');
            if (!modal) return;
            modal.classList.add('visible');
            document.body.style.overflow = 'hidden';
            setTimeout(function () {
                var input = document.getElementById('ghcBugGameName');
                if (input) input.focus();
            }, 100);
        };

        window.closeBugReportModal = function () {
            var modal = document.getElementById('ghcBugModal');
            if (!modal) return;
            modal.classList.remove('visible');
            document.body.style.overflow = '';
            var status = document.getElementById('ghcBugStatus');
            if (status) status.textContent = '';
            var gameName = document.getElementById('ghcBugGameName');
            var desc = document.getElementById('ghcBugDescription');
            var steps = document.getElementById('ghcBugSteps');
            if (gameName) gameName.value = '';
            if (desc) desc.value = '';
            if (steps) steps.value = '';
        };

        window.submitBugReportModal = function () {
            var gameNameEl = document.getElementById('ghcBugGameName');
            var descEl = document.getElementById('ghcBugDescription');
            var stepsEl = document.getElementById('ghcBugSteps');
            var statusEl = document.getElementById('ghcBugStatus');
            var submitBtn = document.getElementById('ghcBugSubmitBtn');

            if (!gameNameEl || !descEl || !statusEl || !submitBtn) return;

            var gameName = (gameNameEl.value || '').trim();
            var description = (descEl.value || '').trim();
            var steps = (stepsEl.value || '').trim();

            if (!gameName) {
                statusEl.className = 'ghc-bug-status error';
                statusEl.textContent = BUG_MSG_GAME_NAME_REQUIRED;
                return;
            }
            if (!description) {
                statusEl.className = 'ghc-bug-status error';
                statusEl.textContent = BUG_MSG_DESCRIPTION_REQUIRED;
                return;
            }

            submitBtn.disabled = true;
            var originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> ' + BUG_MSG_SUBMITTING;
            statusEl.className = 'ghc-bug-status';
            statusEl.textContent = '';

            fetch('/api/bug/report', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken || ''
                },
                body: JSON.stringify({
                    game_name: gameName,
                    description: description,
                    steps_to_reproduce: steps,
                    severity: 'medium'
                })
            })
            .then(function (r) { return r.json().catch(function () { return { success: false, error: 'Server error' }; }); })
            .then(function (data) {
                if (data.success) {
                    statusEl.className = 'ghc-bug-status success';
                    statusEl.textContent = BUG_MSG_SUBMITTED;
                    submitBtn.innerHTML = '<i class="fas fa-check"></i> ' + BUG_MSG_SUBMITTED_BTN;
                    setTimeout(function () {
                        closeBugReportModal();
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    }, 1200);
                } else {
                    statusEl.className = 'ghc-bug-status error';
                    statusEl.textContent = data.error || BUG_MSG_SUBMIT_FAILED;
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                }
            })
            .catch(function (err) {
                console.error('Bug report error:', err);
                statusEl.className = 'ghc-bug-status error';
                statusEl.textContent = BUG_MSG_NETWORK_ERROR;
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            });
        };

        // ============================================
        // PWA — SERVICE WORKER REGISTRATION
        // ============================================
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('/sw.js')
                    .then(function(reg) {
                        console.log('✅ Service worker registered, scope:', reg.scope);
                    })
                    .catch(function(err) {
                        console.warn('Service worker registration failed:', err);
                    });
            });
        }

        // ============================================
        // PWA — INSTALL ROW VISIBILITY + CLICK ROUTING
        // ============================================
        (function () {
            'use strict';

            function setVisible(rowIds) {
                rowIds.forEach(function (id) {
                    var el = document.getElementById(id);
                    if (!el) return;
                    el.style.display = '';
                });
            }

            function setHidden(rowIds) {
                rowIds.forEach(function (id) {
                    var el = document.getElementById(id);
                    if (!el) return;
                    el.style.display = 'none';
                });
            }

            var ROW_IDS = ['sidebarInstallBtn', 'drawerInstallBtn'];

            // Detect platform
            var ua = navigator.userAgent || '';
            var isIos = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
            var isFirefox = /Firefox\//.test(ua) && !/FxiOS/.test(ua);
            var isSafari = /Safari/.test(ua) && !/CriOS|FxiOS|EdgiOS|OPiOS/.test(ua);
            var isStandalone = window.navigator.standalone === true ||
                               (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches);

            // Already installed → nothing to install → hide both rows
            if (isStandalone) {
                setHidden(ROW_IDS);
                return;
            }

            // Every other platform sees the rows. The click handler
            // routes to the correct flow (see below).
            setVisible(ROW_IDS);

            // Public entry point for inline onclick handlers
            window.handleInstallClick = function () {
                // iOS Safari → manual instructions
                if (isIos && isSafari) {
                    var iosModal = document.getElementById('pwaIosModal');
                    if (iosModal) iosModal.classList.add('visible');
                    return;
                }

                // Firefox → browser-menu hint
                if (isFirefox) {
                    var ffModal = document.getElementById('pwaFirefoxModal');
                    if (ffModal) ffModal.classList.add('visible');
                    return;
                }

                // Chromium with a deferred prompt → call it
                if (window.__gamehubDeferredInstallPrompt) {
                    var promptEvent = window.__gamehubDeferredInstallPrompt;
                    promptEvent.prompt();
                    promptEvent.userChoice.then(function (choiceResult) {
                        console.log('PWA install choice:', choiceResult.outcome);
                        window.__gamehubDeferredInstallPrompt = null;
                        if (choiceResult.outcome === 'accepted') {
                            setHidden(ROW_IDS);
                        }
                    }).catch(function () {
                        var chromeModal = document.getElementById('pwaChromeModal');
                        if (chromeModal) chromeModal.classList.add('visible');
                    });
                    return;
                }

                // Chromium without a deferred prompt → instructions
                var chromeModal = document.getElementById('pwaChromeModal');
                if (chromeModal) chromeModal.classList.add('visible');
            };

            ROW_IDS.forEach(function (id) {
                var el = document.getElementById(id);
                if (el) {
                    el.addEventListener('click', window.handleInstallClick);
                }
            });

            window.addEventListener('gamehub:pwa-captured', function () {
                setVisible(ROW_IDS);
            });
            window.addEventListener('appinstalled', function () {
                window.__gamehubDeferredInstallPrompt = null;
                setHidden(ROW_IDS);
                console.log('✅ PWA installed');
            });
        })();

        // ============================================
        // SIDEBAR LANGUAGE MENU (desktop)
        // ============================================
        (function () {
            'use strict';
            var btn = document.getElementById('sidebarLangBtn');
            var menu = document.getElementById('sidebarLangMenu');
            if (!btn || !menu) return;

            btn.addEventListener('click', function (e) {
                e.stopPropagation();
                menu.classList.toggle('visible');
            });

            document.addEventListener('click', function () {
                menu.classList.remove('visible');
            });

            menu.addEventListener('click', function (e) {
                e.stopPropagation();
            });
        })();

        // ============================================
        // BOTTOM NAV — HAPTIC FEEDBACK
        // ============================================
        (function () {
            'use strict';
            var nav = document.getElementById('mobileBottomNav');
            if (!nav) return;
            nav.addEventListener('click', function (e) {
                var tab = e.target.closest('.bottom-nav-item');
                if (!tab) return;
                if (navigator.vibrate) {
                    try { navigator.vibrate(8); } catch (err) { /* ignore */ }
                }
            });
        })();

        // ============================================
        // NOTIFICATION SYSTEM
        // ============================================
        
    </script>

    
</body>
</html>

<!-- End of file: app/templates/base.html -->
<!-- Signed: admin@thepandadev.com -->