<!-- 
  GameHubJS - Game Lobby
  Modern tech + game themed game library with filters, search, and rich cards.
  Supports 60 games (39 x 2D, 21 x 3D).

  ============================================
  v8.4 — Mobile dropdown simplified to inline panel
  ============================================

  WHAT CHANGED IN v8.4:

  - MOBILE DROPDOWN PATTERN CHANGED FROM BOTTOM SHEET TO
    INLINE PANEL. The bottom-sheet approach was fighting mobile
    browser viewport quirks: vh units report the layout viewport
    (not the visual viewport), the address bar animates and
    changes the visible area, and safe-area insets on notched
    devices compound the problem. The result was that the sheet's
    top edge was landing behind the filter bar or the game grid,
    clipping the drag handle + search row.
    Fix: on mobile, the panel now uses the same inline
    `position: absolute; top: 100%+0.5rem` layout as desktop.
    It opens BELOW the trigger button, expands to fill available
    width, and scrolls internally if the list is tall. This works
    identically on every mobile browser because it doesn't depend
    on viewport units or fixed positioning.

  - NO MORE DRAG HANDLE. The drag handle was a bottom-sheet
    affordance. Since the panel is no longer a sheet, the handle
    is hidden everywhere.

  - NO MORE BACKDROP ON MOBILE. The backdrop was a bottom-sheet
    pattern too. Without it, tapping outside the panel closes it
    via the existing document click handler. Tapping a category
    navigates normally.

  - TIGHTER ROWS ON MOBILE. Row padding and font size reduced so
    more categories fit in the visible area before scrolling.

  - PER-CATEGORY EMOJIS. Every category has its own emoji. The
    game controller 🎮 is the fallback for unmatched categories.

  - ALL OTHER BEHAVIOR PRESERVED: search, keyboard nav, type
    pills, search box, recent strip, game grid, hero, coming
    soon, card fade-in, filter param preservation.

  Filename: app/templates/games/lobby.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>Lobby de Juegos - GameHubJS</title>

    <!-- CSRF Token -->
    <meta name="csrf-token" content="IjAyNzI2MDMyNzBkODk1MDZmYWU4YWRmN2ZiZTk4YjYyZTc1NjVjMzQi.atIokw.4qyidCYjTuf5nqjoxWDjXlAOQ5U">

    <!-- 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>
/* ============================================
   Lobby Wrapper
   ============================================ */
.lobby-container {
    position: relative;
    overflow-x: hidden;
    padding-bottom: 3rem;
}

/* ============================================
   Global Tech Background (lobby-specific)
   ============================================ */
.lobby-container::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    
    background-image:
        radial-gradient(rgba(108, 99, 255, 0.07) 1px, transparent 1px),
        linear-gradient(rgba(108, 99, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108, 99, 255, 0.025) 1px, transparent 1px),
        radial-gradient(ellipse at 15% 20%, rgba(108, 99, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(255, 101, 132, 0.06) 0%, transparent 50%);
    
    background-size:
        22px 22px,
        110px 110px,
        110px 110px,
        100% 100%,
        100% 100%;
    
    animation: lobbyGridDrift 60s linear infinite;
}

@keyframes lobbyGridDrift {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 22px 22px, 110px 110px, 110px 110px, 0 0, 0 0; }
}

/* Floating game emoji watermark */
.lobby-container::after {
    content: '🎮 🏆 🎯 🚀 🧩 💬 🐍 🧱 🃏 🧊';
    position: fixed;
    inset: 0;
    font-size: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.035;
    letter-spacing: 450px;
    line-height: 550px;
    word-spacing: 550px;
    padding: 220px;
    overflow: hidden;
    animation: lobbyIconFloat 35s ease-in-out infinite;
}

@keyframes lobbyIconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(2deg); }
}

.lobby-hero,
.lobby-filters-wrap,
.lobby-recent,
.lobby-grid-wrap,
.lobby-empty {
    position: relative;
    z-index: 1;
}

/* ============================================
   Hero Banner
   ============================================ */
.lobby-hero {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    margin-bottom: 2rem;
    padding: 2.5rem 2rem;
    background: linear-gradient(135deg, #1a1a3e 0%, #0a0a1a 100%);
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.lobby-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(108, 99, 255, 0.15) 0%, transparent 60%);
    pointer-events: none;
    animation: heroOrb1 18s ease-in-out infinite;
}

.lobby-hero::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -15%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(255, 101, 132, 0.1) 0%, transparent 60%);
    pointer-events: none;
    animation: heroOrb2 22s ease-in-out infinite;
}

@keyframes heroOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 40px) scale(1.1); }
}

@keyframes heroOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, -30px) scale(1.15); }
}

.lobby-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(108, 99, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108, 99, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.lobby-hero-content {
    position: relative;
    z-index: 2;
}

.lobby-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: 2rem;
    background: rgba(108, 99, 255, 0.1);
    border: 1px solid rgba(108, 99, 255, 0.2);
    color: #6c63ff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lobby-hero-badge .live-dot {
    width: 6px;
    height: 6px;
    background: #48bb78;
    border-radius: 50%;
    animation: liveDot 2s ease-in-out infinite;
    box-shadow: 0 0 10px #48bb78;
}

@keyframes liveDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.lobby-hero-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 0.5rem;
    text-shadow: 0 0 40px rgba(108, 99, 255, 0.3);
}

