@charset "utf-8";

/* ============================================================
 * 自定义字体 — Bebas Neue Pro Expanded Bold（与 PC 共用 font/ 目录）
 * 用于 S2-S4 大标题 + 介绍标题；排除 zh-CN / zh-TW / th（缺 CJK / 泰文字符）
 * ============================================================ */
@font-face {
    font-family: 'BebasNeueProExpanded';
    src: url('../../font/bebas-neue-pro-expanded-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
 * M 端样式（vw-based 自适应；750px 设计稿基准）
 *   1vw = 0.1334% 屏宽，PC 端勿引用
 *   规约：图片走 ../img/m/<locale|common>/...，无文案 → common
 *   注意：本轮 S1 给出简化骨架，S2 完整实现（7 角色 + 上下切换 + 三处联动）
 * ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #1e2423;
    color: #ffffff;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }

/* 整屏吸附滚动：唯一滚动容器 = main.m-page */
.m-page {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    /* 隐藏滚动条（保留滚动能力） */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.m-page::-webkit-scrollbar { display: none; width: 0; height: 0; }

.m-section {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* ============================================================
 * S1 — 简化骨架（背景 + slogan + 双 CTA）
 *   S1 完整 M 端版本由后续轮次输出
 * ============================================================ */
.m-s1 {
    background: #1e2423;
}
.m-s1-bg-stack { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.m-s1-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.m-s1-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.m-tab-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    /* 顶部内边距叠加 safe-area-inset-top：viewport-fit=cover 后页面铺满物理屏，
       logo 需避开刘海 / 浏览器顶部 chrome；非刘海设备 env 返回 0，无副作用 */
    padding: calc(4vw + env(safe-area-inset-top, 0px)) 5.33vw 4vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 顶部边缘锁定 #090b0c 渐变淡出：header 铺在物理屏顶部 safe-area 上，
       让刘海屏顶边与浏览器状态栏同色，消除分层 */
    background: linear-gradient(180deg, #090b0c 0%, rgba(9, 11, 12, 0) 100%);
    pointer-events: auto;
}

/* 底部边缘渐变遮罩：固定在物理屏底部，淡入到 #0e1010 与底部搜索框背景同色。
   z-index 低于悬浮商城 CTA(90) / 下滑提示(80)，不遮挡可点元素；pointer-events:none 不挡交互 */
.m-edge-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(env(safe-area-inset-bottom, 0px) + 12vw);
    background: linear-gradient(0deg, #0e1010 0%, rgba(14, 16, 16, 0) 100%);
    z-index: 79;
    pointer-events: none;
}
.m-logo { width: 38vw; }
.m-logo img { width: 100%; height: auto; }

/* M 端语言切换器：仅图标按钮，弹出菜单 */
.m-lang-switch {
    position: relative;
    width: 6.93vw;
    height: 6.4vw;
    cursor: pointer;
    color: #f5f5f5;
    line-height: 1;
    z-index: 50;
}
.m-lang-globe { width: 100%; height: 100%; object-fit: contain; display: block; }
.m-lang-current { white-space: nowrap; }
/* M 端语言切换菜单（参考 kangningxu-w3-web .m-lang-dropdown）：
 * 全屏 fixed 半透黑底，打开时各项错开 0.04s 入场 */
.m-lang-box {
    position: fixed;
    inset: 0;
    z-index: 999;
    overflow: hidden;
    padding-top: 16.8vw;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition: background 0.35s ease, visibility 0s 0.6s;
}
.m-lang-box.is-open {
    visibility: visible;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.88);
    transition: background 0.35s ease, visibility 0s 0s;
}
.m-lang-box .m-lang-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 4.27vw;
    font-weight: 400;
    cursor: pointer;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 0;
    transform: translateY(30px);
    transition: color 0.15s;
}
.m-lang-box.is-open .m-lang-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
                transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
                color 0.15s;
}
.m-lang-box.is-open .m-lang-item:nth-child(1)  { transition-delay: 0.05s; }
.m-lang-box.is-open .m-lang-item:nth-child(2)  { transition-delay: 0.09s; }
.m-lang-box.is-open .m-lang-item:nth-child(3)  { transition-delay: 0.13s; }
.m-lang-box.is-open .m-lang-item:nth-child(4)  { transition-delay: 0.17s; }
.m-lang-box.is-open .m-lang-item:nth-child(5)  { transition-delay: 0.21s; }
.m-lang-box.is-open .m-lang-item:nth-child(6)  { transition-delay: 0.25s; }
.m-lang-box.is-open .m-lang-item:nth-child(7)  { transition-delay: 0.29s; }
.m-lang-box.is-open .m-lang-item:nth-child(8)  { transition-delay: 0.33s; }
.m-lang-box.is-open .m-lang-item:nth-child(9)  { transition-delay: 0.37s; }
.m-lang-box.is-open .m-lang-item:nth-child(10) { transition-delay: 0.41s; }
.m-lang-box.is-open .m-lang-item:nth-child(11) { transition-delay: 0.45s; }
.m-lang-box.is-open .m-lang-item:nth-child(12) { transition-delay: 0.49s; }
.m-lang-box.is-open .m-lang-item:nth-child(13) { transition-delay: 0.53s; }
.m-lang-box.is-open .m-lang-item:nth-child(14) { transition-delay: 0.57s; }
.m-lang-box .m-lang-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.m-lang-box .m-lang-item:hover,
.m-lang-box .m-lang-item.is-active { color: #c8d62e; }

/* S1 CTA：位于首屏底部 (Figma pb=188 / 1334)，包含下载胶囊 + LOGO/福利两栏 */
.m-s1-cta {
    position: absolute;
    left: 50%;
    /* 底部 CTA 群叠加 safe-area-inset-bottom，避免下载按钮被 Home 条遮挡 */
    bottom: calc(25.07vw + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: 80vw;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.53vw;
}
/* 下载按钮整体走切图（图含背景胶囊 + 下载图标 + 文案），按 601x85 原始比例 */
.m-s1-download {
    display: block;
    width: 80vw;
}
.m-s1-download img {
    display: block;
    width: 100%;
    height: auto;
}
.m-s1-promo {
    width: 80vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.m-s1-store,
.m-s1-welfare { display: block; }
.m-s1-store { position: relative; }
.m-s1-store { width: 80vw; }
.m-s1-store > img:not(.m-s1-store-offer) { width: 100%; height: auto; display: block; }
.m-s1-welfare img { width: 29.47vw; height: auto; display: block; }
/* 优惠返利胶囊：贴在 store 按钮下方，与上方下载/store 按钮同宽（80vw）居中对齐。
 * 新版切图 601x49，按 80vw 宽度自适应高度，14 个 locale 等宽等高，视觉一致。 */
.m-s1-store-offer {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: auto;
    max-width: none;
    margin-top: 1.6vw;
    pointer-events: none;
}

/* ============================================================
 * S2 — 军官介绍（Figma node 10252:1476，750x1334 设计稿）
 *   全屏背景（按选中角色切换） + 标题左上 + 角色名 + 缩略图选择器 + Store +10% 悬浮
 * ============================================================ */
.m-s2 {
    background: #1e2423;
    color: #ffffff;
}

/* 各角色背景叠层：随选中军官切换 */
.m-s2-bg-stack {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #1e2423;
}
/* 暗色渐变蒙层，保证标题/角色名/CTA 可读 */
.m-s2-bg-stack::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);
    z-index: 2;
    pointer-events: none;
}
.m-s2-bg {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 500ms ease;
}
.m-s2-bg.is-active { opacity: 1; }

.m-s2-content {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.m-s2-content > * { pointer-events: auto; }

/* 标题：左上 (53, 119 in 750x1334) */
.m-s2-info-title {
    position: absolute;
    top: 16vw;
    left: 7.07vw;
    display: flex;
    align-items: center;
    gap: 2.13vw;
}
.m-s2-title-bar {
    width: 0.4vw;
    height: 6.32vw;
    background: #f0fd83;
    flex-shrink: 0;
}
.m-s2-title-text {
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    font-size: 6.13vw;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

/* 角色名：左对齐到第一张轮播缩略图（selector padding 4vw + 左箭头 4.07vw + gap 4.13vw = 12.2vw）；
   距下方 selector 顶部 10px */
.m-s2-char-name {
    position: absolute;
    left: calc(12.2vw - 2px);
    right: 4vw;
    bottom: calc(52.13vw + 10px);
    text-align: left;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    font-size: 7.2vw;
    font-weight: 700;
    color: #fdfdfd;
    line-height: 1.15;
    transition: opacity 280ms ease;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.m-s2.is-switching .m-s2-char-name { opacity: 0; }

/* 角色选择器：左箭头 + 3 个缩略图(可横向滚动) + 右箭头
 * 关键：保证 3 张缩略图 + 2 箭头 + gap 在 100vw 内完整展示，不被裁掉。
 * 总宽 = 2*15.25px + 2*3vw + 77vw + 2vw(左右内边距) ≈ 85vw + 30.5px，375px 屏幕约 348px 容纳。
 */
.m-s2-selector {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28.8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    padding: 0 1vw;
}
.m-s2-arrow {
    /* 与 PC .s2-arrow 一致：等比缩放至高度 20px（原 Figma 30.489×39.986 → 比例 0.762） */
    width: 15.25px;
    height: 20px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 4;
}
.m-s2-arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}

.m-s2-thumb-list {
    display: flex;
    gap: 2.67vw;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    /* 单屏可视 3 张：3 × 23.87 + 2 × 2.67 = ~77vw */
    max-width: 77vw;
    padding: 1.33vw 0;
}
.m-s2-thumb-list::-webkit-scrollbar { display: none; }
.m-s2-thumb-list .m-s2-thumb-item {
    position: relative;
    width: 23.87vw;
    height: 20.67vw;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    background: #1e2423;
    scroll-snap-align: center;
    transition: transform 240ms ease, filter 240ms ease;
}
.m-s2-thumb-list .m-s2-thumb-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.m-s2-thumb-list .m-s2-thumb-item .m-s2-thumb-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.73vw;
    text-align: center;
    color: #ffffff;
    font-size: 2.67vw;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    z-index: 3;
    padding: 0 1vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 未选中态：60% 黑色蒙版罩在卡片最上层（img + 名称都被压暗） */
.m-s2-thumb-list .m-s2-thumb-item:not(.is-active)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 4;
}
.m-s2-thumb-list .m-s2-thumb-item.is-active {
    filter: none;
}
/* 选中态高亮框（Figma imgFrame26 选中态边框） */
.m-s2-thumb-list .m-s2-thumb-item.is-active::after {
    content: '';
    position: absolute;
    inset: -0.93vw -0.67vw;
    background: url('../../img/m/common/s2/thumb-active.webp') no-repeat center / 100% 100%;
    pointer-events: none;
    z-index: 2;
}

/* 全局悬浮 Store +10% CTA：S2/S3/S4 显示，S1 隐藏（由 home_m.js 监听 .m-page scroll 加 is-visible 切换）。
 * 位置左下，与原 S2 内部 store-cta 视觉位置一致：bottom:11.73vw / 35.87×9.87vw / 文字 Figma 36px 缩小 10% → 4.32vw
 */
.m-floating-store-cta {
    position: fixed;
    left: -2px;
    bottom: calc(11.73vw + env(safe-area-inset-bottom, 0px));
    width: 35.87vw;
    height: 9.87vw;
    z-index: 90;
    display: block;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, visibility 0s linear 240ms;
    pointer-events: none;
    /* mask 用底图 alpha 通道，把扫光裁剪到按钮五边形内部，与 PC .cta-store 一致 */
    -webkit-mask-image: url('../../img/m/common/s2/store-cta-bg.webp');
    mask-image: url('../../img/m/common/s2/store-cta-bg.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
/* 循环扫光：从右向左 2.15s 一圈，与 PC .cta-store::after 同款 */
.m-floating-store-cta::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        90deg,
        rgba(242, 255, 132, 0)   0%,
        rgba(242, 255, 132, 0)   40%,
        rgba(242, 255, 132, 0.2) 62%,
        rgba(242, 255, 132, 0.6) 82%,
        rgba(242, 255, 132, 1)   100%
    );
    transform: translate(-100%, 0);
    filter: blur(2px);
    mix-blend-mode: soft-light;
    animation: ctaStoreScanLTR 1.43s linear infinite;
}
/* 从左到右扫光：起点元素左移 100%（亮带在元素右侧、紧贴按钮左外，不可见）→
 * 终点元素右移 100%（亮带已穿过按钮、移到右外，不可见）。
 * 两端都"亮带在按钮外"，循环时不会出现亮带从右下角瞬间跳回左下角的视觉断点，扫光首尾衔接顺畅。
 * 配合 linear 时间函数保持匀速，节奏稳定。 */
@keyframes ctaStoreScanLTR {
    0%   { transform: translate(-100%, 0); }
    100% { transform: translate(100%, 0); }
}
.m-floating-store-cta.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 240ms ease, visibility 0s linear 0s;
    pointer-events: auto;
}
.m-floating-store-cta-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
}
.m-floating-store-cta-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.07vw;
    /* 右侧箭头形尖角占 ~30px 宽，文字向左偏一点保持视觉居中 */
    padding-right: 6%;
    /* 海外字体 BebasNeueProExpanded（CJK 回退 Noto Sans） */
    font-family: 'BebasNeueProExpanded', 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    line-height: 1;
    color: #f0fd83;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.04em;
}
.m-floating-store-cta-text-main,
.m-floating-store-cta-text-sub {
    font-size: 4.27vw;
}

/* ============================================================
 * S3 — 军备武器轮播（M 端纵向布局）
 *   顶部：背景叠层（随选中武器切换）+ 标题 + 武器名
 *   底部：左右切换按钮 + 卡片横向滚动（与 S2 相同的卡片帧样式）
 * ============================================================ */
.m-s3 {
    background: #1e2423;
    color: #ffffff;
}

.m-s3-bg-stack {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #1e2423;
}
.m-s3-bg-stack::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);
    z-index: 2;
    pointer-events: none;
}
.m-s3-bg {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 500ms ease;
}
.m-s3-bg.is-active { opacity: 1; }

