/* ============================================================
   Ranked Game Lobby Finder — Global Stylesheet
   Dark gaming community theme. No inline styles anywhere.
   ============================================================ */

/* The hidden attribute must always win, even over component display rules. */
[hidden] { display: none !important; }

:root {
    /* Palette synced with the premium landing page (landing.css). */
    --bg:          #08070d;
    --bg-2:        #0d0b16;
    --bg-elevated: #120f1e;
    --bg-card:     rgba(24, 20, 38, 0.62);
    --bg-solid:    #150f24;
    --bg-input:    rgba(8, 7, 13, 0.6);
    --border:      rgba(139, 92, 246, 0.20);
    --border-soft: rgba(139, 92, 246, 0.12);

    --text:        #eceef4;
    --text-muted:  #a2a6b8;
    --text-faint:  #6b6f82;

    --primary:      #8b5cf6;
    --primary-600:  #6d28d9;
    --primary-lt:   #b794ff;
    --primary-glow: rgba(139, 92, 246, 0.35);
    --accent:       #e879f9;
    --danger:       #ff5c72;
    --warning:      #ffb020;
    --success:      #34d399;

    --radius:    14px;
    --radius-sm: 10px;
    --shadow:    0 18px 44px rgba(0, 0, 0, 0.45);

    --font: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    background:
        radial-gradient(1200px 640px at 82% -12%, rgba(139, 92, 246, 0.20), transparent 60%),
        radial-gradient(900px 520px at -12% 8%, rgba(232, 121, 249, 0.12), transparent 55%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.55;
    /* Safety net: clip stray horizontal overflow without breaking the sticky
       header or fixed overlays (unlike overflow:hidden/auto). */
    overflow-x: clip;
}

a { color: var(--primary-lt); text-decoration: none; }
a:hover { color: #d3c4ff; }

/* Gradient text helper (matches landing). */
.grad {
    background: linear-gradient(100deg, #a78bfa, #e879f9 55%, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.page { flex: 1 0 auto; padding-top: 28px; padding-bottom: 60px; }

/* ---------- Footer ---------- */
.site-footer {
    margin-top: 32px;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, transparent, rgba(139, 92, 246, .05));
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    padding: 32px 20px 24px;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-logo { height: 44px; width: auto; }
.footer-brand p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; max-width: 280px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h3 {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-faint);
}
.footer-col a { color: var(--text-muted); font-size: 14px; }
.footer-col a:hover { color: var(--primary-lt); }
.footer-bottom { border-top: 1px solid var(--border-soft); }
.footer-bottom .container { padding-top: 16px; padding-bottom: 16px; }
.footer-bottom p { margin: 0; color: var(--text-faint); font-size: 12.5px; text-align: center; }
@media (max-width: 760px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; padding: 26px 20px 20px; }
    .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Header / nav ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(8, 7, 13, 0.72);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 74px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--text);
}
.brand-logo {
    height: 56px;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.5));
    transition: transform 0.2s ease;
}
.brand:hover .brand-logo { transform: scale(1.04); }

.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.main-nav a { color: var(--text-muted); font-size: 15px; font-weight: 600; }
.main-nav a:hover { color: #fff; }
.nav-ecircle { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-lt) !important; }
.nav-ecircle .icon { width: 15px; height: 15px; }
.nav-ecircle:hover { color: #fff !important; }
.nav-profile { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    font-family: inherit;
    color: #fff;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-sm { padding: 7px 13px; font-size: 13.5px; border-radius: 10px; }
.btn-lg { padding: 14px 26px; font-size: 16px; border-radius: 14px; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    box-shadow: 0 10px 26px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(139, 92, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border);
    color: var(--text);
    backdrop-filter: blur(6px);
}
.btn-ghost:hover { color: #fff; border-color: var(--primary); background: rgba(139, 92, 246, 0.12); }

.btn-danger { background: linear-gradient(135deg, #ff5c72, #d9364f); }
.btn-danger:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 92, 114, 0.35); color: #fff; }

.btn-block { display: flex; width: 100%; }
.btn.is-disabled,
.btn[aria-disabled="true"],
.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    filter: saturate(.65);
}
.btn.is-disabled:hover,
.btn[aria-disabled="true"]:hover,
.btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* ---------- Flash messages ---------- */

.flash {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    border: 1px solid var(--border);
    font-size: 15px;
}
.flash-success { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.4); color: #7ff0c6; }
.flash-error   { background: rgba(255, 92, 114, 0.12); border-color: rgba(255, 92, 114, 0.4); color: #ff9aa8; }
.flash-info    { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.4); color: #c9bcff; }

/* ---------- Toast notifications (global, JS-driven) ---------- */

.toast-stack {
    position: fixed;
    top: 74px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4000;                 /* above modals, marquee and every overlay */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(400px, calc(100vw - 24px));
    pointer-events: none;          /* clicks pass through the gaps */
}
.toast {
    --toast-accent: var(--primary);
    --toast-tint: rgba(139, 92, 246, 0.16);
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 13px 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-left: 3px solid var(--toast-accent);
    border-radius: 12px;
    background:
        linear-gradient(var(--toast-tint), var(--toast-tint)),
        var(--bg-elevated);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    color: var(--text);
    /* Enter: rise + fade. Exit is quicker (see .is-out) so it feels responsive. */
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}
.toast.is-in  { opacity: 1; transform: none; }
.toast.is-out {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
}
.toast-ico {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--toast-accent);
    background: var(--toast-tint);
}
.toast-ico-svg { width: 15px; height: 15px; }
.toast-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.toast-title { font-size: 13.5px; font-weight: 800; color: #fff; }
.toast-msg {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text);
    overflow-wrap: anywhere;
}
.toast-close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.toast-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.toast-close svg { width: 15px; height: 15px; }
.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    background: var(--toast-accent);
    opacity: 0.65;
    animation-name: toast-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.toast.is-paused .toast-progress { animation-play-state: paused; }
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.toast-success { --toast-accent: var(--success); --toast-tint: rgba(52, 211, 153, 0.16); }
.toast-error   { --toast-accent: var(--danger);  --toast-tint: rgba(255, 92, 114, 0.16); }
.toast-warning { --toast-accent: var(--warning); --toast-tint: rgba(255, 176, 32, 0.16); }
.toast-info    { --toast-accent: var(--primary); --toast-tint: rgba(139, 92, 246, 0.16); }

@media (max-width: 560px) {
    .toast-stack { top: 66px; width: calc(100vw - 20px); }
}
@media (prefers-reduced-motion: reduce) {
    .toast, .toast.is-out { transition: opacity 0.12s linear; transform: none; }
    .toast.is-in { transform: none; }
    .toast-progress { display: none; }
}

/* ---------- Headings / page intro ---------- */

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.page-head h1 { margin: 0 0 4px; font-size: 26px; }
.page-head p { margin: 0; color: var(--text-muted); }

.hero {
    text-align: center;
    padding: 40px 20px 30px;
}
.hero h1 { font-size: 34px; margin: 0 0 10px; }
.hero p { color: var(--text-muted); font-size: 17px; margin: 0 auto; max-width: 620px; }

/* ---------- Cards ---------- */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.lobby-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.1s ease, border-color 0.15s ease;
}
.lobby-card:hover { transform: translateY(-3px); border-color: var(--primary); }

.lobby-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.lobby-card h3 { margin: 0; font-size: 18px; }
.lobby-card .game-tag { color: var(--accent); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.lobby-card .desc { color: var(--text-muted); font-size: 14px; margin: 0; }

.lobby-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 13px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-soft);
    padding-top: 12px;
}
.lobby-meta span strong { color: var(--text); font-weight: 600; }

/* ---------- Badges ---------- */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 1px solid var(--border);
}

