/* ==========================================================================
   如浩传世 · 官网视觉重设计层（Redesign Skin）
   --------------------------------------------------------------------------
   加载顺序：本文件必须排在 legend-motion.css 之后，作为最后一层覆盖。
   设计目标：在保留传奇黑金气质的前提下，去掉石纹/云雾/包角等堆叠装饰，
   用干净的深色渐变、精致金属按钮、清晰网格与更大字距，做到"大方明了"。

   兼容性硬约束（沿用项目既有约定，勿改）：
     · 不用 var() / :has() / inset / gap / clamp() / aspect-ratio / mix-blend-mode
     · 颜色一律字面值；动画只动 transform / opacity；带 -webkit- 前缀
     · 挂 .legend-frame 的元素只改 background-color，不用 background 简写
   ========================================================================== */

/* ==========================================================================
   1. 根背景：去掉石纹 repeat，换纯净深黑棕 + 中央一抹暖光
   ========================================================================== */
html {
    background-color: #0b0806;
    background-image: none;
}
body {
    background-color: transparent;
    color: #cdbd9e;
    font-family: "Microsoft Yahei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    line-height: 1.7;
}

/* 动态氛围层：整体压淡，让页面"有呼吸但不吵闹" */
.lg-bg {
    background-color: #0b0806;
    background-image: -webkit-linear-gradient(top, #0b0806 0%, #14100c 45%, #1c130c 78%, #0e0a07 100%);
    background-image: linear-gradient(180deg, #0b0806 0%, #14100c 45%, #1c130c 78%, #0e0a07 100%);
}
.lg-sun { opacity: .18; }
.lg-mist-1 { opacity: .22; }
.lg-mist-2 { opacity: .14; }
.lg-mist-3 { opacity: .08; }
.lg-embers { opacity: .5; }

/* ==========================================================================
   2. 顶部导航：简洁吸顶栏，去掉厚重牌匾
   ========================================================================== */
.site-header {
    background-color: rgba(11, 8, 6, .92);
    background-image: none;
    border-bottom: 1px solid rgba(212, 175, 103, .22);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .5);
    padding: 14px 20px;
}
.site-header::after { display: none; }
.header-inner {
    max-width: 1280px;
    padding: 0 24px;
}
.header-left { gap: 18px; }
.main-logo {
    max-width: 260px;
    filter: drop-shadow(0 0 10px rgba(212, 175, 103, .2));
}
.header-slogan {
    font-size: 13px;
    color: #8a7a5e;
    font-style: normal;
    letter-spacing: 2px;
    border-left: 1px solid rgba(212, 175, 103, .3);
    padding-left: 18px;
    max-width: 320px;
}
.header-nav { gap: 4px; align-items: center; }

/* 导航按钮：文字化、去边框，hover 出金线 */
.header-nav .nav-btn {
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    padding: 10px 18px;
    color: #c4b494;
    font-size: 15px;
    letter-spacing: 2px;
    font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
    box-shadow: none;
    position: relative;
}
.header-nav .nav-btn::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 4px;
    height: 1px;
    background-color: #e2b95c;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
}
.header-nav .nav-btn:hover {
    color: #f0d89a;
}
.header-nav .nav-btn:hover::after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
.header-nav .nav-btn-active {
    color: #f0d89a;
}
.header-nav .nav-btn-active::after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    background-color: #e2b95c;
    box-shadow: 0 0 8px rgba(226, 185, 92, .6);
}
.nav-sub {
    background-color: rgba(15, 11, 8, .97);
    border: 1px solid rgba(212, 175, 103, .25);
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
}
.nav-sub-btn {
    color: #c4b494;
    padding: 10px 18px;
    font-size: 14px;
    letter-spacing: 1px;
}
.nav-sub-btn:hover {
    background-color: rgba(212, 175, 103, .1);
    color: #f0d89a;
}

/* ==========================================================================
   3. 首屏 Banner：更大气、更聚焦
   ========================================================================== */
