/* /js/jogos/menu-hub.css -- menu lateral interno de um jogo (dono, 26/10/2026; mockup aprovado docs/mockups/naruto/menu-lateral-naruto.html; regra 33 do CLAUDE.md).
   Painel à esquerda do conteúdo em TODAS as telas do jogo, grupos com cor e borda próprias (ciano, dourado, verde e roxo, as cores do site), itens A -> Z.
   Até 1280 px vira gaveta (abaixo disso o conteúdo ficaria estreito demais para as calculadoras) (botão "Menu do jogo"). Feixe de luz: <span class="rk-onda"> do artes/feixe-onda.css (regra 20). Letra >= 15px (regra 18). */
#appMain > .wrap > .nv-menu, #appMain > .wrap > .nv-abrir{display:none}
#appMain > .wrap.nv-ativo{display:grid;grid-template-columns:232px minmax(0,1fr);column-gap:16px;align-items:start;max-width:none;padding:0 20px}
#appMain > .wrap.nv-ativo > .nv-menu{display:grid;grid-column:1;grid-row:1 / span 60}
#appMain > .wrap.nv-ativo > :not(.nv-menu):not(.nv-abrir){grid-column:2;min-width:0}
.nv-menu{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow:auto;isolation:isolate;gap:10px;padding:12px;border:1px solid var(--border,#29313d);border-radius:14px;background:var(--s-850,#0f131c)}
.nv-menu::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--cyan,#20d3e0);z-index:2}
.nv-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 2px}
.nv-eyebrow{font:700 15px/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--cyan,#20d3e0)}
.nv-fecha{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--border,#29313d);background:var(--s-800,#141a25);color:var(--t-hi,#f0f3f7);font-size:20px;cursor:pointer}
/* cada grupo tem a sua cor e a sua borda: início e Coach em ciano, Calcular em dourado, Consultar em verde, Gameplay em roxo */
.nv-grupo{--g:#20d3e0;position:relative;display:grid;gap:2px;padding:6px;border:1px solid color-mix(in srgb,var(--g) 38%,transparent);border-radius:12px;background:color-mix(in srgb,var(--g) 7%,transparent)}
.nv-grupo::before{content:"";position:absolute;inset:8px auto 8px 0;width:3px;border-radius:0 3px 3px 0;background:var(--g)}
.nv-g-calcular{--g:#e3b341}.nv-g-consultar{--g:#38d6a0}.nv-g-gameplay{--g:#c46bff}
.nv-gr{font:700 15px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--g);padding:8px 8px 4px}
.nv-it{display:block;width:100%;background:transparent;border:0;text-align:left;color:#b4bdcc;font:600 15px inherit;font-family:inherit;padding:8px 10px;border-radius:8px;cursor:pointer;min-height:38px}
.nv-it:hover{color:var(--g);background:color-mix(in srgb,var(--g) 12%,transparent)}
.nv-it.on{color:var(--g);background:color-mix(in srgb,var(--g) 18%,transparent);box-shadow:inset 3px 0 0 var(--g)}
.nv-it:focus-visible{outline:2px solid var(--g);outline-offset:1px}
.nv-abrir{align-items:center;gap:8px;height:44px;padding:0 16px;margin:0 0 12px;border-radius:10px;border:1px solid var(--cyan-line,rgba(32,211,224,.34));background:var(--cyan-wash,rgba(32,211,224,.1));color:var(--cyan,#20d3e0);font:700 15px inherit;font-family:inherit;cursor:pointer}
.nv-veu{position:fixed;inset:0;z-index:55;background:rgba(5,7,12,.7)}
.nv-veu[hidden]{display:none}
#appMain > .wrap.nv-ativo .nv-esq{margin-left:0!important;margin-right:auto!important}
/* a barra do site encolhe e expande com movimento (desligado em prefers-reduced-motion) */
.app-sidebar{transition:width .25s ease,flex-basis .25s ease}
@media (max-width:1280px){
  #appMain > .wrap.nv-ativo{display:block}
  #appMain > .wrap.nv-ativo > .nv-abrir{display:inline-flex}
  #appMain > .wrap.nv-ativo > .nv-menu{position:fixed;z-index:60;top:0;bottom:0;left:0;width:min(300px,86vw);max-height:none;border-radius:0 14px 14px 0;transform:translateX(-105%);transition:transform .2s}
  #appMain > .wrap.nv-ativo > .nv-menu.aberto{transform:none}
  .nv-fecha{display:block}
}
@media (prefers-reduced-motion:reduce){.app-sidebar,.nv-menu{transition:none!important}}