/* ============================================================
   site-pc.css —— ROM王权之忆·龙之觉醒 官网 PC 端样式（全新编写）
   金色玄幻主题 · 古典框架 · 光影动效
   仅用于 >= 751px 桌面端
   ============================================================ */

:root{
  --gold:#d4af37;
  --gold-light:#f2dc9b;
  --gold-deep:#9a7b2d;
  --gold-dim:rgba(212,175,55,.42);
  --bg-deep:#07070f;
  --bg-card:rgba(16,16,30,.88);
  --text-main:#efece2;
  --text-sub:#a8a294;
}

/* ---------- 基础 ---------- */
*{margin:0;padding:0;border:0;outline:none;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
  min-width:1200px;
  background:radial-gradient(1200px 600px at 20% -10%, #1b1b33 0%, #07070f 55%) fixed, #07070f;
  color:var(--text-main);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;cursor:pointer}
ul,ol,li{list-style:none}
i,em{font-style:normal}
.pr{position:relative}
.pa{position:absolute}
img{max-width:100%}
.page{width:100%;min-width:1200px;margin:0 auto;position:relative}

/* ---------- 金色落叶粒子层 ---------- */
#fx-leaves{position:fixed;inset:0;z-index:1;pointer-events:none}
.banner,.main,.footer{position:relative;z-index:2}

/* ---------- 顶部导航：吸顶毛玻璃 ---------- */
.header{
  position:fixed;top:0;left:0;width:100%;height:84px;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4.5vw,64px);
  background:linear-gradient(180deg, rgba(7,7,15,.94) 0%, rgba(7,7,15,.74) 100%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(212,175,55,.16);
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.header .logo{height:62px;display:flex;align-items:center}
.header .logo img{height:100%;display:block;filter:drop-shadow(0 0 12px rgba(212,175,55,.35))}
.pubNav{height:100%}
.pubNavList{display:flex;height:100%;flex-wrap:wrap;gap:10px 44px;padding-left:8px}
.pubNavList li{height:100%;position:relative}
.pubNavList a{
  display:block;font-size:18px;line-height:84px;color:#c9c6bc;
  letter-spacing:2px;white-space:nowrap;transition:color .3s ease;
}
.pubNavList a:hover{color:var(--gold-light);text-shadow:0 0 18px rgba(212,175,55,.55)}
.pubNavList a::after{
  content:'';position:absolute;left:50%;bottom:18px;width:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:translateX(-50%);transition:width .35s ease;border-radius:2px;
}
.pubNavList a:hover::after{width:80%}

/* ---------- Banner：古典金框 + 三段式文字 ---------- */
.banner{position:relative}
.banner .page{height:100vh;overflow:hidden}
.banner-img{width:100%;height:100%;position:relative}
.banner-img img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.banner-img video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;z-index:2;background:#000}
.banner::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,7,15,.55) 0%, rgba(7,7,15,0) 30%, rgba(7,7,15,.28) 68%, rgba(7,7,15,.85) 100%);
}
.banner::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 120px rgba(0,0,0,.65);
}
.banner-frame{
  position:absolute;inset:22px 26px;z-index:4;pointer-events:none;
  border:1px solid rgba(212,175,55,.34);
  box-shadow:inset 0 0 34px rgba(212,175,55,.10);
}
.banner-frame::before,.banner-frame::after{
  content:'';position:absolute;width:64px;height:64px;border:2px solid var(--gold);
}
.banner-frame::before{left:-1px;top:-1px;border-right:0;border-bottom:0;filter:drop-shadow(0 0 6px rgba(212,175,55,.6))}
.banner-frame::after{right:-1px;bottom:-1px;border-left:0;border-top:0;filter:drop-shadow(0 0 6px rgba(212,175,55,.6))}

