/* ==========================================================================
   东煌纪 donghuangji.com
   宣纸长卷 · 墨色国风 —— 古色古香 × 灵异可爱 × 高级感
   ========================================================================== */

:root{
  /* —— 纸 —— */
  --xuan:#f5f0e6;        /* 宣纸 */
  --xuan-warm:#efe7d8;   /* 暖宣 */
  --xuan-cool:#eceadf;   /* 冷宣 */
  --xuan-deep:#e3dccb;   /* 深宣 */

  /* —— 墨 —— */
  --mo:#1c1a17;          /* 焦墨 */
  --mo-2:#3d3833;        /* 浓墨 */
  --mo-3:#6b635a;        /* 中墨 */
  --mo-4:#9a9184;        /* 淡墨 */

  /* —— 黛青（夜色·神秘）—— */
  --dai:#1f3a42;
  --dai-light:#2f5560;
  --dai-deep:#162b31;

  /* —— 朱砂 —— */
  --zhu:#b23a2f;
  --zhu-light:#d15a4a;

  /* —— 金 —— */
  --jin:#b8934a;
  --jin-light:#d9bd7a;

  /* —— 语义 —— */
  --qing:#4a7a6e;        /* 青玉 */
  --zi:#6a5a8c;          /* 紫 */

  --line:rgba(28,26,23,.13);
  --line-strong:rgba(28,26,23,.24);
  --line-jin:rgba(184,147,74,.36);

  --sh-sm:0 2px 8px rgba(28,26,23,.06);
  --sh:0 10px 34px rgba(28,26,23,.10);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html{scroll-behavior:smooth;scroll-padding-top:74px;}

body{
  margin:0;
  font-family:"Songti SC","STSong","SimSun","Noto Serif SC",-apple-system,serif;
  background:var(--xuan);
  color:var(--mo-2);
  line-height:1.9;
  overflow-x:hidden;
  font-size:15px;
}

/* 全局链接：去掉浏览器默认下划线 */
a{text-decoration:none;color:var(--mint-deep);}
a:hover{color:var(--amber-deep);}
.brand,.brand:hover{color:var(--mo);}
.brand-txt b{color:var(--mo);}
.nav a,.nav a:hover{text-decoration:none;}
.foot-links a,.foot-links a:hover{text-decoration:none;}
.m-dl,.m-dl:hover,.m-code,.m-code:hover,
.btn,.btn:hover,.m-bar-btn,.m-bar-btn:hover,
.code-btn,.code-btn:hover,.sc-bar a{text-decoration:none;}

/* 宣纸纤维纹理 */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    repeating-linear-gradient(92deg,rgba(28,26,23,.016) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(2deg,rgba(28,26,23,.012) 0 1px,transparent 1px 4px);
}

/* 全局暗角，把注意力收进中间 */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 1100px 700px at 50% 0%,transparent 40%,rgba(120,105,80,.09));
}

.wrap{max-width:1080px;margin:0 auto;padding:0 30px;}

/* 衬线标题专用 */
.serif{font-family:"Songti SC","STSong","SimSun","Noto Serif SC",serif;}

/* ==================== 顶栏 ==================== */
.topbar{
  position:sticky;top:0;z-index:900;
  background:rgba(245,240,230,.94);
  box-shadow:0 1px 12px rgba(28,26,23,.07);
  backdrop-filter:blur(12px);
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px;}

.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand-seal{
  width:38px;height:38px;flex-shrink:0;
  border:1.5px solid var(--zhu);border-radius:3px;
  background:var(--zhu);color:var(--xuan);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;letter-spacing:0;
  box-shadow:0 2px 6px rgba(178,58,47,.24);
}
.brand-txt b{
  display:block;font-size:20px;font-weight:700;
  letter-spacing:5px;color:var(--mo);line-height:1.25;
}
.brand-txt span{
  display:block;font-size:9.5px;color:var(--mo-4);
  letter-spacing:2.6px;font-weight:400;margin-top:1px;
}

.nav{display:flex;gap:2px;}
.nav a{
  position:relative;padding:8px 15px;
  font-size:14px;letter-spacing:2px;color:var(--mo-3);
  transition:color .2s;
}
  .nav a:hover{color:var(--zhu);}
  .nav a.on{color:var(--zhu);background:var(--mint-ghost);}

.nav-pills{display:none;}

/* ==================== 首屏 ==================== */
.hero{
  position:relative;
  padding:78px 0 0;
}
/* 夜色黛青的顶部晕染，神秘感来源 */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 800px 420px at 50% -8%,rgba(31,58,66,.10),transparent 66%),
    radial-gradient(ellipse 500px 300px at 18% 30%,rgba(184,147,74,.07),transparent 68%);
}
.hero-in{position:relative;z-index:2;padding-bottom:64px;text-align:center;}

.hero-seal{
  display:inline-block;margin-bottom:26px;
  padding:5px 16px;border:1px solid var(--line-jin);border-radius:2px;
  font-size:11.5px;letter-spacing:4px;color:var(--jin);
}

.hero h1{
  margin:0 0 16px;
  font-size:74px;font-weight:700;
  letter-spacing:14px;line-height:1.1;
  color:var(--mo);
  text-indent:14px; /* 抵消末字间距，保持视觉居中 */
}
.hero .en{
  margin:0 0 30px;font-size:11px;letter-spacing:7px;
  color:var(--mo-4);text-transform:uppercase;
}

.hero-rule{
  width:76px;height:1px;margin:0 auto 32px;
  background:linear-gradient(90deg,transparent,var(--jin),transparent);
  position:relative;
}
.hero-rule::after{
  content:"◈";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:var(--xuan);padding:0 7px;
  color:var(--jin);font-size:9px;
}