.status-badge { text-transform: uppercase; font-size: 11px; }
.status-open   { background: rgba(0, 212, 160, 0.15); color: #58e6c1; border-color: rgba(0, 212, 160, 0.4); }
.status-full   { background: rgba(255, 176, 32, 0.15); color: #ffcb63; border-color: rgba(255, 176, 32, 0.4); }
.status-closed { background: rgba(255, 92, 114, 0.15); color: #ff9aa8; border-color: rgba(255, 92, 114, 0.4); }

/* ---------- App popup modal ---------- */
.app-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.app-modal[hidden] { display: none; }
.app-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 3, 8, 0.7);
    backdrop-filter: blur(6px);
    animation: fade 0.2s ease;
}
.app-modal-card {
    position: relative;
    width: min(400px, 100%);
    text-align: center;
    padding: 30px 28px 26px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(28, 22, 45, 0.97), rgba(16, 13, 26, 0.98));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(139, 92, 246, 0.15);
    animation: pop 0.28s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.app-modal-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(232, 121, 249, 0.14));
    border: 1px solid var(--border);
}
.app-modal-title { margin: 0 0 8px; font-size: 20px; }
.app-modal-msg { margin: 0 0 22px; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
/* Long-form popups (patch notes) keep line breaks and read left-aligned. */
.app-modal-msg.is-prewrap {
    white-space: pre-line;
    text-align: left;
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 4px;
}
.app-modal-actions { display: flex; gap: 10px; justify-content: center; }
.app-modal-actions [hidden] { display: none; }
.join-hint { font-size: 13px; text-align: center; color: var(--text-muted); margin: 10px 0 0; }

/* ---------- Avatar ---------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    color: #fff;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 32px; height: 32px; font-size: 14px; }
.avatar-md { width: 48px; height: 48px; font-size: 20px; }
.avatar-lg { width: 80px; height: 80px; font-size: 34px; }
.avatar-xl { width: 112px; height: 112px; font-size: 46px; }

/* ---------- Plan badge ---------- */
.plan-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    border: 1px solid var(--border);
}
.plan-basic {
    background: rgba(154, 162, 184, 0.14);
    color: #c3c9d8;
    border-color: rgba(154, 162, 184, 0.3);
}
.plan-premium {
    background: linear-gradient(135deg, rgba(255, 200, 60, 0.22), rgba(255, 150, 40, 0.14));
    color: #ffd873;
    border-color: rgba(255, 200, 60, 0.4);
}
.plan-premiumapp {
    color: #fff;
    border: none;
    background: linear-gradient(100deg, #8b5cf6, #e879f9, #22d3ee, #8b5cf6);
    background-size: 300% 100%;
    animation: planShine 4s linear infinite;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.45);
}
@keyframes planShine { to { background-position: 300% 0; } }

/* Inline line icons */
.icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icon-sm { width: 15px; height: 15px; }
.nav-user-menu a .icon { color: var(--text-faint); }
.nav-user-menu a:hover .icon { color: var(--primary-lt); }

/* Meta-style verified check */
.verified-badge {
    display: inline-flex;
    align-items: center;
    color: #1d9bf0;
    vertical-align: middle;
}
.verified-badge svg { display: block; filter: drop-shadow(0 1px 3px rgba(29, 155, 240, 0.5)); }

/* ---------- Nav user dropdown ---------- */
.nav-user { position: relative; }
.nav-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px 5px 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.nav-user:hover .nav-user-trigger,
.nav-user-trigger:focus { border-color: var(--primary); background: rgba(139, 92, 246, 0.12); }
.nav-user-caret { font-size: 10px; color: var(--text-muted); transition: transform .18s ease; }
.nav-user:hover .nav-user-caret { transform: rotate(180deg); }

.nav-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 180px;
    background: linear-gradient(180deg, rgba(28, 22, 45, 0.98), rgba(16, 13, 26, 0.99));
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 60;
}
/* Bridge the gap so the menu doesn't close between trigger and menu. */
.nav-user::after { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 12px; }
.nav-user:hover .nav-user-menu,
.nav-user:focus-within .nav-user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-user-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
}
.nav-user-menu a:hover { background: rgba(139, 92, 246, 0.15); color: #fff; }
.nav-user-menu .menu-ico { width: 16px; text-align: center; }

/* ---------- Header notifications ---------- */
.nav-notifications { position: relative; }
.nav-notification-trigger {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
}
.nav-notification-trigger:hover,
.nav-notifications:focus-within .nav-notification-trigger {
    border-color: var(--primary);
    background: rgba(139, 92, 246, 0.12);
}
.nav-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    color: #fff;
    font-size: 12px;
    line-height: 1;
}
.nav-notification-count {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(255, 92, 114, .35);
}
.nav-notification-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(390px, calc(100vw - 28px));
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
    background: linear-gradient(180deg, rgba(28, 22, 45, 0.98), rgba(16, 13, 26, 0.99));
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 70;
}
.nav-notification-menu::-webkit-scrollbar { width: 6px; }
.nav-notification-menu::-webkit-scrollbar-track { background: transparent; }
.nav-notification-menu::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 999px; }
.nav-notifications::after { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 12px; }
.nav-notifications:hover .nav-notification-menu,
.nav-notifications:focus-within .nav-notification-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-notification-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px 11px;
    border-bottom: 1px solid var(--border-soft);
}
.nav-notification-head span,
.nav-notification-empty {
    color: var(--text-muted);
    font-size: 12px;
}
.nav-notification-empty { margin: 0; padding: 18px 10px; text-align: center; }

/* "Read all" action in the dropdown header. */
.nav-notification-readall { margin: 0; }
.nav-notification-readall button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-lt);
}
.nav-notification-readall button:hover { text-decoration: underline; }

/* Each notification is a single clickable row (button / link / static div). */
.nav-notification-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin: 2px 0;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .14s ease;
}
.nav-notification-item.is-static { cursor: default; }
.nav-notification-item:not(.is-static):hover { background: rgba(139, 92, 246, 0.16); }
.nav-notification-item.is-unread { background: rgba(139, 92, 246, 0.08); }
.nav-notification-item.is-unread:not(.is-static):hover { background: rgba(139, 92, 246, 0.2); }
.nav-notification-ico {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.30), rgba(232, 121, 249, 0.16));
    border: 1px solid var(--border);
}
.nav-notification-avatar { flex-shrink: 0; line-height: 0; }
.nav-notification-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.nav-notification-copy strong { font-size: 13.5px; color: var(--text); }
.nav-notification-copy span {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nav-notification-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary, #8b5cf6);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.8);
}

/* Rank emblem badge (image + name) */
.rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.rank-badge img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.rank-badge-name { white-space: nowrap; }

/* Larger variant for detail headers. */
.rank-badge-lg { font-size: 15px; gap: 9px; }
.rank-badge-lg img { width: 34px; height: 34px; }

/* Icon-only variant (hide the name). */
.rank-badge-icon .rank-badge-name { display: none; }