.lobby-hero-title .gradient-text {
    background: linear-gradient(135deg, #6c63ff, #ff6584, #ffd93d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 25px rgba(108, 99, 255, 0.4));
}

.lobby-hero-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 550px;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.lobby-hero-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.lobby-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lobby-hero-stat .value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.lobby-hero-stat .value.text-primary-grad {
    background: linear-gradient(135deg, #6c63ff, #ff6584);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lobby-hero-stat .value.text-yellow-grad {
    background: linear-gradient(135deg, #ffd93d, #ff9f43);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lobby-hero-stat .value.text-green-grad {
    background: linear-gradient(135deg, #48bb78, #00d2d3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lobby-hero-stat .label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* ============================================
   Filters + Search Wrap
   ============================================ */
.lobby-filters-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: visible;
    min-width: 0;
    position: relative;
    z-index: 20;
}

/* ============================================
   Category Dropdown
   ============================================ */
.category-dropdown-wrap {
    position: relative;
    min-width: 0;
    flex: 0 1 220px;
}

@media (max-width: 991px) {
    .category-dropdown-wrap {
        flex: 1 1 100%;
    }
}

.category-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-align: left;
    min-height: 40px;
    -webkit-tap-highlight-color: transparent;
}

.category-dropdown-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(108, 99, 255, 0.3);
}

.category-dropdown-btn[aria-expanded="true"] {
    background: rgba(108, 99, 255, 0.1);
    border-color: rgba(108, 99, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.category-dropdown-btn .cd-emoji {
    font-size: 1.05rem;
    flex-shrink: 0;
    line-height: 1;
}

.category-dropdown-btn .cd-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
}

.category-dropdown-btn .cd-chevron {
    font-size: 0.65rem;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.category-dropdown-btn[aria-expanded="true"] .cd-chevron {
    transform: rotate(180deg);
    color: #6c63ff;
}

/* ============================================
   Category Dropdown Panel
   ============================================
   IDENTICAL layout on desktop and mobile. The panel is
   `position: absolute` anchored just below the trigger button.
   No viewport units, no fixed positioning, no bottom sheet.
   This is robust across every mobile browser. */
.category-dropdown-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    min-width: 260px;
    z-index: 100;
    background: linear-gradient(135deg, #1a1a3e 0%, #12122a 100%);
    border: 1px solid rgba(108, 99, 255, 0.25);
    border-radius: 0.9rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(108, 99, 255, 0.1);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.category-dropdown-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hide the drag handle everywhere — it was a bottom-sheet
   affordance that no longer applies. */
.category-dropdown-handle {
    display: none !important;
}

/* Search row inside the panel */
.category-dropdown-search {
    padding: 0.75rem 0.85rem 0.55rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.category-dropdown-search-inner {
    position: relative;
    flex: 1;
    min-width: 0;
}

.category-dropdown-search input {
    width: 100%;
    padding: 0.55rem 0.85rem 0.55rem 2.2rem;
    border-radius: 0.6rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
}

.category-dropdown-search input::placeholder {
    color: var(--text-muted);
}

.category-dropdown-search input:focus {
    border-color: rgba(108, 99, 255, 0.5);
    background: rgba(108, 99, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.category-dropdown-search .cd-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.8rem;
    pointer-events: none;
}

/* Close button */
.category-dropdown-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    padding: 0;
}

.category-dropdown-close:hover {
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.3);
}

.category-dropdown-close:active {
    transform: scale(0.92);
}

/* List of options */
.category-dropdown-list {
    overflow-y: auto;
    padding: 0.35rem;
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 99, 255, 0.3) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.category-dropdown-list::-webkit-scrollbar {
    width: 6px;
}

.category-dropdown-list::-webkit-scrollbar-track {
    background: transparent;
}

.category-dropdown-list::-webkit-scrollbar-thumb {
    background: rgba(108, 99, 255, 0.3);
    border-radius: 3px;
}

.category-dropdown-list::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 99, 255, 0.5);
}

.category-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    min-width: 0;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.category-dropdown-item:hover,
.category-dropdown-item.focused {
    background: rgba(108, 99, 255, 0.12);
    color: #fff;
}

.category-dropdown-item.active {
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.25), rgba(255, 101, 132, 0.15));
    color: #fff;
    font-weight: 600;
}

.category-dropdown-item .cdi-emoji {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
    width: 1.2rem;
    text-align: center;
}

.category-dropdown-item .cdi-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-dropdown-item .cdi-count {
    font-size: 0.6rem;
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
    font-weight: 700;
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
}

.category-dropdown-item.active .cdi-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.category-dropdown-item .cdi-check {
    font-size: 0.7rem;
    color: #6c63ff;
    opacity: 0;
    flex-shrink: 0;
}

.category-dropdown-item.active .cdi-check {
    opacity: 1;
}

.category-dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0.35rem 0.5rem;
}

.category-dropdown-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Backdrop is disabled entirely. The panel uses a click-outside
   handler to close. The element stays in the DOM for backwards
   compatibility but is never shown. */
.category-dropdown-backdrop {
    display: none !important;
}

/* ============================================
   Type Filters
   ============================================ */
.lobby-filter-group {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.lobby-filter-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-right: 0.4rem;
    white-space: nowrap;
}

.lobby-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-height: 40px;
    align-items: center;
}

