/* ==========================================================================
   如浩传世 · 全站布局层（传世主题版）
   --------------------------------------------------------------------------
   加载顺序：style.css / mobile.css  →  legend.css（皮肤）  →  本文件（布局）
   皮肤层只管颜色与边框，本文件只管结构与尺寸，两者不交叉，出问题好定位。

   ★ 为什么通篇不用 display:grid、也不用 flex 的 gap
     这个站要跑在老版微信内置浏览器里。iOS 上 grid 直到 10.3 才支持，
     flex 的 gap 更晚；这两样一旦不被支持，**不会降级**——
     grid 会整块变成竖排、flex gap 会直接塌成 0，几个按钮贴在一起。
     所以这里统一用最保险的一套：
       · 多栏 = flex + 百分比宽度 + 父级负 margin + 子级 padding
         （容器 margin:0 -12px，子项 padding:0 12px，box-sizing:border-box，
           栏距就出来了，完全不依赖 gap）
       · 横排列 = inline-block + margin-right
       · 相邻分隔线 = 相邻兄弟选择器 `+`（这个从 CSS1 就有）
     代价是写起来啰嗦一点，换来的是在任何老内核上都不会散架。

   ★ 本文件不得出现：var() / :has() / :is() / :where() / inset /
     clamp() / min() / max() / aspect-ratio / conic-gradient /
     mix-blend-mode / flex-gap / grid
     （理由同上；var() 尤其阴——不支持时整条声明作废，颜色会悄悄掉回旧值，
       表现为"改了没反应"，很难查）

   ★ 凡是会挂 .legend-frame 四角包角的容器（面板/弹窗），
     只能用 background-color，不能用 background 简写。
     简写会把 background-image 重置掉，而包角正是靠 background-image 贴的。
     —— 这一条同样适用于本文件里所有"给现有面板加背景"的规则。
========================================================================== */

/* ==========================================================================
   1. 容器与纵向节奏
   ========================================================================== */
.section {
    /* 原 40px 上下太挤，传世官网那种"每一屏一个主题"的感觉需要留白 */
    padding: 58px 22px;
    max-width: 1240px;
}
.lg-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 22px;
}
/* 区块标题下压一点：legend.css 给它配了两侧金色分隔件，需要呼吸空间 */
.lg-block {
    margin-bottom: 30px;
}

/* ==========================================================================
   1b. 页眉与菜单栏：logo 收窄、菜单绝不自动换行
   --------------------------------------------------------------------
   为什么原来会错乱（按实测数字）：
     · images/logo.png 实际是 480×240（2:1 的横版），
       而 style.css 给 .main-logo 的是 max-width:520px + width:100%
       —— 于是页眉里真的按 480×240 撑开；
     · .header-left 是 flex:1 且 gap:20px，把「口号」也并排放在 logo 右边；
     · .header-nav 里 4 个牌匾按钮（legend.css 给了 padding-left:40px 放图标，
       每个约 130px）合计约 520px。
     合计 480 + 20 + 口号(~260) + 520 ≈ 1280px，而 .header-inner 的可用宽度
     只有 1160px（1200 减去左右各 20 的内边距），
     偏偏 .header-inner 又是 flex-wrap:wrap ——
     于是菜单栏在不同视口宽度下时而换行、时而不换行；
     一旦换行，justify-content:space-between 又会把行甩到两侧，
     看起来就是"菜单栏错乱"。
   --------------------------------------------------------------------
   ★ 本层只做结构与尺寸；颜色/边框/包角仍在 legend.css。
   ★ 选择器一律带 .site-header 前缀（特异性 0,2,0），
     所以能压过 style.css 里那些单类名（0,1,0）的规则，
     包括它们写在媒体查询里的 .main-logo / .header-inner / .header-left。

   ★★ 但只带 .site-header 还不够 —— 必须进一步挂在 .header-left 上
      （含 `.header-left + .header-nav`）。原因是全站有两套页眉结构，
      样式表却是所有页面共用的：
        【桌面版】.site-header > .header-inner > (.header-left + .header-nav)
                 → reward.html / down.html / index.php / 404.html
        【手机版】.site-header > (.main-logo + .header-slogan + .header-nav)
                 → md.html / m.php / m_down.html（扁平结构，**没有** .header-left）
      手机页同样加载本文件，而手机页眉是 mobile.css 按「小 logo + 居中」设计的
      （.main-logo{height:36px;margin:0 auto}、.header-nav{flex-wrap:wrap}）。
      本文件在 mobile.css 之后加载，只要选择器能命中手机页就会把它顶掉：
        · 给 .main-logo 写 width:292px，会与手机版的 height:36px 打架 → 图被拉变形；
        · 给 .header-nav 写 flex-wrap:nowrap，会让手机版 4 个按钮挤出屏幕。
      下面每一条都要求祖先里有 .header-left，手机页没有这个容器，自然不会命中。
      —— 以后新增页眉样式，请沿用 ".header-left ..." 这个前缀写法。

   ★ 不改 .header-inner 本身：
     它已经是 flex + space-between + align-items:center，正是我们要的
     「左 logo、右菜单」；只需把它内部元素改小，它自己不必动。
     （手机页的 .header-inner 是个没有任何样式的普通 div，
       一旦给它加 display:flex，手机页眉会被横过来。）
   ========================================================================== */
/* logo 与口号改成上下两行，横向只占 logo 的宽度，把空间让给菜单。
   ★ 用 display:block 而不是 flex-direction:column：
     style.css 给 .header-left 设了 flex + gap:20px，
     若改成竖排 flex，那个 gap 会变成 logo 与口号之间的 20px 空隙；
     而本层不允许写 gap（check_css.py 会报"flex 容器里的 gap"）。
     改成 block 之后 gap 自然失效，两个元素按块级顺序上下排。
   ★ max-width:560px 是给长口号留的折行宽度：
     down.html 的口号有 51 个字（约 690px），必须允许它折行。
     若把口号硬卡在 292px 再配 nowrap，它会横向冲出页眉压到菜单上。 */
.site-header .header-left {
    display: block;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 560px;
}
/* 480×240 缩到 292×146：页眉高度可控，logo 仍然看得清。
   ★ 只写 width，不写 height —— 让 2:1 的比例自己算（style.css 给的是 height:auto）。
     千万别在这里补 height，那会与手机版的 height:36px 叠成变形。 */
.site-header .header-left > .main-logo {
    display: block;
    width: 292px;
    max-width: 292px;
    margin: 0 0 6px;
}
/* 口号跟着 logo 左对齐，最多铺满 .header-left（560px）就折行。
   ★ 不要写 white-space:nowrap：短口号（reward.html 的 18 字）本来就一行，
     长口号（down.html 的 51 字）需要它折行。 */
.site-header .header-left > .header-slogan {
    max-width: 100%;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    letter-spacing: 1px;
}
/* 菜单整体不换行、不参与收缩：宁可按键变小，也不让它掉到第二行。
   （不再需要 margin-left —— .header-inner 自带的 gap:15px 已经把它们隔开；
     写 margin-left 只会在窄屏竖排时把菜单整体右移。） */
