/* 悬停省份数字：底座 + 数字响应式，不超过固有尺寸 */
.dist-map-num {
  --dist-base-w: 180px;
  --dist-num-w: 58px;
  --dist-num-lift: 58px;
  transition: opacity 0.2s ease;
}

.dist-map-num.is-show {
  opacity: 1 !important;
}

/* 固定落在地图右侧空白区（不跟随鼠标） */
.dist-map-num--slot {
  left: auto;
  right: 18%;
  top: 56%;
  transform: translateY(-58%);
}

/* 大屏：落在海岸线与右侧统计之间的空隙（PC 维持） */
@media (min-width: 1536px) {
  .dist-map-num--slot {
    right: 29%;
    top: 58%;
    transform: translateY(-55%);
  }
}

@media (min-width: 1280px) and (max-width: 1535px) {
  .dist-map-num--slot {
    right: 16%;
    top: 56%;
  }
}

/* lg 不调，沿用默认 */

/* md */
@media (max-width: 1023px) {
  .dist-map-num--slot {
    right: 14%;
    top: 62%;
  }
}

.dist-map-num__stage {
  position: relative;
  display: inline-block;
  line-height: 0;
  min-width: var(--dist-base-w);
}

/* 光台：黑底 screen 混色，宽度随断点缩小（静态，无动画） */
.dist-map-num__base {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: var(--dist-base-w);
  max-width: var(--dist-base-w);
  height: auto;
  transform: translateX(-50%);
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
}

/* 数字组：按位并排，整体上移并轻晃 */
.dist-map-num__value {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin: 0 auto;
  transform: translateY(calc(var(--dist-num-lift) * -1));
  transform-origin: center bottom;
  filter: drop-shadow(0 3px 8px rgba(34, 217, 237, 0.25));
  transition: opacity 0.22s ease;
  will-change: transform;
}

.dist-map-num__digit {
  display: block;
  width: var(--dist-num-w);
  max-width: var(--dist-num-w);
  height: auto;
  flex-shrink: 0;
}

/* 多位数字略重叠，更紧凑 */
.dist-map-num__digit + .dist-map-num__digit {
  margin-left: calc(var(--dist-num-w) * -0.12);
}

/* 两位及以上时底座略加宽 */
.dist-map-num[data-digits="2"] .dist-map-num__base {
  width: calc(var(--dist-base-w) * 1.15);
  max-width: calc(var(--dist-base-w) * 1.15);
}

.dist-map-num[data-digits="3"] .dist-map-num__base,
.dist-map-num[data-digits="4"] .dist-map-num__base {
  width: calc(var(--dist-base-w) * 1.35);
  max-width: calc(var(--dist-base-w) * 1.35);
}

.dist-map-num.is-show .dist-map-num__value {
  animation: dist-map-num-float 2s ease-in-out infinite;
}

.dist-map-num.is-show .dist-map-num__value.is-pop {
  animation:
    dist-map-num-pop 0.28s ease,
    dist-map-num-float 2s ease-in-out 0.28s infinite;
}

@keyframes dist-map-num-pop {
  0% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

@keyframes dist-map-num-float {
  0%,
  100% {
    transform: translateY(calc(var(--dist-num-lift) * -1));
  }
  50% {
    transform: translateY(calc(var(--dist-num-lift) * -1 - 16px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dist-map-num.is-show .dist-map-num__value,
  .dist-map-num.is-show .dist-map-num__value.is-pop {
    animation: none;
  }
}

/* xl：再缩小一档 */
@media (max-width: 1535px) {
  .dist-map-num {
    --dist-base-w: 132px;
    --dist-num-w: 42px;
    --dist-num-lift: 44px;
  }
}

/* lg */
@media (max-width: 1279px) {
  .dist-map-num {
    --dist-base-w: 112px;
    --dist-num-w: 36px;
    --dist-num-lift: 36px;
  }
}

/* md（地图起始显示） */
@media (max-width: 1023px) {
  .dist-map-num {
    --dist-base-w: 92px;
    --dist-num-w: 30px;
    --dist-num-lift: 30px;
  }
}

@media (max-width: 767px) {
  .dist-map-num {
    --dist-base-w: 78px;
    --dist-num-w: 26px;
    --dist-num-lift: 24px;
  }
}