/* =========================================================
   AVGUST ROLE PLAY — GLOBAL GLASS HEADER V9
   One header style for public pages, map, UCP and admin.
   ========================================================= */

html.site-global-fx .topbar.topbar--floating{
    position:fixed!important;
    top:10px!important;
    left:max(14px,calc((100vw - 1490px)/2))!important;
    right:max(14px,calc((100vw - 1490px)/2))!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    min-height:72px!important;
    margin:0!important;
    padding:0 22px!important;
    box-sizing:border-box!important;
    z-index:2147483000!important;

    display:grid!important;
    grid-template-columns:max-content minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:22px!important;

    border:1px solid rgba(205,86,241,.29)!important;
    border-radius:20px!important;
    background:linear-gradient(105deg,rgba(19,10,25,.88),rgba(8,6,12,.80) 48%,rgba(28,9,36,.82))!important;
    -webkit-backdrop-filter:blur(15px) saturate(1.18)!important;
    backdrop-filter:blur(15px) saturate(1.18)!important;
    box-shadow:0 16px 44px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.055),0 0 30px rgba(158,44,204,.07)!important;

    overflow:visible!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    isolation:isolate!important;
    transition:top .2s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease,-webkit-backdrop-filter .22s ease,backdrop-filter .22s ease!important;
}

html.site-global-fx .topbar.topbar--floating::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    border-radius:inherit;
    background:radial-gradient(440px 110px at var(--fx-header-x,22%) 0%,rgba(211,94,246,.14),transparent 70%);
    opacity:.78;
    transition:opacity .2s ease;
}
html.site-global-fx .topbar.topbar--floating::after{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    bottom:-1px;
    height:1px;
    border-radius:999px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(192,68,231,.52),rgba(235,126,214,.24),transparent);
    opacity:.8;
}

html.site-global-fx .topbar.topbar--floating.fx-scrolled{
    top:6px!important;
    background:linear-gradient(105deg,rgba(17,9,23,.68),rgba(7,5,10,.56) 48%,rgba(27,9,35,.62))!important;
    border-color:rgba(204,87,240,.23)!important;
    -webkit-backdrop-filter:blur(13px) saturate(1.13)!important;
    backdrop-filter:blur(13px) saturate(1.13)!important;
    box-shadow:0 14px 40px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04),0 0 24px rgba(150,40,196,.055)!important;
}
html.site-global-fx .topbar.topbar--floating.fx-scrolled::before{opacity:.48}