/* Rank badge colours */
.badge-iron        { background: #3a3f47; color: #cfd3da; }
.badge-bronze      { background: #5a3a26; color: #e6b48c; }
.badge-silver      { background: #4a5560; color: #dfe6ee; }
.badge-gold        { background: #6b5410; color: #ffdf7e; }
.badge-platinum    { background: #12564f; color: #7ff0d3; }
.badge-diamond     { background: #123a6b; color: #8fc2ff; }
.badge-master      { background: #4a1f66; color: #d7a8ff; }
.badge-grandmaster { background: #5a1030; color: #ff9ac4; }
.badge-challenger  { background: #1c4c7a; color: #bfe3ff; }
.badge-radiant     { background: #6b2a12; color: #ffd0a8; }
.badge-immortal    { background: #4a1030; color: #ff9ac4; }

/* ---------- Forms ---------- */

.form-card {
    max-width: 460px;
    margin: 0 auto;
}
.form-card.wide { max-width: 640px; }

.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 600;
}

.form-control {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 11px 13px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
textarea.form-control { resize: vertical; min-height: 90px; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-hint { font-size: 13px; color: var(--text-faint); margin-top: 4px; }
.form-footer { margin-top: 8px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* Read-only "locked" field (e.g. a game chosen from the games hub). */
.locked-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(139, 92, 246, 0.10);
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
}
.locked-badge { font-size: 12px; font-weight: 700; color: var(--primary-lt); white-space: nowrap; }

/* ---------- Lobby invite code ---------- */

.lobby-legacy-head,
.lobby-legacy-grid,
.lobby-support-grid {
    display: none;
}

.lobby-party-panel {
    position: relative;
    overflow: hidden;
    width: min(1040px, 100%);
    margin: 8px auto 20px;
    padding: 24px 26px 20px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 34px;
    background: #020204;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .56), 0 0 0 1px rgba(139, 92, 246, .16);
}
.lobby-party-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 2, 4, .98) 0%, rgba(2, 2, 4, .92) 52%, rgba(2, 2, 4, .62) 100%);
    z-index: 0;
}
.lobby-party-panel > * {
    position: relative;
    z-index: 1;
}
.lobby-cover-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: rgba(255, 255, 255, .08);
    font-size: 72px;
    font-weight: 900;
    text-transform: uppercase;
    pointer-events: none;
}
.lobby-cover-photo img {
    width: 52%;
    height: 100%;
    object-fit: cover;
    opacity: .45;
    filter: saturate(1.08);
}
.lobby-party-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}
.lobby-party-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}
.lobby-party-icon {
    width: 44px;
    height: 44px;
    color: #fff;
}
.lobby-party-title span {
    display: block;
    color: #ffd76a;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.lobby-party-title h1 {
    margin: 0;
    max-width: 620px;
    overflow-wrap: anywhere;
    color: #fff;
    font-size: 30px;
    line-height: 1.08;
    letter-spacing: 0;
}
.lobby-host-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px;
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
}
.lobby-host-line .plan-badge { font-size: 10px; }
/* Right-side header cluster: plan badge + status badge, with the description below. */
.lobby-head-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    max-width: 300px;
}
.lobby-head-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lobby-head-badges .plan-badge { font-size: 10px; }
.lobby-settings-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.lobby-settings-btn:hover {
    background: rgba(255, 255, 255, .16);
    transform: translateY(-1px);
}
.lobby-settings-btn .icon { width: 18px; height: 18px; }
.lobby-head-desc {
    margin: 0;
    text-align: right;
    color: rgba(255, 255, 255, .6);
    font-size: 12.5px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lobby-party-body.is-roster-only { grid-template-columns: minmax(0, 1fr); }
.lobby-party-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 172px;
    align-items: center;
    gap: 20px;
}
.party-member-strip {
    display: flex;
    align-items: stretch;
    gap: 14px;
    min-width: 0;
    overflow-x: auto;
    padding: 4px 0 8px;
}
.party-member-tile {
    position: relative;
    width: 88px;
    min-width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    border: 0;
    padding: 0;
    color: #fff;
    background: transparent;
    font: inherit;
    text-align: center;
    cursor: pointer;
}
.party-member-tile:hover { color: #fff; }
.party-member-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
/* Add-friend chip pinned to the avatar's top-right corner. */
.party-add-friend {
    position: absolute;
    top: -6px;
    right: 8px;
    margin: 0;
    z-index: 3;
}
.party-add-friend button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid #020204;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    box-shadow: 0 4px 12px rgba(139, 92, 246, .5);
    cursor: pointer;
    transition: transform .14s ease, background .14s ease;
}
.party-add-friend button:hover {
    background: var(--primary-600);
    transform: scale(1.08);
}
.party-add-friend .icon { width: 14px; height: 14px; stroke-width: 2.4; }
/* Kick chip (host only), pinned to the avatar's top-left corner. */
.party-kick {
    position: absolute;
    top: -6px;
    left: 8px;
    margin: 0;
    z-index: 3;
}
.party-kick button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid #020204;
    border-radius: 50%;
    color: #fff;
    background: var(--danger, #ef4444);
    box-shadow: 0 4px 12px rgba(239, 68, 68, .5);
    cursor: pointer;
    transition: transform .14s ease, background .14s ease;
}
.party-kick button:hover { background: #dc2626; transform: scale(1.08); }
.party-kick .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.party-member-tile .avatar {
    width: 58px;
    height: 58px;
    font-size: 23px;
    border: 3px solid rgba(255, 255, 255, .88);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.party-avatar-wrap {
    position: relative;
    display: inline-flex;
}
.party-avatar-wrap::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid rgba(126, 230, 173, 0);
    opacity: 0;
    pointer-events: none;
}
.party-member-tile.is-speaking .party-avatar-wrap::after {
    opacity: 1;
    border-color: rgba(126, 230, 173, .78);
    animation: voicePulse 1s ease-out infinite;
}
.party-member-tile.is-speaking .avatar {
    border-color: rgba(126, 230, 173, .95);
    box-shadow: 0 0 0 4px rgba(126, 230, 173, .16), 0 12px 28px rgba(0, 0, 0, .5);
}
@keyframes voicePulse {
    0% { transform: scale(.92); opacity: .95; }
    100% { transform: scale(1.22); opacity: 0; }
}
.party-ping-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    border: 3px solid #020204;
    border-radius: 50%;
    background: var(--text-faint);
    z-index: 2;
}
.party-ping-dot.is-online {
    background: var(--success);
    box-shadow: 0 0 0 5px rgba(52, 211, 153, .14), 0 0 16px rgba(52, 211, 153, .9);
}
.party-voice-mute {
    position: absolute;
    right: -6px;
    bottom: -6px;
    z-index: 4;
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid #020204;
    border-radius: 50%;
    color: #06120c;
    background: #7ee6ad;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .42);
}
button.party-voice-mute {
    cursor: pointer;
    transition: transform .14s ease, background .14s ease;
}
button.party-voice-mute:hover {
    transform: scale(1.08);
    background: #a7f3c8;
}
.party-voice-mute .icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}
.party-voice-mute.is-muted,
.party-voice-mute.is-offline {
    color: #fff;
    background: rgba(239, 68, 68, .96);
}
.party-voice-mute.is-offline {
    opacity: .5;
    background: rgba(148, 163, 184, .85);
}
.party-member-name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.party-member-role {
    margin-top: -6px;
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}
/* Connection / ping indicator */
.party-signal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}
.party-signal.is-online { color: #6ee7b7; }
.party-signal.is-offline { color: rgba(255, 255, 255, .4); }
.party-signal-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 11px;
}
.party-signal-bars i {
    width: 3px;
    border-radius: 1px;
    background: currentColor;
    opacity: .28;
}
.party-signal-bars i:nth-child(1) { height: 4px; }
.party-signal-bars i:nth-child(2) { height: 7px; }
.party-signal-bars i:nth-child(3) { height: 9px; }
.party-signal-bars i:nth-child(4) { height: 11px; }
.party-signal-bars[data-bars="1"] i:nth-child(-n+1),
.party-signal-bars[data-bars="2"] i:nth-child(-n+2),
.party-signal-bars[data-bars="3"] i:nth-child(-n+3),
.party-signal-bars[data-bars="4"] i:nth-child(-n+4) { opacity: 1; }
/* Empty roster slot */
.party-slot-tile { cursor: default; }
.party-slot-ring {
    width: 58px;
    height: 58px;
    border: 2px dashed rgba(255, 255, 255, .22);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .04) 0%, transparent 70%);
}
.party-slot-tile .party-member-name { color: rgba(255, 255, 255, .5); font-weight: 600; }
.party-slot-tile .party-member-role { color: rgba(255, 255, 255, .34); }
/* Invite lives inside the first open slot */
.party-invite-slot { cursor: pointer; }
.party-invite-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-color: rgba(139, 92, 246, .5);
    color: #c4b5fd;
    background: rgba(139, 92, 246, .12);
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.party-invite-ring .icon { width: 24px; height: 24px; stroke-width: 2.6; }
.party-invite-slot:hover .party-invite-ring {
    border-color: var(--primary);
    background: rgba(139, 92, 246, .24);
    color: #fff;
    transform: translateY(-2px);
}
.party-invite-slot:hover .party-member-name { color: #fff; }
.party-slot-freed { animation: slotFreed .3s ease; }
@keyframes slotFreed { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* Pending invite occupying a slot, with a depleting cooldown ring. */
@media (prefers-reduced-motion: reduce) {
    .party-cooldown-ring, .party-invite-pending, .party-slot-freed { animation: none !important; }
}
.party-invite-pending { cursor: default; animation: invitePop .32s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes invitePop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.party-cooldown-wrap { --p: 1; }
.party-cooldown-wrap .avatar { border-color: rgba(139, 92, 246, .5); filter: saturate(.9) brightness(.92); }
.party-cooldown-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    /* Ring depletes clockwise as --p goes 1 -> 0. */
    background: conic-gradient(var(--primary) calc(var(--p) * 360deg), rgba(255, 255, 255, .14) 0deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    z-index: 1;
    animation: cooldownPulse 1.6s ease-in-out infinite;
}
@keyframes cooldownPulse { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }
.party-invite-pending .party-member-name { color: rgba(255, 255, 255, .82); }
.party-invite-status {
    color: #c4b5fd !important;
    font-variant-numeric: tabular-nums;
}
.party-invite-tile {
    border-radius: 22px;
}
.party-invite-plus {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    color: #030306;
    background: #fff;
    box-shadow: 0 10px 24px rgba(255, 255, 255, .16);
}
.party-invite-plus .icon {
    width: 26px;
    height: 26px;
    stroke-width: 3;
}
.party-action {
    display: flex;
    justify-content: flex-end;
}
.party-action form {
    width: 100%;
    margin: 0;
}
.party-join-btn,
.party-closed-pill {
    width: 100%;
    min-height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 22px;
    padding: 20px;
    color: #050508;
    background: #fff;
    font: inherit;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 0;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .18s ease;
}
.party-join-btn:hover {
    color: #050508;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(255, 255, 255, .16);
}
.party-closed-pill {
    cursor: default;
    color: rgba(255, 255, 255, .74);
    background: rgba(255, 255, 255, .12);
}
/* ---------- Lobby footer: clean labeled meta chips ---------- */
.lobby-party-foot {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.foot-chip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 13px;
    background: rgba(255, 255, 255, .03);
}
.foot-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}
.foot-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}
.foot-chip-host { max-width: 220px; }
.foot-chip-host .foot-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-value .verified-badge { flex-shrink: 0; width: 15px; height: 15px; color: var(--primary); }
.foot-value .verified-badge svg { width: 15px; height: 15px; }
.foot-value .badge,
.foot-value .rank-badge { font-size: 12px; }
.foot-players { font-variant-numeric: tabular-nums; }
.foot-players-max { color: rgba(255, 255, 255, .38); font-weight: 700; }
.foot-norank { color: rgba(255, 255, 255, .6); font-weight: 600; font-size: 13px; }
.party-pin-pill {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 106, .32);
    background: rgba(255, 215, 106, .1);
    color: #ffd76a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
}
.party-pin-pill .icon { width: 13px; height: 13px; }
.party-code-btn {
    align-self: center;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(139, 92, 246, .4);
    border-radius: 12px;
    color: #fff;
    background: rgba(139, 92, 246, .14);
    font: inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.party-code-btn:hover { background: rgba(139, 92, 246, .24); border-color: var(--primary); }
.party-code-btn .icon { width: 15px; height: 15px; color: var(--primary-lt); }
.party-code-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.party-code-value {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
}
.party-code-btn.is-copied {
    background: rgba(52, 211, 153, .18);
    border-color: rgba(52, 211, 153, .5);
    color: #8ff2ca;
}
.party-code-btn.is-copied .icon { color: #8ff2ca; }
.party-end-call-btn {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 141, 154, .42);
    border-radius: 12px;
    color: #ffe8eb;
    background: rgba(239, 68, 68, .18);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.party-end-call-btn:hover {
    border-color: #ff8d9a;
    background: rgba(239, 68, 68, .28);
    transform: translateY(-1px);
}
.party-end-call-btn .icon {
    width: 15px;
    height: 15px;
    color: #ff9aa6;
}
/* PIN reuses the code-button shell but with an amber accent and sits inline. */
.party-pin-btn {
    margin-left: 0;
    border-color: rgba(255, 215, 106, .34);
    background: rgba(255, 215, 106, .1);
}
.party-pin-btn:hover { border-color: #ffd76a; background: rgba(255, 215, 106, .2); }
.party-pin-btn .icon { color: #ffd76a; }
.party-pin-btn .party-code-value { letter-spacing: 3px; }
/* Join form with optional PIN entry */
.party-join-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0;
}
.party-pin-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #ffd76a;
    font-size: 12px;
    font-weight: 800;
}
.party-pin-label .icon { width: 13px; height: 13px; }
.party-pin-input {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font: inherit;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 4px;
    text-align: center;
}
.party-pin-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .22);
}
.party-pin-input::placeholder { letter-spacing: 0; font-weight: 600; color: rgba(255, 255, 255, .4); }
.party-join-form .party-join-btn { min-height: 56px; font-size: 21px; }

