/* Mapa Brasil Veteranos - DAYZ — visual com o logotipo do Sentinela (dono, 05/11/2026, opção C da prévia) */
#barra { height:50px; border-bottom:0; }
#achados { top:57px; } .lado { top:53px; } #t-cortina { top:53px; }
#barra::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px; pointer-events:none;
  background:repeating-linear-gradient(90deg, #0a7a2f 0 26px, #f5c400 26px 52px); }
#barra h1 { display:flex; align-items:center; gap:9px; margin:0 6px 0 0; font-size:15px; }
#barra h1 .logo { width:42px; height:42px; border-radius:50%; flex:none; box-shadow:0 0 0 2px #f5c400, 0 0 0 4px #0a7a2f;
  transition:transform .35s ease; cursor:pointer; }
#barra h1 .logo:hover { transform:rotate(-12deg) scale(1.08); }
#barra h1 .tit { font-family:Oswald, system-ui, sans-serif; font-weight:500; font-size:16px; letter-spacing:.6px; color:#e8e8e8; }
#barra h1 .tit b { color:var(--ouro, #f5c400); font-weight:500; }
#barra h1 .dayz { font-family:"Rubik Distressed", Impact, sans-serif; font-size:25px; letter-spacing:1px; color:#f2f2f2;
  text-shadow:2px 2px 0 #000; line-height:1; padding-left:9px; border-left:1px solid #333; }
/* o logo "respira" de vez em quando, como um radar */
#barra h1 .logo { animation:radar 6s ease-out 2s infinite; }
@keyframes radar { 0%, 70% { box-shadow:0 0 0 2px #f5c400, 0 0 0 4px #0a7a2f, 0 0 0 4px rgba(245,196,0,.55); }
  85% { box-shadow:0 0 0 2px #f5c400, 0 0 0 4px #0a7a2f, 0 0 0 14px rgba(245,196,0,0); }
  100% { box-shadow:0 0 0 2px #f5c400, 0 0 0 4px #0a7a2f, 0 0 0 4px rgba(245,196,0,0); } }
/* celular: logo + DAYZ (o título completo fica na tela de abertura) */
@media (max-width:640px) { #barra h1 { display:flex !important; } #barra h1 .tit { display:none; }
  #barra h1 .logo { width:36px; height:36px; } #barra h1 .dayz { font-size:21px; padding-left:7px; } }

/* tela de abertura: some sozinha quando o mapa fica pronto (mínimo ~1,5 s) */
#abertura { position:fixed; inset:0; z-index:5000; background:#0b0d10; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; transition:opacity .6s ease, visibility .6s; }
#abertura.some { opacity:0; visibility:hidden; }
#abertura img { width:150px; height:150px; border-radius:50%; animation:pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { box-shadow:0 0 0 3px #f5c400, 0 0 0 6px #0a7a2f, 0 0 0 6px rgba(245,196,0,.6); }
  50% { box-shadow:0 0 0 3px #f5c400, 0 0 0 6px #0a7a2f, 0 0 0 26px rgba(245,196,0,0); } }
#abertura .tit { font-family:Oswald, system-ui, sans-serif; font-size:24px; letter-spacing:1px; color:#e8e8e8; text-align:center; }
#abertura .tit b { color:#f5c400; font-weight:500; }
#abertura .dayz { font-family:"Rubik Distressed", Impact, sans-serif; font-size:52px; color:#f2f2f2; text-shadow:3px 3px 0 #000; line-height:1; }
#abertura .faixa { width:220px; height:4px; background:repeating-linear-gradient(90deg, #0a7a2f 0 22px, #f5c400 22px 44px);
  animation:anda 1s linear infinite; background-size:44px 4px; }
@keyframes anda { to { background-position:44px 0; } }
@media (prefers-reduced-motion:reduce) { #abertura img, #barra h1 .logo, #abertura .faixa { animation:none; } }
/* Meu mapa: colega que apareceu ou andou pisca um anel amarelo (2 vezes) */
.mm-brilho::before { content:""; position:absolute; left:-18px; top:-18px; width:36px; height:36px; border-radius:50%;
  border:3px solid #f5c400; animation:brilho 1.2s ease-out 2; pointer-events:none; }
@keyframes brilho { from { transform:scale(.4); opacity:1; } to { transform:scale(1.8); opacity:0; } }

/* ---- barra que cabe em qualquer tela (05/11: no celular passava de 525 px e escondia Legenda/Terreno/☰) ---- */
#barra > * { flex-shrink:0; }
#barra #busca { flex:1 1 80px; min-width:0; }
/* tablet e telas médias: botões só com ícone */
@media (max-width:1180px) { #b-legenda .t, #b-terreno .t { display:none; } }
@media (max-width:920px) { #barra h1 .tit { display:none; } }
/* celular: tudo menor; a busca vira uma lupa que abre por cima da barra ao tocar */
@media (max-width:640px) {
  #barra { gap:4px; padding:0 6px; }
  #barra .bt { padding:6px 7px; }
  #b-sat { font-size:0; padding:6px 7px; }
  #b-sat::before { content:"🛰️"; font-size:16px; }
  #barra #busca { flex:0 0 36px; padding:7px 5px; }
  #barra #busca:focus, #barra #busca:not(:placeholder-shown) { position:absolute; left:8px; right:8px; top:7px; width:calc(100vw - 16px);
    max-width:none; z-index:3; box-shadow:0 0 0 3px #0b0d10; }
}