* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #000; color: #fff; font-family: "PingFang SC", "Microsoft YaHei", serif; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
/* body overflow:hidden 配合 main.js 写入的 body.style.height = scrollHeight * --pc-scale，
   把 .pc-container 因 transform:scale 不缩 layout 而溢出 body 那部分裁掉，
   避免 scale<1 时文档可滚区大于可见内容、底部露出黑色 body 背景 */
body { overflow: hidden; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .pc-container::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pc-container { scrollbar-width: none; -ms-overflow-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; border: 0; }
ul, ol { list-style: none; }
.cursor-pointer { cursor: pointer; }
.position-absolute { position: absolute; }

/* Container — 固定 1920px 设计基线，整页通过 transform: scale(var(--pc-scale)) 等比缩放，
   避免单元素各自缩放/裁切；--pc-scale 由 main.js 在 load/resize 时按 innerWidth/1920 写入。 */
.pc-container {
  position: relative;
  width: 1920px;
  background: #000;
  transform-origin: top left;
  transform: scale(var(--pc-scale, 1));
}

/* Header — 放在 .pc-container 之外，position:fixed 锚到 viewport，始终悬浮在顶部；
   width:1920px 配合 transform:scale(var(--pc-scale)) 同步主容器缩放，与 sidebar 同方案 */
.header {
  position: fixed;
  top: 0; left: 0;
  width: 1920px;
  height: 90px;
  background: rgba(7, 23, 47, .8);
  padding: 0 10px 0 33px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform-origin: top left;
  transform: scale(var(--pc-scale, 1));
}
.logo { width: auto; height: 54px; }
.right-con { display: flex; align-items: center; }
.official { width: auto; height: 50px; margin-right: 0; cursor: pointer; }
.lang-switch-wrap {
  display: flex;
  align-items: center;
  /* 显式跨脚本字体栈：body 默认 fallback 是 serif，韩文(한국어) / 越南文(Tiếng Việt) 在
     "PingFang SC" / "Microsoft YaHei" 中都没覆盖会落到 serif 字形，与其它语言项视觉不一致；
     这里补 Apple SD Gothic Neo / Malgun Gothic（韩）+ Noto Sans + sans-serif 兜底（越南文 Latin-extended）。 */
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK SC", "Noto Sans", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 38px;
  margin-right: 42px;
  cursor: pointer;
}
.lang-switch .lang-icon { width: auto; height: auto; }
.lang-switch .lang-label { font-size: 18px; color: #ffffff; line-height: 1; }

/* Lang hover panel — 156×1764 切图背景（bg-language.webp 内含分割线点状装饰），右对齐视口、上贴 header 底；
   纯色 rgba 仅作为切图加载前兜底；hover 触发显隐 */
.lang-panel {
  position: fixed;
  top: 90px;
  right: 0;
  width: 156px;
  height: 904px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-color: transparent;
  background-image: url("../img/common/global/pc-lang-panel/bg-language.webp");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: top right;
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms linear, visibility 0s linear 120ms;
}
.lang-panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
.lang-switch-wrap:hover .lang-panel,
.lang-panel:hover {
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms linear, visibility 0s linear 0s;
}
.lang-panel .lang-item {
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #6485fd;
  text-decoration: none;
  text-align: center;
  padding: 0 8px;
  box-sizing: border-box;
  cursor: pointer;
}
.lang-panel .lang-item.is-active { color: #f6c84c; }
.lang-panel .lang-item:hover { color: #f6c84c; }

/* Sidebar — 放在 .pc-container 之外，position:fixed 锚到 viewport，始终随滚动悬浮在原视觉位置；
   位置 left/top 与自身 scale 同步主容器 --pc-scale，保证视觉比例一致 */
.sidebar {
  width: 200px;
  height: auto;
  position: fixed;
  top: calc(328px * var(--pc-scale, 1));
  left: calc(48px * var(--pc-scale, 1));
  z-index: 999;
  transform: scale(var(--pc-scale, 1));
  transform-origin: top left;
}
.sidebar .nav-item { margin-bottom: 24px; cursor: pointer; }
/* 多语言切图高度统一：不同语言 sidebar 切图宽高比有差异，原先用 width 固定 + height:auto
   会导致切换语言时按钮高度抖动。改为锁定 height（设计基线 53px @1920），width:auto 让宽度按
   各语言切图原比例自适应——既统一高度，又保持切图原始像素比例不被拉伸/压缩。clamp 给极小/极大屏幕兜底。 */
.sidebar .nav-img { display: block; width: auto; height: clamp(32px, 53px, 72px); }

/* Stacked backgrounds — 修复缩放后亚像素接缝：block + vertical-align:top + 行高/字号清零，
   相邻 .bg 之间用 margin-top:-1px 制造 1px overlap，消除 transform:scale 非整数比下的亮线/缝隙 */
.bg {
  display: block;
  width: 1920px;
  height: auto;
  vertical-align: top;
  font-size: 0;
  line-height: 0;
}
.bg + .bg { margin-top: -1px; }

/* Map swiper (overlays the story bg_03 area) — 全部 vw，随视口同步缩放 */
.map-swipe {
  width: 1129px;   /* 按 PIC-*.webp 切图最大 intrinsic 宽度固定，确保 viewport 缩小时图片不被父级裁切 */
  height: 640px;   /* 按 PIC-*.webp 切图最大 intrinsic 高度固定 */
  position: absolute;
  top: 4857px;
  left: 50%;
  /* 整体上移 376px (= 376px@1920，原 304 + 再上移 72)，保持水平居中；vw 随视口同步缩放
     scale(0.9)：与左右切换按钮作为一组等比缩小 10%，围绕容器中心，原位置不偏移 */
  transform: translate(-50%, -376px) scale(0.9);
  z-index: 50; /* lift well above all stacked bg images */
}
.map-swipe .swiper-slide { display: flex; align-items: center; justify-content: center; }
.map-swipe img { width: auto; height: auto; max-width: none; max-height: none; object-fit: none; margin: 0 auto; } /* 按切图 intrinsic 原始像素展示，不缩放、不限制 */
.map-prev, .map-next {
  /* 箭头随视口缩放：基准 90×110px @1920 → 90px 宽，aspect-ratio 锁原比例不变形；
     clamp 给极小/极大屏幕兜底防按钮不可点或过大 */
  width: clamp(60px, 90px, 120px);
  aspect-ratio: 90 / 110;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* 垂直对齐 .map-swipe 中心：top = 252.96875 + 16.6665(half) - 19.5833(上移) = 4801px
     translateY(-50%) 让中心点与图片中心重合，clamp 缩放后仍居中 */
  top: 4801px;
  z-index: 51; /* above .map-swipe (z-index:50) */
  cursor: pointer;
}
/* .map-swipe 宽 1129px 居中 → 半宽 564.5px；箭头与图片间距 88px@1920 = 88px。
   水平基准点 = 50% ± (29.401 + 4.5833) = 50% ± 652.5px，配合 translateX(±100%/0)
   把箭头紧贴图片边外，与图片同步缩放，箭头自身大小由 clamp 控制不变形。 */
/* 与 .map-swipe 作为一组等比缩小 10%：横向偏移 652.5px*0.9 = 587.25px，按钮自身 scale 0.8*0.9 = 0.72 */
.map-prev {
  background-image: url("../img/icon/icon_prev.webp");
  left: calc(50% - 587.25px);
  transform: translate(-100%, -50%) scale(0.72);
}
.map-next {
  background-image: url("../img/icon/icon_next.webp");
  left: calc(50% + 587.25px);
  transform: translate(0, -50%) scale(0.72);
}

/* Hero (character) swiper (overlays bg_04 hero area) */
.hero-swipe {
  width: 1920px;
  height: 1020px;
  position: absolute;
  top: 5873px;
  left: 0;
  /* 整体上移 370px (= 370px@1920)，箭头与角色图作为一组同步上移
     scale(0.9)：与左右切换按钮作为一组等比缩小 10%，围绕容器中心 */
  transform: translateY(-370px) scale(0.9);
  z-index: 5;
  /* 彻底消除父级裁切：不靠 overflow:hidden 隐藏非 active slide，
     改由 .swiper-slide opacity/visibility 控制可见性，保证角色图任何边缘
     不会被 .hero-swipe / .swiper-wrapper 的 clip 切掉。 */
  overflow: visible;
}
.hero-swipe .swiper-wrapper { overflow: visible; }
.hero-swipe .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 显式声明：slide 不裁切内容，img 可以超出 slide 边界完整显示
     （Swiper 给 slide 注入的 inline width 仅参与 flex 布局，不再约束 img 显示尺寸） */
  overflow: visible;
  clip-path: none;
  contain: none;
  /* 兜底：非 active slide 的角色图不可见（保留过渡动效，不引起布局抖动） */
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}
.hero-swipe .swiper-slide-active {
  opacity: 1;
  visibility: visible;
  /* 与 .swiper-slide 一致：active 状态也不能引入任何裁切 */
  overflow: visible;
  clip-path: none;
  contain: none;
}
/* 三张切图同 1920x1200。彻底解决角色裁切：
   关键约束：不能让 img 宽度超过 viewport，否则 body { overflow-x: hidden }
   会把多出的左右部分剪掉，看起来就是『角色边缘被裁』。
   方案：width: 1920px 让图始终按 viewport 宽等比缩放，height: auto 保持 1.6 比例，
   .hero-swipe / .swiper-wrapper / .swiper-slide 全部 overflow: visible，
   slide flex 居中后图相对 viewport 自然居中，三张同尺寸，不裁切、不压缩。
   非 active slide 由 opacity/visibility 隐藏，不会互相干扰。 */
.hero-swipe .swiper-slide img {
  display: block;
  width: 1920px;
  height: auto;
  max-width: 1920px;
  max-height: none;
  min-width: 0;
  min-height: 0;
  /* 三张角色切图整体下移 75px，叠加在原有 hero-swipe 容器位移之上 */
  transform: translateY(75px);
}
.hero-prev, .hero-next {
  /* 与 map 箭头一致：随视口缩放，aspect-ratio 锁原 90/110 比例 */
  width: clamp(60px, 90px, 120px);
  aspect-ratio: 90 / 110;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* 同步上移 370px (= 370px@1920)，与 .hero-swipe 作为一组对齐 */
  top: 5883px;
  z-index: 6;
  cursor: pointer;
}
/* X 轴与 .map-prev / .map-next 对齐 + 与 .hero-swipe 作为一组等比缩小 10%：
   横向偏移 652.5*0.9 = 587.25px，按钮自身 scale 0.8*0.9 = 0.72；Y 轴沿用原 top: 5883px。 */
.hero-prev { background-image: url("../img/icon/icon_prev.webp"); left: calc(50% - 587.25px); transform: translateX(-100%) scale(0.72); }
.hero-next { background-image: url("../img/icon/icon_next.webp"); left: calc(50% + 587.25px); transform: scale(0.72); }

/* Pagination dots — 全站统一去除轮播圆点 */
.swiper-pagination { display: none !important; z-index: 6; }
.swiper-pagination-bullet {
  width: 37px; height: 37px;
  background: url("../img/icon/page_normal.webp") center/contain no-repeat;
  opacity: 1; margin: 0 8.01px !important;
}
.swiper-pagination-bullet-active {
  background-image: url("../img/icon/page_active.webp");
}

/* Download bars */
.download-bar {
  position: absolute;
  width: 601px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  z-index: 10;
}
.download-bar .download-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  object-fit: contain;
}
.download-bar .dl-btn {
  display: block;
  width: 187px;
  height: 51px;
  z-index: 2;
  cursor: pointer;
}
/* top/right 全部 vw（基准 1920px）：right 150px → 150px，与背景图同步缩放，
   保证 CTA 下载按钮组始终与其背景切图绝对锁定，不会随视口变化漂移。 */
.top-download    { top: 589px; right: 161px; left: auto; } /* right 157→161 (+4px@1920)，本轮再向左 4px；如视觉位移因 transform:scale 被压成 ~2.5px 不易察觉，可再叠加 */
.bottom-download { bottom: 163px; left: 50%; transform: translate(-50%, -102px); }
/* 按 download.webp 原生尺寸 754x71 同步放大底部下载条容器与按钮，避免切图被缩小 */
.bottom-download.download-bar { width: 754px; height: 71px; }
.bottom-download.download-bar .dl-btn { width: 234.58px; height: 63.99px; transform: translateX(-15px); }
/* 视觉顺序统一对齐切图 Google Play / App Store / Windows；DOM 顺序固定（dl-windows → dl-google → dl-apple，方便 link 绑定与 inspector）。 */
.download-bar .dl-google  { order: 1; }
.download-bar .dl-apple   { order: 2; }
.download-bar .dl-windows { order: 3; }

/* Smooth anchor scroll for the whole document */
html { scroll-behavior: smooth; }