/* ---------- Mapa Interativo -- página full-width/full-height, sem rodapé ----------
   .site-nav é fixed (78px, ver .site-nav-spacer em codex.css) -- esta página
   trava o resto da viewport abaixo dele e não deixa o BODY rolar, só a
   sidebar (quando aberta) e o próprio mapa Leaflet rolam/navegam. */
body.pagina-mapa{
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding-bottom:0; /* body{} global tem 4rem (espaço antes do rodapé) -- essa página não tem rodapé */
}
body.pagina-mapa .site-nav-spacer{ flex-shrink:0; }

.mapa-page{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  position:relative;
}

.mapa-alert-demo{
  flex-shrink:0;
  margin:0;
  border-radius:0;
}

.mapa-corpo{
  flex:1;
  min-height:0;
  display:flex;
}

.mapa-sidebar{
  width:320px;
  flex-shrink:0;
  height:100%;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:1.1rem;
  background: var(--panel);
  border-right:1px solid var(--hairline);
}
.mapa-sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.mapa-sidebar-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  color: var(--text);
}
.mapa-sidebar-close{
  display:none;
  width:36px; height:36px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid var(--hairline);
  background: var(--panel-2);
  color: var(--text-dim);
}

.mapa-filtros-toggle{
  display:none;
}

/* Abaixo do breakpoint xxl (1400px): sidebar vira overlay em tela cheia,
   fechada por padrão -- só o botão flutuante fica visível. */
@media (max-width: 1399.98px){
  .mapa-sidebar{
    display:none;
    position:fixed;
    top:78px; left:0; right:0; bottom:0;
    width:auto;
    height:auto;
    z-index:1002; /* acima do controle de zoom do Leaflet (1000) e do botão de abrir (1001) */
    border-right:none;
  }
  .mapa-sidebar.is-aberta{ display:flex; }
  .mapa-sidebar-close{ display:flex; }

  .mapa-filtros-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    top: calc(78px + .75rem);
    right:.75rem; /* esquerda é onde o Leaflet põe o controle de zoom (z-index 1000) */
    z-index:1001;
    width:46px; height:46px;
    border-radius:10px;
    border:1px solid var(--hairline);
    background: var(--panel);
    color: var(--text);
    font-size:1.1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
  }
}

.mapa-tabs{
  display:flex;
  gap:.5rem;
  flex-shrink:0;
}
.mapa-tab{
  padding:.5rem 1.1rem;
  border-radius:10px;
  border:1px solid var(--hairline);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size:.85rem;
  cursor:pointer;
  transition: border-color .15s ease, color .15s ease;
}
.mapa-tab.is-active{
  border-color: var(--accent-line);
  color: var(--text);
  background: var(--accent-soft);
}

.mapa-acoes-globais{
  display:flex;
  gap:.5rem;
  flex-shrink:0;
}
.mapa-selecionar-tudo-global{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.55rem .7rem;
  border-radius:10px;
  border:1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  flex:1;
}
.mapa-desmarcar-tudo-global{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .7rem;
  border-radius:10px;
  border:1px solid var(--hairline);
  background: var(--panel-2);
  color: var(--text-dim);
  cursor:pointer;
  flex-shrink:0;
}
.mapa-desmarcar-tudo-global:hover{ color: var(--text); border-color: var(--accent-line); }

/* Fase 5 -- busca por nome real (Tesouro/NPC/Pal Alfa/Procurado/Efígie/
   Recurso/Missão), ver mapa-busca.php. Dropdown de resultados é posição
   absoluta pra não empurrar o resto do sidebar quando abre. */
