:root {
  --bg: #030611;
  --panel: #070d1d;
  --dot: #2a3f95;
  --route: #f8f9ff;
  --label: #f5f7ff;
  --tag: #54b8ef;
  --hub: #2fc15a;
  --glow: rgba(47, 193, 90, 0.5);
}
* {
  box-sizing: border-box;
}
.map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4555.53 / 2777.76;
  overflow: hidden;
  background: #18234e;
  
}

.map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.72;
  filter: saturate(1.25) contrast(1.08);
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.route {
  fill: none;
  stroke: var(--route);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 6 9;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
  animation: flow 2.6s linear infinite;
}

.route.route-soft {
  opacity: 0.32;
  stroke-width: 4.2;
  stroke-dasharray: 0;
  animation: none;
}

@keyframes flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -70; }
}

.marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

.pin {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #18234e;
  border: 2px solid white;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}

.pulse {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.62);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.82;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.hub {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #a6ffbe, #46cf6d 42%, #2cad53 68%, #209746 100%);
  box-shadow:
    0 0 0 4px var(--glow),
    0 0 10px var(--glow);
  animation: hubBeat 2.8s ease-in-out infinite;
}

@keyframes hubBeat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}

.city {
  position: absolute;
  transform: translate(-50%, calc(-100% - 18px));
  color: var(--label);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.city.hub-label {
  transform: translate(-50%, -130%);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.tag {
  position: absolute;
  transform: translate(13px, -50%);
  white-space: nowrap;
  background: linear-gradient(130deg, #66c8ff, #48a8de);
  color: white;
  font-size: 8px;
  line-height: 1;
  padding: 2px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(42, 151, 219, 0.35);
  opacity: 0.95;
  pointer-events: none;
}

.move-dot {
  fill: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.75));
}

.legend {
  position: absolute;
  right: 14px;
  top: 12px;
  background: rgba(3, 8, 19, 0.62);
  border: 1px solid rgba(120, 160, 255, 0.18);
  backdrop-filter: blur(4px);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #c6daff;
}

.legend b {
  color: white;
  letter-spacing: 0.03em;
  font-size: 0.8rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .page {
    width: min(100%, 98vw);
    margin: 8px auto;
    padding: 8px;
    border-radius: 14px;
  }

  .title {
    margin: 4px 6px 10px;
    gap: 8px;
  }

  .title h1 {
    font-size: clamp(1rem, 4.2vw, 1.28rem);
    letter-spacing: 0.05em;
  }

  .title span {
    font-size: 0.76rem;
  }

  .map-wrap {
    border-radius: 12px;
  }

  .route {
    stroke-width: 2.1;
    stroke-dasharray: 5 8;
  }

  .route.route-soft {
    stroke-width: 3.2;
  }

  .pin {
    width: 13px;
    height: 13px;
    border-width: 1.5px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
  }

  .pulse {
    width: 26px;
    height: 26px;
    border-width: 1.5px;
  }

  .hub {
    width: 8px;
  }

  .city {
    transform: translate(-50%, calc(-100% - 13px));
    font-size: 9px;
  }

  .city.hub-label {
    font-size: 10px;
  }

  .tag {
    transform: translate(10px, -50%);
    font-size: 7px;
    padding: 2px 4px;
  }
}

@media (max-width: 560px) {
  .page {
    width: 100%;
    margin: 0;
    padding: 6px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .title {
    margin: 2px 4px 8px;
  }

  .title h1 {
    font-size: 0.9rem;
  }

  .title span {
    display: none;
  }

  .route {
    stroke-width: 1.8;
  }

  .route.route-soft {
    stroke-width: 2.8;
  }

  .pin {
    width: 11px;
    height: 11px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
  }

  .pulse {
    width: 22px;
    height: 22px;
  }

  .hub {
    width: 7px;
  }

  .city {
    transform: translate(-50%, calc(-100% - 10px));
    font-size: 8px;
  }

  .city.hub-label {
    font-size: 9px;
  }

  .tag {
    transform: translate(8px, -50%);
    font-size: 6px;
    padding: 1px 3px;
  }
}