/* ============ 狼影传说官网 · 暗红金边武侠风（公共样式） ============ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Microsoft YaHei","SimHei",sans-serif;
  background:#140a0a;
  color:#d9cbb0;
  line-height:1.7;
  font-size:15px;
}
a{color:inherit;text-decoration:none;}
img{border:0;display:block;max-width:100%;}

/* 顶部警戒条 */
.topbar{
  background:linear-gradient(180deg,#7a0f0f,#4a0707);
  border-bottom:2px solid #d4a24e;
  padding:6px 0;
  font-size:12px;
  color:#ffd9a0;
  text-align:center;
}
.topbar .inner{max-width:1100px;margin:0 auto;padding:0 14px;}
.topbar b{color:#ffe08a;}

/* 主容器 */
.wrap{max-width:1100px;margin:0 auto;padding:0 14px;}

/* 顶部信息条 */
.headinfo{
  background:#0f0707;
  border:1px solid #4a2a1a;
  border-left:5px solid #d4a24e;
  padding:8px 14px;
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  font-size:12px;color:#bfa985;
}
.headinfo span b{color:#ffd24a;font-weight:normal;}
.headinfo .kefu{margin-left:auto;color:#ffd24a;font-weight:bold;}

/* 头部 Logo + 导航 */
.header{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding:14px 0;
  border-bottom:2px solid #3a1d0d;
}
.logo{display:flex;align-items:center;gap:12px;}
.logo img{width:54px;height:54px;border-radius:8px;}
.logo .t{line-height:1.2;}
.logo .t h1{font-size:26px;color:#ffe08a;font-family:"SimHei",serif;letter-spacing:2px;text-shadow:0 0 12px rgba(212,162,78,.4);}
.logo .t p{font-size:11px;color:#9a7b4f;letter-spacing:3px;}

.nav{
  display:flex;flex-wrap:wrap;gap:4px;
  margin-left:auto;
}
.nav a{
  padding:7px 16px;font-size:14px;color:#e0cfa5;
  border:1px solid #3a2410;
  background:#1a0c0c;
  transition:all .2s;
}
.nav a:hover,.nav a.on{background:#d4a24e;color:#1a0c0c;border-color:#d4a24e;}

/* 面包屑 */
.crumb{font-size:12px;color:#8a6a3a;margin:14px 0;padding:6px 12px;background:#0f0707;border:1px solid #3a2410;}
.crumb a{color:#bfa985;}
.crumb a:hover{color:#ffd24a;}

/* 跑马灯公告 */
.marquee{
  --mbg:#0f0707;
  background:#0f0707;border:1px solid #4a2a1a;
  margin:14px 0;padding:8px 10px;overflow:hidden;
  white-space:nowrap;position:relative;
}
.marquee::before{content:"";position:absolute;top:0;left:0;width:64px;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(to right, var(--mbg) 0%, var(--mbg) 45%, transparent 100%);}
.marquee .lbl{display:inline-block;background:#c62828;color:#fff;font-size:12px;padding:1px 10px;margin-right:10px;vertical-align:middle;position:relative;z-index:1;}
.marquee .txt{display:inline-block;font-size:13px;color:#ffd9a0;vertical-align:middle;}
/* 无缝滚动：公告内容输出两份并排，平移 -50% 恰好一个文本宽度，循环无间断、不裁头尾 */
@keyframes roll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.marquee .roll{display:inline-block;white-space:nowrap;animation:roll 22s linear infinite;}

/* Hero Banner */
.hero{position:relative;border:2px solid #6b4518;margin:0 0 18px 0;overflow:hidden;}
.hero img{width:100%;height:auto;}
.hero .shade{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,transparent,rgba(20,10,10,.92));
  padding:40px 18px 16px 18px;
}
.hero .t1{font-size:34px;color:#ffe08a;font-weight:bold;letter-spacing:3px;text-shadow:0 2px 6px #000;}
.hero .t2{font-size:15px;color:#ffd9a0;margin-top:6px;text-shadow:0 1px 3px #000;}
.hero .tags{margin-top:10px;font-size:13px;color:#ffe08a;}
.hero .tags span{border:1px solid #d4a24e;padding:2px 10px;margin-right:8px;background:rgba(0,0,0,.4);}

/* 区块 */
.sec{margin-bottom:26px;}
.sec .tt{
  display:flex;align-items:center;gap:10px;
  border-left:5px solid #c62828;
  padding-left:12px;margin-bottom:14px;
}
.sec .tt h2{font-size:22px;color:#ffe08a;font-family:"SimHei",serif;letter-spacing:2px;}
.sec .tt .en{font-size:11px;color:#7a5a30;letter-spacing:2px;}

/* ===== 战法道 三职业可切换布局 ===== */
.cls-switch{
  background:#1a0c0c;border:2px solid #6b4518;
  padding:14px;display:flex;gap:14px;align-items:stretch;
  flex-wrap:wrap;
}
.cls-stage{
  position:relative;overflow:hidden;border:1px solid #4a2a1a;
  flex:1.35;min-width:0;height:560px;background:
    radial-gradient(ellipse at center,rgba(122,15,15,.20),transparent 64%),
    #0f0707;
}
.cls-stage .stage-img{width:100%;height:100%;position:relative;}
.cls-stage .stage-img img{
  width:100%;height:100%;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 0 28px rgba(212,162,78,.25));
  transition:opacity .35s ease, transform .35s ease;
}
.cls-stage .stage-no{
  position:absolute;top:16px;left:20px;
  font-size:16px;color:#d4a24e;letter-spacing:2px;
  background:rgba(0,0,0,.5);border:1px solid #d4a24e;padding:4px 14px;
  z-index:2;
}
/* 右侧职业信息面板 */
.cls-info{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(135deg,#150909,#0f0707 60%);
  border:1px solid #4a2a1a;padding:26px 28px;min-width:280px;
}
.cls-info .info-no{
  font-size:15px;color:#d4a24e;letter-spacing:3px;margin-bottom:16px;
  background:rgba(0,0,0,.4);border:1px solid #d4a24e;display:inline-block;
  padding:5px 16px;align-self:flex-start;
}
.cls-info h3{
  font-size:34px;color:#ffe08a;font-family:"SimHei",serif;letter-spacing:6px;
  text-shadow:0 2px 10px #000;
}
.cls-info .sub{font-size:16px;color:#ffd24a;margin-top:6px;letter-spacing:2px;}
.cls-info p{
  font-size:14px;color:#e8d9b5;margin-top:18px;line-height:1.9;
  text-shadow:0 1px 4px #000;
}
/* 切换按钮 */
.cls-tabs{
  display:flex;gap:10px;margin-top:12px;
}
.cls-tabs .tab{
  flex:1;padding:13px 8px;text-align:center;
  background:#0f0707;border:2px solid #3a2410;color:#bfa985;
  font-size:16px;font-weight:bold;letter-spacing:3px;cursor:pointer;
  transition:all .2s;font-family:"SimHei",serif;
}
.cls-tabs .tab small{display:block;font-size:11px;letter-spacing:1px;font-weight:normal;margin-top:2px;color:#7a5a30;}
.cls-tabs .tab:hover{border-color:#d4a24e;color:#ffe08a;}
.cls-tabs .tab.on{
  background:linear-gradient(180deg,#a52828,#7a0f0f);color:#ffe08a;
  border-color:#d4a24e;box-shadow:0 0 14px rgba(212,162,78,.35);
}
.cls-tabs .tab.on small{color:#ffd9a0;}

/* 玩法系统表 */
.sys{width:100%;border-collapse:collapse;background:#1a0c0c;border:1px solid #4a2a1a;table-layout:fixed;}
.sys th{background:#7a0f0f;color:#ffe08a;padding:10px 8px;font-size:14px;font-weight:bold;border:1px solid #4a2a1a;}
.sys td{padding:9px 10px;font-size:13px;color:#d9cbb0;border:1px solid #3a2410;vertical-align:top;}
.sys td b{color:#ffd24a;}

/* 福利/礼包 */
.welfare{
  background:linear-gradient(135deg,#1f0d0d,#2a1208);
  border:2px solid #6b4518;padding:18px;
}
.welfare .frow{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;}
.welfare .fbox{
  flex:1;min-width:220px;background:#0f0707;border:1px solid #4a2a1a;
  padding:14px;text-align:center;
}
.welfare .fbox .num{font-size:26px;color:#ffe08a;font-weight:bold;}
.welfare .fbox .lab{font-size:13px;color:#bfa985;margin-top:4px;}
.welfare .fbox .desc{font-size:12px;color:#8a6a3a;margin-top:4px;}
.welfare .tips{font-size:12px;color:#bfa985;line-height:1.9;}

/* 礼包码 */
.codes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px;}
.codes .cd{
  background:#0f0707;border:1px dashed #d4a24e;padding:10px 6px;text-align:center;cursor:pointer;
}
.codes .cd b{font-size:15px;color:#ffe08a;letter-spacing:1px;}
.codes .cd .t{font-size:11px;color:#8a6a3a;margin-top:2px;}
.codes .cd:hover{background:#2a1608;}

/* 下载中心 */
.down{text-align:center;padding:24px 14px;background:#1a0c0c;border:2px solid #6b4518;}
.down .big{font-size:18px;color:#ffd9a0;margin-bottom:16px;}
.down .big .g{color:#ffe08a;font-weight:bold;font-size:22px;}
.downbtn{
  display:inline-block;min-width:230px;padding:14px 20px;margin:6px;font-size:17px;font-weight:bold;
  border:2px solid #d4a24e;text-align:center;line-height:1.3;cursor:pointer;
  transition:all .2s;
}
.downbtn small{display:block;font-size:12px;font-weight:normal;opacity:.9;}
.down-android{background:#0d4a0f;color:#eaffea;}
.down-android:hover{background:#176d19;}
.down-apple{background:#0a1f4a;color:#eaf2ff;}
.down-apple:hover{background:#12306e;}
.down .note{font-size:12px;color:#8a6a3a;margin-top:12px;}

/* 客服 */
.kefubox{
  background:#1a0c0c;border:1px solid #4a2a1a;padding:16px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;
  margin-top:16px;
}
.kefubox .wx{font-size:20px;color:#ffe08a;font-weight:bold;}
.kefubox .hint{font-size:12px;color:#8a6a3a;}

/* FAQ */
.faq{background:#1a0c0c;border:1px solid #4a2a1a;}
.faq .item{border-bottom:1px solid #3a2410;}
.faq .item:last-child{border-bottom:0;}
.faq .q{padding:12px 16px;font-size:14px;color:#ffd9a0;font-weight:bold;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.faq .q .a{color:#d4a24e;}
.faq .a{display:none;padding:4px 16px 12px;font-size:13px;color:#bfa985;line-height:1.9;}

/* 游戏截图滑动 */
.shot-slider{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;}
.shot-item{flex:0 0 auto;width:200px;border:1px solid #4a2a1a;background:#1a0c0c;scroll-snap-align:center;}
.shot-item img{width:100%;height:auto;display:block;border-bottom:1px solid #4a2a1a;cursor:pointer;}
.shot-item figcaption{text-align:center;padding:6px;font-size:12px;color:#bfa985;}
.shot-hint{text-align:center;font-size:12px;color:#7a5a30;margin-top:6px;}

/* ===== 文章区块 ===== */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.news-item{
  background:#1a0c0c;border:1px solid #4a2a1a;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .2s, border-color .2s;
}
.news-item:hover{transform:translateY(-4px);border-color:#d4a24e;}
.news-item .ni-img{height:150px;overflow:hidden;position:relative;}
.news-item .ni-img img{width:100%;height:100%;object-fit:cover;}
.news-item .ni-img .ni-cat{
  position:absolute;top:8px;left:8px;background:#c62828;color:#fff;
  font-size:11px;padding:2px 10px;letter-spacing:1px;
}
.news-item .ni-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;}
.news-item .ni-body h3{font-size:15px;color:#ffe08a;line-height:1.5;margin-bottom:6px;}
.news-item .ni-body p{font-size:12px;color:#bfa985;line-height:1.8;flex:1;}
.news-item .ni-meta{font-size:11px;color:#7a5a30;margin-top:8px;}
.news-more{text-align:center;margin-top:16px;}
.news-more a{
  display:inline-block;padding:9px 28px;border:1px solid #d4a24e;color:#ffe08a;font-size:14px;
}
.news-more a:hover{background:#d4a24e;color:#1a0c0c;}

/* ===== 文章详情 ===== */
.article-box{
  background:#1a0c0c;border:2px solid #6b4518;padding:26px 30px;margin-bottom:26px;
}
.article-box .a-title{font-size:26px;color:#ffe08a;font-family:"SimHei",serif;letter-spacing:1px;line-height:1.5;}
.article-box .a-meta{font-size:12px;color:#8a6a3a;margin:12px 0 18px;padding-bottom:14px;border-bottom:1px solid #3a2410;}
.article-box .a-meta span{margin-right:18px;}
.article-box .a-meta .cat{color:#ffd24a;}
.article-content{font-size:15px;color:#d9cbb0;line-height:1.9;}
.article-content h2,.article-content h3,.article-content h4{color:#ffe08a;margin:20px 0 10px;line-height:1.5;}
.article-content h3{font-size:19px;border-left:4px solid #c62828;padding-left:10px;}
.article-content p{margin:10px 0;}
.article-content ul,.article-content ol{margin:10px 0 10px 26px;}
.article-content li{margin:5px 0;}
.article-content strong,.article-content b{color:#ffd24a;}
.article-content a{color:#ffd24a;text-decoration:underline;}
.article-content img{max-width:100%;margin:12px auto;border:1px solid #4a2a1a;}
.article-content table{width:100%;border-collapse:collapse;margin:14px 0;}
.article-content table td,.article-content table th{border:1px solid #4a2a1a;padding:8px 10px;font-size:13px;}
.article-content table th{background:#7a0f0f;color:#ffe08a;}
.article-content blockquote{border-left:4px solid #d4a24e;background:#0f0707;padding:10px 14px;margin:12px 0;color:#bfa985;font-size:14px;}
.article-content code{background:#0f0707;border:1px solid #3a2410;padding:2px 6px;color:#ffd9a0;font-size:13px;}
.article-content pre{background:#0f0707;border:1px solid #3a2410;padding:14px;overflow-x:auto;margin:12px 0;}
.article-content pre code{border:0;padding:0;}
.article-content video{max-width:100%;}
.related{background:#1a0c0c;border:1px solid #4a2a1a;padding:18px;}
.related h3{color:#ffe08a;font-size:16px;margin-bottom:12px;border-bottom:1px solid #3a2410;padding-bottom:8px;}
.related ul{list-style:none;}
.related li{padding:7px 0;border-bottom:1px dashed #3a2410;font-size:14px;display:flex;justify-content:space-between;gap:14px;}
.related li:last-child{border-bottom:0;}
.related a{color:#d9cbb0;}
.related a:hover{color:#ffd24a;}
.related .d{color:#7a5a30;font-size:12px;flex:0 0 auto;}

/* 分页 */
.pager{display:flex;justify-content:center;gap:8px;margin:22px 0;}
.pager a,.pager span{
  display:inline-block;min-width:38px;padding:7px 12px;text-align:center;
  background:#1a0c0c;border:1px solid #4a2a1a;color:#d9cbb0;font-size:13px;
}
.pager a:hover{border-color:#d4a24e;color:#ffe08a;}
.pager .cur{background:#d4a24e;color:#1a0c0c;font-weight:bold;border-color:#d4a24e;}

/* 页脚 */
.footer{background:#0f0707;border-top:3px solid #c62828;padding:22px 0;margin-top:30px;font-size:13px;}
.footer .inner{max-width:1100px;margin:0 auto;padding:0 14px;display:flex;flex-wrap:wrap;gap:20px;}
.footer .col{flex:1;min-width:200px;}
.footer h4{color:#ffe08a;font-size:15px;margin-bottom:8px;letter-spacing:1px;}
.footer ul{list-style:none;}
.footer li{padding:2px 0;color:#8a6a3a;font-size:12px;}
.footer li a{color:#8a6a3a;}
.footer li a:hover{color:#ffd24a;}
.footer .cp{text-align:center;color:#5a4420;font-size:11px;margin-top:18px;border-top:1px solid #2a1608;padding-top:12px;}
/* 版权行内的网站地图等入口 */
.footer .cp a{color:var(--link,#7ae0ff);text-decoration:none;margin-left:10px;padding-left:10px;border-left:1px solid #3a2410;}
.footer .cp a:hover{color:#ffd24a;text-decoration:underline;}
/* 友情链接：页脚 .inner 内的整行，与上方三列同容器左对齐，上方带分隔线 */
.footer .fl{flex:0 0 100%;margin:0;padding:16px 0 0;border-top:1px dashed rgba(255,224,138,.18);font-size:13px;line-height:1.9;color:var(--sub,#a49ad9);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;}
.footer .fl b{color:var(--goldtext,#ffe08a);font-weight:normal;letter-spacing:1px;}
.footer .fl a{color:var(--link,#7ae0ff);text-decoration:none;}
.footer .fl a:hover{color:#ffd24a;text-decoration:underline;}

/* 灯箱 */
#lightbox{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:99;cursor:pointer;}
#lightbox img{max-width:92%;max-height:92%;border:2px solid #d4a24e;}

/* ===== 移动端 ===== */
@media (max-width:768px){
  .header{flex-direction:column;align-items:flex-start;}
  .nav{margin-left:0;flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px;}
  .nav a{flex:0 0 auto;font-size:13px;padding:6px 12px;}
  .cls-switch{flex-direction:column;}
  .cls-stage{height:340px;flex:none;width:100%;}
  .cls-info{min-width:0;}
  .cls-info h3{font-size:26px;letter-spacing:4px;}
  .cls-info p{font-size:13px;}
  .cls-tabs .tab{font-size:14px;letter-spacing:1px;padding:10px 4px;}
  .codes{grid-template-columns:repeat(2,1fr);gap:8px;}
  .hero .t1{font-size:24px;}
  .hero .t2{font-size:13px;}
  .shot-item{width:62%;}
  .news-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .news-item .ni-img{height:110px;}
  .article-box{padding:18px 16px;}
  .article-box .a-title{font-size:20px;}
  .welfare .frow{flex-direction:column;}
  .downbtn{min-width:70%;width:70%;}
}