.site-header .header-left + .header-nav {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
/* 牌匾按钮统一行高与文字对齐（图标是绝对定位在左，见 legend.css 第 4 节） */
.site-header .header-left + .header-nav .nav-btn {
    text-align: center;
    line-height: 22px;
    white-space: nowrap;
}

/* ==========================================================================
   2. 英雄区：画作铺满，文字压在中央
   ========================================================================== */
.lg-hero {
    min-height: 640px;
    /* style.css 给 .banner 设了 padding:30px 20px 且 overflow:hidden。
       光靠 min-height 居中在长文案下会顶到边，所以留一点纵向呼吸位。
       ★ 这里只写纵向，横向交给 .lg-hero .banner-content，
         否则两处水平内边距会叠加成 44px。 */
    padding: 56px 0;
}
.lg-hero .banner-content {
    max-width: 1080px;
    padding: 0 24px;
}
/* 小金字标签：比主标题更轻，用来交代"这是什么游戏" */
.lg-hero-kicker {
    display: inline-block;
    margin-bottom: 20px;
    padding: 6px 20px;
    font-size: 14px;
    letter-spacing: 4px;
    color: #f0d9a2;
    background-color: rgba(20, 13, 7, .62);
    border: 1px solid rgba(216, 180, 99, .45);
    border-radius: 2px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
.lg-hero .banner-title {
    font-size: 60px;
    letter-spacing: 10px;
    line-height: 1.24;
}
.lg-hero .banner-subtitle {
    font-size: 20px;
    letter-spacing: 3px;
}
.lg-hero .banner-btns {
    margin-bottom: 0;
}

/* down.html 里 download.css 有一条 .download-page .banner{min-height:auto;padding:20px 24px}，
   特异性是 (0,2,0)，高过本文件的 .lg-hero(0,1,0)，会把首屏压成一条横幅。
   下载页现在也要挂画作层，太扁就只剩一条色带、画什么都看不清，所以显式扳回来。
   ★ 必须是两条类名（.download-page .lg-hero）才能压过它，写成 .lg-hero 无效。 */
/* ★ 选择器必须带 .banner 凑到 (0,3,0)：redesign.css 第 134 行有
     .banner.lg-hero{min-height:620px}（0,2,0）且在本文件**之后**加载，
     只写 .download-page .lg-hero（0,2,0）会同特异性拼顺序输掉，
     实测首屏一直是 620px —— 之前那版 520px 就从未真正生效过。 */
.download-page .banner.lg-hero {
    min-height: 460px;
    padding: 36px 0;
}
.download-page .lg-hero .banner-content {
    padding: 0 24px;
}

/* 福利页首屏（2026-09-27 收紧）：640px 的首屏里只有四行字，近七成是空画，
   下载/福利这种"进来就要点按钮"的工具页不该把操作区推到第二屏。
   460px 保住画作辨识度（双人剪影完整可见），首屏底部已能看到礼包卡上沿。 */
.reward-page .banner.lg-hero {
    min-height: 460px;
    padding: 36px 0;
}
.reward-page .lg-hero .banner-content {
    padding: 0 24px;
}

/* 牌匾条：四个卖点 —— 只用相邻兄弟选择器画竖线，不用 gap */
.banner-features {
    display: block;
    margin-top: 46px;
    padding: 20px 0 6px;
    border-top: 1px solid rgba(216, 180, 99, .26);
    text-align: center;
}
.banner-features .feature-item {
    display: inline-block;
    padding: 0 26px;
    margin: 0;
    font-size: 16px;
    letter-spacing: 2px;
    color: #e6d2a4;
    vertical-align: middle;
}
.banner-features .feature-item + .feature-item {
    border-left: 1px solid rgba(216, 180, 99, .3);
}
.banner-features .feature-icon {
    display: inline-block;
    margin-right: 9px;
    font-size: 19px;
    color: #ffcf7a;
    vertical-align: middle;
    text-shadow: 0 0 10px rgba(255, 158, 46, .6);
}

/* ==========================================================================
   3. 通用多栏骨架
   --------------------------------------------------------------------
   用法：
     <div class="lg-2col">
       <div class="lg-col lg-col-side">…</div>
       <div class="lg-col lg-col-main">…</div>
     </div>
   .lg-2col 的负 margin 会被 .section 的 padding 吸收掉，
   所以在 .section 内部使用不会把页面撑宽。
   ========================================================================== */
.lg-2col {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -13px;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.lg-col {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 13px;
}
.lg-col-side { width: 34%; }
.lg-col-main { width: 66%; }
.lg-col-half { width: 50%; }
.lg-col-third { width: 33.3333%; }

/* 三等分的一组卡片（三职业、特色等） */
.lg-3col {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -11px;
}
.lg-3col > .lg-col-third { padding: 0 11px; }

/* ==========================================================================
   4. 画卷：原画与地图的展示框
   --------------------------------------------------------------------
   上下两根"卷轴"用 ::before / ::after 贴 ui/rod.png 横向平铺。
   卷轴探出框外 8px，是为了让画面看起来是"被卷起来的"，
   配合 .legend-frame 的四角包角也不会打架（两者在不同伪元素上）。
   ★ 本组只能用 background-color：见文件头关于 background 简写的说明。
   ========================================================================== */
.lg-art {
    position: relative;
    padding: 12px;
    background-color: rgba(19, 13, 7, .94);
    border: 1px solid #6d5420;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 224, 160, .12) inset, 0 14px 36px rgba(0, 0, 0, .68);
}
.lg-art-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #4a3714;
    background-color: #0c0805;
}
.lg-art-cap {
    padding: 14px 6px 4px;
    text-align: center;
}
.lg-art-cap h3 {
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #ffe9a8;
    margin-bottom: 8px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
}
.lg-art-cap p {
    font-size: 13.5px;
    line-height: 1.9;
    color: #a2917a;
    letter-spacing: .5px;
}
/* 卷轴形态 */
.lg-scroll { padding: 18px 14px; }
.lg-scroll::before,
.lg-scroll::after {
    content: '';
    position: absolute;
    left: -9px;
    right: -9px;
    height: 24px;
    background-image: url(../images/legend/ui/rod.png);
    background-repeat: repeat-x;
    background-position: center center;
    background-size: auto 100%;
    pointer-events: none;
}
.lg-scroll::before { top: -13px; }
.lg-scroll::after { bottom: -13px; }

/* 竖幅原画：让窄画也能占满一栏高度 */
.lg-art-tall .lg-art-img {
    max-height: 520px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* ==========================================================================
   5. 宽幅画带：把画作直接做成区块的 background-image
   --------------------------------------------------------------------
   刻意不用"绝对定位的遮罩层 + 给子元素提 z-index"那种写法：
   提层级最顺手的 `X > *` 通配子选择器优先级是 (0,1,1)，高过单类名 (0,1,0)，
   会把子元素自己的 position 一起改成 relative，
   内部任何 position:absolute 的小角标都会被改坏。
   改成"渐变 + 画作"两层 background-image，等效且一个子元素都不碰。
   ========================================================================== */
.lg-band {
    position: relative;
    padding: 46px 42px 40px;
    background-color: #0f0a06;
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: 100% 100%, cover;
    border: 1px solid #6d5420;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 224, 160, .12) inset, 0 16px 40px rgba(0, 0, 0, .7);
}
.lg-band-title {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 5px;
    color: #ffe9a8;
    text-align: center;
    margin-bottom: 12px;
    text-shadow: 0 2px 0 #2b1c08, 0 4px 14px rgba(0, 0, 0, .9);
}
.lg-band-sub {
    font-size: 14.5px;
    line-height: 1.9;
    letter-spacing: 1px;
    color: #cbb388;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 26px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
}

/* ==========================================================================
   6. 流程时间线
   --------------------------------------------------------------------
   替代原来的圆形大图标 + 箭头（六个 95px 圆在窄屏上必崩）。
   改成"序号牌 + 标题 + 说明"，用相邻兄弟选择器连一条金线。
   ========================================================================== */
.lg-flow {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -8px;
}
.lg-flow-item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 16.6666%;
    padding: 0 8px;
    text-align: center;
    position: relative;
}
/* 连线：画在圆牌右侧到下一个圆牌之间 */
.lg-flow-item::after {
    content: '';
    position: absolute;
    top: 27px;
    left: 64%;
    width: 36%;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #8a6a24, rgba(138, 106, 36, 0));
    background-image: linear-gradient(90deg, #8a6a24, rgba(138, 106, 36, 0));
}
.lg-flow-item:last-child::after { display: none; }
.lg-flow-num {
    display: block;
    width: 54px;
    height: 54px;
    line-height: 52px;
    margin: 0 auto 14px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    color: #ffd98a;
    background-color: #1a1207;
    border: 1px solid #8a6a24;
    border-radius: 50%;
    box-shadow: 0 1px 0 rgba(255, 224, 160, .18) inset, 0 6px 16px rgba(0, 0, 0, .6);
    text-shadow: 0 0 12px rgba(255, 158, 46, .55);
}
.lg-flow-h {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #ffe9a8;
    margin-bottom: 7px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .85);
}
.lg-flow-d {
    font-size: 13px;
    line-height: 1.75;
    color: #a2917a;
}
.lg-flow-d a {
    color: #ffd480;
    text-decoration: underline;
}
.lg-flow-d a:hover {
    color: #fff1cc;
}

/* ==========================================================================
   7. 信息卡片（测试概览 / 三职业 / 特色）
   ========================================================================== */
.lg-card {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    height: 100%;
    padding: 26px 22px 24px;
    text-align: center;
    background-color: rgba(21, 15, 8, .9);
    border: 1px solid #6d5420;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 224, 160, .12) inset, 0 10px 28px rgba(0, 0, 0, .55);
}
/* 左右两栏内的卡片需要下间距（没有 gap 可用） */
.lg-col > .lg-card + .lg-card,
.lg-col-third > .lg-card {
    margin-bottom: 0;
}
.lg-col-thirds-row {
    margin-bottom: 22px;
}
/* 徽章：把 emoji / 符号做成金环 */
.lg-medal {
    display: block;
    width: 62px;
    height: 62px;
    line-height: 60px;
    margin: 0 auto 16px;
    font-size: 27px;
    background-color: #150e07;
    border: 1px solid #8a6a24;
    border-radius: 50%;
    box-shadow: 0 1px 0 rgba(255, 224, 160, .16) inset, 0 0 22px rgba(255, 158, 46, .18);
}
.lg-card h3 {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #ffe9a8;
    margin-bottom: 10px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .85);
}
.lg-card .lg-card-lead {
    font-size: 15px;
    color: #e2c993;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.lg-card .lg-card-text {
    font-size: 13.5px;
    line-height: 1.9;
    color: #a2917a;
}
/* 卡与卡之间没有 gap，用外边距补 */
.lg-cards-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -11px 22px;
}
.lg-cards-row > .lg-card-col {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 25%;
    padding: 0 11px;
}
.lg-cards-row.is-3 > .lg-card-col { width: 33.3333%; }
.lg-cards-row.is-2 > .lg-card-col { width: 50%; }

