/* Menu flutuante v1: a barra do topo fica escondida por padrao; só um botao
   MENU preso no canto esquerdo. Clicar nele reabre a mesma barra (com toda
   a logica de top-menu-groups.js intacta), so que reposicionada como um
   painel ancorado no botao, com os itens em grade de 2 colunas — abre um
   pouco pro lado, um pouco pra baixo, em vez de ocupar a largura toda. */

/* O botao e anexado direto no body (nao dentro de #root), entao o gate de
   carregamento (que so esconde #root via opacity/visibility) nunca o cobria
   — ficava flutuando por cima da tela "PREPARANDO O MUNDO". Mesma condicao
   usada pelo proprio #root em index.html (html.nrmt-baiak-preload). */
html.nrmt-baiak-preload .nrmt-top-menu-fab {
  display: none !important;
}

.nrmt-top-menu-fab {
  position: fixed !important;
  top: 8px !important;
  left: 8px !important;
  z-index: var(--nrmt-layer-submenu, 9601) !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 88px;
  height: 42px !important;
  padding: 0 14px 0 12px !important;
  /* Moldura PNG ornamentada, mesmo padrao usado nos outros botoes do jogo
     (config-archive-v1.css, breeding-archive-v4.css etc.) em vez da borda
     CSS lisa. */
  border: 1px solid transparent !important;
  border-image-source: var(--nrmt-archive-button-frame, url('/assets/branding/shinobi-archive-ui-v3/button-frame.png?v=1')) !important;
  border-image-slice: 56 188 !important;
  border-image-width: 8px 14px !important;
  border-image-repeat: stretch !important;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(25, 33, 34, .96), rgba(7, 12, 14, .98));
  color: #efbd53;
  font: 800 11px "Segoe UI", Arial, sans-serif;
  letter-spacing: .1em;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
  transition: filter .15s ease, transform .15s ease;
}

.nrmt-top-menu-fab:hover { filter: brightness(1.18); transform: translateY(-1px); }

.nrmt-top-menu-fab__icon { display: grid; flex: 0 0 18px; gap: 3px; width: 18px; }
.nrmt-top-menu-fab__icon span { display: block; height: 2px; border-radius: 1px; background: currentColor; }

body.nrmt-top-menu-fab-open .nrmt-top-menu-fab {
  box-shadow: inset 0 -2px #5ed4ec, 0 0 13px rgba(77, 207, 232, .25);
}

body.nrmt-top-menu-fab-open .nrmt-top-menu-fab .nrmt-top-menu-fab__icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nrmt-top-menu-fab-open .nrmt-top-menu-fab .nrmt-top-menu-fab__icon span:nth-child(2) { opacity: 0; }
body.nrmt-top-menu-fab-open .nrmt-top-menu-fab .nrmt-top-menu-fab__icon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------- estado fechado */
/* O <header class="_topHud_..."> nativo tem seu proprio backdrop-filter:
   blur(6px) — isso continua ativo mesmo com background:transparent, porque
   blur borra o que esta ATRAS do elemento independente da cor de fundo dele.
   Resultado: mesmo com a barra "escondida", sobrava uma faixa borrada (nao
   preta, mas visivelmente desfocada) do tamanho da barra antiga no topo.
   Faltava zerar o backdrop-filter tambem, nao so background/border/shadow. */
body.nrmt-baiak-layout:not(.nrmt-top-menu-fab-open) [class*="_topHud_"],
body.nrmt-baiak-layout:not(.nrmt-top-menu-fab-open) [class*="_topHud_"]::before,
body.nrmt-baiak-layout:not(.nrmt-top-menu-fab-open) [class*="_topHud_"]::after {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  pointer-events: none !important;
}

/* Cobre a subarvore inteira (nao so filhos diretos) pra nenhum fundo/linha
   decorativa de um nivel mais fundo (ex.: a linha dourada de baixo dos
   grupos) sobreviver enquanto o painel esta fechado. */