.m-s3-info {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.m-s3-info > * { pointer-events: auto; }

/* 标题：左上 — 与 S2 完全一致 */
.m-s3-info-title {
    position: absolute;
    top: 16vw;
    left: 7.07vw;
    display: flex;
    align-items: center;
    gap: 2.13vw;
}
.m-s3-title-bar {
    width: 0.4vw;
    height: 6.32vw;
    background: #f0fd83;
    flex-shrink: 0;
}
.m-s3-title-text {
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    font-size: 6.13vw;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

/* 武器名：左对齐到第一张卡片，距下方 selector 顶部 10px — 位置与 S2 .m-s2-char-name 一致 */
.m-s3-weapon-name {
    /* desc + type 单行展示，字号 50px @ 750 设计稿 → 6.67vw */
    position: absolute;
    left: calc(12.2vw - 2px);
    right: 4vw;
    bottom: calc(52.13vw + 10px);
    text-align: left;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    color: #fdfdfd;
    font-size: 6.67vw;
    line-height: 1.15;
    transition: opacity 280ms ease;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-s3-weapon-name .m-s3-weapon-desc,
.m-s3-weapon-name .m-s3-weapon-type {
    display: inline;
    font-size: inherit;
    line-height: inherit;
}
.m-s3-weapon-name .m-s3-weapon-desc:empty,
.m-s3-weapon-name .m-s3-weapon-type:empty { display: none; }

/* 轮播选择器：左箭头 + 卡片横向滚动 + 右箭头 — 位置与 S2 .m-s2-selector 一致 */
.m-s3-selector {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28.8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    padding: 0 1vw;
}
.m-s3-arrow {
    width: 15.25px;
    height: 20px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 4;
}
.m-s3-arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}

.m-s3-card-list {
    display: flex;
    gap: 2.67vw;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    max-width: 77vw;
    padding: 1.33vw 0;
}
.m-s3-card-list::-webkit-scrollbar { display: none; }
.m-s3-card-list .m-s3-card-item {
    position: relative;
    width: 23.87vw;
    height: 20.67vw;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    background: #1e2423;
    scroll-snap-align: center;
    transition: transform 240ms ease, filter 240ms ease;
}
.m-s3-card-list .m-s3-card-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.m-s3-card-list .m-s3-card-item .m-s3-card-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.73vw;
    text-align: center;
    color: #ffffff;
    font-size: 2.67vw;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    z-index: 3;
    padding: 0 1vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 未选中态：60% 黑色蒙版罩在卡片最上层（img + 名称都被压暗） */
.m-s3-card-list .m-s3-card-item:not(.is-active)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 4;
}
.m-s3-card-list .m-s3-card-item.is-active {
    filter: none;
}
.m-s3-card-list .m-s3-card-item.is-active::after {
    content: '';
    position: absolute;
    inset: -0.93vw -0.67vw;
    background: url('../../img/m/common/s2/thumb-active.webp') no-repeat center / 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.m-s3.is-switching .m-s3-weapon-name {
    opacity: 0;
}

/* ============================================================
 * S4 — 游戏特色（M 端，Figma node 10252:1564, 750x1334 设计稿）
 *   全屏背景 + 标题左上 + 单张大卡片轮播 + 左右箭头 + 底部进度条
 *   尺寸/坐标按 Figma 原值换算（除以 7.5 得 vw）
 * ============================================================ */
.m-s4 {
    background: #1e2423;
    color: #ffffff;
}
.m-s4-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.55;
}

/* 标题：Figma left:53 top:119, gap:16, bar 2.8×47.4 #f0fd83, text 46px white */
.m-s4-info-title {
    position: absolute;
    top: 15.87vw;
    left: 7.07vw;
    display: flex;
    align-items: center;
    gap: 2.13vw;
    z-index: 5;
}
.m-s4-title-bar {
    width: 0.4vw;
    height: 6.32vw;
    background: #f0fd83;
    flex-shrink: 0;
}
.m-s4-title-text {
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    font-size: 6.13vw;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Stage：单卡 + 左右箭头水平居中；Figma 组内 gap 23px = 3.07vw
 * 单卡 Figma 528×952 → 70.4vw 宽 + aspect 528:952，高随宽比例自动撑
 * 高度上限 71.4vh，避免在窄高比设备溢出 */
/* m-s4-main 包住 stage(arrows+card) + progress，整组垂直居中；progress 离卡片底部 10px */
.m-s4-main {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 5;
}
.m-s4-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.07vw;
}
.m-s4-arrow {
    /* Figma 箭头 30.489×39.986 → 4.07vw × 5.33vw */
    width: 4.07vw;
    height: 5.33vw;
    border: none;
    background-color: #FFFFFF;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.m-s4-arrow-left {
    -webkit-mask-image: url('../../img/m/common/s4/arrow-selected.svg');
    mask-image: url('../../img/m/common/s4/arrow-selected.svg');
}
.m-s4-arrow-right {
    -webkit-mask-image: url('../../img/m/common/s4/arrow-default.svg');
    mask-image: url('../../img/m/common/s4/arrow-default.svg');
}

.m-s4-card-window {
    position: relative;
    /* dvh 充足时取 70.4vw；地址栏可见挤压时按 dvh 反推宽度，保证卡片顶
       与 .m-s4-info-title 底（22vw）之间至少 4vw 间距 → iPhone X/14 Pro/14 Pro Max/16 不再压标题
       第一行是 iOS 15.4 以下不识别 dvh 的兜底 */
    width: 70.4vw;
    width: min(70.4vw, calc((100dvh - 54vw) * 528 / 952));
    aspect-ratio: 528 / 952;
}
.m-s4-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    height: 100%;
}
/* Figma 设计稿仅展示中间一张大图，左右槽隐藏（JS 仍维持 is-pos-* 状态）
 * 切换效果与 M 端 S3 背景一致：opacity 500ms ease 纯淡入淡出 */
