/* ═══════════ Menu do jogo + overlays (gates-web) ═══════════ */
/* `fixed` pelo mesmo motivo do #battle (30/07): com `absolute` o overlay cobre o DOCUMENTO, e no
   iPhone a barra do Safari se retrai deixando a viewport MAIOR que ele — sobra uma faixa embaixo com
   o mundo aparecendo por baixo. O Lucas pegou isso na batalha; aqui era o mesmo bug esperando a vez,
   já que inventário, ficha, glossário e menu compartilham esta regra. */
.ov { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; }
.ov.hidden { display: none !important; }

/* ═══ Menu principal — kit PixelLab (maquete 159 aprovada 16/07) ═══
   A hud_panel só tem os cantos dourados EM CIMA (é do rodapé da batalha) → moldura em duas
   camadas espelhadas (metade de cima normal + metade de baixo virada) = 4 cantos fechados. */
#gmenu { background: rgba(10, 7, 15, .62); }
.gmenu-panel {
  position: relative; font-family: var(--game-font);
  width: 366px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 8px;
  padding: 28px 32px 30px; animation: gmenu-in .16s ease;
}
.gmenu-panel::before, .gmenu-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 30px solid transparent; border-image: url("../assets/ui/pixellab/hud_panel.png") 40 fill stretch;
  clip-path: inset(0 0 50% 0);
}
.gmenu-panel::after { transform: scaleY(-1); }
.gmenu-panel > * { position: relative; z-index: 1; }
@keyframes gmenu-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.gmenu-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 6px; }
.gmenu-orn { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #8a6d38, transparent); }
.gmenu-title { font-family: var(--font-title); font-weight: 700; color: #f0c77f; text-transform: uppercase;
  letter-spacing: .1em; font-size: 15px; text-shadow: 0 0 12px rgba(216,173,90,.35); }
/* itens na moldura botao_chip — a MESMA dos botões da batalha */
.gmenu-item {
  cursor: pointer; text-align: left; display: flex; align-items: center; gap: 10px;
  font-family: var(--game-font); font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #e7d4a5; background: none; box-shadow: none; padding: 2px 2px;
  border: 12px solid transparent; border-image: url("../assets/ui/pixellab/botao_chip.png") 26 fill stretch;
  transition: filter .12s, transform .07s;
}
.gmenu-item .ic { font-size: 15px; width: 20px; text-align: center; filter: drop-shadow(0 1px 0 #000); }
.gmenu-item:hover { filter: brightness(1.28); }
.gmenu-item:active { transform: translateY(1px); }
.gmenu-div { height: 1px; margin: 4px 8px; background: linear-gradient(90deg, transparent, #5c4a28, transparent); }
/* sair do jogo (⌂ Menu Inicial) = VERMELHO: a moldura chip inteira desloca pro tom rubro */
.gmenu-item.titulo { color: #ef9384; filter: sepia(.55) hue-rotate(-32deg) saturate(1.75); }
.gmenu-item.titulo:hover { filter: sepia(.55) hue-rotate(-32deg) saturate(1.75) brightness(1.28); }
.gmenu-hint { text-align: center; font-size: 10.5px; letter-spacing: .1em; color: #7a683f; margin-top: 2px; }

/* overlay do glossário (iframe) — o mundo do jogo aparece EMBAÇADO atrás (preview de UI) */
#glossary { background: rgba(6, 4, 10, .30); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
#glossary iframe { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.ov-close {
  position: absolute; top: 14px; right: 18px; z-index: 3; cursor: pointer; font-family: inherit; width: 46px; height: 46px; border-radius: 50%; border: 0;
  font-size: 22px; line-height: 1; color: #f2e6c8; background: rgba(30, 18, 40, .92);
  box-shadow: inset 0 0 0 1px rgba(217,178,76,.42), 0 4px 14px rgba(0,0,0,.5); transition: filter .12s, transform .08s;
}
.ov-close:hover { filter: brightness(1.35); transform: scale(1.05); }
.ov-close:active { transform: scale(.96); }

/* ═══ Viewport baixo (paisagem de celular): variante compacta da maquete — moldura mais fina,
   chips menores; se ainda faltar altura, rola por dentro (fix 16/07) ═══ */
@media (max-height: 500px) {
  .gmenu-panel { width: 336px; gap: 4px; padding: 21px 24px 23px; max-height: calc(100vh - 8px); overflow-y: auto; }
  .gmenu-panel::before, .gmenu-panel::after { border-width: 22px; }
  .gmenu-head { margin-bottom: 3px; }
  .gmenu-title { font-size: 12px; }
  .gmenu-item { border-width: 8px; padding: 2px 6px; font-size: 11.5px; }
  .gmenu-item .ic { font-size: 13px; }
  .gmenu-div { margin: 2px 8px; }
  .gmenu-hint { display: none; }
}