/* ==========================================================================
   7b. 三职业：选项卡 + 职业介绍 + 技能动图（原站首页搬迁重排）
   --------------------------------------------------------------------
   原站把这块拆成「角色装备展示」与「技能展示」两大块、纵向堆了将近两屏，
   而且技能模块是三组滑块**并排**，九张 246×320 的动图会同时开始下载。
   这里合并成一块选项卡面板：
     · 一次只显示一个职业 → 一次也只加载一张动图，切到哪组才加载哪组的 data-src；
     · 九张动图合计约 4MB，全量加载会把首屏拖垮（首屏只写死一张）。
   ★ .lg-class-panel 默认 display:none，但**第一块在 HTML 里就带 is-active**，
     所以即使 legend.js 完全没跑起来，战士那一屏依旧完整可见。
   ★ 三张职业原画尺寸并不一致（战士 658×447 是横幅，法师 308×500、
     道士 379×480 是竖幅）。若让它们各自按原始比例撑开，切一次选项卡
     整块面板就会跳一下高度。所以统一塞进固定高度的 .lg-class-stage 里居中，
     三个职业的画卷高度完全一致 —— 这是本区块排版不散架的关键。
   ========================================================================== */
.lg-class-tabs {
    text-align: center;
    margin-bottom: 24px;
}
.lg-class-tabs > .lg-class-tab {
    position: relative;
    display: inline-block;
    padding: 11px 34px;
    margin: 0 7px 10px;
    /* ★ button 不继承字体，必须显式写一行，否则会掉成系统默认的 UI 字体 */
    font-family: inherit;
    font-size: 16px;
    letter-spacing: 4px;
    color: #e3d0a4;
    background-color: #1e150b;
    background-image: linear-gradient(180deg, rgba(72, 51, 24, .9) 0%, rgba(30, 21, 11, .95) 100%);
    border: 1px solid #6d5420;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 224, 160, .18) inset, 0 2px 7px rgba(0, 0, 0, .6);
    cursor: pointer;
    /* 清掉各引擎给 button 的默认外观与内边距，否则和页眉按钮对不齐 */
    -webkit-appearance: none;
    appearance: none;
    -webkit-transition: color .22s, border-color .22s, box-shadow .22s, -webkit-transform .22s;
    transition: color .22s, border-color .22s, box-shadow .22s, transform .22s;
}
.lg-class-tabs > .lg-class-tab:hover {
    color: #fff3cf;
    border-color: #d8b463;
    box-shadow: 0 1px 0 rgba(255, 224, 160, .3) inset, 0 0 16px rgba(255, 158, 46, .38), 0 2px 7px rgba(0, 0, 0, .6);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}
