/* ÚLTIMO REFÚGIO — marcadores de mapa / status de carta
   Carregar depois de css/estilo.css (e depois de combate.css se infectado sobre .tc-carta).
   Integração Dev:
     <link rel="stylesheet" href="../web-assets/ui/marcadores/marcadores.css" />
   Tokens: saque (mapa), saque esgotado, espólio (mapa §23.14), selo ESGOTADA, infectado (canto sup-esq da .tc-carta). */

:root {
  --marcador-saque-size: clamp(24px, 3.2vw, 36px);
  --marcador-infectado-size: clamp(24px, 3.2vw, 36px);
  --selo-esgotada-w: clamp(60px, 10vw, 92px);
  --marcador-saque: url("./marcador_saque.webp");
  --marcador-saque-esgotado: url("./marcador_saque_esgotado.webp");
  --selo-esgotada: url("./selo_esgotada.webp");
  --marcador-infectado: url("./marcador_infectado.webp");
  --marcador-espolio-size: clamp(24px, 3.2vw, 36px);
  --marcador-espolio: url("./marcador_espolio.webp");
}

/* —— Marcador SAQUE no mapa (centro da região, %) —— */
.marcador-saque,
.marcador-saque--2 {
  position: absolute;
  width: var(--marcador-saque-size);
  height: var(--marcador-saque-size);
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--marcador-saque) center / contain no-repeat;
  background-color: transparent;
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

.marcador-saque--2 {
  /* segundo saque na mesma região: leve offset */
  transform: translate(calc(-50% + 10px), calc(-50% - 8px));
}

.marcador-saque--esgotado,
.marcador-saque.marcador-saque--esgotado {
  background-image: var(--marcador-saque-esgotado);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) grayscale(0.15);
}


/* —— Marcador ESPÓLIO no mapa (§23.14: pilha de itens na região, não é ameaça) —— */
.marcador-espolio {
  position: absolute;
  width: var(--marcador-espolio-size);
  height: var(--marcador-espolio-size);
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--marcador-espolio) center / contain no-repeat;
  background-color: transparent;
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

.marcador-espolio--2 {
  /* segundo espólio na mesma região: leve offset oposto ao saque--2 */
  transform: translate(calc(-50% - 10px), calc(-50% + 8px));
}

/* —— Selo ESGOTADA (overlay sobre região / marcador) —— */
.selo-esgotada {
  position: absolute;
  width: var(--selo-esgotada-w);
  height: auto;
  aspect-ratio: 160 / 56;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--selo-esgotada) center / contain no-repeat;
  pointer-events: none;
  z-index: 6;
  transform: translate(-50%, -50%) rotate(-2deg);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75));
}

.selo-esgotada--abaixo {
  /* abaixo do rótulo: pin com top um pouco maior que o centro da região */
  transform: translate(-40%, -10%) rotate(-2deg);
}

/* Host de região no mapa: position:relative; left/top via % do centro */
.mapa-host {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}
.mapa-host > img {
  width: 100%;
  height: auto;
  display: block;
}
.mapa-regiao-pin {
  position: absolute;
  width: 0;
  height: 0;
  /* left/top = centro normalizado × 100% */
}

/* —— Infectado: sobre o RETRATO, abaixo do cabeçalho do nome (não cobre nome/Vida/rosto) —— */
.marcador-infectado {
  position: absolute;
  top: 21%;
  left: 6%;
  width: var(--marcador-infectado-size);
  height: var(--marcador-infectado-size);
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--marcador-infectado) center / contain no-repeat;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.tc-carta .marcador-infectado,
.carta .marcador-infectado {
  top: 21%;
  left: 6%;
}