.lobby-filter-pill::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(108, 99, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.lobby-filter-pill:hover::before {
    width: 200%;
    height: 200%;
}

.lobby-filter-pill:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: rgba(108, 99, 255, 0.3);
}

.lobby-filter-pill.active {
    background: linear-gradient(135deg, #6c63ff, #ff6584);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px rgba(108, 99, 255, 0.35);
}

.lobby-filter-pill .pill-count {
    font-size: 0.6rem;
    padding: 0.05rem 0.4rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    margin-left: 0.15rem;
}

.lobby-filter-pill.active .pill-count {
    background: rgba(255, 255, 255, 0.25);
}

/* Search box */
.lobby-search-box {
    position: relative;
    flex: 1;
    min-width: 180px;
    margin-left: auto;
}

.lobby-search-box input {
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 2.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    min-height: 40px;
    font-family: inherit;
}

.lobby-search-box input:focus {
    outline: none;
    border-color: rgba(108, 99, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.lobby-search-box input::placeholder {
    color: var(--text-muted);
}

.lobby-search-box .search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

/* ============================================
   Recent Games Strip
   ============================================ */
.lobby-recent {
    margin-bottom: 2rem;
}

.lobby-recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0 0.25rem;
}

.lobby-recent-header h6 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lobby-recent-header h6 i {
    color: #4facfe;
}

.lobby-recent-scroll {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.25rem 0.15rem 0.5rem;
    scrollbar-width: thin;
}

.lobby-recent-scroll::-webkit-scrollbar {
    height: 4px;
}

.lobby-recent-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 2px;
}

.lobby-recent-scroll::-webkit-scrollbar-thumb {
    background: rgba(108, 99, 255, 0.3);
    border-radius: 2px;
}

.lobby-recent-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 99, 255, 0.5);
}

.lobby-recent-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.lobby-recent-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.05), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.lobby-recent-item:hover::before {
    transform: translateX(100%);
}

.lobby-recent-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(108, 99, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(108, 99, 255, 0.15);
}

.lobby-recent-icon {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.2), rgba(255, 101, 132, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.lobby-recent-name {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ============================================
   Game Grid
   ============================================ */
.lobby-grid-wrap {
    position: relative;
    z-index: 1;
}

.lobby-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 0 0.25rem;
}

.lobby-grid-header h6 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lobby-grid-header h6 i {
    color: #6c63ff;
}

.lobby-grid-header .result-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.lobby-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

/* ============================================
   Game Card
   ============================================ */
.lobby-game-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 1.25rem;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.lobby-game-card::before,
.lobby-game-card::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(108, 99, 255, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 5;
}

.lobby-game-card::before {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
    border-radius: 6px 0 0 0;
}

.lobby-game-card::after {
    bottom: 8px;
    right: 8px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 6px 0;
}

.lobby-game-card:hover::before,
.lobby-game-card:hover::after {
    opacity: 1;
}

.lobby-game-card:hover {
    transform: translateY(-8px);
    border-color: rgba(108, 99, 255, 0.4);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(108, 99, 255, 0.15);
    text-decoration: none;
}

.lobby-game-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, #12122e, #0a0a1a);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.lobby-game-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(108, 99, 255, 0.12) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.6;
    z-index: 0;
}

.lobby-game-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 26, 0.95) 0%, transparent 60%);
    z-index: 1;
}

.lobby-game-emoji {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 25px rgba(108, 99, 255, 0.3));
    transition: transform 0.5s ease;
}

.lobby-game-card:hover .lobby-game-emoji {
    transform: scale(1.15) rotate(-5deg);
}

.lobby-game-type {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    padding: 0.2rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 3;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lobby-game-type.type-2d {
    background: rgba(108, 99, 255, 0.85);
    color: #fff;
    box-shadow: 0 0 15px rgba(108, 99, 255, 0.5);
}

.lobby-game-type.type-3d {
    background: rgba(255, 101, 132, 0.85);
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 101, 132, 0.5);
}

.lobby-game-featured {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 217, 61, 0.95);
    color: #1a1a2e;
    z-index: 3;
    box-shadow: 0 0 15px rgba(255, 217, 61, 0.5);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.lobby-game-body {
    padding: 0.85rem 1rem 1rem;
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lobby-game-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lobby-game-category {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 0.6rem;
}

.lobby-game-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.lobby-game-stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.lobby-game-stat i {
    font-size: 0.65rem;
    color: #6c63ff;
}

.lobby-game-stat.stat-rating i {
    color: #ffd93d;
}

.lobby-game-play {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c63ff, #ff6584);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    z-index: 4;
    box-shadow: 0 8px 25px rgba(108, 99, 255, 0.4);
}

.lobby-game-card:hover .lobby-game-play {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   Empty State
   ============================================ */
.lobby-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 1.25rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lobby-empty-icon {
    font-size: 4rem;
    opacity: 0.3;
    display: block;
    margin-bottom: 1rem;
    color: #6c63ff;
}

.lobby-empty h5 {
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.lobby-empty p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* ============================================
   MORE GAMES COMING SOON
   ============================================ */
.lobby-coming-soon {
    margin-top: 4rem;
    padding: 0 0.25rem;
}

.lobby-coming-soon-inner {
    position: relative;
    padding: 3rem 2rem;
    border-radius: 1.5rem;
    background:
        linear-gradient(135deg, rgba(108, 99, 255, 0.06), rgba(255, 101, 132, 0.04)),
        linear-gradient(135deg, #12122e, #0a0a1a);
    border: 1px solid rgba(108, 99, 255, 0.15);
    text-align: center;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(108, 99, 255, 0.1);
}

.lobby-coming-soon-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(108, 99, 255, 0.12) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.5;
    pointer-events: none;
    animation: lobbyComingGrid 40s linear infinite;
}

@keyframes lobbyComingGrid {
    0% { background-position: 0 0; }
    100% { background-position: 22px 22px; }
}

.lobby-coming-soon-inner::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(108, 99, 255, 0.15) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    animation: heroOrb1 18s ease-in-out infinite;
}

.lobby-coming-soon-icon {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c63ff, #ff6584);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #fff;
    box-shadow: 0 15px 50px rgba(108, 99, 255, 0.4);
    animation: lobbyRocketBob 3s ease-in-out infinite;
}

@keyframes lobbyRocketBob {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-8px) rotate(5deg); }
}

