/* ===== 雷達搜尋頁（升級版） ===== */
.radar-body {
  background: radial-gradient(circle at center, #0d2818 0%, #051208 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* 地圖底圖網格 */
.map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(92,184,92,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,184,92,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
}

/* 地圖街道暗示 */
.map-streets {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.street {
  position: absolute;
  background: rgba(92,184,92,0.07);
}
.street.h1 { top: 18%; left: 0; right: 0; height: 3px; }
.street.h2 { top: 52%; left: 0; right: 0; height: 5px; background: rgba(92,184,92,0.1); }
.street.h3 { top: 82%; left: 0; right: 0; height: 2px; }
.street.v1 { left: 15%; top: 0; bottom: 0; width: 2px; }
.street.v2 { left: 48%; top: 0; bottom: 0; width: 5px; background: rgba(92,184,92,0.1); }
.street.v3 { left: 80%; top: 0; bottom: 0; width: 3px; }

.radar-container {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #b8f5b8;
  padding: 20px;
}

.radar-title {
  font-size: 32px;
  font-weight: 900;
  color: #d8ffd8;
  margin-bottom: 8px;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(92,255,92,0.5);
}
.radar-status {
  font-size: 14px;
  color: rgba(184, 245, 184, 0.75);
  margin-bottom: 30px;
  letter-spacing: 2px;
}
.status-prefix {
  display: inline-block;
  animation: pingIcon 1.5s ease-in-out infinite;
}
@keyframes pingIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.radar {
  position: relative;
  width: 360px;
  height: 360px;
  margin: 0 auto 30px;
  animation: radarShake 4s ease-in-out infinite;
}
@keyframes radarShake {
  0%, 92%, 100% { transform: translate(0,0); }
  93% { transform: translate(-1px, 1px); }
  95% { transform: translate(1px, -1px); }
  97% { transform: translate(-1px, -1px); }
}

/* 同心圓 */
.radar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid rgba(92, 184, 92, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.r1 { width: 100%; height: 100%; border-color: rgba(92,184,92,0.2); }
.r2 { width: 75%;  height: 75%;  }
.r3 { width: 50%;  height: 50%;  }
.r4 { width: 25%;  height: 25%;  border-color: rgba(92, 184, 92, 0.5); }

/* 十字線 */
.radar::before, .radar::after {
  content: "";
  position: absolute;
  background: rgba(92, 184, 92, 0.2);
}
.radar::before {
  top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%);
}
.radar::after {
  left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
}

/* 掃描扇形 - 漸快 */
.radar-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform-origin: 0 0;
  background: conic-gradient(
    from 0deg,
    rgba(92, 255, 92, 0.7) 0deg,
    rgba(92, 255, 92, 0.35) 15deg,
    rgba(92, 255, 92, 0.08) 50deg,
    transparent 90deg
  );
  border-radius: 100% 0 0 0;
  animation: sweep 1.5s linear infinite;
  filter: blur(1px);
}
@keyframes sweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 中心點 */
.radar-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #5cb85c, #3a8c3a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(92, 255, 92, 0.7), inset 0 0 15px rgba(0,0,0,0.2);
  z-index: 5;
  animation: coreShake 0.3s ease-in-out infinite;
}
@keyframes coreShake {
  0%, 100% { transform: translate(calc(-50% + 0px), calc(-50% + 0px)); }
  25% { transform: translate(calc(-50% + 0.5px), calc(-50% - 0.5px)); }
  75% { transform: translate(calc(-50% - 0.5px), calc(-50% + 0.5px)); }
}
.core-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.core-pulse {
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(92, 255, 92, 0.5);
  border-radius: 50%;
  animation: corePulse 1.8s ease-out infinite;
}
@keyframes corePulse {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(2.5);  opacity: 0; }
}

/* 訊號點脈衝（JS 動態生成） */
.signals { position: absolute; inset: 0; }
.signal {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #5cff5c;
  border-radius: 50%;
  box-shadow: 0 0 12px #5cff5c;
  z-index: 3;
  transform: translate(-50%, -50%) scale(0);
  animation: signalAppear 0.4s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes signalAppear {
  0%   { transform: translate(-50%, -50%) scale(0); }
  60%  { transform: translate(-50%, -50%) scale(1.4); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.signal::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid #5cff5c;
  border-radius: 50%;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(4.5); opacity: 0; }
}

/* 收尾閃光 */
.finish-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.95), transparent 60%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.finish-flash.fire {
  animation: flashOut 0.8s ease-out forwards;
}
@keyframes flashOut {
  0%   { opacity: 0; transform: scale(0.3); }
  40%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(2); }
}

/* 偵測資訊 */
.detect-info {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 20px 0;
  flex-wrap: wrap;
}
.detect-count {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.count-num {
  font-size: 36px;
  font-weight: 900;
  color: #5cff5c;
  text-shadow: 0 0 15px rgba(92,255,92,0.6);
  font-family: "SF Mono", monospace;
  min-width: 40px;
  display: inline-block;
  transition: transform 0.2s;
}
.count-num.bump { animation: numBump 0.3s ease; }
@keyframes numBump {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); color: #fff; }
  100% { transform: scale(1); }
}
.count-label {
  font-size: 14px;
  color: rgba(184,245,184,0.6);
  letter-spacing: 1px;
}
.detect-distance {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  color: rgba(184,245,184,0.7);
}
.detect-distance strong {
  color: #5cff5c;
  font-size: 18px;
  font-family: "SF Mono", monospace;
  margin: 0 2px;
}

/* 進度條 */
.progress-bar {
  width: 280px;
  height: 4px;
  background: rgba(92, 184, 92, 0.15);
  border-radius: 2px;
  margin: 20px auto 0;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #5cb85c, #5cff5c);
  border-radius: 2px;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px #5cff5c;
}
.progress-fill::after {
  content: "";
  position: absolute;
  top: -2px; right: -2px;
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 12px #5cff5c;
}

@media (max-width: 480px) {
  .radar { width: 280px; height: 280px; }
  .radar-title { font-size: 26px; letter-spacing: 3px; }
  .count-num { font-size: 30px; }
}