@media (max-width: 420px) {
  :root {
    --marcador-saque-size: 28px;
    --marcador-infectado-size: 28px;
    --marcador-espolio-size: 28px;
    --selo-esgotada-w: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marcador-saque,
  .marcador-espolio,
  .marcador-infectado,
  .selo-esgotada,
  .selo-esgotada--abaixo {
    transition: none;
  }
}

/* ================================================================
   EMPILHAMENTO (Bloco 2) — 2 ou 3 marcadores no mesmo ponto
   Regra visual (1280 e acima):
   1. Nunca sobre o RÓTULO: a pilha mora na âncora "pilha" da região
      (logo abaixo do ícone do rótulo — ver ui/regioes/regioes_estados.css).
   2. Fileira horizontal, centralizada, sobreposição de 25% entre tokens.
   3. Ordem (esq → dir) e prioridade de desenho: infectado > espólio > saque > saque esgotado.
      O 1º token fica por cima (z-index maior).
   4. Máximo 3 tokens visíveis; do 4º em diante vira contador "+N" (.pilha-marcadores__mais).
   5. ESGOTADA dentro de pilha: carimbo pequeno logo abaixo da fileira
      (.pilha-marcadores__selo), nunca o carimbo grande por cima do rótulo.
   6. Peões (retratos) NÃO entram na pilha de marcadores: ficam na âncora "peoes"
      (à direita do rótulo) em .pilha-peoes, sobrepostos 30%; quem joga o turno fica na frente.
   ================================================================ */
:root {
  --pilha-token: 22px;
  --pilha-sobrepor: .25;
  --pilha-peao: 40px;
}
.pilha-marcadores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.pilha-marcadores__fila {
  display: flex;
  align-items: center;
  padding: 2px 3px;
  border-radius: 999px;
  background: rgba(10, 8, 6, .55);       /* calço escuro: separa do fundo do mapa */
  box-shadow: 0 0 0 1px rgba(201, 162, 39, .35), 0 2px 5px rgba(0, 0, 0, .6);
}
.pilha-marcadores__fila > .marcador-saque,
.pilha-marcadores__fila > .marcador-espolio,
.pilha-marcadores__fila > .marcador-infectado,
.pilha-marcadores__fila > .pilha-marcadores__mais {
  position: relative;
  inset: auto;
  top: auto; left: auto;
  transform: none;
  flex: 0 0 auto;
  width: var(--pilha-token);
  height: var(--pilha-token);
  margin: 0 0 0 calc(var(--pilha-token) * var(--pilha-sobrepor) * -1);
}
.pilha-marcadores__fila > :first-child { margin-left: 0; z-index: 9; }
.pilha-marcadores__fila > :nth-child(2) { z-index: 8; }
.pilha-marcadores__fila > :nth-child(3) { z-index: 7; }
.pilha-marcadores__fila > :nth-child(n+4):not(.pilha-marcadores__mais) { display: none; }
.pilha-marcadores__mais {
  display: grid;
  place-items: center;
  z-index: 6;
  border-radius: 50%;
  background: #1a1610;
  border: 1.5px solid #c9a227;
  color: #f0e6cc;
  font: 800 10px/1 "Roboto Condensed", "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: -.02em;
  margin-left: 2px !important;           /* o contador não se sobrepõe */
}
.pilha-marcadores__selo {
  position: relative;
  inset: auto;
  transform: rotate(-3deg);
  width: 52px;
  height: auto;
  aspect-ratio: 160 / 56;
  background: var(--selo-esgotada) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}

.pilha-peoes { display: flex; align-items: center; }
.pilha-peoes > * {
  position: relative !important;
  left: auto !important; top: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  width: var(--pilha-peao) !important;
  height: var(--pilha-peao) !important;
  margin-left: calc(var(--pilha-peao) * -.3);
}
.pilha-peoes > :first-child { margin-left: 0; }
.pilha-peoes > .pilha-peoes__turno,
.pilha-peoes > .mk-retrato--turno { z-index: 3; }
.pilha-peoes > :nth-child(n+4):not(.pilha-marcadores__mais) { display: none; }
/* com 2+ peões, só o da frente (1º ou o do turno) mostra o nome; os outros no title/hover */
.pilha-peoes > * + * .mk-retrato__nome,
.pilha-peoes > * + * .pilha-peoes__nome { display: none; }
.pilha-peoes > .mk-retrato--turno .mk-retrato__nome { display: block; }
.pilha-peoes > * + *:hover .mk-retrato__nome { display: block; }