body.nrmt-baiak-layout:not(.nrmt-top-menu-fab-open) [class*="_topHud_"] *,
body.nrmt-baiak-layout:not(.nrmt-top-menu-fab-open) [class*="_topHud_"] *::before,
body.nrmt-baiak-layout:not(.nrmt-top-menu-fab-open) [class*="_topHud_"] *::after {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------- estado aberto */
/* Duas faixas: uma barra superior de abas (NINJA/BATALHA/VIP/COMÉRCIO/
   JORNADA, estilo original do cabecalho) e uma coluna lateral esquerda com
   atalhos diretos (LOBBY/ADM/DISCORD/INDIQUE/CONFIG/SAIR), cada linha larga
   com icone+rotulo lado a lado. As duas faixas dividem o mesmo grid: coluna
   1 = lateral, colunas 2-6 = abas do topo, todas na linha 1 do grid. */
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] {
  position: fixed !important;
  inset: auto auto auto 6px !important;
  top: 50px !important;
  z-index: var(--nrmt-layer-header, 9600) !important;
  display: block !important;
  grid-template-columns: none !important;
  width: auto !important;
  height: auto !important;
  max-width: min(760px, calc(100vw - 16px)) !important;
  max-height: calc(100vh - 54px) !important;
  overflow: auto !important;
  scrollbar-width: none !important;
  box-sizing: border-box;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"]::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* o <header> nativo tem seu proprio backdrop-filter:blur(6px) (mesmo bug do
   estado fechado, ver comentario acima) — sem isso o mapa atras do menu
   aberto continua desfocado/escurecido mesmo com background:transparent. */
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"]::before,
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"]::after {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] > * {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHudNavigation_"] {
  position: static !important;
  grid-column: auto !important;
  display: grid !important;
  grid-template-columns: minmax(84px, 108px) repeat(5, minmax(68px, 1fr)) !important;
  grid-auto-rows: min-content !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  gap: 6px !important;
  overflow: visible !important;
  justify-content: stretch !important;
}

body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHudNavigation_"]::-webkit-scrollbar { display: none; }

/* archive-hud-v1.css estiliza os mesmos elementos com body.nrmt-baiak-layout:
   not(.nrmt-display-mobile) (ou +.nrmt-top-menu-grouped), entao precisamos
   ancorar pelos dois containers reais (_topHud_ > _topHudNavigation_) pra
   garantir mais especificidade que qualquer combinacao deles, em vez de
   depender da ordem dos arquivos. */

/* posicionamento no grid: a carteira (se presente) ocupa a linha 1 inteira;
   linha 2 = so as 4 abas de grupo + VIP (coluna 1 fica vazia, o botao MENU
   flutuante ja ocupa aquele canto visualmente por cima). */
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-group[data-nrmt-menu-group="ninja"] { grid-column: 2; grid-row: 2; }
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-group[data-nrmt-menu-group="battle"] { grid-column: 3; grid-row: 2; }
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-vip-direct { grid-column: 4; grid-row: 2; }
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-group[data-nrmt-menu-group="trade"] { grid-column: 5; grid-row: 2; }
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-group[data-nrmt-menu-group="journey"] { grid-column: 6; grid-row: 2; }

/* coluna lateral: LOBBY/ADM/DISCORD/INDIQUE/CONFIG/SAIR empilhados abaixo
   da linha das abas, comecando por LOBBY. */
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-lobby    { grid-column: 1; grid-row: 3; }
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-admin    { grid-column: 1; grid-row: 4; }
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-discord  { grid-column: 1; grid-row: 5; }
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-referral { grid-column: 1; grid-row: 6; }
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-config   { grid-column: 1; grid-row: 7; }
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-logout   { grid-column: 1; grid-row: 8; }

/* sem ADM (jogador comum) a lateral fecha a fileira em vez de deixar buraco */
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"]:not(:has(.nrmt-menu-admin)) .nrmt-menu-discord  { grid-row: 4 !important; }
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"]:not(:has(.nrmt-menu-admin)) .nrmt-menu-referral { grid-row: 5 !important; }
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"]:not(:has(.nrmt-menu-admin)) .nrmt-menu-config   { grid-row: 6 !important; }
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"]:not(:has(.nrmt-menu-admin)) .nrmt-menu-logout   { grid-row: 7 !important; }