.code-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background:
        linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(232, 121, 249, 0.06)),
        var(--bg-card);
    border-color: var(--border);
}
.code-card-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-lt);
    margin-bottom: 4px;
}
.code-value {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 6px;
    color: #fff;
    font-family: "Consolas", "Courier New", monospace;
    text-shadow: 0 2px 14px var(--primary-glow);
}
.code-card-hint { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; }
.code-copy.is-copied { background: linear-gradient(135deg, var(--success), #0fa968); }

/* ---------- Filter bar ---------- */

.filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 24px;
}
.filter-bar .form-group { margin-bottom: 0; }

/* ---------- Empty state ---------- */

.empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

/* ---------- Tables (admin) ---------- */

.table-wrap { overflow-x: auto; }
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table.data th, table.data td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-soft);
}
table.data th { color: var(--text-muted); font-weight: 600; white-space: nowrap; }
table.data tr:hover td { background: rgba(255, 255, 255, 0.02); }

/* ---------- Member list ---------- */

.member-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.member-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-size: 14px;
}
.member-list .owner-tag { font-size: 11px; color: var(--primary); font-weight: 700; }
.member-main,
.member-side {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.member-side { justify-content: flex-end; }
.friend-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(139, 92, 246, .12);
    border: 1px solid var(--border);
    color: var(--primary-lt);
    font-size: 11px;
    font-weight: 800;
}
.members-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.members-card-head h2 { margin-bottom: 0; }
.invite-plus-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: #08070d;
    background: #fff;
    box-shadow: 0 12px 26px rgba(139, 92, 246, .35);
    cursor: pointer;
    transition: transform .14s ease, box-shadow .18s ease;
}
.invite-plus-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(139, 92, 246, .48);
}
.invite-plus-btn .icon {
    width: 20px;
    height: 20px;
    stroke-width: 3;
}

/* ---------- Lobby details layout ---------- */
.lobby-support-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.lobby-members-card { align-self: start; }
.lobby-detail-rows { display: flex; flex-direction: column; }
.lobby-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
}
.lobby-detail-row:last-child { border-bottom: none; }
.lobby-detail-row > span { color: var(--text-muted); }
.lobby-detail-row > strong {
    color: var(--text);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: right;
}
.lobby-detail-desc { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.lobby-status-form { display: flex; flex-direction: column; gap: 10px; }
.lobby-status-form .form-group { margin-bottom: 0; }

/* Member rows */
.member-main {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    text-decoration: none;
    color: var(--text);
}
.member-main:hover .member-name > span:first-child { color: var(--primary-lt); }
.member-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.member-name > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-side { flex-shrink: 0; }
.member-side .inline-form { margin: 0; }

/* Lobby description inside the panel */
.lobby-party-desc {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    line-height: 1.55;
}

/* Lobby settings modal */
.manage-modal {
    position: fixed;
    inset: 0;
    z-index: 96;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.manage-modal[hidden] { display: none; }
.manage-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 3, 8, .72);
    backdrop-filter: blur(8px);
}
.manage-modal-card {
    position: relative;
    width: min(460px, 100%);
    max-height: min(680px, calc(100vh - 40px));
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(28, 22, 45, .98), rgba(16, 13, 26, .99));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .68);
}
.manage-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid var(--border-soft);
}
.manage-modal-head h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 0; }
.manage-modal-head h2 .icon { color: var(--primary-lt); }
.lobby-manage-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}
.lobby-manage-actions form { margin: 0; }
.lobby-manage-actions .form-group { margin-bottom: 8px; }