.banner-text{
  position:absolute;left:0;right:0;top:30%;z-index:5;text-align:center;pointer-events:none;
}
.banner-text .bt-kicker{
  display:inline-block;font-size:13px;letter-spacing:10px;color:var(--gold-light);
  padding:6px 18px;border:1px solid rgba(212,175,55,.5);border-radius:2px;
  background:rgba(7,7,15,.35);margin-bottom:22px;
  opacity:0;animation:btFade 1s ease .2s forwards;
}
.banner-text .bt-title{
  font-size:clamp(60px,7.5vw,112px);
  font-family:"STSong","SimSun","Songti SC","Noto Serif SC",serif;
  font-weight:800;letter-spacing:.14em;line-height:1.08;
  background:linear-gradient(180deg,#f9ecc0 0%,#e3bf6f 30%,#9a7426 62%,#c9a24a 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(212,175,55,.45)) drop-shadow(0 0 70px rgba(212,175,55,.2));
  opacity:0;animation:btFade 1.1s ease .5s forwards;
}
.banner-text .bt-sub{
  display:block;
  font-size:clamp(26px,3vw,42px);
  font-family:"STKaiti","KaiTi","STSong","SimSun",serif;
  font-weight:500;letter-spacing:.5em;text-indent:.5em;
  margin-top:16px;
  background:linear-gradient(180deg,#f6e3ac 0%,#c89a3c 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(212,175,55,.45));
  opacity:0;animation:btFade 1.1s ease .85s forwards;
}
.banner-text .bt-slogan{
  display:block;
  font-size:clamp(15px,1.6vw,22px);
  font-weight:400;letter-spacing:.45em;text-indent:.45em;
  margin-top:18px;color:#e8e2d2;
  text-shadow:0 1px 8px rgba(0,0,0,.6),0 0 14px rgba(212,175,55,.35);
  opacity:0;animation:btFade 1.2s ease 1.15s forwards;
}
.banner-text .bt-copy{
  margin:10px auto 0;max-width:920px;
  font-size:19px;line-height:1.7;letter-spacing:2px;
  color:rgba(255,255,255,.92);text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.5);
}
.bt-copy2{margin-top:4px;color:rgba(255,232,180,.92)}
.bt-slogan{
  font-size:15px;letter-spacing:6px;color:#cfcabb;margin-top:24px;
  opacity:0;animation:btFade 1.2s ease 1.2s forwards;
}
@keyframes btFade{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ---------- 下载区：金色底板 + PC/苹果/安卓 + 微信二维码 ---------- */
.down-zone{
  position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:6;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 22px;
  max-width:96%;
}
.down-btns{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;
  padding:16px 20px;
  background:linear-gradient(180deg, rgba(8,8,18,.72) 0%, rgba(8,8,18,.94) 100%);
  border:1px solid rgba(212,175,55,.4);
  border-radius:18px;
  box-shadow:0 20px 55px rgba(0,0,0,.6), inset 0 0 46px rgba(212,175,55,.08);
}
.dl-btn{
  display:flex;align-items:center;gap:12px;
  height:84px;padding:0 22px;border-radius:12px;
  color:#fff;white-space:nowrap;flex:0 0 auto;
  transition:transform .3s ease, box-shadow .3s ease;
}
.dl-btn svg{width:32px;height:32px;flex:none}
.dl-btn b{display:block;font-size:19px;letter-spacing:3px;font-weight:600}
.dl-btn i{display:block;font-size:12px;font-style:normal;opacity:.85;letter-spacing:1px;margin-top:2px}
.dl-btn.pc-btn{
  background:linear-gradient(135deg,#efcf6e 0%,#b8860b 100%);
  color:#1a1204;
  box-shadow:0 10px 30px rgba(212,175,55,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.dl-btn.pc-btn:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(212,175,55,.65)}
.dl-btn.ios-btn,.dl-btn.and-btn{
  background:linear-gradient(135deg,#22223a,#0e0e1a);
  border:1px solid rgba(212,175,55,.38);
}
.dl-btn.ios-btn:hover,.dl-btn.and-btn:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(212,175,55,.28)}
/* 微信二维码金框 */
.wx-card{text-align:center}
.wx-frame{
  width:156px;height:156px;padding:9px;
  background:#fff;border:2px solid var(--gold);border-radius:14px;
  box-shadow:0 0 0 5px rgba(212,175,55,.16), 0 14px 40px rgba(0,0,0,.6);
  position:relative;
}
.wx-frame::before,.wx-frame::after{
  content:'';position:absolute;width:20px;height:20px;border:2px solid var(--gold);
}
.wx-frame::before{left:-7px;top:-7px;border-right:0;border-bottom:0}
.wx-frame::after{right:-7px;bottom:-7px;border-left:0;border-top:0}
.wx-frame img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.wx-card p{color:var(--gold-light);font-size:13px;letter-spacing:2px;margin-top:8px;text-shadow:0 0 8px rgba(212,175,55,.5)}
.wx-card .wx-txt2{margin-top:14px;padding-bottom:4px}

/* ---------- 主内容 ---------- */
.main{background:transparent}
.info{
  height:520px;padding-top:96px;
  display:flex;justify-content:center;align-items:flex-start;
}
.rotate{width:589px;height:350px;position:relative}
.rotateBd{
  width:587px;height:350px;position:relative;overflow:hidden;
  border:1px solid var(--gold-dim);border-radius:6px 0 0 6px;
  box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 0 40px rgba(212,175,55,.05);
  background:var(--bg-card);
}
.rotateList{font-size:0;white-space:nowrap}
.rotateSlide{width:587px;height:350px;overflow:hidden;display:inline-block;vertical-align:top}
.rotateSlide img{width:587px;height:100%;object-fit:cover}
.rotatePg{position:absolute;bottom:16px;right:16px;left:auto !important;width:auto !important;z-index:99}
.rotatePg span{
  opacity:1;width:16px;height:16px;background:#e3e3ec;float:left;margin-left:14px;
  border-radius:100%;box-shadow:0 0 4px rgba(0,0,0,.4);cursor:pointer;
}
.rotatePg span.on{background:#dfc47b}
.rotateCorner1::before,.rotateCorner1::after,
.rotateCorner2::before,.rotateCorner2::after{
  content:'';position:absolute;width:50px;height:30px;z-index:5;
}
.rotateCorner1::before{left:2px;top:2px;border-left:2px solid var(--gold);border-top:2px solid var(--gold)}
.rotateCorner1::after{right:2px;top:2px;border-right:2px solid var(--gold);border-top:2px solid var(--gold)}
.rotateCorner2::before{left:2px;bottom:2px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold)}
.rotateCorner2::after{right:2px;bottom:2px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold)}

.openNews{
  width:590px;height:350px;overflow:hidden;
  border:1px solid var(--gold-dim);border-radius:0 6px 6px 0;
  box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 0 40px rgba(212,175,55,.05);
  background:var(--bg-card);
}
.openNews .news{padding:10px 30px 0}
.openNews .news a{color:#b2b2b2}
.news_nav{font-size:0;border-bottom:1px solid rgba(212,175,55,.28);position:relative;white-space:nowrap}
.news_nav dd{display:inline-block;vertical-align:top;margin-right:30px}
.news_nav dd a{
  font-size:18px;line-height:38px;padding-bottom:1px;display:block;
  color:#c9c6bc;letter-spacing:1px;transition:color .3s;
}
.news_nav dd a:hover{color:var(--gold-light)}
.news_nav dd .on{
  color:var(--gold-light);border-bottom:2px solid var(--gold);
  text-shadow:0 0 12px rgba(212,175,55,.5);
}
.openNews .list img{display:none}
.openNews .list li{font-size:14px;line-height:49px;border-top:1px dashed #2e294f;position:relative}
.openNews .list li:first-child{font-size:16px;border:0}
.openNews .list li:first-child a{width:400px;color:var(--gold-light);padding:0}
.openNews .list li:first-child a:hover{color:#fff;text-shadow:0 0 12px rgba(212,175,55,.6)}
.openNews .list a{
  width:400px;font-weight:normal !important;padding-left:16px;position:relative;
  display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  color:#c2beb2;transition:color .3s ease;
}
.openNews .list a:hover{color:#fff}
.openNews .list a::after{
  content:'';width:5px;height:5px;border:1px solid #b3b3b3;position:absolute;top:50%;
  left:2px;margin-top:-4px;transform:rotate(45deg);
}
.openNews .list span{position:absolute;top:0;right:0;color:#8f8b80}

/* ---------- 游戏特色 ---------- */
.tese{
  height:520px;margin-bottom:130px;position:relative;z-index:2;
  text-align:center;
}
.tese::before{
  content:'游戏特色';position:absolute;top:26px;left:50%;transform:translateX(-50%);
  font-size:34px;font-weight:600;letter-spacing:14px;color:#fff;text-indent:14px;
  text-shadow:0 0 24px rgba(212,175,55,.6);z-index:3;
}
.tese::after{
  content:'';position:absolute;top:78px;left:50%;transform:translateX(-50%);
  width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);z-index:3;
}
.tese .swiper-container{width:1080px;height:441px;overflow:hidden;margin:0 auto}
.tese .swiper-slide{position:relative;width:782px;height:439px;border-radius:8px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.55);transition:box-shadow .4s ease;
}
.tese .swiper-slide .lbbg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(212,175,55,.08), rgba(0,0,0,.06));}
.tese .swiper-slide img{width:100%;height:auto}
.tese .swiper-slide-active{box-shadow:0 0 0 1px rgba(212,175,55,.5), 0 24px 70px rgba(0,0,0,.6), 0 0 44px rgba(212,175,55,.28)}
.tese .swiper-button-prev,.tese .swiper-button-next{color:var(--gold);text-shadow:0 0 12px rgba(212,175,55,.6)}
.tese .swiper-button-prev{left:30px}
.tese .swiper-button-next{right:30px}

/* ---------- 页脚 ---------- */
.footer{
  width:100%;min-height:100px;text-align:center;
  background:linear-gradient(180deg,#0a0a16,#05050c);
  border-top:1px solid rgba(212,175,55,.22);
  padding:44px 0 38px;
}
.footer .tips span{color:var(--gold-light);font-size:16px;letter-spacing:4px;display:block;margin:5px}
.footer .tips p{color:var(--text-sub);line-height:26px;display:block;margin:5px;font-size:14px}
.footer-info{margin-top:26px;padding-top:20px;border-top:1px solid rgba(212,175,55,.16)}
.footer-info p{color:#6f6b60;font-size:13px;line-height:24px;letter-spacing:1px;margin:5px}
.footer-info a{color:#8f8b80;text-decoration:none}
.footer-info a:hover{color:var(--gold-light)}

/* ---------- 滚动渐入 ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}