/* =============================================================================
   metinsmapa.css - MAPA DAS METINS (/sistemas/metins/mapa/<slug>) - DOM2, 21/10/2026
   -----------------------------------------------------------------------------
   Prefixo mm-. Usa as variáveis do site.css (--cartao, --mudo, --aurora...).
   .mm-quadro: a foto (<img>) e o <svg> dos pontos ocupam o MESMO retângulo
   (svg absoluto por cima, viewBox em metros) -> os pontos acompanham a foto em
   qualquer largura de tela. "Ampliar" (JS) deixa o quadro 2x/2,5x mais largo
   dentro de .mm-rolagem, que rola na horizontal (a página não rola de lado).
   Filtro por tipo: o JS põe .esconde-N no .mm e os elementos .mm-tN somem.
   ============================================================================= */

/* seletor de mapas e abas de reino: reaproveitam .wk-chips/.wk-abas do site.css */
.mm-mapas { margin: 0 0 .6rem; }
.mm-reinos { margin: 0 0 .4rem; }
.mm-reino-shinsoo.ativa { border-bottom-color: var(--shinsoo); }
.mm-reino-chunjo.ativa { border-bottom-color: var(--chunjo); }
.mm-reino-jinno.ativa { border-bottom-color: var(--jinno); }

/* legenda = contagem por tipo (com JS vira botão de filtro) */
.mm-legenda {
  list-style: none; margin: .6rem 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .4rem;
}
.mm-leg {
  display: flex; align-items: center; gap: .5rem;
  background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: 10px;
  padding: .35rem .6rem; min-height: 44px;
}
.mm-leg-cor { width: 20px; height: 20px; flex: none; }
.mm-leg-ic { width: 28px; height: 28px; flex: none; object-fit: contain; }
.mm-leg-nome { flex: 1; line-height: 1.25; }
.mm-leg-n { font-size: 1.1rem; color: var(--aurora-2); }
.mm-leg.js { cursor: pointer; user-select: none; }
.mm-leg.js:hover { border-color: var(--aurora); }
.mm-leg.apagado { opacity: .45; }
.mm-leg.apagado .mm-leg-n { text-decoration: line-through; }

.mm-ferr { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0; }

/* quadro do mapa */
.mm-rolagem {
  overflow: auto; max-width: 100%;
  border: 1px solid var(--cartao-borda); border-radius: 12px; background: #141614;
  -webkit-overflow-scrolling: touch;
}
.mm-quadro { position: relative; margin: 0; width: 100%; line-height: 0; }
.mm-foto { display: block; width: 100%; height: auto; }
.mm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mm-pt { cursor: pointer; transition: r .12s; }
.mm-pt:hover, .mm-pt:focus, .mm-pt.sel { stroke: #fff; outline: none; }
.mm-area { stroke-dasharray: 6 5; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mm.ampliado .mm-quadro { width: 200%; }
@media (max-width: 700px) {
  .mm.ampliado .mm-quadro { width: 280%; }
  .mm-legenda { grid-template-columns: 1fr; }
}

/* filtro por tipo (até 6 tipos por mapa) */
.mm.esconde-0 .mm-t0, .mm.esconde-1 .mm-t1, .mm.esconde-2 .mm-t2,
.mm.esconde-3 .mm-t3, .mm.esconde-4 .mm-t4, .mm.esconde-5 .mm-t5 { display: none; }

/* dica (posição em % do quadro, posta pelo JS) */
.mm-tip {
  position: absolute; z-index: 3; transform: translateY(calc(-100% - 14px));
  background: rgba(10, 14, 31, .96); color: var(--texto);
  border: 1px solid var(--aurora); border-radius: 10px; padding: .45rem .65rem;
  font-size: .88rem; line-height: 1.35; width: max-content; max-width: 240px; pointer-events: none;
  box-shadow: var(--sombra);
}
.mm-tip.embaixo { transform: translateY(14px); }
.mm-tip b { color: var(--aurora-2); }
.mm-tip .mudo { color: var(--mudo); }
.mm-notas { margin-top: .8rem; }

/* chips do seletor de mapas: maiores (toque) e o mapa atual destacado */
.mm-mapas .wk-chip { padding: 6px 12px; font-size: .9rem; min-height: 34px; }
.mm-mapas .wk-chip.ativo { background: var(--aurora); border-color: var(--aurora); color: #1a0e05; font-weight: 700; }
.mm.ampliado .mm-rolagem { max-height: 80vh; }   /* ampliado = caixa de arrastar (não estica a página) */