/* MEMEZ — topbar v2 (global, all pages) — 2026-05-17
 * Migrated from home redesign. No body-class scoping — applies everywhere.
 * Old .topbar / .menu / .mobile-menu / .burger styles in /min/css_main_*.css
 * don't conflict because new markup uses .v2-* class names. */

/* Custom-element <topbar> from legacy markup — neutralize if it appears */

.v2-topbar{
    --tb-bg:#100E0F; --tb-line:rgba(255,255,255,.05); --tb-line-2:rgba(255,255,255,.09);
    --tb-text:#fff; --tb-dim:#A9A9A9; --tb-dim-2:#6a6669;
    --tb-accent:#FF204E; --tb-accent-2:#AD1B39; --tb-accent-soft:rgba(255,32,78,.10);
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 40px; border-bottom:1px solid var(--tb-line);
    background:var(--tb-bg); position:sticky; top:0; z-index:30;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    font-family:Inter,system-ui,sans-serif; font-size:14px; line-height:1.5;
    color:var(--tb-text);
}
.v2-topbar *,.v2-topbar *::before,.v2-topbar *::after{ box-sizing:border-box; }
.v2-topbar a{ color:inherit; text-decoration:none; transition:color .15s; }
.v2-topbar button{ font-family:inherit; cursor:pointer; }

.v2-topbar .v2-logo{
    font-weight:700; font-size:24px; line-height:1; letter-spacing:-.05em;
    background:linear-gradient(180deg,#FF204E,#AD1B39);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    display:inline-block;
}
.v2-topbar .v2-menu{ display:flex; gap:26px; list-style:none; margin:0; padding:0; font-size:13.5px; color:var(--tb-dim); align-items:center; }
.v2-topbar .v2-menu > li{ position:relative; }
.v2-topbar .v2-menu li > a{ position:relative; padding:6px 0; transition:color .15s; display:inline-flex; align-items:center; gap:5px; color:var(--tb-dim); }
.v2-topbar .v2-menu li > a:hover{ color:var(--tb-text); }
.v2-topbar .v2-menu li > a.active{ color:var(--tb-text); }
.v2-topbar .v2-menu li > a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-19px;
    height:2px; background:var(--tb-accent);
}

