/* =========================================================
 * 首屏 (Hero) — 严格按 1080×2058 设计稿 1:1 还原
 * 1rem = 100 设计 px（rem 值 = 设计 px / 100）
 * ========================================================= */

body[data-page="home"] {
    background: #18392f;
}

/* ---------- 首屏加载动画 ---------- */
.site-loading {
    position: fixed;
    /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #18392f; */
    background: #000;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
}

.site-loading.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .5s ease, visibility .5s ease;
}

.site-loading__wrap {
    position: relative;
    display: inline-block;
}

.site-loading__logo {
    position: relative;
    /* iOS 13 兜底：不支持 min() 与 aspect-ratio，按视口宽度等比换算高度 */
    width: 86vw;
    height: calc(86vw * 1704 / 3726);
    background: #343434;
    -webkit-mask: url('/m/assets/images/loading/logo.png') 50% 50% / contain no-repeat;
    mask: url('/m/assets/images/loading/logo.png') 50% 50% / contain no-repeat;
    overflow: hidden;
    transform-origin: center center;
}

/* 支持 aspect-ratio 的浏览器（iOS 15+）：恢复最大宽度限制与比例自适应 */
@supports (aspect-ratio: 16 / 9) {
    .site-loading__logo {
        width: min(8.6rem, 86vw);
        height: auto;
        aspect-ratio: 3726 / 1704;
    }
}

.site-loading__fill {
    position: absolute;
    /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background: #fff9ef;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    will-change: clip-path;
}

.site-loading__star--main {
    position: absolute;
    top: .4rem;
    left: 1.85rem;
    width: .77rem;
    height: .78rem;
    background: url('/m/assets/images/loading/star1.svg') 50% 50% / contain no-repeat;
    transform-origin: center center;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transform: rotate(-15deg);
}

.site-loading__star--sub {
    position: absolute;
    top: .4rem;
    left: 1.85rem;
    width: .46rem;
    height: .48rem;
    background: url('/m/assets/images/loading/star2.svg') 50% 50% / contain no-repeat;
    transform-origin: center center;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
}

.site-loading__sparkle {
    position: absolute;
    width: 0.5rem;
    height: 0.52rem;
    background: url('/m/assets/images/loading/star2.svg') 50% 50% / contain no-repeat;
    transform-origin: center center;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}

.site-loading__sparkle[data-pos="z3"] {
    bottom: -0.15rem;
    left: -.7rem;
    background-image: url('/m/assets/images/loading/z3.svg');
    width: .65rem;
    height: .78rem;
}

.site-loading__sparkle[data-pos="z2"] {
    top: 0.3rem;
    left: .3rem;
    width: .65rem;
    height: .9rem;
    background-image: url('/m/assets/images/loading/z2.svg');
}

.site-loading__sparkle[data-pos="z1"] {
    top: -1rem;
    left: 0.3rem;
    width: 1.35rem;
    height: 1.63rem;
    background-image: url('/m/assets/images/loading/z1.svg');
}

.site-loading__sparkle[data-pos="y1"] {
    bottom: 0.7rem;
    right: -.95rem;
    width: 1.1rem;
    height: 1.7rem;
    background-image: url('/m/assets/images/loading/y1.svg');
}

.site-loading__sparkle[data-pos="y2"] {
    bottom: 0.9rem;
    right: -.9rem;
    width: .5rem;
    height: .66rem;
    background-image: url('/m/assets/images/loading/y2.svg');
}

@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
    .site-loading__fill {
        transform: translateX(-100%);
        clip-path: none;
        will-change: transform;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-loading__fill {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: none;
    }

    .site-loading__star--main,
    .site-loading__star--sub,
    .site-loading__sparkle {
        opacity: 1;
    }
}

.home-section--page1 {
    position: absolute;
    /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    font-family: "HYYouYuan", "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
    color: #fff4d7;
    overflow: hidden;
}

