/* Hambúrguer com painel de vidro TAMBÉM no desktop (a partir de 1281px). Nessa largura o menu horizontal do topo
   continua como está e o hambúrguer fica à esquerda da barra. O painel é uma cópia dos mesmos links, montada por
   menu-desktop.js (.nav-drawer): o menu horizontal e o painel não podem ser o mesmo elemento. Até 1280px nada daqui
   vale: lá o próprio .nav-split vira o painel (bloco "GLASS DRAWER MENU" do style.css). As cores vêm das variáveis
   --menu-* do style.css, então o painel segue o tema claro/escuro. */
.nav-drawer{display:none;}
@media (min-width:1281px){
/* Conteúdo do painel (mesmos estilos do painel do hambúrguer em telas estreitas). */
:root .frame-top .nav-drawer{
  color:var(--menu-fg);border:1px solid var(--menu-edge);border-radius:18px;
  background:var(--menu-solid);box-shadow:var(--menu-shadow);
}
:root .frame-top .nav-drawer .nav-side{flex-direction:column;align-items:stretch;gap:2px;width:100%;}
:root .frame-top .nav-drawer .nav-side::before{
  content:"Menu";content:"Menu" / "";
  padding:0 .75rem .5rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--menu-dim);
}
:root .frame-top .nav-drawer .nav-right::before{content:"Explorar";content:"Explorar" / "";}
:root .frame-top .nav-drawer .nav-right:lang(en)::before{content:"Explore";content:"Explore" / "";}
:root .frame-top .nav-drawer .nav-side:lang(zh)::before{content:"菜单";content:"菜单" / "";}
:root .frame-top .nav-drawer .nav-right:lang(zh)::before{content:"探索";content:"探索" / "";}
:root .frame-top .nav-drawer .nav-right{margin-top:1.1rem;}
:root .frame-top .nav-drawer .nav-side a{
  display:flex;align-items:center;gap:.8rem;width:100%;height:auto;min-height:40px;padding:.5rem .75rem;
  border:0;border-radius:10px;background:transparent;opacity:1;
  font-family:var(--body);font-size:.86rem;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.3;white-space:normal;
  color:var(--menu-fg);transition:background .2s ease,color .2s ease;
}
:root .frame-top .nav-drawer .nav-side a::before{
  content:"";flex:none;width:18px;height:18px;background:currentColor;opacity:.8;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
:root .frame-top .nav-drawer .nav-side a:hover{background:var(--menu-hover);color:var(--menu-fg);}
:root .frame-top .nav-drawer .nav-side a.active{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--menu-fg);font-weight:600;}
:root .frame-top .nav-drawer .nav-side a.active::before{background:var(--gold);opacity:1;}
:root .frame-top .nav-drawer .nav-side a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
:root .frame-top .nav-drawer .nav-left a:nth-of-type(1){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");}
:root .frame-top .nav-drawer .nav-left a:nth-of-type(2){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8'/%3E%3Cpath d='M18.5 14.8c1.7.8 2.7 2.5 3 5.2'/%3E%3C/svg%3E");}
:root .frame-top .nav-drawer .nav-left a:nth-of-type(3){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");}
:root .frame-top .nav-drawer .nav-left a:nth-of-type(4){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 4v16M17 4v16M3 9h4M3 15h4M17 9h4M17 15h4'/%3E%3C/svg%3E");}
:root .frame-top .nav-drawer .nav-right a:nth-of-type(1){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.9 5.1L18 10l-5.1 1.9L11 17l-1.9-5.1L4 10l5.1-1.9z'/%3E%3Cpath d='M18.5 15l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E");}
:root .frame-top .nav-drawer .nav-right a:nth-of-type(2){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M8 13h8M8 17h5'/%3E%3C/svg%3E");}
:root .frame-top .nav-drawer .nav-right a:nth-of-type(3){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root .frame-top .nav-drawer{
    background:linear-gradient(160deg,rgba(255,255,255,0.1),rgba(255,255,255,0) 45%),var(--menu-glass);
    -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  }
}
@media (prefers-reduced-transparency:reduce){
  :root .frame-top .nav-drawer{background:var(--menu-solid);-webkit-backdrop-filter:none;backdrop-filter:none;}
}


/* O painel flutua longe das bordas da janela e do letterbox de baixo. Fechado, sai da ordem do tab. */
:root .frame-top .nav-drawer{
  position:fixed;top:10px;bottom:calc(var(--bar-b) + 10px);left:10px;
  width:300px;height:auto;max-height:none;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;overflow-y:auto;
  padding:1.2rem .7rem 1rem;
  transform:translateX(calc(-100% - 24px));visibility:hidden;z-index:2;
  transition:transform .32s cubic-bezier(.4,0,.2,1),visibility 0s linear .32s;
}
:root .frame-top .nav-drawer.open{transform:translateX(0);visibility:visible;transition-delay:0s;}
:root .frame-top .nav-drawer .nav-side{justify-content:flex-start;}
:root .frame-top .nav-drawer .nav-brand{display:block;order:-1;margin:0 0 1.2rem .6rem;}
:root .frame-top .nav-drawer .nav-brand .brand-logo{height:42px;width:auto;}
.frame-top::after{
  content:"";position:fixed;inset:0;z-index:1;background:rgba(0,0,0,0.4);
  opacity:0;pointer-events:none;transition:opacity .32s ease;
}
.frame-top:has(.nav-drawer.open)::after{opacity:1;pointer-events:auto;}
html:has(.nav-drawer.open){overflow:hidden;}
html:has(.nav-drawer.open) .scrub-track{visibility:hidden;}
/* O hambúrguer fica à esquerda da barra (o resto vai para a direita), acima da camada escura, e vira um X. */
:root .frame-top .nav-toggle{display:flex;position:relative;z-index:3;order:-1;margin-right:auto;}
/* Aberto, o X vai para o canto superior direito do painel e usa a cor do texto do painel. */
:root .frame-top .nav-toggle[aria-expanded="true"]{
  position:fixed;top:calc(10px + 1.2rem - 2px);margin:0;left:calc(10px + 300px - 2.8rem);
}
:root .frame-top .nav-toggle[aria-expanded="true"] span{background:var(--menu-fg);}
.nav-toggle span{transition:transform .25s ease,opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
}