.mapa-busca{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .7rem;
  border-radius:10px;
  border:1px solid var(--hairline);
  background: var(--panel-2);
  color: var(--text-dim);
}
.mapa-busca input{
  flex:1;
  min-width:0;
  background:transparent;
  border:none;
  color: var(--text);
  font-size:.82rem;
}
.mapa-busca input:focus{ outline:none; }
.mapa-busca-resultados{
  position:absolute;
  top:calc(100% + .3rem);
  left:0; right:0;
  z-index:5;
  max-height:340px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:.4rem;
  border-radius:10px;
  border:1px solid var(--hairline);
  background: var(--panel);
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
}
.mapa-busca-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .5rem;
  border-radius:7px;
  background: var(--panel-2);
  color: var(--text);
  cursor:pointer;
  text-align:left;
  border:none;
  width:100%;
  font-size:.8rem;
}
.mapa-busca-item:hover{ background: var(--accent-soft); }
.mapa-busca-item img{ width:20px; height:20px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.mapa-busca-item i{ width:1.1em; text-align:center; flex-shrink:0; }
.mapa-busca-item-textos{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mapa-busca-item-sub{ font-size:.7rem; color: var(--text-dim); }
.mapa-busca-vazio{ padding:.5rem; font-size:.78rem; color: var(--text-dim); text-align:center; }

/* Marcar coordenada manual (par X/Y digitado pelo usuário) -- mesmo
   figurino visual de .mapa-busca. */
.mapa-coord{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem .6rem;
  border-radius:10px;
  border:1px solid var(--hairline);
  background: var(--panel-2);
  color: var(--text-dim);
}
.mapa-coord input{
  width:0;
  flex:1;
  min-width:0;
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius:6px;
  color: var(--text);
  font-size:.8rem;
  padding:.3rem .4rem;
}
.mapa-coord input:focus{ outline:none; border-color: var(--accent-line); }
.mapa-coord-btn{
  border:1px solid var(--hairline);
  background: var(--panel);
  color: var(--text-dim);
  border-radius:8px;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.mapa-coord-btn:hover{ color: var(--text); border-color: var(--accent-line); }

/* Pino da coordenada marcada -- bem maior/mais chamativo que os demais
   marcadores (só 1 por vez, ver marcarCoordenadaManual() em mapa.js) --
   pulso sutil chama atenção sem ser irritante. */
.mapa-marker-coord{
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--gold);
  color:#1a1330;
  font-size:1.4rem;
  border:2px solid var(--text-bright);
  animation: mapa-coord-pulse 1.6s ease-in-out infinite;
}
@keyframes mapa-coord-pulse{
  0%,100%{ box-shadow:0 0 0 6px var(--gold-soft), 0 3px 12px rgba(0,0,0,.6); }
  50%{ box-shadow:0 0 0 12px transparent, 0 3px 12px rgba(0,0,0,.6); }
}

.mapa-grupo{
  border-radius:10px;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  flex-shrink:0;
}
.mapa-grupo summary{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem .7rem;
  cursor:pointer;
  font-size:.85rem;
  font-weight:600;
  color: var(--text);
  list-style:none;
}
.mapa-grupo summary::-webkit-details-marker{ display:none; }
.mapa-grupo-titulo{ flex:1; min-width:0; }
.mapa-selecionar-tudo-grupo,
.mapa-selecionar-tudo-sub{
  border:1px solid var(--hairline);
  background: var(--panel);
  color: var(--text-dim);
  border-radius:8px;
  cursor:pointer;
  font-size:.72rem;
}
.mapa-selecionar-tudo-grupo{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.mapa-selecionar-tudo-grupo:hover,
.mapa-selecionar-tudo-sub:hover{ color: var(--text); border-color: var(--accent-line); }

.mapa-grupo-corpo{
  padding:0 .7rem .7rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.4rem;
}

.mapa-camadas{ display:contents; }
.mapa-camada{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .6rem;
  border-radius:8px;
  background: var(--panel);
  border:1px solid var(--hairline);
  cursor:pointer;
  font-size:.8rem;
}
.mapa-camada input{ flex-shrink:0; }
.mapa-camada i{ width:1.1em; text-align:center; }
.mapa-camada img{ width:20px; height:20px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.mapa-camada-nome{ flex:1; min-width:0; }
.mapa-camada-count{
  font-family: var(--font-mono);
  font-size:.72rem;
  color: var(--text-dim);
}

/* Sub-grupo (NPCs/Efígies/Recursos de Coleta) -- ocupa as 2 colunas do
   grid do .mapa-grupo-corpo (senão fica espremido numa coluna só). */
.mapa-subgrupo{
  grid-column:1 / -1;
  border-radius:8px;
  background: var(--panel);
  border:1px solid var(--hairline);
}
.mapa-subgrupo summary{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .6rem;
  cursor:pointer;
  font-size:.8rem;
  color: var(--text);
  list-style:none;
}
.mapa-subgrupo summary::-webkit-details-marker{ display:none; }
.mapa-subgrupo-corpo{
  padding:0 .6rem .6rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.mapa-selecionar-tudo-sub{
  align-self:flex-start;
  padding:.3rem .6rem;
}
.mapa-subgrupo-lista{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  max-height:260px;
  overflow-y:auto;
}
.mapa-subitem{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.4rem;
  padding:.35rem .5rem;
  border-radius:7px;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  cursor:pointer;
  font-size:.76rem;
}
.mapa-subitem input{ flex-shrink:0; }
.mapa-subitem i{ width:1.1em; text-align:center; flex-shrink:0; }
.mapa-subitem img{
  width:20px; height:20px;
  border-radius:50%;
  flex-shrink:0;
  object-fit:cover;
}
.mapa-subitem-nome{ flex:1; min-width:0; }

.mapa-especies{
  border-radius:10px;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  flex-shrink:0;
}
.mapa-especies summary{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem .7rem;
  cursor:pointer;
  font-size:.85rem;
  color: var(--text);
  list-style:none;
}
.mapa-especies summary::-webkit-details-marker{ display:none; }
.mapa-especies-corpo{
  padding:0 .7rem .7rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.mapa-especies-toolbar{
  display:flex;
  gap:.5rem;
  align-items:stretch;
}
/* Botão isolado, visualmente separado do seletor Mancha/Pinos (grupo
   fechado ao lado) -- mesmo gap usado no resto da sidebar entre blocos
   distintos, pra não parecer uma 3ª opção do mesmo seletor. */
.mapa-especies-noturno-btn{
  flex-shrink:0;
  width:2.3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background: var(--panel);
  border:1px solid var(--hairline);
  color: var(--text-dim);
  font-size:.85rem;
  cursor:pointer;
}
.mapa-especies-noturno-btn.is-ativo{
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--text);
}
.mapa-especies-modo{
  flex:1;
  display:flex;
  gap:.3rem;
  padding:.2rem;
  border-radius:8px;
  background: var(--panel);
  border:1px solid var(--hairline);
}
.mapa-especies-modo-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:.4rem .5rem;
  border-radius:6px;
  border:none;
  background:transparent;
  color: var(--text-dim);
  font-size:.76rem;
  cursor:pointer;
}
.mapa-especies-modo-btn.is-ativo{
  background: var(--accent-soft);
  color: var(--text);
}
.mapa-especies-busca{
  width:100%;
  padding:.45rem .6rem;
  border-radius:8px;
  border:1px solid var(--hairline);
  background: var(--panel);
  color: var(--text);
  font-size:.82rem;
}
.mapa-especies-lista{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  max-height:280px;
  overflow-y:auto;
}
.mapa-especie{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .5rem;
  border-radius:8px;
  background: var(--panel);
  border:1px solid transparent;
  color: var(--text-dim);
  font-size:.8rem;
  text-align:left;
  cursor:pointer;
}
.mapa-especie:hover{ border-color: var(--hairline); color: var(--text); }
.mapa-especie.is-ativo{
  border-color:#ff2fb0;
  color: var(--text);
  background: rgba(255,47,176,.12);
}
.mapa-especie img{
  width:24px; height:24px;
  border-radius:50%;
  flex-shrink:0;
  object-fit:cover;
}

.mapa-canvas{
  flex:1;
  min-width:0;
  --mapa-cor-fundo:#0c161e;
  background:var(--mapa-cor-fundo);
}
/* Árvore Mundial (T_TreeMap.webp) tem cor de borda ligeiramente diferente
   da Palpagos (T_WorldMap.webp) -- #0d151c vs #0c161e, amostrado dos 4
   cantos de cada imagem. Classe trocada em trocarMapa() (mapa.js). Fundo
   E vinheta (.mapa-vignette abaixo) usam essa mesma var, senão o quadrado
   externo volta a aparecer contra o fundo errado num dos 2 mapas. */
.mapa-canvas.is-arvore-mundial{ --mapa-cor-fundo:#0d151c; }

.mapa-marker-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  color:#fff;
  font-size:.8rem;
}
.mapa-marker-img{
  width:30px; height:30px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  background: var(--panel);
}

/* Rótulo fixo de região (13/09/2026, ex.: "Ilha do Vento Alçante") --
   texto puro sobre o terreno, sem pino/balão, mesmo estilo de legenda de
   atlas do mapa de referência (mapgenie.io). `pointer-events:none` (via
   interactive:false no L.marker) deixa o texto "vazado" -- arrastar/clicar
   o mapa embaixo dele funciona normalmente. transform:translate(-50%,-50%)
   centraliza no ponto exato sem precisar acertar iconSize/iconAnchor do
   Leaflet pra cada tamanho de texto (nomes variam muito, ex.: "Coliseu" x
   "Plataforma Petrolífera de Grande Porte dos Caçadores Clandestinos"). */
.mapa-region-label{
  position:absolute;
  left:0; top:0;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  font-family:var(--font-display, var(--font-body));
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.6);
  pointer-events:none;
}

.mapa-cluster-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%; height:100%;
  border-radius:50%;
  background: var(--panel);
  border:2px solid var(--accent);
  color: var(--text);
  font-family: var(--font-mono);
  font-weight:600;
  font-size:.8rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.55);
}

.mapa-spin{ display:inline-block; animation: mapa-spin .8s linear infinite; }
@keyframes mapa-spin{ to{ transform:rotate(360deg); } }

.mapa-popup{ min-width:160px; }
.mapa-popup-titulo{ font-weight:600; margin-bottom:.15rem; }
.mapa-popup-sub{ font-size:.78rem; color: var(--text-dim); margin-bottom:.4rem; }
.mapa-popup-coord{ margin-bottom:.4rem; }
.mapa-popup-link{ font-size:.8rem; color: var(--accent); text-decoration:none; }
.mapa-popup-link:hover{ text-decoration:underline; }

/* Leaflet usa classes próprias por fora do reset do site -- reforça cor de
   fundo/borda do popup pra casar com o tema escuro do Codex. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background: var(--panel) !important;
  color: var(--text) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.5) !important;
}
.leaflet-popup-content-wrapper{ border:1px solid var(--hairline); }
.leaflet-popup-close-button{
  color: var(--text-dim) !important;
}
.leaflet-popup-close-button:hover{
  color: var(--text-bright) !important;
}
/* Leaflet usa z-index alto internamente (controle de zoom = 1000) que
   vazava pra cima do .site-nav (z-index:50, fixed no topo) -- sem isolar
   `.leaflet-container` num contexto de empilhamento próprio, os painéis
   internos do Leaflet comparavam direto contra o z-index:50 do nav e
   ganhavam, cobrindo os dropdowns do menu. z-index:1 aqui CONTÉM o mapa
   (posiciona é herdado do próprio leaflet.css) sem baixar a ordem
   relativa entre as camadas internas do Leaflet, só a ordem dele como um
   todo contra o resto da página. */
.leaflet-container{ background:var(--mapa-cor-fundo) !important; z-index:1; }

/* Esmaece a borda reta da imagem do mapa (T_WorldMap.webp/T_TreeMap.webp
   são um quadrado 8192x8192 com corte duro) contra o fundo -- vinheta some
   sozinha quando dá zoom (a beirada do quadrado sai da viewport), só
   aparece no zoom bem aberto.
   11/09/2026 -- NÃO É mais box-shadow no .leaflet-image-layer (era isso
   até então): esse elemento é escalado via CSS transform pelo Leaflet a
   cada passo de zoom, e o navegador tinha que repintar o blur inset
   (90px) numa imagem de 8192x8192 em CADA frame do zoom -- travava a
   thread principal por até ~1.4s por rajada de scroll (medido com
   requestAnimationFrame: 4 frames >900ms numa rajada de 15 scrolls,
   ZERO depois da mudança), mesmo com poucos pinos no mapa (o gargalo era
   a imagem base, não os marcadores). Fix: div própria (.mapa-vignette),
   filha direta de #mapa-canvas mas FORA das panes do Leaflet que o zoom
   escala -- fica sempre do tamanho da tela, nunca precisa recalcular o
   blur. Criada em assets/js/mapa.js logo após `L.map(...)`. Ver
   [[project_palworld_mapa_interativo]]. */
.mapa-vignette{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  box-shadow: inset 0 0 90px 40px var(--mapa-cor-fundo);
  /* Promove a própria layer de composição (GPU) -- sem isso o navegador
     ainda agrupa o repaint do blur junto com o da pane do Leaflet que o
     zoom transforma ao lado, MESMO essa div sendo pequena (medido: sem
     will-change, voltava a travar ~1s por frame; com, 0 frame travado).
     translateZ(0) é só reforço pro mesmo efeito em navegadores mais
     antigos que ignoram will-change sozinho. */
  will-change: transform;
  transform: translateZ(0);
}