.hero .lead{
  margin:0 auto 34px;max-width:620px;
  font-size:16px;line-height:2.05;color:var(--mo-3);
}
.hero .lead b{color:var(--zhu);font-weight:600;}

.hero-verse{
  margin:0 auto 34px;max-width:600px;
  font-size:14px;line-height:2.1;color:var(--mo-4);
  letter-spacing:1.5px;
  padding-left:16px;border-left:2px solid var(--line-jin);
  text-align:left;
}

.dl-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:26px;}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 34px;border:1px solid var(--mo);border-radius:2px;
  background:transparent;color:var(--mo);
  font-size:14.5px;letter-spacing:3px;font-weight:600;
  cursor:pointer;transition:.24s;
}
.btn-amber{
  background:var(--zhu);border-color:var(--zhu);color:#f7f3ea;
  box-shadow:0 4px 18px rgba(178,58,47,.22);
}
.btn-amber:hover{
  background:#9d3128;border-color:#9d3128;transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(178,58,47,.3);
}
.btn-plain:hover{
  background:var(--mo);border-color:var(--mo);color:var(--xuan);
  transform:translateY(-2px);
}

.legal{
  margin:0;font-size:12px;color:var(--mo-4);letter-spacing:.8px;
}
.legal b{color:var(--zhu);font-weight:600;}

/* 数据条：细线分隔，像账册 */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:0;padding:0;
}
.stat{
  text-align:center;padding:30px 12px;
  border-left:1px solid var(--line);
  position:relative;
}
.stat:first-child{border-left:none;}
.stat::before{
  content:"◆";position:absolute;left:50%;top:-5px;
  transform:translateX(-50%);
  color:var(--xuan);background:var(--xuan);
  font-size:7px;padding:0 3px;
}
.stat b{
  display:block;font-size:32px;font-weight:700;
  color:var(--mo);line-height:1.2;letter-spacing:1px;
}
.stat span{
  display:block;font-size:11.5px;color:var(--mo-4);
  letter-spacing:2.6px;margin-top:4px;
}

/* ==================== 区块 ==================== */
.sec{margin:96px 0;}
.sec-hd{margin-bottom:44px;text-align:center;}
.sec-hd .en{
  display:block;font-size:10.5px;letter-spacing:5px;
  color:var(--jin);margin-bottom:12px;text-transform:uppercase;
}
.sec-hd h2{
  margin:0 0 14px;font-size:34px;font-weight:700;
  letter-spacing:7px;color:var(--mo);text-indent:7px;
}
.sec-hd p{
  margin:0 auto;max-width:620px;
  font-size:14.5px;line-height:1.95;color:var(--mo-3);
}
.sec-hd .orn{
  margin-top:20px;font-size:9px;color:var(--jin);letter-spacing:6px;
}

/* ==================== 玩法：竖排题签 ==================== */
.play-list{
  border-top:1px solid var(--line);
}
.play{
  display:grid;grid-template-columns:96px 1fr;
  gap:34px;align-items:start;
  padding:38px 8px;
  transition:background .3s;
  position:relative;
}
.play:hover{background:rgba(255,255,255,.5);}
.play::before{
  content:"";position:absolute;left:0;top:38px;bottom:38px;width:2px;
  background:var(--zhu);transform:scaleY(0);transform-origin:top;
  transition:transform .34s ease;
}
.play:hover::before{transform:scaleY(1);}

.play-idx{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.play-idx .num{
  font-size:34px;font-weight:700;color:var(--xuan-deep);
  line-height:1;letter-spacing:-1px;
  transition:color .3s;
}
.play:hover .play-idx .num{color:var(--jin);}
.play-idx .glyph{
  width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--mo-3);background:var(--xuan);
  transition:.3s;
}
.play:hover .play-idx .glyph{border-color:var(--jin);color:var(--jin);}

.play-body h3{
  margin:0 0 12px;font-size:22px;font-weight:700;
  letter-spacing:3px;color:var(--mo);
}
.play-body .sub{
  margin:0 0 12px;font-size:12px;letter-spacing:3px;color:var(--jin);
}
.play-body p{
  margin:0;font-size:14.5px;line-height:1.95;color:var(--mo-3);
  max-width:660px;
}

/* ==================== 灵兽图鉴册页 ==================== */
.ledger{
  border:1px solid var(--line-strong);border-radius:3px;
  background:linear-gradient(180deg,var(--xuan-warm),var(--xuan));
  padding:38px 34px;position:relative;
}
.ledger::before,.ledger::after{
  content:"";position:absolute;left:0;right:0;height:5px;
  background:linear-gradient(90deg,transparent,var(--jin),transparent);
  opacity:.5;
}
.ledger::before{top:0;}
.ledger::after{bottom:0;}

.pet-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}