/* Prevent old page-specific CSS from hiding or moving the logo. */
html.site-global-fx .topbar.topbar--floating .brand{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    width:auto!important;
    min-width:170px!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    position:relative!important;
    inset:auto!important;
    float:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    overflow:visible!important;
    flex:none!important;
    color:#fff!important;
    text-decoration:none!important;
}
html.site-global-fx .topbar.topbar--floating .brand-emblem{
    display:grid!important;
    place-items:center!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:drop-shadow(0 0 10px rgba(190,69,230,.17));
}
html.site-global-fx .topbar.topbar--floating .brand-emblem span{display:block!important;opacity:1!important;visibility:visible!important}
html.site-global-fx .topbar.topbar--floating .brand-copy{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    opacity:1!important;
    visibility:visible!important;
    white-space:nowrap!important;
}
html.site-global-fx .topbar.topbar--floating .brand-copy b{display:block!important;color:#fff!important;opacity:1!important;visibility:visible!important}
html.site-global-fx .topbar.topbar--floating .brand-copy small{display:block!important;opacity:.74!important;visibility:visible!important}

html.site-global-fx .topbar.topbar--floating .nav-toggle{display:none!important}
html.site-global-fx .topbar.topbar--floating .nav{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:clamp(4px,.55vw,10px)!important;
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    overflow:visible!important;
    white-space:nowrap!important;
}
html.site-global-fx .topbar.topbar--floating .nav>a,
html.site-global-fx .topbar.topbar--floating .nav-social,
html.site-global-fx .topbar.topbar--floating .nav-socials,
html.site-global-fx .topbar.topbar--floating .nav-divider{flex:0 0 auto!important}

html.site-global-fx .topbar.topbar--floating .nav>a,
html.site-global-fx .topbar.topbar--floating .nav-social{
    transition:transform .18s ease,color .18s ease,text-shadow .18s ease,background-color .18s ease!important;
}
html.site-global-fx .topbar.topbar--floating .nav>a:hover,
html.site-global-fx .topbar.topbar--floating .nav-social:hover{
    transform:translateY(-1px)!important;
    text-shadow:0 0 12px rgba(212,108,244,.24);
}

html.site-global-fx .topbar-layout-spacer{
    display:block!important;
    width:100%!important;
    height:96px;
    pointer-events:none;
}

@media (max-width:1250px){
    html.site-global-fx .topbar.topbar--floating{
        left:9px!important;right:9px!important;padding:0 15px!important;column-gap:13px!important;border-radius:17px!important;
    }
    html.site-global-fx .topbar.topbar--floating .brand{min-width:145px!important;gap:8px!important}
    html.site-global-fx .topbar.topbar--floating .brand-emblem{width:40px!important;height:40px!important;min-width:40px!important}
    html.site-global-fx .topbar.topbar--floating .nav{gap:4px!important}
    html.site-global-fx .topbar.topbar--floating .nav>a{font-size:11px!important;padding-left:7px!important;padding-right:7px!important}
}

@media (max-width:900px){
    html.site-global-fx .topbar.topbar--floating{
        top:6px!important;left:6px!important;right:6px!important;min-height:64px!important;padding:0 12px!important;border-radius:15px!important;
        display:flex!important;
    }
    html.site-global-fx .topbar.topbar--floating .brand{min-width:0!important}
    html.site-global-fx .topbar.topbar--floating .brand-copy{display:none!important}
    html.site-global-fx .topbar.topbar--floating .nav-toggle{display:flex!important;margin-left:auto!important}
    html.site-global-fx .topbar.topbar--floating .nav{width:auto!important}
    html.site-global-fx .topbar-layout-spacer{height:78px}
}

/* =========================================================
   V12 — MOBILE HEADER FIX
   Keep the navigation outside the header flow on phones.
   ========================================================= */
@media (max-width:900px){
    html.site-global-fx .topbar.topbar--floating{
        min-height:64px!important;
        height:64px!important;
        align-items:center!important;
        overflow:visible!important;
    }

    html.site-global-fx .topbar.topbar--floating .brand{
        min-width:0!important;
        max-width:calc(100% - 54px)!important;
    }
    html.site-global-fx .topbar.topbar--floating .brand-copy{
        display:flex!important;
        min-width:0!important;
    }
    html.site-global-fx .topbar.topbar--floating .brand-copy b{
        font-size:12px!important;
        letter-spacing:1.35px!important;
    }
    html.site-global-fx .topbar.topbar--floating .brand-copy small{
        margin-top:4px!important;
        font-size:7px!important;
        letter-spacing:2.35px!important;
    }

    html.site-global-fx .topbar.topbar--floating .nav-toggle{
        position:relative!important;
        z-index:3!important;
        display:flex!important;
        flex:0 0 44px!important;
        width:44px!important;
        height:44px!important;
        margin:0 0 0 auto!important;
        padding:0!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        gap:4px!important;
        border:1px solid rgba(203,86,239,.24)!important;
        border-radius:12px!important;
        background:linear-gradient(145deg,rgba(64,22,82,.58),rgba(20,11,28,.78))!important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.20)!important;
        cursor:pointer!important;
    }
    html.site-global-fx .topbar.topbar--floating .nav-toggle span{
        display:block!important;
        width:20px!important;
        height:2px!important;
        margin:0!important;
        border-radius:999px!important;
        background:#eadcf0!important;
        transform-origin:center!important;
        transition:transform .2s ease,opacity .16s ease!important;
    }
    html.site-global-fx .topbar.topbar--floating .nav-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)!important}
    html.site-global-fx .topbar.topbar--floating .nav-toggle.is-open span:nth-child(2){opacity:0!important}
    html.site-global-fx .topbar.topbar--floating .nav-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important}

    html.site-global-fx .topbar.topbar--floating .nav{
        display:none!important;
        position:absolute!important;
        top:calc(100% + 8px)!important;
        right:0!important;
        bottom:auto!important;
        left:0!important;
        width:auto!important;
        max-width:none!important;
        max-height:calc(100vh - 92px)!important;
        max-height:calc(100dvh - 92px)!important;
        margin:0!important;
        padding:10px!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        align-items:stretch!important;
        justify-content:stretch!important;
        gap:7px!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        overscroll-behavior:contain!important;
        white-space:normal!important;
        border:1px solid rgba(205,86,241,.29)!important;
        border-radius:16px!important;
        background:linear-gradient(145deg,rgba(17,9,23,.98),rgba(8,6,12,.985))!important;
        -webkit-backdrop-filter:blur(18px) saturate(1.16)!important;
        backdrop-filter:blur(18px) saturate(1.16)!important;
        box-shadow:0 24px 54px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.045),0 0 26px rgba(160,45,207,.08)!important;
    }
    html.site-global-fx .topbar.topbar--floating .nav.is-open{
        display:grid!important;
    }

    html.site-global-fx .topbar.topbar--floating .nav>a{
        display:flex!important;
        min-width:0!important;
        min-height:47px!important;
        margin:0!important;
        padding:10px 11px!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:9px!important;
        border:1px solid rgba(191,78,232,.11)!important;
        border-radius:11px!important;
        background:rgba(255,255,255,.018)!important;
        color:#b9aabd!important;
        font-size:11px!important;
        line-height:1.2!important;
        text-align:left!important;
    }
    html.site-global-fx .topbar.topbar--floating .nav>a:hover,
    html.site-global-fx .topbar.topbar--floating .nav>a.is-active{
        color:#fff!important;
        border-color:rgba(205,86,241,.26)!important;
        background:linear-gradient(145deg,rgba(103,30,137,.28),rgba(38,15,50,.40))!important;
        transform:none!important;
    }
    html.site-global-fx .topbar.topbar--floating .nav .nav-gta{
        flex:0 0 auto!important;
    }
    html.site-global-fx .topbar.topbar--floating .nav .nav-ucp,
    html.site-global-fx .topbar.topbar--floating .nav .nav-admin{
        grid-column:1/-1!important;
        justify-content:center!important;
    }
    html.site-global-fx .topbar.topbar--floating .nav .nav-socials{
        grid-column:1/-1!important;
        display:flex!important;
        width:100%!important;
        min-width:0!important;
        margin:0!important;
        padding:0!important;
        gap:7px!important;
    }
    html.site-global-fx .topbar.topbar--floating .nav .nav-social{
        display:grid!important;
        place-items:center!important;
        flex:1 1 0!important;
        min-width:0!important;
        min-height:40px!important;
        margin:0!important;
        border:1px solid rgba(191,78,232,.12)!important;
        border-radius:10px!important;
        background:rgba(255,255,255,.016)!important;
    }
    html.site-global-fx .topbar.topbar--floating .nav .nav-divider{
        grid-column:1/-1!important;
        display:block!important;
        width:auto!important;
        height:1px!important;
        min-height:1px!important;
        margin:1px 0!important;
        background:linear-gradient(90deg,transparent,rgba(195,78,234,.24),transparent)!important;
    }

    html.site-global-fx .topbar-layout-spacer{
        height:78px!important;
    }
}

@media (max-width:380px){
    html.site-global-fx .topbar.topbar--floating{
        left:5px!important;
        right:5px!important;
        padding:0 9px!important;
    }
    html.site-global-fx .topbar.topbar--floating .brand-emblem{
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
    }
    html.site-global-fx .topbar.topbar--floating .brand-copy b{font-size:11px!important}
    html.site-global-fx .topbar.topbar--floating .brand-copy small{letter-spacing:1.8px!important}
}