/* Forja dos Mundos — Navegação/Layout final do Bloco 4 — build 20260930g */
:root{--forja-header-h:72px;--forja-nav-build:"20260930g"}
html,body{max-width:100%;overflow-x:clip}
.topbar{box-sizing:border-box!important;width:100%!important;max-width:100vw!important;min-height:var(--forja-header-h)!important;height:var(--forja-header-h)!important;grid-template-columns:minmax(190px,230px) minmax(0,1fr) auto!important;gap:clamp(.5rem,.9vw,.9rem)!important;padding-inline:clamp(.7rem,1.25vw,1.2rem)!important;overflow:visible!important}
.topbar .brand{min-width:0!important;max-width:230px!important;width:auto!important;gap:.62rem!important}
.topbar .brand-crest,.topbar .brand-crest img{width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;flex:0 0 46px!important;object-fit:contain!important}
.topbar .brand strong{font-size:.9rem!important;line-height:1.12!important;white-space:nowrap!important}
.topbar .brand small{display:none!important}
.desktop-nav{display:flex!important;min-width:0!important;align-items:center!important;justify-content:center!important;gap:.08rem!important;overflow:visible!important;white-space:nowrap!important}
.desktop-nav a{flex:0 0 auto!important;padding:.58rem .5rem!important;font-size:.84rem!important;line-height:1.1!important;white-space:nowrap!important}
.desktop-nav a.active,.desktop-nav a[aria-current="page"]{color:var(--gold-300)!important;background:rgba(199,154,59,.09)!important}
.topbar-actions{min-width:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:.38rem!important;flex-wrap:nowrap!important}
#menuButton,#soundToggle,#notificationButton{width:42px!important;height:42px!important;min-width:42px!important;flex:0 0 42px!important;padding:0!important}
#headerPlaylistButton{min-height:42px!important;max-width:118px!important}
#loginButton{min-width:0!important;max-width:145px!important;min-height:42px!important;padding-inline:.62rem!important}
#loginButton span{max-width:100px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
#forgeLanguageMenu summary{min-width:58px!important;min-height:42px!important;padding:7px 8px!important}

/* Mantém fonte normal em notebooks; economiza espaço nos controles, não no texto da navegação. */
@media (min-width:1180px) and (max-width:1399px){
  .topbar{grid-template-columns:minmax(160px,185px) minmax(0,1fr) auto!important;padding-inline:.6rem!important;gap:.42rem!important}
  .topbar .brand{max-width:185px!important;gap:.48rem!important}
  .topbar .brand-crest,.topbar .brand-crest img{width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important;flex-basis:42px!important}
  .topbar .brand strong{font-size:.82rem!important}
  .desktop-nav a{font-size:.82rem!important;padding-inline:.38rem!important}
  #headerPlaylistButton{width:42px!important;min-width:42px!important;padding:0!important}
  #headerPlaylistButton span{display:none!important}
  #loginButton{max-width:108px!important}
  #loginButton span{max-width:66px!important}
  #forgeLanguageMenu summary{min-width:52px!important;padding-inline:6px!important}
}
@media (max-width:1179px){
  .topbar{grid-template-columns:minmax(0,1fr) auto!important}
  .desktop-nav{display:none!important}
  .topbar .brand{max-width:none!important}
}
@media (max-width:720px){
  :root{--forja-header-h:64px}
  .topbar{height:64px!important;min-height:64px!important;padding-inline:.5rem!important;gap:.3rem!important}
  .topbar .brand-crest,.topbar .brand-crest img{width:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important;flex-basis:40px!important}
  .topbar .brand strong{font-size:.78rem!important}
  #headerPlaylistButton{display:none!important}
  #soundToggle,#notificationButton,#menuButton{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important}
  #loginButton{max-width:110px!important;min-height:40px!important;padding-inline:.5rem!important}
  #loginButton span{max-width:70px!important}
  #forgeLanguageMenu summary{min-width:48px!important;min-height:40px!important;padding:6px 4px!important;font-size:.72rem!important}
}
@media (max-width:520px){
  .topbar .brand{flex:0 0 40px!important;width:40px!important;max-width:40px!important}
  .topbar .brand>span:last-child{display:none!important}
}
@media (max-width:380px){
  #loginButton{width:40px!important;min-width:40px!important;max-width:40px!important;padding:0!important;justify-content:center!important}
  #loginButton span{display:none!important}
  #forgeLanguageMenu summary{min-width:44px!important;width:44px!important}
}