.pet{
  background:var(--xuan);padding:26px 22px 24px;
  transition:background .28s;position:relative;
}
.pet:hover{background:#fbf8f1;}

.pet-no{
  font-size:11px;letter-spacing:3px;color:var(--mo-4);
  margin-bottom:12px;
}
.pet-name{
  margin:0 0 4px;font-size:19px;font-weight:700;
  letter-spacing:1.5px;color:var(--mo);line-height:1.5;
}
.pet-en{
  margin:0 0 16px;font-size:10px;letter-spacing:2px;color:var(--mo-4);
  text-transform:uppercase;
}
.pet-tier{
  display:inline-block;margin-bottom:14px;
  padding:2px 11px;border:1px solid var(--jin);border-radius:2px;
  font-size:10.5px;letter-spacing:2px;color:var(--jin);
}
.pet-tier.r{background:var(--mo);border-color:var(--mo);color:var(--xuan);}

.pet-attr{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap;}
.pet-attr span{
  font-size:11.5px;letter-spacing:1.5px;color:var(--mo-3);
  padding:2px 10px;border:1px solid var(--line-strong);border-radius:2px;
}
.pet-desc{
  margin:0 0 16px;font-size:13.5px;line-height:1.9;color:var(--mo-3);
}
.pet-note{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;letter-spacing:1.5px;padding:3px 12px;
  border-radius:2px;
}
.note-v{background:rgba(74,122,110,.1);color:var(--qing);border:1px solid rgba(74,122,110,.26);}
.note-k{background:rgba(178,58,47,.08);color:var(--zhu);border:1px solid rgba(178,58,47,.24);}

/* ==================== 属性克制 ==================== */
.scroll-frame{
  border:1px solid var(--line-strong);border-radius:3px;
  background:var(--xuan);overflow:hidden;
  box-shadow:var(--sh-sm);
}
.scroll-hd{
  padding:16px 26px;background:var(--mo);color:var(--xuan-warm);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.scroll-hd b{font-size:15.5px;letter-spacing:4px;font-weight:600;}
.scroll-hd span{font-size:11px;letter-spacing:2px;opacity:.65;}

.kex-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.kex{width:100%;border-collapse:collapse;font-size:13.5px;min-width:580px;}
.kex th,.kex td{
  padding:13px 20px;text-align:left;
}
.kex thead th{
  background:var(--xuan-deep);color:var(--mo-2);
  font-weight:700;letter-spacing:2px;font-size:12.5px;
}
.kex tbody tr{transition:background .2s;}
.kex tbody tr:hover{background:rgba(184,147,74,.07);}
.kex td:first-child{
  font-weight:700;letter-spacing:1.5px;color:var(--mo);white-space:nowrap;
}
.kex .n{
  display:inline-block;min-width:30px;padding:1px 9px;
  border:1px solid var(--line-strong);border-radius:2px;
  font-size:12px;font-weight:700;text-align:center;color:var(--mo-3);
}
.kex .pos{color:var(--qing);font-weight:600;}

.scroll-ft{
  padding:16px 26px;background:var(--xuan-warm);
  border-top:1px solid var(--line);
  font-size:13px;line-height:1.9;color:var(--mo-3);
}
.scroll-ft b{color:var(--zhu);font-weight:600;}

/* ==================== 养成：卷轴条目 ==================== */
.steps{border-top:1px solid var(--line);}
.step{
  display:grid;grid-template-columns:44px 1fr;gap:26px;
  padding:32px 8px;
  border-bottom:1px solid transparent;
  transition:background .3s;
}
.step:hover{background:rgba(255,255,255,.5);}
.step-n{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--jin);border-radius:50%;
  font-size:14px;font-weight:700;color:var(--jin);
  letter-spacing:0;
}
.step h4{
  margin:0 0 8px;font-size:19px;font-weight:700;
  letter-spacing:2.5px;color:var(--mo);
}
.step p{margin:0;font-size:14px;line-height:1.95;color:var(--mo-3);max-width:680px;}
.step p b{color:var(--zhu);font-weight:600;}

/* ==================== 礼包码 ==================== */
.code-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line-strong);
}
.code{
  background:var(--xuan);padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:14px;
  transition:background .28s;
}
.code:hover{background:#fbf8f1;}
.code-bd b{
  display:block;font-size:16px;font-weight:700;letter-spacing:2px;
  color:var(--mo);margin-bottom:6px;
}
.code-bd span{font-size:12.5px;color:var(--mo-4);letter-spacing:.6px;}
.code-btn{
  align-self:flex-start;
  padding:8px 24px;border:1px solid var(--mo);border-radius:2px;
  background:transparent;color:var(--mo);
  font-family:inherit;font-size:12.5px;letter-spacing:2.5px;
  cursor:pointer;transition:.22s;
}
.code-btn:hover{background:var(--mo);color:var(--xuan);}
.code-btn:active{transform:scale(.96);}

/* ==================== FAQ ==================== */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid transparent;}
.faq summary{
  position:relative;padding:22px 50px 22px 6px;
  font-size:16px;font-weight:600;letter-spacing:1.5px;
  color:var(--mo);cursor:pointer;list-style:none;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--zhu);}
.faq summary::after{
  content:"＋";position:absolute;right:12px;top:50%;
  transform:translateY(-50%);
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--mo-4);
  border:1px solid var(--line);border-radius:50%;
  transition:.26s;
}
.faq details[open] summary::after{
  content:"−";color:var(--zhu);border-color:var(--zhu);
  transform:translateY(-50%) rotate(180deg);
}
.faq details[open] summary{color:var(--zhu);}
.faq .ans{
  padding:0 6px 24px;font-size:14px;line-height:1.95;
  color:var(--mo-3);max-width:720px;
}
.faq .ans b{color:var(--zhu);font-weight:600;}

