@CHARSET "UTF-8";

/* ================================================
   2026 五一劳动节专题
   布局：全屏 Swiper 垂直翻页；封面 page01 用 bg1.jpg，其余由 body::before 的 bg.jpg 铺底
   参考 shenghuang 专题结构
   ================================================ */

/* ---------- body/html 全屏锁定 ---------- */
html {
  background-color: #1a0a00;
}

html, body {
  margin: 0; padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #3a1a00;
  font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  /* 不用 antialiased：在常见 Windows 屏上易变灰度抗锯齿，字缘发虚；交给浏览器默认子像素渲染更清晰 */
  -webkit-font-smoothing: subpixel-antialiased;
}

body {
  position: relative;
  background: transparent;
}

/* 固定全屏底图层：从视口 (0,0) 铺满，顶栏、Swiper 叠在其上，背后始终有图 */
body::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background-color: #1a0a00;
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* ---------- 工具 ---------- */
.none   { display: none; }
.cursor { cursor: pointer; }
.hong   { color: #e62e00; }
.gold   { color: #c8940a; }
.biao   { color: #e62e00; font-weight: bold; background-color: #fff176; }
.jiacu  { font-weight: bold; }
.mt     { text-indent: 2em; }

/* 云端竞技等：单独居中标题（取消 .mt 首行缩进） */
.mt-center {
  text-align: center;
  text-indent: 0;
}
.tac    { text-align: center; }
img     { border: 0; max-width: 100%; }
a       { text-decoration: none; color: inherit; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #c8a060; }
::-webkit-scrollbar-thumb:hover { background-color: #e07020; }

/* ================================================
   外层包裹（全屏背景）
   ================================================ */
.wrapbg {
  width: 100%;
  height: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* ================================================
   wrap-swiper：全屏垂直 Swiper
   ================================================ */
.wrap-swiper {
  width: 100%;
  height: 100%;
  background: transparent;
  /* 避免对整容器 translateZ：子树在含 transform 的 .wrap 内已易糊，再叠一层合成层会加重发虚 */
}

.wrap-swiper .swiper-slide {
  height: 100%;
  overflow: hidden;
  position: relative;
  background: transparent;
}

/* 活动页（非封面）：PC 自上而下排列，勿整页垂直居中——否则正文长短会带动标题上下漂移 */
.wrap-swiper .swiper-slide:not(.page01) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding-top: calc(64px + 0.16rem);
  padding-bottom: 0.2rem;
}

/* ================================================
   Header（固定顶部导航，所有 slide 共用）
   ================================================ */
.header {
  position: fixed;
  width: 100%;
  left: 0; top: 0;
  z-index: 1001;
  /* 顶栏高度随 Logo 实际像素，不再用 rem 压扁 */
  height: auto;
  min-height: 0;
  /* 顶栏浮在整页背景最前，不挡背景图（与 shenghuang 视觉一致） */
  background: transparent;
  border-bottom: none;
  display: flex;
  /* 试看：Logo + 三个图片链接一并贴顶，少占纵向中缝 */
  align-items: flex-start;
  justify-content: space-between;
  padding: 2px 30px 10px;
  box-sizing: border-box;
  pointer-events: none;
}

.header a,
.header .logo {
  pointer-events: auto;
}

.header .logo {
  flex-shrink: 0;
  line-height: 0;
}

.header .logo img {
  /* 按图片文件原始宽高 1:1 显示，不缩放 */
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
}

.header .nav {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 三个图片按钮整体下移 10px 试看 */
  margin-top: 10px;
}

/* 顶栏三个链接：使用图片按钮（web_liang / reg_liang / down_liang） */
.header .nav a.nav-pic {
  display: block;
  line-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.header .nav a.nav-pic img {
  display: block;
  width: auto;
  height: auto;
  max-height: 0.5rem;
  vertical-align: top;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.65));
  transition: filter 0.2s, opacity 0.2s;
}

.header .nav a.nav-pic:hover img {
  opacity: 0.95;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.65)) brightness(1.08);
}

/* ================================================
   右侧导航（电梯，固定定位）
   ================================================ */
.left {
  position: fixed;
  right: 3vw;
  top: 50%;
  margin-top: -4.5rem;
  width: auto;
  min-width: 0.6rem;
  z-index: 500;
  visibility: hidden;
  opacity: 0;
  transform: translateX(120%);
  transition: opacity 0.6s, transform 0.6s, visibility 0.6s;
}

/* vt0：导航展开；现默认在首屏也保留（HTML/JS 始终加 vt0），与「仅内页显示」旧逻辑区分 */
.left.vt0 {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.left .asbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06rem;
}

.asbtn a.lift-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0.56rem;
  min-height: 0.44rem;
  padding: 0.04rem 0.06rem;
  border: 1px solid rgba(200, 120, 10, 0.75);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  overflow: hidden;
}

/* 无图：文字导航 */
.asbtn a .lift-nav-text {
  display: block;
  font-size: 0.14rem;
  line-height: 1.35;
  color: #f5d580;
  text-align: center;
  letter-spacing: 0.02rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.asbtn a.lift-nav-item.nav-active .lift-nav-text {
  color: #fff;
  font-weight: bold;
}

.asbtn a.lift-nav-item.nav-active {
  background: rgba(200, 120, 10, 0.92);
  border-color: #f5d580;
}

/* 有图：隐藏文字，只显示图片 */
.asbtn a.lift-nav-item.img-ready .lift-nav-text {
  display: none;
}

/* PC：导航图显示宽度（原 0.6rem 在 1080p 仅约 50px，240×90 素材会显得过小） */
.asbtn a .lift-nav-img {
  display: none;
  width: 2.2rem;
  height: auto;
  vertical-align: top;
}

.asbtn a.lift-nav-item.img-ready .lift-nav-img {
  display: block;
  width: 2.2rem;
  height: auto;
}

/* 图片模式下不需要外框底（与图一体） */
.asbtn a.lift-nav-item.img-ready {
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: none;
  background: transparent;
}

/* PC：有图时仍用 liang/hui 表示选中，nav-active 不画底色避免叠两层 */
.asbtn a.lift-nav-item.img-ready.nav-active {
  background: transparent !important;
  border: none !important;
  box-shadow: none;
}

/* ================================================
   版权/Footer 按钮
   ================================================ */
.copyrightbtn {
  position: fixed;
  right: 0.6rem;
  bottom: 0.3rem;
  color: #afa39c;
  font-size: 14px;
  z-index: 2222;
  cursor: pointer;
  /* 去掉点击/聚焦时浏览器默认的虚线框、黑框、移动端点击高亮 */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.copyrightbtn:hover { color: #f5d580; }

.copyrightbtn:focus,
.copyrightbtn:active,
.copyrightbtn:focus-visible {
  outline: none;
  box-shadow: none;
}

#footer {
  position: fixed;
  width: 100%;
  bottom: -200px;
  transition: bottom 0.3s;
  z-index: 2222;
  background: #1a0800;
  color: #666;
  padding: 14px 0;
  text-align: center;
  font-size: 13px;
  line-height: 2;
}

#footer.cur { bottom: 0; }
#footer a { color: #888; text-decoration: none; }
#footer a:hover { color: #f5d580; }
#footer .line { padding: 0 6px; }

/* ================================================
   向下引导箭头
   ================================================ */
.arrow {
  display: block;
  width: 2rem;
  height: 0.9rem;
  margin: 0 auto;
  background: url(../images/arr.png) no-repeat center;
  background-size: contain;
  animation: arrowBounce 0.7s ease-in-out infinite alternate;
}

@keyframes arrowBounce {
  0%   { transform: translateY(6px); }
  100% { transform: translateY(-6px); }
}

/* ================================================
   PAGE 01 —— 首页/封面（须高于 .wrap-swiper .swiper-slide 的 background:transparent）
   ================================================ */
.wrap-swiper .swiper-slide.page01 {
  background-color: transparent;
  background-image: url(../images/bg1.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* 首屏底部火星：Canvas，不挡点击 */
.page01-embers {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

.page01-embers.is-active {
  visibility: visible;
}

.page01-embers canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.page01 .arrow {
  position: absolute;
  left: 50%;
  bottom: 0.4rem;
  /* 宽度 2rem 时左偏移一半以居中 */
  margin-left: -1rem;
  z-index: 3;
}

/* 活动页（page02～page08）：底栏向下箭头，与封面共用 arr.png */
.swiper-slide > .arrow.arrow-next {
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  margin-left: -1rem;
  z-index: 520;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ================================================
   通用 wrap（内容区）
   与 slide 的 flex-start 配合：不再用负 margin 上提，保证各页标题区纵向起点一致
   ================================================ */
.wrap {
  position: relative;
  width: 100%;
  left: auto;
  top: auto;
  transform: none;
  flex: 0 1 auto;
  margin-top: 0;
}

/* ================================================
   通用标题（有图用 <img>，无图加 .no-title-pic 显示文字）
   ================================================ */
.title {
  width: 100%;
  margin-bottom: 0.12rem;
}

.title.title-fallback {
  position: relative;
  min-height: 0.91rem;
  background: none;
}

.title-fallback .title-pic {
  display: block;
  margin: 0 auto;
  max-height: 0.91rem;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* 默认隐藏文字，图片加载失败后再显示 */
.title-fallback .title-text {
  display: none;
}

.title-fallback.no-title-pic .title-pic {
  display: none !important;
}

.title-fallback.no-title-pic .title-text {
  display: block;
}

/* 文字版标题样式 */
.title-text {
  text-align: center;
  padding: 0.1rem 0 0.15rem;
  font-size: 0.3rem;
  font-weight: bold;
  color: #f5d580;
  letter-spacing: 0.06rem;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

.title-text span {
  display: inline-block;
  padding: 0.06rem 0.4rem;
  background: linear-gradient(135deg, rgba(140,28,0,0.85), rgba(200,64,0,0.85));
  border: 2px solid #f5d580;
  border-radius: 4px;
}

/* ================================================
   内容容器（各 slide 内的内容区）
   外框：不再包一层描边/阴影卡片，只保留内层米色底 + act-list 分块说明
   ================================================ */
.content-box {
  width: 12rem;
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* 与 Swiper 配合：类名 swiper-no-swiping / swiper-no-mousewheel 加在 HTML 的 .content-box-inner 上（见 topic.js） */
/* 正文变长时：在本区域内纵向滚动；背景透明便于透出专题底图（需可读性时可改回浅色底） */
.content-box-inner {
  padding: 0.2rem 0.3rem;
  max-height: 7.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  border-radius: 6px;
  /* 正文基础字号（原 0.18rem 偏小，整体加大一档） */
  font-size: 0.24rem;
  line-height: 1.9;
  color: #afa296;
  -webkit-font-smoothing: subpixel-antialiased;
}

/* ================================================
   活动信息（标签 + 正文，无表格线，便于窄屏换行）
   ================================================ */
.act-list {
  width: 100%;
}

.act-row {
  margin-bottom: 0.22rem;
}

.act-row:last-child {
  margin-bottom: 0;
}

.act-label {
  font-size: 0.26rem;
  font-weight: bold;
  color: #d97810;
  /* 去掉柔边阴影，笔画更利落（橙色在米色底上对比已足够） */
  text-shadow: none;
  letter-spacing: 0.02rem;
  margin-bottom: 0.06rem;
  line-height: 1.35;
  -webkit-font-smoothing: subpixel-antialiased;
}

.act-value {
  font-size: 0.23rem;
  line-height: 1.85;
  color: #afa296;
  word-break: break-word;
}

/* 活动时间 / 活动区服：与参考一致，「标签：」与正文同一行、左对齐（不用 act-row 上下两行） */
.act-meta-line {
  margin: 0.08rem 0 0.14rem;
  line-height: 1.85;
  color: #afa296;
  text-indent: 0;
  font-size: 0.23rem;
  word-break: break-word;
}

.act-meta-line .meta-lbl {
  font-weight: bold;
  color: #d97810;
  font-size: 0.26rem;
}

.act-value .charge-table {
  margin-top: 0.08rem;
}

/* ================================================
   奖励列表
   ================================================ */
.reward-list {
  list-style: none;
  margin: 0.06rem 0;
  padding: 0;
}

.reward-list li {
  padding: 0.04rem 0 0.04rem 0.2rem;
  position: relative;
  font-size: 0.23rem;
  line-height: 1.8;
}

.reward-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: #c8780a;
  font-size: 0.14rem;
  top: 0.09rem;
}

/* ================================================
   子标题
   ================================================ */
.sub-title {
  font-size: 0.22rem;
  font-weight: bold;
  color: #8b1a00;
  border-left: 4px solid #c8780a;
  padding-left: 0.1rem;
  margin: 0.14rem 0 0.08rem;
}

/* 怪物攻城：图上方小标题——金黄字、深色底、居中（与宣发截图一致，不影响其它栏 .sub-title） */
.page04 .act-value .sub-title {
  text-align: center;
  color: #c8780a;
  background: transparent;
  border-left: none;
  padding: 0.1rem 0.14rem;
  margin: 0.16rem 0 0.08rem;
  font-weight: bold;
  font-family: "Microsoft YaHei", "PingFang SC", SimHei, sans-serif;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: none;
}

/* ================================================
   图片块
   ================================================ */
.img-block {
  text-align: center;
  margin: 0.12rem 0;
}

.img-block img {
  max-width: 100%;
  height: auto;
  border: none;
  border-radius: 0;
}

.img-row {
  display: flex;
  gap: 0.12rem;
  justify-content: center;
  margin: 0.12rem 0;
  flex-wrap: wrap;
}

.img-row img {
  max-width: calc(50% - 0.06rem);
  height: auto;
  border: none;
  border-radius: 0;
}

/* ================================================
   各 PAGE 背景（每个 slide 可有自己的叠加背景色调）
   ================================================ */
.page02 { background: rgba(0,0,0,0); }
.page03 { background: rgba(0,0,0,0); }
.page04 { background: rgba(0,0,0,0); }
.page05 { background: rgba(0,0,0,0); }
.page06 { background: rgba(0,0,0,0); }
.page07 { background: rgba(0,0,0,0); }
.page08 { background: rgba(0,0,0,0); }

/* ---------- 神兵鉴定：四类 Tab（参考 shenghuang 鉴宝条 + 内容切换）---------- */
.page07 .sb-appr-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.08rem;
  width: 12rem;
  max-width: 100%;
  /* 相对标题下移；与正文间距另见下方 margin-bottom 与 PC .content-box */
  margin: 0.38rem auto 0.02rem;
  padding: 0 0.08rem;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.page07 .sb-appr-tab {
  flex: 1 1 22%;
  min-width: 1.4rem;
  margin: 0;
  padding: 0.1rem 0.06rem;
  box-sizing: border-box;
  font-size: 0.22rem;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
  color: #f5d580;
  cursor: pointer;
  border: 2px solid rgba(200, 140, 40, 0.85);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(50, 22, 0, 0.92), rgba(20, 8, 0, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.12);
  outline: none;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.page07 .sb-appr-tab:hover {
  color: #fff;
  border-color: #e8b050;
}

.page07 .sb-appr-tab.is-active {
  color: #fff;
  border-color: #ffe8a0;
  box-shadow:
    0 0 0 1px rgba(255, 200, 80, 0.35),
    0 0.12rem 0.2rem rgba(0, 0, 0, 0.45),
    inset 0 0 0.2rem rgba(255, 180, 60, 0.18);
  background: linear-gradient(180deg, rgba(120, 50, 0, 0.95), rgba(60, 22, 0, 0.98));
}

.page07 .sb-appr-panels {
  position: relative;
  width: 100%;
}

.page07 .sb-appr-panel {
  display: none;
}

.page07 .sb-appr-panel.is-active {
  display: block;
}

/* 鉴定镶嵌：小节标题（与正文区分，无首行缩进，左侧色条与 .sub-title 一致） */
/* shenghuang「鉴定套装」整表嵌入：表格与视频在米色区内可读 */
.page07 .sb-appr-taozhuang-wrap .sb-appr-shenghuang-table {
  width: 100%;
  border-collapse: collapse;
  /* auto：左列随配图自然宽度，避免 width=30% 固定宽列 + 右对齐造成图与正文之间大块空白 */
  table-layout: auto;
}

.page07 .sb-appr-taozhuang-wrap .sb-appr-shenghuang-table td.sb-appr-tz-thumb {
  vertical-align: top;
  text-align: center;
  padding: 0.04rem 0.06rem 0.04rem 0;
  box-sizing: border-box;
}

.page07 .sb-appr-taozhuang-wrap .sb-appr-shenghuang-table td.sb-appr-tz-main {
  width: 100%;
  vertical-align: top;
  text-align: left;
}

.page07 .sb-appr-taozhuang-wrap .sb-appr-shenghuang-table td.sb-appr-tz-thumb img {
  display: block;
  margin: 0 auto;
  max-width: 2.8rem;
  width: auto;
  height: auto;
}

.page07 .sb-appr-taozhuang-wrap .sb-appr-shenghuang-table table {
  width: 100%;
  table-layout: auto;
}

.page07 .sb-appr-taozhuang-wrap .sb-appr-shenghuang-table td.mt {
  word-break: break-word;
}

.page07 .sb-appr-taozhuang-wrap .sb-appr-shenghuang-table img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/* 两段视频不同：栏内勿 width:100% 撑满右栏（会把窄素材拉得又宽又糊）；用 rem 上限 + contain 居中 */
.page07 .sb-appr-taozhuang-wrap video.myvideo {
  display: block;
  margin: 0.08rem auto;
}

.page07 .sb-appr-taozhuang-wrap video.myvideo.sb-appr-tz-vid-inset {
  width: auto;
  max-width: min(100%, 10.8rem);
  max-height: 5.35rem;
  height: auto;
  object-fit: contain !important;
}

.page07 .sb-appr-taozhuang-wrap video.myvideo.sb-appr-tz-vid-wide {
  width: auto;
  max-width: min(100%, 12.8rem);
  max-height: 5.75rem;
  height: auto;
  object-fit: contain !important;
}

.page07 .sb-appr-inline-h {
  margin: 0.12rem 0 0.08rem;
  padding: 0 0 0 0.1rem;
  text-indent: 0;
  font-size: 0.22rem;
  font-weight: bold;
  line-height: 1.85;
  color: #8b1a00;
  border-left: 4px solid #c8780a;
}

.page07 .sb-appr-img-ph {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 1.6rem;
  margin: 0.12rem 0;
  padding: 0.2rem;
  box-sizing: border-box;
  font-size: 0.2rem;
  line-height: 1.5;
  color: #6a4a20;
  text-align: center;
  border: 1px dashed #c8780a;
  border-radius: 4px;
  background: rgba(255, 248, 220, 0.65);
}
/* ================================================
   顶色标识条（原 content-box 顶渐变线，已隐藏；HTML 仍保留 tag-bar + tag-0X 便于以后恢复）
   ================================================ */
.tag-bar {
  display: none;
  height: 0;
  overflow: hidden;
}
.tag-01 { background: linear-gradient(to right, #e07020, #f5c040, #e07020); }
.tag-02 { background: linear-gradient(to right, #c84000, #f58020, #c84000); }
.tag-03 { background: linear-gradient(to right, #8b0000, #c82020, #8b0000); }
.tag-04 { background: linear-gradient(to right, #00609e, #00aaff, #00609e); }
.tag-05 { background: linear-gradient(to right, #007030, #00c860, #007030); }
.tag-06 { background: linear-gradient(to right, #602080, #a040c0, #602080); }
.tag-07 { background: linear-gradient(to right, #503800, #c8a000, #503800); }

/* ================================================
   page02 云端竞技充值档位表
   ================================================ */
.charge-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.22rem;
  margin-top: 0.08rem;
}

.charge-table th {
  background: rgba(140,28,0,0.8);
  color: #f5d580;
  padding: 0.07rem 0.12rem;
  border: 1px solid #c8780a;
  font-weight: bold;
  text-align: center;
}

.charge-table td {
  padding: 0.07rem 0.12rem;
  border: 1px solid #d4b060;
  vertical-align: middle;
}

.charge-table tr:nth-child(even) td {
  background: rgba(200,120,10,0.08);
}

/* ================================================
   PC 大屏（>768）：内层正文区 max-height 随视窗；活动内页正文块相对标题下移（手机不增加上边距）
   ================================================ */
@media screen and (min-width: 769px) {
  /* 右侧竖排导航：在原先垂直居中基础上整体略下移 */
  .left {
    top: calc(50% + 0.45rem);
  }

  .wrap-swiper .swiper-slide:not(.page01) .wrap > .content-box {
    margin-top: 0.4rem;
  }

  /* 神兵鉴定：正文块紧贴 Tab 下沿，与 Tab 上 margin 配合整体下移 */
  .wrap-swiper .swiper-slide.page07 .wrap > .content-box {
    margin-top: 0.05rem;
  }

  .wrap .content-box-inner {
    max-height: clamp(6.5rem, calc(100vh - 300px), 10.5rem);
    max-height: clamp(6.5rem, calc(100dvh - 300px), 10.5rem);
  }
}

/* ================================================
   响应式：手机 / 窄屏与 PC 共用同一套 HTML（参考 H5 专题思路）
   断点与 rem.js 中 (max-width:768px) 保持一致
   ================================================ */
@media screen and (max-width: 768px) {
  html, body {
    height: 100%;
    min-height: 100%;
    min-height: -webkit-fill-available;
  }

  body::before {
    background-attachment: scroll;
  }

  .wrapbg {
    max-width: 100%;
  }

  .header {
    padding: 0 10px 8px;
    padding-top: max(2px, env(safe-area-inset-top, 0px));
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .header .nav {
    transform: none;
    gap: 6px;
    margin-top: 10px;
  }

  /* 手机版只保留「进入官网」，隐藏注册与下载 */
  .header .nav a.nav-pic--reg,
  .header .nav a.nav-pic--down {
    display: none !important;
  }

  .header .nav a.nav-pic img {
    max-height: 0.36rem;
  }

  .header .logo img {
    max-height: 52px;
    width: auto;
    height: auto;
  }

  /* 主内容区：flex 链 + min-height:0；顶栏 fixed 且已含 safe-area 上内边距，slide 须留出顶栏+标题区余量（勿用过小 rem） */
  .wrap-swiper .swiper-slide:not(.page01) {
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
    padding-bottom: 0.12rem;
    justify-content: flex-start;
  }

  .wrap {
    width: 100%;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-top: 0;
    padding: 0 8px;
    box-sizing: border-box;
    /* 与 slide padding-top 同步：顶栏 + safe-area；底栏为两行网格导航（约 100px）+ home indicator */
    max-height: calc(100vh - 72px - env(safe-area-inset-top, 0px) - 100px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px) - 100px - env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
  }

  .wrap .title {
    flex: 0 0 auto;
  }

  .wrap .content-box {
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    max-width: none;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .wrap .content-box-inner {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: thin;
    padding: 0.12rem 0.14rem;
    /* 窄屏正文整体加大一档（原 0.22rem + act-value 0.2rem 易显小） */
    font-size: 0.28rem;
    line-height: 1.95;
  }

  .wrap .content-box-inner::-webkit-scrollbar {
    width: 5px;
  }

  .wrap .content-box-inner::-webkit-scrollbar-thumb {
    background: rgba(140, 70, 0, 0.45);
    border-radius: 4px;
  }

  /* 手机版不显示 arr 向下箭头（封面与各活动页），避免与底栏抢位，翻页用手势即可 */
  .arrow {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
  }

  .act-label {
    font-size: 0.28rem;
  }

  .act-meta-line {
    font-size: 0.26rem;
    line-height: 1.9;
  }

  .act-meta-line .meta-lbl {
    font-size: 0.28rem;
  }

  .act-value {
    font-size: 0.26rem;
    line-height: 1.9;
  }

  .sub-title {
    font-size: 0.26rem;
  }

  .page04 .act-value .sub-title {
    font-size: 0.28rem;
    padding: 0.12rem 0.16rem;
    margin: 0.18rem 0 0.1rem;
  }

  .charge-table {
    font-size: 0.25rem;
  }

  .reward-list li {
    font-size: 0.26rem;
  }

  .title-text {
    font-size: 0.34rem;
  }

  /* 底部导航：4×2 网格一次展示全部入口（避免用户不知可横滑）；窄屏用文字代替 PC 大图 */
  .left {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    width: 100%;
    min-width: 0;
    max-height: none;
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background: rgba(10, 4, 0, 0.88);
    border-top: 1px solid rgba(200, 120, 10, 0.45);
    transform: translateY(110%);
    transition: opacity 0.35s, transform 0.35s, visibility 0.35s;
    touch-action: manipulation;
  }

  .left.vt0 {
    transform: translateY(0);
  }

  .left .asbtn {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: 5px;
    justify-items: stretch;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 8px 7px;
    max-height: none;
    overflow: visible;
    touch-action: manipulation;
  }

  .asbtn a.lift-nav-item {
    flex: none;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 36px;
    max-height: none;
    padding: 4px 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .asbtn a .lift-nav-text {
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: normal;
    word-break: keep-all;
  }

  /* 手机：隐藏侧栏大图，仍用 HTML 里两行字 + nav-active 高亮（与 PC 可共用一套文案，不必另导出手机图） */
  .asbtn a.lift-nav-item.img-ready .lift-nav-img {
    display: none !important;
  }

  .asbtn a.lift-nav-item.img-ready .lift-nav-text {
    display: block !important;
  }

  .asbtn a.lift-nav-item.img-ready {
    padding: 4px 4px;
    min-width: 0;
    min-height: 36px;
    max-height: none;
    border: 1px solid rgba(200, 120, 10, 0.55);
    background: rgba(0, 0, 0, 0.45);
    overflow: visible;
  }

  .asbtn a.lift-nav-item.img-ready.nav-active {
    background: rgba(200, 120, 10, 0.92) !important;
    border: 1px solid #f5d580 !important;
  }

  /* 手机封面换用竖版背景图 */
  .wrap-swiper .swiper-slide.page01 {
    background-image: url(../images/m_bg1.jpg);
    background-position: center top;
  }

  /* 手机版不显示「版权信息」入口 */
  .copyrightbtn {
    display: none !important;
    pointer-events: none;
  }

  #footer {
    display: none !important;
  }

  /* 神兵鉴定：底栏占高时 Tab 两行排布；收窄与标题间距，整体略上移 */
  .page07 .sb-appr-tabs {
    width: 100%;
    gap: 6px;
    padding: 0 6px;
    margin: 0.12rem auto 0.08rem;
  }

  .page07 .sb-appr-tab {
    flex: 1 1 45%;
    min-width: 0;
    font-size: 13px;
    padding: 8px 4px;
  }

  .page07 .sb-appr-inline-h {
    font-size: 0.26rem;
  }

  /* 神兵鉴定·鉴定套装：PC 为左图右文；手机改为上下堆栈，内嵌视频与「鉴定总套装」同屏宽上限 */
  .page07 .sb-appr-taozhuang-wrap .sb-appr-shenghuang-table > tbody > tr:has(> td.sb-appr-tz-thumb) {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .page07 .sb-appr-taozhuang-wrap .sb-appr-shenghuang-table > tbody > tr:has(> td.sb-appr-tz-thumb) > td.sb-appr-tz-thumb,
  .page07 .sb-appr-taozhuang-wrap .sb-appr-shenghuang-table > tbody > tr:has(> td.sb-appr-tz-thumb) > td.sb-appr-tz-main {
    display: block;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .page07 .sb-appr-taozhuang-wrap .sb-appr-shenghuang-table > tbody > tr:has(> td.sb-appr-tz-thumb) > td.sb-appr-tz-thumb {
    text-align: center;
    padding: 0.06rem 0 0.04rem;
  }

  .page07 .sb-appr-taozhuang-wrap .sb-appr-shenghuang-table > tbody > tr:has(> td.sb-appr-tz-thumb) > td.sb-appr-tz-thumb img {
    max-width: 2.5rem;
    margin-left: auto;
    margin-right: auto;
  }

  .page07 .sb-appr-taozhuang-wrap video.myvideo.sb-appr-tz-vid-inset {
    max-width: min(100%, 12.8rem);
    width: 100%;
    max-height: 5.75rem;
  }
}