/* ---------- 背景插画 ---------- */
.hero-bg {
    position: absolute;
    /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* Canvas 视频背景 (JSMpeg 渲染目标)
 * 模拟 object-fit:cover — 高度铺满，宽度按视频比例自适应居中，
 * 超出容器部分由 overflow:hidden 裁剪。
 * 具体尺寸由 hero-video.js 动态计算设置。 */
.hero-bg__canvas {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity .3s ease;
    /* width/height 由 JS 动态设置 */
}

.hero-bg.is-video-ready .hero-bg__canvas {
    opacity: 1;
}

/* 静态图 fallback / poster，视频就绪后淡出 */
.hero-bg__img {
    position: absolute;
    /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: opacity .6s ease;
}

.hero-bg.is-video-ready .hero-bg__img {
    opacity: 0;
}

/* 半透明渐变遮罩 (设计稿: top 858, h 1200, 由透明->黑0.3) */
.hero-bg__overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 8.58rem;
    height: 12rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
    z-index: 2;
}

/* 底部黄色波浪/草坪 (1080×183) */
.hero-bg__grass {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 1.83rem;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    z-index: 3;
    /* GPU 合成层提升：防止 iOS 从 page1 切到 page2 时，
       WebGL Canvas 暂停导致合成层降级而引发 grass 重绘闪烁。
       与 .duck-bg__canvas / .page2-content 的处理方式保持一致。 */
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ===========================================================
 * 顶部导航 1080 × 155
 * =========================================================== */
.topbar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 160;
    display: flex;
    align-items: center;
    width: 10.8rem;
    height: 1.55rem;
    padding: 0 .34rem;
    background: #1f1f1f url('/m/assets/images/topBar/nav-bg.png') center/cover no-repeat;
}

.topbar__logo {
    flex-shrink: 0;
    display: block;
    /* width: 2.61rem; */
    /* height: .86rem; */
    height: 1.1rem;
    width: 2.41rem;
}

/* 日语版 logo 含ロコキングダム副标题，宽高比更高 (491/437 ≈ 1.1236)，
   容器高度等比放大，避免被 object-fit: contain 上下留白 */
.topbar__logo--ja {
    height: 1.236rem;
}

