.radar-board {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  background-color: #1c211e;
  aspect-ratio: 1 / 1;
  width: min(100%, 680px);
  min-height: 0;
  margin-inline: auto;
}

.radar-map-image {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  opacity: 0.94;
  filter: saturate(0.94) contrast(1.04);
}

.radar-board[data-radar-has-image="1"] .radar-map-image {
  display: block;
}

.radar-board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 10% 10%,
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 10% 10%,
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12), transparent 58%);
  mix-blend-mode: soft-light;
}

.radar-board[data-radar-has-image="1"]::before {
  opacity: 0.32;
}

.radar-board[data-radar-map="nuke"] {
  background:
    radial-gradient(circle at 26% 25%, rgba(112, 184, 214, 0.36), transparent 23%),
    radial-gradient(circle at 69% 35%, rgba(216, 100, 76, 0.24), transparent 20%),
    linear-gradient(135deg, #283943, #182229 58%, #11191f);
}

.radar-board[data-radar-map="mirage"] {
  background:
    radial-gradient(circle at 70% 24%, rgba(217, 169, 92, 0.4), transparent 22%),
    radial-gradient(circle at 25% 75%, rgba(95, 129, 189, 0.22), transparent 24%),
    linear-gradient(135deg, #5b4a37, #2f3b3c 55%, #1c2424);
}

.radar-board[data-radar-map="inferno"] {
  background:
    radial-gradient(circle at 71% 25%, rgba(214, 106, 61, 0.4), transparent 21%),
    radial-gradient(circle at 28% 29%, rgba(118, 169, 112, 0.22), transparent 20%),
    linear-gradient(135deg, #57332a, #29211d 58%, #181413);
}

.radar-board[data-radar-map="dust2"] {
  background:
    radial-gradient(circle at 74% 23%, rgba(215, 173, 99, 0.42), transparent 24%),
    radial-gradient(circle at 26% 64%, rgba(95, 145, 181, 0.24), transparent 22%),
    linear-gradient(135deg, #625139, #30291e 60%, #1d1915);
}

.radar-board[data-radar-map="ancient"] {
  background:
    radial-gradient(circle at 44% 48%, rgba(106, 164, 106, 0.34), transparent 26%),
    radial-gradient(circle at 72% 27%, rgba(193, 164, 79, 0.28), transparent 21%),
    linear-gradient(135deg, #263d2b, #1c2b21 58%, #131b17);
}

.radar-board[data-radar-map="anubis"] {
  background:
    radial-gradient(circle at 46% 56%, rgba(85, 164, 166, 0.34), transparent 25%),
    radial-gradient(circle at 74% 23%, rgba(212, 168, 90, 0.34), transparent 20%),
    linear-gradient(135deg, #5d4d34, #27383a 56%, #171d20);
}

.radar-board[data-radar-map="overpass"] {
  background:
    radial-gradient(circle at 34% 56%, rgba(106, 161, 125, 0.36), transparent 25%),
    radial-gradient(circle at 70% 22%, rgba(111, 143, 184, 0.26), transparent 21%),
    linear-gradient(135deg, #243d34, #222c2d 60%, #151a1b);
}

.radar-board[data-radar-map="vertigo"] {
  background:
    radial-gradient(circle at 69% 25%, rgba(196, 148, 82, 0.4), transparent 24%),
    radial-gradient(circle at 30% 61%, rgba(110, 143, 166, 0.28), transparent 22%),
    linear-gradient(135deg, #4a4740, #2b3032 58%, #191c1e);
}

.radar-board[data-radar-has-image="1"] {
  background:
    linear-gradient(180deg, rgba(13, 15, 13, 0.04), rgba(13, 15, 13, 0.08)),
    #161916;
}

.radar-layer,
.radar-lines,
.radar-player-points,
.radar-vignette,
.radar-sweep {
  position: absolute;
  inset: 0;
}

.radar-layer,
.radar-lines,
.radar-player-points {
  z-index: 2;
}

.radar-regions {
  pointer-events: none;
}

.radar-lines {
  z-index: 3;
}

.radar-player-points {
  z-index: 5;
  pointer-events: none;
}

.radar-board[data-radar-has-image="1"] .radar-map-image,
.radar-board[data-radar-has-image="1"] .radar-layer,
.radar-board[data-radar-has-image="1"] .radar-lines,
.radar-board[data-radar-has-image="1"] .radar-player-points,
.radar-board[data-radar-has-image="1"] .dynamic-trail-lines,
.radar-board[data-radar-has-image="1"] .dynamic-utility-layer,
.radar-board[data-radar-has-image="1"] .dynamic-observation-layer,
.radar-board[data-radar-has-image="1"] .dynamic-kill-lines,
.radar-board[data-radar-has-image="1"] .dynamic-event-layer,
.radar-board[data-radar-has-image="1"] .dynamic-actor-layer {
  right: auto;
  bottom: auto;
  left: var(--radar-plane-left, 0);
  top: var(--radar-plane-top, 0);
  width: var(--radar-plane-width, 100%);
  height: var(--radar-plane-height, 100%);
}

.radar-sweep {
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    conic-gradient(from -35deg at 50% 50%, rgba(126, 255, 198, 0.2), transparent 18%, transparent 100%),
    radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(255, 255, 255, 0.08) 58.4%, transparent 59%);
  animation: none;
  transform-origin: 50% 50%;
}

.radar-vignette {
  z-index: 6;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 80px rgba(0, 0, 0, 0.38);
}

.radar-region {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 248, 230, 0.92);
  background: rgba(20, 26, 24, 0.34);
  text-align: center;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.04), 0 14px 34px rgba(0, 0, 0, 0.16);
}

.radar-region span {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.radar-region::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  border: 1px dashed rgba(255, 255, 255, 0.18);
}

.radar-region.is-major {
  border-width: 2px;
  box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.08), 0 18px 42px rgba(0, 0, 0, 0.22);
}

.radar-tone-a { --radar-tone: #d88f45; }
.radar-tone-b { --radar-tone: #5f81bd; }
.radar-tone-mid { --radar-tone: #4a9b72; }
.radar-tone-site { --radar-tone: #d8644c; }
.radar-tone-danger { --radar-tone: #d45a42; }
.radar-tone-rotate { --radar-tone: #c4a35a; }
.radar-tone-info { --radar-tone: #65b7c7; }
.radar-tone-anchor { --radar-tone: #b8c06a; }
.radar-tone-spawn { --radar-tone: #8b8f9c; }
.radar-tone-neutral { --radar-tone: #a89982; }

.radar-region[class*="radar-tone-"] {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--radar-tone) 18%, transparent), rgba(20, 26, 24, 0.3)),
    rgba(20, 26, 24, 0.28);
  border-color: color-mix(in srgb, var(--radar-tone) 62%, rgba(255, 255, 255, 0.2));
}

.radar-lane {
  fill: none;
  stroke: var(--radar-tone, #d88f45);
  stroke-width: var(--lane-width, 3);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12 7;
  opacity: 0.82;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--radar-tone, #d88f45) 75%, transparent));
}

.radar-lane-glow {
  opacity: 0.2;
  stroke-dasharray: none;
  filter: blur(1px);
}

.radar-player-route {
  fill: none;
  stroke: rgba(255, 231, 132, 0.96);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 5px rgba(255, 214, 91, 0.58));
}

.radar-callout {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(255, 248, 230, 0.94);
  background: rgba(10, 13, 12, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(8px);
}

.radar-callout i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--callout-color, #65b7c7);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--callout-color, #65b7c7) 22%, transparent);
}

.radar-callout-contact { --callout-color: #ff9b55; }
.radar-callout-danger { --callout-color: #f06255; }
.radar-callout-rotate { --callout-color: #e0c76a; }
.radar-callout-anchor { --callout-color: #b7d06b; }
.radar-callout-utility { --callout-color: #79c6ff; }
.radar-callout-info { --callout-color: #63d0c7; }

.radar-heat {
  position: absolute;
  z-index: 2;
  width: calc(20px + (var(--heat-weight, 1) * 13px));
  height: calc(20px + (var(--heat-weight, 1) * 13px));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--heat-core, rgba(255, 210, 80, 0.98)) 0%, var(--heat-mid, rgba(255, 140, 50, 0.6)) 46%, transparent 72%);
  opacity: var(--heat-opacity, 0.9);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 频率分级：越频繁越红越实，越少越偏冷越淡（位置热力图）。 */
.radar-weight-1 { --heat-weight: 1; --heat-opacity: 0.55; --heat-core: rgba(120, 200, 255, 0.85); --heat-mid: rgba(80, 150, 230, 0.45); }
.radar-weight-2 { --heat-weight: 2; --heat-opacity: 0.78; --heat-core: rgba(170, 235, 120, 0.92); --heat-mid: rgba(120, 200, 80, 0.5); }
.radar-weight-3 { --heat-weight: 3; --heat-opacity: 0.9;  --heat-core: rgba(255, 212, 78, 0.98); --heat-mid: rgba(255, 150, 50, 0.62); }
.radar-weight-4 { --heat-weight: 4; --heat-opacity: 1;    --heat-core: rgba(255, 92, 60, 1);      --heat-mid: rgba(255, 138, 44, 0.72); }

/* 道具落点（道具雷达图）：按类型着色的小点。 */
.utility-dot {
  position: absolute;
  z-index: 3;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--util-color, #ffce5e);
  border: 1.5px solid rgba(8, 12, 18, 0.55);
  box-shadow: 0 0 7px var(--util-color, #ffce5e);
  pointer-events: auto;
}
.utility-map-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.util-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #cdd6e0;
}
.util-legend i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 5px currentColor;
}

.radar-player-dot {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: #f3c54d;
  border-color: rgba(255, 255, 255, 0.84);
  color: #1d1810;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 0 0 3px rgba(243, 197, 77, 0.16), 0 8px 16px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}

.radar-player-dot.is-start {
  background: #73d58d;
}

.radar-player-dot.is-end {
  background: #ff775f;
  color: #fff;
}

.radar-point-tag {
  display: none;
}

.radar-legend {
  gap: 8px;
}

.radar-legend-chip {
  color: inherit;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--chip-color) 18%, transparent), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.08);
}

.radar-legend-chip i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--chip-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--chip-color) 20%, transparent);
}

.map-stay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.map-stay-card,
.map-analysis-card {
  border-color: rgba(214, 169, 92, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 232, 164, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.72);
}

@keyframes radarSweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  .radar-region span,
  .radar-callout {
    font-size: 10px;
  }

  .radar-callout {
    padding: 4px 6px;
  }

  .radar-player-dot {
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    font-size: 10px;
  }
}