/* ---------- Lobby friend invite modal ---------- */
.invite-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.invite-modal[hidden] { display: none; }
.invite-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 3, 8, .72);
    backdrop-filter: blur(8px);
}
.invite-modal-card {
    position: relative;
    width: min(440px, 100%);
    max-height: min(620px, calc(100vh - 40px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #050407;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .68), 0 0 64px rgba(139, 92, 246, .16);
    animation: pop .24s cubic-bezier(.2, .9, .3, 1.15);
}
.invite-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.invite-modal-kicker {
    display: block;
    margin-bottom: 2px;
    color: #ffd76a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.invite-modal-head h3 {
    margin: 0;
    font-size: 21px;
}
.invite-modal-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: var(--text);
    background: rgba(255, 255, 255, .06);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.invite-modal-close:hover { background: rgba(255, 255, 255, .12); }
.invite-modal-body {
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.invite-section-label {
    padding: 6px 4px 2px;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.invite-section-label + .invite-friend-list { margin-bottom: 4px; }
.invite-friend-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.invite-friend-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}
.invite-friend-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.invite-friend-copy strong,
.invite-friend-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.invite-friend-copy strong { font-size: 14px; }
.invite-friend-copy span {
    color: var(--text-muted);
    font-size: 12px;
}
.invite-empty {
    padding: 42px 20px;
    text-align: center;
    color: var(--text-muted);
}
.invite-empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #08070d;
    background: #fff;
}
.invite-empty p { margin: 0; }

/* ---------- Two-column detail layout ---------- */

.detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

/* ---------- Chat ---------- */

.lobby-voice-section {
    width: min(1040px, 100%);
    margin: 0 auto 14px;
}
.voice-wrap {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(10, 12, 18, .84);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
    overflow: hidden;
}
.voice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.voice-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.voice-title-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #7ee6ad;
    background: rgba(126, 230, 173, .12);
    border: 1px solid rgba(126, 230, 173, .24);
}
.voice-title h2 {
    margin: 0;
    font-size: 15px;
}
.voice-title span:not(.voice-title-icon) {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}
.voice-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.voice-icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    cursor: pointer;
}
.voice-icon-btn:hover { background: rgba(255, 255, 255, .12); }
.voice-icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.voice-icon-btn.is-danger {
    color: #ff8d9a;
    border-color: rgba(255, 141, 154, .26);
}
.voice-sound-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid rgba(126, 230, 173, .3);
    border-radius: 10px;
    color: #08110c;
    background: #7ee6ad;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.voice-sound-btn[hidden] { display: none; }
.voice-warning {
    margin: 10px 14px 0;
    padding: 9px 11px;
    border: 1px solid rgba(250, 204, 21, .28);
    border-radius: 10px;
    color: #fde68a;
    background: rgba(250, 204, 21, .08);
    font-size: 12px;
    line-height: 1.45;
}
.voice-warning[hidden] { display: none; }
.voice-warning a {
    color: #fff4bf;
    font-weight: 800;
    word-break: break-all;
}
.voice-settings-block {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
}
.voice-settings-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.voice-settings-head > .icon {
    color: #7ee6ad;
    flex-shrink: 0;
}
.voice-settings-head strong {
    display: block;
    font-size: 14px;
}
.voice-settings-head span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}
.voice-device-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.voice-device {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.voice-device > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}
.voice-device select {
    min-width: 0;
    height: 40px;
}
.voice-test-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.voice-test-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: rgba(0, 0, 0, .14);
}
.voice-test-card .btn {
    width: 100%;
    justify-content: center;
}
.voice-meter {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
}
.voice-meter span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7ee6ad, #facc15);
    transition: width .08s linear;
}
.voice-test-status {
    min-height: 16px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}
.voice-device-note {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}
.voice-device-note:empty { display: none; }
.voice-peers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px 14px;
}
.voice-peer {
    min-width: 150px;
    max-width: 220px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
}
.voice-peer .avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.voice-peer div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.voice-peer strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
.voice-peer span:last-child {
    color: var(--text-muted);
    font-size: 11px;
}
.voice-peer.is-speaking {
    border-color: rgba(126, 230, 173, .35);
    background: rgba(126, 230, 173, .09);
}
.voice-peer.is-muted { opacity: .72; }
.voice-wrap[data-voice-state="error"] .voice-title-icon {
    color: #ff8d9a;
    background: rgba(255, 141, 154, .12);
    border-color: rgba(255, 141, 154, .25);
}
.voice-wrap[data-voice-state="warning"] .voice-title-icon {
    color: #facc15;
    background: rgba(250, 204, 21, .12);
    border-color: rgba(250, 204, 21, .25);
}

.chat-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 70vh;
    min-height: 420px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg-card);
    overflow: hidden;
}
.lobby-chat-section {
    width: min(1040px, 100%);
    margin: 0 auto 34px;
}
.lobby-inline-chat {
    height: 46vh;
    min-height: 320px;
    max-height: 560px;
    border-radius: 20px;
    background: rgba(12, 10, 18, .78);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .42);
}
.chat-header {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.chat-header h2 { margin: 0; font-size: 15px; }
.chat-header span {
    color: var(--text-muted);
    font-size: 12px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
/* ---------- Messenger-style message rows ---------- */
.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    max-width: 86%;
}
.chat-msg.mine { flex-direction: row-reverse; align-self: flex-end; }
.chat-msg.grouped { margin-top: -1px; }

.chat-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    align-self: flex-end;
}
.chat-avatar-link {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 50%;
}
.chat-avatar-link:hover .chat-avatar { box-shadow: 0 0 0 2px var(--primary-lt); }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Show every sender's avatar (yours on the right, others on the left).
   Grouped follow-ups keep the avatar column but hide the picture. */
.chat-msg.grouped .chat-avatar,
.chat-msg.grouped .chat-avatar-link { visibility: hidden; height: 0; align-self: center; }

