/* Horda em 7 dias: MENU FIXO (teste de 2026-11-06). Barra embaixo em todas as telas, menos na partida; guia das missões.
   Tudo proporcional ao tamanho da tela (pedido do usuário: em tela em pé estreita, tipo Shorts, nenhum menu nem texto sai do
   quadro nem esbarra em outro). Uma medida só manda em tudo: --mf-alt (a altura da barra sem a área do gesto do celular);
   o que fica perto da barra sobe por --mf-h (a barra inteira). */
:root {
  --mf-alt: clamp(52px, 8.4vh, 66px);
  --mf-h: calc(var(--mf-alt) + env(safe-area-inset-bottom));
  --mf-folga: clamp(6px, 1.4vh, 12px);
}
#menu-fixo { position: fixed; z-index: 22; left: 0; right: 0; bottom: 0; display: none; grid-template-columns: 1fr 1fr 1.45fr 1fr 1fr; align-items: center;
  gap: clamp(2px, 1vw, 6px); height: var(--mf-h); padding: 0 max(6px, calc(50% - 272px)) env(safe-area-inset-bottom);
  background: rgba(9, 13, 25, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5); }
body.menu-fixo #menu-fixo { display: grid; }
#menu-fixo button { position: relative; min-width: 0; height: calc(var(--mf-alt) - 10px); padding: 0; border: 0; border-radius: 14px; background: transparent;
  color: #aab3c5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1px, 0.5vh, 3px);
  font: 800 clamp(9px, 2.8vw, 11px) var(--fonte); box-shadow: none; translate: none; }
#menu-fixo button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#menu-fixo button i { font-style: normal; font-size: clamp(17px, 5.6vw, 23px); line-height: 1; }
#menu-fixo button.on { color: var(--luz); background: rgba(255, 211, 107, 0.12); }
#menu-fixo button:not(.mf-defender):active { background: rgba(255, 255, 255, 0.08); }
#menu-fixo .mf-defender { height: calc(var(--mf-alt) - 4px); margin-top: calc(var(--mf-alt) * -0.32); border-radius: 999px; background: var(--sangue);
  color: #fff; font: 900 clamp(11px, 3.6vw, 15px) var(--fonte); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; padding: 0 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -4px 0 rgba(0, 0, 0, 0.32), 0 0 0 4px rgba(9, 13, 25, 0.97), 0 0 24px rgba(229, 56, 59, 0.55); }
#menu-fixo .mf-defender span { white-space: normal; text-align: center; overflow-wrap: anywhere; }
#menu-fixo .mf-defender:active { translate: 0 2px; }
#menu-fixo .mf-ponto { position: absolute; top: 4px; right: calc(50% - 20px); width: 10px; height: 10px; border-radius: 50%; background: var(--sangue);
  box-shadow: 0 0 0 2px #090d19; display: none; }
#menu-fixo button.pode .mf-ponto { display: block; }
#menu-fixo button.pode { color: var(--luz); animation: mf-chama 3s ease-in-out infinite; }
@keyframes mf-chama { 50% { background: rgba(255, 211, 107, 0.16); } }
/* quem ainda não está no jogo: o cadeado (o toque leva a achar o @) */
#menu-fixo.sem-eu button[data-menu="loja"]::after, #menu-fixo.sem-eu button[data-menu="arena"]::after,
#menu-fixo.sem-eu button[data-menu="missoes"]::after { content: "🔒"; position: absolute; top: 2px; right: calc(50% - 22px); font-size: 10px; }

/* com a barra, sai o que ela repete */
body.menu-fixo #c-jogar { display: none !important; }
body.menu-fixo #j-mapa-cartao [data-jogar] { display: none !important; }
body.menu-fixo #j-mapa-lado #j-mapa-ranking, body.menu-fixo #j-mapa-lado #j-mapa-loja,
body.menu-fixo #j-mapa-lado #j-mapa-missoes, body.menu-fixo #j-mapa-lado #j-mapa-arena { display: none !important; }
/* e o resto termina em cima dela (nada fica escondido atrás) */
body.menu-fixo #c-baixo { padding-bottom: calc(var(--mf-h) + var(--mf-folga)); }
body.menu-fixo #j-mapa-cartao { padding-bottom: calc(var(--mf-h) + var(--mf-folga)); }
body.menu-fixo #j-painel { bottom: var(--mf-h); }
body.menu-fixo #missoes, body.menu-fixo #arena { bottom: var(--mf-h); }
body.menu-fixo #r-cartao { bottom: var(--mf-h); }
body.menu-fixo #r-acoes { bottom: calc(var(--mf-h) + var(--mf-folga)); }
body.menu-fixo #folha { bottom: var(--mf-h); max-height: calc(55vh - var(--mf-h) * 0.5); }
body.menu-fixo #folha.fechada { transform: translateY(calc(110% + var(--mf-h))); }   /* fechado, some de vez atrás da barra */
/* mapa do Brasil: rodapé, botões (Rádio, Ranking, Como funciona), zoom e música em degraus acima da barra, sem se encostar */
body.menu-fixo #rodape { bottom: calc(var(--mf-h) + 4px); right: 12px; font-size: clamp(9.5px, 2.7vw, 11.5px); line-height: 1.3; }
body.menu-fixo #botoes { left: 12px; right: 12px; justify-content: flex-end; bottom: calc(var(--mf-h) + clamp(30px, 5.4vh, 40px)); }
body.menu-fixo #botoes button { flex: 0 1 auto; min-width: 0; white-space: nowrap; padding: clamp(6px, 1.2vh, 10px) clamp(8px, 2.6vw, 14px); font-size: clamp(11px, 3.3vw, 14px); }
body.menu-fixo #zoom { top: auto; transform: none; bottom: calc(var(--mf-h) + clamp(76px, 12.5vh, 96px)); gap: clamp(4px, 0.8vh, 6px); }
body.menu-fixo #zoom button { width: clamp(32px, 9.6vw, 42px); height: clamp(32px, 9.6vw, 42px); font-size: clamp(15px, 4.6vw, 20px); padding: 0; }
body.menu-fixo #musica-botao { right: calc(12px + clamp(32px, 9.6vw, 42px) + 8px); bottom: calc(var(--mf-h) + clamp(76px, 12.5vh, 96px));
  width: clamp(32px, 9.6vw, 42px); height: clamp(32px, 9.6vw, 42px); font-size: clamp(15px, 4.6vw, 19px); }
