* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Microsoft YaHei','PingFang SC',sans-serif; background:#10151f; color:#c0c8d0; line-height:1.6; position:relative; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; background:radial-gradient(circle at 20% 25%, rgba(212,175,55,.07) 0%, transparent 42%), radial-gradient(circle at 78% 70%, rgba(245,215,126,.05) 0%, transparent 48%), linear-gradient(180deg,#10151f 0%,#1a2330 45%,#10151f 100%); pointer-events:none; z-index:-2; }
body::after { content:""; position:fixed; inset:0; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320"><circle cx="30" cy="40" r="2" fill="%23f5d77e" opacity=".5"/><circle cx="150" cy="90" r="1.6" fill="%23e8c766" opacity=".35"/><circle cx="250" cy="60" r="2.4" fill="%23c9a03d" opacity=".4"/><circle cx="90" cy="200" r="1.8" fill="%23f5d77e" opacity=".3"/><circle cx="290" cy="170" r="1.4" fill="%23e8c766" opacity=".45"/><circle cx="200" cy="260" r="2.2" fill="%23c9a03d" opacity=".35"/><circle cx="60" cy="290" r="1.5" fill="%23f5d77e" opacity=".4"/><circle cx="310" cy="300" r="1.8" fill="%23e8c766" opacity=".3"/></svg>'); background-size:320px 320px; opacity:.5; animation:emberRise 26s linear infinite; pointer-events:none; z-index:-1; }
@keyframes emberRise { from { background-position:0 0; } to { background-position:0 -1280px; } }
@media (prefers-reduced-motion: reduce) { body::after { animation:none; } .logo-icon, .card-icon, .combo-icon { animation:none; } }
a:focus-visible { outline:2px solid #f5d77e; outline-offset:2px; border-radius:4px; }
.ic { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.container { max-width:1400px; margin:0 auto; padding:0 24px; position:relative; z-index:10; }

/* ===== 头部英雄区 ===== */
.hero-section { position:relative; margin-bottom:36px; border-radius:0 0 60px 60px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.55); }
.hero-background { position:absolute; inset:0; background:linear-gradient(135deg,#2a2415 0%,#1a2330 45%,#10151f 100%); }
.hero-background::before { content:""; position:absolute; inset:0; background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><defs><linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%23c9a03d" stop-opacity=".14"/><stop offset="1" stop-color="%239a751f" stop-opacity=".04"/></linearGradient><linearGradient id="g2" x1="1" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23f5d77e" stop-opacity=".10"/><stop offset="1" stop-color="%23c9a03d" stop-opacity=".02"/></linearGradient></defs><polygon points="0,400 180,210 360,340 540,150 720,300 900,110 1080,270 1200,180 1200,400" fill="url(%23g1)"/><polygon points="0,400 260,300 460,390 660,250 860,380 1060,220 1200,340 1200,400" fill="url(%23g2)"/><path d="M0,360 Q220,260 420,330 Q620,400 820,290 Q1020,180 1200,310 L1200,400 L0,400 Z" fill="rgba(201,160,61,.07)"/></svg>'); background-size:cover; background-position:center bottom; opacity:.85; }
.hero-background::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 28% 38%, rgba(245,215,126,.12) 0%, transparent 52%), radial-gradient(circle at 72% 62%, rgba(201,160,61,.08) 0%, transparent 50%); }
.top-bar { padding:46px 0 28px; position:relative; z-index:10; border-bottom:2px solid rgba(201,160,61,.35); backdrop-filter:blur(5px); }
.header-wrapper { display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.logo-area { display:flex; align-items:center; gap:24px; }
.logo-icon { width:110px; height:110px; flex:none; background:linear-gradient(145deg,#f0d070,#9a751f); border-radius:38% 62% 42% 58% / 58% 40% 60% 42%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 0 #6b5414, 0 16px 30px rgba(0,0,0,.45), inset 0 -4px 0 rgba(0,0,0,.25), inset 0 5px 14px rgba(255,255,255,.35); animation:floatGold 5s ease-in-out infinite; }
@keyframes floatGold { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-7px) rotate(3deg); } }
.logo-icon svg { width:54px; height:54px; color:#241a05; stroke-width:2; }
.site-title { font-size:64px; font-weight:900; line-height:1.15; letter-spacing:9px; background:linear-gradient(180deg,#fff 0%,#fdf3d0 30%,#f0d070 62%,#c9a03d 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:4px 4px 0 rgba(50,38,6,.55); margin-bottom:6px; }
.site-sub { font-family:Georgia,'Times New Roman',serif; font-size:17px; color:#f5d77e; letter-spacing:6px; font-weight:600; text-transform:uppercase; text-shadow:2px 2px 0 rgba(0,0,0,.5); }
.search-wrapper { flex:0 0 360px; }
.search-box { display:flex; align-items:center; background:rgba(201,160,61,.1); backdrop-filter:blur(10px); border:2px solid #c9a03d; border-radius:50px 14px 50px 14px; padding:5px 5px 5px 24px; box-shadow:0 5px 0 #5c4512, inset 0 2px 10px rgba(245,215,126,.1), 0 10px 20px rgba(0,0,0,.25); transition:all .3s; }
.search-box:focus-within { border-color:#f5d77e; transform:translateY(-2px); box-shadow:0 5px 0 #5c4512, inset 0 2px 14px rgba(245,215,126,.18), 0 12px 24px rgba(0,0,0,.3); }
.search-box input { flex:1; background:transparent; border:none; outline:none; padding:13px 10px; font-size:15px; color:#fff; }
.search-box input::placeholder { color:rgba(216,207,174,.55); letter-spacing:1px; }
.search-box button { display:flex; align-items:center; gap:8px; background:linear-gradient(135deg,#f0d070,#b08a28); border:none; border-radius:36px 10px 36px 10px; padding:13px 26px; color:#241a05; font-size:17px; font-weight:800; cursor:pointer; box-shadow:0 4px 0 #7a5c14; transition:all .2s; }
.search-box button:hover { transform:translateY(-2px); box-shadow:0 6px 0 #7a5c14; }
.search-box button svg { width:18px; height:18px; }
/* ===== 主导航 ===== */
.nav-wrapper { margin-top:32px; position:relative; }
.main-nav { display:flex; justify-content:space-between; align-items:flex-end; gap:6px; }
.nav-item { flex:1; text-decoration:none; }
.nav-item-inner { background:linear-gradient(180deg,rgba(201,160,61,.16) 0%,rgba(90,70,20,.42) 100%); border:2px solid rgba(245,215,126,.4); border-top:none; border-radius:0 0 26px 26px; padding:16px 6px 14px; text-align:center; clip-path:polygon(8% 0,92% 0,100% 24%,96% 100%,4% 100%,0 24%); box-shadow:inset 0 8px 18px rgba(245,215,126,.1), 0 -8px 18px rgba(0,0,0,.35); transition:all .2s; }
.nav-item:hover .nav-item-inner { background:linear-gradient(180deg,rgba(245,215,126,.28) 0%,rgba(140,105,30,.5) 100%); }
.nav-item.active .nav-item-inner { background:linear-gradient(180deg,#f0d070 0%,#c09838 100%); border-color:#f5d77e; box-shadow:inset 0 8px 20px rgba(255,255,255,.35), 0 -8px 22px rgba(201,160,61,.45); }
.nav-ic { width:30px; height:30px; color:#f5d77e; display:block; margin:0 auto 8px; }
.nav-item.active .nav-ic { color:#241a05; }
.nav-text { display:block; font-size:17px; font-weight:800; color:#f0e6c8; letter-spacing:3px; white-space:nowrap; }
.nav-item.active .nav-text { color:#241a05; }
.nav-sub { display:block; font-family:Georgia,serif; font-size:10px; letter-spacing:2px; color:#a08c50; margin-top:4px; text-transform:uppercase; }
.nav-item.active .nav-sub { color:#5c4512; }

/* ===== 最新开服 ===== */
.server-section { margin-bottom:14px; }
.server-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.server-header h2 { display:flex; align-items:center; gap:12px; font-size:30px; font-weight:900; color:#f5d77e; letter-spacing:2px; text-shadow:2px 2px 0 rgba(0,0,0,.4); }
.server-header h2 svg { width:30px; height:30px; }
.server-header .en { font-family:Georgia,serif; font-size:13px; letter-spacing:4px; color:#8a94a6; text-transform:uppercase; padding-top:8px; }
.server-more-link { margin-left:auto; color:#a08c50; text-decoration:none; font-size:14.5px; display:flex; align-items:center; gap:6px; }
.server-more-link:hover { color:#f5d77e; }
.server-more-link svg { width:16px; height:16px; }
.server-table-wrap { background:linear-gradient(180deg,rgba(30,40,56,.92),rgba(22,30,44,.95)); border:1px solid rgba(201,160,61,.35); border-radius:14px 6px 14px 6px; box-shadow:0 10px 0 #0a0e16, 0 16px 34px rgba(0,0,0,.4); overflow:hidden; }
.server-table { width:100%; border-collapse:collapse; }
.server-table th { background:linear-gradient(90deg,rgba(120,92,20,.5),rgba(60,46,12,.55)); color:#f5d77e; padding:15px 22px; text-align:left; font-size:15px; letter-spacing:2px; border-bottom:2px solid #c9a03d; white-space:nowrap; }
.server-table td { padding:16px 22px; border-top:1px solid rgba(201,160,61,.12); }
.server-table tbody tr:first-child td { border-top:none; }
.server-table tbody tr { transition:background .15s; }
.server-table tbody tr:hover { background:rgba(201,160,61,.06); }
.server-name-cell { display:flex; align-items:center; }
.status-badge { width:34px; height:34px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-right:12px; }
.status-badge svg { width:17px; height:17px; }
.status-hot { background:linear-gradient(135deg,#e74c3c,#a8231a); box-shadow:0 3px 0 #6e150e; color:#fff; }
.status-new { background:linear-gradient(135deg,#f0d070,#b08a28); box-shadow:0 3px 0 #7a5c14; color:#241a05; }
.status-soon { border:1.5px solid #5a6478; color:#a8b2c4; background:rgba(16,21,31,.5); }
.server-name { color:#f0e6c8; font-size:17px; font-weight:700; }
.version-badge { display:inline-block; padding:4px 14px; border:1.5px solid #c9a03d; border-radius:16px 4px 16px 4px; color:#f5d77e; font-size:13px; background:rgba(201,160,61,.08); white-space:nowrap; }
.server-time { color:#f5d77e; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.state-text { display:inline-flex; align-items:center; gap:7px; font-size:14px; white-space:nowrap; }
.state-text svg { width:16px; height:16px; }
.state-hot { color:#ff8a70; }
.state-new { color:#f5d77e; }
.state-ok { color:#6fcf97; }
.state-mute { color:#8a94a6; }
.btn-enter { display:inline-block; background:linear-gradient(135deg,#f0d070,#c09838); color:#241a05; padding:8px 22px; border-radius:18px 5px 18px 5px; text-decoration:none; font-size:14px; font-weight:800; letter-spacing:1px; box-shadow:0 3px 0 #7a5c14; transition:all .2s; }
.btn-enter:hover { transform:translateY(-2px); box-shadow:0 5px 0 #7a5c14; }
.btn-book { display:inline-block; border:1.5px solid #c9a03d; color:#f5d77e; padding:7px 20px; border-radius:18px 5px 18px 5px; text-decoration:none; font-size:14px; font-weight:700; letter-spacing:1px; transition:all .2s; }
.btn-book:hover { background:rgba(201,160,61,.15); }
.full-list-link { padding:18px 0 6px; text-align:center; }
.full-list-link a { display:inline-flex; align-items:center; gap:8px; color:#a08c50; text-decoration:none; font-size:15px; letter-spacing:1px; }
.full-list-link a:hover { color:#f5d77e; }
.full-list-link svg { width:17px; height:17px; }

/* ===== 攻略分类大卡 ===== */
.section-title { display:flex; align-items:center; gap:14px; margin:50px 0 26px; font-size:30px; font-weight:900; letter-spacing:2px; color:#f0e6c8; text-shadow:2px 2px 0 rgba(0,0,0,.4); }
.section-title::before { content:""; width:10px; height:30px; background:linear-gradient(180deg,#f5d77e,#c9a03d); border-radius:3px; box-shadow:0 0 12px rgba(245,215,126,.4); }
.section-title span { color:#f5d77e; }
.section-title small { font-size:15px; color:#8a94a6; font-weight:400; letter-spacing:1px; }
.guide-grid { display:grid; gap:34px; }
.guide-row { display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.lg-card { background:linear-gradient(165deg,rgba(34,44,60,.92) 0%,rgba(22,30,44,.96) 100%); border:1px solid rgba(201,160,61,.35); border-left:4px solid #c9a03d; border-radius:12px 6px 12px 6px; box-shadow:0 10px 0 #0a0e16, 0 16px 32px rgba(0,0,0,.4); overflow:hidden; position:relative; transition:all .25s; backdrop-filter:blur(6px); }
.lg-card::before { content:""; position:absolute; top:0; right:0; width:90px; height:90px; background:radial-gradient(circle at 100% 0, rgba(245,215,126,.14) 0%, transparent 70%); border-radius:0 0 0 90px; }
.lg-card:hover { transform:translateY(-6px); box-shadow:0 14px 0 #0a0e16, 0 24px 44px rgba(0,0,0,.5); border-left-color:#f5d77e; }
.card-head { padding:24px 28px 18px; display:flex; align-items:center; gap:20px; border-bottom:2px dashed rgba(201,160,61,.3); }
.card-icon { width:72px; height:72px; flex:none; background:linear-gradient(145deg,#f0d070,#9a751f); border-radius:30% 70% 34% 66% / 60% 40% 62% 38%; display:flex; align-items:center; justify-content:center; box-shadow:0 7px 0 #6b5414, inset 0 4px 10px rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.2); transform:rotate(-3deg); }
.card-icon svg { width:36px; height:36px; color:#241a05; stroke-width:2; }
.card-head h3 { font-size:26px; font-weight:900; color:#f5d77e; letter-spacing:3px; text-shadow:2px 2px 0 rgba(0,0,0,.45); }
.card-stats { display:flex; gap:18px; font-size:13.5px; color:#8a94a6; margin-top:7px; }
.card-stats i { display:inline-flex; align-items:center; gap:6px; font-style:normal; }
.card-stats svg { width:15px; height:15px; color:#c9a03d; }
.card-list { padding:18px 28px 8px; display:grid; grid-template-columns:1fr 1fr; gap:0 26px; list-style:none; }
.card-list li a { display:flex; align-items:center; gap:10px; color:#b8c2d2; font-size:15px; text-decoration:none; padding:10px 0; border-bottom:1px solid rgba(201,160,61,.12); transition:all .15s; }
.card-list li:nth-last-child(-n+2) a { border-bottom:none; }
.card-list li a svg { width:15px; height:15px; flex:none; color:#c9a03d; }
.card-list li a:hover { color:#f5d77e; transform:translateX(4px); }
.card-foot { padding:18px 28px 24px; border-top:1px solid rgba(201,160,61,.18); text-align:right; }
.btn-more { display:inline-flex; align-items:center; gap:8px; border:2px solid #c9a03d; color:#f5d77e; padding:10px 26px; border-radius:26px 8px 26px 8px; font-weight:700; letter-spacing:2px; text-decoration:none; font-size:14px; transition:all .2s; }
.btn-more svg { width:16px; height:16px; }
.btn-more:hover { background:linear-gradient(135deg,#f0d070,#c09838); color:#241a05; box-shadow:0 5px 0 #6b5414; transform:translateX(4px); }

/* ===== 合击专题大卡 ===== */
.combo-card { position:relative; overflow:hidden; margin-top:34px; background:linear-gradient(150deg,rgba(70,55,18,.92) 0%,rgba(34,40,54,.96) 55%,rgba(20,26,38,.98) 100%); border:2px solid #f5d77e; border-radius:0 46px 0 46px; box-shadow:0 14px 0 #0a0e16, 0 0 0 2px rgba(201,160,61,.25), 0 22px 44px rgba(0,0,0,.5); transition:all .3s; }
.combo-card::before { content:""; position:absolute; right:26px; bottom:-44px; width:270px; height:270px; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f5d77e" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="m3.5 6.5 3.4 3L12 3.5l5.1 6 3.4-3-1.6 11H5.1Z"/><path d="M5.5 20.5h13"/></svg>') no-repeat center/contain; opacity:.09; transform:rotate(-12deg); pointer-events:none; }
.combo-card:hover { transform:translateY(-8px); box-shadow:0 18px 0 #0a0e16, 0 0 0 2px rgba(245,215,126,.4), 0 28px 54px rgba(0,0,0,.55); }
.combo-head { padding:30px 38px 22px; display:flex; align-items:center; gap:26px; border-bottom:2px solid rgba(245,215,126,.35); background:linear-gradient(90deg,rgba(201,160,61,.14) 0%,transparent 60%); position:relative; }
.combo-icon { width:92px; height:92px; flex:none; background:linear-gradient(145deg,#f5e3a0,#c09838); border-radius:38% 62% 40% 60% / 60% 38% 62% 40%; display:flex; align-items:center; justify-content:center; box-shadow:0 9px 0 #6b5414, 0 0 26px rgba(245,215,126,.35), inset 0 5px 12px rgba(255,255,255,.4); transform:rotate(-3deg); animation:iconPulse 3s ease-in-out infinite; }
@keyframes iconPulse { 0%,100% { box-shadow:0 9px 0 #6b5414, 0 0 26px rgba(245,215,126,.35), inset 0 5px 12px rgba(255,255,255,.4); } 50% { box-shadow:0 9px 0 #6b5414, 0 0 36px rgba(245,215,126,.55), inset 0 5px 12px rgba(255,255,255,.4); } }
.combo-icon svg { width:46px; height:46px; color:#241a05; stroke-width:2; }
.combo-head h3 { font-size:34px; font-weight:900; color:#fff8e5; letter-spacing:4px; text-shadow:3px 3px 0 rgba(60,45,8,.6), 0 0 28px rgba(245,215,126,.35); }
.combo-sub { font-family:Georgia,serif; font-size:15px; color:#f5d77e; letter-spacing:4px; margin-top:6px; text-transform:uppercase; }
.combo-stats { display:flex; gap:26px; margin-top:14px; color:#d8c890; font-size:15px; }
.combo-stats i { display:inline-flex; align-items:center; gap:7px; font-style:normal; }
.combo-stats svg { width:16px; height:16px; color:#f5d77e; }
.combo-list { padding:26px 38px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px 32px; list-style:none; position:relative; }
.combo-list li a { display:flex; align-items:center; gap:10px; color:#d8cfae; font-size:15.5px; text-decoration:none; padding:10px 0; border-bottom:1px solid rgba(245,215,126,.15); transition:all .15s; }
.combo-list li:nth-last-child(-n+3) a { border-bottom:none; }
.combo-list li a svg { width:15px; height:15px; flex:none; color:#f0d070; }
.combo-list li a:hover { color:#f5d77e; transform:translateX(6px); }
.combo-foot { padding:22px 38px 32px; border-top:1px solid rgba(245,215,126,.25); text-align:right; position:relative; }
.btn-combo { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,#f0d070,#c09838); color:#241a05; padding:14px 36px; border-radius:36px 10px 36px 10px; text-decoration:none; font-size:17px; font-weight:800; letter-spacing:3px; box-shadow:0 7px 0 #6b5414; transition:all .2s; }
.btn-combo svg { width:18px; height:18px; }
.btn-combo:hover { background:linear-gradient(135deg,#f5e3a0,#e8c766); transform:translateY(-3px); box-shadow:0 10px 0 #6b5414, 0 0 30px rgba(245,215,126,.4); }

/* ===== 热门与精选 ===== */
.hot-grid { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:48px; }
.hot-card { background:linear-gradient(180deg,rgba(30,40,56,.9) 0%,rgba(20,27,40,.94) 100%); border:1px solid rgba(201,160,61,.3); border-radius:14px 6px 14px 6px; padding:26px 30px; box-shadow:0 9px 0 #0a0e16, 0 14px 28px rgba(0,0,0,.4); }
.hot-card h3 { display:flex; align-items:center; gap:12px; color:#f5d77e; font-size:21px; font-weight:900; letter-spacing:2px; margin-bottom:16px; }
.hot-card h3 svg { width:24px; height:24px; color:#c9a03d; }
.hot-list { list-style:none; }
.hot-list li { padding:12px 0; border-bottom:1px dashed rgba(201,160,61,.2); }
.hot-list li:last-child { border-bottom:none; }
.hot-list a { display:flex; align-items:center; justify-content:space-between; gap:14px; color:#c0c8d0; text-decoration:none; font-size:15px; }
.hot-list a:hover { color:#f5d77e; }
.view-count { flex:none; font-size:13px; color:#8a94a6; }
.view-count.gold { color:#c9a03d; }

/* ===== 页脚 ===== */
.footer { background:linear-gradient(0deg,#0a0e16 0%,#141b28 100%); border-top:3px solid #c9a03d; padding:36px 0 42px; margin-top:56px; clip-path:polygon(0 0,100% 4%,100% 100%,0 100%); }
.copyright { text-align:center; color:#7d8798; font-size:14px; line-height:1.9; }