/* ==================== 页脚 ==================== */
.foot{
  margin-top:96px;padding:56px 0 34px;
  background:var(--dai-deep);color:#9fb3ad;
  position:relative;
}
.foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--jin),transparent);
  opacity:.55;
}
.foot-in{
  display:grid;grid-template-columns:1.6fr 1fr 1.2fr;
  gap:46px;margin-bottom:38px;
}
.foot h4{
  margin:0 0 15px;font-size:14px;font-weight:600;
  letter-spacing:4px;color:#e3ddd0;
}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;}
.foot-links a{
  font-size:13px;color:#8fa9a3;letter-spacing:1.4px;transition:color .2s;
}
.foot-links a:hover{color:var(--jin-light);}
.foot p{margin:0;font-size:12.5px;line-height:2;color:#7d968f;}
.foot-bottom{
  padding-top:24px;border-top:1px solid rgba(255,255,255,.09);
  font-size:11.5px;color:#5f7a74;text-align:center;letter-spacing:1.6px;
  line-height:2;
}

/* ==================== 客服 ==================== */
.svc{position:fixed;right:18px;bottom:26px;z-index:9998;}
.svc-btn{
  position:relative;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  border:1px solid var(--jin);background:var(--dai);
  display:flex;align-items:center;justify-content:center;
  font-size:21px;color:var(--jin-light);
  box-shadow:0 6px 24px rgba(22,43,49,.28);
  transition:transform .22s,background .22s;
}
.svc-btn:hover{transform:translateY(-3px);background:var(--dai-light);}
.svc-btn::after{
  content:"";position:absolute;top:3px;right:3px;
  width:9px;height:9px;border-radius:50%;
  background:var(--zhu-light);border:1.5px solid var(--dai-deep);
}
.svc-box{
  position:fixed;right:18px;bottom:88px;width:352px;height:536px;
  background:#fff;border-radius:3px;overflow:hidden;
  border:1px solid var(--jin);
  box-shadow:0 18px 52px rgba(22,43,49,.32);
  display:none;flex-direction:column;
}
.svc-box.open{display:flex;}
.svc-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;background:var(--dai);color:var(--jin-light);
  flex-shrink:0;
}
.svc-hd b{font-size:13.5px;font-weight:600;letter-spacing:3px;}
.svc-hd button{
  background:none;border:none;color:#7d968f;
  width:24px;height:24px;font-size:19px;cursor:pointer;line-height:1;
}
.svc-box iframe{flex:1;width:100%;border:none;}

