/* Horda em 7 dias: NAVEGAÇÃO (navegacao.js). Voltar parado no topo, topo fino do Defender com a coluna de botões,
   Missões com menu vertical e missões em uma linha, Meu defensor e os pontos na vitória. Vem depois do estilo.css e do arena.css. */

/* ---------- 1. o voltar fica parado no topo ---------- */
.nv-topo { position: sticky; top: -16px; z-index: 3; margin: -18px -18px 10px; padding: 12px 14px 10px; border-radius: 20px 20px 0 0;
  background: #0d1426; border-bottom: 1px solid var(--borda); }
.nv-voltar, .mi-topo .ar-voltar, .ar-topo .ar-voltar { min-height: 42px; padding: 9px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1); color: var(--texto); font: 900 15px var(--fonte); cursor: pointer; }
.nv-voltar:active, .mi-topo .ar-voltar:active, .ar-topo .ar-voltar:active { background: rgba(255, 255, 255, 0.2); }
.mi-topo, .ar-topo { position: sticky; top: calc(-12px - env(safe-area-inset-top)); z-index: 3; margin: calc(-12px - env(safe-area-inset-top)) -14px 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: #05070d; border-bottom: 1px solid var(--borda); }

/* ---------- 2. Defender: topo de uma linha e os botões numa coluna do lado do mapa ---------- */
#j-mapa-topo { flex-wrap: nowrap; gap: 8px; padding: calc(6px + env(safe-area-inset-top)) 8px 6px; }
#j-mapa-topo #j-mapa-voltar { flex: none; padding: 10px 11px; font-size: 14px; }
#j-mapa-topo .j-mapa-quem { flex: 1 1 auto; min-width: 0; display: block; text-align: left; padding: 4px 10px 5px; line-height: 1.25; border-radius: 12px; color: var(--texto); cursor: pointer; }
#j-mapa-melhorias.pode { animation: none; color: var(--texto); }
.j-mapa-l1, .j-mapa-l2 { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.j-mapa-l1 b { overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.j-mapa-l1 span { flex: none; color: var(--luz); font-weight: 800; font-size: 13px; }
.j-mapa-l2 { font-size: 13px; margin-top: 1px; }
#j-mapa-ouro { margin-left: 2px; }
#j-mapa-pontos { flex: none; margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--luz); color: #1a1405; font: 900 12px var(--fonte);
  font-style: normal; animation: pulsa-borda 1.4s ease-in-out infinite; }
#j-mapa-pontos.some { display: none; }
#j-mapa-topo .j-mapa-quem .j-barra { display: block; height: 5px; margin-top: 3px; }

#j-mapa-lado { position: absolute; z-index: 3; right: 6px; top: calc(64px + env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 5px; }
#j-mapa-lado button { position: relative; width: 52px; height: 48px; padding: 4px 2px 3px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(11, 17, 32, 0.88); color: var(--texto); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 800 10px var(--fonte); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); cursor: pointer; }
#j-mapa-lado button span { max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#j-mapa-lado svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#j-mapa-lado .j-lado-emoji { font-style: normal; font-size: 21px; line-height: 23px; }
/* pouco espaço entre o topo e o cartão: a coluna fica só com os ícones (o navegacao.js mede) */
#j-mapa-lado.apertado { gap: 4px; }
#j-mapa-lado.apertado button { height: 42px; gap: 0; padding-top: 2px; }
#j-mapa-lado.apertado .j-lado-emoji { font-size: 18px; line-height: 20px; }
#j-mapa-lado.apertado button span { font-size: 9px; }
#j-mapa-lado button.pode { border-color: var(--luz); background: rgba(46, 38, 12, 0.92); }
#j-mapa-lado button.pode::after { content: ""; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--sangue); box-shadow: 0 0 0 2px #0b1222; }
#j-mapa-lado button:active { transform: scale(0.95); }

/* o seu boneco no mapa: tocar abre o Meu defensor */
#j-eu { pointer-events: auto; cursor: pointer; }

/* o cartão da horda mais baixo: sobra mapa */
#j-mapa-cartao { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
#j-mapa-cartao .rotulo { margin-bottom: 1px; }
#j-mapa-cartao h3 { font-size: 20px; margin-bottom: 2px; }
#j-mapa-cartao .j-previa { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 4px 0 6px; padding-bottom: 2px; }
#j-mapa-cartao .j-previa::-webkit-scrollbar { display: none; }
#j-mapa-cartao .j-pv { flex: none; }
#j-mapa-cartao .sub { margin: 0 0 8px; font-size: 13px; line-height: 1.35; }
#j-mapa-cartao .j-previa + .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* zumbi novo / chefe: uma linha */
#j-mapa-cartao .j-missao, #j-mapa-cartao .j-prof { margin: 4px 0 6px; padding: 6px 10px; font-size: 12.5px; line-height: 1.3; }
#j-mapa-cartao .j-missao small { display: none; }          /* o prêmio e a explicação ficam em Missões › Bento */
#j-mapa-cartao .j-missao .principal, #j-mapa-cartao .j-prof .principal { min-height: 36px; padding: 6px 10px; font-size: 14px; margin-top: 6px; }
#j-mapa-cartao .j-prof .j-prof-missao { display: inline; margin: 0 0 0 4px; }
#j-mapa-cartao .j-prof .j-barra { margin: 5px 0 0; height: 6px; }
#j-mapa-cartao .j-prof > small { display: none; }          /* os detalhes da profissão ficam em Missões › Profissão */
#j-mapa-cartao .jogar, #j-mapa-cartao [data-treino] { min-height: 48px; }
@media (max-height: 700px) {
  #j-mapa-cartao .sub:has(+ [data-jogar]) { display: none; }   /* em tela baixa, a dica "vença a horda inteira" sai e sobra mapa */
}

/* ---------- 3. Missões: menu vertical, uma parte de cada vez ---------- */
.mi-corpo { display: flex; gap: 10px; align-items: flex-start; }
.mi-menu { flex: none; width: 70px; display: flex; flex-direction: column; gap: 6px; }
.mi-menu button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 7px; border-radius: 14px;
  border: 1px solid var(--borda); background: rgba(255, 255, 255, 0.05); color: var(--apagado); font: 800 11.5px var(--fonte); cursor: pointer; }
.mi-menu button i { font-style: normal; font-size: 21px; line-height: 1.1; }
.mi-menu button span { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-menu button.on { background: rgba(255, 211, 107, 0.16); border-color: var(--luz); color: var(--texto); }
.mi-ponto { position: absolute; top: 4px; right: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--sangue); box-shadow: 0 0 0 2px #05070d; }
.mi-lista { flex: 1; min-width: 0; }
.mi-cab { margin: 0 0 8px; }
.mi-cab h3 { margin: 0; font-size: 17px; font-weight: 900; }
.mi-cab small { display: block; color: var(--apagado); font-size: 12px; margin-top: 1px; }
.mi-lista .mi-sec { margin-top: 0; }
.mi-lista .mi-sec + .mi-sec { margin-top: 14px; }
/* cada missão numa linha */
.mi-lista .mi-card, .mi-lista .mi-extra { gap: 8px; padding: 7px 9px; border-radius: 12px; margin-bottom: 6px; min-height: 50px; }
.mi-lista .mi-ic { width: 30px; height: 30px; font-size: 17px; border-radius: 9px; }
.mi-lista .mi-txt b { font-size: 13.5px; line-height: 1.25; }
.mi-lista .mi-txt i { height: 5px; margin: 5px 0 1px; }
.mi-lista .mi-txt small { font-size: 11.5px; }
.mi-conta { flex: none; min-width: 40px; text-align: right; color: var(--apagado); font: 800 12.5px var(--fonte); }
.mi-ok { flex: none; min-width: 40px; text-align: center; color: #8bd34a; font: 900 17px var(--fonte); }
.mi-lista .mi-pegar { padding: 8px 12px; font-size: 13px; box-shadow: 0 0 0 0 rgba(255, 211, 107, 0.6); animation: mi-chama 1.6s ease-out infinite; }
.mi-extra.feita { border-style: solid; border-color: var(--luz); }
@keyframes mi-chama { 0% { box-shadow: 0 0 0 0 rgba(255, 211, 107, 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 211, 107, 0); } }
.mi-lista .j-prof { margin: 0; }

/* ---------- 4. Meu defensor ---------- */
.j-def-topo { display: flex; align-items: center; gap: 12px; }
.j-def-topo img { flex: none; width: 64px; height: 76px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.j-def-topo > div { flex: 1; min-width: 0; }
.j-equip { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.j-equip > div { padding: 8px 10px; border-radius: 12px; border: 1px solid var(--borda); background: rgba(255, 255, 255, 0.05); min-width: 0; }
.j-equip .ic { display: block; font-size: 20px; line-height: 1.2; }
.j-equip b { display: block; font-size: 13.5px; line-height: 1.25; }
.j-equip small { display: block; font-size: 11.5px; line-height: 1.3; margin-top: 2px; }

/* ---------- 5. subiu de nível: os pontos no cartão da vitória ---------- */
.j-subiu .j-resumo { margin: 0 0 8px; background: rgba(255, 211, 107, 0.1); border-color: rgba(255, 211, 107, 0.5); }
.j-subiu .j-melhorias { margin-bottom: 10px; }
.j-subiu .j-melhorias button { padding: 7px 4px; font-weight: 800; color: var(--texto); }
.j-subiu .j-melhorias button b { font-size: 16px; }

/* ---------- 6. trocar o boneco na cidade: a fileira fecha sozinha depois da escolha ---------- */
#c-escolha { position: relative; }
.c-escolha-x { position: absolute; top: -16px; right: -4px; width: 32px; height: 32px !important; padding: 0 !important; border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important; background: #1b2338 !important; color: var(--texto); font: 900 18px/1 var(--fonte); cursor: pointer; }
.c-trocou { position: absolute; left: 50%; bottom: calc(100% - 26px); transform: translateX(-50%); padding: 8px 14px; border-radius: 999px;
  background: rgba(139, 211, 74, 0.95); color: #0d1a05; font: 900 14px var(--fonte); white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  animation: c-trocou 1.6s ease-out forwards; pointer-events: none; }
@keyframes c-trocou { 0% { opacity: 0; transform: translate(-50%, 8px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }

/* ---------- 7. compra de ouro: o e-mail para o comprovante do Pix (jogo.js, confirmarCompra) ---------- */
.j-email { display: block; margin: 12px 0 2px; font-size: 13.5px; font-weight: 800; color: var(--texto); }
.j-email input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 12px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25); background: #0f1628; color: var(--texto); font: 600 16px var(--fonte); }
.j-email input:focus { outline: none; border-color: var(--luz); }
.j-email-dica { display: block; margin-bottom: 6px; }
.j-email-erro { margin: 4px 0 6px; color: #ff8a8d; font-size: 13px; font-weight: 700; }
.j-email-erro.some { display: none; }

/* ---------- 8. Loja: item da loja de moedas com o preço em ouro embaixo (jogo.js, itemLoja) ---------- */
.j-loja .j-precos { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.j-loja .j-precos button { min-width: 78px; }
.j-loja button.compra-ouro { background: rgba(255, 184, 77, 0.16); border-color: rgba(255, 184, 77, 0.75); }

/* ---------- 9. cartão depois de vencer a horda: menor e mais limpo (o fimExtras do jogo.js marca com [data-cidade-barra]) ---------- */
/* nunca passa da tela: se ainda assim for alto, rola por dentro */
#j-mapa-cartao { max-height: calc(100% - 72px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; }
/* a cidade e a missão da semana saem daqui: estão na cidade e em Missões › Bento */
#j-mapa-cartao [data-cidade-barra] { display: none; }
/* subiu de nível: mais baixo */
#j-mapa-cartao .j-subiu .j-resumo { padding: 7px 10px; font-size: 14px; margin-bottom: 6px; }
#j-mapa-cartao .j-subiu .j-melhorias { margin-bottom: 8px; }
#j-mapa-cartao .j-subiu .j-melhorias button { padding: 5px 4px; font-size: 12.5px; line-height: 1.2; }
#j-mapa-cartao .j-subiu .j-melhorias button b { font-size: 15px; }
/* missão do Bento e profissão: uma faixa fina cada */
#j-mapa-cartao:has([data-cidade-barra]) .j-missao, #j-mapa-cartao:has([data-cidade-barra]) .j-prof { margin: 0 0 6px; padding: 6px 10px; font-size: 12.5px; line-height: 1.35; border-radius: 10px; }
#j-mapa-cartao:has([data-cidade-barra]) .j-missao .j-dias { margin-left: 4px; font-size: 12px; }
#j-mapa-cartao:has([data-cidade-barra]) .j-prof .j-barra { height: 4px; margin: 4px 0 0; }
#j-mapa-cartao [data-prof-escolher] { display: inline-block; width: auto; min-height: 0; margin: 0 0 0 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; vertical-align: middle; }
#j-mapa-cartao:has([data-cidade-barra]) .j-missao .principal { display: inline-block; width: auto; min-height: 0; margin: 4px 0 0; padding: 5px 12px; border-radius: 999px; font-size: 13px; }
/* postar o resultado: um botão pequeno, não uma barra inteira */
#j-mapa-cartao [data-postar] { display: block; width: auto; min-height: 0; margin: 0 0 10px auto; padding: 6px 14px; border-radius: 999px; font-size: 13px; }
#j-mapa-cartao [data-postar]::before { content: "📸 "; }
/* a próxima horda, mais junta */
#j-mapa-cartao:has([data-cidade-barra]) .rotulo { margin: 0; }
#j-mapa-cartao:has([data-cidade-barra]) h3 { font-size: 19px; margin: 0 0 2px; }
#j-mapa-cartao:has([data-cidade-barra]) .j-previa { margin: 2px 0 4px; }
#j-mapa-cartao:has([data-cidade-barra]) .j-pv img { height: 24px; width: 24px; }
#j-mapa-cartao:has([data-cidade-barra]) .sub { font-size: 12.5px; margin-bottom: 8px; }