.m-s4-card-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
    z-index: 1;
}
.m-s4-card-item img {
    /* 卡片容器已按 528:952 锁定 aspect-ratio，图整张展示不裁切 */
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.m-s4-card-item.is-pos-center {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}

/* 4-dot 进度指示器：参考 kangningxu-w3-web m-s4-dots，宽形胶囊 + active 加宽变高亮色 */
.m-s4-progress {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2.13vw;
}
.m-s4-dot {
    display: block;
    height: 0.8vw;
    width: 7.2vw;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.4);
    transition: width 0.25s ease, background 0.25s ease;
}
.m-s4-dot.is-active {
    width: 14.27vw;
    background: #c8d62e;
}

/* ============================================================
 * M 端页脚 footer (Figma node 10323-1680)
 *   - 背景 #141414；纵向居中；logo + 文案块
 * ============================================================ */
/* 按 figma 原始尺寸：内容 logo + 文案两行 + 上下/中间 gap，
 * 不加额外 min-height 让其撑满 viewport */
.m-site-footer {
    background: #141414;
    /* 底部内边距叠加 safe-area-inset-bottom：避开 Home 条 / 浏览器底部 chrome */
    padding: 12vw 5.33vw calc(12vw + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4vw;
    color: #ffffff;
    text-align: center;
    /* footer 比 viewport 短，snap 到底部对齐（从 s4 下滑时底对齐拉入）。
       之前还加了 scroll-snap-stop: always，由于 footer 的 snap 点（底对齐）
       与 S4 的 snap 点（顶对齐）位置接近，浏览器会在两个强制吸附点之间反复
       校正 → 卡顿。改为 proximity 行为：吸附仍生效，但不强制停留，过渡顺滑。 */
    scroll-snap-align: end;
}
.m-site-footer-logo {
    width: 28vw;
    max-width: 250px;
}
.m-site-footer-logo img {
    width: 100%;
    height: auto;
    display: block;
}
.m-site-footer-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5vw;
}
.m-site-footer-links {
    margin: 0;
    font-size: 3.4vw;
    line-height: 1.6;
    font-weight: 700;
    color: #ffffff;
}
.m-site-footer-link {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.6vw;
}
.m-site-footer-sep { margin: 0 0.4em; color: #ffffff; text-decoration: none; }
.m-site-footer-copyright {
    margin: 0;
    font-size: 3vw;
    line-height: 1.6;
    font-weight: 700;
    color: #ffffff;
    white-space: pre-line; /* 保留 config 里的 \n 作为换行 */
}

/* ============================================================
 * Motion tokens + reduced motion（warline brief Global / Accessibility）
 * ============================================================ */
:root {
    --motion-fast: 160ms;
    --motion-normal: 240ms;
    --motion-slow: 700ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-sharp: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
 * Tap feedback + 44px touch target — warline brief Task 4
 *   button / a / .m-lang-switch / 箭头 / 缩略图
 * ============================================================ */
.m-s1-download,
.m-s1-store,
.m-s1-welfare,
.m-floating-store-cta,
.m-lang-switch,
.m-s2-arrow,
.m-s3-arrow,
.m-s4-arrow,
.m-s2-thumb-list .m-s2-thumb-item,
.m-s3-card-list .m-s3-card-item,
.m-s4-card-item,
.m-lang-box .m-lang-item {
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--motion-fast) var(--ease-out),
                filter var(--motion-fast) var(--ease-out),
                background var(--motion-fast) var(--ease-out);
}
.m-s1-download:active,
.m-s1-store:active,
.m-s1-welfare:active,
.m-floating-store-cta:active {
    transform: scale(0.97);
}
.m-s2-arrow:active,
.m-s3-arrow:active,
.m-s4-arrow:active {
    transform: scale(0.92);
    filter: brightness(1.2) drop-shadow(0 0 4px rgba(0, 0, 0, 0.7));
}
.m-s2-thumb-list .m-s2-thumb-item:active,
.m-s3-card-list .m-s3-card-item:active,
.m-s4-card-item:active { filter: brightness(1.1); }
.m-lang-box .m-lang-item:active { background: rgba(255, 255, 255, 0.08); }

/* 箭头/语言/汉堡：扩大可点击区到 44px²（用伪元素 hit-area，不影响视觉尺寸） */
.m-s2-arrow,
.m-s3-arrow {
    position: relative;
}
.m-s2-arrow::after,
.m-s3-arrow::after {
    content: '';
    position: absolute;
    inset: 50% 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}
.m-s4-arrow { position: relative; }
.m-s4-arrow::after {
    content: '';
    position: absolute;
    inset: 50% 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}
.m-lang-switch {
    /* 视觉保持 6.93vw 但 hit area ≥ 44×44 */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.m-lang-globe {
    width: 6.93vw !important;
    height: 6.4vw !important;
}

/* ============================================================
 * Hamburger → close 形态切换 — warline brief Task 6
 *   关闭态：显示 globe；打开态：旋转/淡出 globe，叠加 X 形 close 图标
 * ============================================================ */
.m-lang-switch .m-lang-close {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6.4vw;
    height: 6.4vw;
    transform: translate(-50%, -50%) scale(0.6) rotate(-45deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out);
    z-index: 1001;
}
.m-lang-switch .m-lang-close::before,
.m-lang-switch .m-lang-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 0.6vw;
    background: #ffffff;
    border-radius: 99px;
    transform-origin: center;
}
.m-lang-switch .m-lang-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.m-lang-switch .m-lang-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.m-lang-switch.is-open .m-lang-globe {
    opacity: 0;
    transform: rotate(45deg) scale(0.6);
    transition: transform 240ms var(--ease-out), opacity 200ms var(--ease-out);
}
.m-lang-globe {
    transition: transform 240ms var(--ease-out), opacity 200ms var(--ease-out);
}
.m-lang-switch.is-open .m-lang-close {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

/* 菜单打开时禁止 .m-page 滚动 */
.m-page.is-menu-open {
    overflow: hidden;
    touch-action: none;
}

/* 菜单滑入：覆盖默认的 fixed-cover，做"顶部下拉"位移 */
.m-lang-box {
    transform: translateY(-6%);
    transition: background 0.35s ease, visibility 0s 0.6s, transform 0.35s var(--ease-out);
}
.m-lang-box.is-open {
    transform: translateY(0);
    transition: background 0.35s ease, visibility 0s 0s, transform 0.35s var(--ease-out);
}

/* ============================================================
 * 首屏 scroll hint — warline brief Task 5
 *   小箭头 + 上下浮动；进入 S2 后由 JS 加 .is-hidden 淡出
 * ============================================================ */
.m-scroll-hint {
    position: fixed;
    left: 50%;
    bottom: calc(4.8vw + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 80;
    width: 8vw;
    height: 8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 320ms var(--ease-out);
}
.m-scroll-hint::before {
    content: '';
    width: 3.2vw;
    height: 3.2vw;
    border-right: 0.6vw solid rgba(255, 255, 255, 0.9);
    border-bottom: 0.6vw solid rgba(255, 255, 255, 0.9);
    transform: rotate(45deg);
    margin-top: -1.6vw;
    animation: mScrollBob 1400ms ease-in-out infinite;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}
.m-scroll-hint.is-hidden { opacity: 0; }
@keyframes mScrollBob {
    0%   { transform: rotate(45deg) translate(-3px, -3px); opacity: 0.4; }
    50%  { transform: rotate(45deg) translate(3px, 3px);  opacity: 1; }
    100% { transform: rotate(45deg) translate(-3px, -3px); opacity: 0.4; }
}

/* ============================================================
 * Reduced motion — 全局退化（warline brief Accessibility）
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    .m-floating-store-cta::after,
    .m-scroll-hint::before { animation: none !important; }
    .m-scroll-hint { display: none !important; }
}

/* ============================================================
 * M 端 S2-S4 大标题 + 介绍标题：使用 Bebas Neue Pro Expanded Bold（与 PC 一致）
 * 排除 zh-CN / zh-TW / th（字体包不含 CJK / 泰文字符，会缺字回退）
 * ============================================================ */
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .m-s2-title-text,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .m-s2-char-name,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .m-s3-title-text,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .m-s3-weapon-name,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .m-s3-weapon-desc,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .m-s3-weapon-type,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .m-s4-title-text,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .m-benefit-modal-title,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .m-benefit-modal-subtitle,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .m-benefit-modal-cta-label {
    font-family: 'BebasNeueProExpanded', 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
}

/* ============================================================
 * M 端公测福利弹框 .m-benefit-modal (Figma 10645-14)
 *   - 触发：.m-s1-welfare 点击 → JS 添加 .is-open
 *   - 遮罩：80% 黑覆盖全屏；关闭：× / 遮罩 / ESC
 *   - 设计稿 750×1334，panel 715×619，比例与尺寸全部以 vw（基准 750）落值
 *   - 标题 / 副标题 / 按钮文案：data-config-key 多语言绑定，与 PC 共用
 *   - bg / 按钮 / 三张奖励占位：装饰素材 img/m/common/benefit-modal/*
 * ============================================================ */
.m-benefit-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}
.m-benefit-modal[hidden] { display: none; }
.m-benefit-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease, visibility 0s linear 0s;
}
.m-benefit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
}
.m-benefit-modal-panel {
    position: relative;
    z-index: 1;
    width: 95.33vw;   /* 715/750 */
    height: 82.55vw;  /* 619/750，与原图 aspect 一致 */
    background: url('../../img/m/common/benefit-modal/modal-bg.webp') center / 100% 100% no-repeat;
    transform: scale(0.92);
    transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.m-benefit-modal.is-open .m-benefit-modal-panel { transform: scale(1); }

.m-benefit-modal-title {
    position: absolute;
    top: calc(5.62vw + 4px);     /* 6.81% × 82.55vw，再下移 4px */
    left: 0;
    right: 0;
    margin: 0;
    color: #ffffff;
    font-size: 5.33vw;  /* 40/750 */
    font-weight: 700;
    line-height: 1;
    text-align: center;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
}
.m-benefit-modal-subtitle {
    position: absolute;
    top: 18vw;       /* 21.81% × 82.55vw */
    left: 0;
    right: 0;
    margin: 0;
    color: #ffffff;
    font-size: 3.47vw;  /* 26/750 */
    font-weight: 400;
    line-height: 1;
    text-align: center;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    white-space: nowrap;
}

/* 3 张奖励占位横向一行：每张 172×194 @ 750w / 750w；间距 24px → 3.2vw */
.m-benefit-modal-rewards {
    position: absolute;
    top: 27vw;       /* 32.69% × 82.55vw */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3.2vw;
    list-style: none;
    margin: 0;
    padding: 0;
}
.m-benefit-modal-reward {
    width: 22.93vw;   /* 172/750 */
    height: 25.87vw;  /* 194/750 */
    background: #6b6b6b;
    overflow: hidden;
    flex-shrink: 0;
}
.m-benefit-modal-reward img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 立即下载按钮：top 60.57% / bottom 33.66% = height 5.77% of design 1334 ≈ 77px；
   panel-relative top (60.57-26.84)/46.4 = 72.7% × 82.55vw = 60vw；
   按钮框原图 ~260×77 比例 3.38:1，取宽 240/750=32vw，高 32/3.38≈9.47vw */
.m-benefit-modal-cta {
    position: absolute;
    bottom: 9.06vw;   /* 33.66% × 82.55vw ≈ 9.06vw 距 panel 底 */
    left: 50%;
    transform: translateX(-50%);
    /* 整图作为背景 100%×100% 铺满，保证 chevron / 下划线完整不被裁切 */
    min-width: 32vw;
    max-width: 86vw;
    height: 9.47vw;
    padding: 0 10.5vw;
    box-sizing: border-box;
    border: 0;
    background-color: #283820;
    background-image: url('../../img/m/common/benefit-modal/btn-download.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform .15s ease, filter .15s ease;
}
.m-benefit-modal-cta:active { transform: translateX(-50%) scale(0.96); filter: brightness(1.1); }
.m-benefit-modal-cta-label {
    color: #ffffff;
    font-size: 3.47vw;  /* 26/750 */
    font-weight: 700;
    line-height: 1;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
}

/* × 已烧在 modal-bg.webp 右上角，透明热区盖在切图 × 上即可
   native bg 715×619，× 中心约 right:46 top:50 native；
   缩放到 panel 95.33vw / 82.55vw 后 right ≈ 6.13vw, top ≈ 6.67vw, size ~50 ≈ 6.67vw */
.m-benefit-modal-close {
    position: absolute;
    top: 4vw;
    right: 4vw;
    width: 9vw;
    height: 9vw;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    z-index: 2;
}

/* ============================================================
 * iOS 下载提示 Toast：点击主下载按钮时居中淡入，3s 后淡出
 * 仅 iOS / iPadOS 触发；Android 用户无感知
 * ============================================================ */
.m-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    max-width: 92vw;
    padding: 4.4vw 6.6vw;
    background: rgba(0, 0, 0, 0.82);
    color: #ffffff;
    font-size: 4.1vw;  /* 28/750 ×1.1 */
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    border-radius: 2.2vw;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    transition: opacity .22s ease, transform .22s ease;
    box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.35);
}
.m-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}