.chat-msg-body {
    position: relative;
    min-width: 0;
    max-width: min(540px, 100%);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.chat-msg.has-image .chat-msg-body {
    max-width: min(300px, 100%);
}
.chat-msg.mine .chat-msg-body { align-items: flex-end; }

.chat-msg .meta {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 4px;
    font-size: 12px;
}
.chat-name { color: var(--text-muted); font-weight: 700; }
.chat-time { color: var(--text-faint); font-size: 11px; }
.chat-host-tag {
    color: #ffd76a;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.chat-msg .bubble {
    width: fit-content;
    max-width: min(540px, 100%);
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    padding: 9px 13px;
    border-radius: 16px 16px 16px 5px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.chat-msg.grouped .bubble { border-radius: 16px 16px 16px 5px; }
.chat-msg.mine .bubble {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary-600);
    border-radius: 16px 16px 5px 16px;
}
.chat-msg.is-host:not(.mine) .chat-name { color: #ffd76a; }
.chat-msg.is-host:not(.mine) .bubble {
    border-color: rgba(255, 215, 106, .42);
    background: rgba(255, 215, 106, .12);
}
.chat-msg.mine.is-host .bubble {
    background: linear-gradient(135deg, #8b5cf6, #f59e0b);
    border-color: rgba(255, 215, 106, .45);
    box-shadow: 0 10px 24px rgba(139, 92, 246, .22);
}
.chat-text { white-space: pre-wrap; }
.chat-mention {
    color: var(--primary-lt);
    font-weight: 800;
}
.chat-msg.mine .chat-mention {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Quoted reply preview inside a bubble */
.chat-quote {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 7px;
    row-gap: 0;
    margin: 0 0 6px;
    padding: 6px 10px 6px 9px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 3px 0 0 var(--primary);
    font-size: 12px;
    cursor: default;
}
.chat-quote-icon {
    grid-row: 1 / span 2;
    display: inline-flex;
    color: var(--primary-lt);
    opacity: .9;
}
.chat-quote-icon .icon { width: 15px; height: 15px; }
.chat-quote-name { min-width: 0; font-weight: 800; color: var(--primary-lt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-quote-text { min-width: 0; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-msg.mine .chat-quote { background: rgba(0, 0, 0, .2); box-shadow: inset 3px 0 0 rgba(255, 255, 255, .8); }
.chat-msg.mine .chat-quote-icon,
.chat-msg.mine .chat-quote-name { color: rgba(255, 255, 255, .95); }

/* Message hover actions (reply + react) — a small pill on the bubble corner */
.chat-msg-actions {
    position: absolute;
    top: -12px;
    right: 4px;
    display: flex;
    gap: 1px;
    padding: 2px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--bg-card, #14121c);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease;
}
.chat-msg.mine .chat-msg-actions { right: auto; left: 4px; }
.chat-msg:hover .chat-msg-actions,
.chat-msg-actions:focus-within { opacity: 1; pointer-events: auto; }
.chat-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.chat-act-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* Image messages */
.chat-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0;
    border-radius: 12px;
    overflow: hidden;
    width: min(260px, 52vw);
    max-width: 100%;
    aspect-ratio: 4 / 3;
    background: #050407;
    border: 1px solid rgba(255, 255, 255, .08);
    cursor: zoom-in;
}
.chat-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 180px;
    object-fit: contain;
}
.bubble.is-image-only { max-width: max-content; padding: 4px; background: transparent; border-color: transparent; }
.chat-msg.mine .bubble.is-image-only { background: transparent; border-color: transparent; }
.bubble .chat-image + .chat-text { display: block; margin-top: 6px; }

.chat-image-modal {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: 22px;
}
.chat-image-modal[hidden] { display: none; }
.chat-image-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 2, 8, .84);
    backdrop-filter: blur(10px);
}
.chat-image-modal-shell {
    position: relative;
    width: min(1120px, 100%);
    height: min(780px, calc(100vh - 44px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 18px;
    background: rgba(8, 7, 13, .96);
    box-shadow: 0 34px 100px rgba(0, 0, 0, .72);
}
.chat-image-modal-tools {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    gap: 8px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(10, 8, 16, .74);
    backdrop-filter: blur(10px);
}
.chat-image-tool {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.chat-image-tool:hover {
    background: rgba(139, 92, 246, .32);
    transform: translateY(-1px);
}
.chat-image-tool .icon {
    width: 18px;
    height: 18px;
}
.chat-image-modal-stage {
    flex: 1;
    display: grid;
    place-items: center;
    overflow: auto;
    cursor: zoom-in;
    touch-action: none;
}
.chat-image-modal-stage.is-zoomed {
    cursor: grab;
}
.chat-image-modal-stage.is-dragging {
    cursor: grabbing;
}
.chat-image-modal-img {
    display: block;
    max-width: 92%;
    max-height: 86%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform .12s ease;
    user-select: none;
    -webkit-user-drag: none;
}
body.chat-preview-open {
    overflow: hidden;
}

/* Reaction chips under a bubble */
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.chat-reactions:empty { display: none; }
.chat-msg.mine .chat-reactions { justify-content: flex-end; }
.chat-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px 1px 5px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}
.chat-reaction-chip .re-count { color: var(--text-muted); font-weight: 700; font-size: 11px; }
.chat-reaction-chip.mine { border-color: var(--primary); background: rgba(139, 92, 246, .18); }
.chat-reaction-chip.mine .re-count { color: #c4b5fd; }
.chat-reaction-chip:hover { border-color: var(--primary); }

/* Reaction picker popover (created by JS, fixed so it is never clipped) */
.chat-react-pop {
    position: fixed;
    z-index: 200;
    display: flex;
    gap: 2px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card, #14121c);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.chat-react-opt {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 19px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}
.chat-react-opt:hover { background: rgba(139, 92, 246, .16); transform: scale(1.18); }

/* Seen / read receipts */
.chat-seen { display: flex; gap: 2px; margin-top: 3px; }
.chat-msg.mine .chat-seen { justify-content: flex-end; }
.chat-seen-avatar {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
}
.chat-seen-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Typing indicator */
.chat-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 18px 6px;
    color: var(--text-muted);
    font-size: 12px;
}
.chat-typing-dots { display: inline-flex; gap: 3px; }
.chat-typing-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: chatTypingBounce 1.2s infinite ease-in-out;
}
.chat-typing-dots i:nth-child(2) { animation-delay: .18s; }
.chat-typing-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes chatTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Attach button + photo preview */
.chat-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.chat-attach-btn:hover { color: #fff; border-color: var(--primary); background: rgba(139, 92, 246, .12); }
.chat-attach-btn .icon { width: 21px; height: 21px; }
.chat-attach-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 16px;
    padding: 8px 10px;
    border: 1px solid var(--border-soft);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: rgba(255, 255, 255, .04);
}
.chat-attach-preview.is-uploading::after {
    content: "";
    width: 18px;
    height: 18px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, .2);
    border-top-color: var(--primary-lt);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.chat-wrap.is-uploading .chat-send-btn {
    opacity: .75;
    cursor: wait;
}
@keyframes spin { to { transform: rotate(360deg); } }
.chat-attach-thumb,
#chat-attach-thumb {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.chat-attach-name { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted); }
.chat-attach-cancel {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
}
.chat-attach-cancel:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.chat-mention-pop {
    position: absolute;
    left: 70px;
    right: 86px;
    bottom: 68px;
    z-index: 5;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(28, 22, 45, .98), rgba(16, 13, 26, .99));
    box-shadow: 0 18px 45px rgba(0, 0, 0, .5);
}
.chat-mention-pop[hidden] { display: none; }
.chat-mention-opt {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    padding: 9px 10px;
    color: var(--text);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.chat-mention-opt:hover { background: rgba(139, 92, 246, .16); }
.chat-mention-opt span {
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 640px) {
    .chat-mention-pop {
        left: 12px;
        right: 12px;
        bottom: 76px;
    }
}

/* ---------- Reply banner above the input ---------- */
.chat-reply-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 18px;
    padding: 9px 12px;
    border-radius: 12px 12px 0 0;
    background: rgba(139, 92, 246, .1);
    border: 1px solid var(--border-soft);
    border-bottom: 0;
}
.chat-reply-bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--primary); }
.chat-reply-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-reply-to { font-size: 12px; color: var(--text-muted); }
.chat-reply-to strong { color: #fff; }
.chat-reply-text {
    font-size: 12px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-reply-cancel {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
}
.chat-reply-cancel:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- Composer + emoji picker beside Send ---------- */
.chat-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-soft);
}
.chat-form input { flex: 1; margin: 0; }
.chat-emoji-picker { position: relative; flex-shrink: 0; }
.chat-emoji-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.chat-emoji-toggle:hover,
.chat-emoji-toggle[aria-expanded="true"] {
    color: #ffd76a;
    border-color: var(--primary);
    background: rgba(139, 92, 246, .12);
}
.chat-emoji-toggle .icon { width: 22px; height: 22px; }
.chat-emoji-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    width: 296px;
    max-width: 78vw;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card, #14121c);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
}
.chat-emoji-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-size: 19px;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}
.chat-emoji-btn:hover { background: rgba(139, 92, 246, .16); transform: scale(1.12); }
.chat-send-btn { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.chat-send-btn .icon { width: 17px; height: 17px; }

.chat-empty { color: var(--text-faint); text-align: center; margin: auto; }

@media (prefers-reduced-motion: reduce) {
    .chat-msg-actions,
    .chat-act-btn,
    .chat-emoji-btn,
    .chat-emoji-toggle,
    .chat-attach-btn,
    .chat-react-opt,
    .chat-typing-dots i,
    .party-add-friend button { transition: none; animation: none; }
}
@media (max-width: 560px) {
    .chat-msg { max-width: 96%; }
    .chat-msg-actions { position: static; transform: none; opacity: 1; margin-top: 2px; }
    .chat-send-label { display: none; }
    .chat-send-btn { width: 44px; justify-content: center; padding: 0; }
}

/* ---------- Floating chat presence ---------- */
.floating-bubbles {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 10px;
}
.floating-chat, .dm-popup { position: relative; }
.floating-chat-toggle, .dm-popup-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 12px 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    box-shadow: 0 12px 30px var(--primary-glow);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.floating-chat-dot,
.presence-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 10px var(--success);
}
.floating-chat-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: min(360px, calc(100vw - 28px));
    max-height: min(520px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(28, 22, 45, 0.98), rgba(16, 13, 26, 0.99));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .58), 0 0 48px rgba(139, 92, 246, .14);
}
.floating-chat-panel[hidden] { display: none; }
.floating-chat.is-open .floating-chat-panel { display: flex; }
.floating-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.floating-chat-head strong {
    display: block;
    font-size: 16px;
}
.floating-chat-head span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}
.floating-chat-close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    background: rgba(255, 255, 255, .04);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.floating-chat-list {
    overflow-y: auto;
    padding: 8px;
}
.floating-chat-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border-radius: 12px;
    color: var(--text);
}
.floating-chat-user:hover {
    background: rgba(139, 92, 246, .14);
    color: #fff;
}
.floating-chat-avatar {
    position: relative;
    display: inline-flex;
}
.presence-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    border: 2px solid #151020;
}
.presence-dot.is-offline {
    background: var(--text-faint);
    box-shadow: none;
}
.floating-chat-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.floating-chat-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.floating-chat-copy em {
    color: var(--text-faint);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}
