/* Truco.fun V64 — cabeçalho universal, menu seguro e perfis com foto */
:root{
    --v64-header-h:72px;
    --v64-menu-bg:#07160f;
    --v64-menu-border:rgba(255,255,255,.14);
    --v64-menu-text:#f4fff7;
    --v64-menu-muted:#a8c0b1;
    --v64-accent:#35cf7e;
    --v64-gold:#f4bf3b;
}

.topbar{height:var(--v64-header-h)!important;min-height:var(--v64-header-h)!important;overflow:visible!important;z-index:2147483000!important}
.topbar-inner{width:min(calc(100% - 32px),1240px)!important;max-width:1240px!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;overflow:visible!important}
.brand{min-width:0!important;max-width:calc(100% - 64px)!important}
.brand-name{font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(24px,2.5vw,34px)!important;letter-spacing:-.7px!important}

#menuButton.menu-button{display:flex!important;position:relative!important;inset:auto!important;flex:0 0 46px!important;width:46px!important;min-width:46px!important;max-width:46px!important;height:46px!important;min-height:46px!important;max-height:46px!important;margin-left:auto!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:14px!important;background:rgba(255,255,255,.06)!important;box-shadow:none!important}
#menuButton.menu-button:hover{background:rgba(255,255,255,.11)!important}
#menuButton.menu-button>span{display:block!important;width:22px!important;height:2px!important;min-height:2px!important;max-height:2px!important;background:#fff!important;border-radius:99px!important}

#mainMenu.main-menu{
    position:fixed!important;
    top:calc(var(--v64-header-h) + 10px)!important;
    right:max(18px,calc((100vw - 1240px)/2))!important;
    bottom:auto!important;
    left:auto!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
    width:min(390px,calc(100vw - 28px))!important;
    min-width:0!important;
    max-width:390px!important;
    max-height:calc(100dvh - var(--v64-header-h) - 24px)!important;
    margin:0!important;
    padding:12px!important;
    border:1px solid var(--v64-menu-border)!important;
    border-radius:20px!important;
    background:linear-gradient(180deg,#0b2117,#06140d)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.45)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    z-index:2147483004!important;
}
#mainMenu.main-menu.is-open{display:flex!important;animation:v64MenuIn .18s ease-out both}
@keyframes v64MenuIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
#mainMenu.main-menu>*{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;flex:0 0 auto!important}

.menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.48);backdrop-filter:blur(2px);z-index:2147483003}
.menu-backdrop[hidden]{display:none!important}
body.menu-open{overflow:hidden}

#mainMenu .menu-profile{
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr) 20px!important;
    align-items:center!important;
    gap:12px!important;
    min-height:82px!important;
    padding:11px!important;
    border:1px solid rgba(53,207,126,.28)!important;
    border-radius:16px!important;
    background:linear-gradient(135deg,rgba(53,207,126,.15),rgba(244,191,59,.08))!important;
    color:var(--v64-menu-text)!important;
    text-decoration:none!important;
}
#mainMenu .menu-profile:hover{border-color:rgba(53,207,126,.52)!important;background:linear-gradient(135deg,rgba(53,207,126,.22),rgba(244,191,59,.11))!important}
#mainMenu .player-avatar{width:58px!important;height:58px!important;min-width:58px!important;border-radius:50%!important;display:grid!important;place-items:center!important;overflow:hidden!important;background:#173d29!important;border:2px solid rgba(255,255,255,.18)!important;color:#fff!important;font-size:22px!important;font-weight:900!important}
#mainMenu .player-avatar img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important}
#mainMenu .player-text{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important;line-height:1.15!important}
#mainMenu .player-text strong{font-size:17px!important;color:#fff!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
#mainMenu .player-text small{color:#9ed7b5!important;margin-bottom:4px!important}
#mainMenu .player-text em{margin-top:5px;color:#b9cbbf!important;font-size:12px!important;font-style:normal!important}
#mainMenu .menu-profile-arrow{font-size:28px;color:#8ee4b1}
#mainMenu .menu-section-label{padding:8px 7px 2px!important;color:#789988!important;font-size:11px!important;font-weight:900!important;letter-spacing:.12em!important;text-transform:uppercase!important}
#mainMenu.main-menu>a.menu-link,#mainMenu.main-menu>button.menu-link-button,#mainMenu.main-menu form button{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:11px!important;width:100%!important;min-height:48px!important;padding:11px 13px!important;border:1px solid transparent!important;border-radius:12px!important;background:transparent!important;color:var(--v64-menu-text)!important;text-decoration:none!important;font-weight:800!important;white-space:normal!important;text-align:left!important
}
#mainMenu.main-menu>a.menu-link:hover,#mainMenu.main-menu>button.menu-link-button:hover{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.08)!important}
#mainMenu .menu-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.07);color:#8be7b0;font-size:13px;font-weight:950}
#mainMenu .logout-form{padding-top:5px!important;border-top:1px solid rgba(255,255,255,.09)!important}
#mainMenu .logout-form button{color:#ffb7b7!important;background:rgba(255,78,78,.08)!important;border-color:rgba(255,90,90,.15)!important}

