/* Truco.fun V66 — menu em gaveta estável no Android/iOS e painel flutuante no PC */
:root{
    --v66-menu-viewport-height:100dvh;
}

.menu-drawer-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
    padding:2px 2px 10px!important;
    border-bottom:1px solid rgba(255,255,255,.09)!important;
}
.menu-drawer-brand{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
    color:#f7fff9!important;
    text-decoration:none!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:24px!important;
    line-height:1!important;
    letter-spacing:-.45px!important;
}
.menu-drawer-brand img{
    display:block!important;
    width:auto!important;
    max-width:180px!important;
    height:34px!important;
    object-fit:contain!important;
}
.menu-drawer-brand .brand-mark{color:#f4bf3b!important;font-size:18px!important}
.menu-drawer-close{
    display:grid!important;
    place-items:center!important;
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.07)!important;
    color:#fff!important;
    font:400 29px/1 Arial,sans-serif!important;
    cursor:pointer!important;
}
.menu-drawer-close:hover{background:rgba(255,255,255,.13)!important}

/* O menu é movido para o body por JavaScript. Assim position:fixed não fica
   preso ao backdrop-filter/transform do cabeçalho no Safari e no Chrome móvel. */
#mainMenu.main-menu.menu-portaled{
    z-index:2147483645!important;
}
.menu-backdrop{
    z-index:2147483644!important;
}

@media (min-width:800px){
    #mainMenu.main-menu.menu-portaled{
        position:fixed!important;
        top:82px!important;
        right:max(24px,calc((100vw - 1240px)/2))!important;
        bottom:auto!important;
        left:auto!important;
        width:min(390px,calc(100vw - 32px))!important;
        max-width:390px!important;
        max-height:calc(100dvh - 100px)!important;
        margin:0!important;
        transform:none!important;
    }
}

@media (max-width:799px){
    html.menu-open-html,
    body.menu-open{
        overscroll-behavior:none!important;
    }

    #mainMenu.main-menu.menu-portaled{
        position:fixed!important;
        top:0!important;
        right:0!important;
        bottom:auto!important;
        left:auto!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        gap:7px!important;
        width:min(90vw,390px)!important;
        min-width:0!important;
        max-width:calc(100vw - 14px)!important;
        height:var(--v66-menu-viewport-height,100dvh)!important;
        min-height:var(--v66-menu-viewport-height,100dvh)!important;
        max-height:var(--v66-menu-viewport-height,100dvh)!important;
        margin:0!important;
        padding:max(10px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) 10px!important;
        border-radius:22px 0 0 22px!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior:contain!important;
        opacity:0!important;
        visibility:hidden!important;
        pointer-events:none!important;
        transform:translate3d(104%,0,0)!important;
        transition:transform .23s cubic-bezier(.2,.72,.25,1),opacity .18s ease,visibility 0s linear .23s!important;
        animation:none!important;
        contain:layout paint style!important;
        will-change:transform!important;
    }

    #mainMenu.main-menu.menu-portaled.is-open{
        opacity:1!important;
        visibility:visible!important;
        pointer-events:auto!important;
        transform:translate3d(0,0,0)!important;
        transition:transform .23s cubic-bezier(.2,.72,.25,1),opacity .18s ease,visibility 0s!important;
    }

    #mainMenu.main-menu.menu-portaled > *{
        flex:0 0 auto!important;
    }

    #mainMenu.main-menu.menu-portaled .logout-form{
        margin-top:auto!important;
    }

    .menu-backdrop{
        position:fixed!important;
        inset:0!important;
        display:block!important;
        width:100vw!important;
        height:var(--v66-menu-viewport-height,100dvh)!important;
        margin:0!important;
        background:rgba(0,11,6,.68)!important;
        -webkit-backdrop-filter:none!important;
        backdrop-filter:none!important;
        opacity:0!important;
        visibility:hidden!important;
        pointer-events:none!important;
        transition:opacity .18s ease,visibility 0s linear .18s!important;
    }
    .menu-backdrop.is-open:not([hidden]){
        opacity:1!important;
        visibility:visible!important;
        pointer-events:auto!important;
        transition:opacity .18s ease,visibility 0s!important;
    }

    /* O botão do cabeçalho não vira um X atrás da gaveta. O X fica dentro dela. */
    #menuButton.menu-button.is-open > span:nth-child(1),
    #menuButton.menu-button.is-open > span:nth-child(2),
    #menuButton.menu-button.is-open > span:nth-child(3){
        transform:none!important;
        opacity:1!important;
    }

    #mainMenu .menu-profile{
        grid-template-columns:52px minmax(0,1fr) 18px!important;
    }
}

body.admin-page .menu-drawer-head{border-bottom-color:#e5ece8!important}
body.admin-page .menu-drawer-brand{color:#173326!important}
body.admin-page .menu-drawer-brand .brand-mark{color:#0d9e58!important}
body.admin-page .menu-drawer-close{background:#eef5f0!important;border-color:#d7e4dc!important;color:#173326!important}

@media (prefers-reduced-motion:reduce){
    #mainMenu.main-menu.menu-portaled,.menu-backdrop{transition:none!important}
}