/* linha das abas (grupos NINJA/BATALHA/COMÉRCIO/JORNADA + VIP): card
   vertical, icone em cima do rotulo — igual ao estilo nativo da barra
   original, nao o card comprimido em linha usado na lateral. */
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-group,
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-group__trigger,
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-vip-direct {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  flex-basis: auto !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 6px 4px 7px !important;
  border: 1px solid transparent !important;
  border-image-source: var(--nrmt-archive-button-frame, url('/assets/branding/shinobi-archive-ui-v3/button-frame.png?v=1')) !important;
  border-image-slice: 56 188 !important;
  border-image-width: 8px 14px !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
}
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-group__trigger > em { position: static !important; margin-top: 1px; }

/* coluna lateral (LOBBY/ADM/DISCORD/INDIQUE/CONFIG/SAIR): card horizontal
   largo, icone a esquerda + rotulo a direita. */
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-lobby,
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-admin,
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-discord,
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-referral,
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-config,
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-logout {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  flex-basis: auto !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 7px !important;
  border: 1px solid transparent !important;
  border-image-source: var(--nrmt-archive-button-frame, url('/assets/branding/shinobi-archive-ui-v3/button-frame.png?v=1')) !important;
  border-image-slice: 56 188 !important;
  border-image-width: 8px 14px !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
}

body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-lobby [class*="_topHudMenuLabel_"],
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-admin [class*="_topHudMenuLabel_"],
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-discord [class*="_topHudMenuLabel_"],
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-referral [class*="_topHudMenuLabel_"],
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-config [class*="_topHudMenuLabel_"],
body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] [class*="_topHudNavigation_"] .nrmt-menu-logout [class*="_topHudMenuLabel_"] {
  font-size: 11px !important;
}

body.nrmt-top-menu-fab-open .nrmt-top-wallet--in-menu {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 8px !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

/* --------------------------------------------------- mapa em tela cheia */
/* A barra do topo virou um botao pequeno no canto, mas o mapa ainda reservava
   --bi-top (o token global de layout-lock.css pensado pra barra cheia, 52-58px
   dependendo do modo) como se a barra antiga ainda estivesse la — sobrava uma
   faixa vazia no topo (fundo escuro do body aparecendo como uma tarja preta).
   Setar top:0 direto no canvas nao resolvia nada: quem define o retangulo
   visivel de verdade e o wrapper .nrmt-game-viewport (game-viewport-fix.css),
   que calcula seu proprio top a partir de --bi-top — o canvas so preenche
   100% do wrapper (inset:0). --bi-top e um token global lido por varios
   outros paineis (archive-hud, carteira, notificacoes, raid de world boss) —
   mexer nele destrava o mapa mas quebra a altura deles. Em vez disso, o
   proprio wrapper ganha um top fixo, sem tocar no token compartilhado.
   O botao MENU flutuante troca a barra INTEIRA por um FAB em TODO modo
   responsivo (desktop/compact/mobile — top-menu-fab-v1.js chama buildFab()
   sem checar o modo, e a regra "estado fechado" acima tambem nao filtra por
   modo), entao a correcao tinha que valer sem depender de nrmt-display-*
   tambem — so cobrir o modo compacto deixava desktop/mobile ainda com a
   faixa preta (jogador testou em janela larga e a faixa continuava).
   game-viewport-fix.css e responsive-settings.css(.nrmt-display-mobile) tem
   a mesma especificidade (duas classes) pra esse mesmo elemento — empatando,
   quem ganharia seria só a ordem de carregamento no index.html, exatamente o
   tipo de empate fragil que ja quebrou essa mesma regra varias vezes nesse
   arquivo (v1004/v1005/v1006 todas tentando resolver a mesma faixa). Reforca
   com .nrmt-responsive-shell (classe real, sempre presente junto de
   nrmt-baiak-layout) pra ganhar por especificidade de verdade, nao por sorte
   de ordem de <link>. */
body.nrmt-baiak-layout.nrmt-responsive-shell .nrmt-game-viewport {
  top: 0 !important;
}

@media (max-width: 480px) {
  body.nrmt-baiak-layout.nrmt-top-menu-fab-open [class*="_topHud_"] {
    max-width: calc(100vw - 16px) !important;
  }
  .nrmt-top-menu-fab__label { display: none; }
  .nrmt-top-menu-fab { min-width: 42px; width: 42px; padding: 0; justify-content: center; }
}