/* ==================== 响应式 ==================== */
@media (max-width:900px){
  .foot-in{grid-template-columns:1fr 1fr;gap:34px;}
}
@media (max-width:820px){
  .nav{display:none;}
  .nav-pills{
    display:flex;gap:0;overflow-x:auto;
    background:rgba(245,240,230,.97);
    scrollbar-width:none;
  }
  .nav-pills::-webkit-scrollbar{display:none;}
  .nav-pills a{
    flex-shrink:0;padding:11px 18px;
    font-size:13.5px;letter-spacing:2px;color:var(--mo-3);
    border-bottom:2px solid transparent;
  }
  .nav-pills a.on{color:var(--zhu);background:var(--mint-ghost);}
  .hero{padding-top:56px;}
  .hero h1{font-size:52px;letter-spacing:9px;}
  .hero .en{letter-spacing:5px;}
  .sec{margin:72px 0;}
  .sec-hd h2{font-size:27px;letter-spacing:5px;}
  .play{grid-template-columns:64px 1fr;gap:22px;padding:30px 4px;}
  .play-idx .num{font-size:26px;}
  .ledger{padding:26px 20px;}
  .svc-box{width:calc(100vw - 36px);height:66vh;right:18px;}
}
@media (max-width:520px){
  .wrap{padding:0 20px;}
  .hero h1{font-size:38px;letter-spacing:6px;}
  .hero .lead{font-size:15px;}
  .hero .verse{font-size:13px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat{padding:24px 8px;}
  .stat:nth-child(3){border-left:none;}
  .stat:nth-child(n+3){border-top:1px solid var(--line);}
  .stat b{font-size:25px;}
  .stat span{letter-spacing:1.8px;}
  .sec-hd h2{font-size:23px;letter-spacing:3px;}
  .play{grid-template-columns:1fr;gap:14px;padding:26px 4px;}
  .play-idx{flex-direction:row;align-items:center;gap:14px;}
  .play-idx .num{font-size:24px;}
  .play-body h3{font-size:19px;}
  .step{grid-template-columns:1fr;gap:12px;}
  .foot-in{grid-template-columns:1fr;gap:26px;}
  .btn{padding:12px 24px;font-size:13.5px;letter-spacing:2px;}
  .dl-row{gap:11px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}
/* ==================== 开服倒计时 ==================== */
.kaioshi{
  display:flex;align-items:baseline;justify-content:center;
  gap:14px;margin:0 0 28px;flex-wrap:wrap;
}
.kaioshi .ks-label{
  font-size:12px;letter-spacing:4px;color:var(--mo-4);
}
.kaioshi .ks-num{
  font-size:36px;font-weight:700;letter-spacing:3px;
  color:var(--zhu);line-height:1;
  font-variant-numeric:tabular-nums;
}
.kaioshi .ks-unit{
  font-size:12px;letter-spacing:3px;color:var(--mo-4);
}
.dl-note{
  margin:0 0 6px;font-size:12px;color:var(--mo-4);letter-spacing:1.2px;
}

/* 开服预约区 */
.kaisu-bd{display:grid;grid-template-columns:220px 1fr;gap:36px;padding:34px 30px;}

.ks-date{
  text-align:center;padding:24px 16px;
  border:1px solid var(--line-jin);border-radius:3px;
  background:var(--xuan-warm);
}
.ks-big{
  font-size:52px;font-weight:700;letter-spacing:2px;
  color:var(--zhu);line-height:1;
  font-variant-numeric:tabular-nums;
}
.ks-big em{font-style:normal;color:var(--mo-4);font-size:30px;margin:0 3px;}
.ks-y{margin-top:12px;font-size:12px;letter-spacing:3px;color:var(--mo-3);}
.ks-h{
  margin-top:6px;font-size:11.5px;letter-spacing:2px;color:var(--mo-4);
  padding-top:6px;border-top:1px solid var(--line);
}

.ks-info .ks-list{
  list-style:none;margin:0 0 24px;padding:0;
}
.ks-list li{
  position:relative;padding:9px 0 9px 22px;
  font-size:14px;line-height:1.9;color:var(--mo-3);
}
.ks-list li::before{
  content:"◈";position:absolute;left:0;top:12px;
  color:var(--jin);font-size:9px;
}
.ks-list b{
  color:var(--mo);font-weight:700;letter-spacing:2px;margin-right:6px;
}

@media (max-width:820px){
  .kaisu-bd{grid-template-columns:1fr;gap:26px;padding:24px 20px;}
  .ks-date{padding:20px 14px;}
  .ks-big{font-size:42px;}
  .kaioshi{gap:10px;}
  .kaioshi .ks-num{font-size:30px;}
}
@media (max-width:480px){
  .kaioshi{flex-direction:column;align-items:center;gap:6px;}
  .kaioshi .ks-unit{letter-spacing:2px;}
  .ks-big{font-size:36px;}
}

@media (max-width:480px){
}

/* ==========================================================================
   移动端优先改造
   目标：手机上首屏即见下载入口，全站操作直接可点
   ========================================================================== */

/* 桌面端：移动专属元素隐藏 */
.m-hero,.m-bar{display:none;}

/* ---------- 手机端首屏：极简下载卡 ---------- */
@media (max-width:820px){
  .hero{padding:14px 0 0;}
  .hero-in{padding-bottom:26px;}

  /* 首屏装饰全部让位给下载入口 */

  .m-hero{display:block;margin-bottom:4px;}

  .m-hero-top{display:flex;align-items:center;gap:13px;margin-bottom:14px;}
  .m-icon{
    width:62px;height:62px;flex-shrink:0;border-radius:15px;
    object-fit:cover;background:var(--xuan-deep);
    box-shadow:0 3px 12px rgba(31,58,56,.16);
  }
  .m-hero-meta{min-width:0;flex:1;}
  .m-hero-meta b{
    display:block;font-size:22px;font-weight:700;letter-spacing:3px;
    color:var(--mo);line-height:1.25;
  }
  .m-hero-meta span{
    display:block;font-size:12px;color:var(--mo-3);letter-spacing:1.5px;
    margin-top:2px;
  }
  .m-hero-meta em{
    display:inline-block;margin-top:6px;font-style:normal;
    font-size:11.5px;letter-spacing:1.5px;color:var(--zhu);
    padding:2px 9px;border:1px solid rgba(178,58,47,.3);border-radius:2px;
    background:rgba(178,58,47,.06);
  }

  /* 主下载按钮：占满宽度，超好点 */
  .m-dl{
    display:block;width:100%;text-align:center;
    padding:15px 20px;border-radius:11px;margin-bottom:10px;
    background:linear-gradient(135deg,#c1443a,var(--zhu));
    color:#f7f3ea;font-size:17px;font-weight:700;letter-spacing:4px;
    text-decoration:none;
    box-shadow:0 5px 16px rgba(178,58,47,.3);
  }
  .m-dl:active{transform:scale(.985);}

  /* 次要入口：礼包码 */
  .m-code{
    display:block;width:100%;text-align:center;
    padding:12px 20px;border-radius:11px;
    border:1px solid var(--jin);color:var(--jin);
    font-size:14.5px;font-weight:600;letter-spacing:2.5px;text-decoration:none;
    background:rgba(184,147,74,.06);
  }
  .m-code:active{background:rgba(184,147,74,.16);}

  /* 桌面版按钮组在手机隐藏（已由 m-dl 替代） */
  .dl-row{display:none;}

  /* 数据条：手机压成两行 */
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat{padding:16px 8px;}
  .stat b{font-size:21px;}
  .stat span{font-size:11px;letter-spacing:1.5px;}
  .stat:nth-child(3){border-left:none;}
  .stat:nth-child(n+3){border-top:1px solid var(--line);}
  .stat::before{display:none;}

  /* 章节间距收紧 */
  .sec{margin:44px 0;}
  .sec-hd{margin-bottom:24px;text-align:left;}
  .sec-hd .en{margin-bottom:6px;font-size:10px;letter-spacing:3.5px;}
  .sec-hd h2{font-size:22px;letter-spacing:3px;margin-bottom:8px;}
  .sec-hd p{font-size:13.5px;line-height:1.8;}

  /* 玩法：紧凑列表 */
  .play{grid-template-columns:1fr;gap:11px;padding:22px 2px;}
  .play-idx{flex-direction:row;align-items:center;gap:12px;}
  .play-idx .num{font-size:22px;letter-spacing:1px;}
  .play-idx .glyph{width:32px;height:32px;}
  .play-body h3{font-size:18px;letter-spacing:2px;margin-bottom:4px;}
  .play-body .sub{font-size:10.5px;letter-spacing:2px;margin-bottom:7px;}
  .play-body p{font-size:13.5px;line-height:1.75;}
  .play::before{left:0;top:22px;bottom:22px;}

  /* 图鉴册页：手机单列更易读 */
  .ledger{padding:18px 14px;}
  .pet-grid{grid-template-columns:1fr;gap:1px;}
  .pet{padding:18px 16px;}
  .pet-name{font-size:17px;}

  /* 卷轴表格：可横向滑动 */
  .kex{min-width:480px;}
  .kex th,.kex td{padding:11px 13px;font-size:13px;}
  .scroll-hd{padding:13px 16px;}
  .scroll-hd b{font-size:14px;letter-spacing:2px;}
  .scroll-ft{padding:13px 16px;font-size:12.5px;}

  /* 养成步骤 */
  .step{grid-template-columns:1fr;gap:10px;padding:20px 2px;}
  .step-n{width:30px;height:30px;font-size:13px;}
  .step h4{font-size:16.5px;letter-spacing:2px;margin-bottom:5px;}
  .step p{font-size:13.5px;line-height:1.8;}

  /* 礼包码：单列大按钮 */
  .code-grid{grid-template-columns:1fr;}
  .code{padding:16px 16px 14px;gap:11px;}
  .code-bd b{font-size:15px;margin-bottom:4px;}
  .code-btn{width:100%;padding:11px;}

  /* FAQ */
  .faq summary{font-size:15px;padding:17px 42px 17px 4px;}
  .faq .ans{font-size:13.5px;padding:0 4px 18px;}

  /* 开服预约区 */
  .kaisu-bd{grid-template-columns:1fr;gap:18px;padding:18px 14px;}
  .ks-date{padding:18px 12px;}
  .ks-big{font-size:38px;}
  .ks-list li{font-size:13px;padding:8px 0 8px 20px;}

  /* 页脚 */
  .foot{margin-top:48px;padding:34px 0 84px;}   /* 底部留出固定条空间 */
  .foot-in{grid-template-columns:1fr;gap:22px;margin-bottom:22px;}
  .foot h4{font-size:13px;letter-spacing:3px;margin-bottom:10px;}
  .foot-links{flex-direction:row;flex-wrap:wrap;gap:8px 16px;}
  .foot-links a{font-size:12.5px;}
  .foot p{font-size:12px;line-height:1.9;}

  /* 客服球：手机端上移，避开底部固定条 */
  .svc{right:12px;bottom:76px;}
  .svc-btn{width:46px;height:46px;font-size:19px;}
  .svc-box{right:12px;bottom:132px;width:calc(100vw - 24px);height:64vh;}

  /* ---------- 手机端底部固定下载条 ---------- */
  .m-bar{
    display:flex;align-items:center;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:9997;
    padding:9px 16px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.97);
    border-top:1px solid var(--line-strong);
    box-shadow:0 -3px 16px rgba(28,26,23,.1);
    backdrop-filter:blur(12px);
  }
  .m-bar-info{flex:1;min-width:0;}
  .m-bar-info b{
    display:block;font-size:14.5px;font-weight:700;letter-spacing:2px;
    color:var(--mo);line-height:1.3;
  }
  .m-bar-info span{
    display:block;font-size:11px;color:var(--zhu);
    letter-spacing:1px;margin-top:1px;
  }
  .m-bar-btn{
    flex-shrink:0;padding:11px 30px;border-radius:10px;
    background:linear-gradient(135deg,#c1443a,var(--zhu));
    color:#f7f3ea;font-size:15px;font-weight:700;letter-spacing:2px;
    text-decoration:none;box-shadow:0 3px 10px rgba(178,58,47,.28);
  }
  .m-bar-btn:active{transform:scale(.97);}
}

@media (max-width:400px){
  .m-icon{width:54px;height:54px;}
  .m-hero-meta b{font-size:19px;letter-spacing:2px;}
  .m-dl{font-size:16px;letter-spacing:3px;padding:14px 16px;}
  .m-bar-btn{padding:10px 22px;font-size:14px;}
}

/* ==========================================================================
   真实素材接入
   ========================================================================== */

/* ---------- 首屏主视觉 ---------- */
.hero-visual{
  margin:0 0 30px;border-radius:4px;overflow:hidden;
  box-shadow:0 14px 44px rgba(28,26,23,.16);
  border:1px solid var(--line);
}
.hero-visual img{
  width:100%;display:block;height:auto;
}

/* ---------- 玩法配图 ---------- */
.play-pic{
  grid-column:1/-1;margin:0 0 4px;border-radius:3px;overflow:hidden;
  border:1px solid var(--line);
}
.play-pic img{
  width:100%;display:block;height:auto;
  transition:transform .5s ease;
}
.play:hover .play-pic img{transform:scale(1.03);}

/* ---------- 灵兽立绘 ---------- */
.pet-pic{
  margin:0 0 14px;padding:0;position:relative;
  background:
    radial-gradient(ellipse 60% 42% at 50% 82%,rgba(78,201,168,.10),transparent 70%),
    linear-gradient(180deg,var(--xuan-warm),var(--xuan));
  border-radius:3px;overflow:hidden;
  border:1px solid var(--line);
}
.pet-img{
  width:100%;display:block;height:auto;   /* 按原图比例，不裁不压 */
  padding:10px;transition:transform .4s ease;
}
.pet:hover .pet-img{transform:scale(1.04) translateY(-3px);}

/* ---------- 实机视频 ---------- */
.video-wrap{
  border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;
  background:#000;box-shadow:0 10px 30px rgba(28,26,23,.14);
  margin-bottom:16px;
}
.game-video{
  width:100%;display:block;height:auto;background:#0d1418;
  aspect-ratio:1920/886;      /* 保持视频原始比例，桌面 */
}

/* ---------- 实机截图网格 ---------- */
.shot-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;
}
.shot-card{
  margin:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:var(--panel);transition:.24s;
}
.shot-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--mint);}
.shot-card img{
  width:100%;display:block;height:auto;
}
.shot-card figcaption{
  padding:11px 14px;font-size:12.5px;color:var(--tx-mid);
  letter-spacing:1px;border-top:1px solid var(--line);
}

