/* 3C 魔兽：深色奇幻主题，统一适用于所有栏目页 */
:root {
    color-scheme: dark;
    --bg: #080d16;
    --bg-soft: #0d1522;
    --panel: #111c2b;
    --panel-strong: #152238;
    --line: rgba(181, 198, 218, .12);
    --text: #e8edf5;
    --muted: #a1adbd;
    --gold: #efbd62;
    --gold-bright: #ffda8a;
    --blue: #78a9db;
    --radius: 18px;
    --shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(ellipse at 50% -18%, rgba(54, 89, 132, .24), transparent 46rem),
        linear-gradient(180deg, #0b1220 0%, var(--bg) 48rem);
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
a:hover { color: var(--gold-bright); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { padding-left: 1.25rem; }
::selection { color: #17120a; background: var(--gold-bright); }

.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

/* 导航 */
header {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid rgba(239, 189, 98, .26);
    background: rgba(8, 13, 22, .86);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .2);
    backdrop-filter: blur(18px);
}
.nav-wrap { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 28px; }
.logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--gold-bright);
    font-size: 23px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}
.logo::before {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 218, 138, .68);
    border-radius: 9px 9px 9px 2px;
    background: linear-gradient(145deg, rgba(255, 218, 138, .3), rgba(239, 189, 98, .04));
    box-shadow: inset 0 0 16px rgba(239, 189, 98, .15), 0 0 20px rgba(239, 189, 98, .1);
    content: "";
    transform: rotate(45deg);
}
nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
nav a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #c4ccd8;
    font-size: 14px;
    white-space: nowrap;
}
nav a:hover, nav a.active { border-color: rgba(239, 189, 98, .2); color: var(--gold-bright); background: rgba(239, 189, 98, .08); }
nav .language-switch { margin-left: 7px; padding-left: 8px; border-left: 1px solid var(--line); }
nav .language-switch a { min-height: 34px; border-color: rgba(239, 189, 98, .3); color: var(--gold-bright); background: rgba(239, 189, 98, .06); font-size: 12px; font-weight: 800; }
nav .language-switch a[aria-current="page"] { color: #1b160c; background: var(--gold); }

/* 横幅与栏目标题 */
.banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(64px, 9vw, 112px) 20px;
    border-bottom: 1px solid var(--line);
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 110%, rgba(239, 189, 98, .13), transparent 42%),
        radial-gradient(ellipse at 82% 12%, rgba(55, 113, 171, .22), transparent 36%),
        linear-gradient(135deg, #14233a 0%, #101b2d 48%, #0a1220 100%);
}
.banner::before {
    position: absolute;
    z-index: -1;
    top: -170px;
    right: max(4%, calc((100vw - 1180px) / 2));
    width: clamp(260px, 38vw, 500px);
    aspect-ratio: 1;
    border: 1px solid rgba(239, 189, 98, .14);
    border-radius: 50%;
    box-shadow: 0 0 0 32px rgba(239, 189, 98, .025), 0 0 0 72px rgba(239, 189, 98, .018), inset 0 0 75px rgba(105, 148, 189, .08);
    content: "";
    pointer-events: none;
}
.banner::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239, 189, 98, .5), transparent);
    content: "";
}
.banner .container { position: relative; z-index: 1; }
.banner h1, .article-header h1 {
    max-width: 980px;
    margin: 0 auto 18px;
    color: var(--gold-bright);
    font-size: clamp(30px, 4.4vw, 52px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .01em;
    text-wrap: balance;
    text-shadow: 0 8px 34px rgba(239, 189, 98, .16);
}
.banner p { max-width: 780px; margin: 0 auto 28px; color: #c2ccda; font-size: clamp(16px, 1.8vw, 18px); line-height: 1.9; text-wrap: pretty; }

/* 按钮 */
.btn, .btn-outline {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    border: 1px solid rgba(255, 218, 138, .62);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn { color: #1b160c; background: linear-gradient(135deg, #ffda8a, #dca746); box-shadow: 0 8px 24px rgba(220, 167, 70, .22); }
.btn:hover { color: #1b160c; background: linear-gradient(135deg, #ffe5a8, #efbd62); box-shadow: 0 12px 30px rgba(220, 167, 70, .32); transform: translateY(-2px); }
.btn-outline { color: var(--gold-bright); background: rgba(239, 189, 98, .045); }
.btn-outline:hover { color: #1b160c; background: var(--gold-bright); transform: translateY(-2px); }

/* 区块、标题与网格 */
section { padding: clamp(44px, 6vw, 76px) 0; }
section.bg-dark { border-top: 1px solid rgba(181, 198, 218, .055); border-bottom: 1px solid rgba(181, 198, 218, .055); background: linear-gradient(135deg, rgba(17, 28, 43, .78), rgba(10, 17, 29, .88)); }
.bg-darker { background: #070b12; }
.section-title { margin: 0 0 10px; color: var(--gold-bright); font-size: clamp(24px, 3vw, 32px); font-weight: 750; line-height: 1.35; text-align: center; text-wrap: balance; }
.section-subtitle { max-width: 760px; margin: 0 auto 36px; color: var(--muted); font-size: 15px; text-align: center; }
.grid-wrap, .grid-3, .grid-2, .spec-grid, .race-grid { display: grid; gap: 22px; }
.grid-wrap { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.spec-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); margin-top: 20px; }
.race-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: 14px; margin-top: 20px; }

/* 内容卡片 */
.card, .news-card, .spec-card, .race-item, .download-box {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(21, 34, 54, .94), rgba(13, 22, 36, .94));
    box-shadow: 0 10px 32px rgba(0, 0, 0, .14);
}
.card, .news-card, .spec-card { padding: clamp(22px, 3vw, 30px); }
.card::before, .news-card::before, .spec-card::before {
    position: absolute;
    top: 0;
    left: 28px;
    width: 54px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    content: "";
}
.card, .news-card, .race-item { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.card:hover, .news-card:hover, .race-item:hover { border-color: rgba(239, 189, 98, .38); box-shadow: var(--shadow); transform: translateY(-4px); }
.card h3, .news-card h3 { margin: 0 0 12px; color: var(--gold-bright); font-size: 19px; line-height: 1.5; }
.card h4, .spec-card h4, .forum-info h4 { margin: 14px 0 8px; color: #e9cf9a; font-size: 16px; }
.card p, .news-card p { margin: 0 0 12px; color: #bac5d3; }
.card p:last-child, .news-card p:last-child { margin-bottom: 0; }
.card ul, .card ol { margin: 0; padding-left: 1.25rem; color: #bac5d3; }
.card li { margin-bottom: 7px; padding-left: 2px; }
.card li::marker, .article-content li::marker { color: var(--gold); }
.card strong, .article-content strong { color: #f0cf8b; }

/* 新闻列表 */
.news-date { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; color: #8492a5; font-size: 13px; }
.news-date::before { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); content: ""; }
.news-tag { display: inline-flex; margin: 0 0 12px; padding: 4px 11px; border: 1px solid rgba(239, 189, 98, .18); border-radius: 999px; color: var(--gold-bright); background: rgba(239, 189, 98, .08); font-size: 12px; }
.news-more { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; }

/* 文章正文 */
.article-header { padding: 54px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #14233a, #0a1220); text-align: center; }
.article-meta { color: var(--muted); font-size: 14px; }
.article-content { max-width: 900px; margin: 0 auto; padding: clamp(30px, 5vw, 52px) clamp(24px, 5vw, 56px); color: #cad3df; }
.article-content h2 { margin: 38px 0 17px; padding: 0 0 10px 16px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--gold); color: var(--gold-bright); font-size: clamp(22px, 2.7vw, 28px); line-height: 1.4; }
.article-content h3 { margin: 26px 0 12px; color: #e9cf9a; font-size: 20px; }
.article-content h4 { margin: 25px 0 12px; color: #e9cf9a; font-size: 18px; line-height: 1.5; }
.article-content p { margin: 0 0 17px; }
.article-content ul, .article-content ol { margin: 0 0 20px; }
.article-content li { margin-bottom: 8px; }
.article-content blockquote { margin: 22px 0; padding: 16px 20px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; color: #c4ccd6; background: rgba(239, 189, 98, .065); }
.article-content table { width: 100%; margin: 22px 0; border-collapse: collapse; border-radius: 12px; overflow: hidden; background: var(--panel); }
.article-content th, .article-content td { padding: 12px 15px; border: 1px solid var(--line); text-align: left; }
.article-content th { color: var(--gold-bright); background: var(--panel-strong); }
.article-content tr:nth-child(even) { background: rgba(255, 255, 255, .025); }

/* 首页长文专题 */
.home-article-index { margin-bottom: 34px; }
.home-article { max-width: 1000px; margin: 26px auto 0; padding: clamp(20px, 4vw, 38px); border: 1px solid rgba(239, 189, 98, .16); border-radius: var(--radius); background: linear-gradient(145deg, rgba(21, 34, 54, .82), rgba(10, 17, 29, .9)); box-shadow: 0 14px 38px rgba(0, 0, 0, .18); scroll-margin-top: 100px; }
.home-article + .home-article { margin-top: 30px; }
.home-article-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.home-article-head .news-tag { margin-bottom: 8px; }
.home-article-head h3 { margin: 0 0 10px; color: var(--gold-bright); font-size: clamp(22px, 3vw, 30px); line-height: 1.4; text-wrap: balance; }
.home-article-head p { max-width: 780px; margin: 0; color: var(--muted); }
.home-article .article-content { max-width: none; padding: 14px 0 0; }
.home-article .article-content h4:first-child { margin-top: 18px; }
.home-article-top { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); text-align: right; }
.home-article-top a { font-size: 14px; font-weight: 700; }

/* 面包屑与页脚 */
.breadcrumb { padding: 18px 0 4px; color: #8390a1; font-size: 14px; }
.breadcrumb a { color: #a9b5c4; }
.breadcrumb a:hover { color: var(--gold-bright); }
.breadcrumb span { margin: 0 8px; color: #596779; }
.eyebrow { margin: 0 auto 12px !important; color: var(--gold); font-size: 12px !important; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
footer { margin-top: 28px; padding: 38px 24px 30px; border-top: 1px solid var(--line); background: #070b12; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-bottom: 18px; }
.footer-links a { color: #a5b0bf; font-size: 14px; }
.footer-links a:hover { color: var(--gold-bright); }
footer p { max-width: 900px; margin: 5px auto; color: #7f8b9c; font-size: 13px; line-height: 1.8; }

/* 提示与分页 */
.notice { margin: 20px 0; padding: 15px 18px; border: 1px solid var(--line); border-left: 3px solid; border-radius: 10px; }
.notice-warning { border-left-color: #d6a752; color: #e9cf9a; background: rgba(214, 167, 82, .075); }
.notice-info { border-left-color: #5a98d1; color: #bdd5ec; background: rgba(90, 152, 209, .075); }
.notice-success { border-left-color: #64b57b; color: #bce1c5; background: rgba(100, 181, 123, .075); }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.pagination a, .pagination span { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; color: #bec8d5; font-size: 14px; }
.pagination a:hover, .pagination .current { border-color: var(--gold); color: #17120a; background: var(--gold); }

/* 下载页 */
.download-box { margin: 26px 0; padding: clamp(26px, 5vw, 46px); border-color: rgba(239, 189, 98, .2); text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(239, 189, 98, .11), transparent 62%), linear-gradient(145deg, #15243a, #0e1827); }
.download-box h2 { margin: 0 0 12px; color: var(--gold-bright); font-size: clamp(23px, 3vw, 30px); }
.download-box p { margin: 0 0 22px; color: #bac5d3; }
.download-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 48px; margin-top: 28px; }
.download-stat { min-width: 90px; text-align: center; }
.download-stat .num { color: var(--gold-bright); font-size: 30px; font-weight: 800; line-height: 1.2; }
.download-stat .label { color: var(--muted); font-size: 13px; }
.spec-card h4 { margin-top: 0; color: var(--gold-bright); font-size: 18px; }
.spec-card ul { margin: 0; padding: 0; list-style: none; }
.spec-card li { padding: 9px 0; border-bottom: 1px solid rgba(181, 198, 218, .09); color: #bac5d3; font-size: 14px; }
.spec-card li:last-child { border-bottom: 0; }
.spec-card li strong { display: inline-block; min-width: 80px; color: #e9cf9a; }

/* 社区与游戏介绍 */
.forum-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(17, 28, 43, .85); }
.forum-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid rgba(181, 198, 218, .09); transition: background .2s ease; }
.forum-item:last-child { border-bottom: 0; }
.forum-item:hover { background: rgba(239, 189, 98, .055); }
.forum-info h3, .forum-info h4 { margin: 0 0 3px; color: var(--gold-bright); font-size: 16px; }
.forum-info p { margin: 0; color: var(--muted); font-size: 13px; }
.forum-stats { color: var(--muted); font-size: 13px; text-align: right; white-space: nowrap; }
.forum-stats .count { color: var(--gold-bright); font-size: 17px; font-weight: 750; }
.feature-icon { display: grid; width: 56px; height: 56px; place-items: center; margin-bottom: 16px; border: 1px solid rgba(255, 218, 138, .27); border-radius: 16px; color: var(--gold-bright); background: linear-gradient(145deg, rgba(239, 189, 98, .24), rgba(239, 189, 98, .045)); font-size: 27px; }
.race-item { padding: 16px; text-align: center; }
.race-item h3, .race-item h5 { margin: 0 0 6px; color: var(--gold-bright); font-size: 15px; }
.race-item p { margin: 0; color: var(--muted); font-size: 12px; }
.faction-alliance { border-left: 3px solid #5d9fe0; }
.faction-horde { border-left: 3px solid #df6868; }

/* 返回顶部 */
.back-to-top { position: fixed; z-index: 10; right: 24px; bottom: 24px; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255, 218, 138, .44); border-radius: 50%; color: #1b160c; background: var(--gold); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: 20px; }
.back-to-top:hover { color: #1b160c; background: var(--gold-bright); transform: translateY(-3px); }

@media (max-width: 900px) {
    .nav-wrap { min-height: 70px; }
    nav ul { justify-content: flex-end; gap: 2px; }
    nav a { padding: 0 10px; font-size: 13px; }
    .grid-wrap, .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    html { scroll-padding-top: 132px; }
    .container { width: min(100% - 32px, 540px); }
    .nav-wrap { flex-direction: column; justify-content: center; gap: 10px; padding: 13px 0 11px; }
    .logo { font-size: 21px; }
    .logo::before { width: 25px; height: 25px; }
    nav { width: 100%; }
    nav ul { justify-content: center; gap: 2px; }
    nav a { min-height: 36px; padding: 0 9px; font-size: 12px; }
    .banner { padding: 54px 16px; }
    .banner::before { top: -100px; right: -90px; width: 300px; }
    .banner h1 { font-size: clamp(27px, 8vw, 36px); }
    .banner p { font-size: 15px; }
    section { padding: 42px 0; }
    .section-subtitle { margin-bottom: 26px; }
    .grid-wrap, .grid-3, .grid-2, .spec-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .race-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .article-content { padding: 28px 0; }
    .home-article { padding: 20px; }
    .home-article .article-content { padding: 8px 0 0; }
    .forum-item { align-items: flex-start; flex-direction: column; gap: 8px; padding: 16px; }
    .forum-stats { text-align: left; }
    .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}
@media (max-width: 380px) {
    .container { width: calc(100% - 24px); }
    nav a { padding: 0 7px; font-size: 11px; }
    .btn, .btn-outline { padding: 9px 18px; font-size: 14px; }
    .race-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}