html, body { margin: 0; height: 100%; font-family: "Segoe UI", Arial, sans-serif; background: #3a3f44; }
#vista { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
#mapa { position: absolute; inset: 0; background: #3a3f44; }

/* Fundo transparente para o vMix (?fundo=transparente) */
body.transparente, body.transparente #mapa { background: transparent !important; }
body.solido #mapa { background: #3a3f44; }

.painel {
  position: absolute; top: 10px; right: 10px; z-index: 1000;
  background: rgba(255,255,255,.92); border-radius: 6px; padding: 6px 10px;
  display: flex; gap: 10px; align-items: center; font-size: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
body.semui .painel, body.semui .zoom { display: none; }

/* Zoom e créditos fora do mapa: com o mapa girado, os cantos dele ficam fora da tela. */
.zoom {
  position: absolute; top: 10px; left: 10px; z-index: 1000; display: flex; flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,.3); border-radius: 4px; overflow: hidden;
}
.zoom button {
  width: 32px; height: 32px; border: none; border-bottom: 1px solid #ccc; background: #fff;
  font: bold 18px/1 Arial, sans-serif; cursor: pointer; padding: 0;
}
.zoom button:last-child { border-bottom: none; }
.zoom button:hover { background: #f0f0f0; }
.atrib {
  position: absolute; right: 0; bottom: 0; z-index: 1000; font-size: 11px;
  background: rgba(255,255,255,.75); padding: 1px 5px; color: #333;
}
.atrib a { color: #0078a8; text-decoration: none; }
body.solido .atrib, body.transparente .atrib { display: none; }

.aviso {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1000;
  background: rgba(0,0,0,.7); color: #fff; padding: 4px 10px; border-radius: 4px;
  font-size: 13px; display: none;
}

/* Bandeira da pista (GIF animado) no canto superior direito; abaixo do painel quando ele aparece. */
.bgl {
  position: absolute; right: 10px; top: 10px; z-index: 1001; display: none;
  width: clamp(64px, 12vmin, 160px); height: auto; pointer-events: none;
}
body:not(.semui) .bgl { top: 56px; }

/* Trecho com bandeira de posto: amarela fixa; double yellow piscando. */
.trecho-pisca { animation: pisca .8s steps(1, end) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

/* Nome e extensão da pista (canto inferior esquerdo) */
.info {
  position: absolute; left: 6px; bottom: 6px; z-index: 1000; display: none;
  background: rgba(0,0,0,.65); color: #fff; padding: 2px 8px; border-radius: 3px;
  font-size: calc(13px * var(--esc, 1)); font-weight: 600;
}

/* Apontamentos: linha de cronometragem, curva, posto de sinalização */
.ap { background: none; border: none; }
.ap .barra {
  position: absolute; left: 0; top: 0; height: max(2px, calc(3px * var(--esc, 1)));
  background: #ffcd00; border-radius: 2px; transform-origin: 0 50%;
}
.ap .aptxt {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 700; line-height: 1;
  color: #fff; font-size: calc(12px * var(--esc, 1));
  text-shadow: 0 0 3px #000, 0 0 2px #000, 0 0 1px #000;
}
.ap .aptxt.centro { transform: translate(-50%, -50%); }
.ap .aptxt.linha { color: #ffcd00; }
.ap .seta { position: absolute; left: 0; top: 0; height: calc(10px * var(--esc, 1)); }
.ap .seta svg { display: block; width: 100%; height: 100%; }

/* Posto: retângulo laranja em volta do nome. Curva: círculo escuro com borda branca em volta do número. */
.ap .aptxt.ps {
  color: #141414; text-shadow: none; background: #ff7800; border: 1px solid #1e1e1e;
  padding: calc(1px * var(--esc, 1)) calc(2px * var(--esc, 1)); font-size: calc(11px * var(--esc, 1));
}
.ap .aptxt.curva {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: calc(20px * var(--esc, 1)); height: calc(20px * var(--esc, 1)); padding: 0 calc(3px * var(--esc, 1));
  border-radius: calc(10px * var(--esc, 1)); background: rgba(25,25,25,.85); border: 1.5px solid #fff; text-shadow: none;
}

/* Veículos */
.veic { background: none; border: none; }
/* Com o mapa girado, o carro gira ao contrário para o número ficar em pé. */
.veic .gira, .ap .gira { position: absolute; left: 0; top: 0; transform: rotate(calc(-1 * var(--rot, 0deg))); }
/* --esc = tamanho dos carros (1 = padrão: bolinha de 24 px), vem do app ou de ?tam= */
.veic .corpo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: calc(12px * var(--esc, 1)); line-height: 1; white-space: nowrap;
  border: max(1px, calc(1.5px * var(--esc, 1))) solid rgba(20,20,20,.9); box-sizing: border-box;
}
.veic .bola {
  border-radius: 50%; min-width: calc(24px * var(--esc, 1)); height: calc(24px * var(--esc, 1));
  padding: 0 calc(3px * var(--esc, 1));
}
.veic .quad { min-width: calc(22px * var(--esc, 1)); height: calc(20px * var(--esc, 1)); padding: 0 calc(4px * var(--esc, 1)); }
/* Caixa da velocidade com a mesma altura do carro (bolinha 24 px, quadrado 20 px, × --esc). */
.veic .vel {
  display: none; position: absolute; left: calc(50% + 15px); top: 50%; transform: translateY(-50%);
  height: calc(24px * var(--esc, 1)); box-sizing: border-box; align-items: center;
  background: rgba(0,0,0,.75); color: #fff; font-size: calc(11px * var(--esc, 1)); font-weight: 700; line-height: 1;
  padding: 0 calc(3px * var(--esc, 1)); border-radius: 2px; white-space: nowrap;
}
.veic .quad + .vel { height: calc(20px * var(--esc, 1)); font-size: calc(10px * var(--esc, 1)); }
body.comvel .veic .vel { display: flex; }
.veic.velho { opacity: .35; }