/* ---------- 手机端适配 ---------- */
@media (max-width:820px){
  .hero-visual{margin:0 0 20px;border-radius:3px;}
  .play-pic{margin-bottom:2px;}
  .play-pic img{height:auto;}
  .pet-pic{margin-bottom:12px;}
  .pet-pic img{padding:8px;}
  .shot-grid{grid-template-columns:1fr;gap:10px;}
  .shot-card figcaption{padding:9px 12px;font-size:12px;}
  .game-video{aspect-ratio:1920/886;}
}

/* ==========================================================================
   悬浮客服球 —— 参照 lqmcsy（乐趣萌宠）比例
   50px 圆底 + 26px 图标 + 下方文字标签
   ========================================================================== */
.float-customer-service{
  position:fixed;right:12px;bottom:20px;z-index:99999;
  width:50px;
}
.float-service-link{
  display:block;text-decoration:none;text-align:center;
}
.float-service-icon{
  position:relative;width:50px;height:50px;
  background:#1f3a38;border-radius:50%;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
  box-shadow:0 2px 12px rgba(28,26,23,.22);
  transition:transform .2s ease;
}
.float-service-link:hover .float-service-icon{transform:translateY(-2px);}
.float-service-icon img{
  width:26px;height:26px;display:block;object-fit:contain;
}
.float-service-badge{
  position:absolute;top:-4px;right:-4px;
  background:#b23a2f;color:#fff;font-size:10px;
  min-width:16px;height:16px;line-height:16px;border-radius:8px;
  text-align:center;padding:0 3px;font-weight:700;
  border:2px solid #fff;
}
.float-customer-service.float-ball-hidden{opacity:0;pointer-events:none;}