/* Amigos: foto real do cadastro em todos os blocos. */
.friend-person{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important}
.friend-person>.friend-avatar{display:grid!important;place-items:center!important;flex:0 0 48px!important;width:48px!important;height:48px!important;border-radius:50%!important;overflow:hidden!important;background:#1a4a31!important;color:#fff!important;font-weight:900!important;border:2px solid rgba(255,255,255,.13)!important}
.friend-person>.friend-avatar img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
.friend-person>div{min-width:0!important}
.friend-person b,.friend-person small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Área administrativa predominantemente branca. */
body.admin-page{background:#f3f6fa!important;color:#14231b!important}
body.admin-page .page-shell{width:100%!important;max-width:none!important;padding-top:28px!important;background:#f3f6fa!important}
body.admin-page .topbar{background:rgba(255,255,255,.94)!important;border-bottom:1px solid #dfe7e2!important;box-shadow:0 8px 25px rgba(28,60,42,.06)!important;backdrop-filter:blur(16px)!important}
body.admin-page .brand,body.admin-page .brand-name{color:#102219!important}
body.admin-page .brand-mark{color:#0d9e58!important}
body.admin-page #menuButton.menu-button{background:#eef5f0!important;border-color:#d7e4dc!important}
body.admin-page #menuButton.menu-button>span{background:#173326!important}
body.admin-page #mainMenu.main-menu{background:#fff!important;border-color:#dce7e0!important;box-shadow:0 24px 70px rgba(26,55,39,.2)!important}
body.admin-page #mainMenu .menu-profile{color:#173326!important;background:linear-gradient(135deg,#effbf4,#fffaf0)!important;border-color:#cdebd9!important}
body.admin-page #mainMenu .player-text strong{color:#163326!important}
body.admin-page #mainMenu .player-text small{color:#278b5b!important}
body.admin-page #mainMenu .player-text em,body.admin-page #mainMenu .menu-section-label{color:#708579!important}
body.admin-page #mainMenu.main-menu>a.menu-link,body.admin-page #mainMenu.main-menu>button.menu-link-button{color:#1c3427!important}
body.admin-page #mainMenu.main-menu>a.menu-link:hover,body.admin-page #mainMenu.main-menu>button.menu-link-button:hover{background:#f0f6f2!important;border-color:#e0eae4!important}
body.admin-page #mainMenu .menu-icon{background:#ecf7f0;color:#168c52}
body.admin-page #mainMenu .logout-form{border-color:#e3e9e5!important}
body.admin-page .site-footer{color:#687a70!important;background:#f3f6fa!important}

@media(max-width:799px){
    :root{--v64-header-h:62px}
    .topbar-inner{width:calc(100% - 18px)!important;gap:10px!important}
    .brand-name{font-size:24px!important}
    #menuButton.menu-button{width:43px!important;min-width:43px!important;height:43px!important;min-height:43px!important;border-radius:13px!important}
    #mainMenu.main-menu{top:calc(var(--v64-header-h) + 7px)!important;right:8px!important;left:8px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - var(--v64-header-h) - 16px)!important;border-radius:17px!important;padding:9px!important}
    #mainMenu .menu-profile{grid-template-columns:52px minmax(0,1fr) 18px!important;min-height:74px!important}
    #mainMenu .player-avatar{width:52px!important;height:52px!important;min-width:52px!important}
    body.admin-page .page-shell{padding:18px 12px 30px!important}
}

@media(min-width:800px){
    #mainMenu.main-menu{right:max(24px,calc((100vw - 1240px)/2))!important}
}