/* O mapa do Ao vivo (aovivo-mapa.js): os marcadores, os rótulos, as réguas, o teclado, o cartão e a entrada. Fica fora
   do index.html porque a página da foto do Discord (render.html) usa as mesmas regras (23/10). */
.avm-tela { position: relative; height: min(76vh, 820px); overflow: hidden; border: 1px solid var(--linha); border-radius: 6px; background: #111; --flag: 20px; --ppm: 1; }
.avm-leaflet { position: absolute; inset: 0; z-index: 0; }
.avm-leaflet.leaflet-container { background: #111; font: inherit; cursor: grab; }
.avm-leaflet.leaflet-container.leaflet-drag-target, .avm-leaflet .leaflet-dragging { cursor: grabbing; }
/* Os marcadores do SquadCalc (mapObjectives.scss), com o tamanho em --flag: 30 px lá, de 20 a 30 aqui conforme o zoom. */
.avm-mk { overflow: visible; }
.avm-b, .avm-main, .avm-spawn { cursor: pointer; }
.avm-vaga, .avm-dist { pointer-events: none; }
.avm-f { position: absolute; left: 0; top: 0; display: grid; place-items: center; box-sizing: border-box; width: var(--flag); height: var(--flag); margin: calc(var(--flag) / -2) 0 0 calc(var(--flag) / -2); border-radius: 50%; background: rgba(255,255,255,.4); outline: calc(var(--flag) / 10) solid rgb(104,104,104); box-shadow: 0 8px 12px rgba(0,0,0,.75); color: #fff; font: 600 calc(var(--flag) * .52) / 1 Montserrat, sans-serif; text-shadow: 1px 1px 0 #111, -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 0 1px 0 #111, 0 -1px 0 #111, 1px 0 0 #111, -1px 0 0 #111; white-space: nowrap; transition: opacity .25s; }
.avm-f.flag2 { background: rgba(0,255,0,.2); outline-color: rgb(68,255,68); } .avm-f.flag3 { background: rgba(0,0,255,.2); outline-color: rgb(0,0,255); }
.avm-f.flag4 { background: rgba(255,255,0,.2); outline-color: rgb(255,255,0); } .avm-f.flag5 { background: rgba(43,255,255,.2); outline-color: rgb(43,255,255); }
.avm-f.flag6 { background: rgba(200,48,102,.2); outline-color: rgb(200,48,102); } .avm-f.flag7 { background: rgba(255,105,0,.2); outline-color: rgb(255,105,0); }
.avm-f.next { background: rgb(197,0,0); outline-color: rgb(143,0,0); } .avm-f.selected { background: rgb(0,128,0); outline-color: rgb(0,90,0); }
.avm-f.multiPos { font-size: calc(var(--flag) * .44); } .avm-f.multiPosMany { font-size: calc(var(--flag) * .32); letter-spacing: -.03em; }
.avm-b:is(:hover, .realce, .foco) .avm-f, .avm-main:hover .avm-f { box-shadow: 0 2px 12px #000; }
.avm-nm, .avm-pc { position: absolute; left: 0; color: #fff; font: 600 calc(var(--flag) * .4) / 1 Roboto, sans-serif; letter-spacing: .02em; text-shadow: 1px 1px 0 #111, -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 0 1px 0 #111, 0 -1px 0 #111, 1px 0 0 #111, -1px 0 0 #111; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%); transition: opacity .25s; }
.avm-nm { top: calc(var(--flag) * -.94); } .avm-pc { top: calc(var(--flag) * .94); }
.avm-b.apagada { opacity: .15; }
.avm-b.foco :is(.avm-nm, .avm-pc) { opacity: 0; }
.avm-mainf { background: rgba(255,255,255,.4) center / cover no-repeat; outline: 2px solid rgb(58,58,58); }
.avm-main.inicio .avm-mainf { outline: 3px solid rgb(0,90,0); }
.avm-tenda { position: absolute; left: 0; top: 0; width: calc(var(--flag) * 1.33); height: calc(var(--flag) * 1.33); margin: calc(var(--flag) * -.665) 0 0 calc(var(--flag) * -.665); }
.avm-vaga img { position: absolute; left: 0; top: 0; }
.avm-dist div { position: absolute; left: 0; top: 0; color: #fff; font: 600 12px Montserrat, sans-serif; text-shadow: 1px 1px 0 #111, -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111; white-space: nowrap; }
.avm-dist.curta { display: none; }
.avm-regua { position: absolute; z-index: 1; color: #fff; font: 700 13px Oswald; text-shadow: 1px 1px 0 #111, -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 0 1px 0 #111, 0 -1px 0 #111, 1px 0 0 #111, -1px 0 0 #111; pointer-events: none; }
.avm-regua.x { top: 3px; left: 0; right: 0; height: 16px; } .avm-regua.x span { position: absolute; transform: translateX(-50%); }
.avm-regua.y { top: 0; bottom: 0; left: 5px; width: 22px; } .avm-regua.y span { position: absolute; transform: translateY(-50%); }
/* O teclado sob o cursor (o kpPopup do SquadCalc). */
.avm-kp { position: absolute; z-index: 2; color: #fff; font: 600 15px Montserrat, sans-serif; text-shadow: 1px 1px 0 #111, -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 0 0 3px #111; white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
.avm-kp[hidden] { display: none; } .avm-kp .sub { font-size: .65em; letter-spacing: .05em; }
.avm-zoom { position: absolute; z-index: 1; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.avm-zoom button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--linha); border-radius: 4px; background: rgba(13,13,14,.88); color: var(--neve); font: 500 20px Oswald; }
.avm-zoom button:hover { border-color: var(--areia); }
.avm-zoom button[aria-pressed="true"] { border-color: var(--sangue); color: var(--neve); }
.avm-zoom svg { width: 18px; height: 18px; }
/* O cartão da bandeira (o laneInfo do SquadCalc). */
.avm-card { position: absolute; z-index: 3; width: max-content; min-width: 140px; max-width: 260px; padding: 10px 14px; border-radius: 8px; background: rgba(30,30,30,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0,0,0,.25); color: #fff; font: 600 12px Roboto, sans-serif; pointer-events: none; transform: translate(-50%, calc(-100% - 8px)); }
.avm-card.baixo { transform: translate(-50%, 8px); }
.avm-card[hidden] { display: none; }
.avm-card img { display: block; width: 100%; margin-bottom: 8px; border-radius: 4px; }
.avm-card .tit { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.15); }
.avm-card .tit b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.avm-card .tot { margin-left: auto; padding: 1px 8px; border-radius: 10px; background: rgb(207,106,12); font-size: 9.6px; font-weight: 700; }
.avm-card .lin { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.avm-card .rotas { display: flex; gap: 3px; } .avm-card .rotas i { padding: 1px 7px; border-radius: 10px; color: #fff; font-style: normal; font-weight: 700; font-size: 10px; }
.avm-card .pos { color: rgb(210,210,210); font-size: 10.8px; } .avm-card .pc { margin-left: auto; color: #ffd479; font-weight: 700; }
.avm-card .rod { margin-top: 6px; color: rgb(210,210,210); font-size: 11px; } .avm-card em { color: #f55; font-style: normal; }
/* Nomes recolhidos: somem só os nomes das bandeiras que não são tomadas nem próximas; o círculo, o número e a chance ficam. */
.avm-tela.recolhido .avm-b:not(.prox, .tomada) .avm-nm { display: none; }
.avm-tela:not(.pode) .avm-b { cursor: help; }
/* O mapa assenta e as bandeiras do primeiro desenho surgem por profundidade (aovivo-mapa.js). */
/* Até a imagem do mapa chegar, o quadro fica com o brilho do esqueleto. */
.avm-tela.carregando { background: linear-gradient(100deg, var(--lona) 40%, var(--lona2) 50%, var(--lona) 60%) 100% 0 / 300% 100%; animation: brilha-esq 1.4s linear infinite; }
.avm-tela.carregando :is(.avm-leaflet, .avm-regua, .avm-zoom) { opacity: 0; pointer-events: none; }
.avm-tela.chega .avm-leaflet { animation: assenta .5s var(--curva) backwards; }
@keyframes assenta { from { opacity: 0; scale: 1.03; } }
.avm-surge :is(.avm-f, .avm-nm, .avm-pc) { animation: surge .3s var(--curva) backwards; animation-delay: var(--d, 0ms); }
@keyframes surge { from { opacity: 0; scale: .4; } }