/* Ícones pixel art dos menus (v0.167.0): o mesmo ícone no botão do cabeçalho, na lista de lugares da taverna e no título da
   janela do lugar. Arte de 14 x 14 unidades gerada por scratch/gerar_icones_menu.py (assets/ui/menu/); 1 unidade = 2 px,
   inteiro para os pixels não borrarem. Só enfeite: o texto do botão continua dizendo o nome. */
.menu-ico {
  flex: none;
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--ico) center / 28px 28px no-repeat;
  image-rendering: pixelated;
}

.menu-ico[data-ico="batalha"] { --ico: url("../assets/ui/menu/batalha.svg"); }
.menu-ico[data-ico="invocar"] { --ico: url("../assets/ui/menu/invocar.svg"); }
.menu-ico[data-ico="inventario"] { --ico: url("../assets/ui/menu/inventario.svg"); }
.menu-ico[data-ico="forja"] { --ico: url("../assets/ui/menu/forja.svg"); }
.menu-ico[data-ico="mostruario"] { --ico: url("../assets/ui/menu/mostruario.svg"); }
.menu-ico[data-ico="taverna"] { --ico: url("../assets/ui/menu/taverna.svg"); }
.menu-ico[data-ico="guilda"] { --ico: url("../assets/ui/menu/guilda.svg"); }
.menu-ico[data-ico="diario"] { --ico: url("../assets/ui/menu/diario.svg"); }
.menu-ico[data-ico="loja"] { --ico: url("../assets/ui/menu/loja.svg"); }
.menu-ico[data-ico="ranking"] { --ico: url("../assets/ui/menu/ranking.svg"); }
.menu-ico[data-ico="telao"] { --ico: url("../assets/ui/menu/telao.svg"); }
.menu-ico[data-ico="perfil"] { --ico: url("../assets/ui/menu/perfil.svg"); }
.menu-ico[data-ico="moeda"] { --ico: url("../assets/ui/menu/moeda.svg"); }
.menu-ico[data-ico="raid"] { --ico: url("../assets/ui/menu/raid.svg"); }
.menu-ico[data-ico="mundo1"] { --ico: url("../assets/ui/menu/mundo1.svg"); }
.menu-ico[data-ico="mundo2"] { --ico: url("../assets/ui/menu/mundo2.svg"); }

/* Abas do cabeçalho: ícone e nome lado a lado, no meio do botão. */
.nav-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Lugares da taverna: ícone, nome em dourado e, à direita, o que o lugar faz. */
.tavern-places-menu {
  min-width: 300px;
  max-width: calc(100vw - 16px);
}

.tavern-place {
  align-items: center;
}

.tavern-place strong {
  margin-right: auto;
}

/* Título da janela do lugar e do quadro: o ícone encosta no nome (o espaço do cabeçalho é maior). */
.station-head .menu-ico {
  margin-right: calc(var(--s-3) - var(--s-5));
}

#quest-board-title::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: var(--s-3);
  vertical-align: -7px;
  background: url("../assets/ui/menu/batalha.svg") center / 28px 28px no-repeat;
  image-rendering: pixelated;
}

/* Celular estreito: as abas e o submenu ficam apertados, então o ícone encolhe para a metade (1 unidade = 1 px, ainda inteiro). */
@media (max-width: 640px) {
  .nav-tab,
  .nav-sub {
    gap: 4px;
  }

  .nav-tab .menu-ico,
  .nav-sub .menu-ico {
    width: 14px;
    height: 14px;
    background-size: 14px 14px;
  }
}