/* Mega menu */
.v2-topbar .has-mega .chev{ transition:transform .2s; }
.v2-topbar .has-mega:hover .chev,
.v2-topbar .has-mega:focus-within .chev{ transform:rotate(180deg); }
.v2-mega{
    position:absolute; top:100%; left:-20px; margin-top:18px;
    width:760px; max-width:90vw;
    background:#161214; border:1px solid var(--tb-line-2);
    border-radius:16px; padding:22px 24px;
    box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .15s, transform .15s, visibility .15s;
    z-index:40;
}
.v2-topbar .has-mega:hover .v2-mega,
.v2-topbar .has-mega:focus-within .v2-mega{ opacity:1; visibility:visible; transform:translateY(0); }
.v2-mega::before{
    content:""; position:absolute; left:30px; top:-7px;
    width:12px; height:12px; transform:rotate(45deg);
    background:#161214; border-left:1px solid rgba(255,255,255,.09); border-top:1px solid rgba(255,255,255,.09);
}
.v2-mega-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px 24px; }
.v2-mega-group{ display:flex; flex-direction:column; gap:2px; padding:6px 0; }
.v2-mega-game{
    font-size:13.5px; font-weight:700; color:#fff !important;
    padding:6px 8px; border-radius:8px; letter-spacing:-.2px;
    display:inline-flex; align-items:center; gap:8px;
}
.v2-mega-game::before{ content:""; width:6px; height:6px; border-radius:50%; background:#FF204E; flex:none; }
.v2-mega-game:hover{ background:rgba(255,32,78,.08); color:#FF204E !important; }
.v2-mega-sub{
    font-size:12px; color:#A9A9A9 !important;
    padding:4px 8px 4px 22px; border-radius:8px;
    transition:color .15s, background .15s;
}
.v2-mega-sub:hover{ color:#fff !important; background:rgba(255,255,255,.03); }
.v2-mega-foot{
    margin-top:14px; padding-top:14px;
    border-top:1px solid rgba(255,255,255,.05);
    display:flex; justify-content:space-between; align-items:center;
    font-size:12.5px; color:#A9A9A9;
}
.v2-mega-foot a{ color:#FF204E !important; font-weight:600; }

.v2-userbar{ display:flex; align-items:center; gap:10px; font-size:13px; }
.v2-userbar .v2-user{
    display:flex; align-items:center; gap:8px; padding:7px 12px;
    border:1px solid rgba(255,255,255,.09); border-radius:999px; color:#fff !important;
}
.v2-userbar .v2-bal{
    display:flex; align-items:center; gap:8px;
    padding:7px 12px; border-radius:999px;
    background:rgba(255,32,78,.10); color:#fff;
    border:1px solid rgba(255,32,78,.25);
}
.v2-userbar .v2-bal b{ color:#FF204E; font-weight:700; }
.v2-topbar .btn-mem{
    appearance:none; border:none; color:#fff; font-weight:600;
    padding:9px 16px; font-size:13px; border-radius:999px;
    background:linear-gradient(180deg,#FF204E,#AD1B39);
    box-shadow:0 8px 20px rgba(255,32,78,.30), inset 0 1px 0 rgba(255,255,255,.18);
    display:inline-flex; align-items:center; gap:10px;
}

/* RU/EN toggle */
.v2-lang{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; font-size:12px; }
.v2-lang a{
    appearance:none; background:transparent; border:none;
    font-family:inherit; font-weight:700; padding:0;
    font-size:12px; letter-spacing:.4px; text-transform:uppercase;
    color:#A9A9A9 !important;
}
.v2-lang a:hover{ color:#fff !important; }
.v2-lang a.is-active{ color:#FF204E !important; text-decoration:underline; text-underline-offset:4px; }
.v2-lang .sep{ color:#6a6669; }

/* Mobile-only topbar elements (hidden on desktop) */
.v2-hamb, .v2-acc{ display:none; }

/* Mobile drawer */
.v2-drawer-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
    z-index:90; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
}
.v2-drawer-backdrop.on{ opacity:1; visibility:visible; }
.v2-drawer{
    position:fixed; top:0; left:0; bottom:0; width:84%; max-width:340px;
    background:#0f0d0e; border-right:1px solid rgba(255,255,255,.05);
    transform:translateX(-100%); transition:transform .25s ease;
    z-index:100; display:flex; flex-direction:column;
    font-family:Inter,system-ui,sans-serif; color:#fff;
}
.v2-drawer.on{ transform:translateX(0); }
.v2-drawer .v2-logo{
    font-weight:700; font-size:24px; line-height:1; letter-spacing:-.05em;
    background:linear-gradient(180deg,#FF204E,#AD1B39);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    display:inline-block;
}
.v2-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.05);
}
.v2-drawer-close{
    appearance:none; background:transparent; border:none; padding:6px;
    color:#A9A9A9; cursor:pointer;
}
.v2-drawer-body{ padding:8px 0; overflow-y:auto; flex:1; }
.v2-drawer-item{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 18px; color:#fff !important; font-size:15px; font-weight:600;
    border-left:2px solid transparent; text-decoration:none;
}
.v2-drawer-item.active{ background:rgba(255,32,78,.06); border-left-color:#FF204E; }
.v2-drawer-item .arr{ color:#6a6669; }
.v2-drawer-item.cta{
    background:rgba(255,32,78,.10); margin:6px 12px; border-radius:10px;
    border-left:none; padding:12px 14px;
    color:#ffb0c0 !important;
}
.v2-drawer-section{
    padding:18px 18px 6px; font-size:11px; letter-spacing:1.4px;
    text-transform:uppercase; color:#6a6669; font-weight:700;
}
.v2-drawer-foot{ padding:14px 18px; border-top:1px solid rgba(255,255,255,.05); }
.v2-drawer-foot .btn-mem{
    width:100%; justify-content:center;
    appearance:none; border:none; color:#fff; font-weight:600; font-size:14px;
    padding:14px 22px; border-radius:12px; cursor:pointer;
    background:linear-gradient(180deg,#FF204E,#AD1B39);
    box-shadow:0 8px 20px rgba(255,32,78,.30), inset 0 1px 0 rgba(255,255,255,.18);
    display:flex; align-items:center; gap:10px;
}
.v2-drawer-profile{
    display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
    padding:14px 16px; margin:6px 12px 12px; border-radius:12px;
    background:rgba(20,15,17,.5); border:1px solid rgba(255,255,255,.09);
    color:#fff !important;
}
.v2-drawer-profile .av{
    width:38px; height:38px; border-radius:50%;
    background:linear-gradient(135deg,#FF204E,#AD1B39);
    display:grid; place-items:center; color:#fff;
}
.v2-drawer-profile .who .nm{ font-weight:700; color:#fff; font-size:14px; }
.v2-drawer-profile .who .lk{ color:#A9A9A9; font-size:12px; margin-top:2px; }
.v2-drawer-profile .bal-big{ text-align:right; }
.v2-drawer-profile .bal-big .v{ color:#FF204E; font-weight:700; font-size:15px; }
.v2-drawer-profile .bal-big .lbl{ color:#A9A9A9; font-size:11px; }

/* Floating chat-users button — global FAB */
.v2-chat-fab{
    position:fixed; right:24px; bottom:24px; z-index:50;
    display:inline-flex; align-items:center; gap:12px;
    background:linear-gradient(180deg,#FF204E,#AD1B39);
    border:none; color:#fff !important; font-weight:600; font-size:14px;
    padding:14px 22px; border-radius:14px; cursor:pointer; text-decoration:none;
    box-shadow:0 16px 30px rgba(255,32,78,.35), inset 0 1px 0 rgba(255,255,255,.18);
    font-family:Inter,system-ui,sans-serif;
}
.v2-chat-fab .count{ display:inline-flex; align-items:center; gap:6px; font-weight:700; }

/* Hide legacy Chatbro on pages that use v2 chat FAB */
body.has-v2-fab iframe[src*="chatbro" i],
body.has-v2-fab div[id*="chatbro" i],
body.has-v2-fab div[class*="chatbro" i]{ display:none !important; }

/* Responsive — mobile: hide desktop menu, show hamb + account icons */
@media (max-width:760px){
    .v2-topbar .v2-menu{ display:none; }
    .v2-topbar .v2-userbar .v2-user,
    .v2-topbar .v2-userbar .btn-mem{ display:none; }
    .v2-hamb, .v2-acc{
        display:inline-flex; align-items:center; justify-content:center;
        width:38px; height:38px; border-radius:10px;
        background:transparent; border:1px solid rgba(255,255,255,.09);
        color:#fff; cursor:pointer;
    }
    .v2-topbar{ padding:12px 16px; }
    .v2-chat-fab{ padding:12px 16px; font-size:13px; right:14px; bottom:14px; }
    .v2-chat-fab span:not(.count){ display:none; }
}