/* ============================================================
   好完美发布网 www.haowm.com
   完美国际私服 / 完美世界私服发布网 独家SEO模板
   主色调：橙金 · 大气隆重 · 深色奢华风
   样式文件独立编写 style.css
   ============================================================ */

:root{
  --bg:#171006;
  --bg2:#221708;
  --card:rgba(28,19,8,.94);
  --card2:rgba(38,26,11,.9);
  --gold:#f5b942;
  --gold2:#ffd36b;
  --gold3:#c98a1b;
  --orange:#ff7a1a;
  --orange2:#ff9a3c;
  --red:#ff4d2e;
  --text:#f2e8cf;
  --text2:#c9b98f;
  --text3:#9c8c62;
  --border:rgba(245,185,66,.30);
  --border2:rgba(245,185,66,.14);
  --grad:linear-gradient(135deg,#ffe08a 0%,#f5a623 40%,#ff6f00 100%);
  --grad2:linear-gradient(90deg,rgba(245,185,66,.15),rgba(255,122,26,.05));
  --shadow:0 8px 30px rgba(0,0,0,.55);
  --radius:10px;
  --font:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 50% -100px, rgba(245,185,66,.10), transparent 60%),
    url("../images/bj.png") center top / cover fixed no-repeat,
    var(--bg);
  line-height:1.75;
  font-size:15px;
  min-height:100vh;
}
img{max-width:100%;border:0;display:block;}
a{color:var(--gold2);text-decoration:none;transition:color .25s;}
a:hover{color:#ffb84d;}
ul,ol{list-style:none;}
input,button{font-family:inherit;}
.container{max-width:1200px;margin:0 auto;padding:0 14px;}
::selection{background:rgba(245,185,66,.4);color:#fff;}

/* ============ 顶栏 ============ */
.topbar{
  background:linear-gradient(90deg,#0d0903,#241703 50%,#0d0903);
  border-bottom:1px solid var(--border2);
  font-size:13px;color:var(--text2);
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:34px;gap:10px;}
.topbar .tb-tel{color:var(--gold2);white-space:nowrap;}
.topbar .tb-kw{overflow:hidden;flex:1;text-align:center;color:var(--text3);white-space:nowrap;}
.topbar .tb-kw b{color:var(--gold);font-weight:400;margin:0 8px;}

/* ============ 主头部 ============ */
.main-header{
  position:sticky;top:0;z-index:999;
  background:linear-gradient(180deg,rgba(20,13,4,.97),rgba(28,19,8,.97));
  border-bottom:2px solid var(--border);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
}
.header-inner{display:flex;align-items:center;gap:18px;height:76px;}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo img{height:52px;width:auto;}
.logo .logo-text{display:none;}
.main-nav{flex:1;}
.main-nav ul{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.main-nav li a{
  display:block;padding:8px 13px;color:var(--text);
  font-size:15px;position:relative;border-radius:6px;white-space:nowrap;
}
.main-nav li a:hover{color:#fff;background:rgba(245,185,66,.12);}
.main-nav li a.hot{color:#ffd36b;}
.main-nav li a.hot::after{content:"HOT";position:absolute;top:-6px;right:-2px;font-size:9px;color:#fff;background:linear-gradient(135deg,#ff7a1a,#ff3d00);padding:0 4px;border-radius:4px;line-height:14px;}
.header-search{display:flex;align-items:center;flex-shrink:0;gap:6px;}
.header-search input{
  width:150px;height:34px;border:1px solid var(--border);
  background:rgba(0,0,0,.35);color:var(--text);border-radius:18px;
  padding:0 14px;font-size:13px;outline:none;transition:.3s;
}
.header-search input:focus{width:200px;border-color:var(--gold);}
.header-search button{
  height:34px;padding:0 16px;border:0;border-radius:18px;cursor:pointer;
  background:var(--grad);color:#3a1d00;font-weight:700;font-size:13px;
  transition:transform .2s,box-shadow .2s;
}
.header-search button:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(255,122,26,.5);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:26px;height:3px;border-radius:2px;background:var(--gold);transition:.3s;}

/* ============ 移动端导航 ============ */
.mobile-nav{display:none;background:rgba(18,12,4,.99);border-top:1px solid var(--border2);}
.mobile-nav ul{padding:8px 14px 14px;}
.mobile-nav li a{display:block;padding:11px 8px;color:var(--text);border-bottom:1px dashed var(--border2);font-size:15px;}
.mobile-nav li a:hover{color:#ffd36b;padding-left:14px;}
.mobile-nav.open{display:block;}

/* ============ 横幅 ============ */
.banner-wrap{margin:16px auto 0;max-width:1200px;padding:0 14px;}
.banner-box{
  position:relative;overflow:hidden;border-radius:12px;
  border:1px solid var(--border);box-shadow:var(--shadow);
}
.banner-box img{width:100%;height:auto;}
.banner-ad{margin-top:14px;}
.ad-inner{
  border:2px dashed rgba(245,185,66,.45);border-radius:10px;
  background:rgba(0,0,0,.28);color:var(--text3);text-align:center;
  padding:16px 10px;font-size:13px;min-height:60px;
}

/* ============ 公告滚动 ============ */
.notice{
  margin-top:16px;background:var(--card);border:1px solid var(--border2);
  border-left:4px solid var(--gold);border-radius:8px;overflow:hidden;
  display:flex;align-items:center;height:42px;
}
.notice .notice-tag{
  background:var(--grad);color:#3a1d00;font-weight:700;font-size:13px;
  padding:0 14px;height:100%;display:flex;align-items:center;flex-shrink:0;
}
.notice .notice-marquee{flex:1;overflow:hidden;white-space:nowrap;}
.notice .notice-marquee span{
  display:inline-block;padding-left:100%;animation:marquee 30s linear infinite;
  font-size:14px;color:var(--text2);
}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-100%);}}
.notice .notice-marquee span:hover{animation-play-state:paused;}
.notice a{color:var(--gold2);}
.notice a:hover{color:#fff;}

/* ============ 版块标题 ============ */
.section{
  margin-top:26px;
}
.section-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:10px;margin-bottom:14px;
  border-bottom:2px solid var(--border);position:relative;
}
.section-head::after{
  content:"";position:absolute;left:0;bottom:-2px;width:90px;height:2px;background:var(--grad);
}
.section-title{
  display:flex;align-items:center;gap:10px;font-size:20px;color:#fff;font-weight:700;
  letter-spacing:1px;
}
.section-title .ico{
  width:26px;height:26px;border-radius:6px;background:var(--grad);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;color:#3a1d00;font-weight:900;flex-shrink:0;
}
.section-more{font-size:13px;color:var(--text3);}
.section-more:hover{color:var(--gold);}

/* ============ 私服推荐卡片 ============ */
.sf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.sf-card{
  background:var(--card);border:1px solid var(--border2);border-radius:var(--radius);
  overflow:hidden;position:relative;transition:.3s;
}
.sf-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 10px 26px rgba(245,185,66,.16);}
.sf-card .sf-pic{position:relative;height:130px;overflow:hidden;}
.sf-card .sf-pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.sf-card:hover .sf-pic img{transform:scale(1.08);}
.sf-card .sf-tag{
  position:absolute;top:8px;left:8px;background:var(--grad);color:#3a1d00;
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;
}
.sf-card .sf-new{
  position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#ffd36b;
  font-size:11px;padding:2px 8px;border-radius:4px;border:1px solid var(--border);
}
.sf-card .sf-body{padding:12px 12px 14px;}
.sf-card h3{font-size:15px;color:#ffe9b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-card h3 a{color:inherit;}
.sf-card h3 a:hover{color:#ffd36b;}
.sf-card .sf-meta{font-size:12px;color:var(--text3);margin-top:6px;display:flex;justify-content:space-between;}
.sf-card .sf-btn{
  display:block;text-align:center;margin-top:10px;padding:7px 0;border-radius:6px;
  background:var(--grad2);border:1px solid var(--border);color:var(--gold2);
  font-size:13px;transition:.25s;
}
.sf-card .sf-btn:hover{background:var(--grad);color:#3a1d00;font-weight:700;}

/* ============ 分类导航（游戏图卡） ============ */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.cat-card{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border2);
  background:var(--card);transition:.3s;display:block;
}
.cat-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 10px 26px rgba(245,185,66,.18);}
.cat-card .cat-pic{height:110px;overflow:hidden;}
.cat-card .cat-pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.cat-card:hover .cat-pic img{transform:scale(1.1);}
.cat-card .cat-name{
  position:absolute;left:0;right:0;bottom:0;padding:8px 10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
  color:#fff;font-size:14px;font-weight:700;text-align:center;letter-spacing:1px;
}
.cat-card .cat-count{
  position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);
  color:#ffd36b;font-size:11px;padding:2px 7px;border-radius:4px;
}

/* ============ 双栏布局 ============ */
.main-grid{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start;}
.article-list{display:flex;flex-direction:column;gap:12px;}
.article-item{
  display:flex;gap:14px;background:var(--card);border:1px solid var(--border2);
  border-radius:var(--radius);padding:12px;transition:.25s;
}
.article-item:hover{border-color:var(--gold);transform:translateX(3px);}
.article-item .a-thumb{width:150px;height:96px;flex-shrink:0;border-radius:6px;overflow:hidden;}
.article-item .a-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.article-item:hover .a-thumb img{transform:scale(1.06);}
.article-item .a-info{flex:1;min-width:0;display:flex;flex-direction:column;}
.article-item h3{font-size:15px;line-height:1.4;color:#ffe9b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.article-item h3 a{color:inherit;}
.article-item h3 a:hover{color:#ffd36b;}
.article-item .a-desc{
  font-size:12.5px;color:var(--text2);margin-top:5px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.article-item .a-meta{
  margin-top:auto;padding-top:6px;font-size:12px;color:var(--text3);
  display:flex;gap:14px;
}
.article-item .a-meta a{color:var(--gold3);}

/* ============ 侧栏 ============ */
.side-box{
  background:var(--card);border:1px solid var(--border2);border-radius:var(--radius);
  padding:14px;margin-bottom:16px;
}
.side-box .side-title{
  font-size:16px;color:#fff;font-weight:700;padding-bottom:8px;margin-bottom:10px;
  border-bottom:1px solid var(--border);position:relative;padding-left:12px;
}
.side-box .side-title::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:2px;background:var(--grad);
}
.side-list li{padding:7px 0;border-bottom:1px dashed var(--border2);font-size:13.5px;}
.side-list li:last-child{border-bottom:0;}
.side-list li a{color:var(--text2);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.side-list li a:hover{color:#ffd36b;padding-left:4px;}
.side-list li em{color:var(--gold3);font-style:normal;margin-right:6px;}
.side-rank li{display:flex;align-items:center;gap:8px;}
.side-rank .num{
  width:20px;height:20px;border-radius:4px;background:rgba(245,185,66,.15);
  color:var(--gold);font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.side-rank li:nth-child(-n+3) .num{background:var(--grad);color:#3a1d00;font-weight:700;}
.side-rank li a{flex:1;font-size:13px;}

/* 标签云 */
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;}
.tag-cloud a{
  font-size:12.5px;color:var(--text2);border:1px solid var(--border2);
  padding:4px 12px;border-radius:14px;background:rgba(245,185,66,.05);transition:.25s;
}
.tag-cloud a:hover{background:var(--grad);color:#3a1d00;border-color:transparent;font-weight:700;}

/* ============ 下载专区 ============ */
.download-zone{
  background:linear-gradient(135deg,rgba(245,185,66,.12),rgba(255,122,26,.06)),var(--card);
  border:1px solid var(--border);border-radius:var(--radius);padding:22px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.download-zone .dz-pic{width:190px;border-radius:8px;overflow:hidden;border:1px solid var(--border);flex-shrink:0;}
.download-zone .dz-pic img{width:100%;height:auto;}
.download-zone .dz-info{flex:1;min-width:260px;}
.download-zone h3{font-size:19px;color:#ffe9b0;}
.download-zone p{font-size:13.5px;color:var(--text2);margin-top:6px;}
.download-zone .dz-btn{
  display:inline-block;margin-top:12px;padding:11px 30px;border-radius:8px;
  background:var(--grad);color:#3a1d00;font-size:16px;font-weight:700;letter-spacing:2px;
  box-shadow:0 6px 18px rgba(255,122,26,.35);transition:.25s;
}
.download-zone .dz-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,122,26,.5);color:#2a1400;}

/* ============ 友情链接 / 页脚 ============ */
.link-list{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:13px;}
.link-list a{color:var(--text3);}
.link-list a:hover{color:var(--gold);}
.site-footer{
  margin-top:34px;border-top:2px solid var(--border);
  background:linear-gradient(180deg,rgba(18,12,4,.92),rgba(10,7,2,.97));
  padding:26px 0 22px;font-size:13px;color:var(--text3);
}
.site-footer .f-logo{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:12px;}
.site-footer .f-logo img{height:42px;}
.site-footer .f-nav{text-align:center;margin-bottom:10px;}
.site-footer .f-nav a{color:var(--text2);margin:0 9px;font-size:13px;}
.site-footer .f-nav a:hover{color:var(--gold);}
.site-footer .f-kw{text-align:center;line-height:2;color:var(--text3);}
.site-footer .f-kw b{color:var(--gold3);font-weight:400;margin:0 6px;}
.site-footer .f-copy{text-align:center;margin-top:8px;color:var(--text3);}
.site-footer .f-copy a{color:var(--gold3);}

/* ============ 面包屑 ============ */
.crumbs{
  margin-top:16px;font-size:13px;color:var(--text3);
  background:var(--card);border:1px solid var(--border2);border-radius:8px;padding:8px 14px;
}
.crumbs a{color:var(--gold3);}
.crumbs a:hover{color:var(--gold);}
.crumbs .sep{margin:0 8px;color:var(--text3);}

/* ============ 文章页 ============ */
.page-main{display:grid;grid-template-columns:1fr 330px;gap:18px;margin-top:16px;align-items:start;}
.article-box{
  background:var(--card);border:1px solid var(--border2);border-radius:var(--radius);
  padding:26px 28px;
}
.article-box h1{font-size:24px;color:#fff;line-height:1.5;}
.article-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--text3);
  border-bottom:1px solid var(--border2);padding:12px 0;margin-bottom:18px;
}
.article-meta a{color:var(--gold3);}
.article-cover{border-radius:8px;overflow:hidden;border:1px solid var(--border);margin-bottom:18px;}
.article-cover img{width:100%;height:auto;}
.article-content{font-size:15px;color:var(--text);}
.article-content p{margin:12px 0;text-align:justify;}
.article-content h2{
  font-size:19px;color:#ffe9b0;margin:24px 0 10px;padding-left:12px;position:relative;line-height:1.5;
}
.article-content h2::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;border-radius:3px;background:var(--grad);
}
.article-content h3{font-size:16px;color:#ffd36b;margin:16px 0 8px;}
.article-content ul,.article-content ol{margin:10px 0 10px 22px;}
.article-content ul li{list-style:disc;margin:6px 0;color:var(--text);}
.article-content ol li{list-style:decimal;margin:6px 0;}
.article-content strong{color:#ffd36b;}
.article-content a.inlink{color:#ff9a3c;border-bottom:1px dashed rgba(255,154,60,.5);}
.tip-box{
  background:linear-gradient(135deg,rgba(245,185,66,.10),rgba(255,122,26,.05));
  border:1px solid var(--border);border-left:4px solid var(--gold);
  border-radius:8px;padding:14px 16px;margin:18px 0;font-size:14px;
}
.tip-box b{color:#ffd36b;}
.faq-item{margin:14px 0;background:rgba(0,0,0,.22);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;}
.faq-item .q{color:#ffd36b;font-weight:700;font-size:14.5px;}
.faq-item .a{color:var(--text2);font-size:14px;margin-top:6px;}
.download-cta{
  margin:20px 0;text-align:center;background:linear-gradient(135deg,rgba(245,185,66,.14),rgba(255,122,26,.06));
  border:1px solid var(--border);border-radius:10px;padding:20px 16px;
}
.download-cta p{color:var(--text2);font-size:13px;margin-bottom:12px;}
.download-cta a.dz-btn{
  display:inline-block;padding:12px 34px;border-radius:8px;background:var(--grad);
  color:#3a1d00;font-size:16px;font-weight:700;letter-spacing:1px;
  box-shadow:0 6px 18px rgba(255,122,26,.35);transition:.25s;
}
.download-cta a.dz-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,122,26,.5);}
.related{margin-top:22px;}
.related h3{font-size:16px;color:#ffe9b0;padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:10px;}
.related ul li{padding:6px 0;font-size:14px;border-bottom:1px dashed var(--border2);}
.related ul li a{color:var(--text2);}
.related ul li a:hover{color:#ffd36b;padding-left:4px;}
.related ul li em{color:var(--gold3);font-style:normal;font-size:12px;margin-right:6px;}
.prevnext{
  display:flex;justify-content:space-between;gap:12px;margin-top:18px;
  background:var(--card);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;font-size:13.5px;
}
.prevnext a{color:var(--text2);max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prevnext a:hover{color:var(--gold);}

/* ============ 分类页 ============ */
.cat-head{
  margin-top:16px;background:var(--card);border:1px solid var(--border2);border-radius:var(--radius);
  padding:18px 20px;position:relative;overflow:hidden;
}
.cat-head::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);
}
.cat-head h1{font-size:22px;color:#ffe9b0;}
.cat-head p{font-size:13.5px;color:var(--text2);margin-top:8px;line-height:1.8;}
.cat-head .cat-kw{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;}
.cat-head .cat-kw span{
  font-size:12px;border:1px solid var(--border2);color:var(--gold3);
  padding:2px 10px;border-radius:12px;
}
.pagination{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px 0 6px;
}
.pagination a,.pagination span{
  min-width:34px;height:34px;line-height:34px;text-align:center;padding:0 10px;
  background:var(--card);border:1px solid var(--border2);border-radius:6px;
  font-size:13px;color:var(--text2);transition:.2s;
}
.pagination a:hover{border-color:var(--gold);color:#ffd36b;}
.pagination .cur{background:var(--grad);color:#3a1d00;font-weight:700;border-color:transparent;}
.pagination .dot{background:none;border:0;}

/* ============ 返回顶部 ============ */
.back-top{
  position:fixed;right:22px;bottom:30px;width:44px;height:44px;border-radius:10px;
  background:var(--card);border:1px solid var(--border);color:var(--gold);
  font-size:20px;cursor:pointer;z-index:99;display:none;align-items:center;justify-content:center;
  transition:.3s;box-shadow:var(--shadow);
}
.back-top:hover{background:var(--grad);color:#3a1d00;transform:translateY(-3px);}
.back-top.show{display:flex;}

/* ============ 响应式 ============ */
@media (max-width:1024px){
  .sf-grid{grid-template-columns:repeat(3,1fr);}
  .cat-grid{grid-template-columns:repeat(4,1fr);}
  .main-grid,.page-main{grid-template-columns:1fr;}
  .header-search input{width:110px;}
  .header-search input:focus{width:150px;}
}
@media (max-width:768px){
  body{font-size:14px;}
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .header-search{display:none;}
  .header-inner{height:64px;}
  .logo img{height:44px;}
  .sf-grid{grid-template-columns:repeat(2,1fr);}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .article-item{flex-direction:column;}
  .article-item .a-thumb{width:100%;height:150px;}
  .section-title{font-size:17px;}
  .article-box{padding:18px 15px;}
  .article-box h1{font-size:19px;}
  .download-zone{flex-direction:column;text-align:center;}
  .download-zone .dz-pic{width:100%;}
  .topbar .tb-kw{display:none;}
  .back-top{right:12px;bottom:20px;width:38px;height:38px;}
  .banner-wrap{padding:0 8px;}
}
@media (max-width:480px){
  .sf-grid{grid-template-columns:1fr;}
  .cat-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .cat-card .cat-pic{height:90px;}
  .crumbs{font-size:12px;}
  .prevnext{flex-direction:column;}
}