/* Web radar CS2: mapa + markery graczy. Kolory wyłącznie z tokenów motywu (`tokens.css`). */

.radar-stage {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid rgb(var(--line-rgb) / 0.5);
  border-radius: var(--r-card);
  background: rgb(var(--surface-rgb) / 0.55);
  overflow: hidden;
}

.radar-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

/* Środek markera = pozycja gracza; `left`/`top` dostają procenty z `world_to_percent`. */
.radar-mark {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
  font-size: var(--fs-xs);
  color: var(--text);
  pointer-events: none;
  /* Snapshoty lecą co ~250 ms — interpolacja udaje płynny ruch. */
  transition: left 250ms linear, top 250ms linear;
}

.radar-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 11px solid var(--muted);
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.65));
}

.radar-name {
  padding: 0 4px;
  border-radius: 4px;
  background: rgb(var(--bg-rgb) / 0.7);
  white-space: nowrap;
}

.radar-mark.t .radar-arrow { border-bottom-color: #e0a63a; }
.radar-mark.ct .radar-arrow { border-bottom-color: #4a90e2; }
.radar-mark.other .radar-arrow { border-bottom-color: var(--muted); }

.radar-mark.you .radar-arrow { border-bottom-color: var(--accent); }
.radar-mark.you .radar-name {
  color: var(--accent);
  font-weight: 600;
}

.radar-mark.dead {
  opacity: 0.35;
}