* { 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(0, 0, 0, .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: 68px; }
.right-con { display: flex; align-items: center; }
.official { width: auto; height: 54px; 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×896 切图背景（bg-language.webp 内含行间点状分割线装饰），
   右对齐视口、上贴 header 底；纯色 rgba 垫底与切图合成到 80% 不透明；hover 触发显隐 */
.lang-panel {
  position: fixed;
  top: 90px;
  right: 0;
  width: 156px;
  height: 904px;
  /* 面板在 .header 里跟着 --pc-scale 一起缩，所以可用高度要先除回缩放：
     渲染后的面板顶边在 90px*scale 处，屏幕剩 (100vh - 90px*scale)，
     换算成面板自己的坐标就是 100vh/scale - 90px（末尾再留 24px 不贴屏底）。
     直接写 calc(100vh - 90px) 会把缩放又乘一次，面板白白矮一截、行数少露好几个。 */
  max-height: calc(100vh / var(--pc-scale, 1) - 114px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* 底色垫 60% 黑：切图 bg-language.webp 自身是 50% 不透明的黑，压在 60% 上合成后
     正好 80% 不透明（0.5 + 0.6×0.5），与顶栏同一档，文字更实、更好读。
     改的是垫底色不是切图，切图里的分割线点状装饰照常保留。 */
  background-color: rgba(0, 0, 0, .6);
  background-image: url("../img/common/global/pc-lang-panel/bg-language.webp");
  background-repeat: no-repeat;
  /* 必须原尺寸、不拉伸：切图里的点状分割线是按 54px 行距画的，一旦按面板高度拉伸就会和文字行错位 */
  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;
}
/* 行高固定 54px，任何窗口下都不压缩——本地化文案的字距行距按设计稿走，
   放不下的部分靠面板自身滚动补齐（矮屏最多剩 2 项需要滚）。 */
.lang-panel .lang-item {
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #3e8175;
  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(233px * var(--pc-scale, 1));
  left: calc(44px * var(--pc-scale, 1));
  z-index: 999;
  transform: scale(var(--pc-scale, 1));
  transform-origin: top left;
}
.sidebar .nav-item { margin-bottom: 19px; cursor: pointer; }
/* 多语言切图高度统一：不同语言 sidebar 切图宽高比有差异，原先用 width 固定 + height:auto
   会导致切换语言时按钮高度抖动。改为锁定 height（设计基线 53px @1920），width:auto 让宽度按
   各语言切图原比例自适应——既统一高度，又保持切图原始像素比例不被拉伸/压缩。clamp 给极小/极大屏幕兜底。 */
/* 未选中态切图 136x54、选中态 188x50：锁定 54px 高、宽度按各自比例自适应，切换时不抖动 */
.sidebar .nav-img { display: block; width: auto; height: 54px; }

/* 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 {
  /* 设计稿 PIC-*.webp 原始尺寸 1125x637，落位 (403, 4641) */
  width: 1125px;
  height: 637px;
  position: absolute;
  top: 4639px;   /* 设计稿 4641 - 第3段 2px 消缝补偿 */
  left: 403px;
  z-index: 50;
}
.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 原始像素展示，不缩放、不限制 */
/* 场景轮播翻页箭头：新版背景不再印箭头，改用切图；落点沿用旧背景印刷位（中心 270/1644, 4938） */
.map-prev, .map-next {
  width: 90px;
  height: 110px;
  top: 4881px;   /* 4883 - 第3段 2px 消缝补偿 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 51;
  cursor: pointer;
}
.map-prev { left: 225px; background-image: url("../img/common/icon/arrow-prev.webp"); }
.map-next { left: 1599px; background-image: url("../img/common/icon/arrow-next.webp"); }

/* Hero (character) swiper — EP8 三张立绘各自尺寸与落位不同，容器锚定角色区左上角 */
.hero-swipe {
  width: 1920px;
  height: 1922px;
  position: absolute;
  top: 5569px;   /* 设计稿 5572 - 第4段 3px 补偿 */
  left: 0;
  z-index: 5;
  overflow: visible;
}
.hero-swipe .swiper-wrapper { overflow: visible; }
/* 显隐交给 Swiper 的 fade 效果（见 js/main.js）——这里再手写 opacity/visibility 会和它打架：
   Swiper 给 slide 写 inline opacity，CSS 的 visibility:hidden 却始终生效，淡入到一半被抹掉。 */
.hero-swipe .swiper-slide {
  position: relative;
  overflow: visible;
  clip-path: none;
  contain: none;
  /* 切换（上）：旧的立即消失，不做淡出。Swiper 的 fade 默认交叉淡化，两个角色会同时半透明
     叠在一起（看着像"挤压"）；只错峰淡出又会在背景上留一层旧角色的残影（看着像"拖影"）。 */
  transition-property: opacity !important;
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}
.hero-swipe .swiper-slide-active {
  /* 与 .swiper-slide 一致：active 状态也不能引入任何裁切 */
  overflow: visible;
  clip-path: none;
  contain: none;
  /* 切换（下）：新的立即开始 200ms 淡入，与旧的消失无缝衔接、中间不空帧。
     200ms 必须小于 js/main.js 给 Swiper 的 speed，否则过渡没走完就被收尾。 */
  transition-duration: 200ms !important;
  transition-delay: 0ms !important;
}
/* 三张立绘按设计稿原始尺寸绝对落位（相对容器左上角 = 设计稿 y 5572） */
.hero-swipe .swiper-slide img {
  display: block;
  position: absolute;
  max-width: none;
  max-height: none;
}
.hero-swipe .swiper-slide img.character1 { width: 1251px; height: 953px;  left: 386px; top: 188px; }
.hero-swipe .swiper-slide img.character2 { width: 1586px; height: 1444px; left: 51px;  top: 0; }
.hero-swipe .swiper-slide img.character3 { width: 1646px; height: 1734px; left: -9px;  top: 188px; }
.hero-prev, .hero-next {
  width: 90px;
  height: 110px;
  top: 6158px;   /* 6161 - 第4段 3px 消缝补偿 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 6;
  cursor: pointer;
}
/* 角色区箭头落点沿用旧背景印刷位（中心 262/1632, 6216） */
.hero-prev { left: 217px; background-image: url("../img/common/icon/arrow-prev.webp"); }
.hero-next { left: 1587px; background-image: url("../img/common/icon/arrow-next.webp"); }

/* Pagination dots — 新版背景不再印圆点，改用切图渲染；落点沿用旧背景印刷位 */
/* 叠 .swiper-pagination 提高优先级：Swiper 自带的 horizontal 规则会把容器按 bottom 定位 */
.map-pagination.swiper-pagination, .hero-pagination.swiper-pagination {
  position: absolute;
  left: 0;
  width: 1920px;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  line-height: 0;
}
.map-pagination.swiper-pagination  { top: 5315px; z-index: 51; }  /* 圆点组顶边 5317 - 第3段 2px 补偿 */
.hero-pagination.swiper-pagination { top: 6714px; z-index: 6; }   /* 圆点组顶边 6717 - 第4段 3px 补偿 */
.map-pagination .swiper-pagination-bullet,
.hero-pagination .swiper-pagination-bullet {
  width: 37px;
  height: 27px;
  margin: 0 !important;
  border-radius: 0;
  opacity: 1;
  background: url("../img/common/icon/dot-normal.png") center/contain no-repeat;
  transition: none;
}
.map-pagination .swiper-pagination-bullet-active,
.hero-pagination .swiper-pagination-bullet-active {
  width: 49px;
  height: 29px;
  background-image: url("../img/common/icon/dot-active.png");
}

/* Download bars */
.download-bar {
  position: absolute;
  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;
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 2;
  cursor: pointer;
}
/* 顶部下载条：设计稿 614x59 @ (1150, 602) */
.top-download { width: 614px; height: 59px; top: 602px; left: 1150px; }
.top-download .dl-google  { left: 0;     width: 195px; }
.top-download .dl-apple   { left: 210px; width: 195px; }
.top-download .dl-windows { left: 421px; width: 193px; }
/* 底部下载条：设计稿 750x72 @ (586, 16447) */
.bottom-download { width: 750px; height: 72px; top: 16443px; left: 586px; } /* 设计稿 16447 - 第5段 4px 消缝补偿 */
.bottom-download .dl-google  { left: 0;     width: 238px; }
.bottom-download .dl-apple   { left: 257px; width: 238px; }
.bottom-download .dl-windows { left: 514px; width: 236px; }

/* Section anchors — 不可见占位块，位置/高度按设计稿栏目起止，供 sidebar 滚动联动与点击跳转使用 */
.anchor {
  position: absolute;
  left: 0;
  width: 1px;
  visibility: hidden;
  pointer-events: none;
}
#gift  { top: 1290px; height: 2720px; }
#story { top: 4008px; height: 1440px; }
#hero  { top: 5447px; height: 1380px; }
#modes { top: 6826px; height: 9877px; }

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