<!-- 
  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="de" 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>Spiel-Lobby - GameHubJS</title>

    <!-- CSRF Token -->
    <meta name="csrf-token" content="ImNlMmYwMTA3NDczMzA4Njg0NjQyYzFiMDAzZTQ5YTczMjJjYTZjYTAi.atIojQ.jjEXfwAu6KeR7XY-dHqzbjZaZks">

    <!-- 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>Startseite</span>
            </a>

            <a class="app-sidebar-link active"
               href="/games/lobby">
                <i class="fas fa-gamepad"></i>
                <span>Spiele</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>Chatraum</span>
                </a>
            
            

            
            
                <a class="app-sidebar-link" href="/gate?feature=leaderboard&amp;next=/leaderboard">
                    <i class="fas fa-trophy"></i>
                    <span>Bestenliste</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>Spiel vorschlagen</span>
                </a>
            

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

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

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

            
            <a class="app-sidebar-link "
               href="/contact">
                <i class="fas fa-envelope" style="color:#4facfe;"></i>
                <span>Kontakt</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>Sprache</span>
                    <span class="app-sidebar-lang-code">DE</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 "
                           href="?lang=hi">
                            <i class="fas fa-check"></i>
                            <span>🇮🇳 हिन्दी</span>
                        </a>
                    
                        <a class="app-sidebar-lang-item active"
                           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>App installieren</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>Anmelden</span>
                </a>
                <a class="app-sidebar-link app-sidebar-link-accent" href="/auth/register">
                    <i class="fas fa-user-plus"></i>
                    <span>Jetzt beitreten</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="Weitere Optionen">
            <div class="app-drawer-handle" onclick="closeAppDrawer()">
                <span></span>
            </div>

            <div class="app-drawer-header">
                <h5>Mehr</h5>
                <button class="app-drawer-close" type="button" onclick="closeAppDrawer()" aria-label="Schließen">
                    <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>Funktionen</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>Chatraum</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>Bestenliste</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>Spiel vorschlagen</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>Unterstützen</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>Fehler melden</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>Benachrichtigungen</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>Entdecken</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>Kontakt</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 "
                                       href="?lang=hi">
                                        🇮🇳 हिन्दी
                                    </a>
                                
                                    <a class="app-drawer-lang-btn active"
                                       href="?lang=de">
                                        🇩🇪 Deutsch
                                    </a>
                                
                            </div>
                            <a class="app-drawer-item" href="/about" onclick="closeAppDrawer()">
                                <i class="fas fa-info-circle"></i>
                                <span>Über GameHubJS</span>
                            </a>
                            <a class="app-drawer-item" href="/privacy" onclick="closeAppDrawer()">
                                <i class="fas fa-lock"></i>
                                <span>Datenschutz</span>
                            </a>
                            <a class="app-drawer-item" href="/terms" onclick="closeAppDrawer()">
                                <i class="fas fa-file-contract"></i>
                                <span>AGB</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>App installieren</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>Konto erstellen</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>Jetzt live</span>
            </div>
            
            <h1 class="lobby-hero-title">
                Spiel- <span class="gradient-text">Lobby</span>
            </h1>
            
            <p class="lobby-hero-subtitle">
                Entdecke, spiele und tritt an. 4 Spiele in 2D und 3D — alle kostenlos, alle sofort, alle in deinem Browser.
            </p>
            
            <div class="lobby-hero-stats">
                <div class="lobby-hero-stat">
                    <span class="value text-primary-grad">4</span>
                    <span class="label">Spiele insgesamt</span>
                </div>
                <div class="lobby-hero-stat">
                    <span class="value text-yellow-grad">2</span>
                    <span class="label">Empfohlen</span>
                </div>
                <div class="lobby-hero-stat">
                    <span class="value text-green-grad">
                        4
                    </span>
                    <span class="label">2D-Spiele</span>
                </div>
                <div class="lobby-hero-stat">
                    <span class="value text-primary-grad">
                        0
                    </span>
                    <span class="label">3D-Spiele</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">
                    
                        Reflex
                    
                </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="Kategorien suchen…"
                               autocomplete="off"
                               spellcheck="false">
                    </div>
                    <button type="button"
                            class="category-dropdown-close"
                            id="categoryDropdownClose"
                            aria-label="Schließen">
                        <i class="fas fa-times"></i>
                    </button>
                </div>

                <div class="category-dropdown-list" id="categoryDropdownList">
                    
                    
                    <a href="/games/lobby?category=all"
                       class="category-dropdown-item "
                       data-name="alle kategorien"
                       data-slug="all"
                       role="option"
                       aria-selected="false">
                        <span class="cdi-emoji">📂</span>
                        <span class="cdi-name">Alle Kategorien</span>
                        <span class="cdi-count">4</span>
                        <i class="fas fa-check cdi-check"></i>
                    </a>

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

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

                    <div class="category-dropdown-empty" id="categoryDropdownEmpty" style="display:none;">
                        Keine passenden Kategorien
                    </div>
                </div>
            </div>
        </div>

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

        <!-- Search Box -->
        <div class="lobby-search-box">
            <i class="fas fa-search search-icon"></i>
            <form method="GET" action="/games/lobby">
                
                
                    <input type="hidden" name="category" value="Reflex">
                
                <input type="text" 
                       id="lobbySearchInput"
                       name="search" 
                       placeholder="Spiele suchen..." 
                       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> Alle Spiele</h6>
            <span class="result-count">
                4 Spiele gefunden
            </span>
        </div>

        
            <div class="lobby-game-grid">
                
                    <a href="/games/play/archery" 
                       class="lobby-game-card"
                       data-type="2d">
                        
                        <div class="lobby-game-thumb">
                            <span class="lobby-game-emoji">
                                🏹
                                
                            </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">Archery</div>
                            <div class="lobby-game-category">
                                Reflex
                            </div>
                            
                            <div class="lobby-game-meta">
                                <div class="lobby-game-stat">
                                    <i class="fas fa-play"></i>
                                    <span>3</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>150s</span>
                                </div>
                            </div>
                        </div>
                    </a>
                
                    <a href="/games/play/flappybird" 
                       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>Empfohlen</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">Flappy Bird</div>
                            <div class="lobby-game-category">
                                Reflex
                            </div>
                            
                            <div class="lobby-game-meta">
                                <div class="lobby-game-stat">
                                    <i class="fas fa-play"></i>
                                    <span>10</span>
                                </div>
                                <div class="lobby-game-stat stat-rating">
                                    <i class="fas fa-star"></i>
                                    <span>0.0</span>
                                </div>
                                <div class="lobby-game-stat">
                                    <i class="fas fa-clock"></i>
                                    <span>60s</span>
                                </div>
                            </div>
                        </div>
                    </a>
                
                    <a href="/games/play/fruitninja" 
                       class="lobby-game-card"
                       data-type="2d">
                        
                        <div class="lobby-game-thumb">
                            <span class="lobby-game-emoji">
                                🍉
                                
                            </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">Fruit Ninja</div>
                            <div class="lobby-game-category">
                                Reflex
                            </div>
                            
                            <div class="lobby-game-meta">
                                <div class="lobby-game-stat">
                                    <i class="fas fa-play"></i>
                                    <span>11</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>90s</span>
                                </div>
                            </div>
                        </div>
                    </a>
                
                    <a href="/games/play/whackamole" 
                       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>Empfohlen</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">Whack-a-Mole</div>
                            <div class="lobby-game-category">
                                Reflex
                            </div>
                            
                            <div class="lobby-game-meta">
                                <div class="lobby-game-stat">
                                    <i class="fas fa-play"></i>
                                    <span>10</span>
                                </div>
                                <div class="lobby-game-stat stat-rating">
                                    <i class="fas fa-star"></i>
                                    <span>0.0</span>
                                </div>
                                <div class="lobby-game-stat">
                                    <i class="fas fa-clock"></i>
                                    <span>60s</span>
                                </div>
                            </div>
                        </div>
                    </a>
                
            </div>
        

        <!-- MORE GAMES COMING SOON -->
        <div class="lobby-coming-soon">
            <div class="lobby-coming-soon-inner">
                <div class="lobby-coming-soon-icon">
                    <i class="fas fa-rocket"></i>
                </div>
                
                <h3 class="lobby-coming-soon-title">
                    Weitere Spiele <span class="gradient-text">Bald verfügbar</span>
                </h3>
                
                <p class="lobby-coming-soon-desc">
                    Neue Spiele sind immer in der Pipeline. Hier ist ein Vorgeschmack auf das, was als Nächstes in die Lobby kommt.
                </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> Solitaire
                    </span>
                    <span class="lobby-coming-chip">
                        <span>♟️</span> Schach
                    </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">
                        + mehr
                    </span>
                </div>

                <div class="lobby-coming-soon-note">
                    <i class="fas fa-lightbulb"></i>
                    <span>
                        Hast du eine Spielidee?
                        <a href="/suggest">Spiel vorschlagen</a> —
                        wir bauen, was die Community will.
                    </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>Startseite</span>
        </a>

        <a href="/games/lobby"
           class="bottom-nav-item active">
            <i class="fas fa-gamepad"></i>
            <span>Spiele</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>Anmelden</span>
            </a>

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

        <button type="button" class="bottom-nav-item" onclick="openAppDrawer()">
            <i class="fas fa-ellipsis-h"></i>
            <span>Mehr</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;">Über uns</a>
                        <a href="/privacy" style="color: #718096; text-decoration: none; font-size: 0.75rem;">Datenschutz</a>
                        <a href="/terms" style="color: #718096; text-decoration: none; font-size: 0.75rem;">AGB</a>
                        <a href="/suggest" style="color: #ffd93d; text-decoration: none; font-size: 0.75rem;">Spiel vorschlagen</a>
                        <a href="/donations/" style="color: #ff6584; text-decoration: none; font-size: 0.75rem;">Unterstützen</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. Alle Rechte vorbehalten.</span>
                </div>
            </div>
        </div>
    </footer>

    <!-- ============================================
         iOS PWA INSTALL MODAL
         ============================================ -->
    <div class="pwa-ios-modal" id="pwaIosModal">
        <div class="pwa-ios-modal-content">
            <h5>GameHubJS installieren</h5>
            <p>Füge GameHubJS zu deinem Home-Bildschirm hinzu für Zugriff mit einem Tippen:</p>
            <div class="pwa-ios-step">
                <i class="fas fa-share-from-square"></i>
                <span>Tippe auf die &lt;strong&gt;Teilen&lt;/strong&gt;-Schaltfläche in der Safari-Symbolleiste</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-plus-square"></i>
                <span>Scrolle und tippe auf &lt;strong&gt;Zum Home-Bildschirm&lt;/strong&gt;</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-check-circle"></i>
                <span>Tippe auf &lt;strong&gt;Hinzufügen&lt;/strong&gt; oben rechts</span>
            </div>
            <button type="button" class="pwa-ios-close" onclick="document.getElementById('pwaIosModal').classList.remove('visible')">
                Verstanden
            </button>
        </div>
    </div>

    <!-- ============================================
         CHROME DESKTOP INSTALL MODAL (v9)
         ============================================ -->
    <div class="pwa-ios-modal" id="pwaChromeModal">
        <div class="pwa-ios-modal-content">
            <h5>GameHubJS installieren</h5>
            <p>Füge GameHubJS zu deinem Computer hinzu für Zugriff mit einem Klick vom Desktop oder App-Launcher:</p>
            <div class="pwa-ios-step">
                <i class="fas fa-ellipsis-v"></i>
                <span>Klicke auf das &lt;strong&gt;Drei-Punkte-Menü&lt;/strong&gt; (⋮) in der Chrome-Symbolleiste</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-download"></i>
                <span>Wähle &lt;strong&gt;Speichern und teilen&lt;/strong&gt; → &lt;strong&gt;Seite als App installieren&lt;/strong&gt;</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-check-circle"></i>
                <span>Bestätige und GameHubJS erscheint in deinen Apps</span>
            </div>
            <button type="button" class="pwa-ios-close" onclick="document.getElementById('pwaChromeModal').classList.remove('visible')">
                Verstanden
            </button>
        </div>
    </div>

    <!-- ============================================
         FIREFOX INSTALL HINT MODAL
         ============================================ -->
    <div class="pwa-ios-modal" id="pwaFirefoxModal">
        <div class="pwa-ios-modal-content">
            <h5>GameHubJS installieren</h5>
            <p>Firefox unterstützt noch keine Ein-Klick-Installation, aber du kannst GameHubJS zu deinen Apps hinzufügen:</p>
            <div class="pwa-ios-step">
                <i class="fas fa-ellipsis-v"></i>
                <span>Öffne das Firefox-Menü (⋮ oben rechts)</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-download"></i>
                <span>Klicke auf &lt;strong&gt;Diese Seite als App installieren&lt;/strong&gt;</span>
            </div>
            <div class="pwa-ios-step">
                <i class="fas fa-check-circle"></i>
                <span>Bestätige und sie erscheint in deinen Apps</span>
            </div>
            <button type="button" class="pwa-ios-close" onclick="document.getElementById('pwaFirefoxModal').classList.remove('visible')">
                Verstanden
            </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>Installieren</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 = "Bitte gib einen Spielnamen ein oder \"Allgemein\".";
        const BUG_MSG_DESCRIPTION_REQUIRED = "Bitte beschreibe, was schiefgelaufen ist.";
        const BUG_MSG_SUBMITTING = "Wird gesendet...";
        const BUG_MSG_SUBMITTED = "Danke! Dein Bericht wurde gesendet.";
        const BUG_MSG_SUBMIT_FAILED = "Konnte nicht senden. Bitte versuche es erneut.";
        const BUG_MSG_NETWORK_ERROR = "Netzwerkfehler. Bitte versuche es erneut.";
        const BUG_MSG_SUBMITTED_BTN = "Gesendet";

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