/* 麒麟跑跑西游记 官网样式 */
:root{
  --bg:#0b0916;
  --bg2:#141024;
  --bg3:#1c1633;
  --line:rgba(230,195,124,.22);
  --gold:#e6c37c;
  --gold-l:#f7e3b0;
  --gold-d:#a8843c;
  --red:#c8452f;
  --tx:#e9e4d9;
  --tx2:#a79f90;
  --tx3:#6f6858;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--tx);
  font:15px/1.75 "Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;border:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0916}
::-webkit-scrollbar-thumb{background:#3a2f4d;border-radius:6px}

/* ---------- 顶栏 ---------- */
.hd{position:fixed;left:0;right:0;top:0;z-index:60;transition:.3s;background:rgba(11,9,22,0);border-bottom:1px solid transparent}
.hd.fix{background:rgba(11,9,22,.92);border-bottom-color:var(--line);backdrop-filter:blur(10px)}
.hd-in{max-width:var(--wrap);margin:0 auto;padding:0 20px;height:70px;display:flex;align-items:center;gap:26px}
.hd-logo{display:flex;align-items:center;gap:10px}
.hd-logo img{height:34px;width:auto}
.hd-logo span{font-size:16px;letter-spacing:2px;color:var(--gold-l)}
.hd-nav{display:flex;gap:4px;margin-left:auto}
.hd-nav a{position:relative;padding:8px 16px;font-size:15px;color:var(--tx2);border-radius:4px;transition:.25s}
.hd-nav a:hover{color:var(--gold-l)}
.hd-nav a.on{color:var(--gold)}
.hd-nav a.on::after{content:"";position:absolute;left:50%;bottom:0;width:18px;height:2px;margin-left:-9px;background:var(--gold)}
.hd-right{display:flex;align-items:center;gap:14px}
.hd-wait{
  font-size:13px;letter-spacing:1px;color:var(--gold);
  border:1px solid var(--line);border-radius:20px;padding:6px 16px;
  background:linear-gradient(180deg,rgba(230,195,124,.14),rgba(230,195,124,.04));
}
.burger{display:none;background:none;border:0;width:38px;height:34px;cursor:pointer;padding:6px}
.burger i{display:block;height:2px;background:var(--gold);margin:5px 0;border-radius:2px;transition:.3s}
.hd.open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd.open .burger i:nth-child(2){opacity:0}
.hd.open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:130px 0 70px;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(900px 500px at 18% 12%,rgba(200,69,47,.20),transparent 60%),
    radial-gradient(800px 520px at 82% 30%,rgba(230,195,124,.16),transparent 62%),
    linear-gradient(180deg,#0b0916 0%,#16112b 45%,#0b0916 100%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(230,195,124,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(230,195,124,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%);
}
.hero-in{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 400px;gap:50px;align-items:center}
.hero-logo{width:330px;margin-bottom:14px}
.hero-txt h1{font-size:40px;line-height:1.25;letter-spacing:6px;color:var(--gold-l);font-weight:800;text-shadow:0 2px 18px rgba(230,195,124,.28)}
.hero-sub{margin-top:14px;font-size:17px;letter-spacing:3px;color:var(--gold)}
.hero-desc{margin-top:18px;max-width:560px;color:var(--tx2);font-size:14.5px}
.hero-badge{
  display:inline-block;margin-top:26px;padding:12px 28px;border-radius:6px;
  border:1px solid rgba(230,195,124,.45);color:var(--tx2);letter-spacing:2px;font-size:15px;
  background:linear-gradient(180deg,rgba(230,195,124,.12),rgba(230,195,124,.02));
}
.hero-badge b{color:var(--gold-l);margin-left:6px;letter-spacing:2px}
.hero-swiper{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.hero-slide.on{position:relative;opacity:1}
.hero-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px;z-index:2}
.hero-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:.3s}
.hero-dots i.on{background:var(--gold);width:22px;border-radius:4px}

/* ---------- 通用 section ---------- */
.sec{padding:80px 0;position:relative}
.sec-dark{background:linear-gradient(180deg,rgba(20,16,36,0),rgba(28,22,51,.85),rgba(20,16,36,0))}
.sec-t{text-align:center;font-size:30px;letter-spacing:5px;color:var(--tx);font-weight:800}
.sec-t em{font-style:normal;color:var(--gold)}
.sec-s{text-align:center;margin:14px 0 44px;color:var(--tx2);font-size:14px}
.sec-t::after{content:"";display:block;width:56px;height:2px;margin:18px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* 门派 */
.sect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sect-card{
  position:relative;padding:26px 24px;border:1px solid var(--line);border-radius:8px;
  background:linear-gradient(160deg,rgba(230,195,124,.07),rgba(255,255,255,.012));
  transition:.3s;overflow:hidden;
}
.sect-card::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(180deg,var(--gold),transparent)}
.sect-card:hover{transform:translateY(-4px);border-color:rgba(230,195,124,.5);box-shadow:0 16px 36px rgba(0,0,0,.4)}
.sect-card h3{font-size:19px;letter-spacing:3px;color:var(--gold-l);margin-bottom:10px}
.sect-card p{color:var(--tx2);font-size:13.5px}

/* 角色 */
.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.role-card{
  border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.18));transition:.3s;
}
.role-card:hover{transform:translateY(-5px);border-color:rgba(230,195,124,.55);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.role-pic{position:relative;height:200px;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(circle at 50% 78%,rgba(230,195,124,.20),transparent 66%)}
.role-pic img{height:186px;width:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}
.role-info{padding:12px 14px 16px;text-align:center;border-top:1px solid rgba(230,195,124,.14)}
.role-info h3{font-size:17px;letter-spacing:2px;color:var(--gold-l)}
.role-info p{margin-top:6px;font-size:12.5px;color:var(--tx2);min-height:36px}
.role-more{margin-top:10px;display:inline-block;font-size:12px;color:var(--gold);border-top:1px solid var(--line);padding-top:8px}

/* 特色 */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat-card{position:relative;padding:28px 24px 26px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(0,0,0,.16));transition:.3s}
.feat-card:hover{transform:translateY(-4px);border-color:rgba(230,195,124,.5)}
.feat-no{font:800 34px/1 Georgia,serif;color:rgba(230,195,124,.22);letter-spacing:1px}
.feat-card h3{margin:12px 0 10px;font-size:18px;letter-spacing:2px;color:var(--gold-l)}
.feat-card p{color:var(--tx2);font-size:13.5px}

