@charset "utf-8";
/* ==========================================================================
   问道乘风 · 官网样式
   配色：墨底 / 鎏金 / 血红      版式：直角 + 斜切角 + 金线
   ========================================================================== */

/* ---------- 字体：方正粗黑宋简体 子集（由 _tools/subset_font.py 生成） ---------- */
@font-face {
    font-family: "WDCF";
    src: url("../fonts/wdcf.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

:root {
    --ink:       #07070a;
    --ink-2:     #0c0c10;
    --ink-3:     #121216;
    --panel:     rgba(15, 14, 17, .88);
    --panel-2:   rgba(22, 20, 22, .92);
    --gold:      #d6aa40;
    --gold-l:    #ffe9a6;
    --gold-m:    #c2952f;
    --gold-d:    #7a5410;
    --red:       #b3211c;
    --red-l:     #e8402f;
    --text:      #cbc5b9;
    --text-hi:   #f0e9db;
    --muted:     #8a8377;
    --line:      rgba(214, 170, 64, .30);
    --line-2:    rgba(214, 170, 64, .16);
    --w:         1240px;
    --title:     "WDCF", "方正粗黑宋简体", "STZhongsong", "SimHei", "Microsoft YaHei", sans-serif;
    --body:      "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font: 14px/1.7 var(--body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body::before {                       /* 全站噪点 + 暗角，压掉“干净的模板感” */
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, rgba(0,0,0,0) 1px 3px);
}

a { color: inherit; text-decoration: none; transition: color .18s, opacity .18s; }
img { border: 0; display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
table { border-collapse: collapse; width: 100%; }

.wrap { width: var(--w); margin: 0 auto; position: relative; }

/* --------------------------------------------------------------------------
   通用零件
   -------------------------------------------------------------------------- */
.gold-text {
    background: linear-gradient(180deg, #fff3cd 0%, #f0cf72 30%, #d6aa40 55%, #8a6118 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bevel { clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }

/* 中式双线标题 */
.sec-hd { text-align: center; margin-bottom: 34px; }
.sec-hd h2 {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-family: var(--title);
    font-size: 34px;
    letter-spacing: 4px;
    line-height: 1;
}
.sec-hd h2::before,
.sec-hd h2::after {
    content: "";
    width: 86px;
    height: 8px;
    background:
        linear-gradient(90deg, rgba(214,170,64,0) 0%, rgba(214,170,64,.85) 100%) center/100% 1px no-repeat,
        linear-gradient(90deg, rgba(214,170,64,0) 0%, rgba(214,170,64,.35) 100%) center/100% 7px no-repeat;
}
.sec-hd h2::after { transform: scaleX(-1); }
.sec-hd p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 6px;
    text-transform: uppercase;
}

/* 按钮 */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 26px;
    font-family: var(--title);
    font-size: 17px;
    letter-spacing: 3px;
    color: #fff5da;
    background: linear-gradient(180deg, #3a2a10 0%, #1c1408 100%);
    border: 1px solid var(--gold-d);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: .2s;
}
.btn::after {
    content: "";
    position: absolute;
    inset: 1px;
    background: linear-gradient(180deg, rgba(255,225,150,.16), rgba(255,225,150,0));
    pointer-events: none;
}
.btn:hover {
    color: #fff;
    border-color: var(--gold);
    background: linear-gradient(180deg, #6a4a14 0%, #2a1c08 100%);
    box-shadow: 0 0 0 1px rgba(214,170,64,.35), 0 8px 22px -10px rgba(214,170,64,.7);
    transform: translateY(-2px);
}
.btn.red { background: linear-gradient(180deg, #8e1a14 0%, #43100c 100%); border-color: #6c1a13; }
.btn.red:hover { background: linear-gradient(180deg, #c2261c 0%, #5c150e 100%); border-color: #e8402f; }
.btn.ghost { background: rgba(255,255,255,.03); border-color: var(--line); }
.btn.lg { height: 56px; font-size: 20px; padding: 0 34px; }
.btn.sm { height: 36px; font-size: 14px; letter-spacing: 2px; padding: 0 16px; clip-path: none; }

/* 数据表 */
.tbl-wrap { border: 1px solid var(--line); background: rgba(8,8,11,.72); }
.tbl { font-size: 13.5px; }
.tbl th {
    padding: 12px 14px;
    font-weight: 400;
    font-family: var(--title);
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--gold-l);
    background: linear-gradient(180deg, rgba(214,170,64,.20), rgba(214,170,64,.06));
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}
.tbl td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    color: var(--text);
    vertical-align: top;
}
.tbl tbody tr:nth-child(odd) { background: rgba(255,255,255,.014); }
.tbl tbody tr:hover { background: rgba(214,170,64,.07); }
.tbl td.hi { color: var(--gold-l); }
.tbl td.dim { color: var(--muted); }
.tbl .num { font-family: Consolas, Menlo, monospace; color: #e5c87a; }

/* 标签 */
.tag {
    display: inline-block;
    padding: 1px 8px;
    font-size: 12px;
    line-height: 18px;
    color: var(--gold-l);
    border: 1px solid var(--line);
    background: rgba(214,170,64,.08);
}
.tag.red { color: #ffb9ad; border-color: rgba(232,64,47,.45); background: rgba(179,33,28,.16); }

/* --------------------------------------------------------------------------
   顶栏 / 导航
   -------------------------------------------------------------------------- */
.topbar {
    background: linear-gradient(180deg, #100d0b, #08070a);
    border-bottom: 1px solid var(--line-2);
    font-size: 12.5px;
    color: var(--muted);
    height: 34px;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.topbar .lead { display: flex; align-items: center; gap: 10px; color: var(--text); }
.topbar .lead b { color: var(--gold-l); font-weight: 400; }
.topbar .links { display: flex; align-items: center; gap: 16px; }
.topbar .links a:hover { color: var(--gold-l); }

.notice {
    height: 40px;
    background: linear-gradient(180deg, rgba(179,33,28,.20), rgba(179,33,28,.05));
    border-bottom: 1px solid var(--line-2);
}
.notice .wrap { display: flex; align-items: center; height: 100%; gap: 12px; }
.notice .ico {
    flex: none;
    font-family: var(--title);
    letter-spacing: 1px;
    font-size: 13px;
    color: #ffd9a1;
    padding: 2px 10px;
    border: 1px solid rgba(232,64,47,.5);
    background: rgba(179,33,28,.22);
}
.notice .viewport { overflow: hidden; flex: 1; }
.notice .track { display: flex; gap: 60px; white-space: nowrap; font-size: 13px; will-change: transform; }
.notice .track b { color: var(--red-l); font-weight: 400; }

.header {
    position: relative;
    background: linear-gradient(180deg, rgba(10,9,12,.96), rgba(10,9,12,.72));
    border-bottom: 1px solid var(--line);
}
.header .wrap { display: flex; align-items: center; height: 96px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand img.emblem { width: 54px; height: 54px; }
.brand img.logo { height: 62px; width: auto; }

.nav { margin-left: auto; display: flex; align-items: stretch; height: 100%; }
.nav > li { position: relative; display: flex; align-items: center; }
.nav > li > a {
    padding: 0 20px;
    height: 96px;
    display: flex;
    align-items: center;
    font-family: var(--title);
    font-size: 17px;
    letter-spacing: 2px;
    color: var(--text);
}
.nav > li > a::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 22px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    transition: opacity .2s;
}
.nav > li > a:hover, .nav > li.on > a { color: var(--gold-l); }
.nav > li.on > a::after, .nav > li > a:hover::after { opacity: 1; }

.header .cta { margin-left: 18px; display: flex; gap: 10px; }

/* --------------------------------------------------------------------------
   首屏
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 660px;
    background: #050508 url("../img/hero.jpg") center/cover no-repeat;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.hero video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
    /* 开场动画里带的是旧站品牌字，模糊掉只留火焰与动态，避免旧名字出现 */
    filter: blur(7px) saturate(1.05) brightness(.95);
    transform: scale(1.06);
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 60% at 50% 45%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.86) 100%),
        linear-gradient(180deg, rgba(7,7,10,.9) 0%, rgba(7,7,10,.15) 28%, rgba(7,7,10,.95) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding: 74px 0 56px; }

.hero-title { text-align: center; }
.hero-title .sub {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 10px;
    color: #b99a5c;
    padding: 5px 18px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.hero-title h1 {
    margin: 20px 0 14px;
    font-family: var(--title);
    font-size: 96px;
    line-height: 1;
    letter-spacing: 14px;
    text-indent: 14px;
    background: linear-gradient(180deg, #fff8e2 0%, #f6d888 26%, #d6aa40 52%, #a2741c 74%, #6d4a0e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.85)) drop-shadow(0 0 26px rgba(214,170,64,.45));
}
.hero-title h1 .hl { -webkit-text-stroke: 1px rgba(255,235,180,.4); }
.hero-title .slogan {
    font-family: var(--title);
    font-size: 21px;
    letter-spacing: 8px;
    color: #e7d6b0;
}
.hero-title .en { margin-top: 10px; font-size: 12px; letter-spacing: 8px; color: #7d7259; }

.hero-badges { display: flex; justify-content: center; gap: 12px; margin: 26px 0 30px; flex-wrap: wrap; }
.hero-badges span {
    font-size: 13px;
    color: #e9d9b4;
    padding: 5px 14px;
    background: rgba(0,0,0,.5);
    border: 1px solid var(--line);
}
.hero-badges span i { color: var(--red-l); font-style: normal; margin-right: 6px; }

.hero-cta { display: flex; justify-content: center; gap: 16px; }

.hero-stats {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line);
    background: rgba(6,6,9,.72);
    backdrop-filter: blur(2px);
}
.hero-stats div { padding: 16px 20px; border-right: 1px solid var(--line-2); }
.hero-stats div:last-child { border-right: 0; }
.hero-stats .k { font-size: 12.5px; color: var(--muted); letter-spacing: 2px; }
.hero-stats .v { font-family: var(--title); font-size: 26px; color: var(--gold-l); letter-spacing: 2px; }
.hero-stats .v small { font-size: 13px; color: #9d8f6d; letter-spacing: 1px; margin-left: 4px; }

/* --------------------------------------------------------------------------
   板块通用
   -------------------------------------------------------------------------- */
.sec { position: relative; padding: 66px 0; border-bottom: 1px solid var(--line-2); }
.sec.bg1 { background: #07070a url("../img/bg_sec1.jpg") center/cover no-repeat fixed; }
.sec.bg2 { background: #07070a url("../img/bg_sec2.jpg") center/cover no-repeat fixed; }
.sec.bg3 { background: #07070a url("../img/bg_sec3.jpg") center/cover no-repeat fixed; }
.sec.bg4 { background: #07070a url("../img/bg_sec4.jpg") center/cover no-repeat fixed; }
.sec.bg5 { background: #07070a url("../img/bg_sec5.jpg") center/cover no-repeat fixed; }
.sec > .wrap { z-index: 1; }

/* --------------------------------------------------------------------------
   版本特色
   -------------------------------------------------------------------------- */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.feat {
    position: relative;
    padding: 22px 20px 20px;
    background: linear-gradient(180deg, rgba(24,21,17,.92), rgba(11,10,12,.92));
    border: 1px solid var(--line-2);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    transition: .22s;
}
.feat:hover {
    border-color: var(--line);
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -22px rgba(214,170,64,.8);
}
.feat .no {
    position: absolute;
    top: 12px;
    right: 16px;
    font-family: var(--title);
    font-size: 34px;
    color: rgba(214,170,64,.14);
    line-height: 1;
}
.feat h3 {
    font-family: var(--title);
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--gold-l);
    margin-bottom: 10px;
}
.feat p { margin: 0; font-size: 13.5px; color: #b3ada1; }
.feat p b { color: #eacb85; font-weight: 400; }

/* --------------------------------------------------------------------------
   截图
   -------------------------------------------------------------------------- */
.shots { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
.shot-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.shot-row figure {
    margin: 0;
    position: relative;
    border: 1px solid var(--line-2);
    background: #050507;
    overflow: hidden;
}
.shot-row figure img { width: 100%; height: auto; transition: transform .35s ease; }
.shot-row figure:hover { border-color: var(--gold); }
.shot-row figure:hover img { transform: scale(1.035); }
.shot-row figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 12px 10px;
    font-size: 13px;
    color: #e8dab8;
    background: linear-gradient(0deg, rgba(0,0,0,.94) 30%, rgba(0,0,0,0));
}
.shot-wide { position: relative; margin-top: 16px; border: 1px solid var(--line); background: #050507; }
.shot-wide img { width: 100%; height: auto; }
.shot-main {
    position: relative;
    border: 1px solid var(--line);
    background: #050507;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.shot-main img { width: 100%; height: 100%; object-fit: contain; }
.shot-main .cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 18px;
    background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,0));
    font-size: 13.5px;
    color: #e6d8b6;
}
.shot-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; }
.shot-list button {
    padding: 0;
    border: 1px solid var(--line-2);
    background: #050507;
    cursor: pointer;
    overflow: hidden;
    transition: .2s;
}
.shot-list button img { width: 100%; height: 132px; object-fit: cover; opacity: .72; transition: .25s; }
.shot-list button.on, .shot-list button:hover { border-color: var(--gold); }
.shot-list button.on img, .shot-list button:hover img { opacity: 1; transform: scale(1.04); }

/* --------------------------------------------------------------------------
   装备图标墙
   -------------------------------------------------------------------------- */
.item-wall {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 1px;
    background: var(--line-2);
    border: 1px solid var(--line-2);
}
.item-wall i {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.05), rgba(0,0,0,.5));
    transition: .18s;
}
.item-wall i img { width: 76%; image-rendering: -webkit-optimize-contrast; }
.item-wall i:hover { background: radial-gradient(60% 60% at 50% 45%, rgba(214,170,64,.22), rgba(0,0,0,.5)); }

/* --------------------------------------------------------------------------
   下载 / 卡片
   -------------------------------------------------------------------------- */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dl-card {
    position: relative;
    padding: 26px 24px 24px;
    background: linear-gradient(180deg, rgba(24,21,17,.94), rgba(11,10,12,.94));
    border: 1px solid var(--line-2);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.dl-card.main { border-color: var(--line); background: linear-gradient(180deg, rgba(46,33,12,.94), rgba(15,12,10,.94)); }
.dl-card .hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dl-card .hd h3 { font-family: var(--title); font-size: 24px; letter-spacing: 2px; color: var(--gold-l); }
.dl-card .hd small { color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.dl-card .size { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.dl-card .size b { color: #e2c98d; font-weight: 400; font-family: Consolas, monospace; }
.dl-card ol { margin: 0 0 18px; padding-left: 0; counter-reset: s; }
.dl-card ol li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 7px;
    font-size: 13px;
    color: #b6b0a4;
    counter-increment: s;
}
.dl-card ol li::before {
    content: counter(s);
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    color: #ffdca0;
    border: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   会员卡
   -------------------------------------------------------------------------- */
.vip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vip {
    position: relative;
    padding: 0 0 24px;
    background: linear-gradient(180deg, rgba(20,18,16,.94), rgba(10,9,11,.96));
    border: 1px solid var(--line-2);
    overflow: hidden;
}
.vip.hot { border-color: var(--line); box-shadow: 0 0 0 1px rgba(214,170,64,.15), 0 24px 50px -30px rgba(214,170,64,.9); }
.vip .top {
    padding: 14px 20px;
    background: linear-gradient(90deg, rgba(214,170,64,.20), rgba(214,170,64,.02));
    border-bottom: 1px solid var(--line-2);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.vip .top h3 { font-family: var(--title); font-size: 21px; letter-spacing: 3px; color: var(--gold-l); }
.vip .top em { font-style: normal; font-size: 12px; color: var(--muted); }
.vip ul { padding: 18px 20px 0; }
.vip li { position: relative; padding-left: 16px; font-size: 13.5px; margin-bottom: 8px; color: #b8b2a6; }
.vip li::before {
    content: "";
    position: absolute;
    left: 0; top: 9px;
    width: 5px; height: 5px;
    background: var(--gold);
    transform: rotate(45deg);
}
.vip li b { color: #eddcb6; font-weight: 400; }
.vip .go { margin: 16px 20px 0; }

/* --------------------------------------------------------------------------
   攻略页 / 隐藏地图页
   -------------------------------------------------------------------------- */
.page-hd {
    position: relative;
    padding: 54px 0 40px;
    background: #06060a url("../img/bg_sec4.jpg") center/cover no-repeat;
    border-bottom: 1px solid var(--line);
}
.page-hd::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(70% 100% at 50% 0%, rgba(0,0,0,.35), rgba(6,6,10,.96));
}
.page-hd .wrap { position: relative; z-index: 2; }
.crumb { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.crumb a:hover { color: var(--gold-l); }
.page-hd h1 {
    font-family: var(--title);
    font-size: 42px;
    letter-spacing: 6px;
    background: linear-gradient(180deg, #fff3cd, #d6aa40 60%, #85601a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.8));
}
.page-hd p { margin: 12px 0 0; color: #a49c8c; max-width: 820px; }

.doc { display: grid; grid-template-columns: 232px 1fr; gap: 34px; align-items: start; }
.toc {
    position: sticky;
    top: 18px;
    border: 1px solid var(--line-2);
    background: rgba(10,10,13,.85);
}
.toc h4 {
    padding: 12px 16px;
    font-family: var(--title);
    font-size: 16px;
    letter-spacing: 2px;
    color: var(--gold-l);
    border-bottom: 1px solid var(--line-2);
    background: rgba(214,170,64,.07);
}
.toc a {
    display: block;
    padding: 9px 16px 9px 20px;
    font-size: 13.5px;
    color: #a9a294;
    border-bottom: 1px dashed rgba(255,255,255,.05);
}
.toc a:hover { color: var(--gold-l); background: rgba(214,170,64,.06); padding-left: 24px; }

.doc-body h2 {
    position: relative;
    margin: 40px 0 16px;
    padding-left: 16px;
    font-family: var(--title);
    font-size: 25px;
    letter-spacing: 3px;
    color: var(--text-hi);
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body h2::before {
    content: "";
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 4px;
    background: linear-gradient(180deg, var(--gold-l), var(--gold-d));
}
.doc-body h3 {
    margin: 24px 0 12px;
    font-family: var(--title);
    font-size: 18px;
    letter-spacing: 2px;
    color: #e3c88b;
}
.doc-body p { margin: 0 0 12px; color: #b5afa3; }
.doc-body p b, .doc-body li b { color: #eddcb6; font-weight: 400; }
.doc-body ul { margin: 0 0 16px; }
.doc-body ul li { position: relative; padding-left: 18px; margin-bottom: 7px; color: #b3ada1; font-size: 13.5px; }
.doc-body ul li::before {
    content: "";
    position: absolute;
    left: 2px; top: 9px;
    width: 5px; height: 5px;
    background: var(--gold-m);
    transform: rotate(45deg);
}
.doc-body .note {
    margin: 16px 0;
    padding: 14px 18px;
    border-left: 3px solid var(--red);
    background: rgba(179,33,28,.10);
    font-size: 13.5px;
    color: #e2c3b5;
}
.doc-body .note b { color: #ffb9a6; font-weight: 400; }
.tbl-wrap + .tbl-wrap { margin-top: 18px; }
.tbl-cap {
    padding: 11px 14px;
    font-family: var(--title);
    font-size: 16px;
    letter-spacing: 2px;
    color: var(--gold-l);
    background: rgba(214,170,64,.10);
    border-bottom: 1px solid var(--line-2);
}

.map-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.map-card { border: 1px solid var(--line-2); background: rgba(9,9,12,.86); }
.map-card .hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(214,170,64,.16), rgba(214,170,64,0));
    border-bottom: 1px solid var(--line-2);
}
.map-card .hd h3 { font-family: var(--title); font-size: 18px; letter-spacing: 2px; color: var(--gold-l); }
.map-card .hd small { color: var(--muted); font-size: 12px; }
.map-card .coords { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.map-card .coords span {
    font-size: 12.5px;
    padding: 3px 10px;
    color: #e7d3a4;
    background: rgba(214,170,64,.10);
    border: 1px solid var(--line-2);
    font-family: Consolas, Menlo, monospace;
}
.map-card .coords span em { font-style: normal; color: #8f8574; font-family: var(--body); margin-right: 6px; }
.map-card .boss {
    padding: 0 16px 14px;
    font-size: 12.5px;
    color: #9d968a;
    line-height: 1.9;
}

/* --------------------------------------------------------------------------
   页脚 / 悬浮
   -------------------------------------------------------------------------- */
.footer {
    padding: 40px 0 28px;
    background: linear-gradient(180deg, #0a0a0d, #050507);
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: #6f6a60;
}
.footer .cols { display: flex; gap: 40px; align-items: flex-start; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.05); }
.footer .fbrand img.logo { height: 54px; }
.footer .fnav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer .fnav a:hover { color: var(--gold-l); }
.footer .words { margin: 20px 0 10px; color: #7b7568; }
.footer .words span { margin-right: 18px; }
.footer .tip { color: #5f5a52; line-height: 1.9; }

.side {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    width: 156px;
    border: 1px solid var(--line);
    border-right: 0;
    background: rgba(9,9,12,.94);
    transition: transform .28s;
}
.side.close { transform: translate(148px, -50%); }
.side .toggle {
    position: absolute;
    left: -30px;
    top: 12px;
    width: 30px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9,9,12,.94);
    border: 1px solid var(--line);
    border-right: 0;
    color: var(--gold-l);
    font-size: 12px;
    writing-mode: vertical-rl;
    letter-spacing: 2px;
    cursor: pointer;
}
.side h6 {
    margin: 0;
    padding: 10px 12px;
    font-family: var(--title);
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--gold-l);
    text-align: center;
    border-bottom: 1px solid var(--line-2);
    background: rgba(214,170,64,.08);
}
.side h6 small { display: block; font-family: var(--body); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-top: 3px; }
.side .qr { padding: 12px; text-align: center; }
.side .qr img { width: 100%; border: 1px solid var(--line-2); }
.side .qr p { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.side a.kf {
    display: block;
    padding: 10px 0;
    text-align: center;
    font-size: 13.5px;
    color: #ddcfae;
    border-top: 1px solid rgba(255,255,255,.05);
}
.side a.kf:hover { background: rgba(214,170,64,.10); color: var(--gold-l); }

.bgm {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(9,9,12,.92);
    border: 1px solid var(--line);
    cursor: pointer;
    font-size: 12.5px;
    color: #cbbf9e;
}
.bgm:hover { color: var(--gold-l); border-color: var(--gold); }
.bgm .eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.bgm .eq i { width: 2px; background: var(--gold); height: 4px; }
.bgm.play .eq i { animation: eq .9s infinite ease-in-out; }
.bgm.play .eq i:nth-child(2) { animation-delay: .15s; }
.bgm.play .eq i:nth-child(3) { animation-delay: .3s; }
.bgm.play .eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }

.totop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(9,9,12,.92);
    border: 1px solid var(--line);
    color: var(--gold-l);
    cursor: pointer;
}
.totop.show { display: flex; }

/* --------------------------------------------------------------------------
   自适应
   -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
    .side { display: none; }          /* 窄屏下悬浮栏会压住正文，直接收起 */
}
@media (max-width: 1280px) {
    :root { --w: 1100px; }
    .hero-title h1 { font-size: 82px; }
    .item-wall { grid-template-columns: repeat(10, 1fr); }
}
@media (max-width: 1100px) {
    :root { --w: 94%; }
    .feat-grid { grid-template-columns: repeat(2, 1fr); }
    .shots { grid-template-columns: 1fr; }
    .dl-grid, .vip-grid, .map-grid { grid-template-columns: 1fr; }
    .doc { grid-template-columns: 1fr; }
    .toc { position: static; }
    .nav { display: none; }
    .hero-title h1 { font-size: 60px; letter-spacing: 8px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .item-wall { grid-template-columns: repeat(7, 1fr); }
.side { display: none; }
}