.float-service-text{
  display:block;margin-top:2px;font-size:10px;color:#fff;
  background:#1f3a38;padding:1px 6px;border-radius:6px;
  font-weight:700;text-align:center;white-space:nowrap;
}

/* 客服聊天窗 */
.float-chat-window{
  position:fixed;right:20px;bottom:105px;width:360px;height:480px;
  max-width:calc(100vw - 24px);
  background:#f7f8f9;border-radius:12px;
  box-shadow:0 10px 34px rgba(28,26,23,.24);
  overflow:hidden;display:none;flex-direction:column;z-index:10000;
}
.float-chat-window.float-chat-open{display:flex;}
.float-chat-window iframe{
  flex:1;width:100%;height:100%;border:0;background:#f7f8f9;
}
.float-chat-bar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#1f3a38,#2f5560);color:#fff;
  padding:9px 12px;font-size:13.5px;font-weight:700;flex-shrink:0;
}
.float-chat-title{display:flex;align-items:center;}
.float-chat-actions{display:flex;align-items:center;gap:6px;}
.float-chat-btn{
  cursor:pointer;font-size:13px;padding:2px 8px;border-radius:10px;
  background:rgba(255,255,255,.2);user-select:none;transition:background .2s;
}
.float-chat-btn:hover{background:rgba(255,255,255,.34);}

/* ==========================================================================
   游戏场景横向滚动
   ========================================================================== */
.scene-rail{
  position:relative;overflow:hidden;
  margin:0 -20px;padding:0 20px;
}
.scene-rail::before,.scene-rail::after{
  content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;
}
.scene-rail::before{left:0;background:linear-gradient(90deg,var(--paper),transparent);}
.scene-rail::after{right:0;background:linear-gradient(270deg,var(--paper),transparent);}

.scene-track{
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px 0 16px;
  scrollbar-width:thin;
  scrollbar-color:var(--ink-line) transparent;
}
.scene-track::-webkit-scrollbar{height:6px;}
.scene-track::-webkit-scrollbar-track{background:var(--xuan-deep);border-radius:3px;}
.scene-track::-webkit-scrollbar-thumb{background:var(--ink-line);border-radius:3px;}

.scene-item{
  flex:0 0 auto;width:340px;margin:0;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:var(--panel);scroll-snap-align:start;
  box-shadow:0 3px 12px rgba(28,26,23,.07);
  transition:transform .3s ease,box-shadow .3s ease;
  display:flex;flex-direction:column;
}
.scene-item:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(28,26,23,.14);}
.scene-item img{
  width:100%;display:block;height:auto;   /* 按原图比例，不裁不压 */
  background:var(--xuan-deep);
}
.scene-item figcaption{
  padding:10px 14px;font-size:13px;letter-spacing:2px;
  color:var(--mo-2);border-top:1px solid var(--line);
  margin-top:auto;
}

/* 灵兽卡：只留图 + 名 */
.pet{padding:0;}
.pet-pic{
  margin:0;border-radius:0;border:none;
  background:linear-gradient(180deg,var(--xuan-warm),var(--xuan-deep));
}
.pet-pic img{padding:16px;}
.pet-bd{padding:14px 16px 16px;}
.pet-name{
  margin:0;font-size:16px;font-weight:700;letter-spacing:1.5px;
  color:var(--mo);text-align:center;
}
.pet-en,.pet-tier,.pet-attr,.pet-desc,.pet-note{display:none;}