.topbar__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.topbar__music {
    flex-shrink: 0;
    width: .67rem;
    height: .74rem;
    margin-left: .34rem;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.topbar__music img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.topbar__music-on {
    display: none;
}

.topbar__music.is-on .topbar__music-on {
    display: block;
    animation: music-pulse 1.8s var(--ease-out) infinite;
}

.topbar__music.is-on .topbar__music-off {
    display: none;
}

/* PRE-REGISTER 图片按钮 (460×82) */
.topbar__cta {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.63rem;
    height: .83rem;
    margin-left: .47rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .18s var(--ease-out);
}

.topbar__cta-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.topbar__cta-done {
    display: none;
}

.topbar__cta:active {
    transform: scale(.96);
}

.topbar__cta.is-reserved .topbar__cta-default {
    display: none;
}

.topbar__cta.is-reserved .topbar__cta-done {
    display: block;
}

/* 菜单按钮 60×50 (3 条横线) */
.topbar__menu {
    flex-shrink: 0;
    position: relative;
    width: .60rem;
    height: .50rem;
    margin-left: auto;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.topbar__menu span {
    position: absolute;
    left: 0;
    width: 100%;
    height: .08rem;
    border-radius: .04rem;
    background: #f4eee1;
    transition: transform .2s var(--ease-out), opacity .2s var(--ease-out), top .2s var(--ease-out);
}

.topbar__menu span:nth-child(1) {
    top: 0;
}

.topbar__menu span:nth-child(2) {
    top: .21rem;
}

.topbar__menu span:nth-child(3) {
    top: .42rem;
}

.topbar__menu.is-active span:nth-child(1) {
    top: .21rem;
    transform: rotate(45deg);
}

.topbar__menu.is-active span:nth-child(2) {
    opacity: 0;
}

.topbar__menu.is-active span:nth-child(3) {
    top: .21rem;
    transform: rotate(-45deg);
}

/* ===========================================================
 * 语言切换 (右上角): globe icon + 当前语言 + 下拉菜单
 * =========================================================== */
.language-switcher {
    position: absolute;
    right: .29rem;
    top: 1.80rem;
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #f9c150;
    font-family: "HYYouYuan", Arial, Helvetica, sans-serif;
    font-weight: 900;
}

[data-lang="ja"] .language-switcher {
    font-family: "ja2";
}

.language-current {
    display: flex;
    align-items: center;
    gap: .08rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* [gap-fallback:iOS13] .language-current */
.language-current > * + * { margin-left: .08rem; }
@supports (inset-inline: 0) {
  .language-current { gap: .08rem; }
  .language-current > * + * { margin-left: 0; }
}

.language-current__icon {
    display: block;
    width: .73rem;
    height: .72rem;
    margin-right: .10rem;
}

.language-current__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.language-current__code {
    font-size: .40rem;
    line-height: 1;
    color: #f9c150;
    letter-spacing: -.025em;
}

.language-current__arrow {
    font-size: .28rem;
    color: #f9c150;
    margin-top: .02rem;
}

/* 下拉菜单：默认隐藏，与按钮中文字对齐 */
.language-menu {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-top: .12rem;
    margin-left: .91rem;
}

.language-switcher.is-active .language-menu {
    display: flex;
}

.language-option {
    display: block;
    font-size: .40rem;
    line-height: .52rem;
    letter-spacing: -.025em;
    color: #f4eee1;
    text-align: center;
}

.language-option.is-active {
    color: #f9c150;
}

/* 五个圆点虚线分隔 */
.language-menu__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .06rem;
    padding: .08rem 0;
}

/* [gap-fallback:iOS13] .language-menu__dots */
.language-menu__dots > * + * { margin-left: .06rem; }
@supports (inset-inline: 0) {
  .language-menu__dots { gap: .06rem; }
  .language-menu__dots > * + * { margin-left: 0; }
}

.language-menu__dots i {
    display: block;
    width: .06rem;
    height: .06rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
}

/* ===========================================================
 * 左侧 LOGIN 按钮（树枝上）
 * 设计稿：x=60, y=202, w=159, h=33, font=36, line-height=23
 * =========================================================== */
.hero-login {
    position: absolute;
    left: .40rem;
    top: 2.02rem;
    z-index: 91;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 1.59rem;
    height: .33rem;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: "HYYouYuan", "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
    font-size: .36rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: .23rem;
    letter-spacing: -.01rem;
    white-space: nowrap;
    color: #f5efdf;
    cursor: pointer;
    transition: transform .18s var(--ease-out);
}

[data-lang="ja"] .hero-login {
    font-family: "ja2";
}

.hero-login[hidden] {
    display: none;
}

.hero-login__text {
    color: #f9c150;
    margin: 0 .08rem;
}

.hero-login:active {
    transform: scale(.96);
}

/* 已登录态：[NICKN...] LOGOUT */
.hero-login-logged {
    position: absolute;
    left: .40rem;
    top: 2.02rem;
    z-index: 91;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: .33rem;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: "HYYouYuan", "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
    font-size: .36rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: .23rem;
    letter-spacing: -.01rem;
    white-space: nowrap;
    color: #f5efdf;
}

[data-lang="ja"] .hero-login-logged {
    font-family: "ja2";
}

.hero-login-logged[hidden] {
    display: none;
}

.hero-login-logged__name {
    display: inline-block;
    color: #f9c150;
    margin: 0 .08rem;
}

[data-lang="ja"] .hero-login-logged__name {
    font-family: "ja2";
}

.hero-login-logged__logout {
    margin-left: .28rem;
    padding: .12rem 0 .08rem;
    border: 0;
    border-bottom: .02rem solid currentColor;
    background: transparent;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: #f5efdf;
    cursor: pointer;
    transition: transform .18s var(--ease-out);
}

.hero-login-logged__logout:active {
    transform: scale(.96);
}

/* ===========================================================
 * 左侧分享条
 * =========================================================== */
.social-pill {
    position: absolute;
    left: .40rem;
    top: 4.81rem;
    z-index: 90;
    display: flex;
    align-items: center;
}

.social-pill__share {
    width: .81rem;
    height: .81rem;
    margin-right: .14rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #272524;
    cursor: pointer;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.social-pill__share img {
    width: .7rem;
    height: .7rem;
    object-fit: contain;
}

/* 背景图 238x106 @1rem=100px，自带左侧箭头+圆角胶囊，由 PNG alpha 定义轮廓 */
.social-pill__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: .33rem;
    width: 2.38rem;
    height: 1.06rem;
    padding: 0 .44rem 0 .57rem; /* 左侧多留 .13rem 给图片上的箭头 */
    border-radius: 0; /* 不设圆角，由背景图 alpha 通道定义视觉形状 */
    background: url('/m/assets/images/hero/social-pill__bar_bg.png') left center / 100% 100% no-repeat;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    visibility: hidden;
}

/* [gap-fallback:iOS13] .social-pill__bar */
.social-pill__bar > * + * { margin-left: .33rem; }
@supports (inset-inline: 0) {
  .social-pill__bar { gap: .33rem; }
  .social-pill__bar > * + * { margin-left: 0; }
}

.social-pill__bar.is-open {
    pointer-events: auto;
    visibility: visible;
}

.social-pill__item {
    display: grid;
    place-items: center;
    /* width: .50rem; */
    max-height: .63rem;
    flex-shrink: 0;
    transition: transform .18s var(--ease-out);
}

.social-pill__item img {
    /* max-width: 100%;
    max-height: 100%; */
    width: .44rem;
    height: auto;
    object-fit: contain;
}

/* fb 矢量比较窄高，要单独限制宽度让视觉一致 */
.social-pill__item--fb img {
    width: .29rem;
    height: auto;
}

.social-pill__item--x img {
    width: .46rem;
}

.social-pill__item--reddit img {
    width: .60rem;
}

.social-pill__item--download img {
    width: .51rem;
}

.social-pill__item:active,
.social-pill__share:active {
    transform: scale(.94);
}

/* social-pill 与 social-rail 之间的分隔线 */
.social-divider {
    position: absolute;
    left: .56rem;
    top: 5.95rem;
    width: .52rem;
    height: .01rem;
    background: rgba(255, 255, 255, .6);
    z-index: 90;
}

/* ===========================================================
 * 左侧社媒列表
 * =========================================================== */
.social-rail {
    position: absolute;
    left: .40rem;
    top: 6.28rem;
    z-index: 88;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: .84rem;
}

.social-rail__discord,
.social-rail__toggle {
    display: grid;
    place-items: center;
    width: .81rem;
    height: .81rem;
    margin-bottom: .15rem;
    border: 0;
    background: #272524;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.social-rail__discord img {
    width: .70rem;
    height: .70rem;
    object-fit: contain;
}

.social-rail__toggle img {
    width: .63rem;
    height: .63rem;
    object-fit: contain;
    transition: transform .3s var(--ease-out);
}

.social-rail__toggle.is-collapsed img {
    transform: rotate(180deg);
}

.social-rail__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: .84rem;
    padding: .45rem 0;
    border-radius: .42rem;
    background: #272524;
    gap: .35rem;
    overflow: hidden;
    /* 默认收起 — 与 social-pill__bar 保持一致的初始态 */
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
    pointer-events: none;
    visibility: hidden;
}

/* [gap-fallback:iOS13] .social-rail__list（column 方向） */
.social-rail__list > * + * { margin-top: .35rem; }
@supports (inset-inline: 0) {
    .social-rail__list { gap: .35rem; }
    .social-rail__list > * + * { margin-top: 0; }
}

.social-rail__list.is-open {
    pointer-events: auto;
    visibility: visible;
}

.social-rail__item {
    display: grid;
    place-items: center;
    /* width: .56rem;
    height: .56rem; */
    flex-shrink: 0;
    transition: transform .18s var(--ease-out);
}

.social-rail__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.social-rail__item--x img {
    width: .62rem;
}

.social-rail__item--youtube img {
    width: .62rem;
}

.social-rail__item--facebook {
    margin-block: -.2rem;
}

.social-rail__item--facebook img {
    /* width: .62rem;
    height: .62rem; */
    width: 1rem;
    height: 1rem;
}

.social-rail__item--tiktok img {
    width: .62rem;
}

.social-rail__item--reddit img {
    width: .62rem;
}

.social-rail__item--twitch img {
    width: .62rem;
}

.social-rail__item--instagram img {
    width: .62rem;
}

.social-rail__item:active {
    transform: scale(.94);
}

/* ===========================================================
 * 右侧 心愿单 Wishlist Now! 导轨
 * =========================================================== */
.wishlist-rail {
    position: absolute;
    right: .29rem;
    top: 4.80rem;
    z-index: 92;
    width: 1.49rem;
    height: 6.88rem;
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

.wishlist-rail__list {
    display: grid;
    justify-items: center;
    margin-top: 2.56rem;
    gap: .36rem;
}

.wishlist-rail__item {
    display: grid;
    place-items: center;
    background: transparent;
    transition: transform .18s var(--ease-out);
}

.wishlist-rail__item img {
    width: .73rem;
    height: .73rem;
    object-fit: contain;
}

.wishlist-rail__item--steam img {
    width: .71rem;
    height: .71rem;
}

.wishlist-rail__item--epic img {
    width: .63rem;
    height: .71rem;
}

.wishlist-rail__item--playstation img {
    width: .78rem;
    height: .64rem;
}

.wishlist-rail__item--xbox img {
    width: .73rem;
    height: .7rem;
}

.wishlist-rail__item:active {
    transform: scale(.94);
}

/* ===========================================================
 * 中间区域: 立即预约 + 报名测试 (纯图片按钮, 568×119)
 * =========================================================== */
.hero-actions {
    position: absolute;
    left: 50%;
    /* bottom: 4.62rem; */
    bottom: 4.12rem;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}

.hero-actions__btn-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* 立即预约按钮 */
.hero-actions__book {
    width: 5.78rem;
    height: 1.19rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .18s ease-out;
    position: relative;
}

.hero-actions__book-done {
    position: absolute;
    /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    opacity: 0;
    transition: opacity .3s ease;
}

.hero-actions__book.is-reserved .hero-actions__book-default {
    opacity: 0;
}

.hero-actions__book.is-reserved .hero-actions__book-done {
    opacity: 1;
}

.hero-actions__book:active {
    transform: scale(.96);
}

/* 报名测试按钮 */
.hero-actions__test {
    position: relative;
    width: 5.68rem;
    height: 1.19rem;
    margin-top: .41rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .18s ease-out;
}

.hero-actions__test:active {
    transform: scale(.96);
}

/* 两态图片切换：默认显示"报名测试"，隐藏"已报名" */
.hero-actions__test-done {
    position: absolute;
    /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    opacity: 0;
    transition: opacity .3s ease;
}

.hero-actions__test.is-registered .hero-actions__test-default {
    opacity: 0;
}

.hero-actions__test.is-registered .hero-actions__test-done {
    opacity: 1;
}

/* 预约奖励按钮（绝对定位于 wishlist-rail 下方） */
.hero-actions__reward {
    --hero-reward-size: 2.5rem;
    position: absolute;
    right: 0;
    /* top: calc(4.80rem + 6.88rem + .30rem); */
    top: 52%; /* iOS 13.0-13.3 兜底：不支持 clamp() */
    top: clamp(calc(4.80rem + 6.88rem + .20rem), 52%, calc(4.80rem + 6.88rem + .60rem));
    z-index: 92;
    width: var(--hero-reward-size);
    height: var(--hero-reward-size);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform .18s ease-out;
}

.hero-actions__reward-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.hero-actions__reward-img.is-fallback {
    position: absolute;
    left: calc(var(--hero-reward-size) * .116);
    top: calc(var(--hero-reward-size) * .18);
    width: calc(var(--hero-reward-size) * .836);
    height: calc(var(--hero-reward-size) * .576);
}

.hero-actions__reward:active {
    transform: scale(.94);
}

/* 短屏适配：使用 clamp 限制按钮不超出安全区域 */
.short-screen .hero-actions__reward {
    top: calc(4.80rem + 6.88rem + .30rem);
}

.very-short-screen .hero-actions__reward {
    top: calc(4.80rem + 6.88rem + .20rem);
}

/* 平板/极端宽屏适配 */
.tablet-screen .hero-actions__reward {
    top: calc(4.80rem + 6.88rem + .20rem);
}

/* 极窄屏（≤320px）缩小按钮避免溢出 */
.narrow-screen .hero-actions__reward {
    --hero-reward-size: calc(2.5rem / 1.2);
}

/* ===========================================================
 * SUPPORT 文案 + 平台图标 + 向下箭头
 * =========================================================== */
.support-platforms {
    position: absolute;
    left: 0;
    right: 0;
    /* top: 16.69rem; */
    bottom: 2.88rem;
    z-index: 90;
    display: grid;
    justify-items: center;
}

.support-platforms__title {
    margin: 0 0 .18rem;
    color: #f9c150;
    font-size: .33rem;
    font-weight: 900;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.support-platforms__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
}

/* [gap-fallback:iOS13] .support-platforms__list */
.support-platforms__list > * + * { margin-left: .3rem; }
@supports (inset-inline: 0) {
  .support-platforms__list { gap: .3rem; }
  .support-platforms__list > * + * { margin-left: 0; }
}

.support-platforms__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 .57rem;
    width: .57rem;
    height: .47rem;
}

.support-platforms__item img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.support-platforms__cue {
    display: grid;
    place-items: center;
    width: .56rem;
    height: .34rem;
    position: absolute;
    bottom: 1.73rem;
    left: 50%;
    margin-left: -.28rem;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    animation: cue-bounce 1.4s var(--ease-out) infinite;
}

.support-platforms__cue img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===========================================================
 * 菜单抽屉
 * =========================================================== */
.menu-drawer {
    position: absolute;
    /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 700;
    display: none;
    /* [ios-overflow-fix] panel 收起态 translateX(100%) 会撑大 scrollWidth，裁掉移出部分 */
    overflow: hidden;
}

.menu-drawer.is-active {
    display: block;
}

.menu-drawer__backdrop {
    position: absolute;
    /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background: rgba(0, 0, 0, .46);
    -webkit-backdrop-filter: blur(.05rem);
    backdrop-filter: blur(.05rem);
}

.menu-drawer__panel {
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
    width: 8.46rem;
    height: 100%;
    padding: 2.7rem 0 1.6rem 1.58rem;
    background: url('/m/assets/images/sidebar/bg.png') left top / 100% 100% no-repeat;
    color: #f4eee1;
    transform: translateX(100%);
    transition: transform .24s var(--ease-out);
}

.menu-drawer.is-active .menu-drawer__panel {
    transform: translateX(0);
}

.menu-drawer__menu {
    display: flex;
    flex-direction: column;
    /* gap: .3rem; */
}

.menu-drawer__item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .22rem;
    width: max-content;
    height: 1.71rem;
    padding: 0;
    color: #f4eee1;
    font-family: "HYYouYuan", "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
    font-size: .49rem;
    /* font-weight: 900; */
    line-height: 1;
    letter-spacing: -.01rem;
    white-space: nowrap;
}

