<!-- 
  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="hi" 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>गेम लॉबी - GameHubJS</title>

    <!-- CSRF Token -->
    <meta name="csrf-token" content="ImNmYjM5Y2QwZGViY2FhY2U4YWNhODVjZGI2ODllNDZlOTJhZTczY2Yi.atI0NQ.W-jEo5TIfB8P4jZbzMl9dgg6GBg">

    <!-- 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>होम</span>
            </a>

            <a class="app-sidebar-link active"
               href="/games/lobby">
                <i class="fas fa-gamepad"></i>
                <span>गेम्स</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>चैट रूम</span>
                </a>
            
            

            
            
                <a class="app-sidebar-link" href="/gate?feature=leaderboard&amp;next=/leaderboard">
                    <i class="fas fa-trophy"></i>
                    <span>लीडरबोर्ड</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>गेम सुझाएं</span>
                </a>
            

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

            
            
                <a class="app-sidebar-link" href="/gate?feature=bug&amp;next=/">
                    <i class="fas fa-bug" style="color:#ff6b6b;"></i>
                    <span>बग की रिपोर्ट करें</span>
                </a>
            

            
            
                <a class="app-sidebar-link" href="/gate?feature=notifications&amp;next=/notifications">
                    <i class="fas fa-bell" style="color:#6c63ff;"></i>
                    <span>सूचनाएं</span>
                </a>
            

            
            <a class="app-sidebar-link "
               href="/contact">
                <i class="fas fa-envelope" style="color:#4facfe;"></i>
                <span>संपर्क करें</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>भाषा</span>
                    <span class="app-sidebar-lang-code">HI</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 "
                           href="?lang=es">
                            <i class="fas fa-check"></i>
                            <span>🇪🇸 Español</span>
                        </a>
                    
                        <a class="app-sidebar-lang-item active"
                           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>ऐप इंस्टॉल करें</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>लॉगिन</span>
                </a>
                <a class="app-sidebar-link app-sidebar-link-accent" href="/auth/register">
                    <i class="fas fa-user-plus"></i>
                    <span>अभी जुड़ें</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="और विकल्प">
            <div class="app-drawer-handle" onclick="closeAppDrawer()">
                <span></span>
            </div>

            <div class="app-drawer-header">
                <h5>अधिक</h5>
                <button class="app-drawer-close" type="button" onclick="closeAppDrawer()" aria-label="बंद करें">
                    <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>विशेषताएँ</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>चैट रूम</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>लीडरबोर्ड</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>गेम सुझाएं</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>सहायता</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>बग की रिपोर्ट करें</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>सूचनाएं</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>खोजें</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>संपर्क करें</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 "
                                       href="?lang=es">
                                        🇪🇸 Español
                                    </a>
                                
                                    <a class="app-drawer-lang-btn active"
                                       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>GameHubJS के बारे में</span>
                            </a>
                            <a class="app-drawer-item" href="/privacy" onclick="closeAppDrawer()">
                                <i class="fas fa-lock"></i>
                                <span>गोपनीयता</span>
                            </a>
                            <a class="app-drawer-item" href="/terms" onclick="closeAppDrawer()">
                                <i class="fas fa-file-contract"></i>
                                <span>शर्तें</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>ऐप इंस्टॉल करें</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>खाता बनाएं</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>अभी लाइव</span>
            </div>
            
            <h1 class="lobby-hero-title">
                गेम <span class="gradient-text">लॉबी</span>
            </h1>
            
            <p class="lobby-hero-subtitle">
                खोजें, खेलें और प्रतिस्पर्धा करें। 2D और 3D में 1 गेम्स — सभी मुफ़्त, सभी तुरंत, सभी आपके ब्राउज़र में।
            </p>
            
            <div class="lobby-hero-stats">
                <div class="lobby-hero-stat">
                    <span class="value text-primary-grad">1</span>
                    <span class="label">कुल गेम्स</span>
                </div>
                <div class="lobby-hero-stat">
                    <span class="value text-yellow-grad">1</span>
                    <span class="label">फ़ीचर्ड</span>
                </div>
                <div class="lobby-hero-stat">
                    <span class="value text-green-grad">
                        1
                    </span>
                    <span class="label">2D गेम्स</span>
                </div>
                <div class="lobby-hero-stat">
                    <span class="value text-primary-grad">
                        0
                    </span>
                    <span class="label">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">
                    
                        Memory
                    
                </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="श्रेणियाँ खोजें…"
                               autocomplete="off"
                               spellcheck="false">
                    </div>
                    <button type="button"
                            class="category-dropdown-close"
                            id="categoryDropdownClose"
                            aria-label="बंद करें">
                        <i class="fas fa-times"></i>
                    </button>
                </div>

                <div class="category-dropdown-list" id="categoryDropdownList">
                    
                    
                    <a href="/games/lobby?category=all&amp;type=2d"
                       class="category-dropdown-item "
                       data-name="सभी श्रेणियाँ"
                       data-slug="all"
                       role="option"
                       aria-selected="false">
                        <span class="cdi-emoji">📂</span>
                        <span class="cdi-name">सभी श्रेणियाँ</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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               class="category-dropdown-item active"
                               data-name="memory"
                               data-slug="Memory"
                               role="option"
                               aria-selected="true">
                                <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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               class="category-dropdown-item "
                               data-name="reaction"
                               data-slug="Reaction"
                               role="option"
                               aria-selected="false">
                                <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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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&amp;type=2d"
                               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;">
                        कोई श्रेणी मेल नहीं खाती
                    </div>
                </div>
            </div>
        </div>

        <!-- Type Filter Pills -->
        <div class="lobby-filter-group">
            <a href="/games/lobby?type=all&amp;category=Memory&amp;search="
               class="lobby-filter-pill ">
                <i class="fas fa-th"></i> सभी
            </a>
            <a href="/games/lobby?type=2d&amp;category=Memory&amp;search="
               class="lobby-filter-pill active">
                <i class="fas fa-square"></i> 2D
            </a>
            <a href="/games/lobby?type=3d&amp;category=Memory&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="type" value="2d">
                
                
                    <input type="hidden" name="category" value="Memory">
                
                <input type="text" 
                       id="lobbySearchInput"
                       name="search" 
                       placeholder="गेम्स खोजें..." 
                       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> सभी गेम्स</h6>
            <span class="result-count">
                1 गेम मिला
            </span>
        </div>

        
            <div class="lobby-game-grid">
                
                    <a href="/games/play/memory" 
                       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>फ़ीचर्ड</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">Memory Match</div>
                            <div class="lobby-game-category">
                                Memory
                            </div>
                            
                            <div class="lobby-game-meta">
                                <div class="lobby-game-stat">
                                    <i class="fas fa-play"></i>
                                    <span>1</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>120s</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">
                    और गेम्स <span class="gradient-text">जल्द आ रहा है</span>
                </h3>
                
                <p class="lobby-coming-soon-desc">
                    नए गेम्स हमेशा पाइपलाइन में रहते हैं। यहां एक झलक है कि लॉबी में आगे क्या आ रहा है।
                </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> सॉलिटेयर
                    </span>
                    <span class="lobby-coming-chip">
                        <span>♟️</span> शतरंज
                    </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">
                        + और
                    </span>
                </div>

                <div class="lobby-coming-soon-note">
                    <i class="fas fa-lightbulb"></i>
                    <span>
                        गेम का विचार है?
                        <a href="/suggest">गेम सुझाएं</a> —
                        हम वह बनाते हैं जो समुदाय चाहता है।
                    </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>होम</span>
        </a>

        <a href="/games/lobby"
           class="bottom-nav-item active">
            <i class="fas fa-gamepad"></i>
            <span>गेम्स</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>लॉगिन</span>
            </a>

            <a href="/auth/register" class="bottom-nav-item bottom-nav-item-join">
                <i class="fas fa-user-plus"></i>
                <span>जुड़ें</span>
            </a>
        

        <button type="button" class="bottom-nav-item" onclick="openAppDrawer()">
            <i class="fas fa-ellipsis-h"></i>
            <span>अधिक</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;">परिचय</a>
                        <a href="/privacy" style="color: #718096; text-decoration: none; font-size: 0.75rem;">गोपनीयता</a>
                        <a href="/terms" style="color: #718096; text-decoration: none; font-size: 0.75rem;">शर्तें</a>
                        <a href="/suggest" style="color: #ffd93d; text-decoration: none; font-size: 0.75rem;">गेम सुझाएं</a>
                        <a href="/donations/" style="color: #ff6584; text-decoration: none; font-size: 0.75rem;">सहायता</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. सर्वाधिकार सुरक्षित।</span>
                </div>
            </div>
        </div>
    </footer>

    <!-- ============================================
         iOS PWA INSTALL MODAL
         ============================================ -->
    <div class="pwa-ios-modal" id="pwaIosModal">
        <div class="pwa-ios-modal-content">
            <h5>GameHubJS इंस्टॉल करें</h5>
            <p>एक-टैप पहुंच के लिए GameHubJS को अपनी होम स्क्रीन पर जोड़ें:</p>
            <div class="pwa-ios-step">
                <i class="fas fa-share-from-square"></i>
                <span>Safari के टूलबार में &lt;strong&gt;शेयर&lt;/strong&gt; बटन पर टैप करें</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-plus-square"></i>
                <span>स्क्रॉल करें और &lt;strong&gt;होम स्क्रीन पर जोड़ें&lt;/strong&gt; पर टैप करें</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-check-circle"></i>
                <span>ऊपर-दाएं कोने में &lt;strong&gt;जोड़ें&lt;/strong&gt; पर टैप करें</span>
            </div>
            <button type="button" class="pwa-ios-close" onclick="document.getElementById('pwaIosModal').classList.remove('visible')">
                समझ गया
            </button>
        </div>
    </div>

    <!-- ============================================
         CHROME DESKTOP INSTALL MODAL (v9)
         ============================================ -->
    <div class="pwa-ios-modal" id="pwaChromeModal">
        <div class="pwa-ios-modal-content">
            <h5>GameHubJS इंस्टॉल करें</h5>
            <p>अपने कंप्यूटर के डेस्कटॉप या ऐप लॉन्चर से एक-क्लिक पहुंच के लिए GameHubJS जोड़ें:</p>
            <div class="pwa-ios-step">
                <i class="fas fa-ellipsis-v"></i>
                <span>Chrome टूलबार में &lt;strong&gt;तीन-बिंदु मेनू&lt;/strong&gt; (⋮) पर क्लिक करें</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-download"></i>
                <span>&lt;strong&gt;सहेजें और साझा करें&lt;/strong&gt; → &lt;strong&gt;पेज को ऐप के रूप में इंस्टॉल करें&lt;/strong&gt; चुनें</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-check-circle"></i>
                <span>पुष्टि करें और GameHubJS आपके ऐप्स में दिखाई देगा</span>
            </div>
            <button type="button" class="pwa-ios-close" onclick="document.getElementById('pwaChromeModal').classList.remove('visible')">
                समझ गया
            </button>
        </div>
    </div>

    <!-- ============================================
         FIREFOX INSTALL HINT MODAL
         ============================================ -->
    <div class="pwa-ios-modal" id="pwaFirefoxModal">
        <div class="pwa-ios-modal-content">
            <h5>GameHubJS इंस्टॉल करें</h5>
            <p>Firefox अभी एक-टैप इंस्टॉल का समर्थन नहीं करता, लेकिन आप GameHubJS को अपने ऐप्स में जोड़ सकते हैं:</p>
            <div class="pwa-ios-step">
                <i class="fas fa-ellipsis-v"></i>
                <span>Firefox मेनू खोलें (ऊपर-दाएं कोने में ⋮)</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-download"></i>
                <span>&lt;strong&gt;इस साइट को ऐप के रूप में इंस्टॉल करें&lt;/strong&gt; पर क्लिक करें</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-check-circle"></i>
                <span>पुष्टि करें और यह आपके ऐप्स में दिखाई देगा</span>
            </div>
            <button type="button" class="pwa-ios-close" onclick="document.getElementById('pwaFirefoxModal').classList.remove('visible')">
                समझ गया
            </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>इंस्टॉल करें</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 = "\u0915\u0943\u092a\u092f\u093e \u0917\u0947\u092e \u0915\u093e \u0928\u093e\u092e \u092f\u093e \"\u0938\u093e\u092e\u093e\u0928\u094d\u092f\" \u0926\u0930\u094d\u091c \u0915\u0930\u0947\u0902\u0964";
        const BUG_MSG_DESCRIPTION_REQUIRED = "\u0915\u0943\u092a\u092f\u093e \u092c\u0924\u093e\u090f\u0902 \u0915\u094d\u092f\u093e \u0917\u0932\u0924 \u0939\u0941\u0906\u0964";
        const BUG_MSG_SUBMITTING = "\u092d\u0947\u091c \u0930\u0939\u0947 \u0939\u0948\u0902...";
        const BUG_MSG_SUBMITTED = "\u0927\u0928\u094d\u092f\u0935\u093e\u0926! \u0906\u092a\u0915\u0940 \u0930\u093f\u092a\u094b\u0930\u094d\u091f \u092d\u0947\u091c \u0926\u0940 \u0917\u0908 \u0939\u0948\u0964";
        const BUG_MSG_SUBMIT_FAILED = "\u092d\u0947\u091c \u0928\u0939\u0940\u0902 \u0938\u0915\u0947\u0964 \u0915\u0943\u092a\u092f\u093e \u092a\u0941\u0928\u0903 \u092a\u094d\u0930\u092f\u093e\u0938 \u0915\u0930\u0947\u0902\u0964";
        const BUG_MSG_NETWORK_ERROR = "\u0928\u0947\u091f\u0935\u0930\u094d\u0915 \u0924\u094d\u0930\u0941\u091f\u093f\u0964 \u0915\u0943\u092a\u092f\u093e \u092a\u0941\u0928\u0903 \u092a\u094d\u0930\u092f\u093e\u0938 \u0915\u0930\u0947\u0902\u0964";
        const BUG_MSG_SUBMITTED_BTN = "\u092d\u0947\u091c\u093e \u0917\u092f\u093e";

        // ============================================
        // 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 -->