/* 选中态：与页眉 .nav-btn-active 同一套金渐变，全站一个语汇 */
.lg-class-tabs > .lg-class-tab.is-active {
    color: #2a1c07;
    font-weight: bold;
    background-color: #e0b95c;
    background-image: linear-gradient(180deg, #ffe9a8 0%, #e0b95c 46%, #a87c28 100%);
    border-color: #ffe9a8;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 0 20px rgba(255, 172, 60, .5), 0 2px 8px rgba(0, 0, 0, .6);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
/* 键盘用户走 Tab 键时会落到这三个按钮上，不给焦点框就是不可用 */
.lg-class-tabs > .lg-class-tab:focus {
    outline: 2px solid rgba(216, 180, 99, .55);
    outline-offset: 2px;
}

.lg-class-panels { position: relative; }
.lg-class-panel { display: none; }
/* ★ 入场动效写在 legend-motion.css 第 2b 节 —— 那边才有 prefers-reduced-motion
   的收口块；把 animation 写在这里就会漏掉"用户要求减弱动效"的分支。 */
.lg-class-panel.is-active { display: block; }

/* 画卷：固定舞台高度，三个职业的图都居中放进去 */
.lg-class-stage {
    height: 360px;
    /* line-height + vertical-align:middle 是老引擎里最稳的垂直居中写法，
       比 flex 更早可用，也不会像绝对定位那样把图挤出文档流 */
    line-height: 360px;
    text-align: center;
    overflow: hidden;
}
.lg-class-stage .lg-art-img {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    max-width: 100%;
    max-height: 360px;
    /* 清掉 .lg-art-img 的 width:100%，否则横幅的战士图会被拉得极矮 */
    border: 1px solid #4a3714;
    background-color: #0c0805;
}

.lg-class-info { padding: 4px 4px 0; }
.lg-class-tag {
    position: relative;
    padding-left: 20px;
    margin-bottom: 16px;
    font-size: 17px;
    letter-spacing: 3px;
    color: #ffe9a8;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .85);
}
.lg-class-tag::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background-color: #d8b463;
    box-shadow: 0 0 10px rgba(255, 172, 60, .7);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.lg-class-text {
    font-size: 14.5px;
    line-height: 2.15;
    color: #c3b295;
    /* 正文首行缩进两字：中文长段落不缩进会显得像说明文档而不是官网 */
    text-indent: 2em;
    margin-bottom: 18px;
}
.lg-class-traits {
    margin: 0;
    padding: 0;
    list-style: none;
}
.lg-class-traits li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.9;
    color: #a2917a;
    letter-spacing: .5px;
}
.lg-class-traits li:last-child { margin-bottom: 0; }
.lg-class-traits li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 12px;
    width: 6px;
    height: 6px;
    background-color: #8a6a24;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* 技能动图条 */
.lg-skill-strip {
    margin-top: 22px;
    padding: 16px 16px 18px;
    background-color: rgba(19, 13, 7, .76);
    border: 1px solid #5a4318;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 224, 160, .1) inset;
}
.lg-skill-head {
    /* 内部两个 span 用 float 分列，父层不清浮动会塌成 0 高 */
    overflow: hidden;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(216, 180, 99, .18);
}
.lg-skill-title {
    float: left;
    font-size: 15px;
    letter-spacing: 3px;
    color: #e8d09a;
}
.lg-skill-label {
    float: right;
    font-size: 13px;
    letter-spacing: 1px;
    color: #a2917a;
}
.lg-skill-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.lg-skill-nav {
    /* 老引擎的 flex 默认会压缩定宽元素，必须显式禁止收缩，
       否则两个箭头在窄屏会被挤成细条 */
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 36px;
    height: 56px;
    line-height: 54px;
    margin: 0 12px;
    font-size: 15px;
    text-align: center;
    color: #e0b95c;
    background-color: #1e150b;
    border: 1px solid #6d5420;
    border-radius: 3px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: color .2s, border-color .2s, box-shadow .2s;
    transition: color .2s, border-color .2s, box-shadow .2s;
}
.lg-skill-nav:hover {
    color: #fff3cf;
    border-color: #d8b463;
    box-shadow: 0 0 14px rgba(255, 158, 46, .4);
}
.lg-skill-imgs {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
/* 三张动图同一时刻只有一张 display:block。
   没赋 src 的那两张本来也不会发起请求 —— 这正是我们想要的懒加载。 */
.lg-skill-imgs img {
    display: none;
    width: 246px;
    height: 320px;
    border: 1px solid #4a3714;
    background-color: #0c0805;
}
.lg-skill-imgs img.is-active { display: block; }

.lg-class-foot {
    margin-top: 22px;
    font-size: 13.5px;
    line-height: 1.9;
    letter-spacing: 1px;
    text-align: center;
    color: #a2917a;
}

/* ==========================================================================
   8. 下载页
   ========================================================================== */
.lg-dl-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -11px;
}
.lg-dl-row > .lg-dl-col {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    padding: 0 11px;
}
.lg-dl-card {
    height: 100%;
    padding: 29px 26px 26px;
    background-color: rgba(21, 15, 8, .92);
    border: 1px solid #6d5420;
    border-radius: 3px;
    text-align: center;
    box-shadow: 0 1px 0 rgba(255, 224, 160, .12) inset, 0 12px 30px rgba(0, 0, 0, .6);
}
.lg-dl-card h4 {
    font-size: 20px;
    letter-spacing: 3px;
    color: #ffe9a8;
    margin-bottom: 14px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .85);
}
.lg-dl-meta {
    font-size: 13.5px;
    line-height: 2;
    color: #a2917a;
    margin-bottom: 20px;
}
.lg-dl-qr {
    width: 168px;
    height: 168px;
    margin: 0 auto 16px;
    padding: 7px;
    background-color: #fff;
    border: 2px solid #8a6a24;
    border-radius: 3px;
}
.lg-dl-qr img {
    display: block;
    width: 100%;
    height: 100%;
}
/* 环境要求小格 */
.lg-spec-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -9px;
}
.lg-spec-row > .lg-spec {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 33.3333%;
    padding: 0 9px;
}
.lg-spec {
    text-align: center;
}
.lg-spec dt {
    font-size: 14px;
    letter-spacing: 2px;
    color: #d8b463;
    margin-bottom: 7px;
}
.lg-spec dd {
    font-size: 13px;
    line-height: 1.8;
    color: #a2917a;
}

/* ==========================================================================
   9. 福利页骨架：两张礼包卡并排一行，推广任务整宽居下
   --------------------------------------------------------------------
   原来的「左 46% / 右 54%」为什么错乱（按实测数字算）：
     礼包卡内部是 style.css 里为【整宽单栏】设计的：
       .reward-card   { display:flex; gap:50px; padding:40px }
       .reward-qrcode { width:240px; flex-shrink:0 }
       .submit-btn    { width:380px }          ← 固定宽度，不随容器收缩
     ★ 台面口径：.section 是 max-width:1240px + padding:0 22px，
       所以它给 .lg-reward-grid 的内容宽是 **1196px**（不是 1240）。
     塞进 46% 的栏之后逐层扣减：
       1196 × 46%                  = 550
       − .lg-col 左右内边距 13×2    = 524
       − .reward-card 内边距 40×2   = 444
       − .reward-qrcode 240        = 204
       − flex gap 50               = 154   ← .reward-info 只剩这么宽
     而它里面的按钮固定 380px —— 横向溢出 226px，直接压到相邻栏上。
     这就是"页面错乱"最直接的来源（本页共 4 个 .submit-btn，其中 2 个在这栏里）。
     雪上加霜的是 .reward-panel 与 .reward-card 各画一套角：
     图片包角 40px vs border 画角 26px，同一个角上错位叠出双线。
   现在：
     第 1 行：两张礼包卡并排（各 49%，中间 2% 间距）
     第 2 行：推广面板整宽（说明、步骤、上传区都按整宽重新排）
   ★ 不改任何 HTML —— 只是把 .lg-col-packs / .lg-col-promo 的宽度重新分配。
   ★ #promoPanelWrap 仍然不设任何 display:none —— 推广整块必须默认可见。
     本层只做位置安排，绝不做可见性控制。
   ========================================================================== */

/* ---- 第 1 行：两张礼包卡并排 ----
   .lg-col-packs 原来是"两个面板竖着排"的一栏，现在它自己变成一行两列。
   ★ 间距刻意**不用 margin**：两个 49% + 中间 2% 外边距正好等于 100%，
     而百分比要换算成小数像素，取整后可能比容器宽零点几像素 ——
     在 flex-wrap 下这就足以让第二张卡**莫名其妙掉到下一行**（老内核上尤甚）。
     改成"两张卡各 49%（合计 98%），空出来的 2% 交给 justify-content: space-between"，
     总和严格小于 100%，从数学上就不会换行。 */