/* [gap-fallback:iOS13] .menu-drawer__item */
.menu-drawer__item > * + * { margin-left: .22rem; }
@supports (inset-inline: 0) {
  .menu-drawer__item { gap: .22rem; }
  .menu-drawer__item > * + * { margin-left: 0; }
}

/* 透明点击热区扩展：仅做水平方向扩展
 * item 自身高度已是 1.71rem（与 .is-active::before 高亮框 1:1 对齐），
 * 此处 ::after 在水平方向上扩展点击区到 panel 边缘（覆盖左 padding 1.58rem 到右侧 8.64rem）。
 * z-index:-1 让其位于文字/icon 之下，不遮挡内容；
 * 点击会冒泡到 .menu-drawer__item（a/button）本身 */
.menu-drawer__item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -1.58rem;
    width: 8.64rem;
    height: 1.71rem;
    transform: translateY(-50%);
    z-index: -1;
}

.menu-drawer__item.is-active {
    padding-left: .06rem;
    color: #202428;
    z-index: 2;
}

.menu-drawer__item.is-active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -.5rem;
    transform: translateY(-50%);
    width: 8.64rem;
    height: 1.71rem;
    /* 裁掉图片左边透明斜切：放大 + 右对齐，让左边溢出被裁 */
    background: url('/m/assets/images/sidebar/selectionBox.png') no-repeat;
    background-size: calc(100% + .08rem) 100%;
    background-position: right center;
    pointer-events: none;
    z-index: -1;
}