.floating-chat-copy span {
    color: var(--text-muted);
    font-size: 12px;
}
.floating-chat-empty {
    margin: 0;
    padding: 20px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* ---------- Floating Messages popup (embeds messages.php in an iframe) ---------- */
.dm-popup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
.dm-popup-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: min(460px, calc(100vw - 28px));
    height: min(640px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(28, 22, 45, 0.98), rgba(16, 13, 26, 0.99));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .58), 0 0 48px rgba(139, 92, 246, .14);
}
.dm-popup-panel[hidden] { display: none; }
.dm-popup.is-open .dm-popup-panel { display: flex; }
.dm-popup-frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: transparent;
}

/* ---------- Chrome-less rendering when a page is embedded in the DM popup iframe ---------- */
.is-embedded .site-header,
.is-embedded .site-footer,
.is-embedded .floating-bubbles,
.is-embedded #app-modal,
.is-embedded #lobby-marquee {
    display: none !important;
}
.is-embedded main.container.page {
    max-width: none;
    padding: 0;
    min-height: 100vh;
}
.is-embedded .dm-wrap { border-radius: 0; height: 100vh; }
.is-embedded .dm-list-panel,
.is-embedded .dm-thread-panel { border-radius: 0; border-width: 0; }

/* ---------- Misc utility ---------- */

.stack > * + * { margin-top: 14px; }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-3 { margin-bottom: 14px; }
.lobby-meta-flush { border-top: none; padding-top: 0; }
.inline-form { display: inline-block; margin-right: 6px; }
.divider { height: 1px; background: var(--border-soft); margin: 18px 0; border: 0; }

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; }
.stat {
    flex: 1;
    min-width: 130px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.stat .num { font-size: 26px; font-weight: 800; }
.stat .label { color: var(--text-muted); font-size: 13px; }

/* ---------- Support Us ---------- */

.support-page {
    width: min(980px, 100%);
    margin: 0 auto 42px;
}
.support-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}
.support-head h1 {
    font-size: 34px;
    margin-bottom: 6px;
}
.support-head p {
    max-width: 620px;
    margin: 0;
    color: var(--text-muted);
}
.support-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.support-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.support-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: rgba(12, 10, 18, .76);
}
.support-plan-premium {
    border-color: rgba(139, 92, 246, .34);
    background:
        linear-gradient(135deg, rgba(139, 92, 246, .16), rgba(52, 211, 153, .08)),
        rgba(12, 10, 18, .8);
}
.support-plan-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}
.support-plan-name {
    display: block;
    margin-bottom: 6px;
    color: #fff;
    font-weight: 800;
}
.support-plan p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}
.support-price {
    flex-shrink: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    text-align: right;
}
.support-price small {
    color: var(--text-faint);
    font-size: 12px;
    font-weight: 800;
}
.support-perks {
    display: grid;
    gap: 9px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.support-perks li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    align-items: start;
    min-width: 0;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.45;
}
.support-check {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    padding: 2.5px;
    border-radius: 50%;
    color: var(--primary-lt);
    background: rgba(139, 92, 246, .14);
}
.support-plan-premium .support-check {
    color: #7ff0c6;
    background: rgba(52, 211, 153, .14);
}
.support-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    padding: 4px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    box-shadow: 0 6px 16px var(--primary-glow);
}
.support-plan-cta {
    margin-top: auto;
    padding-top: 16px;
}
.support-subscribe-btn { margin-top: 0; }
.support-cta-hint {
    margin: 9px 0 0;
    text-align: center;
    color: var(--text-faint);
    font-size: 12px;
}
.support-current {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .04);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}
.support-current .icon { color: var(--primary-lt); }
.support-current-active {
    width: 100%;
    justify-content: center;
    border-color: rgba(52, 211, 153, .34);
    background: rgba(52, 211, 153, .12);
    color: #8ff2ca;
}
.support-current-active .icon { color: #8ff2ca; }
.support-current-lg { padding: 9px 14px; }

/* Where your support goes */
.support-powers {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border-soft);
}
.support-powers-title {
    margin: 0 0 14px;
    font-size: 18px;
}
.support-powers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.support-power {
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: rgba(12, 10, 18, .6);
}
.support-power-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 11px;
    border-radius: 10px;
    color: var(--primary-lt);
    background: rgba(139, 92, 246, .14);
}
.support-power-ico .icon { width: 19px; height: 19px; }
.support-power strong { display: block; margin-bottom: 5px; color: #fff; font-size: 14.5px; }
.support-power p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.support-note-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    color: var(--text-faint);
    font-size: 13px;
}
.support-note-line .icon { color: var(--warning); }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
    .detail-grid { grid-template-columns: 1fr; }
    .lobby-party-panel {
        padding: 20px 16px 18px;
        border-radius: 26px;
    }
    .lobby-cover-photo img {
        width: 100%;
        opacity: .22;
    }
    .lobby-party-head {
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .lobby-head-meta { max-width: 44%; }
    .lobby-head-desc { -webkit-line-clamp: 2; font-size: 11.5px; }
    .lobby-party-title {
        gap: 11px;
    }
    .lobby-party-icon {
        width: 32px;
        height: 32px;
    }
    .lobby-party-title h1 {
        font-size: 23px;
    }
    .lobby-party-body {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .party-member-strip {
        gap: 14px;
    }
    .party-member-tile {
        width: 86px;
        min-width: 86px;
    }
    .party-member-tile .avatar,
    .party-invite-plus {
        width: 58px;
        height: 58px;
        border-radius: 18px;
    }
    .party-member-tile .avatar {
        border-radius: 50%;
        font-size: 22px;
    }
    .party-member-name {
        font-size: 15px;
    }
    .party-join-btn,
    .party-closed-pill {
        min-height: 72px;
        border-radius: 24px;
        font-size: 26px;
    }
    .voice-device-grid,
    .voice-test-grid { grid-template-columns: 1fr; }
    .lobby-inline-chat {
        min-height: 360px;
        height: 58vh;
    }
    /* Footer chips wrap and the code/PIN buttons flow inline (no auto-push). */
    .lobby-party-foot { gap: 7px; }
    .foot-chip { padding: 6px 12px; }
    .party-code-btn { margin-left: 0; padding: 8px 12px; }
    .foot-chip-host { max-width: 100%; flex: 1 1 100%; }
    .form-row { grid-template-columns: 1fr; }
    /* Keep the header a single compact row so dropdowns anchor predictably. */
    .header-inner { height: 60px; }
    .brand-logo { height: 38px; }
    .main-nav { gap: 12px; flex-wrap: nowrap; }
    .nav-user-trigger > span:not(.nav-user-caret):not(.verified-badge):not(.avatar) {
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Anchor nav dropdowns to the viewport so they never run off the edge. */
    .nav-notification-menu,
    .nav-user-menu {
        position: fixed;
        top: 66px;
        right: 10px;
        left: auto;
        width: min(360px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 84px);
    }
    .nav-user-menu { width: min(240px, calc(100vw - 20px)); }
    .hero h1 { font-size: 27px; }
    .floating-bubbles { right: 14px; bottom: 14px; }
    .dm-popup-panel {
        position: fixed;
        inset: 12px 12px 76px;
        width: auto;
        height: auto;
        max-height: none;
        border-radius: 14px;
    }
    .dm-popup-toggle {
        min-height: 48px;
        padding: 11px 16px;
    }
    .support-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .support-actions {
        justify-content: flex-start;
        width: 100%;
    }
    .support-actions .btn {
        flex: 1 1 160px;
    }
    .support-plan-grid {
        grid-template-columns: 1fr;
    }
    .support-plan-head {
        flex-direction: column;
    }
    .support-price {
        text-align: left;
    }
    .support-powers-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 400px) {
    .container { padding: 0 12px; }
    .brand-logo { height: 34px; }
    .main-nav { gap: 8px; }
    .main-nav a { font-size: 14px; }
    .nav-user-trigger { padding: 4px 8px 4px 4px; }
    .nav-user-trigger > span:not(.nav-user-caret):not(.verified-badge):not(.avatar) { max-width: 56px; }
}

@media (max-width: 480px) {
    .lobby-party-panel { padding: 18px 13px 16px; border-radius: 22px; }
    /* Stack the header: title, then the badges + description underneath it. */
    .lobby-party-head { flex-direction: column; gap: 12px; }
    .lobby-head-meta {
        max-width: 100%;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
    }
    .lobby-head-desc { text-align: left; -webkit-line-clamp: 3; flex: 1 1 100%; font-size: 12px; }
    .lobby-party-title h1 { font-size: 21px; }
    .party-member-tile, .party-member-tile.party-slot-tile { width: 76px; min-width: 76px; }
    .party-member-tile .avatar, .party-slot-ring, .party-invite-plus { width: 52px; height: 52px; }
    .party-member-name { font-size: 13px; }
    /* Footer becomes a tidy 2-column chip grid; buttons span full width. */
    .lobby-party-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .foot-chip-host { grid-column: 1 / -1; }
    .party-pin-btn, .party-code-btn, .party-end-call-btn, .lobby-announce-inline { grid-column: 1 / -1; margin-left: 0; justify-content: center; }
    .lobby-announce-inline .party-code-btn { width: 100%; justify-content: center; }
    /* Voice: stack header, let peers fill the row, keep controls reachable. */
    .voice-header { align-items: flex-start; flex-wrap: wrap; }
    .voice-actions { flex-wrap: wrap; }
    .voice-peer { min-width: 100%; max-width: 100%; }
    .lobby-inline-chat { height: 66vh; border-radius: 16px; }
    .chat-messages { padding: 10px 10px; }
    .chat-form { gap: 7px; padding: 10px 12px; }
    .chat-emoji-toggle, .chat-attach-btn { width: 40px; height: 40px; }
    .chat-msg { max-width: 100%; }
    /* Modals: use nearly the full width and stay scrollable. */
    .invite-modal, .manage-modal, .app-modal { padding: 12px; }
    .invite-modal-card, .manage-modal-card { width: 100%; max-height: calc(100vh - 24px); }
    .app-modal-card { width: 100%; }
    /* Long titles/codes never force a horizontal scroll. */
    .lobby-party-title h1, .chat-quote-text, .voice-warning a { overflow-wrap: anywhere; }
}

/* ============================================================
   Premium features: marquee, mutes, chat upsell, announce, badges
   ============================================================ */

/* ---- Premium lobby-code broadcast marquee ---- */
.lobby-marquee {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background:
        linear-gradient(90deg, rgba(139, 92, 246, .24), rgba(232, 121, 249, .18), rgba(56, 189, 248, .12)),
        rgba(8, 7, 13, .92);
    border-bottom: 1px solid rgba(139, 92, 246, .4);
    box-shadow: 0 6px 24px rgba(139, 92, 246, .22);
    overflow: hidden;
}
.lobby-marquee[hidden] { display: none; }
.lobby-marquee-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    color: #ffd76a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.lobby-marquee-tag .icon { width: 13px; height: 13px; }
.lobby-marquee-viewport {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lobby-marquee-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.lobby-marquee-track.is-ready {
    animation: marqueeScroll var(--marquee-duration, 12s) linear infinite;
}
.lobby-marquee:hover .lobby-marquee-track { animation-play-state: paused; }
.marquee-group {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding-right: 14px;
}
@keyframes marqueeScroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(var(--marquee-distance, -320px), 0, 0); }
}
.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 8px;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0, 0, 0, .18));
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.marquee-item:hover {
    background: rgba(139, 92, 246, .32);
    border-color: var(--primary-lt);
    transform: translateY(-1px);
}
.marquee-item-code {
    font-family: "Consolas", monospace;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ffd76a;
}
.marquee-item-title { font-weight: 700; font-size: 13px; }
.marquee-item-meta { font-size: 12px; color: rgba(255, 255, 255, .7); }
.marquee-item-join { font-size: 12px; font-weight: 800; color: var(--primary-lt); }
.lobby-marquee-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .3);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.lobby-marquee-close:hover { background: rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: reduce) {
    .lobby-marquee-track { animation: none; white-space: normal; flex-wrap: wrap; }
    .marquee-group:nth-child(n + 2) { display: none; }
}