@media (min-width: 900px) {
  body.menu-fixo #folha { bottom: calc(var(--mf-h) + 16px); max-height: calc(100vh - 220px - var(--mf-h)); }
  body.menu-fixo #folha.fechada { transform: translateX(calc(-100% - 40px)); }
}
/* no PC o mapa das hordas é uma coluna de 560 no meio: a coluna do lado (Profissão) e a pílula da Meta de hoje ficam presas nela */
@media (min-width: 580px) {
  #j-mapa-lado { right: calc(50% - 280px + 6px); }
  #j-meta { left: calc(50% - 280px + 10px); max-width: 540px; }
}

/* aviso curto */
#mf-aviso { position: fixed; z-index: 45; left: 50%; bottom: calc(var(--mf-h) + 16px); transform: translateX(-50%); width: max-content; max-width: 92%;
  padding: 10px 16px; border-radius: 14px; background: rgba(12, 18, 32, 0.96); border: 1px solid var(--luz); color: var(--texto);
  font: 700 clamp(12px, 3.6vw, 14px) var(--fonte); text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
#mf-aviso.some { display: none; }

/* o guia das missões: escurece tudo menos o botão certo */
#mf-guia { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#mf-guia .mf-furo { position: fixed; border-radius: 18px; border: 3px solid var(--luz);
  box-shadow: 0 0 0 9999px rgba(3, 5, 10, 0.62), 0 0 26px rgba(255, 211, 107, 0.85); animation: mf-pulsa 1.1s ease-in-out infinite; }
#mf-guia .mf-balao { position: fixed; width: min(260px, calc(100vw - 24px)); padding: 11px 14px; border-radius: 14px; background: #fff; color: #121212;
  font: 700 clamp(13px, 3.9vw, 15px) var(--fonte); line-height: 1.35; text-align: center; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); animation: mf-entra 0.3s ease-out both; }
#mf-guia .mf-balao b { color: #c2282b; }
#mf-guia .mf-balao.em-cima::after, #mf-guia .mf-balao.embaixo::after { content: ""; position: absolute; left: 50%; margin-left: -9px; border: 9px solid transparent; }
#mf-guia .mf-balao.em-cima::after { top: 100%; border-top-color: #fff; }
#mf-guia .mf-balao.embaixo::after { bottom: 100%; border-bottom-color: #fff; }
@keyframes mf-pulsa { 50% { transform: scale(1.05); } }
@keyframes mf-entra { from { opacity: 0; transform: translateY(8px); } }

/* o "Ir ›" de cada missão */
.mi-ir { margin-left: 8px; padding: clamp(5px, 1vh, 7px) clamp(8px, 2.6vw, 11px); border-radius: 10px; border: 1px solid rgba(255, 211, 107, 0.6);
  background: rgba(255, 211, 107, 0.12); color: var(--luz); font: 900 clamp(11px, 3.4vw, 13px) var(--fonte); white-space: nowrap; cursor: pointer; flex: none; }
.mi-card[data-ir] { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #mf-guia .mf-furo, #menu-fixo button.pode { animation: none; } }

/* cartão da horda: as plaquinhas de zumbi (×6, CHEFE…) diminuem com a tela e cabem na largura, sem cortar a última */
#j-mapa-cartao .j-previa { gap: clamp(3px, 1.2vw, 6px); }
#j-mapa-cartao .j-pv { gap: clamp(2px, 0.6vw, 3px); padding: 2px clamp(5px, 1.8vw, 9px) 2px 2px; font-size: clamp(11px, 3.4vw, 13px); }
#j-mapa-cartao .j-pv img { height: clamp(20px, 6.6vw, 28px); width: clamp(20px, 6.6vw, 28px); }
#j-mapa-cartao .j-pv.chefe { font-size: clamp(9.5px, 2.9vw, 11px); }