.lobby-coming-soon-title {
    position: relative;
    z-index: 2;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.lobby-coming-soon-title .gradient-text {
    background: linear-gradient(135deg, #6c63ff, #ff6584, #ffd93d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 25px rgba(108, 99, 255, 0.4));
}

.lobby-coming-soon-desc {
    position: relative;
    z-index: 2;
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 560px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.lobby-coming-soon-chips {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    max-width: 720px;
    margin: 0 auto 2rem;
}

.lobby-coming-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(108, 99, 255, 0.15);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: default;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lobby-coming-chip span:first-child {
    font-size: 0.95rem;
    filter: drop-shadow(0 0 6px rgba(108, 99, 255, 0.4));
}

.lobby-coming-chip:hover {
    background: rgba(108, 99, 255, 0.08);
    border-color: rgba(108, 99, 255, 0.4);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(108, 99, 255, 0.2);
}

.lobby-coming-chip-more {
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.15), rgba(255, 101, 132, 0.1));
    border-color: rgba(108, 99, 255, 0.3);
    color: #fff;
    font-weight: 700;
}

.lobby-coming-chip-more:hover {
    background: linear-gradient(135deg, #6c63ff, #ff6584);
    border-color: transparent;
    color: #fff;
}

.lobby-coming-soon-note {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 2rem;
    background: rgba(255, 217, 61, 0.06);
    border: 1px solid rgba(255, 217, 61, 0.2);
    color: var(--text-muted);
    font-size: 0.8rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lobby-coming-soon-note i {
    color: #ffd93d;
    font-size: 0.85rem;
    filter: drop-shadow(0 0 8px rgba(255, 217, 61, 0.5));
}

.lobby-coming-soon-note a {
    color: #ffd93d;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 217, 61, 0.4);
    transition: all 0.2s ease;
}

.lobby-coming-soon-note a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 992px) {
    .lobby-game-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1rem;
    }
    
    .lobby-hero {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .lobby-hero {
        padding: 1.75rem 1.25rem;
    }
    
    .lobby-hero-title {
        font-size: 1.75rem;
    }
    
    .lobby-hero-subtitle {
        font-size: 0.9rem;
    }
    
    .lobby-hero-stats {
        gap: 1.25rem;
        margin-top: 1rem;
    }
    
    .lobby-hero-stat .value {
        font-size: 1.15rem;
    }
    
    .lobby-filters-wrap {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
        flex-direction: column;
        align-items: stretch;
    }
    
    .category-dropdown-wrap {
        flex: 1 1 auto;
        width: 100%;
    }

    /* Mobile: the panel spans the full width of the filters-wrap.
       Its max-height is smaller so it doesn't cover the entire
       screen, and it scrolls internally. */
    .category-dropdown-panel {
        min-width: 0;
        max-height: 55vh;
    }

    /* Tighter rows so more categories fit before scroll. */
    .category-dropdown-item {
        padding: 0.55rem 0.7rem;
        font-size: 0.82rem;
    }
    .category-dropdown-item .cdi-emoji {
        font-size: 1rem;
    }
    .category-dropdown-search {
        padding: 0.6rem 0.7rem 0.5rem;
    }
    .category-dropdown-search input {
        padding: 0.55rem 0.75rem 0.55rem 2rem;
        font-size: 0.82rem;
        min-height: 40px;
    }
    .category-dropdown-close {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
    }
    
    .lobby-filter-group {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }
    
    .lobby-filter-group::-webkit-scrollbar {
        height: 3px;
    }
    
    .lobby-filter-group::-webkit-scrollbar-thumb {
        background: rgba(108, 99, 255, 0.3);
        border-radius: 2px;
    }
    
    .lobby-search-box {
        flex: 1 1 100%;
        margin-left: 0;
        order: 3;
    }
    
    .lobby-game-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .lobby-game-thumb {
        font-size: 3rem;
    }
    
    .lobby-game-body {
        padding: 0.65rem 0.75rem 0.75rem;
    }
    
    .lobby-game-name {
        font-size: 0.85rem;
    }
    
    .lobby-game-category {
        font-size: 0.6rem;
    }
    
    .lobby-game-meta {
        padding-top: 0.5rem;
    }
    
    .lobby-game-stat {
        font-size: 0.6rem;
    }
    
    .lobby-game-play {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
        bottom: 0.75rem;
        right: 0.75rem;
        opacity: 1;
        transform: scale(1);
    }
    
    .lobby-coming-soon-inner {
        padding: 2rem 1.25rem;
    }

    .lobby-coming-soon-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .lobby-coming-soon-desc {
        font-size: 0.9rem;
    }

    .lobby-coming-chip {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }

    .lobby-coming-soon-note {
        font-size: 0.75rem;
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .lobby-hero-title {
        font-size: 1.4rem;
    }
    
    .lobby-hero-stats {
        gap: 1rem;
    }
    
    .lobby-hero-stat .value {
        font-size: 1rem;
    }
    
    .lobby-hero-stat .label {
        font-size: 0.55rem;
    }
    
    .lobby-filter-pill {
        font-size: 0.65rem;
        padding: 0.25rem 0.65rem;
        min-height: 34px;
    }
    
    .lobby-filter-pill .pill-count {
        display: none;
    }
    
    .lobby-game-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
    
    .lobby-game-thumb {
        aspect-ratio: 1;
        font-size: 2.5rem;
    }
    
    .lobby-game-featured span {
        display: none;
    }
    
    .lobby-game-featured {
        padding: 0.15rem 0.3rem;
    }
    
    .lobby-container::before {
        background-size: 16px 16px, 80px 80px, 80px 80px, 100% 100%, 100% 100%;
    }
    
    .lobby-container::after {
        opacity: 0.025;
        letter-spacing: 200px;
        line-height: 320px;
        word-spacing: 320px;
        padding: 100px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lobby-container::before,
    .lobby-container::after,
    .lobby-hero::before,
    .lobby-hero::after {
        animation: none;
    }
    
    .lobby-game-card,
    .lobby-recent-item {
        transition: none;
    }
}
</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 active"
               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="container-fluid px-2 px-md-4 py-3 lobby-container">

    <!-- HERO BANNER -->
    <div class="lobby-hero">
        <div class="lobby-hero-grid"></div>
        <div class="lobby-hero-content">
            <div class="lobby-hero-badge">
                <span class="live-dot"></span>
                <span>En Vivo</span>
            </div>
            
            <h1 class="lobby-hero-title">
                Sala de <span class="gradient-text">Lobby</span>
            </h1>
            
            <p class="lobby-hero-subtitle">
                Descubre, juega y compite. 1 juegos en 2D y 3D — todos gratis, todos instantáneos, todos en tu navegador.
            </p>
            
            <div class="lobby-hero-stats">
                <div class="lobby-hero-stat">
                    <span class="value text-primary-grad">1</span>
                    <span class="label">Total de Juegos</span>
                </div>
                <div class="lobby-hero-stat">
                    <span class="value text-yellow-grad">1</span>
                    <span class="label">Destacados</span>
                </div>
                <div class="lobby-hero-stat">
                    <span class="value text-green-grad">
                        1
                    </span>
                    <span class="label">Juegos 2D</span>
                </div>
                <div class="lobby-hero-stat">
                    <span class="value text-primary-grad">
                        0
                    </span>
                    <span class="label">Juegos 3D</span>
                </div>
            </div>
        </div>
    </div>

    <!-- FILTERS + SEARCH -->
    <div class="lobby-filters-wrap">

        <!-- Category Dropdown -->
        <div class="category-dropdown-wrap" id="categoryDropdownWrap">
            <button type="button"
                    class="category-dropdown-btn"
                    id="categoryDropdownBtn"
                    aria-haspopup="listbox"
                    aria-expanded="false"
                    aria-controls="categoryDropdownPanel">
                <span class="cd-emoji" id="categoryDropdownEmoji">
                    
                        
                        💥
                        
                    
                </span>
                <span class="cd-label" id="categoryDropdownLabel">
                    
                        Reaction
                    
                </span>
                <i class="fas fa-chevron-down cd-chevron"></i>
            </button>

            <div class="category-dropdown-panel"
                 id="categoryDropdownPanel"
                 role="listbox"
                 aria-labelledby="categoryDropdownBtn">

                <div class="category-dropdown-search">
                    <div class="category-dropdown-search-inner">
                        <i class="fas fa-search cd-search-icon"></i>
                        <input type="text"
                               id="categoryDropdownSearch"
                               placeholder="Buscar categorías…"
                               autocomplete="off"
                               spellcheck="false">
                    </div>
                    <button type="button"
                            class="category-dropdown-close"
                            id="categoryDropdownClose"
                            aria-label="Cerrar">
                        <i class="fas fa-times"></i>
                    </button>
                </div>

                <div class="category-dropdown-list" id="categoryDropdownList">
                    
                    
                    <a href="/games/lobby?category=all"
                       class="category-dropdown-item "
                       data-name="todas las categorías"
                       data-slug="all"
                       role="option"
                       aria-selected="false">
                        <span class="cdi-emoji">📂</span>
                        <span class="cdi-name">Todas las categorías</span>
                        <span class="cdi-count">1</span>
                        <i class="fas fa-check cdi-check"></i>
                    </a>

                    
                        <div class="category-dropdown-divider"></div>

                        
                            
                            
                            
                            <a href="/games/lobby?category=3D"
                               class="category-dropdown-item "
                               data-name="3d"
                               data-slug="3D"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🧊
                                    
                                </span>
                                <span class="cdi-name">3D</span>
                                
                                    <span class="cdi-count">6</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Action"
                               class="category-dropdown-item "
                               data-name="action"
                               data-slug="Action"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    💥
                                    
                                </span>
                                <span class="cdi-name">Action</span>
                                
                                    <span class="cdi-count">2</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Adventure"
                               class="category-dropdown-item "
                               data-name="adventure"
                               data-slug="Adventure"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🗺️
                                    
                                </span>
                                <span class="cdi-name">Adventure</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Arcade"
                               class="category-dropdown-item "
                               data-name="arcade"
                               data-slug="Arcade"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🕹️
                                    
                                </span>
                                <span class="cdi-name">Arcade</span>
                                
                                    <span class="cdi-count">6</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Board"
                               class="category-dropdown-item "
                               data-name="board"
                               data-slug="Board"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🎲
                                    
                                </span>
                                <span class="cdi-name">Board</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Card"
                               class="category-dropdown-item "
                               data-name="card"
                               data-slug="Card"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🃏
                                    
                                </span>
                                <span class="cdi-name">Card</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Casual"
                               class="category-dropdown-item "
                               data-name="casual"
                               data-slug="Casual"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🧘
                                    
                                </span>
                                <span class="cdi-name">Casual</span>
                                
                                    <span class="cdi-count">3</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Classic"
                               class="category-dropdown-item "
                               data-name="classic"
                               data-slug="Classic"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🕰️
                                    
                                </span>
                                <span class="cdi-name">Classic</span>
                                
                                    <span class="cdi-count">8</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Creative"
                               class="category-dropdown-item "
                               data-name="creative"
                               data-slug="Creative"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🎨
                                    
                                </span>
                                <span class="cdi-name">Creative</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Defense"
                               class="category-dropdown-item "
                               data-name="defense"
                               data-slug="Defense"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🛡️
                                    
                                </span>
                                <span class="cdi-name">Defense</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Endless"
                               class="category-dropdown-item "
                               data-name="endless"
                               data-slug="Endless"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    ♾️
                                    
                                </span>
                                <span class="cdi-name">Endless</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Logic"
                               class="category-dropdown-item "
                               data-name="logic"
                               data-slug="Logic"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🧠
                                    
                                </span>
                                <span class="cdi-name">Logic</span>
                                
                                    <span class="cdi-count">5</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Memory"
                               class="category-dropdown-item "
                               data-name="memory"
                               data-slug="Memory"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🧩
                                    
                                </span>
                                <span class="cdi-name">Memory</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Music"
                               class="category-dropdown-item "
                               data-name="music"
                               data-slug="Music"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🎵
                                    
                                </span>
                                <span class="cdi-name">Music</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Physics"
                               class="category-dropdown-item "
                               data-name="physics"
                               data-slug="Physics"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    ⚙️
                                    
                                </span>
                                <span class="cdi-name">Physics</span>
                                
                                    <span class="cdi-count">2</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Platform"
                               class="category-dropdown-item "
                               data-name="platform"
                               data-slug="Platform"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🏃
                                    
                                </span>
                                <span class="cdi-name">Platform</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Puzzle"
                               class="category-dropdown-item "
                               data-name="puzzle"
                               data-slug="Puzzle"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🧩
                                    
                                </span>
                                <span class="cdi-name">Puzzle</span>
                                
                                    <span class="cdi-count">3</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Racing"
                               class="category-dropdown-item "
                               data-name="racing"
                               data-slug="Racing"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🏎️
                                    
                                </span>
                                <span class="cdi-name">Racing</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Reaction"
                               class="category-dropdown-item active"
                               data-name="reaction"
                               data-slug="Reaction"
                               role="option"
                               aria-selected="true">
                                <span class="cdi-emoji">
                                    💥
                                    
                                </span>
                                <span class="cdi-name">Reaction</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Reflex"
                               class="category-dropdown-item "
                               data-name="reflex"
                               data-slug="Reflex"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    ⚡
                                    
                                </span>
                                <span class="cdi-name">Reflex</span>
                                
                                    <span class="cdi-count">4</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Shooter"
                               class="category-dropdown-item "
                               data-name="shooter"
                               data-slug="Shooter"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    👾
                                    
                                </span>
                                <span class="cdi-name">Shooter</span>
                                
                                    <span class="cdi-count">2</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Sim"
                               class="category-dropdown-item "
                               data-name="sim"
                               data-slug="Sim"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🎮
                                    
                                </span>
                                <span class="cdi-name">Sim</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Skill"
                               class="category-dropdown-item "
                               data-name="skill"
                               data-slug="Skill"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🎯
                                    
                                </span>
                                <span class="cdi-name">Skill</span>
                                
                                    <span class="cdi-count">5</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Space"
                               class="category-dropdown-item "
                               data-name="space"
                               data-slug="Space"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🎮
                                    
                                </span>
                                <span class="cdi-name">Space</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Sports"
                               class="category-dropdown-item "
                               data-name="sports"
                               data-slug="Sports"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    ⚽
                                    
                                </span>
                                <span class="cdi-name">Sports</span>
                                
                                    <span class="cdi-count">4</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Strategy"
                               class="category-dropdown-item "
                               data-name="strategy"
                               data-slug="Strategy"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    ♟️
                                    
                                </span>
                                <span class="cdi-name">Strategy</span>
                                
                                    <span class="cdi-count">1</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                            
                            
                            
                            <a href="/games/lobby?category=Word"
                               class="category-dropdown-item "
                               data-name="word"
                               data-slug="Word"
                               role="option"
                               aria-selected="false">
                                <span class="cdi-emoji">
                                    🎮
                                    
                                </span>
                                <span class="cdi-name">Word</span>
                                
                                    <span class="cdi-count">2</span>
                                
                                <i class="fas fa-check cdi-check"></i>
                            </a>
                        
                    

                    <div class="category-dropdown-empty" id="categoryDropdownEmpty" style="display:none;">
                        No hay categorías coincidentes
                    </div>
                </div>
            </div>
        </div>

        <!-- Type Filter Pills -->
        <div class="lobby-filter-group">
            <a href="/games/lobby?type=all&amp;category=Reaction&amp;search="
               class="lobby-filter-pill active">
                <i class="fas fa-th"></i> Todos
            </a>
            <a href="/games/lobby?type=2d&amp;category=Reaction&amp;search="
               class="lobby-filter-pill ">
                <i class="fas fa-square"></i> 2D
            </a>
            <a href="/games/lobby?type=3d&amp;category=Reaction&amp;search="
               class="lobby-filter-pill ">
                <i class="fas fa-cube"></i> 3D
            </a>
        </div>

        <!-- Search Box -->
        <div class="lobby-search-box">
            <i class="fas fa-search search-icon"></i>
            <form method="GET" action="/games/lobby">
                
                
                    <input type="hidden" name="category" value="Reaction">
                
                <input type="text" 
                       id="lobbySearchInput"
                       name="search" 
                       placeholder="Buscar juegos..." 
                       value=""
                       autocomplete="off">
            </form>
        </div>
    </div>

    <!-- RECENT GAMES -->
    

    <!-- GAME GRID -->
    <div class="lobby-grid-wrap">
        <div class="lobby-grid-header">
            <h6><i class="fas fa-gamepad"></i> Todos los Juegos</h6>
            <span class="result-count">
                1 juego encontrado
            </span>
        </div>

        
            <div class="lobby-game-grid">
                
                    <a href="/games/play/colortap" 
                       class="lobby-game-card"
                       data-type="2d">
                        
                        <div class="lobby-game-thumb">
                            <span class="lobby-game-emoji">
                                🎨
                                
                            </span>
                            
                            
                                <span class="lobby-game-featured">
                                    <i class="fas fa-star"></i> <span>Destacado</span>
                                </span>
                            
                            
                            <span class="lobby-game-type type-2d">
                                2D
                            </span>

                            <div class="lobby-game-play">
                                <i class="fas fa-play"></i>
                            </div>
                        </div>
                        
                        <div class="lobby-game-body">
                            <div class="lobby-game-name">Color Tap</div>
                            <div class="lobby-game-category">
                                Reaction
                            </div>
                            
                            <div class="lobby-game-meta">
                                <div class="lobby-game-stat">
                                    <i class="fas fa-play"></i>
                                    <span>7</span>
                                </div>
                                <div class="lobby-game-stat stat-rating">
                                    <i class="fas fa-star"></i>
                                    <span>0.0</span>
                                </div>
                                <div class="lobby-game-stat">
                                    <i class="fas fa-clock"></i>
                                    <span>60s</span>
                                </div>
                            </div>
                        </div>
                    </a>
                
            </div>
        

        <!-- MORE GAMES COMING SOON -->
        <div class="lobby-coming-soon">
            <div class="lobby-coming-soon-inner">
                <div class="lobby-coming-soon-icon">
                    <i class="fas fa-rocket"></i>
                </div>
                
                <h3 class="lobby-coming-soon-title">
                    Más Juegos <span class="gradient-text">Próximamente</span>
                </h3>
                
                <p class="lobby-coming-soon-desc">
                    Siempre hay nuevos juegos en camino. Aquí tienes un adelanto de lo que viene al lobby.
                </p>
                
                <div class="lobby-coming-soon-chips">
                    <span class="lobby-coming-chip">
                        <span>🫧</span> Bubble Shooter
                    </span>
                    <span class="lobby-coming-chip">
                        <span>👻</span> Pac-Man
                    </span>
                    <span class="lobby-coming-chip">
                        <span>🎴</span> Solitario
                    </span>
                    <span class="lobby-coming-chip">
                        <span>♟️</span> Ajedrez
                    </span>
                    <span class="lobby-coming-chip">
                        <span>📦</span> Sokoban 3D
                    </span>
                    <span class="lobby-coming-chip">
                        <span>💡</span> Lights Out 3D
                    </span>
                    <span class="lobby-coming-chip lobby-coming-chip-more">
                        + más
                    </span>
                </div>

                <div class="lobby-coming-soon-note">
                    <i class="fas fa-lightbulb"></i>
                    <span>
                        ¿Tienes una idea de juego?
                        <a href="/suggest">Sugiere un juego</a> —
                        construimos lo que la comunidad quiere.
                    </span>
                </div>
            </div>
        </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 active">
            <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>

    
    

    
<script>
(function() {
    'use strict';
    
    // ============================================
    // Category Dropdown Controller
    // ============================================
    var catWrap = document.getElementById('categoryDropdownWrap');
    var catBtn = document.getElementById('categoryDropdownBtn');
    var catPanel = document.getElementById('categoryDropdownPanel');
    var catList = document.getElementById('categoryDropdownList');
    var catSearch = document.getElementById('categoryDropdownSearch');
    var catClose = document.getElementById('categoryDropdownClose');
    var catEmpty = document.getElementById('categoryDropdownEmpty');
    
    if (catBtn && catPanel && catList) {
        var catItems = Array.prototype.slice.call(catList.querySelectorAll('.category-dropdown-item'));
        var catFocusedIndex = -1;
        
        function openCategoryDropdown() {
            catPanel.classList.add('open');
            catBtn.setAttribute('aria-expanded', 'true');
            if (catSearch) {
                catSearch.value = '';
                filterCategories('');
                setTimeout(function() { catSearch.focus(); }, 60);
            }
            catFocusedIndex = -1;
        }
        
        function closeCategoryDropdown() {
            catPanel.classList.remove('open');
            catBtn.setAttribute('aria-expanded', 'false');
            catFocusedIndex = -1;
        }
        
        function toggleCategoryDropdown() {
            if (catPanel.classList.contains('open')) closeCategoryDropdown();
            else openCategoryDropdown();
        }
        
        function filterCategories(query) {
            var q = (query || '').trim().toLowerCase();
            var visibleCount = 0;
            for (var i = 0; i < catItems.length; i++) {
                var it = catItems[i];
                var name = (it.dataset.name || '').toLowerCase();
                var slug = (it.dataset.slug || '').toLowerCase();
                var match = q === '' || name.indexOf(q) !== -1 || slug.indexOf(q) !== -1;
                it.style.display = match ? '' : 'none';
                if (match) visibleCount++;
            }
            if (catEmpty) {
                catEmpty.style.display = visibleCount === 0 ? '' : 'none';
            }
        }
        
        function setCatFocused(newIndex) {
            for (var i = 0; i < catItems.length; i++) {
                catItems[i].classList.remove('focused');
            }
            var visible = catItems.filter(function(it) { return it.style.display !== 'none'; });
            if (visible.length === 0) {
                catFocusedIndex = -1;
                return;
            }
            if (newIndex < 0) newIndex = visible.length - 1;
            if (newIndex >= visible.length) newIndex = 0;
            catFocusedIndex = newIndex;
            visible[catFocusedIndex].classList.add('focused');
            var el = visible[catFocusedIndex];
            if (el.scrollIntoView) {
                el.scrollIntoView({ block: 'nearest' });
            }
        }
        
        function activateFocusedCategory() {
            var visible = catItems.filter(function(it) { return it.style.display !== 'none'; });
            if (catFocusedIndex >= 0 && catFocusedIndex < visible.length) {
                window.location.href = visible[catFocusedIndex].href;
            }
        }
        
        catBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            toggleCategoryDropdown();
        });
        
        if (catClose) {
            catClose.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                closeCategoryDropdown();
                catBtn.focus();
            });
        }
        
        document.addEventListener('click', function(e) {
            if (!catPanel.classList.contains('open')) return;
            if (catWrap.contains(e.target)) return;
            closeCategoryDropdown();
        });
        
        document.addEventListener('keydown', function(e) {
            if (!catPanel.classList.contains('open')) return;
            if (e.key === 'Escape') {
                e.preventDefault();
                closeCategoryDropdown();
                catBtn.focus();
            }
        });
        
        if (catSearch) {
            catSearch.addEventListener('input', function() {
                filterCategories(catSearch.value);
                catFocusedIndex = -1;
            });
            
            catSearch.addEventListener('keydown', function(e) {
                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    setCatFocused(catFocusedIndex + 1);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    setCatFocused(catFocusedIndex - 1);
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    activateFocusedCategory();
                }
            });
        }
        
        console.log('🎮 Category dropdown initialized with', catItems.length, 'options');
    }
    
    // ============================================
    // Search Box
    // ============================================
    var searchInput = document.getElementById('lobbySearchInput');
    if (searchInput) {
        var searchTimeout = null;
        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            var value = this.value.trim();
            searchTimeout = setTimeout(function() {
                if (value.length === 0 || value.length >= 2) {
                    searchInput.closest('form').submit();
                }
            }, 500);
        });
    }
    
    document.addEventListener('keydown', function(e) {
        if (((e.ctrlKey || e.metaKey) && e.key === 'f') || 
            (e.key === '/' && document.activeElement.tagName !== 'INPUT')) {
            e.preventDefault();
            if (searchInput) {
                searchInput.focus();
                searchInput.select();
            }
        }
        
        if (e.key === 'Escape' && document.activeElement === searchInput) {
            if (searchInput.value) {
                searchInput.value = '';
                searchInput.closest('form').submit();
            } else {
                searchInput.blur();
            }
        }
    });
    
    // ============================================
    // Game Card Fade-In
    // ============================================
    var cards = document.querySelectorAll('.lobby-game-card');
    if ('IntersectionObserver' in window) {
        var observer = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.05 });
        
        cards.forEach(function(card, index) {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'opacity 0.5s ease ' + (index * 0.03) + 's, transform 0.5s ease ' + (index * 0.03) + 's';
            observer.observe(card);
        });
    }
    
    console.log('🎮 Lobby initialized:', cards.length, 'games');
    
})();
</script>

</body>
</html>

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