/* 截图 */
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.shot-item{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:zoom-in;background:#000}
.shot-item img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;transition:.45s;opacity:.92}
.shot-item:hover img{transform:scale(1.06);opacity:1}
.shot-item::after{content:"点击查看";position:absolute;inset:auto 0 0 0;padding:8px;text-align:center;font-size:12px;color:var(--gold-l);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));opacity:0;transition:.3s}
.shot-item:hover::after{opacity:1}

/* 公告 */
.news-list{list-style:none;border-top:1px solid var(--line)}
.news-list li{border-bottom:1px solid var(--line)}
.news-list a{display:flex;align-items:center;gap:16px;padding:18px 8px;transition:.25s}
.news-list a:hover{background:rgba(230,195,124,.05);padding-left:18px}
.news-tag{flex:0 0 auto;font-size:12px;color:var(--gold);border:1px solid var(--line);border-radius:3px;padding:2px 8px}
.news-t{flex:1;color:var(--tx);font-size:15px}
.news-d{flex:0 0 auto;color:var(--tx3);font-size:13px}

/* 下载 */
.dl{padding:70px 0;text-align:center;background:linear-gradient(180deg,rgba(200,69,47,.10),rgba(11,9,22,0));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dl h2{font-size:30px;letter-spacing:4px;color:var(--tx);font-weight:800}
.dl h2 b{color:var(--gold-l);margin-left:8px}
.dl p{margin-top:16px;color:var(--tx2);font-size:14px}

/* 页脚 */
.ft{background:#08070f;padding:56px 0 30px;border-top:1px solid var(--line)}
.ft-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.06)}
.ft-top img{height:40px;width:auto}
.ft-links{display:flex;gap:20px;flex-wrap:wrap;color:var(--tx2);font-size:13.5px}
.ft-links a:hover{color:var(--gold)}
.ft-info{margin-top:22px;color:var(--tx3);font-size:12.5px;line-height:1.9}
.ft-info b{color:var(--tx2)}
.ft-qual{margin-top:18px;color:var(--tx3);font-size:12.5px;line-height:1.9}
.ft-qual a{color:var(--tx2);border-bottom:1px dotted var(--line)}
.ft-qual a:hover{color:var(--gold)}
.ft-copy{margin-top:24px;text-align:center;color:#4a4436;font-size:12px}

/* 弹窗 */
.pop{position:fixed;inset:0;z-index:90;display:none}
.pop.show{display:block}
.pop-mask{position:absolute;inset:0;background:rgba(4,3,10,.78);backdrop-filter:blur(3px)}
.pop-box{position:relative;max-width:760px;margin:6vh auto;max-height:88vh;overflow:auto;
  background:linear-gradient(180deg,#1b1630,#100d1e);border:1px solid var(--line);border-radius:10px;
  padding:32px 34px 26px;box-shadow:0 30px 80px rgba(0,0,0,.7);animation:pop .28s ease}
@keyframes pop{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.pop-x{position:absolute;right:14px;top:10px;background:none;border:0;color:var(--tx2);font-size:26px;cursor:pointer;line-height:1}
.pop-x:hover{color:var(--gold)}
.pop-box h3{font-size:20px;letter-spacing:2px;color:var(--gold-l);padding-bottom:14px;border-bottom:1px solid var(--line)}
.pop-body{margin-top:18px;color:var(--tx2);font-size:14px}
.pop-body p{margin-bottom:14px}
.pop-body .pop-skills{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.pop-body .pop-skills em{font-style:normal;font-size:13px;color:var(--gold);border:1px solid var(--line);border-radius:4px;padding:5px 12px}
.pop-body .pop-pic{width:220px;margin:6px auto 18px}
.pop-btn{display:block;margin:24px auto 0;background:none;border:1px solid var(--line);color:var(--gold);
  padding:9px 40px;border-radius:6px;cursor:pointer;letter-spacing:2px;font-size:14px}
.pop-btn:hover{background:rgba(230,195,124,.1)}

/* 回顶 */
.totop{position:fixed;right:22px;bottom:26px;z-index:70;width:44px;height:44px;line-height:42px;text-align:center;
  border:1px solid var(--line);border-radius:50%;color:var(--gold);background:rgba(11,9,22,.8);
  opacity:0;pointer-events:none;transition:.3s;font-size:18px}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{background:rgba(230,195,124,.14)}

/* 滚动渐显 */
.reveal{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* 响应式 */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:34px}
  .hero-swiper{max-width:400px}
  .sect-grid,.feat-grid{grid-template-columns:repeat(2,1fr)}
  .role-grid{grid-template-columns:repeat(3,1fr)}
  .shot-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .hd-in{height:60px}
  .hd-logo img{height:26px}.hd-logo span{font-size:14px;letter-spacing:1px}
  .hd-wait{display:none}
  .burger{display:block}
  .hd-nav{position:fixed;left:0;right:0;top:60px;flex-direction:column;gap:0;
    background:rgba(11,9,22,.97);border-bottom:1px solid var(--line);padding:8px 0;
    transform:translateY(-140%);transition:.35s;margin-left:0}
  .hd.open .hd-nav{transform:none}
  .hd-nav a{padding:14px 24px;font-size:15px}
  .hero{padding:96px 0 46px}
  .hero-logo{width:250px}
  .hero-txt h1{font-size:28px;letter-spacing:3px}
  .hero-sub{font-size:14px;letter-spacing:1px}
  .sec{padding:56px 0}
  .sec-t{font-size:23px;letter-spacing:3px}
  .sect-grid,.feat-grid,.shot-grid{grid-template-columns:1fr}
  .role-grid{grid-template-columns:repeat(2,1fr)}
  .role-pic{height:160px}.role-pic img{height:148px}
  .news-list a{flex-wrap:wrap;gap:8px}
  .news-d{width:100%;text-align:right}
  .pop-box{margin:3vh 12px;padding:24px 20px}
}