/* Cross-Server Battlefield: reference stage and site navigation. */
body:has(.cross-server-section) .site-header {
  gap: 24px;
  padding-right: max(24px, calc((min(100vw, var(--page-width)) - 1436px) / 2));
  padding-left: max(24px, calc((min(100vw, var(--page-width)) - 1436px) / 2));
}

body:has(.cross-server-section) .main-nav {
  gap: clamp(10px, 1vw, 18px);
  white-space: nowrap;
}

.cross-server-section {
  --cross-stage-width: min(1440px, calc(max(1200px, 100vw) - 208px));
  padding-bottom: 60px;
  scroll-margin-top: 76px;
}

.cross-server-section > .container,
.cross-server-section .map-frame,
.cross-server-section .map-card,
.cross-server-section .map-image-frame {
  width: var(--cross-stage-width);
}

.cross-server-section .section-title {
  width: min(100%, 1000px);
}

.cross-server-section .section-title p:last-child {
  max-width: 100%;
  white-space: normal;
}

.cross-server-section .map-card {
  height: auto;
  aspect-ratio: 1440 / 820;
}

.cross-server-section .map-image-frame {
  width: min(1380px, 93%);
  height: auto;
  aspect-ratio: 1360 / 770;
}

.cross-server-section .map-card::before {
  display: none;
}

.cross-server-section .map-image.is-contained-x,
.cross-server-section .map-image.is-contained-y {
  -webkit-mask-image: none;
  mask-image: none;
}

.cross-server-section img.map-image {
  image-rendering: pixelated;
}

.cross-server-section .map-progress {
  max-width: 70%;
}



.cross-server-section .map-image-frame {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

}

.cross-server-section .map-image-frame::after {
  background:
    linear-gradient(to right, #000, transparent 30px),
    linear-gradient(to left, #000, transparent 30px),
    linear-gradient(to bottom, #000, transparent 30px),
    linear-gradient(to top, #000, transparent 30px);
}

.cross-server-section video.map-image {
  width: 1390px; /* 修改这里控制视频宽度 */
  height: auto; /* 高度按原比例计算 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}


@media (max-width: 1280px) {
  body:has(.cross-server-section) .site-header {
    gap: 16px;
    padding-right: 16px;
    padding-left: 16px;
  }

  body:has(.cross-server-section) .main-nav {
    gap: 10px;
    font-size: 13px;
  }
}