.lg-reward-grid > .lg-col-packs {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.lg-col-packs > .reward-panel {
    /* ★ 上内边距不能明显小于 40px：legend.js 会给 .reward-panel 加上 .legend-frame，
       四角贴 40×40 的图片包角（legend.css 第 12 节）。
       padding-top 给小了，第一行内容就钻到包角底下去。36px 是折中值。
       左右 30px —— 包角只占四个角，中间留 30px 已经足够呼吸。 */
    padding: 36px 30px 30px;
    width: 49%;
    /* margin 必须保持 0：间距由上面的 space-between 给，写 margin 会破坏 98% 这个安全余量 */
    margin: 0;
}

/* ---- 卡内两列：二维码｜信息（2026-09-25 第二版重排）----
   上一版是 float + margin-left，两个毛病很明显：
     ① 二维码列只有 180px（图 168px），而右列内容（标题 + 4 行说明 + 表单 + 按钮）
        比它高得多 → 卡的左下一大块死白，看起来像漏画了东西；
     ② style.css 的 .form-item 是 flex 横排且 label 固定 160px（还带 18px 右内边距
        = 178px），在 303px 的窄列里输入框只剩 ~110px，
        placeholder"请输入您的游戏账号"被截成"请输入您的"，"请输入群内QQ号码"截成"请输入群内("。
   现在：
     ① 卡体改成 display:table，两列 = 两个 table-cell：
        — 顺手甩掉 style.css 的 .reward-card{display:flex; gap:50px} ——
          本层不许写 gap，改 display 是唯一干净的办法，而 table 天然忽略 gap；
        — 两列自动等高，二维码列就能 vertical-align:middle，
          把"内容比二维码高"多出来的空白**上下均分**，不再是左下一大块死白。
     ② 二维码放大到 224px（更好扫），信息列拿到 265px。
     ③ .form-item 改成"标签在上、输入框在下"，输入框独占整列宽度，placeholder 完整可见。
   按台面 1196px 算（不是 1240）：
     .lg-col-packs 内容宽 = 1196 − .lg-col 左右 13×2 = 1170
     每张卡 49% × 1170 ≈ 573
     573 − 面板左右内边距 30×2 = 513
     再减 248（二维码列，含 20px 右留白）= 265px 给信息列。
   265px 够不够？输入框真正能写字的地方
     = 265 − 左内边距 40（给 .input-icon 让位）− 右内边距 14 − 边框 2×2 = 207px，
   而 placeholder「请输入您的游戏账号」是 9 个汉字 × 16px = 144px —— 放得下，
   不会再被截成「请输入您的」。 */
.lg-col-packs .reward-card {
    /* ★ 2026-09-27 第三次重排：display:table → flex 横排。
       原来 table + height:100% + 单元格 vertical-align 的做法有两个死结：
         ① 两张卡内容不等高（QQ 卡多一个「群内QQ号」输入框，约 96px），
            拉伸等高之后**短的那张**在底部留一大块空白（实测 96px），
            长的那张内容正好顶到卡底 —— 一张空、一张挤，就是用户说的"排版错乱"；
         ② 卡底四角是 40px 的金色包角图，而面板 padding-bottom 只有 24px，
            贴底的那行说明文字正好压在包角上。
       现在改成 flex 列：信息列内部再排成纵向 flex，把「领取按钮 + 说明」
       用 margin-top:auto **沉到卡底** —— 两张卡的按钮与说明行落在同一水平线上，
       多出来的空白全部吸收在输入框与按钮之间（"操作区沉底"是卡片的标准做法）。
       ★ style.css 给 .reward-card 写了 display:flex + gap:50px，这里必须显式
         写 gap:0 清掉（本层不用 gap 是既有约定，列间距由二维码列的 margin 表达）。 */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    /* ★ 撤掉 style.css 的 .reward-card:hover{transform:translateY(-4px)}。
       现在真正的"卡"是外层 .reward-panel（背景、边框、四角包角都在它身上），
       内层 .reward-card 已经退化成纯排版容器；让它自己上浮 4px，
       内容就会整体从外框里飘出来一格，看着像没对齐。 */
    transform: none;
}
.lg-col-packs .reward-card:hover {
    /* 显式再写一遍 hover：style.css 的 .reward-card:hover 是 (0,2,0)，
       和上面那条同特异性，只能靠源码顺序分胜负。加上一层类名提到 (0,3,0)，
       以后谁先加载都不会反转。 */
    transform: none;
}
.lg-col-packs .reward-card::before,
.lg-col-packs .reward-card::after,
.lg-col-packs .reward-card .corner-bl,
.lg-col-packs .reward-card .corner-br {
    /* 角只留外层 .reward-panel 那一套（legend.js 按 legend.css 第 12 节贴 40px 图片角）。
       两套角同时留着才会在同一个角上错位叠出双线。
       ★ 与 legend.css 第 12 节那句"不要删 .modal-card / .reward-card 的角"不矛盾：
         那句针对的是当时不挂图片包角的容器。md.html 里 .reward-card 的
         corner-bl / corner-br 两个 span 也在这里一并隐掉。 */
    display: none;
}

/* 二维码列：宽度定死 248px，内容在列内垂直居中。
   ★ 2026-09-27：原来靠 table-cell + vertical-align:middle 居中，
     改成 flex 列之后再自己居中（父级 align-items:stretch 会把列拉到整卡高，
     所以列内部用 flex column + justify-content:center 把二维码与两行说明居中）。
   ★ 列间距用 margin-right 表达，不用 gap（老内核不支持 flex gap）。 */
.lg-col-packs .reward-qrcode {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 228px;
    -ms-flex: 0 0 228px;
    flex: 0 0 228px;
    width: 228px;
    margin: 0 20px 0 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* 兜底：元素一旦带上 float，display 会被强制降级，整行就散了。
       这里显式清零，防止别处再冒出个 float 把它打回原形。 */
    float: none;
}
/* 224×224。原图实测 516×516（公众号）/ 350×350（QQ群），缩小显示只会更清晰，不会糊。
   ★ 全局 reset 是 box-sizing:border-box，所以 224 是"含边框与内边距"的最终尺寸：
     224 − 边框 2×2 − 内边距 8×2 = 204px 才是二维码本体 ——
     屏幕上看够大也扫得动（低于 ~140px 才开始难扫）。 */
.lg-col-packs .reward-qrcode img {
    display: block;
    width: 224px;
    height: 224px;
    margin: 0 auto 12px;
    padding: 8px;
}
/* 二维码下那两行说明：字号收一点，免得在 224px 里折得难看
   ★ .group-num 的 font-size 在 style.css 里带 !important，这里必须同样带 !important 才压得过 */
.lg-col-packs .reward-qrcode p {
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 4px;
}
.lg-col-packs .reward-qrcode .group-num {
    font-size: 13px !important;
    letter-spacing: 1px;
}

/* 信息列 */
.lg-col-packs .reward-info {
    /* ★ 2026-09-27：从 table-cell 改成纵向 flex 列。
       "领取按钮 + 说明"用 margin-top:auto 沉到卡底，两张卡的按钮/说明行因此对齐；
       多出来的空白全部落在输入框与按钮之间，不再出现"一张空一张挤"。
       （flex 项默认 stretch，所以这一列天生就是整卡高，auto 才有可分配的空间。） */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    /* table-cell 忽略 margin —— 上一版"浮动 + 左留位"的写法在这里必须清零 */
    margin-left: 0;
}
.lg-col-packs .reward-info h3 {
    font-size: 21px;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.lg-col-packs .reward-desc {
    margin-bottom: 16px;
    line-height: 1.75;
}

/* ---- 表单：标签在上、输入框在下 ----
   ★ 这是 placeholder 被截断的直接病灶：style.css 的 .form-item 是 flex 横排 +
     label 固定 160px（+18px 右内边距 = 178px），在 277px 的窄列里输入框只剩 ~99px。
     style.css 自己在 @media(max-width:900px) 里已经这么改成竖排了，
     这里只是把同一套写法提到**所有宽度**都生效（并带上 .lg-col-packs 前缀压过它）。
   ★ 用 display:block 而不是 flex-direction:column：
     .form-item 是 flex 容器，本层不许写 gap；改成 block 让 label 与 .input-wrap
     按块级顺序自然上下排，不留 flex 的痕迹。 */
.lg-col-packs .reward-info .form-item {
    display: block;
    margin-bottom: 14px;
}
.lg-col-packs .reward-info .form-item label {
    display: block;
    width: auto;
    padding: 0 0 6px;
    text-align: left;
    font-size: 14px;
    letter-spacing: 1px;
}
.lg-col-packs .reward-info .input-wrap {
    display: block;
    width: 100%;
}
.lg-col-packs .reward-info .form-item input {
    width: 100%;
    height: 44px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.lg-col-packs .reward-info .error-tip {
    margin-top: 2px;
    min-height: 18px;
}
.lg-col-packs .reward-info .tip {
    margin-top: 6px;
    /* ★ 2026-09-27：卡底四角是 40px 金色包角图，而面板 padding-bottom 是 24px ——
       贴底的说明文字会压到包角上。这里留 10px，合计 34px 的净空。 */
    margin-bottom: 10px;
    font-size: 12.5px;
    line-height: 1.5;
}
/* 按钮跟着 277px 的窄列调小一号：28px 字号 + 8px 字距在 277px 里太挤
   ★ margin-top:auto —— 把按钮连同下面的说明推到卡底（理由见 .reward-card 处注释）。
     两张卡因此共用同一条"按钮基线"，高度差全部吸收到输入框与按钮之间。 */
.lg-col-packs .reward-info .submit-btn {
    height: 54px;
    margin: auto auto 4px;
    font-size: 21px;
    letter-spacing: 4px;
}

/* ---- 第 2 行：推广任务整宽 ---- */
.lg-reward-grid > .lg-col-promo {
    width: 100%;
    margin-top: 30px;
}
.lg-col-promo .promo-panel {
    margin-bottom: 0;
}

/* ---- 推广面板内部两栏（2026-09-27 重排）----
   原来整宽单栏：说明 → 步骤 → 表单 → 上传 → 提交 → 查询，
   1300+px 全是一样的深色块堆到底，"排版不合理"主要指它。
   现在：左栏 38% = 上传说明 + 参与流程（竖排）+ 查询进度（纯阅读/查询），
         右栏 62% = 账号表单 + 两个上传区 + 提交（纯操作）。
   ★ 用 display:table 两格：与 .lg-col-packs .reward-card 同一套写法，
     天然等高、没有 gap、老内核稳。中间 1px 虚线分隔挂在左格右边框上。
   ★ HTML 侧（templates/reward.tpl.html）所有元素 id 原样保留，
     promo.js 只按 id 找人，对层级变化无感。 */
.lg-col-promo .promo-cols {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.lg-col-promo .promo-col {
    display: table-cell;
    vertical-align: top;
}
.lg-col-promo .promo-col-info {
    width: 38%;
    padding-right: 24px;
    border-right: 1px dashed rgba(216, 180, 99, .18);
}
.lg-col-promo .promo-col-act {
    width: 62%;
    padding-left: 24px;
}
/* 左栏的流程步骤：整宽时横排 4 格（style.css .promo-steps），
   38% 窄栏里 4 格每格只剩 ~100px，字会挤成团 —— 改成竖排一步一行。 */
.lg-col-promo .promo-col-info .promo-steps {
    grid-template-columns: 1fr;
    gap: 6px;
}
/* 左栏查询区：上面已有说明与流程，顶部的虚线分隔不需要了 */
.lg-col-promo .promo-col-info .promo-query {
    border-top: 0;
    padding-top: 4px;
}
/* 右栏上传区卡片化：两个上传块是操作的重心，给底与边框从面板里"立"起来 */
.lg-col-promo .promo-upload-block {
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(216, 180, 99, .16);
    border-radius: 3px;
    padding: 14px 16px 12px;
    margin: 0 0 14px;
}
/* 说明区在整宽下会被拉成很长的行，读起来累；限制一下单行长度（不居中，保持左对齐） */
.lg-col-promo .promo-guide-v {
    max-width: 860px;
}
/* 两个输入框并排，避免整宽之下一个输入框被拉成 1100px 宽。
   用 inline-block 而不是 flex：.form-item 里还有 label，包一层 flex 会牵连到 label。
   ★ 2026-09-27：form-item 已从 .promo-panel 直接子元素移进 .promo-col-act，
     选择器必须跟着挂到 .promo-col-act 下，"> .promo-panel >" 会静默失效。 */
.lg-col-promo .promo-col-act > .form-item {
    display: inline-block;
    width: 48%;
    vertical-align: top;
    margin-right: 3%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.lg-col-promo .promo-col-act > .form-item + .form-item {
    margin-right: 0;
}

/* ---- 按钮宽度：本次错乱的直接病灶 ----
   style.css 给 .submit-btn 的是固定 380px：在窄栏里横向溢出，在整宽面板里又太小。
   统一改成撑满容器，再单独给"提交审核"限宽居中。 */
.lg-col-packs .submit-btn,
.lg-col-promo .submit-btn {
    display: block;
    width: 100%;
    max-width: 100%;
}
/* 提交审核：整宽面板里 100% 会拉到 1100px，限宽居中才像一个动作按钮。
   ★ 2026-09-27：按钮已移进 .promo-col-act（右栏 62%），选择器同步改挂。 */
.lg-col-promo .promo-col-act > .submit-btn {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}
/* 但"查询"按钮在 .promo-query-row 里要与输入框并排，必须还原成自适应宽度。
   ★ 层级坑：.promo-query-btn 在 .promo-panel > .promo-query > .promo-query-row 里，
     并不是 .promo-panel 的直接子元素 —— 若照抄上面的写法用
     `.promo-panel > .promo-query-btn`，那条 `>` 接不上、规则**静默失效**，
     按钮就会被上面 (0,2,0) 的 width:100% 撑满，把同一行的输入框挤没。
   ★ 所以这里写成 `.promo-query .promo-query-btn`：既接得上，特异性也是 (0,3,0)，
     足以压过 (0,2,0)。 */
.lg-col-promo .promo-query .promo-query-btn {
    width: auto;
    max-width: none;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 0 24px;
    font-size: 15px;
    letter-spacing: 2px;
}

/* ==========================================================================
   10. 404
   ========================================================================== */
.lg-404 {
    min-height: 100vh;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
}
.lg-404-code {
    font-size: 92px;
    font-weight: bold;
    letter-spacing: 8px;
    line-height: 1;
    color: #e8d09a;
    margin-bottom: 6px;
    text-shadow: 0 3px 0 #2b1c08, 0 8px 26px rgba(0, 0, 0, .9), 0 0 40px rgba(255, 158, 46, .45);
}
.lg-404-h {
    font-size: 24px;
    letter-spacing: 6px;
    color: #ffe9a8;
    margin-bottom: 12px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}
.lg-404-p {
    font-size: 14.5px;
    line-height: 1.9;
    color: #a2917a;
    margin-bottom: 30px;
}
.lg-404-btns {
    text-align: center;
}
.lg-404-btns .btn-primary-large,
.lg-404-btns .btn-outline-large {
    margin: 0 8px 12px;
}

/* ==========================================================================
   11. 响应式
   --------------------------------------------------------------------
   断点 1180px：福利页的两张礼包卡由"并排"改"上下排"（算法见下）。
   断点 980px：其余两栏（34% 的侧栏已不足 300px）改单栏堆叠。
   ========================================================================== */

/* ★ 福利页为什么必须用 1200px 这么高的断点：
     .lg-col-packs 内容宽记作 W（= 1196 − .lg-col 左右 13×2，视口 ≥1240 时恒为 1170）。
     两张卡各 49% 并排时：
         信息列宽 = 0.49×W − 面板左右内边距 30×2 − 二维码列 248 = 0.49W − 308
     想让信息列还剩 240px（撑得住 placeholder 144px 与按钮 175px），
         0.49W − 308 ≥ 240  →  W ≥ 1118  →  反推视口 ≥ 1188，故取 1200 收口。
     校验：视口 1201 → W = 1201 − 44(.section 左右) − 26(.lg-col 左右) = 1131
                       → 信息列 0.49×1131 − 308 = 246 ✓
           视口 ≥1240 → W 被 max-width 卡住恒为 1170 → 信息列 265 ✓
     ★ 若沿用别处的 980px：1024px 笔记本上两张卡并排，
       信息列只剩 0.49×(1024−44−26) − 308 ≈ 159px —— placeholder 又被截断，
       等于把刚修好的毛病换个宽度重犯一遍。这是"排版不合理"最隐蔽的一种。
   ★ 单列时面板限宽 720 居中：整宽 954px 的一张卡会把输入框拉到 588px，太空；
     限宽后信息列约 452px，输入框约 394px，正好。 */
@media (max-width: 1200px) {
    .lg-col-packs > .reward-panel {
        width: 100%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 22px;
    }
    .lg-col-packs > .reward-panel:last-child { margin-bottom: 0; }
}
@media (max-width: 980px) {
    .lg-col-side,
    .lg-col-main,
    .lg-col-half,
    .lg-cards-row > .lg-card-col,
    .lg-cards-row.is-3 > .lg-card-col,
    .lg-dl-row > .lg-dl-col,
    .lg-spec-row > .lg-spec {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .lg-reward-grid > .lg-col-promo { margin-top: 24px; }
    .lg-col-side { margin-bottom: 22px; }
    .lg-cards-row > .lg-card-col { margin-bottom: 18px; }
    .lg-dl-row > .lg-dl-col { margin-bottom: 20px; }
    .lg-flow-item { width: 33.3333%; margin-bottom: 26px; }
    /* 每行第三个后面不再连线下一个 */
    .lg-flow-item::after { display: none; }
}

@media (max-width: 768px) {
    .section { padding: 42px 16px; }
    .lg-hero { min-height: 520px; }
    .lg-hero .banner-title {
        font-size: 30px;
        letter-spacing: 4px;
    }
    .lg-hero .banner-subtitle { font-size: 15px; }
    .lg-hero .banner-desc { font-size: 14px; }
    .lg-hero-kicker {
        font-size: 12px;
        letter-spacing: 2px;
        padding: 5px 12px;
    }
    .banner-features { margin-top: 30px; padding-top: 16px; }
    .banner-features .feature-item {
        padding: 6px 0;
        width: 50%;
        font-size: 13.5px;
        border-left: none !important;
    }
    .lg-band { padding: 32px 20px 28px; }
    .lg-band-title { font-size: 20px; letter-spacing: 3px; }
    .lg-band-sub { font-size: 13px; }
    .lg-flow-item { width: 50%; }
    .lg-cards-row.is-2 > .lg-card-col { width: 100%; }
    .lg-art-cap h3 { font-size: 17px; }
    .lg-404-code { font-size: 64px; }
}

@media (max-width: 480px) {
    .banner-features .feature-item { width: 100%; }
    .lg-flow-item { width: 100%; }
    .lg-flow-item::after { display: none; }
}

/* ==========================================================================
   12. 页眉/菜单栏 与 福利页 的窄屏收口
   --------------------------------------------------------------------
   ★ 这里一律带 .site-header / .promo-panel / .lg-col-packs 前缀（特异性 0,2,0）。
     原因：style.css 把 .main-logo{max-width:320px}、.header-inner{flex-direction:column}
     这些写在了媒体查询里，而媒体查询本身**不增加特异性**；
     单类名（0,1,0）压不过别处的单类名，只能靠"谁在后面"。
     本文件在 style.css 之后加载没错，但为了以后调整顺序也不出问题，
     统一提到 (0,2,0) 更稳。
   ★ 页眉相关的每一条都继续挂在 .header-left 上（理由见第 1b 节）——
     手机页（md.html / m.php / m_down.html）没有这个容器，不会被误伤。
   ★ 本文件里的断点并不是严格从大到小排的
     （第 11 节是 980 → 768 → 480，本节是 1120 → 600 → 768）。
     之所以没出问题，是因为每一条各自管的属性**互不重叠**；
     而媒体查询不增加特异性，一旦属性撞车就只能靠源码顺序分胜负
     （例：.lg-reward-grid > .lg-col-promo 的 margin-top 在 980 与 768 两处都写了，
      768 在后，所以窄屏取 22px —— 这是刻意的）。
     以后新增同属性的窄屏覆盖，务必确认它排在被覆盖的那条之后。
   ========================================================================== */

/* 断点从 900px 提到 1120px，并显式把 .header-inner 变回块级。
   --------------------------------------------------------------------
   为什么改（2026-09-26 菜单定为 6 项 + 1 个下拉）：
     菜单从 4 个牌匾 → 5 个 → 现在的 6 个。按 legend.css 的实际数值算：
       · 4 字牌匾 = 左内边距 31 + 右内边距 15 + 4×(字号 14 + 字距 1) + 左右边框 2 = 108px
       · 「游戏介绍」还多一个小三角，右内边距换成 26            = 119px
       · 按钮之间还有 style.css 的 .header-nav{gap:12px} + 自身 margin:0 2px = 16px
     合计 5×108 + 119 + (5×16 + 两端 4) = 659 + 84 = 743px。
     横排还需要「logo 292 + .header-inner 的 gap 15」，
     再加 .header-inner 左右各 20px 内边距 → 视口至少要 1090px 才放得下。
     断点取 1120 而不是 1090：1090~1120 这段只有 30px 余量，
     而 logo 是写死宽度的图片、缩不动，再加上 Windows 滚动条 17px 的损耗，
     贴着底线设断点迟早会出现"某些机器上刚好溢出"。
     旧断点 900px 更不行 —— 901~1120 这一段会**挤到溢出**：
     logo 缩不动，最后不是压住菜单就是整行溢出。
     提到 1120 之后，1024 / 1080 笔记本与横屏平板会走
     "上段 logo+口号、下段菜单"的竖排，反而更清爽。

   ★ 顺带：legend.css 第 4b 节的「窄屏把下拉摊平」也用 1120px，是**故意对齐**的。
     两件事本质上是同一条线（横排放不下 6 项牌匾的宽度区间，就是需要
     竖排 + 触摸友好的区间），分两个断点写会出现"菜单已竖排、下拉却还是藏的"
     这种半吊子状态。

   ★ 为什么必须在这里补 .header-inner { display:block }：
     style.css 自己的 @media (max-width:900px) 才把 .header-inner 改成
     flex-direction:column。本层断点提到 1120 之后，901~1120 这一段
     .header-inner 仍是横排 flex，光让 .header-left / .header-nav 各自居中
     是不够的（两项会并排挤在同一行）。改成 display:block 后两个子元素自然上下排，
     子元素自身的 margin:auto / text-align:center 继续负责水平居中。
   ★ 手机页（md.html / m.php / m_down.html / m_*.html）里的 .header-inner
     本来就是个没有任何样式的普通 div，display:block 与默认值一致，
     写成显式值不改变任何表现 —— 可以放心用（但页眉其余规则仍必须
     挂在 .header-left 上，原因见第 1b 节）。注意手机页现在**也是 6 项菜单**
     （与桌面逐字相同），窄屏放不下时由下面的 flex-wrap 自然折成两行。

   ★ 这段数字与 .workbuddy/tools/check_reward_math.py 第五节**一一对应**：
     改这里任何一条尺寸，都要让那个脚本一起改，否则它会报"页眉一行放不下"。 */
@media (max-width: 1120px) {
    .site-header .header-inner {
        display: block;
    }
    .site-header .header-left {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .site-header .header-left > .main-logo {
        width: 240px;
        max-width: 240px;
        margin: 0 auto 4px;
    }
    .site-header .header-left > .header-slogan { max-width: 100%; }
    .site-header .header-left + .header-nav {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }
}

/* 600px 起把牌匾收小，尽量保住一行；实在挤不下由上面的 wrap 自然折成两行。
   （380px 以下不必再写：legend.css 自己的 @media (max-width:380px) 已经把
     .header-nav .nav-btn 收到 6px/8px/29px、12px，与本意一致。） */
@media (max-width: 600px) {
    .site-header .header-left > .main-logo {
        width: 200px;
        max-width: 200px;
    }
    .site-header .header-left > .header-slogan {
        font-size: 11.5px;
        letter-spacing: 0;
    }
    .site-header .header-left + .header-nav .nav-btn {
        padding: 7px 12px 7px 32px;
        font-size: 13.5px;
        letter-spacing: 1px;
    }
}

/* 福利页窄屏：卡内两列的 table 退回块级单列，二维码居中在上、信息在下 */
@media (max-width: 768px) {
    /* 上内边距 ≥32px：.legend-frame 的四角包角是 40×40，贴得比这更紧就会压住内容 */
    .lg-col-packs > .reward-panel { padding: 32px 18px 24px; }
    /* ★ display:table 下的两个 table-cell 在窄屏必须显式改回 block，
       否则它们依旧是"并排两格"，二维码会被挤成窄窄一条。 */
    /* ★ 单列时 flex 横排要退回块级：二维码在上（居中）、信息在下。
       2026-09-27 起桌面用的是 flex 横排（原来是 display:table），
       这里同步改写；顺便把 flex 相关的横向约束一并清零。 */
    .lg-col-packs .reward-card {
        display: block;
        height: auto;
    }
    .lg-col-packs .reward-qrcode {
        display: block;
        -webkit-flex: none;
        -ms-flex: none;
        flex: none;
        width: 100%;
        margin: 0 0 18px;
        /* 清掉桌面版给"右列"留的那 20px 右外边距 */
        padding: 0 0 16px;
        border-bottom: 1px solid rgba(216, 180, 99, .18);
    }
    /* 200px（不是 168）：单列时卡片本身有 720px 宽，二维码没必要跟着缩水 */
    .lg-col-packs .reward-qrcode img {
        width: 200px;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
    }
    .lg-col-packs .reward-info { display: block; }
    /* 块级布局里 margin-top:auto 无效，按钮回到普通流（上间距由 .error-tip 给） */
    .lg-col-packs .reward-info .submit-btn { margin: 6px auto 4px; }
    .lg-reward-grid > .lg-col-promo { margin-top: 22px; }
    /* 窄屏下两个输入框回到上下排（选择器随 2026-09-27 两栏化改挂 .promo-col-act） */
    .lg-col-promo .promo-col-act > .form-item {
        display: block;
        width: 100%;
        margin-right: 0;
    }
    .lg-col-promo .promo-col-act > .submit-btn { max-width: 100%; }
}

/* 推广面板两栏的窄屏回退：980px 起 table 两格退回块级单列，
   左栏（说明/流程/查询）在上、右栏（表单/上传/提交）在下，分隔虚线拿掉。 */
@media (max-width: 980px) {
    .lg-col-promo .promo-cols,
    .lg-col-promo .promo-col {
        display: block;
        width: 100%;
    }
    .lg-col-promo .promo-col-info {
        padding-right: 0;
        border-right: 0;
        margin-bottom: 20px;
        padding-bottom: 18px;
        border-bottom: 1px dashed rgba(216, 180, 99, .18);
    }
    .lg-col-promo .promo-col-act { padding-left: 0; }
    /* 单列后左栏变整宽：步骤条 2 格（2026-09-29 从 4 格收回来 —— 实测 490~700px
       视口下每格只剩 ~100px，文字挤成一字宽的竖条）；560px 以下回 1 格通栏。 */
    .lg-col-promo .promo-col-info .promo-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .lg-col-promo .promo-col-info .promo-steps { grid-template-columns: 1fr; }
}

/* style.css 在 640px 起把「查询」行改成上下排（.promo-query-row 变 column）。
   这时按钮该跟着回到通栏，但上面那条 (0,3,0) 的 width:auto 会一直生效，
   所以这里用同特异性 (0,3,0) 再写一次 —— 同特异性下后写的赢。 */
@media (max-width: 640px) {
    .lg-col-promo .promo-query .promo-query-btn {
        width: 100%;
        max-width: 100%;
        padding: 0 12px;
    }
}

/* ==========================================================================
   12b. 三职业的窄屏收口
   --------------------------------------------------------------------
   ★ 必须先算再写：
     · 360px 视口 → .section 左右各 16px → 可用 328px。
     · 技能条 = 左右两个箭头 + 一张动图。原尺寸 246 宽、箭头 36+36、
       箭头各自左右 12+12 → 246 + 120 = 366 > 328，**一定会溢出**。
       所以窄屏把图压到 200×260、箭头压到 30 宽、间距收到 8：
       200 + (30+16)×2 = 292 ≤ 328 ✓
     · 选项卡：桌面 padding 11px 34px + letter-spacing 4px 时三个按钮合计约
       366px，窄屏同样会折成两行；padding 收成 10px 18px、字距 2px 后
       合计约 234px，一行放得下 ✓
   ★ 选项卡即使折行也不会重叠：按钮自带 margin-bottom:10px（桌面那两条里写了），
     这里只改左右间距，把上下那条留着。
   ========================================================================== */
@media (max-width: 600px) {
    .lg-class-tabs { margin-bottom: 18px; }
    .lg-class-tabs > .lg-class-tab {
        padding: 10px 18px;
        margin: 0 4px 10px;
        font-size: 15px;
        letter-spacing: 2px;
    }
    /* 舞台跟着矮一档：360 在手机上会占掉半屏，把介绍文字全推到折叠线以下 */
    .lg-class-stage {
        height: 300px;
        line-height: 300px;
    }
    .lg-class-stage .lg-art-img { max-height: 300px; }
    .lg-class-tag { font-size: 16px; letter-spacing: 2px; }
    .lg-class-text { font-size: 14px; line-height: 2; }
    .lg-skill-strip { margin-top: 18px; padding: 14px 12px 16px; }
    .lg-skill-nav {
        width: 30px;
        height: 46px;
        line-height: 44px;
        margin: 0 8px;
        font-size: 13px;
    }
    .lg-skill-imgs img {
        width: 200px;
        height: 260px;
    }
    .lg-class-foot { margin-top: 18px; }
}