/* Menu lateral: ocupa a altura útil inteira, não corta o fim e não move o conteúdo da página. */
.mobile-menu{top:var(--forja-header-h)!important;right:0!important;bottom:0!important;height:auto!important;max-height:none!important;width:min(420px,94vw)!important;min-width:0!important;padding:.5rem .7rem max(1rem,env(safe-area-inset-bottom))!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-gutter:stable!important;scroll-padding-top:76px!important;scroll-padding-bottom:32px!important;z-index:96!important}
.mobile-menu.is-open{transform:translateX(0)!important}
.forja-side-menu-backdrop{top:var(--forja-header-h)!important;bottom:0!important;z-index:95!important}
.forja-side-menu-brand{top:-.5rem!important;margin:0 -.15rem .55rem!important;padding:.62rem .4rem .78rem!important}
.mobile-menu .menu-section-title{position:relative!important;margin:.72rem .2rem .24rem!important}
.mobile-menu a,.mobile-menu>button:not(.beta-mobile-diagnostics):not(.forja-side-menu-close){min-height:48px!important;width:100%!important;box-sizing:border-box!important}
.mobile-menu>[hidden],.mobile-menu #adminMobileButton[hidden],.mobile-menu #notificationMobileButton[hidden]{display:none!important}
html.forja-primary-menu-open,body.forja-primary-menu-open{overflow:hidden!important;overscroll-behavior:none!important}
body.forja-primary-menu-open{touch-action:none}

/* Menu administrativo: nenhuma aba desaparece; desktop rola verticalmente e mobile usa trilho horizontal sticky. */
.admin-dialog[open]{top:calc(var(--forja-header-h) + 8px)!important;bottom:8px!important;max-height:calc(100dvh - var(--forja-header-h) - 16px)!important;overflow:hidden!important}
.admin-shell{min-height:0!important;height:100%!important;overflow:hidden!important}
.admin-sidebar{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-gutter:stable!important}
.admin-main{min-height:0!important;overflow:hidden!important}
.admin-content{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-gutter:stable!important}
.admin-nav{min-width:0!important}
@media(max-width:900px){
  .admin-dialog[open]{top:calc(var(--forja-header-h) + 5px)!important;bottom:5px!important;max-height:calc(100dvh - var(--forja-header-h) - 10px)!important}
  .admin-shell{grid-template-rows:auto minmax(0,1fr)!important}
  .admin-sidebar{position:relative!important;overflow:visible!important;padding:8px 10px 6px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;background:#0f1720!important}
  .admin-nav{display:flex!important;gap:7px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:2px 0 7px!important;scroll-snap-type:x proximity!important;scrollbar-width:thin!important;-webkit-overflow-scrolling:touch!important}
  .admin-nav button{flex:0 0 auto!important;white-space:nowrap!important;scroll-snap-align:start!important;min-height:40px!important}
  .admin-head{padding:14px 16px!important}
  .admin-content{padding:16px!important;padding-bottom:max(2rem,env(safe-area-inset-bottom))!important}
}
@media(max-width:580px){
  .admin-dialog[open]{width:calc(100vw - 8px)!important;border-radius:12px!important}
  .admin-head h2{font-size:1.2rem!important}
  .admin-head p{font-size:.72rem!important;line-height:1.35!important}
  .admin-content{padding:12px!important}
}

/* Evita seções/páginas largas empurrarem o site horizontalmente. */
.app-shell,main,.page,.inner-page,.hero,.hub-section,.community-cta,footer{max-width:100%!important}
.page.active{overflow-x:clip}
:where(.admin-table-wrap,.table-wrap,.codex-main,.community-board,.profile-panel){max-width:100%}