.menu-drawer__icon {
    flex: 0 0 .47rem;
    width: .47rem;
    height: .47rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.menu-drawer__icon--home {
    background-image: url('/m/assets/images/sidebar/home.svg');
    width: .47rem;
    height: .41rem;
}

.menu-drawer__icon--test {
    background-image: url('/m/assets/images/sidebar/test.svg');
    width: .48rem;
    height: .42rem;
}

.menu-drawer__icon--spirit {
    background-image: url('/m/assets/images/sidebar/spirit.svg');
    width: .35rem;
    height: .54rem;
}

.menu-drawer__icon--points {
    background-image: url('/m/assets/images/sidebar/points.svg');
    width: .48rem;
    height: .49rem;
}

.menu-drawer__icon--news {
    background-image: url('/m/assets/images/sidebar/news.svg');
    width: .49rem;
    height: .41rem;
}

.menu-drawer__icon--creator {
    background-image: url('/m/assets/images/sidebar/creator.svg');
    width: .48rem;
    height: .42rem;
}

.menu-drawer__item.is-active .menu-drawer__icon {
    filter: brightness(0) saturate(100%);
}

.menu-drawer__label {
    font-size: .49rem;
    letter-spacing: -.01rem;
    font-family: "HYYouYuan";
    color: inherit;
}

[lang="ja"] .menu-drawer__label {
    font-family: "ja2";
}

.menu-drawer__sublist {
    display: flex;
    flex-direction: column;
    /* 设计稿: 面板宽 8.46rem - 左 padding 1.58rem - 右边距 ≈ 0.21rem = 6.67rem (= 667px) */
    width: 6.67rem;
    margin-top: 0;
    margin-left: .1rem;
    font-family: "HYYouYuan", Arial, Helvetica, sans-serif;
}

.menu-drawer__sublist a {
    display: flex;
    align-items: center;
    padding: .66rem 0;
    background-image: url('/m/assets/images/sidebar/line.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% .03rem;
    color: #c3c1b4;
    font-size: .24rem;
    font-weight: 900;
}

.menu-drawer__sublist a.is-highlight {
    color: #f9c150;
}

/* 设计稿最后一项 (CDK Redeem) 下方无线，去掉 */
.menu-drawer__sublist a:last-child {
    background-image: none;
}

[lang="ja"] .menu-drawer__item {
    font-family: "ja2", "源柔ゴシックP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
    font-size: .47rem;
    letter-spacing: 0;
}

[lang="ja"] .menu-drawer__sublist {
    font-family: "ja1", "源柔ゴシックP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}

/* 隐藏第一屏右下角 section 圆点 */
.section-dots {
    display: none !important;
}

/* ===========================================================
 * 动画
 * =========================================================== */
@keyframes cue-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(.10rem);
    }
}

@keyframes music-pulse {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.18);
    }
}