.banner.lg-hero {
    background-color: #0e0a07;
    border-bottom: 1px solid rgba(212, 175, 103, .2);
    min-height: 620px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.banner-content {
    text-align: center;
    padding: 60px 24px;
    max-width: 900px;
}
.lg-hero-kicker {
    display: inline-block;
    color: #d4af67;
    font-size: 14px;
    letter-spacing: 6px;
    padding: 6px 20px;
    border: 1px solid rgba(212, 175, 103, .35);
    border-radius: 2px;
    margin-bottom: 28px;
    font-family: "Microsoft Yahei", sans-serif;
}
.banner-title {
    font-size: 64px;
    font-weight: bold;
    letter-spacing: 10px;
    line-height: 1.2;
    margin-bottom: 20px;
    font-family: "KaiTi", "STKaiti", "SimSun", serif;
}
.banner-subtitle {
    font-size: 18px;
    letter-spacing: 3px;
    margin-bottom: 14px;
}
.banner-desc {
    font-size: 15px;
    color: #a8967a;
    letter-spacing: 2px;
    margin-bottom: 40px;
}
.banner-btns {
    margin-bottom: 44px;
}

/* 主按钮：精致金属金 */
.btn-primary-large {
    display: inline-block;
    padding: 14px 48px;
    font-size: 17px;
    letter-spacing: 4px;
    font-weight: bold;
    color: #2a1c07;
    background-color: #e2b95c;
    background-image: -webkit-linear-gradient(top, #ffe9a8 0%, #e2b95c 45%, #b8863a 100%);
    background-image: linear-gradient(180deg, #ffe9a8 0%, #e2b95c 45%, #b8863a 100%);
    border: 1px solid #ffe9a8;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    box-shadow: 0 2px 12px rgba(226, 185, 92, .3);
}
.btn-primary-large:hover {
    box-shadow: 0 2px 24px rgba(226, 185, 92, .55);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}
.btn-text-large,
.btn-outline-large {
    display: inline-block;
    padding: 14px 36px;
    font-size: 15px;
    letter-spacing: 2px;
    color: #d4af67;
    background-color: transparent;
    background-image: none;
    border: 1px solid rgba(212, 175, 103, .45);
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    margin-left: 12px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}
.btn-text-large:hover,
.btn-outline-large:hover {
    background-color: rgba(212, 175, 103, .1);
    border-color: #e2b95c;
    color: #ffe9a8;
}

/* 卖点条 */
.banner-features {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.banner-features .feature-item {
    color: #b8a684;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 0 22px;
}
.banner-features .feature-item + .feature-item {
    border-left: 1px solid rgba(212, 175, 103, .25);
}
.banner-features .feature-icon {
    color: #e2b95c;
    margin-right: 6px;
    font-size: 16px;
}

/* ==========================================================================
   4. 通用区块与标题
   ========================================================================== */
.section {
    padding: 70px 24px;
    max-width: 1280px;
}
.section-title {
    font-size: 34px;
    letter-spacing: 8px;
    margin-bottom: 40px;
    font-family: "KaiTi", "STKaiti", "SimSun", serif;
}
/* 去掉贴图分隔件，换干净的渐变线 */
.section-title::before,
.section-title::after {
    width: 120px;
    height: 1px;
    margin-top: 0;
    background-image: -webkit-linear-gradient(left, transparent, #b88646, transparent);
    background-image: linear-gradient(to right, transparent, #b88646, transparent);
    background-repeat: no-repeat;
    background-position: center;
    top: 50%;
}
.section-title::before { left: 18%; }
.section-title::after { right: 18%; }
.section .diamond {
    width: 7px;
    height: 7px;
    background-color: #b88646;
    margin: 0 14px;
}

/* ==========================================================================
   5. 三职业区
   ========================================================================== */
.lg-class-tabs {
    text-align: center;
    margin-bottom: 36px;
}
.lg-class-tab {
    display: inline-block;
    padding: 10px 36px;
    margin: 0 6px;
    background-color: rgba(20, 15, 10, .6);
    border: 1px solid rgba(212, 175, 103, .25);
    color: #a8967a;
    font-size: 16px;
    letter-spacing: 6px;
    cursor: pointer;
    border-radius: 3px;
    font-family: "KaiTi", "STKaiti", serif;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}
.lg-class-tab:hover {
    color: #e2b95c;
    border-color: rgba(212, 175, 103, .5);
}
.lg-class-tab.is-active {
    background-color: rgba(212, 175, 103, .12);
    border-color: #e2b95c;
    color: #ffe9a8;
    box-shadow: 0 0 16px rgba(226, 185, 92, .25);
}

/* 卷轴画框：更干净的金边面板 */
.lg-art.lg-scroll.legend-frame,
.lg-art.lg-scroll {
    background-color: rgba(18, 13, 9, .75);
    border: 1px solid rgba(212, 175, 103, .22);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.lg-class-stage {
    background-color: #0e0a07;
}
.lg-art-img {
    display: block;
    width: 100%;
    height: auto;
}
.lg-art-cap {
    padding: 16px 20px;
    background-color: rgba(10, 7, 5, .85);
    border-top: 1px solid rgba(212, 175, 103, .15);
}
.lg-art-cap h3 {
    color: #f0d89a;
    font-size: 20px;
    letter-spacing: 3px;
    font-family: "KaiTi", serif;
    margin-bottom: 4px;
}
.lg-art-cap p {
    color: #8a7a5e;
    font-size: 13px;
    letter-spacing: 1px;
}

.lg-class-tag {
    color: #e2b95c !important;
    font-size: 18px !important;
    letter-spacing: 3px;
    font-family: "KaiTi", serif;
    margin-bottom: 14px;
}
.lg-class-text {
    color: #b8a684 !important;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 18px;
}
.lg-class-traits {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.lg-class-traits li {
    color: #c4b494;
    font-size: 14px;
    padding: 6px 0 6px 20px;
    position: relative;
}
.lg-class-traits li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: #b88646;
    font-size: 10px;
    top: 10px;
}

/* 技能展示条 */
.lg-skill-strip {
    background-color: rgba(18, 13, 9, .6);
    border: 1px solid rgba(212, 175, 103, .18);
    border-radius: 4px;
    padding: 18px;
}
.lg-skill-head {
    margin-bottom: 12px;
}
.lg-skill-title {
    color: #f0d89a;
    font-size: 15px;
    letter-spacing: 2px;
}
.lg-skill-label {
    color: #8a7a5e;
    font-size: 12px;
    float: right;
}
.lg-skill-imgs img {
    border-radius: 3px;
    border: 1px solid rgba(212, 175, 103, .2);
}
.lg-skill-nav {
    color: #b88646;
    cursor: pointer;
    padding: 8px;
}
.lg-class-foot {
    text-align: center;
    color: #8a7a5e;
    font-size: 14px;
    letter-spacing: 1px;
    margin-top: 36px;
}

/* ==========================================================================
   6. 申请表单
   ========================================================================== */
.apply-box,
.format-box,
.notice-list {
    background-color: rgba(18, 13, 9, .7);
    border: 1px solid rgba(212, 175, 103, .2);
    border-radius: 4px;
    padding: 36px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
.form-item {
    margin-bottom: 20px;
}
.form-item label {
    display: block;
    color: #c4b494;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.input-wrap {
    position: relative;
}
.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    margin-top: -10px;
    font-size: 15px;
    opacity: .7;
}
.input-wrap input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    background-color: rgba(10, 7, 5, .7);
    border: 1px solid rgba(212, 175, 103, .25);
    border-radius: 3px;
    color: #e8dcc0;
    font-size: 15px;
    outline: none;
    -webkit-transition: border-color .25s ease;
    transition: border-color .25s ease;
}
.input-wrap input:focus {
    border-color: #e2b95c;
    box-shadow: 0 0 0 2px rgba(226, 185, 92, .15);
}
.input-wrap input::-webkit-input-placeholder { color: #6a5c46; }
.input-wrap input::-moz-placeholder { color: #6a5c46; }
.input-wrap input:-ms-input-placeholder { color: #6a5c46; }

.submit-btn {
    width: 100%;
    padding: 14px;
    font-size: 17px;
    letter-spacing: 6px;
    font-weight: bold;
    color: #2a1c07;
    background-color: #e2b95c;
    background-image: -webkit-linear-gradient(top, #ffe9a8 0%, #e2b95c 45%, #b8863a 100%);
    background-image: linear-gradient(180deg, #ffe9a8 0%, #e2b95c 45%, #b8863a 100%);
    border: 1px solid #ffe9a8;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 8px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}
.submit-btn:hover {
    box-shadow: 0 2px 24px rgba(226, 185, 92, .5);
}
.error-tip { color: #e07a5a; font-size: 13px; min-height: 18px; margin: 8px 0; }
.tip {
    text-align: center;
    color: #6a5c46;
    font-size: 12px;
    margin-top: 12px;
}

/* ==========================================================================
   7. 参与流程带
   ========================================================================== */
.lg-band {
    background-color: rgba(15, 11, 8, .75);
    border: 1px solid rgba(212, 175, 103, .18);
    border-radius: 6px;
    padding: 50px 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
.lg-band-title {
    text-align: center;
    font-size: 30px;
    letter-spacing: 8px;
    color: #e8d09a;
    font-family: "KaiTi", serif;
    margin-bottom: 10px;
}
.lg-band-sub {
    text-align: center;
    color: #8a7a5e;
    font-size: 14px;
    margin-bottom: 40px;
}
.lg-flow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.lg-flow-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 130px;
    text-align: center;
    padding: 10px;
}
.lg-flow-num {
    display: block;
    font-size: 36px;
    font-weight: bold;
    color: rgba(212, 175, 103, .35);
    font-family: Georgia, serif;
    line-height: 1;
    margin-bottom: 12px;
}
.lg-flow-h {
    color: #f0d89a;
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.lg-flow-d {
    color: #8a7a5e;
    font-size: 13px;
    line-height: 1.7;
}
.process-link {
    color: #e2b95c;
    text-decoration: none;
    border-bottom: 1px dotted rgba(226, 185, 92, .5);
}
.process-link:hover { color: #ffe9a8; }

/* ==========================================================================
   8. 测试概览卡片
   ========================================================================== */
.lg-card {
    background-color: rgba(20, 15, 10, .7);
    border: 1px solid rgba(212, 175, 103, .2);
    border-radius: 4px;
    padding: 28px 24px;
    height: 100%;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}
.lg-card:hover {
    border-color: rgba(226, 185, 92, .5);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}
.lg-medal {
    font-size: 28px;
    display: block;
    margin-bottom: 12px;
}
.lg-card h3 {
    color: #f0d89a;
    font-size: 17px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.lg-card-lead {
    color: #e2b95c;
    font-size: 14px;
    margin-bottom: 8px;
}
.lg-card-text {
    color: #9a8a6e;
    font-size: 13px;
    line-height: 1.7;
}

/* 注意事项 */
.notice-list {
    padding: 28px 32px;
}
.notice-item {
    color: #b8a684;
    font-size: 14px;
    padding: 7px 0;
    letter-spacing: 1px;
}
.notice-diamond {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #b88646;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-right: 12px;
}

.bottom-actions {
    text-align: center;
    margin-top: 40px;
}

/* ==========================================================================
   9. BUG 征集区
   ========================================================================== */
.feedback-content p {
    color: #b8a684;
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 14px;
}
.format-box {
    margin: 20px 0;
    padding: 24px 28px;
}
.format-title {
    color: #f0d89a !important;
    font-size: 16px !important;
    letter-spacing: 2px;
    margin-bottom: 10px !important;
}
.reward-box {
    background-color: rgba(226, 185, 92, .08);
    border: 1px solid rgba(226, 185, 92, .3);
    border-radius: 4px;
    padding: 20px 24px;
    margin: 20px 0;
}
.reward-box h3 {
    color: #f0d89a;
    font-size: 17px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.tip-text { color: #8a7a5e !important; font-size: 13px !important; }
.invite-text {
    color: #e2b95c !important;
    font-size: 15px !important;
    letter-spacing: 1px;
}
.feedback-btns {
    margin-top: 24px;
}

/* ==========================================================================
   10. 页脚
   ========================================================================== */
.site-footer {
    background-color: #0a0705;
    background-image: none;
    border-top: 1px solid rgba(212, 175, 103, .18);
    color: #6a5c46;
    padding: 40px 20px 24px;
}
.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}
.footer-qrcodes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 24px;
}
.qrcode-item {
    margin: 0 24px;
    text-align: center;
}
.qrcode-item img {
    width: 96px;
    height: 96px;
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 103, .25);
}
.qrcode-item p {
    color: #8a7a5e;
    font-size: 12px;
    margin-top: 8px;
    letter-spacing: 1px;
}
.kf-icon {
    font-size: 40px;
}
.footer-logo img {
    max-width: 140px;
    margin-bottom: 16px;
}
.footer-links {
    margin-bottom: 12px;
}
.footer-links a {
    color: #a8967a;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
}
.footer-links a:hover { color: #f0d89a; }
.footer-link-divider { color: #4a3e2c; margin: 0 10px; }
.footer-switch a {
    color: #8a7a5e;
    font-size: 13px;
    text-decoration: none;
}
.footer-switch a:hover { color: #e2b95c; }
.footer-icp a {
    color: #6a5c46;
    font-size: 12px;
    text-decoration: none;
}
.footer-notice {
    max-width: 800px;
    margin: 16px auto 0;
    color: #5a4e3a;
    font-size: 12px;
    line-height: 1.8;
}

/* ==========================================================================
   11. 弹窗与回到顶部
   ========================================================================== */
.modal-box {
    background-color: #14100c;
    border: 1px solid rgba(212, 175, 103, .35);
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
}
.modal-title {
    color: #f0d89a;
    font-family: "KaiTi", serif;
}
.modal-close-btn {
    border-radius: 3px;
}
.back-to-top {
    background-color: rgba(20, 15, 10, .9);
    border: 1px solid rgba(212, 175, 103, .4);
    color: #e2b95c;
    border-radius: 3px;
}
.back-to-top:hover {
    background-color: rgba(212, 175, 103, .15);
    color: #ffe9a8;
}

/* ==========================================================================
   12. 动效弱化（保持克制）
   ========================================================================== */
.reveal {
    -webkit-transition: opacity .8s ease, -webkit-transform .8s ease;
    transition: opacity .8s ease, transform .8s ease;
}

/* ==========================================================================
   13. 高特异性补丁：压过 legend.css / legend-layout.css 的老牌匾样式
   ========================================================================== */
.site-header.site-header {
    background-color: rgba(11, 8, 6, .95);
    background-image: none;
    border-bottom: 1px solid rgba(212, 175, 103, .25);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .5);
    padding: 12px 20px;
}
.site-header .header-inner {
    background-image: none;
    max-width: 1280px;
}
.site-header::after { display: none; }
.site-header .header-left > .main-logo {
    width: 240px;
    max-width: 240px;
    margin: 0 0 4px;
    -webkit-filter: drop-shadow(0 0 10px rgba(212, 175, 103, .25));
    filter: drop-shadow(0 0 10px rgba(212, 175, 103, .25));
}
.site-header .header-left > .header-slogan {
    font-size: 12px;
    color: #8a7a5e;
    letter-spacing: 2px;
    font-style: normal;
}
.site-header .header-nav .nav-btn,
.site-header .header-left + .header-nav .nav-btn {
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    padding: 10px 16px;
    margin: 0;
    color: #c4b494;
    font-size: 15px;
    letter-spacing: 2px;
    text-shadow: none;
    box-shadow: none;
    line-height: normal;
}
.site-header .header-nav .nav-btn::before { display: none; }
.site-header .header-nav .nav-btn .lg-ico { display: none; }
.site-header .header-nav .nav-btn:hover {
    color: #f0d89a;
    border: none;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-transform: none;
    transform: none;
}
.site-header .header-nav .nav-btn-active,
.site-header .header-nav .nav-btn-active:hover {
    color: #f0d89a;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    font-weight: normal;
}
.site-header .header-nav .nav-btn-active::before { display: none; }
.site-header .header-nav .nav-sub {
    background-color: rgba(15, 11, 8, .98);
    border: 1px solid rgba(212, 175, 103, .25);
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
}
.site-header .header-nav .nav-sub-btn {
    color: #c4b494;
    padding: 10px 18px;
    font-size: 14px;
    letter-spacing: 1px;
}
.site-header .header-nav .nav-sub-btn:hover {
    background-color: rgba(212, 175, 103, .1);
    color: #f0d89a;
}
.lg-class-tabs > .lg-class-tab {
    background-color: rgba(20, 15, 10, .6);
    background-image: none;
    border: 1px solid rgba(212, 175, 103, .25);
    color: #a8967a;
    text-shadow: none;
    box-shadow: none;
}
.lg-class-tabs > .lg-class-tab:hover {
    color: #e2b95c;
    border-color: rgba(212, 175, 103, .5);
    box-shadow: none;
}
.lg-class-tabs > .lg-class-tab.is-active {
    background-color: rgba(212, 175, 103, .12);
    background-image: none;
    color: #ffe9a8;
    border-color: #e2b95c;
    box-shadow: 0 0 16px rgba(226, 185, 92, .2);
    text-shadow: none;
}
.lg-flow-num {
    width: auto;
    height: auto;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: rgba(212, 175, 103, .35);
    text-shadow: none;
    font-size: 38px;
    font-weight: bold;
    font-family: Georgia, serif;
}
.lg-flow-item::after { display: none; }
/* ==========================================================================
   14. 第二轮：彻底去复古化，现代卡片与按钮
   ========================================================================== */

/* 去掉卷轴木轴（上下 rod.png） */
.lg-scroll::before,
.lg-scroll::after {
    display: none !important;
}

/* 去掉四角包角贴图，改干净细边框 */
.legend-frame {
    background-image: none !important;
    border-radius: 6px !important;
}

/* 画框：去掉厚重包角，改现代卡片 */
.lg-art.lg-scroll,
.lg-art.lg-scroll.legend-frame,
.lg-art {
    background-color: rgba(20, 15, 10, .6) !important;
    border: 1px solid rgba(212, 175, 103, .2) !important;
    border-radius: 6px !important;
    padding: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important;
    overflow: hidden;
}
.lg-art-cap {
    background-color: transparent !important;
    border-top: none !important;
    padding: 14px 6px 6px !important;
}

/* 按钮：去六边形箭头，改现代圆角矩形 */
.btn-primary-large,
.submit-btn {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: 4px !important;
    padding: 14px 44px !important;
}
.btn-primary-large::before,
.btn-primary-large::after,
.submit-btn::before,
.submit-btn::after {
    display: none !important;
}

/* 表单框：去包角，改现代卡片 */
.apply-box,
.format-box,
.notice-list,
.lg-band {
    border-radius: 6px !important;
    border: 1px solid rgba(212, 175, 103, .2) !important;
}

/* 流程带：去掉背景画，改纯净深色 */
.lg-band {
    background-color: rgba(15, 11, 8, .6) !important;
    background-image: none !important;
}

/* 卡片：更现代的圆角和悬浮 */
.lg-card {
    border-radius: 6px !important;
}

/* 区块间距加大，更透气 */
.section {
    padding: 80px 24px !important;
}

/* 标题分隔线更细更克制 */
.section-title::before,
.section-title::after {
    height: 1px !important;
}

/* 回到顶部按钮现代化 */
.back-to-top {
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    text-align: center;
}
/* ==========================================================================
   15. 第三轮：流程带标题去牌匾化
   ========================================================================== */
.lg-band {
    background-image: none !important;
    background-color: rgba(15, 11, 8, .5) !important;
}
.lg-band-title {
    background-image: none !important;
    background-color: transparent !important;
    -webkit-text-fill-color: #e8d09a !important;
    color: #e8d09a !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
}
/* ==========================================================================
   16. 全新首页组件（hp- 前缀）—— 走心设计
   ========================================================================== */

/* ---- HERO 全屏主视觉 ---- */
.hp-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.hp-hero-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url(../images/legend/keyart8.jpg);
    background-size: cover;
    background-position: center center;
    z-index: 0;
}
.hp-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    background-image: -webkit-linear-gradient(top, rgba(10,8,6,.75) 0%, rgba(10,8,6,.35) 50%, rgba(10,8,6,.92) 100%);
    background-image: linear-gradient(180deg, rgba(10,8,6,.75) 0%, rgba(10,8,6,.35) 50%, rgba(10,8,6,.92) 100%);
}
.hp-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    max-width: 900px;
}
.hp-hero-kicker {
    display: inline-block;
    color: #d4af67;
    font-size: 14px;
    letter-spacing: 8px;
    padding: 8px 24px;
    border: 1px solid rgba(212,175,103,.4);
    border-radius: 2px;
    margin-bottom: 32px;
}
.hp-hero-title {
    font-size: 88px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 16px;
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: "KaiTi", "STKaiti", "SimSun", serif;
    text-shadow: 0 4px 30px rgba(0,0,0,.8), 0 0 60px rgba(212,175,103,.3);
}
.hp-hero-sub {
    font-size: 24px;
    color: #f0d89a;
    letter-spacing: 8px;
    margin-bottom: 16px;
    font-family: "KaiTi", serif;
}
.hp-hero-desc {
    font-size: 16px;
    color: #b8a684;
    letter-spacing: 3px;
    margin-bottom: 44px;
}
.hp-hero-btns {
    margin-top: 10px;
}
.hp-hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -15px;
    width: 30px;
    height: 30px;
    color: #8a7a5e;
    font-size: 20px;
    text-align: center;
    z-index: 2;
    -webkit-animation: hp-bounce 2s ease-in-out infinite;
    animation: hp-bounce 2s ease-in-out infinite;
}
@-webkit-keyframes hp-bounce {
    0%,100% { -webkit-transform: translateY(0); transform: translateY(0); }
    50% { -webkit-transform: translateY(8px); transform: translateY(8px); }
}
@keyframes hp-bounce {
    0%,100% { -webkit-transform: translateY(0); transform: translateY(0); }
    50% { -webkit-transform: translateY(8px); transform: translateY(8px); }
}

/* ---- 通用区块 ---- */
.hp-section {
    padding: 90px 24px;
    max-width: 1280px;
    margin: 0 auto;
}
.hp-section-head {
    text-align: center;
    margin-bottom: 50px;
}
.hp-section-head h2 {
    font-size: 38px;
    color: #f0d89a;
    letter-spacing: 10px;
    font-family: "KaiTi", serif;
    margin-bottom: 12px;
}
.hp-section-head p {
    color: #8a7a5e;
    font-size: 15px;
    letter-spacing: 2px;
}

/* ---- 特色卡片 ---- */
.hp-feature-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.hp-feature-card {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 220px;
    margin: 10px;
    padding: 40px 28px;
    background-color: rgba(20,15,10,.6);
    border: 1px solid rgba(212,175,103,.18);
    border-radius: 6px;
    text-align: center;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.hp-feature-card:hover {
    border-color: rgba(226,185,92,.5);
    background-color: rgba(30,22,14,.7);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.hp-feature-icon {
    font-size: 40px;
    color: #e2b95c;
    margin-bottom: 18px;
}
.hp-feature-card h3 {
    color: #f0d89a;
    font-size: 20px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}
.hp-feature-card p {
    color: #9a8a6e;
    font-size: 14px;
    line-height: 1.8;
}

/* ---- 按钮 ---- */
.hp-btn-primary {
    display: inline-block;
    padding: 15px 52px;
    font-size: 17px;
    letter-spacing: 4px;
    font-weight: bold;
    color: #2a1c07;
    background-color: #e2b95c;
    background-image: -webkit-linear-gradient(top, #ffe9a8 0%, #e2b95c 45%, #b8863a 100%);
    background-image: linear-gradient(180deg, #ffe9a8 0%, #e2b95c 45%, #b8863a 100%);
    border: 1px solid #ffe9a8;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    box-shadow: 0 2px 16px rgba(226,185,92,.3);
}
.hp-btn-primary:hover {
    box-shadow: 0 4px 28px rgba(226,185,92,.55);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}
.hp-btn-lg {
    padding: 18px 64px;
    font-size: 19px;
}
.hp-btn-ghost {
    display: inline-block;
    padding: 15px 40px;
    font-size: 16px;
    letter-spacing: 3px;
    color: #e8d09a;
    background-color: transparent;
    border: 1px solid rgba(212,175,103,.5);
    border-radius: 3px;
    text-decoration: none;
    margin-left: 14px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}
.hp-btn-ghost:hover {
    background-color: rgba(212,175,103,.12);
    border-color: #e2b95c;
    color: #ffe9a8;
}

/* ---- 下载 CTA ---- */
.hp-cta {
    position: relative;
    padding: 100px 24px;
    text-align: center;
    background-color: #0e0a07;
    background-image: -webkit-linear-gradient(top, #0e0a07 0%, #1a120a 50%, #0e0a07 100%);
    background-image: linear-gradient(180deg, #0e0a07 0%, #1a120a 50%, #0e0a07 100%);
    border-top: 1px solid rgba(212,175,103,.15);
    border-bottom: 1px solid rgba(212,175,103,.15);
}
.hp-cta h2 {
    font-size: 36px;
    color: #f0d89a;
    letter-spacing: 8px;
    font-family: "KaiTi", serif;
    margin-bottom: 14px;
}
.hp-cta p {
    color: #9a8a6e;
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 36px;
}

/* ---- 公告入口 ---- */
.hp-news-entry {
    max-width: 600px;
    margin: 0 auto;
}
.hp-news-card {
    display: block;
    padding: 28px 36px;
    background-color: rgba(20,15,10,.6);
    border: 1px solid rgba(212,175,103,.2);
    border-radius: 6px;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}
.hp-news-card:hover {
    border-color: rgba(226,185,92,.5);
    background-color: rgba(30,22,14,.7);
}
.hp-news-label {
    color: #e8d09a;
    font-size: 18px;
    letter-spacing: 3px;
}
.hp-news-arrow {
    float: right;
    color: #e2b95c;
    font-size: 22px;
}

/* ---- 新首页不需要旧 banner 区块，隐藏 ---- */
.page-home .banner.lg-hero { display: none; }
/* ============================================================
   【新模块】新闻 + 快速入口
   ============================================================ */
.hp-news-layout{ display:table; width:100%; border-spacing:0; }
.hp-quick{ display:table-cell; vertical-align:top; width:320px; padding-right:24px; }
.hp-quick-card{ display:block; height:80px; margin-bottom:14px; padding:0 24px; line-height:80px;
  background:rgba(20,15,8,0.85); border:1px solid rgba(212,175,55,0.25);
  -webkit-border-radius:6px; border-radius:6px; color:#e6d5a8; font-size:18px; text-decoration:none;
  -webkit-transition:all .25s ease; transition:all .25s ease; }
.hp-quick-card:hover{ border-color:#d4af37; background:rgba(40,30,12,0.9); color:#ffd700;
  -webkit-transform:translateY(-2px); transform:translateY(-2px); }
.hp-quick-icon{ margin-right:12px; font-size:22px; }

.hp-news{ display:table-cell; vertical-align:top; padding:20px 28px;
  background:rgba(20,15,8,0.85); border:1px solid rgba(212,175,55,0.2);
  -webkit-border-radius:6px; border-radius:6px; }
.hp-news-head{ padding-bottom:12px; border-bottom:1px solid rgba(212,175,55,0.2); overflow:hidden; }
/* ★ 2026-09-27 删掉两条死规则：`.hp-news-title`（原来的「最新资讯」标题）与
   `.hp-news-date`（列表左侧那列日期）。首页资讯栏改成了「选项卡 + 彩色分类标签」
   （见 templates/home.tpl.html 与 official.css §12.8），这两个元素在全站
   ——模板与已编译的 *.html 都翻过—— 再没有任何一处引用，
   留着只会让下一个人以为改了这里有反应。 */
.hp-news-more{ float:right; color:#999; font-size:13px; text-decoration:none; }
.hp-news-more:hover{ color:#ffd700; }
.hp-news-headline{ display:block; padding:14px 0; font-size:17px; color:#f0d090; font-weight:bold;
  text-decoration:none; border-bottom:1px dashed rgba(212,175,55,0.15); }
.hp-news-headline:hover{ color:#ffd700; }
.hp-news-list{ list-style:none; margin:0; padding:8px 0 0 0; }
.hp-news-list li{ height:34px; line-height:34px; overflow:hidden; }
.hp-news-list a{ color:#cfc4a8; text-decoration:none; font-size:14px; }
.hp-news-list a:hover{ color:#ffd700; }

/* ============================================================
   【新模块】官方公告
   ============================================================ */
.hp-notice-grid{ overflow:hidden; }
.hp-notice-item{ float:left; width:48%; margin-bottom:14px; padding:14px 18px;
  background:rgba(20,15,8,0.7); border-left:3px solid #d4af37;
  font-size:15px; line-height:1.6; color:#d6ccb0; }
.hp-notice-item:nth-child(odd){ margin-right:4%; }
.hp-notice-dot{ display:inline-block; width:6px; height:6px; margin-right:10px;
  background:#ffd700; -webkit-border-radius:50%; border-radius:50%; vertical-align:middle; }

/* ============================================================
   【新模块】玩家专属福利
   ============================================================ */
.hp-gift-grid{ overflow:hidden; }
.hp-gift-card{ float:left; width:48%; overflow:hidden;
  background:rgba(20,15,8,0.85); border:1px solid rgba(212,175,55,0.25);
  -webkit-border-radius:8px; border-radius:8px;
  -webkit-transition:all .3s ease; transition:all .3s ease; }
.hp-gift-card:nth-child(odd){ margin-right:4%; }
.hp-gift-card:hover{ border-color:#d4af37;
  -webkit-transform:translateY(-4px); transform:translateY(-4px);
  -webkit-box-shadow:0 12px 32px rgba(212,175,55,0.18); box-shadow:0 12px 32px rgba(212,175,55,0.18); }
.hp-gift-head{ padding:18px 24px; background:rgba(212,175,55,0.08); border-bottom:1px solid rgba(212,175,55,0.2); }
.hp-gift-head h3{ display:inline; margin:0; font-size:20px; color:#ffd700; vertical-align:middle; }
.hp-gift-icon{ margin-right:10px; font-size:24px; vertical-align:middle; }
.hp-gift-body{ padding:24px; text-align:center; }
.hp-gift-qr{ width:140px; height:140px; border:1px solid rgba(212,175,55,0.3);
  -webkit-border-radius:4px; border-radius:4px; background:#fff; padding:4px; }
.hp-gift-tip{ margin:10px 0 16px; color:#999; font-size:13px; }
.hp-gift-list{ list-style:none; margin:0 0 20px; padding:14px 16px; text-align:left;
  background:rgba(0,0,0,0.3); -webkit-border-radius:4px; border-radius:4px; }
.hp-gift-list li{ padding:5px 0; font-size:14px; line-height:1.5; color:#d6ccb0; }
.hp-gift-list li:before{ content:"·"; color:#d4af37; margin-right:8px; }

/* ============================================================
   【新模块】开区信息
   ============================================================ */
.hp-open-card{ background:rgba(20,15,8,0.85); border:1px solid rgba(212,175,55,0.25);
  -webkit-border-radius:8px; border-radius:8px; padding:28px 32px; }
.hp-open-tags{ text-align:center; padding-bottom:20px; margin-bottom:24px;
  border-bottom:1px solid rgba(212,175,55,0.2); }
.hp-open-tags span{ display:inline-block; margin:0 24px; font-size:15px; color:#e6d5a8; }
.hp-open-main{ display:table; width:100%; }
.hp-open-left{ display:table-cell; vertical-align:top; padding-right:36px; }
.hp-open-right{ display:table-cell; vertical-align:top; width:360px; padding-left:32px;
  border-left:1px solid rgba(212,175,55,0.15); }
.hp-open-title{ font-size:18px; font-weight:bold; color:#f0d090; line-height:1.6; margin:0 0 10px; }
.hp-open-time{ font-size:22px; font-weight:bold; color:#ffd700; margin:0 0 18px; }
.hp-open-points{ list-style:none; margin:0 0 20px; padding:0; font-size:14px; line-height:2; color:#e6e6e6; }
.hp-open-sub{ font-size:14px; font-weight:bold; color:#f0d090; margin:0 0 10px; }
.hp-open-prices{ margin:0 0 22px; overflow:hidden; }
.hp-open-prices span{ float:left; width:50%; padding:4px 0; font-size:13px; color:#cfc4a8; }
.hp-open-btns{ padding-top:10px; }
.hp-open-btns .hp-btn-ghost{ margin-left:12px; }
.hp-open-right h4{ margin:0 0 12px; font-size:16px; color:#ffd700; }
.hp-open-right ul{ list-style:none; margin:0 0 20px; padding:0; font-size:14px; line-height:2; color:#e6e6e6; }
.hp-open-right .hp-open-note{ font-size:12px; color:#aaa; padding-left:1em; }
.hp-open-right p{ font-size:13px; line-height:1.8; color:#d6ccb0; margin:0 0 8px; }
.hp-open-warn{ font-size:12px !important; color:#c97070 !important; }

/* ============================================================
   【页脚补充】
   ============================================================ */
.footer-engine{ padding:16px 24px; margin-bottom:20px; background:rgba(0,0,0,0.3);
  font-size:12px; line-height:1.8; color:#888; text-align:center;
  border-top:1px solid rgba(212,175,55,0.15); border-bottom:1px solid rgba(212,175,55,0.15); }
.footer-engine a{ color:#d4af37; text-decoration:none; margin-right:14px; }
.footer-notice-label{ color:#d4af37; margin-right:6px; }
.footer-cert{ margin-top:8px; font-size:12px; color:#777; }
.footer-cert a{ color:#999; text-decoration:none; margin:0 6px; }
.footer-cert a:hover{ color:#ffd700; }
.footer-pipe{ margin:0 8px; color:#555; }
.footer-corp{ margin-top:10px; }
.footer-corp a{ color:#888; }
.footer-corp a:hover{ color:#ffd700; }

/* 半宽布局补全（48% + 4%） */
.hp-gift-card:nth-child(2){ float:right; margin-right:0; }
.hp-notice-item:nth-child(even){ float:right; margin-right:0; }
/* ============================================================
   【升级】Hero 视频背景
   ============================================================ */
.hp-hero{ position:relative; overflow:hidden; }
.hp-hero-video{ position:absolute; top:50%; left:50%;
  min-width:100%; min-height:100%; width:auto; height:auto;
  -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
  z-index:0; }
.hp-hero-overlay{ z-index:1;
  background:-webkit-gradient(linear,left top,left bottom,from(rgba(8,6,4,0.55)),to(rgba(8,6,4,0.85)));
  background:linear-gradient(to bottom,rgba(8,6,4,0.55),rgba(8,6,4,0.85)); }
.hp-hero-content{ z-index:2; }

/* ============================================================
   【升级】导航灵动动效
   ============================================================ */
.site-header .header-nav .nav-btn{ position:relative; padding:6px 2px; margin:0 18px;
  color:#cfc4a8; text-decoration:none; font-size:15px; letter-spacing:1px;
  -webkit-transition:color .25s ease, letter-spacing .25s ease, text-shadow .25s ease;
  transition:color .25s ease, letter-spacing .25s ease, text-shadow .25s ease; }
.site-header .header-nav .nav-btn:after{ content:""; position:absolute; left:50%; bottom:-4px;
  width:0; height:2px; background:#ffd700;
  -webkit-transition:width .3s ease, left .3s ease; transition:width .3s ease, left .3s ease; }
.site-header .header-nav .nav-btn:hover{ color:#ffd700; letter-spacing:2px; text-shadow:0 0 12px rgba(255,215,0,0.5); }
.site-header .header-nav .nav-btn:hover:after{ width:100%; left:0; }
.site-header .header-nav .nav-btn-active{ color:#ffd700; }
.site-header .header-nav .nav-btn-active:after{ width:100%; left:0; }
.site-header .header-nav .nav-sub-btn{
  -webkit-transition:all .2s ease; transition:all .2s ease; }
.site-header .header-nav .nav-sub-btn:hover{ background:rgba(212,175,55,0.15); color:#ffd700; padding-left:22px; }

/* ============================================================
   【升级】主按钮 hover 灵动
   ============================================================ */
.hp-btn-primary{ position:relative; overflow:hidden; }
.hp-btn-primary:before{ content:""; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(0.5,rgba(255,255,255,0.4)),to(rgba(255,255,255,0)));
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.4),rgba(255,255,255,0));
  -webkit-transition:left .6s ease; transition:left .6s ease; }
.hp-btn-primary:hover:before{ left:100%; }
.hp-btn-primary:hover{ -webkit-transform:translateY(-2px); transform:translateY(-2px);
  -webkit-box-shadow:0 8px 24px rgba(212,175,55,0.4); box-shadow:0 8px 24px rgba(212,175,55,0.4); }
.hp-btn-ghost{ -webkit-transition:all .25s ease; transition:all .25s ease; }
.hp-btn-ghost:hover{ background:rgba(212,175,55,0.12); color:#ffd700;
  -webkit-transform:translateY(-2px); transform:translateY(-2px); }

/* 快速入口卡片 hover */
.hp-quick-card{ -webkit-transition:all .3s ease; transition:all .3s ease; }
.hp-quick-card:hover{ padding-left:32px; }
/* ============================================================
   【重排版】Hero 左对齐布局
   ============================================================ */
.hp-hero-content{ text-align:center; }
.hp-hero-left{ text-align:left; width:1200px; margin:0 auto; padding-right:50%; }
.hp-hero-left .hp-hero-kicker{ display:inline-block; }
.hp-hero-left .hp-hero-title{ font-size:96px; text-align:left; margin-bottom:10px; }
.hp-hero-divider{ width:120px; height:2px; background:linear-gradient(to right,#ffd700,rgba(255,215,0,0)); margin:14px 0; }
.hp-hero-left .hp-hero-sub{ text-align:left; font-size:26px; margin-bottom:14px; }
.hp-hero-left .hp-hero-desc{ text-align:left; font-size:15px; line-height:1.9; color:#ccc; margin-bottom:28px; }
.hp-hero-left .hp-hero-btns{ text-align:left; }
.hp-hero-overlay{
  background:linear-gradient(to right,rgba(8,6,4,0.85) 0%,rgba(8,6,4,0.6) 40%,rgba(8,6,4,0.2) 70%,rgba(8,6,4,0.4) 100%);
}

/* ============================================================
   【重排版】Section 标题装饰
   ============================================================ */
.hp-section-head{ text-align:center; margin-bottom:40px; }
.hp-section-head h2{ display:inline-block; margin:0 16px; font-size:32px; color:#ffd700;
  letter-spacing:8px; vertical-align:middle; }
.hp-section-head p{ margin-top:12px; color:#999; font-size:14px; letter-spacing:2px; }
.hp-section-deco{ color:#d4af37; font-size:14px; vertical-align:middle; }

/* ============================================================
   【重排版】官方卖点图标网格
   ============================================================ */
.hp-section-alt{ background:rgba(15,10,6,0.6); border-top:1px solid rgba(212,175,55,0.1); border-bottom:1px solid rgba(212,175,55,0.1); }
.hp-feature-grid{ overflow:hidden; }
.hp-feature-item{ float:left; width:16.66%; padding:20px 10px; text-align:center;
  -webkit-transition:all .3s ease; transition:all .3s ease;
  border-right:1px solid rgba(212,175,55,0.08); }
.hp-feature-item:last-child{ border-right:none; }
.hp-feature-item:hover{ background:rgba(212,175,55,0.06);
  -webkit-transform:translateY(-4px); transform:translateY(-4px); }
.hp-feature-icon{ font-size:36px; margin-bottom:12px; }
.hp-feature-item h4{ margin:0 0 8px; font-size:16px; color:#ffd700; }
.hp-feature-item p{ margin:0; font-size:12px; color:#999; line-height:1.5; }

/* ============================================================
   【重排版】区块节奏
   ============================================================ */
.hp-section{ padding:60px 0; }
.hp-news-layout{ margin-top:0; }
.hp-gift-card{ margin-bottom:0; }
/* 修复 Hero 左对齐布局 */
.hp-hero-left{ width:1200px; margin:0 auto; text-align:left; }
.hp-hero-left .hp-hero-kicker{ text-align:left; }
.hp-hero-left .hp-hero-title{ font-size:96px; text-align:left; margin-bottom:10px; line-height:1.1; }
.hp-hero-left .hp-hero-divider{ width:120px; height:2px;
  background:linear-gradient(to right,#ffd700,rgba(255,215,0,0)); margin:14px 0; }
.hp-hero-left .hp-hero-sub{ text-align:left; font-size:26px; margin-bottom:14px; }
.hp-hero-left .hp-hero-desc{ text-align:left; font-size:15px; line-height:1.9; color:#ccc; margin-bottom:28px; max-width:480px; }
.hp-hero-left .hp-hero-btns{ text-align:left; }
.hp-hero-overlay{
  background:linear-gradient(to right,rgba(8,6,4,0.88) 0%,rgba(8,6,4,0.7) 35%,rgba(8,6,4,0.2) 65%,rgba(8,6,4,0.3) 100%);
}
/* 最终修复 Hero 左对齐 */
.hp-hero-left{ width:1200px; margin:0 auto; text-align:left; padding-right:0 !important; }
.hp-hero-left .hp-hero-title{ font-size:88px !important; text-align:left !important; margin-bottom:10px; line-height:1.1; letter-spacing:8px; }
.hp-hero-left .hp-hero-kicker{ text-align:left !important; }
.hp-hero-left .hp-hero-sub{ text-align:left !important; }
.hp-hero-left .hp-hero-desc{ text-align:left !important; max-width:520px; }
.hp-hero-left .hp-hero-btns{ text-align:left !important; }
.hp-hero-left .hp-hero-divider{ margin-left:0; }
/* Hero 左侧信息面板强化 */
.hp-hero-overlay{
  background:linear-gradient(to right,
    rgba(5,3,2,0.92) 0%,
    rgba(5,3,2,0.85) 30%,
    rgba(5,3,2,0.5) 55%,
    rgba(5,3,2,0.15) 80%,
    rgba(5,3,2,0.3) 100%);
}
.hp-hero-left{ position:relative; }
.hp-hero-left .hp-hero-title{
  font-family:"KaiTi","STKaiti","楷体",serif;
  text-shadow:0 4px 24px rgba(0,0,0,0.6), 0 0 60px rgba(255,215,0,0.15);
}
.hp-hero-kicker{
  border:1px solid rgba(212,175,55,0.4);
  padding:6px 18px !important;
  letter-spacing:4px;
  color:#d4af37 !important;
  font-size:13px !important;
}
.hp-hero-sub{
  font-family:"KaiTi","STKaiti","楷体",serif;
  color:#f0d090 !important;
  text-shadow:0 2px 12px rgba(0,0,0,0.8);
}

/* Section 标题装饰线 */
.hp-section-head{ position:relative; }
.hp-section-head h2{
  font-family:"KaiTi","STKaiti","楷体",serif;
}
.hp-section-head p{ position:relative; display:inline-block; padding:0 20px; }
.hp-section-head p:before, .hp-section-head p:after{
  content:""; position:absolute; top:50%; width:40px; height:1px;
  background:linear-gradient(to right, rgba(212,175,55,0), rgba(212,175,55,0.5));
}
.hp-section-head p:before{ right:100%; }
.hp-section-head p:after{ left:100%;
  background:linear-gradient(to left, rgba(212,175,55,0), rgba(212,175,55,0.5)); }

/* 卖点卡片升级 */
.hp-feature-item{
  border:1px solid rgba(212,175,55,0.1);
  background:rgba(0,0,0,0.2);
}
.hp-feature-item:hover{
  border-color:rgba(212,175,55,0.4);
  background:rgba(212,175,55,0.08);
  box-shadow:0 8px 32px rgba(212,175,55,0.1);
}
.hp-feature-icon{
  width:64px; height:64px; line-height:64px; margin:0 auto 14px;
  border:1px solid rgba(212,175,55,0.3);
  border-radius:50%;
  background:rgba(212,175,55,0.08);
}

/* 新闻卡片升级 */
.hp-news{
  border:1px solid rgba(212,175,55,0.2);
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
}
.hp-quick-card{
  border:1px solid rgba(212,175,55,0.2);
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
}

/* 福利卡片升级 */
.hp-gift-card{
  border:1px solid rgba(212,175,55,0.25);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.hp-gift-card:hover{
  border-color:#ffd700;
  box-shadow:0 16px 48px rgba(212,175,55,0.2);
}
.hp-gift-qr{
  box-shadow:0 0 0 4px rgba(212,175,55,0.15);
}

/* 开区卡片升级 */
.hp-open-card{
  border:1px solid rgba(212,175,55,0.3);
  box-shadow:0 8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,215,0,0.1);
  background:linear-gradient(135deg, rgba(30,22,10,0.9) 0%, rgba(15,10,5,0.95) 100%);
}
.hp-open-tags{
  border-bottom:1px solid rgba(212,175,55,0.2);
}
.hp-open-time{
  font-family:"KaiTi","STKaiti","楷体",serif;
  text-shadow:0 0 20px rgba(255,215,0,0.3);
}
.hp-open-prices span{
  padding:6px 10px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(212,175,55,0.1);
  margin:2px;
}
/* ============================================================
   【新增】中州大陆地图区块
   ============================================================ */
.hp-world-card{ position:relative; overflow:hidden;
  border:1px solid rgba(212,175,55,0.3);
  -webkit-border-radius:8px; border-radius:8px;
  -webkit-box-shadow:0 8px 40px rgba(0,0,0,0.5); box-shadow:0 8px 40px rgba(0,0,0,0.5); }
.hp-world-img{ display:block; width:100%; height:auto; }
.hp-world-mask{ position:absolute; left:0; right:0; bottom:0;
  padding:30px 40px;
  background:linear-gradient(to top, rgba(5,3,2,0.95) 0%, rgba(5,3,2,0.6) 60%, rgba(5,3,2,0) 100%); }
.hp-world-quote{ margin:0 0 8px; font-family:"KaiTi","STKaiti","楷体",serif;
  font-size:20px; color:#f0d090; }
.hp-world-author{ margin:0; text-align:right; font-size:13px; color:#999; }

/* ============================================================
   【升级】下载CTA 背景图
   ============================================================ */
.hp-cta{ position:relative; overflow:hidden;
  background-size:cover; background-position:center; }
.hp-cta-overlay{ position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(to bottom, rgba(5,3,2,0.7) 0%, rgba(5,3,2,0.85) 100%); }
.hp-cta-inner{ position:relative; z-index:2; }

/* ============================================================
   【升级】菜单金属质感
   ============================================================ */
.site-header .header-nav .nav-btn{
  padding:8px 16px;
  border:1px solid transparent;
  -webkit-transition:all .25s ease; transition:all .25s ease;
}
.site-header .header-nav .nav-btn:hover{
  border-color:rgba(212,175,55,0.5);
  background:linear-gradient(to bottom, rgba(212,175,55,0.15), rgba(212,175,55,0.05));
  text-shadow:0 0 10px rgba(255,215,0,0.6);
}
.site-header .header-nav .nav-btn-active{
  border-color:rgba(212,175,55,0.6);
  background:linear-gradient(to bottom, rgba(212,175,55,0.2), rgba(212,175,55,0.05));
}
.site-header .header-nav .nav-sub-btn{
  -webkit-transition:all .2s ease; transition:all .2s ease;
}
.site-header .header-nav .nav-sub-btn:hover{
  border-left:3px solid #ffd700;
  background:rgba(212,175,55,0.1);
}

/* 职业tab 金属质感 */
.lg-class-tab{
  border:1px solid rgba(212,175,55,0.3);
  background:rgba(0,0,0,0.4);
  color:#cfc4a8;
  -webkit-transition:all .25s ease; transition:all .25s ease;
}
.lg-class-tab:hover{
  border-color:#ffd700;
  color:#ffd700;
  background:rgba(212,175,55,0.15);
  box-shadow:0 0 20px rgba(212,175,55,0.2);
}
.lg-class-tab.is-active{
  border-color:#ffd700;
  color:#ffd700;
  background:linear-gradient(to bottom, rgba(212,175,55,0.25), rgba(212,175,55,0.05));
  box-shadow:0 0 24px rgba(212,175,55,0.3), inset 0 1px 0 rgba(255,215,0,0.2);
}
/* ============================================================
   【重排版 v8】Hero 底部 CTA 条（不叠大字，让视频自己说话）
   ============================================================ */
.hp-hero{ position:relative; height:100vh; min-height:600px; }
.hp-hero-cta{ position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:40px 0 50px; text-align:center;
  background:linear-gradient(to bottom, rgba(5,3,2,0) 0%, rgba(5,3,2,0.85) 40%, rgba(5,3,2,0.95) 100%); }
.hp-hero-tagline{ margin:0 0 18px; font-size:15px; color:#d4af37; letter-spacing:3px; }
.hp-hero-btns{ text-align:center; }
.hp-hero-btns .hp-btn-primary{ margin-right:16px; }

/* ============================================================
   【重排版 v8】菜单金属铭牌化
   ============================================================ */
.site-header{
  background:linear-gradient(to bottom, rgba(10,6,3,0.98), rgba(10,6,3,0.92));
  border-bottom:1px solid rgba(212,175,55,0.3);
  box-shadow:0 2px 20px rgba(0,0,0,0.6);
}
.site-header .header-inner{ height:80px; }
.site-header .header-nav .nav-btn{
  display:inline-block; padding:8px 22px; margin:0 4px;
  font-size:14px; letter-spacing:2px; color:#cfc4a8; text-decoration:none;
  border:1px solid rgba(212,175,55,0.25);
  background:linear-gradient(to bottom, rgba(40,28,12,0.8), rgba(20,14,6,0.8));
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  -webkit-transition:all .25s ease; transition:all .25s ease;
}
.site-header .header-nav .nav-btn:hover{
  color:#ffd700; border-color:rgba(212,175,55,0.7);
  background:linear-gradient(to bottom, rgba(80,58,20,0.9), rgba(40,28,10,0.9));
  box-shadow:0 0 16px rgba(212,175,55,0.3), inset 0 1px 0 rgba(255,215,0,0.2);
  text-shadow:0 0 8px rgba(255,215,0,0.6);
}
.site-header .header-nav .nav-btn-active{
  color:#ffd700; border-color:rgba(212,175,55,0.8);
  background:linear-gradient(to bottom, rgba(120,88,28,0.9), rgba(60,42,14,0.9));
  box-shadow:0 0 20px rgba(212,175,55,0.4), inset 0 1px 0 rgba(255,215,0,0.3);
}
/* 去掉之前 nav-btn 的下划线伪元素 */
.site-header .header-nav .nav-btn:after{ display:none !important; }
/* 下拉子菜单 */
.site-header .header-nav .nav-sub{
  background:linear-gradient(to bottom, rgba(20,14,6,0.98), rgba(10,7,3,0.98));
  border:1px solid rgba(212,175,55,0.3);
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
}
.site-header .header-nav .nav-sub-btn{
  padding:10px 20px; color:#cfc4a8; font-size:13px; letter-spacing:1px;
  border-bottom:1px solid rgba(212,175,55,0.1);
}
.site-header .header-nav .nav-sub-btn:hover{
  color:#ffd700; background:rgba(212,175,55,0.12);
}

/* ============================================================
   【重排版 v8】收紧 section 间距
   ============================================================ */
.hp-section{ padding:40px 0; }
.hp-section-head{ margin-bottom:28px; }
.hp-section-head h2{ font-size:28px; letter-spacing:6px; }

/* ============================================================
   【重排版 v8】统一卡片质感
   ============================================================ */
.hp-news, .hp-quick-card, .hp-gift-card, .hp-open-card, .hp-world-card{
  box-shadow:0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,215,0,0.06);
}

/* ============================================================
   【重排版 v8】主按钮金属质感
   ============================================================ */
.hp-btn-primary{
  background:linear-gradient(to bottom, #f0d060 0%, #d4af37 50%, #a07820 100%);
  color:#1a0f00; font-weight:bold; letter-spacing:3px;
  border:1px solid #ffd700;
  box-shadow:0 2px 8px rgba(212,175,55,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow:0 1px 0 rgba(255,255,255,0.3);
}
.hp-btn-primary:hover{
  background:linear-gradient(to bottom, #ffe080 0%, #e8c847 50%, #b88828 100%);
  box-shadow:0 4px 16px rgba(212,175,55,0.6), inset 0 1px 0 rgba(255,255,255,0.5);
}
.hp-btn-ghost{
  background:rgba(212,175,55,0.08); color:#ffd700; letter-spacing:3px;
  border:1px solid rgba(212,175,55,0.5);
}
.hp-btn-ghost:hover{
  background:rgba(212,175,55,0.2);
  box-shadow:0 0 16px rgba(212,175,55,0.3);
}
/* ============================================================
   【重排版 v9】职业展示三列并排
   ============================================================ */
.hp-class-grid{ display:table; width:100%; table-layout:fixed; border-collapse:separate; border-spacing:15px 0; }
.hp-class-card{ display:table-cell; vertical-align:top;
  background:linear-gradient(to bottom, rgba(30,20,10,0.9), rgba(15,10,5,0.9));
  border:1px solid rgba(212,175,55,0.25);
  padding:20px; text-align:center;
  clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.hp-class-art{ height:280px; overflow:hidden; margin-bottom:16px;
  background:radial-gradient(ellipse at center, rgba(212,175,55,0.08) 0%, transparent 70%);
}
.hp-class-art img{ max-height:100%; max-width:100%; -webkit-filter:drop-shadow(0 4px 12px rgba(0,0,0,0.6)); }
.hp-class-info h3{ font-size:22px; color:#ffd700; letter-spacing:4px; margin:0 0 8px; }
.hp-class-tag{ color:#d4af37; font-size:13px; letter-spacing:2px; margin:0 0 14px; }
.hp-class-info ul{ list-style:none; padding:0; margin:0; text-align:left; }
.hp-class-info li{ color:#cfc4a8; font-size:13px; line-height:2; padding-left:16px; position:relative; }
.hp-class-info li:before{ content:"◆"; color:#d4af37; position:absolute; left:0; font-size:10px; }

/* ============================================================
   【重排版 v9】技能展示三列并排
   ============================================================ */
.hp-skill-grid{ display:table; width:100%; table-layout:fixed; border-collapse:separate; border-spacing:15px 0; }
.hp-skill-card{ display:table-cell; vertical-align:top;
  background:rgba(15,10,5,0.6);
  border:1px solid rgba(212,175,55,0.2);
  padding:16px; text-align:center;
}
.hp-skill-card h4{ color:#ffd700; font-size:16px; letter-spacing:3px; margin:0 0 14px; }
.hp-skill-card .lg-skill-strip{ background:transparent; border:none; }
.hp-skill-card .lg-skill-body{ position:relative; }
.hp-skill-card .lg-skill-imgs img{ display:none; margin:0 auto; border:1px solid rgba(212,175,55,0.3); }
.hp-skill-card .lg-skill-imgs img.is-active{ display:block; }
.hp-skill-card .lg-skill-nav{ cursor:pointer; color:#d4af37; font-size:20px;
  position:absolute; top:50%; margin-top:-20px;
  width:32px; height:32px; line-height:32px; text-align:center;
  background:rgba(0,0,0,0.6); border:1px solid rgba(212,175,55,0.4);
  z-index:2;
}
.hp-skill-card .lg-skill-prev{ left:0; }
.hp-skill-card .lg-skill-next{ right:0; }

/* 隐藏旧的 tab/panel */
.lg-class-tabs, .lg-class-panels{ display:none !important; }
/* ============================================================
   【重排版 v10】清理残留装饰
   ============================================================ */
/* 中州大陆地图上的旧模板标记全部隐藏 */
.hp-world-card img{ pointer-events:auto; }
.hp-world-card *::before, .hp-world-card *::after{ display:none !important; }
.hp-world-card .map-marker, .hp-world-card .map-nav, .hp-world-card .map-icon{ display:none !important; }

/* 隐藏旧 legend 模板残留的装饰 */
.lg-scroll, .lg-art-cap, .lg-2col, .lg-col-side, .lg-col-main, .lg-class-stage{ display:none !important; }

/* 技能展示区标题确保可见 */
.hp-skill-card h4{ margin-bottom:12px; color:#ffd700; font-size:15px; letter-spacing:2px; }
.hp-skill-card .lg-skill-strip{ padding:0; }
.hp-skill-card .lg-skill-body{ min-height:280px; display:table; width:100%; }
.hp-skill-card .lg-skill-imgs{ display:table-cell; text-align:center; vertical-align:middle; }
/* ============================================================
   【重排版 v11】全局背景：登录界面夕阳古城，明亮暖金调
   ============================================================ */
/* ★ 2026-09-27 换底图：login_scene.webp → qian_bg.jpg
   原因不是"不好看"，是那张图**本身就是一张旧登录界面的截图**：
   画面里画着「登 陆 / 用户名 / 密 码 / 提交 / 取消」一整套表单控件，
   左上角还有一枚硕大的红色「如浩传世」印章。
   它作为 body 背景是 `fixed` + `cover`，于是**每个页面、每个滚动位置**
   都在同一个视口位置透出一块"看起来坏掉的表单"，印章还会从页眉上方
   穿出来压在菜单上文字上。叠加层当时只有 0.6–0.8，压不住。
   换图是唯一干净的解法（裁掉/修图都会留下接缝）。
   qian_bg.jpg 是同一尺寸（2730×1536）的手绘中州大陆全图，无 UI、无水印。 */
body{
  background:
    linear-gradient(to bottom, rgba(10,6,3,0.92) 0%, rgba(20,12,6,0.88) 30%, rgba(10,6,3,0.95) 100%),
    url('/images/art/qian_bg.jpg') center top / cover no-repeat fixed;
  background-color:#1a0f08;
}
/* Hero 以下所有 section 背景改成半透明，让底图透出来 */
.hp-section{
  background:transparent;
}
.hp-section-alt{
  background:rgba(0,0,0,0.35);
}
/* 新闻/卡片/福利等容器改半透明深棕 */
.hp-news, .hp-quick-card, .hp-gift-card, .hp-open-card, .hp-class-card, .hp-skill-card{
  background:linear-gradient(to bottom, rgba(35,22,10,0.92), rgba(20,12,6,0.92));
  border-color:rgba(212,175,55,0.3);
}
/* 页脚加深 */
.site-footer{
  background:linear-gradient(to bottom, rgba(10,5,2,0.95), rgba(5,3,1,0.98));
}
/* Hero 区遮罩加重，保证视频不被底图影响 */
.hp-hero-overlay{
  background:linear-gradient(to bottom, rgba(5,3,2,0.3) 0%, rgba(5,3,2,0.1) 50%, rgba(5,3,2,0.7) 100%);
}
/* 下载 CTA 区保留原有背景图 */
.hp-cta{ background-size:cover; background-position:center; }
/* ============================================================
   【重排版 v12】大幅提亮：降低遮罩，让底图透出来
   ============================================================ */
body{
  background:
    linear-gradient(to bottom, rgba(10,6,3,0.86) 0%, rgba(22,14,7,0.78) 30%, rgba(10,6,3,0.9) 100%),
    url('/images/art/qian_bg.jpg') center top / cover no-repeat fixed;
  background-color:#2a1a0a;
}
.hp-section-alt{
  background:rgba(20,12,6,0.4);
}
.hp-news, .hp-quick-card, .hp-gift-card, .hp-open-card, .hp-class-card, .hp-skill-card{
  background:linear-gradient(to bottom, rgba(50,32,15,0.85), rgba(30,18,8,0.85));
  border-color:rgba(255,215,100,0.4);
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
}
/* 标题和文字在亮背景上加阴影保证可读 */
.hp-section-head h2{
  text-shadow:0 2px 8px rgba(0,0,0,0.8), 0 0 20px rgba(212,175,55,0.4);
}
.hp-class-info h3, .hp-skill-card h4{
  text-shadow:0 2px 6px rgba(0,0,0,0.7);
}
.hp-class-info li, .hp-class-tag{
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
}
/* ============================================================
   【三图轮播】
   ============================================================ */
.hp-banner-wrap{ padding:20px 0 0; }
.hp-banner{ position:relative; width:100%; max-width:1200px; margin:0 auto;
  overflow:hidden; border:2px solid rgba(212,175,55,0.4);
  box-shadow:0 4px 24px rgba(0,0,0,0.5);
}
.hp-banner-slide{ position:absolute; top:0; left:0; width:100%; height:auto;
  opacity:0; -webkit-transition:opacity 1s ease; transition:opacity 1s ease;
}
.hp-banner-slide.is-active{ opacity:1; position:relative; }
.hp-banner-nav{ position:absolute; top:50%; margin-top:-25px; width:50px; height:50px;
  line-height:50px; text-align:center; font-size:24px; color:#ffd700; cursor:pointer;
  background:rgba(0,0,0,0.5); border:1px solid rgba(212,175,55,0.5); z-index:2;
}
.hp-banner-prev{ left:10px; }
.hp-banner-next{ right:10px; }
.hp-banner-nav:hover{ background:rgba(212,175,55,0.3); }
.hp-banner-dots{ position:absolute; bottom:15px; left:0; right:0; text-align:center; z-index:2; }
.hp-banner-dot{ display:inline-block; width:12px; height:12px; margin:0 5px;
  background:rgba(255,255,255,0.4); cursor:pointer; border-radius:50%;
}
.hp-banner-dot.is-active{ background:#ffd700; }
/* ============================================================
   【职业配色+动画】
   ============================================================ */
.hp-class-card{ -webkit-transition:transform .3s ease; transition:transform .3s ease; }
.hp-class-card:hover{ -webkit-transform:translateY(-6px); transform:translateY(-6px); }

/* 战士 - 红金 */
.hp-class-card:nth-child(1) .hp-class-info h3{ color:#ff4444; text-shadow:0 0 16px rgba(255,60,60,0.6); }
.hp-class-card:nth-child(1) .hp-class-tag{ color:#ff8866; }
.hp-class-card:nth-child(1){ border-color:rgba(255,80,60,0.4); }

/* 法师 - 蓝紫 */
.hp-class-card:nth-child(2) .hp-class-info h3{ color:#66aaff; text-shadow:0 0 16px rgba(80,160,255,0.6); }
.hp-class-card:nth-child(2) .hp-class-tag{ color:#8899ff; }
.hp-class-card:nth-child(2){ border-color:rgba(80,140,255,0.4); }

/* 道士 - 青绿 */
.hp-class-card:nth-child(3) .hp-class-info h3{ color:#44dd88; text-shadow:0 0 16px rgba(60,220,140,0.6); }
.hp-class-card:nth-child(3) .hp-class-tag{ color:#66ddaa; }
.hp-class-card:nth-child(3){ border-color:rgba(60,220,150,0.4); }

/* 立绘浮动动画 */
.hp-class-art img{
  -webkit-animation:floatY 3s ease-in-out infinite;
  animation:floatY 3s ease-in-out infinite;
}
.hp-class-card:nth-child(2) .hp-class-art img{ -webkit-animation-delay:0.5s; animation-delay:0.5s; }
.hp-class-card:nth-child(3) .hp-class-art img{ -webkit-animation-delay:1s; animation-delay:1s; }
@-webkit-keyframes floatY{
  0%,100%{ -webkit-transform:translateY(0); transform:translateY(0); }
  50%{ -webkit-transform:translateY(-10px); transform:translateY(-10px); }
}
@keyframes floatY{
  0%,100%{ -webkit-transform:translateY(0); transform:translateY(0); }
  50%{ -webkit-transform:translateY(-10px); transform:translateY(-10px); }
}
/* ============================================================
   Hero 下载区：三按钮+二维码并排
   ============================================================ */
.hp-hero-download{ display:table; width:100%; max-width:900px; margin:0 auto;
  table-layout:fixed; }
.hp-dl-btns{ display:table-cell; vertical-align:middle; text-align:left; padding-left:40px; }
.hp-dl-btns .hp-btn-primary{ margin:0 8px 0 0; }
.hp-dl-btns .hp-btn-ghost{ margin-left:8px; }
.hp-dl-qr{ display:table-cell; vertical-align:middle; width:120px; text-align:center; }
.hp-dl-qr img{ width:90px; height:90px; border:2px solid rgba(212,175,55,0.5); background:#fff; }
.hp-dl-qr p{ margin:6px 0 0; font-size:12px; color:#ffd700; }
/* ============================================================
   【专业美化 v17】
   ============================================================ */
/* 全局：卡片加金色描边+内阴影+装饰角 */
.hp-news, .hp-quick-card, .hp-gift-card, .hp-open-card, .hp-class-card, .hp-skill-card, .hp-banner{
  border:1px solid rgba(212,175,55,0.35) !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,215,0,0.1);
  position:relative;
}
/* 卡片四角金色装饰 */
.hp-news:before, .hp-news:after,
.hp-gift-card:before, .hp-gift-card:after,
.hp-open-card:before, .hp-open-card:after{
  content:""; position:absolute; width:14px; height:14px;
  border:2px solid #ffd700; z-index:1;
}
.hp-news:before, .hp-gift-card:before, .hp-open-card:before{ top:4px; left:4px; border-right:none; border-bottom:none; }
.hp-news:after, .hp-gift-card:after, .hp-open-card:after{ bottom:4px; right:4px; border-left:none; border-top:none; }

/* section 标题：左右加金色装饰线 */
.hp-section-head{
  padding:10px 0; position:relative;
}
.hp-section-head h2{
  font-size:30px; letter-spacing:8px;
  background:linear-gradient(to bottom, #ffe080, #d4af37, #a07820);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none;
}

/* 主按钮：更精致的金属质感 */
.hp-btn-primary{
  padding:12px 32px; font-size:15px; letter-spacing:3px;
  background:linear-gradient(to bottom, #ffe080 0%, #d4af37 45%, #8b6914 100%);
  border:1px solid #ffd700;
  box-shadow:0 2px 8px rgba(212,175,55,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
  clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.hp-btn-primary:hover{
  background:linear-gradient(to bottom, #fff0a0 0%, #e8c847 45%, #a07820 100%);
  box-shadow:0 4px 16px rgba(212,175,55,0.6), inset 0 1px 0 rgba(255,255,255,0.6);
}
.hp-btn-ghost{
  padding:12px 28px; font-size:14px; letter-spacing:2px;
  background:rgba(212,175,55,0.1);
  border:1px solid rgba(212,175,55,0.5);
  clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* Hero 下载区重新排版 */
.hp-hero-cta{ padding:30px 0 40px; }
.hp-dl-btns{ text-align:center !important; padding-left:0 !important; }
.hp-dl-btns .hp-btn-primary{ margin:0 6px; }
.hp-dl-btns .hp-btn-ghost{ margin:0 6px; }
.hp-dl-qr{ width:110px; }

/* 福利卡片紧凑化 */
.hp-gift-card{ padding:0 !important; }
.hp-gift-head{ padding:14px 20px; border-bottom:1px solid rgba(212,175,55,0.2); }
.hp-gift-body{ padding:16px 20px; }
.hp-gift-qr{ width:100px; height:100px; }
.hp-gift-list{ font-size:12px; line-height:1.8; }

/* 快速入口卡片 */
.hp-quick-card{
  padding:18px 14px; text-align:center;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.hp-quick-icon{ font-size:28px; }
.hp-quick-name{ font-size:14px; letter-spacing:2px; color:#ffd700; margin-top:8px; }

/* 新闻列表行hover */
.hp-news-list li{ padding:6px 0; border-bottom:1px dashed rgba(212,175,55,0.1); }
.hp-news-list li:hover a{ color:#ffd700; }
.hp-news-list li:last-child{ border-bottom:none; }

/* 卖点图标圆形金框 */
.hp-feature-icon{
  width:60px; height:60px; line-height:60px; font-size:26px;
  border:2px solid rgba(212,175,55,0.5); border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,0.15), transparent);
}
/* ============================================================
   【菜单金属牌匾 v18】
   ============================================================ */
.site-header{
  background:linear-gradient(to bottom, #1a0f05 0%, #0d0803 100%);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(to right, transparent, #ffd700 20%, #ffd700 80%, transparent) 1;
}
.header-inner{ height:70px; }
.header-nav{ padding-top:8px; }
.header-nav .nav-btn{
  display:inline-block; padding:10px 24px; margin:0 3px;
  font-size:14px; font-weight:bold; letter-spacing:3px; color:#d4af37;
  text-decoration:none; position:relative;
  background:linear-gradient(to bottom, #2a1a08 0%, #1a0f05 50%, #0d0803 100%);
  border:1px solid rgba(212,175,55,0.4);
  box-shadow:inset 0 1px 0 rgba(255,215,0,0.15), 0 2px 4px rgba(0,0,0,0.5);
  clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  -webkit-transition:all .2s ease; transition:all .2s ease;
}
.header-nav .nav-btn:hover{
  color:#fff;
  background:linear-gradient(to bottom, #8b6914 0%, #6b4f10 50%, #4a370a 100%);
  border-color:#ffd700;
  box-shadow:0 0 20px rgba(255,215,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow:0 0 10px rgba(255,215,0,0.8);
}
.header-nav .nav-btn-active{
  color:#ffd700;
  background:linear-gradient(to bottom, #a07820 0%, #7a5a15 50%, #5a4210 100%);
  border-color:#ffd700;
  box-shadow:0 0 25px rgba(255,215,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  text-shadow:0 0 12px rgba(255,215,0,0.9);
}
/* 下拉子菜单 */
.header-nav .nav-sub{
  background:linear-gradient(to bottom, #1a0f05, #0d0803);
  border:1px solid rgba(212,175,55,0.5);
  box-shadow:0 8px 24px rgba(0,0,0,0.8), 0 0 20px rgba(212,175,55,0.2);
}
.header-nav .nav-sub-btn{
  padding:10px 24px; color:#d4af37; font-size:13px; letter-spacing:2px;
  border-bottom:1px solid rgba(212,175,55,0.15);
}
.header-nav .nav-sub-btn:hover{
  color:#fff; background:rgba(212,175,55,0.2);
}
/* ============================================================
   【布局精修 v19】
   ============================================================ */
/* Hero 高度收紧，确保按钮完整可见 */
.hp-hero{ height:88vh !important; min-height:560px !important; }
.hp-hero-cta{ padding:20px 0 30px !important; }
.hp-hero-tagline{ margin-bottom:12px !important; font-size:13px !important; }
.hp-dl-btns .hp-btn-primary{ padding:10px 24px !important; font-size:13px !important; }
.hp-dl-qr img{ width:70px !important; height:70px !important; }
.hp-dl-qr p{ font-size:11px !important; }

/* 统一内容宽度 */
.hp-section, .hp-banner-wrap, .hp-cta-inner{ max-width:1200px; margin:0 auto; padding-left:20px; padding-right:20px; }

/* section 间距统一 */
.hp-section{ padding:36px 0 !important; }
.hp-section-head{ margin-bottom:22px !important; }

/* 轮播图边距 */
.hp-banner-wrap{ padding:16px 20px 0 !important; }
.hp-banner{ border-width:1px; }

/* 新闻区紧凑 */
.hp-news-layout{ max-width:1200px; margin:0 auto; }
.hp-news-list li{ padding:5px 0; font-size:13px; }
.hp-news-headline{ font-size:16px; padding:8px 0; }

/* 卖点图标区紧凑 */
.hp-feature-grid{ padding:0 10px; }
.hp-feature-item{ padding:16px 8px; }
.hp-feature-icon{ width:50px !important; height:50px !important; line-height:50px !important; font-size:22px !important; }
.hp-feature-item h4{ font-size:15px; margin:8px 0 4px; }
.hp-feature-item p{ font-size:12px; }

/* 职业卡片紧凑 */
.hp-class-art{ height:240px !important; }
.hp-class-info h3{ font-size:20px; }

/* 开区信息卡片padding */
.hp-open-card{ padding:20px !important; }

/* 下载CTA */
.hp-cta{ padding:60px 20px !important; }
/* ============================================================
   【整体重排 v20】统一容器、对齐、呼吸感
   ============================================================ */
/* 全局背景遮罩加重，水印不抢 */
body{
  background:
    linear-gradient(to bottom, rgba(10,6,3,0.84) 0%, rgba(22,14,7,0.76) 50%, rgba(10,6,3,0.88) 100%),
    url('/images/art/qian_bg.jpg') center top / cover no-repeat fixed;
}

/* 统一内容容器 */
.hp-section, .hp-banner-wrap{
  max-width:1100px !important;
  margin:0 auto !important;
  padding-left:0 !important; padding-right:0 !important;
}

/* Hero 下载区：居中对齐 */
.hp-hero-download{ max-width:760px !important; }
.hp-dl-btns{ text-align:center !important; padding-left:0 !important; }
.hp-dl-btns .hp-btn-primary{ padding:10px 20px !important; font-size:13px; margin:0 4px; }
.hp-dl-btns .hp-btn-ghost{ padding:10px 20px !important; font-size:13px; margin:0 4px; }

/* 轮播图缩小 */
.hp-banner-wrap{ padding:16px 0 0 !important; }
.hp-banner{ max-width:1100px; }

/* 新闻+快速入口：等高对齐 */
.hp-news-layout{ display:table; width:100%; table-layout:fixed; }
.hp-quick{ display:table-cell; width:220px; vertical-align:top; padding-right:16px; }
.hp-news{ display:table-cell; vertical-align:top; }
.hp-quick-card{ padding:14px !important; margin-bottom:12px; }
.hp-quick-icon{ font-size:22px; }
.hp-quick-name{ font-size:13px; margin-top:6px; }

/* 新闻卡片padding */
.hp-news{ padding:16px 20px !important; }

/* section 标题统一 */
.hp-section-head{ margin-bottom:20px !important; }
.hp-section-head h2{ font-size:26px !important; }
.hp-section-head p{ font-size:13px; }

/* 卖点6格 */
.hp-feature-grid{ display:table; width:100%; table-layout:fixed; border-collapse:separate; border-spacing:10px 0; }
.hp-feature-item{ display:table-cell; text-align:center; padding:14px 6px !important; }

/* 福利卡两列 */
.hp-gift-grid{ display:table; width:100%; table-layout:fixed; border-collapse:separate; border-spacing:16px 0; }
.hp-gift-card{ display:table-cell; vertical-align:top; }

/* 开区信息 */
.hp-open-card{ padding:20px !important; }

/* 三职业+技能三列统一 */
.hp-class-grid, .hp-skill-grid{ border-spacing:12px 0 !important; }
.hp-class-card, .hp-skill-card{ padding:14px !important; }
.hp-class-art{ height:220px !important; }

/* 中州大陆 */
.hp-world-card{ margin:0 10px; }

/* 下载CTA */
.hp-cta{ padding:50px 20px !important; }

/* 页脚 */
.site-footer{ padding:30px 20px !important; }
/* Hero 下载区：真正居中 */
.hp-hero-cta{ text-align:center; }
.hp-hero-download{ display:inline-table; }
.hp-dl-btns{ text-align:center !important; padding:0 !important; }
.hp-dl-btns .hp-btn-primary{ margin:0 5px; }
.hp-dl-btns .hp-btn-ghost{ margin:0 5px; }
.hp-dl-qr{ text-align:center; padding-top:8px; }
/* 三职业立绘浮动动画 */
.hp-class-art{ overflow:hidden; position:relative; }
.hp-class-art img{
  width:100%; height:100%; object-fit:cover;
  -webkit-animation:float 3s ease-in-out infinite;
  animation:float 3s ease-in-out infinite;
}
@-webkit-keyframes float{
  0%,100%{ -webkit-transform:translateY(0); }
  50%{ -webkit-transform:translateY(-8px); }
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
/* hover 时发光 */
.hp-class-card:hover .hp-class-art img{
  -webkit-filter:brightness(1.15) drop-shadow(0 0 15px rgba(255,215,0,0.4));
  filter:brightness(1.15) drop-shadow(0 0 15px rgba(255,215,0,0.4));
}
/* 三职业立绘完整显示 */
.hp-class-art{ height:300px !important; background:linear-gradient(to bottom, transparent, rgba(0,0,0,0.3)); }
.hp-class-art img{
  width:100%; height:100%; object-fit:contain !important; object-position:center top;
}
/* 三职业立绘：完整显示人物 */
.hp-class-art{ height:380px !important; padding:10px 0; }
.hp-class-art img{
  width:auto !important; height:100% !important; max-width:100%;
  display:block; margin:0 auto; object-fit:contain !important;
}
/* 三职业立绘：强制完整显示 */
.hp-class-art{
  height:400px !important;
  overflow:hidden !important;
  background:radial-gradient(ellipse at center top, rgba(212,175,55,0.15), transparent 70%) !important;
}
.hp-class-art img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  -webkit-animation:none !important;
  animation:none !important;
}
/* 三职业立绘：按高度完整显示 */
.hp-class-art{
  height:420px !important;
  display:table !important;
  width:100% !important;
}
.hp-class-art img{
  width:auto !important;
  height:100% !important;
  max-width:100% !important;
  display:block !important;
  margin:0 auto !important;
  object-fit:contain !important;
}
.hp-class-art{
  height:auto !important;
  overflow:visible !important;
  text-align:center;
  padding:10px 0 0;
}
.hp-class-art img{
  width:100% !important;
  height:auto !important;
  max-height:420px;
  object-fit:contain !important;
}
.hp-class-art{
  height:auto !important;
  overflow:visible !important;
}
.hp-class-art img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
}
/* ============================================================
   【质感升级 v29】
   ============================================================ */
/* 全局卡片：更厚的金边+内发光 */
.hp-news, .hp-quick-card, .hp-gift-card, .hp-open-card, .hp-class-card, .hp-skill-card, .hp-banner{
  border:1px solid rgba(212,175,55,0.5) !important;
  box-shadow:0 6px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,215,0,0.15), inset 0 0 20px rgba(212,175,55,0.05);
  background:linear-gradient(135deg, rgba(30,20,10,0.95), rgba(20,12,6,0.95)) !important;
}

/* 三职业卡片：hover 浮起+发光 */
.hp-class-card{
  -webkit-transition:all .3s ease; transition:all .3s ease;
}
.hp-class-card:hover{
  -webkit-transform:translateY(-6px); transform:translateY(-6px);
  box-shadow:0 12px 36px rgba(212,175,55,0.3), inset 0 1px 0 rgba(255,215,0,0.2);
  border-color:#ffd700 !important;
}

/* 职业名字加金色发光 */
.hp-class-info h3{
  font-size:22px; letter-spacing:6px;
  text-shadow:0 0 15px currentColor;
}

/* 主按钮：更强金属感 */
.hp-btn-primary{
  background:linear-gradient(to bottom, #fff0a0 0%, #e8c847 30%, #b8942a 60%, #8b6914 100%) !important;
  border:1px solid #ffd700 !important;
  box-shadow:0 3px 10px rgba(212,175,55,0.5), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.2) !important;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
  font-weight:bold;
}
.hp-btn-primary:hover{
  background:linear-gradient(to bottom, #fff8c0 0%, #f8d857 30%, #c8a43a 60%, #9b7924 100%) !important;
  box-shadow:0 5px 20px rgba(255,215,0,0.6), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

/* section 标题：加装饰线 */
.hp-section-head{
  position:relative; padding:10px 0;
}
.hp-section-head h2{
  font-size:28px !important; letter-spacing:10px;
  text-shadow:0 2px 8px rgba(0,0,0,0.8);
}

/* 新闻卡片顶部金色装饰条 */
.hp-news{ border-top:2px solid #d4af37 !important; }

/* 快速入口卡片hover */
.hp-quick-card{
  -webkit-transition:all .2s ease; transition:all .2s ease;
}
.hp-quick-card:hover{
  background:linear-gradient(135deg, rgba(212,175,55,0.2), rgba(150,110,30,0.1)) !important;
  border-color:#ffd700 !important;
}

/* 福利卡片hover */
.hp-gift-card{
  -webkit-transition:all .3s ease; transition:all .3s ease;
}
.hp-gift-card:hover{
  box-shadow:0 8px 30px rgba(212,175,55,0.25), inset 0 1px 0 rgba(255,215,0,0.2);
}

/* 卖点图标：更强发光 */
.hp-feature-icon{
  border:2px solid #d4af37 !important;
  background:radial-gradient(circle, rgba(212,175,55,0.25), rgba(212,175,55,0.05)) !important;
  box-shadow:0 0 20px rgba(212,175,55,0.3), inset 0 0 10px rgba(212,175,55,0.2);
}

/* 导航菜单：更强金属感 */
.header-nav .nav-btn{
  background:linear-gradient(to bottom, #3a2510 0%, #1a0f05 50%, #0d0803 100%) !important;
  border:1px solid rgba(212,175,55,0.6) !important;
  box-shadow:inset 0 1px 0 rgba(255,215,0,0.2), 0 2px 6px rgba(0,0,0,0.6) !important;
}
.header-nav .nav-btn:hover{
  background:linear-gradient(to bottom, #9b7924 0%, #7a5a15 50%, #5a4210 100%) !important;
  box-shadow:0 0 25px rgba(255,215,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
/* ============================================================
   【官方质感 v30】大刀阔斧
   ============================================================ */

/* 全局 */
/* ★ 这一条是**实际生效**的那一条（同文件里第 4 条、也是全站最后一条 body 背景声明）。
   叠加层按"上 0.80 / 中 0.68 / 下 0.78"分档：qian_bg 的亮部是画面上方的日光，
   顶部压得比中部重，整页才会落在同一条暗带上（实测 0.07–0.17），
   否则上半屏会亮出一块，下面几屏又沉下去。 */
body{
  font-family:"Microsoft YaHei", Arial, sans-serif;
  color:#ccc;
  background:
    linear-gradient(to bottom, rgba(10,6,3,0.80) 0%, rgba(22,14,7,0.68) 48%, rgba(10,6,3,0.78) 100%),
    url('/images/art/qian_bg.jpg') center top / cover no-repeat fixed;
}

/* 顶栏：取消每个按钮的牌匾，改成统一导航 */
.site-header{
  background:linear-gradient(to bottom, #1a1208, #0d0803);
  border-bottom:1px solid rgba(212,175,55,0.3);
}
.header-inner{ height:80px; max-width:1200px; margin:0 auto; }
.header-nav{ padding-top:0; line-height:80px; }
.header-nav .nav-btn{
  display:inline-block; padding:0 28px; margin:0; height:80px; line-height:80px;
  font-size:15px; font-weight:normal; letter-spacing:4px; color:#c8a84a;
  background:none !important; border:none !important; box-shadow:none !important;
  clip-path:none !important;
  -webkit-transition:color .2s; transition:color .2s;
  border-left:1px solid rgba(212,175,55,0.1);
}
.header-nav .nav-btn:first-child{ border-left:none; }
.header-nav .nav-btn:hover{
  color:#ffd700; background:rgba(212,175,55,0.08) !important;
  text-shadow:0 0 10px rgba(255,215,0,0.6);
}
.header-nav .nav-btn-active{
  color:#ffd700; background:rgba(212,175,55,0.1) !important;
}

/* Hero */
.hp-hero{ height:85vh; min-height:580px; }
.hp-hero h1{ font-size:64px; letter-spacing:12px; text-shadow:0 4px 20px rgba(0,0,0,0.8); }
.hp-hero-tagline{ font-size:14px; letter-spacing:4px; opacity:0.9; }

/* 统一容器 */
.hp-section, .hp-banner-wrap{
  max-width:1200px !important; margin:0 auto !important;
}

/* section 标题：更克制 */
.hp-section-head{ margin-bottom:30px; text-align:center; }
.hp-section-head h2{
  font-size:26px !important; letter-spacing:8px; font-weight:normal;
  color:#d4af37;
}
.hp-section-head p{ font-size:13px; color:#888; letter-spacing:2px; margin-top:6px; }

/* 卡片统一 */
.hp-news, .hp-quick-card, .hp-gift-card, .hp-open-card, .hp-class-card, .hp-skill-card, .hp-banner{
  background:rgba(20,14,8,0.92) !important;
  border:1px solid rgba(212,175,55,0.25) !important;
  border-radius:2px;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
/* 取消四角装饰 */
.hp-news:before, .hp-news:after,
.hp-gift-card:before, .hp-gift-card:after,
.hp-open-card:before, .hp-open-card:after{ display:none !important; }

/* 新闻区 */
.hp-quick{ width:200px; }
.hp-quick-card{
  padding:18px 14px; margin-bottom:10px; text-align:center;
  border-left:3px solid #d4af37;
}
.hp-quick-card:hover{ background:rgba(212,175,55,0.1) !important; }
.hp-news{ padding:20px 24px; }
.hp-news-headline{ font-size:17px; color:#ffd700; padding-bottom:12px; border-bottom:1px solid rgba(212,175,55,0.15); margin-bottom:8px; }
.hp-news-list li{ padding:7px 0; font-size:13px; border-bottom:1px dotted rgba(212,175,55,0.1); }

/* 卖点 */
.hp-feature-item{ padding:24px 8px; }
.hp-feature-icon{
  width:56px; height:56px; line-height:56px; font-size:24px;
  border:1px solid rgba(212,175,55,0.4); border-radius:50%;
  background:rgba(212,175,55,0.08);
}
.hp-feature-item h4{ font-size:15px; color:#d4af37; margin:10px 0 4px; letter-spacing:2px; }
.hp-feature-item p{ font-size:12px; color:#888; }

/* 福利卡 */
.hp-gift-card{ padding:0; }
.hp-gift-head{ padding:16px 20px; border-bottom:1px solid rgba(212,175,55,0.15); font-size:15px; color:#d4af37; letter-spacing:2px; }
.hp-gift-body{ padding:20px; }

/* 三职业 */
.hp-class-card{ padding:0; overflow:hidden; }
.hp-class-art{ height:380px; background:#0a0603; }
.hp-class-art img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.hp-class-info{ padding:20px; text-align:center; }
.hp-class-info h3{ font-size:20px; letter-spacing:6px; margin-bottom:6px; }
.hp-class-info .hp-class-tag{ font-size:12px; letter-spacing:2px; margin-bottom:12px; opacity:0.8; }
.hp-class-info ul{ text-align:left; font-size:12px; line-height:2; color:#999; }

/* 按钮 */
.hp-btn-primary{
  padding:12px 36px; font-size:14px; letter-spacing:4px; font-weight:normal;
  background:linear-gradient(to bottom, #c8a84a, #9a7a28) !important;
  border:1px solid #d4af37 !important;
  border-radius:2px;
  clip-path:none !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.4) !important;
  text-shadow:none;
}
.hp-btn-primary:hover{
  background:linear-gradient(to bottom, #d8b85a, #aa8a38) !important;
}
.hp-btn-ghost{
  padding:12px 28px; font-size:13px; letter-spacing:2px;
  background:rgba(212,175,55,0.08) !important;
  border:1px solid rgba(212,175,55,0.4) !important;
  border-radius:2px; clip-path:none !important;
  color:#d4af37;
}
/* ============================================================
   全站页脚 v2 · 紧凑布局（logo 居左 / 其余居右）
   ============================================================================
   由 lib/site_footer.php 统一渲染（模板里只放 <!--SITE_FOOTER--> 占位符）。
   类名全部走 ftv-* 命名空间 —— 刻意不复用旧 .site-footer：
   旧页脚样式散在 style/legend/mobile/official/redesign 五个文件里，
   复用会和它们互相覆盖打架；新页脚用全新类名。
   ★ 为什么写在 redesign.css 而不是 official.css：
     资讯页 list/detail 与 404/preview 不加载 official.css，
     而 redesign.css 是所有 PC 页唯一都加载的文件 —— 页脚样式必须跟页脚一样全站可达。
   ★ 兼容约束（与本文档其余部分一致）：
     不用 var()/gap/grid/clamp()；flex 带 -webkit-box/-ms-flexbox 三件套；
     间距用 margin/border 而不是 gap；颜色一律字面量。
   ============================================================================ */
.ftv {
    background: linear-gradient(to bottom, #14100a, #0c0805);
    border-top: 1px solid rgba(212, 175, 55, .32);
    margin-top: 56px;
    padding: 24px 0;
}
.ftv-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
/* 左：品牌块（固定宽，右边一条分隔金线） */
.ftv-brand {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    width: 216px;
    padding-right: 26px;
    border-right: 1px solid rgba(212, 175, 55, .18);
}
/* 页脚品牌 LOGO：46 → **70px**（用户 2026-09-27「顶部和底部继续放大」）。
   logo_small.png 是 296×148（2:1），所以 70px 高 = 140px 宽，
   正好是页眉 LOGO（280×140）宽度的**一半**，上下呼应。
   ★ 装得下：.ftv-brand 是 width:216px + padding-right:26px → 内容区 190px，
     140 ≤ 190 还剩 50px。想再大就撞 190 这条上限（对应 95px 高）。
   ★ 手机版不吃本文件，它那条在 mobile.css。 */
.ftv-logo img { display: block; height: 70px; width: auto; margin-bottom: 8px; }
.ftv-name { font-size: 16px; font-weight: bold; letter-spacing: 3px; color: #f0d695; }
.ftv-slogan { margin-top: 4px; font-size: 11px; letter-spacing: 1px; color: #8a7a5c; }
/* 中：各行链接与法务 */
.ftv-main {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 26px;
}
.ftv-row { font-size: 13px; line-height: 2.0; }
.ftv-row a { color: #c9b285; text-decoration: none; }
.ftv-row a:hover { color: #ffd98c; }
.ftv-nav { font-size: 14px; }
.ftv-nav a { color: #e0c288; }
.ftv-corp { font-size: 12px; }
.ftv-corp a { color: #8a7a5c; }
.ftv-legal { font-size: 12px; color: #7a6a52; }
.ftv-legal a { color: #7a6a52; }
.ftv-legal span { color: #7a6a52; }
.ftv-dot { margin: 0 9px; color: rgba(201, 162, 77, .4); }
.ftv-pipe { margin: 0 9px; color: rgba(201, 162, 77, .26); }
.ftv-notice { margin-top: 8px; font-size: 11px; line-height: 1.7; color: #6a5a44; }
/* 右：二维码（固定宽，左边一条分隔金线） */
.ftv-qrs {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-left: 24px;
    padding-left: 24px;
    border-left: 1px solid rgba(212, 175, 55, .18);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.ftv-qr { display: block; width: 62px; margin-left: 12px; text-align: center; }
.ftv-qr:first-child { margin-left: 0; }
.ftv-qr img { display: block; width: 62px; height: 62px; border-radius: 4px; border: 1px solid rgba(212, 175, 55, .25); }
.ftv-qr span { display: block; margin-top: 5px; font-size: 10px; color: #8a7a5c; }
.ftv-qr-nopic {
    display: block; width: 62px; height: 62px; line-height: 62px;
    font-size: 26px; border: 1px dashed rgba(212, 175, 55, .35); border-radius: 4px;
}
/* 窄屏：全部堆叠居中 */
@media (max-width: 1100px) {
    .ftv-inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .ftv-brand { width: auto; padding-right: 0; border-right: 0; text-align: center; margin-bottom: 16px; }
    .ftv-logo img { margin-left: auto; margin-right: auto; }
    .ftv-main { padding-left: 0; text-align: center; }
    .ftv-qrs {
        margin-left: 0; padding-left: 0; border-left: 0; margin-top: 16px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

/* 叠加新 logo 水印，盖住旧的
   ★ 2026-10-01 第 164 轮：下面 `body::before` 那一段是**死规则**（已被它自己
     下方 9 行的 `display:none !important` 关掉，且引用的素材不存在）。
     具体理由写在 `body::before{...}` 块里，别照着它去找水印图。 */
body{
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  left:5%; top:15%;
  width:220px; height:220px;
  /* background:url('/images/art/logo_watermark.png') center/contain no-repeat;
     ★★ 2026-10-01 第 164 轮把这行**注释掉**了。理由两条，缺一条都不该动它：
       ① 它引用的 `/images/art/logo_watermark.png` **在仓库里根本不存在**
          （全树 `find -name 'logo_watermark*'` 零命中）；
       ② 本规则已被下方 `body::before{display:none !important}` 关掉
          （同文件、同选择器、带 !important ⇒ 必赢）⇒ 本来也不会去取这张图。
     留着这条 url 的唯一效果，是让 check_forum_contract.py 的素材检查
     和以后读到这里的人都以为"这儿有个水印图，去找找"。**规则其余部分保留**，
     遵守本项目"不删历史 CSS、在末层覆盖"的约定。要重做水印请新写一层 + 新素材。 */
  z-index:1;
  opacity:0.9;
  pointer-events:none;
}
/* 内容层在 logo 上面 */
.site-header, .hp-hero, .hp-section, .hp-banner-wrap, .site-footer{
  position:relative; z-index:2;
}/* 去掉叠加 logo */
body::before{ display:none !important; }
/* Hero 高度 777
   ★ 2026-09-27：这一条**从来没有生效过**，别在这里改。
     它的特异性是 (0,1,0)，而 official.css:254 的
     `.page-home .hp-hero{height:84vh !important; min-height:600px !important}`
     是 (0,2,0)；两条都带 `!important`，`!important` 之间只比特异性、不比书写顺序，
     再加上 official.css 的加载顺序还在本文件之后 —— 它两条都输。
     实测 computed 一直是 678.719px（= 84vh × 808px 视口）。
     真正生效的那条已搬到 **css/polish.css 第 9 节**（全站最后一层，能同时满足
     「带 !important + 特异性 (0,2,0) + 在 official.css 之后」）。
     这里留着只为留痕，改高度请改 polish.css。 */
.hp-hero{ height:777px !important; min-height:777px !important; }

/* 叠加如浩传世印章，盖住原官方授权 */
.hp-hero{ position:relative; }
.hp-hero .seal-overlay{
  position:absolute; right:18%; top:22%;
  width:120px; height:120px;
  background:url('/images/art/seal_ruhao.png') center/contain no-repeat;
  z-index:5;
}
/* 全局背景：金光照耀大地+河流 */
body{
  background:
    linear-gradient(to bottom, rgba(10,6,3,0.5) 0%, rgba(20,12,6,0.4) 50%, rgba(10,6,3,0.6) 100%),
    url('/images/art/golden_land.jpg') center top / cover no-repeat fixed !important;
}
/* 全局背景：5woool红色纹理 */
body{
  background:
    linear-gradient(to bottom, rgba(120,0,0,0.3) 0%, rgba(80,0,0,0.5) 100%),
    url('/images/art/bg_red.png') center top / cover no-repeat fixed !important;
}
/* 恢复金光大地背景 */
body{
  background:
    linear-gradient(to bottom, rgba(10,6,3,0.5) 0%, rgba(20,12,6,0.4) 50%, rgba(10,6,3,0.6) 100%),
    url('/images/art/golden_land.jpg') center top / cover no-repeat fixed !important;
}
/* 全局背景：上下一体融合 */
body{
  background:
    linear-gradient(to bottom, rgba(20,10,5,0.6) 0%, rgba(30,20,10,0.4) 40%, rgba(20,15,8,0.6) 100%),
    url('/images/art/unified_bg.jpg') center top / cover no-repeat fixed !important;
}
/* 全局背景：屋顶俯瞰古建群，和Hero视频一体 */
body{
  background:
    linear-gradient(to bottom, rgba(30,18,8,0.5) 0%, rgba(40,25,10,0.3) 50%, rgba(25,15,8,0.6) 100%),
    url('/images/art/unified_bg.jpg') center top / cover no-repeat fixed !important;
}
/* 全局背景：官方浅米色水墨纹理 */
body{
  background: url('/images/art/sdo_bg.jpg') center top / repeat !important;
  background-color: #f5f0e1 !important;
}
/* 恢复屋顶俯瞰古建群背景 */
body{
  background:
    linear-gradient(to bottom, rgba(30,18,8,0.5) 0%, rgba(40,25,10,0.3) 50%, rgba(25,15,8,0.6) 100%),
    url('/images/art/unified_bg.jpg') center top / cover no-repeat fixed !important;
}
/* 背景加深 */
body{
  background:
    linear-gradient(to bottom, rgba(15,8,3,0.75) 0%, rgba(25,15,5,0.6) 50%, rgba(10,5,2,0.8) 100%),
    url('/images/art/unified_bg.jpg') center top / cover no-repeat fixed !important;
}

/* ===== 栏目标题区 ===== */
.hp-head-emblem{
  width:56px !important; height:56px !important;
  object-fit:contain;
  animation:emblemPulse 1.5s ease-in-out infinite alternate;
}
@keyframes emblemPulse{
  from{ transform:scale(1); filter:brightness(1); }
  to{ transform:scale(1.15); filter:brightness(1.4); }
}

/* 标题文字金色流光 */
.hp-section-head h2{
  background:linear-gradient(90deg, #ffd700, #fff8dc, #ffd700, #ffaa00, #ffd700);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shine 3s linear infinite;
  font-size:26px !important;
  letter-spacing:6px;
}
@keyframes shine{ to{ background-position:200% center; } }

/* 副标题 */
.hp-section-head p{
  color:#c9a96e !important;
  font-size:12px !important;
}
/* ===== 栏目标题区融入深色框 ===== */
.hp-section-head{
  display:flex; align-items:center;
  padding-left:20px;
}
.hp-head-emblem{
  width:50px !important; height:50px !important;
  object-fit:contain;
  margin-right:15px;
  animation:floatIcon 2s ease-in-out infinite alternate;
}
@keyframes floatIcon{
  from{ transform:translateY(0) scale(1); }
  to{ transform:translateY(-5px) scale(1.1); }
}

/* 每个栏目标题不同颜色 */
.hp-section:nth-of-type(1) h2{ color:#ffd700 !important; text-shadow:0 0 10px #ffd700; }
.hp-section:nth-of-type(2) h2{ color:#ff6b9d !important; text-shadow:0 0 10px #ff4081; }
.hp-section:nth-of-type(3) h2{ color:#4fc3f7 !important; text-shadow:0 0 10px #29b6f6; }
.hp-section:nth-of-type(4) h2{ color:#81c784 !important; text-shadow:0 0 10px #66bb6a; }
.hp-section:nth-of-type(5) h2{ color:#ba68c8 !important; text-shadow:0 0 10px #ab47bc; }
.hp-section:nth-of-type(6) h2{ color:#ff8a65 !important; text-shadow:0 0 10px #ff7043; }

.hp-section-head h2{
  font-size:24px !important;
  letter-spacing:4px;
  animation:titlePulse 2s ease-in-out infinite alternate;
}
@keyframes titlePulse{
  from{ opacity:0.8; }
  to{ opacity:1; }
}

.hp-section-head p{
  color:#c9a96e !important;
  font-size:12px !important;
}
/* 图标缩小+位置调整 */
.hp-section-head{
  display:flex; align-items:center !important;
  padding-left:30px !important;
}
.hp-head-emblem{
  width:36px !important; height:36px !important;
  object-fit:contain !important;
  margin-right:12px !important;
  flex-shrink:0;
  animation:floatIcon 2s ease-in-out infinite alternate;
}
@keyframes floatIcon{
  from{ transform:translateY(0); }
  to{ transform:translateY(-3px); }
}
/* 侧边栏人物放大+流畅动画 */
.flag-hero, .hp-flag-hero, [class*="flag"] img[src*="hero_daoist"]{
  width:180px !important;
  height:auto !important;
  max-height:320px !important;
  object-fit:contain !important;
  animation:heroFloat 3s ease-in-out infinite;
}
@keyframes heroFloat{
  0%{ transform:translateY(0) rotate(0deg); }
  25%{ transform:translateY(-8px) rotate(1deg); }
  50%{ transform:translateY(-4px) rotate(0deg); }
  75%{ transform:translateY(-10px) rotate(-1deg); }
  100%{ transform:translateY(0) rotate(0deg); }
}
/* 侧边栏人物：放大+流畅浮动 */
.rh-flag-hero{
  width:180px !important;
  display:inline-block !important;
  vertical-align:middle !important;
}
.rh-flag-hero img, .rh-flag-hero video{
  width:180px !important;
  height:auto !important;
  max-height:340px !important;
  object-fit:contain !important;
  animation:heroFloat 3s ease-in-out infinite;
}
@keyframes heroFloat{
  0%{ transform:translateY(0) rotate(0deg); }
  25%{ transform:translateY(-8px) rotate(1deg); }
  50%{ transform:translateY(-4px) rotate(0deg); }
  75%{ transform:translateY(-10px) rotate(-1deg); }
  100%{ transform:translateY(0) rotate(0deg); }
}
/* 侧边栏人物：放大1.5倍 + 1/3溢出 + 吹笛呼吸动画 */
.rh-flag-hero{
  width:270px !important;
  display:inline-block !important;
  vertical-align:middle !important;
  margin-right:-90px !important; /* 1/3溢出框外 */
  position:relative;
  z-index:10;
}
.rh-flag-hero img{
  width:270px !important;
  height:auto !important;
  max-height:500px !important;
  object-fit:contain !important;
  animation:daoistBreathe 4s ease-in-out infinite;
  transform-origin:center bottom;
}
@keyframes daoistBreathe{
  0%{ transform:scale(1) translateY(0); filter:brightness(1); }
  25%{ transform:scale(1.02) translateY(-2px); filter:brightness(1.05); }
  50%{ transform:scale(1) translateY(0); filter:brightness(1); }
  75%{ transform:scale(1.015) translateY(-1px); filter:brightness(1.03); }
  100%{ transform:scale(1) translateY(0); filter:brightness(1); }
}
/* 侧边栏人物：高清大图 + 1/3溢出 + 呼吸动画 */
.rh-flag-hero{
  width:240px !important;
  display:inline-block !important;
  vertical-align:top !important;
  margin-right:-80px !important;
  margin-top:-20px !important;
  position:relative;
  z-index:10;
  overflow:visible !important;
}
.rh-flag-hero img{
  width:240px !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block !important;
  animation:daoistBreathe 4s ease-in-out infinite;
  transform-origin:center bottom;
}
@keyframes daoistBreathe{
  0%{ transform:scale(1); filter:brightness(1); }
  25%{ transform:scale(1.02); filter:brightness(1.08); }
  50%{ transform:scale(1); filter:brightness(1); }
  75%{ transform:scale(1.015); filter:brightness(1.05); }
  100%{ transform:scale(1); filter:brightness(1); }
}
/* 人物视频：放大+溢出+自动播放 */
.rh-flag-hero video{
  width:240px !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block !important;
}.rh-flag-hero video{ width:240px !important; height:auto !important; max-height:none !important; object-fit:contain !important; display:block !important; }
.rh-flag-hero{
  width:220px !important;
  display:inline-block !important;
  vertical-align:top !important;
  margin-right:-70px !important;
  margin-top:-10px !important;
  position:relative;
  z-index:10;
  overflow:visible !important;
}
.rh-flag-hero video{
  width:220px !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block !important;
  filter:brightness(0.75) contrast(1.1) saturate(1.2);
  border-radius:8px;
}