/* ========== 全局重置 ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.8;color:#e0e0e0;background:#0a0a14;overflow-x:hidden}
a{color:#f0c060;text-decoration:none;transition:color .25s}
a:hover{color:#ffd700;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-weight:700;line-height:1.3;color:#fff}

/* ========== 容器 ========== */
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ========== 顶部通知栏 ========== */
.top-bar{background:linear-gradient(90deg,#1a0a2e,#2a1050,#1a0a2e);border-bottom:1px solid #333;padding:8px 0;font-size:13px;color:#aaa;position:relative;z-index:100}
.top-bar .container{display:flex;justify-content:space-between;align-items:center}
.top-bar-left{color:#f0c060}
.top-bar-right a{color:#ccc;margin:0 6px;font-size:13px}
.top-bar-right a:hover{color:#ffd700}

/* ========== 头部导航 ========== */
.header{background:rgba(10,10,20,.95);backdrop-filter:blur(12px);border-bottom:2px solid #c8a030;position:sticky;top:0;z-index:99;padding:15px 0}
.header-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}
.logo h1{font-size:26px;margin-bottom:2px}
.logo h1 a{color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,.4);font-size:26px;font-weight:900;letter-spacing:1px}
.logo p{font-size:12px;color:#888;letter-spacing:2px}
.main-nav ul{display:flex;gap:5px;flex-wrap:wrap}
.main-nav li a{display:block;padding:10px 18px;border-radius:6px;font-size:15px;font-weight:600;color:#ccc;transition:all .3s;border:1px solid transparent}
.main-nav li a:hover{background:rgba(200,160,48,.15);color:#ffd700;border-color:rgba(200,160,48,.3)}
.main-nav li.active a{background:linear-gradient(135deg,#c8a030,#ffd700);color:#1a0a2e;font-weight:700;border-color:#ffd700;box-shadow:0 0 15px rgba(255,215,0,.3)}

/* ========== 主视觉横幅 ========== */
.hero{position:relative;padding:80px 0 70px;overflow:hidden;background:
  radial-gradient(ellipse 80% 60% at 50% 40%,rgba(200,160,48,.12),transparent),
  radial-gradient(ellipse 60% 80% at 20% 60%,rgba(100,50,200,.15),transparent),
  radial-gradient(ellipse 60% 80% at 80% 60%,rgba(200,50,50,.1),transparent),
  linear-gradient(180deg,#0d0d1a,#151530,#0d0d1a)}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(2px 2px at 10% 20%,rgba(255,215,0,.3),transparent),
  radial-gradient(2px 2px at 30% 70%,rgba(255,215,0,.2),transparent),
  radial-gradient(1px 1px at 50% 30%,rgba(255,255,255,.15),transparent),
  radial-gradient(2px 2px at 70% 80%,rgba(255,215,0,.2),transparent),
  radial-gradient(1px 1px at 90% 40%,rgba(255,255,255,.1),transparent);
  animation:twinkle 8s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.6}}
.hero-content{position:relative;text-align:center;z-index:1}
.hero-badge{display:inline-block;background:linear-gradient(135deg,#c00,#f30);color:#fff;padding:6px 20px;border-radius:20px;font-size:13px;font-weight:700;margin-bottom:20px;box-shadow:0 4px 15px rgba(200,0,0,.4);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.hero h2{font-size:48px;margin-bottom:15px;color:#fff;text-shadow:0 0 40px rgba(255,215,0,.3);background:linear-gradient(135deg,#fff,#f0c060,#ffd700);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:20px;color:#aaa;margin-bottom:35px}
.hero-actions{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-bottom:50px}
.btn{display:inline-block;padding:14px 32px;border-radius:8px;font-size:16px;font-weight:700;transition:all .3s;border:2px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,#c00,#f30);color:#fff;border-color:#f30;box-shadow:0 4px 20px rgba(200,0,0,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(200,0,0,.6);color:#fff}
.btn-gold{background:linear-gradient(135deg,#c8a030,#ffd700);color:#1a0a2e;border-color:#ffd700;box-shadow:0 4px 20px rgba(200,160,48,.4)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(200,160,48,.6);color:#1a0a2e}
.btn-purple{background:linear-gradient(135deg,#6040a0,#9060e0);color:#fff;border-color:#9060e0;box-shadow:0 4px 20px rgba(100,60,200,.4)}
.btn-purple:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(100,60,200,.6);color:#fff}
.hero-stats{display:flex;justify-content:center;gap:50px;flex-wrap:wrap}
.stat-item{text-align:center}
.stat-item strong{display:block;font-size:36px;color:#ffd700;font-weight:900;text-shadow:0 0 10px rgba(255,215,0,.3)}
.stat-item span{font-size:14px;color:#888}

/* ========== 通用区块 ========== */
.section{padding:70px 0;position:relative}
.section-dark{background:linear-gradient(180deg,#0d0d1a,#111125,#0d0d1a)}
.section-light{background:linear-gradient(180deg,#111125,#15153a,#111125)}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;flex-wrap:wrap;gap:10px;border-left:4px solid #ffd700;padding-left:15px}
.section-header h2{font-size:28px;color:#fff}
.section-header h2::before{margin-right:8px}
.section-date{font-size:14px;color:#888;background:rgba(200,160,48,.1);padding:4px 12px;border-radius:4px;border:1px solid rgba(200,160,48,.2)}

/* ========== 服务器卡片网格 ========== */
.server-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px}
.server-card{background:linear-gradient(145deg,rgba(25,25,50,.9),rgba(15,15,35,.9));border:1px solid rgba(200,160,48,.2);border-radius:14px;padding:25px;position:relative;transition:all .35s;overflow:hidden}
.server-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#c8a030,#ffd700,#c8a030,transparent);opacity:0;transition:opacity .3s}
.server-card:hover{transform:translateY(-5px);border-color:rgba(200,160,48,.5);box-shadow:0 15px 40px rgba(0,0,0,.5),0 0 30px rgba(200,160,48,.1)}
.server-card:hover::before{opacity:1}
.server-tag{position:absolute;top:15px;right:15px;padding:4px 12px;border-radius:4px;font-size:12px;font-weight:700}
.server-tag.hot{background:linear-gradient(135deg,#c00,#f30);color:#fff}
.server-tag.new{background:linear-gradient(135deg,#0066cc,#0099ff);color:#fff}
.server-card h3{font-size:19px;margin-bottom:12px;color:#ffd700;padding-right:70px}
.server-meta{display:flex;gap:15px;margin-bottom:12px;font-size:13px;color:#999;flex-wrap:wrap}
.server-meta span{background:rgba(255,255,255,.05);padding:3px 10px;border-radius:4px}
.server-card p{font-size:14px;color:#bbb;line-height:1.7;margin-bottom:15px}
.server-link{display:inline-block;color:#ffd700;font-weight:600;font-size:14px;padding:6px 0;border-bottom:1px solid transparent;transition:all .3s}
.server-link:hover{border-bottom-color:#ffd700;color:#fff}

/* ========== 文章卡片 ========== */
.article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:28px}
.article-card{background:linear-gradient(145deg,rgba(20,20,45,.9),rgba(10,10,30,.9));border:1px solid rgba(100,100,200,.15);border-radius:14px;overflow:hidden;transition:all .35s}
.article-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(0,0,0,.4);border-color:rgba(100,100,200,.35)}
.article-img{height:180px;position:relative}
.article-img-1{background:linear-gradient(135deg,#2a1050,#4a2080),radial-gradient(circle at 30% 40%,rgba(255,100,100,.3),transparent),radial-gradient(circle at 70% 60%,rgba(100,100,255,.3),transparent);background-blend-mode:screen}
.article-img-2{background:linear-gradient(135deg,#1a3050,#2a5080),radial-gradient(circle at 40% 50%,rgba(100,200,255,.3),transparent),radial-gradient(circle at 60% 30%,rgba(200,255,200,.2),transparent);background-blend-mode:screen}
.article-img-3{background:linear-gradient(135deg,#3a2010,#5a4020),radial-gradient(circle at 50% 50%,rgba(255,180,50,.3),transparent),radial-gradient(circle at 30% 70%,rgba(255,100,50,.2),transparent);background-blend-mode:screen}
.article-img::after{content:"⚔️";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:50px;opacity:.7}
.article-body{padding:25px}
.article-body h3{font-size:18px;margin-bottom:12px;color:#fff;line-height:1.4}
.article-body p{font-size:14px;color:#aaa;line-height:1.8;margin-bottom:15px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.read-more{color:#ffd700;font-weight:600;font-size:14px}
.read-more:hover{color:#fff}

/* ========== 特色卡片 ========== */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.feature-card{background:linear-gradient(145deg,rgba(20,20,50,.8),rgba(15,15,40,.8));border:1px solid rgba(200,160,48,.15);border-radius:12px;padding:30px 25px;text-align:center;transition:all .35s;position:relative;overflow:hidden}
.feature-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(200,160,48,.08),transparent 70%);opacity:0;transition:opacity .3s}
.feature-card:hover{transform:translateY(-5px);border-color:rgba(200,160,48,.4);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.feature-card:hover::before{opacity:1}
.feature-icon{font-size:42px;margin-bottom:15px;display:block}
.feature-card h3{font-size:18px;color:#ffd700;margin-bottom:10px}
.feature-card p{font-size:14px;color:#999;line-height:1.7}

/* ========== 资讯列表 ========== */
.news-list{display:grid;gap:0}
.news-item{display:flex;align-items:center;gap:15px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);transition:all .25s}
.news-item:hover{background:rgba(200,160,48,.06);padding-left:25px}
.news-date{font-size:13px;color:#888;min-width:50px;font-weight:600}
.news-tag{font-size:11px;padding:2px 8px;border-radius:3px;min-width:48px;text-align:center;font-weight:600}
.tag-hot{background:#c00;color:#fff}
.tag-new{background:#0066cc;color:#fff}
.tag-rec{background:#c8a030;color:#1a0a2e}
.news-item a{flex:1;color:#ddd;font-size:15px;transition:color .25s}
.news-item a:hover{color:#ffd700}

/* ========== 评价卡片 ========== */
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.review-card{background:linear-gradient(145deg,rgba(30,25,50,.8),rgba(20,15,40,.8));border:1px solid rgba(150,100,200,.2);border-radius:12px;padding:25px;transition:all .3s}
.review-card:hover{transform:translateY(-3px);border-color:rgba(150,100,200,.4)}
.review-stars{font-size:18px;margin-bottom:12px}
.review-card p{font-size:14px;color:#ccc;line-height:1.7;margin-bottom:12px;font-style:italic}
.reviewer{font-size:13px;color:#888;text-align:right}

/* ========== FAQ ========== */
.faq-list{display:grid;gap:12px}
.faq-item{background:rgba(20,20,45,.7);border:1px solid rgba(255,255,255,.08);border-radius:10px;overflow:hidden;transition:all .3s}
.faq-item:hover{border-color:rgba(200,160,48,.25)}
.faq-item summary{cursor:pointer;padding:18px 22px;font-size:16px;font-weight:600;color:#ddd;list-style:none;position:relative;user-select:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"▼";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:12px;color:#888;transition:transform .3s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.faq-item[open] summary{color:#ffd700;border-bottom:1px solid rgba(255,255,255,.06)}
.faq-item p{padding:5px 22px 20px;font-size:14px;color:#aaa;line-height:1.8}

/* ========== 底部 ========== */
.footer{background:linear-gradient(180deg,#080810,#0d0d18);border-top:2px solid #c8a030;padding:50px 0 25px;margin-top:0}
.footer-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:35px;margin-bottom:35px}
.footer-col h4{font-size:16px;color:#ffd700;margin-bottom:15px;padding-bottom:8px;border-bottom:1px solid rgba(200,160,48,.2)}
.footer-col p{font-size:13px;color:#888;line-height:1.8;margin-bottom:10px}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{font-size:14px;color:#aaa}
.footer-col ul li a:hover{color:#ffd700;padding-left:3px}
.footer-bottom{text-align:center;padding-top:25px;border-top:1px solid rgba(255,255,255,.06)}
.footer-bottom p{font-size:12px;color:#666;margin-bottom:5px;line-height:1.6}

/* ========== 响应式 ========== */
@media(max-width:900px){
  .hero h2{font-size:32px}
  .hero-sub{font-size:16px}
  .hero-stats{gap:25px}
  .stat-item strong{font-size:28px}
  .header-inner{flex-direction:column}
  .main-nav ul{justify-content:center}
  .section-header h2{font-size:22px}
}
@media(max-width:600px){
  .hero{padding:50px 0}
  .hero h2{font-size:24px}
  .hero-actions{flex-direction:column;align-items:center}
  .btn{width:100%;max-width:280px;text-align:center}
  .server-grid{grid-template-columns:1fr}
  .article-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .review-grid{grid-template-columns:1fr}
  .news-item{flex-wrap:wrap;gap:8px}
  .top-bar .container{flex-direction:column;gap:5px;text-align:center}
}

/* ========== 开服表格 ========== */
.kaifu-table-wrapper,.compare-table-wrapper{overflow-x:auto;border-radius:12px;border:1px solid rgba(200,160,48,.15)}
.kaifu-table{width:100%;border-collapse:collapse;min-width:700px}
.kaifu-table thead{background:linear-gradient(135deg,rgba(200,160,48,.2),rgba(100,50,200,.15))}
.kaifu-table th{padding:14px 12px;text-align:left;font-size:13px;font-weight:700;color:#ffd700;border-bottom:2px solid rgba(200,160,48,.3);white-space:nowrap}
.kaifu-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;color:#ccc;white-space:nowrap}
.kaifu-table tbody tr:hover{background:rgba(200,160,48,.06)}
.kaifu-table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.kaifu-table tbody tr:nth-child(even):hover{background:rgba(200,160,48,.08)}
.status{display:inline-block;padding:3px 10px;border-radius:3px;font-size:12px;font-weight:600}
.status.hot{background:#c00;color:#fff}
.status.online{background:#060;color:#fff}
.status.soon{background:#c8a030;color:#1a0a2e}
.tag{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:600;color:#fff}
.tag-purple{background:#6040a0}
.tag-blue{background:#0066cc}
.tag-gold{background:#c8a030;color:#1a0a2e}
.tag-red{background:#c00}
.tag-orange{background:#e07020}
.btn-sm{display:inline-block;padding:5px 14px;border-radius:4px;font-size:12px;font-weight:600;color:#fff;border:none;cursor:pointer;transition:all .25s}
.btn-sm.btn-primary{background:linear-gradient(135deg,#c00,#f30)}
.btn-sm.btn-gold{background:linear-gradient(135deg,#c8a030,#ffd700);color:#1a0a2e}
.btn-sm.btn-purple{background:linear-gradient(135deg,#6040a0,#9060e0)}

/* ========== 筛选栏 ========== */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.filter-btn{display:inline-block;padding:10px 22px;border-radius:8px;font-size:14px;font-weight:600;color:#aaa;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:all .3s}
.filter-btn:hover{color:#ffd700;border-color:rgba(200,160,48,.4);background:rgba(200,160,48,.08)}
.filter-btn.active{background:linear-gradient(135deg,#c8a030,#ffd700);color:#1a0a2e;border-color:#ffd700;font-weight:700}

/* ========== 本周开服 ========== */
.week-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.week-card{display:flex;gap:15px;background:linear-gradient(145deg,rgba(25,25,55,.8),rgba(15,15,40,.8));border:1px solid rgba(200,160,48,.15);border-radius:12px;padding:20px;transition:all .3s}
.week-card:hover{transform:translateY(-3px);border-color:rgba(200,160,48,.4);box-shadow:0 10px 25px rgba(0,0,0,.3)}
.week-day{background:linear-gradient(135deg,#c8a030,#ffd700);color:#1a0a2e;border-radius:10px;padding:10px 14px;text-align:center;font-weight:800;font-size:16px;min-width:60px}
.week-day small{font-size:12px;font-weight:600}
.week-info p{font-size:13px;color:#ccc;line-height:1.7}
.text-muted{color:#777!important;font-size:12px!important}

/* ========== 攻略卡片 ========== */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.guide-card{background:linear-gradient(145deg,rgba(20,20,50,.8),rgba(10,10,35,.8));border:1px solid rgba(100,100,200,.12);border-radius:12px;padding:28px;transition:all .35s}
.guide-card:hover{transform:translateY(-4px);border-color:rgba(100,100,200,.35);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.guide-card h3{font-size:17px;color:#ffd700;margin-bottom:12px;line-height:1.4}
.guide-card p{font-size:14px;color:#aaa;line-height:1.8}

/* ========== 攻略分类卡片 ========== */
.guide-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.guide-cat-card{display:block;text-align:center;background:linear-gradient(145deg,rgba(30,25,60,.8),rgba(20,15,50,.8));border:1px solid rgba(200,160,48,.15);border-radius:14px;padding:30px 20px;transition:all .35s}
.guide-cat-card:hover{transform:translateY(-5px);border-color:rgba(200,160,48,.5);box-shadow:0 12px 30px rgba(0,0,0,.4);background:linear-gradient(145deg,rgba(40,30,80,.9),rgba(25,20,60,.9))}
.cat-icon{font-size:42px;margin-bottom:12px;display:block}
.guide-cat-card h3{font-size:16px;color:#ffd700;margin-bottom:6px}
.guide-cat-card p{font-size:13px;color:#888}