/* ---- Host mute button on member tiles (mirrors the kick chip, teal) ---- */
.party-mute {
    position: absolute;
    top: -6px;
    left: 40px;
    margin: 0;
    z-index: 3;
}
.party-mute button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid #020204;
    border-radius: 50%;
    color: #06120c;
    background: #7ee6ad;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: transform .14s ease, background .14s ease;
}
.party-mute button:hover { transform: scale(1.08); }
.party-mute.is-active button { color: #fff; background: var(--danger, #ef4444); }
.party-mute .icon { width: 14px; height: 14px; stroke-width: 2.4; }

/* ---- Chat composer premium hint (basic users) ---- */
.chat-premium-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px dashed rgba(255, 215, 106, .4);
    border-radius: 12px;
    color: #ffd76a;
    background: rgba(255, 215, 106, .08);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.chat-premium-hint:hover { color: #ffe08a; border-color: #ffd76a; }
.chat-premium-hint .icon { width: 14px; height: 14px; }

/* ---- Announce button + manage upsell ---- */
.btn-announce {
    color: #08110c;
    background: linear-gradient(135deg, #ffd76a, #ffb020);
    border: 0;
}
.btn-announce:hover { color: #08110c; filter: brightness(1.05); }
.lobby-announce-form { margin: 0; }
.lobby-announce-form .form-hint { margin: 6px 2px 0; }
.lobby-announce-inline {
    align-self: center;
}
.lobby-announce-inline .party-announce-btn,
.party-announce-btn {
    margin-left: 0;
    border-color: rgba(255, 215, 106, .38);
    color: #08110c;
    background: linear-gradient(135deg, #ffd76a, #ffb020);
}
.lobby-announce-inline .party-announce-btn:hover,
.party-announce-btn:hover {
    color: #08110c;
    border-color: rgba(255, 215, 106, .72);
    background: linear-gradient(135deg, #ffe08a, #ffc247);
}
.party-announce-btn .icon { color: #08110c; }
.party-announce-btn.is-locked {
    color: #ffd76a;
    background: rgba(255, 215, 106, .1);
    border-color: rgba(255, 215, 106, .34);
}
.party-announce-btn.is-locked:hover {
    color: #ffe08a;
    background: rgba(255, 215, 106, .18);
}
.party-announce-btn.is-locked .icon { color: #ffd76a; }
.manage-upsell {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border: 1px dashed rgba(255, 215, 106, .35);
    border-radius: 12px;
    background: rgba(255, 215, 106, .07);
    color: var(--text-muted);
    font-size: 13px;
}
.manage-upsell .icon { color: #ffd76a; flex-shrink: 0; }
.manage-upsell strong { color: #ffd76a; }

/* ---- Small nav menu unread badge ---- */
.nav-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
.nav-user-menu a { justify-content: flex-start; }

/* ---- Create-lobby daily quota pill ---- */
.create-quota {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(139, 92, 246, .1);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.create-quota strong { color: #fff; }
.create-quota.is-empty { border-color: rgba(255, 92, 114, .4); background: rgba(255, 92, 114, .1); color: #ffb3bf; }
.create-quota.is-empty strong { color: #ffb3bf; }

@media (max-width: 560px) {
    .marquee-item-meta { display: none; }
    .lobby-marquee { padding: 7px 10px; gap: 8px; }
    .lobby-marquee-tag span { display: none; }
}