/* 手机端 */
@media (max-width:820px){
  .float-customer-service{right:10px;bottom:72px;}
  .float-chat-window{right:10px;bottom:134px;width:calc(100vw - 20px);height:60vh;}
  .scene-rail{margin:0 -20px;padding:0 20px;}
  .scene-item{width:250px;}
  .scene-item img{height:auto;}
  .scene-item figcaption{padding:8px 12px;font-size:12px;letter-spacing:1.5px;}
  .pet-img{padding:6px;}
  .pet-name{font-size:15px;}
}


/* ==========================================================================
   灵兽图鉴横向滚动
   ========================================================================== */
.pet-rail{
  position:relative;overflow:hidden;
  margin:0 -20px;padding:0 20px;
}
.pet-rail::before,.pet-rail::after{
  content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;
}
.pet-rail::before{left:0;background:linear-gradient(90deg,var(--xuan),transparent);}
.pet-rail::after{right:0;background:linear-gradient(270deg,var(--xuan),transparent);}

.pet-track{
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px 0 16px;
  scrollbar-width:thin;
  scrollbar-color:var(--ink-line) transparent;
}
.pet-track::-webkit-scrollbar{height:6px;}
.pet-track::-webkit-scrollbar-track{background:var(--xuan-deep);border-radius:3px;}
.pet-track::-webkit-scrollbar-thumb{background:var(--ink-line);border-radius:3px;}

.pet{
  flex:0 0 auto;width:230px;margin:0;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:var(--panel);scroll-snap-align:start;
  box-shadow:0 3px 12px rgba(28,26,23,.07);
  transition:transform .3s ease,box-shadow .3s ease;
}
.pet:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(28,26,23,.14);}
.pet-no{
  padding:9px 12px;font-size:11px;letter-spacing:2px;
  color:var(--mo-4);
  border-bottom:1px solid transparent;
}
.pet-pic{
  margin:0;border:none;border-radius:0;
  background:linear-gradient(180deg,var(--xuan-warm),var(--xuan-deep));
}
.pet-img{width:100%;display:block;height:auto;padding:10px;transition:transform .4s ease;}
.pet:hover .pet-img{transform:scale(1.04);}
.pet-bd{padding:0 12px 14px;}
.pet-name{
  margin:0;font-size:15.5px;font-weight:700;letter-spacing:1.5px;
  color:var(--mo);text-align:center;
}

@media (max-width:820px){
  .pet-rail{margin:0 -20px;padding:0 20px;}
  .pet{width:180px;}
  .pet-img{padding:6px;}
  .pet-name{font-size:14.5px;letter-spacing:1px;}
  .pet-no{padding:7px 10px;font-size:10px;}
}


/* ==========================================================================
   手机端字号收敛（正文 14px / 标题 17px 基准）
   ========================================================================== */
@media (max-width:820px){
  /* 章节标题 */
  .sec-hd h2{font-size:19px;letter-spacing:2px;}
  .sec-hd p{font-size:13px;line-height:1.75;}

  /* 礼包码 */
  .code-bd b{font-size:14px;letter-spacing:1.2px;margin-bottom:3px;}
  .code-bd span{font-size:11.5px;}
  .code-btn{font-size:12.5px;letter-spacing:1.5px;padding:10px;}

  /* 常见疑问 */
  .faq summary{font-size:14px;padding:14px 40px 14px 3px;letter-spacing:.8px;}
  .faq .ans{font-size:13px;line-height:1.75;padding:0 3px 16px;}
  .faq summary::after{width:22px;height:22px;line-height:22px;font-size:13px;right:12px;}

  /* 灵兽 */
  .pet-name{font-size:14px;letter-spacing:1px;}
  .pet-no{font-size:10px;letter-spacing:1.5px;}

  /* 场景 */
  .scene-item figcaption{font-size:12px;letter-spacing:1.2px;}

  /* 玩法 */
  .play-body h3{font-size:16px;letter-spacing:1.5px;}
  .play-body .sub{font-size:9.5px;letter-spacing:1.5px;}
  .play-body p{font-size:13px;line-height:1.72;}

  /* 属性克制表 */
  .kex th,.kex td{padding:9px 11px;font-size:12.5px;}
  .scroll-hd{padding:11px 14px;}
  .scroll-hd b{font-size:13px;letter-spacing:1.5px;}
  .scroll-hd span{font-size:10px;}
  .scroll-ft{padding:11px 14px;font-size:12px;line-height:1.7;}

  /* 养成 */
  .step h4{font-size:15px;letter-spacing:1.5px;margin-bottom:4px;}
  .step p{font-size:13px;line-height:1.75;}

  /* 开服预约 */
  .ks-list li{font-size:12.5px;padding:7px 0 7px 19px;}
  .ks-list b{letter-spacing:1px;}

  /* 实机截图 */
  .shot-card figcaption{font-size:11.5px;padding:8px 11px;}

  /* 首屏 */
  .m-hero-meta b{font-size:18px;letter-spacing:2px;}
  .m-hero-meta span{font-size:11.5px;}
  .m-hero-meta em{font-size:11px;letter-spacing:1px;}
  .m-dl{font-size:15px;letter-spacing:3px;}
  .m-code{font-size:13.5px;letter-spacing:2px;}

  /* 底部条 */
  .m-bar-info b{font-size:13.5px;letter-spacing:1.5px;}
  .m-bar-info span{font-size:10.5px;}
  .m-bar-btn{font-size:14px;padding:10px 24px;}

  /* 页脚 */
  .foot h4{font-size:12.5px;letter-spacing:2.5px;}
  .foot-links a{font-size:12px;}
  .foot p{font-size:11.5px;line-height:1.85;}

  /* 客服窗 */
  .float-chat-bar{padding:8px 12px;font-size:12.5px;}
  .float-service-text{font-size:9.5px;}
}