/* ==========================================================================
   云·崩异 官方云游戏 · 首屏还原
   度量基准：1920 x 1080 设计稿，1rem = 视口宽 / 1920 * 100（1920 宽时 100px）
   数值来自参考图实测（参考图 1910 x 915，全部换算成 1920 设计宽）
   ========================================================================== */

:root {
    --pad: 1.28rem;
    /* 左右安全边距：logo 左边缘 127px、图标右边缘 1781px */
    --nav-h: .81rem;
    /* 导航条高度 81px */
    --gold: #e8c37f;
    --gold-line: #d6b26e;
    --plate-ink: #3b2a10;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

* {
    box-sizing: border-box;
}

html {
    font-size: calc(100vw / 19.2);
    /* PC：1920 设计稿等比缩放 */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: #08080a;
    color: #fff;
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC",
        "Noto Sans SC", sans-serif;
    overflow: hidden;
}

/* ---------- 舞台与背景主视觉 ---------- */

.stage {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 背景层：视频按 cover 铺满，poster（首帧）兜底；上面压一层压暗遮罩 */
.kv {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #08080a url("../assets/kv-poster.jpg") center center / cover no-repeat;
}

.kv__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* 视频里有大片亮天空，右列文案与底部徽标需要压暗才看得清；
   走向照着参考图的明暗分布做：上端导航、右列文案、底部两端更暗 */
.kv__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(6, 8, 12, .52) 0%,
            rgba(6, 8, 12, .10) 26%,
            rgba(6, 8, 12, .16) 60%,
            rgba(6, 8, 12, .58) 100%),
        linear-gradient(270deg,
            rgba(6, 8, 12, .60) 0%,
            rgba(6, 8, 12, .30) 26%,
            rgba(6, 8, 12, 0) 58%);
}

/* ---------- 顶部导航 ---------- */

.nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    height: var(--nav-h);
    padding: 0 var(--pad);
    background: rgba(0, 0, 0, .50);
    -webkit-backdrop-filter: blur(.06rem);
    backdrop-filter: blur(.06rem);
}

/* 底边 1px 金线：左端隐去，右端最亮 */
.nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(214, 178, 110, 0) 0%,
            rgba(214, 178, 110, .28) 38%,
            rgba(240, 214, 150, .85) 100%);
}

.nav__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
}

/* 左上角站标：整幅「崩异」字标图，按高度定尺，宽度自适应（原图 800×453）
   图四周有透明留白，用负 margin 把墨迹拉回与右端图标同一条安全线上 */
.nav__logo {
    display: block;
    height: .52rem;
    width: auto;
    margin-left: -.08rem;
}

/* 字标旁的站名：官方字形窄高，用 scaleX 压到实测宽高 */
.nav__title {
    margin-left: .18rem;
    font-size: .38rem;
    line-height: 1;
    white-space: nowrap;
    transform: scaleX(.90);
    transform-origin: left center;
}

/* ---------- 导航菜单 ---------- */

.nav__menu {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-left: auto;
}

.nav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: .38rem;
    color: #fff;
    text-decoration: none;
    transition: color .25s var(--ease);
}

.nav__cn {
    padding-top: .025rem;
    font-size: .18rem;
    font-weight: 700;
    line-height: 1;
}

.nav__en {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .11rem;
    line-height: 1;
    letter-spacing: .004rem;
    opacity: .92;
}

/* 当前项整体放大一档 */
.nav__item.is-active .nav__cn {
    font-size: .26rem;
    letter-spacing: .01rem;
}

.nav__item.is-active .nav__en {
    font-size: .13rem;
    letter-spacing: .01rem;
}

.nav__item:hover,
.nav__item.is-active {
    color: var(--gold);
}

/* 当前项左侧的菱形刻线装饰 */
.nav__orn {
    position: absolute;
    left: -.26rem;
    top: 50%;
    width: .14rem;
    height: .44rem;
    transform: translateY(-50%);
    color: var(--gold);
    opacity: 0;
    transition: opacity .25s var(--ease);
}

.nav__item.is-active .nav__orn {
    opacity: .62;
}

.nav__orn svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- 导航右侧两个圆形按钮 ---------- */

.nav__tools {
    display: flex;
    align-items: center;
    gap: .31rem;
    margin-left: .73rem;
}

.round-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .48rem;
    height: .48rem;
    padding: 0;
    border: .025rem solid rgba(196, 163, 103, .95);
    border-radius: 50%;
    background: #060606;
    color: #fff;
    cursor: pointer;
    transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.round-btn svg {
    width: .28rem;
    height: .28rem;
}

.round-btn:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
}

/* ---------- 首屏文案 ---------- */

.hero {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.hero>* {
    pointer-events: auto;
}

/* 背后的字标水印：刻线（水平排线）填充 */
.hero__mark {
    position: absolute;
    right: 1.10rem;
    top: 2.50rem;
    width: 2.75rem;
    height: 1.50rem;
    opacity: .48;
}

/* 首屏大字标：站名文字，位置与墨高按参考图实测复原（墨高顶 154、右缘 1779） */
.hero__title {
    position: absolute;
    right: var(--pad);
    top: 1.51rem;
    margin: 0;
    font-size: .65rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transform: scaleX(.886);
    transform-origin: right center;
}

.hero__sub {
    position: absolute;
    right: var(--pad);
    top: 3.77rem;
    margin: 0;
    font-size: .175rem;
    line-height: 1;
    white-space: nowrap;
}

.hero__slogan {
    position: absolute;
    right: var(--pad);
    top: 4.21rem;
    margin: 0;
    font-size: .327rem;
    line-height: 1;
    letter-spacing: .005rem;
    word-spacing: .145rem;
    white-space: nowrap;
}

/* ---------- 「开始游戏」按钮 ---------- */

.btn-start {
    position: absolute;
    right: 1.20rem;
    bottom: .86rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.58rem;
    height: .50rem;
    text-decoration: none;
    transition: filter .25s var(--ease), transform .25s var(--ease);
}

.btn-start__plate {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.btn-start__label {
    position: relative;
    color: var(--plate-ink);
    font-size: .28rem;
    font-weight: 700;
    letter-spacing: .02rem;
    line-height: 1;
}

.btn-start:hover {
    filter: brightness(1.06) saturate(1.05);
    transform: translateY(-1px);
}

.btn-start:active {
    transform: translateY(0);
}

/* ---------- 适龄提示徽标 + 版本号 ---------- */

.badge {
    position: absolute;
    left: .77rem;
    bottom: .61rem;
    z-index: 4;
    width: .66rem;
    height: .84rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform .25s var(--ease);
}

.badge svg {
    display: block;
    width: 100%;
    height: 100%;
}

.badge:hover {
    transform: translateY(-2px);
}

.version {
    position: absolute;
    right: .05rem;
    bottom: .06rem;
    z-index: 4;
    font-size: .09rem;
    line-height: 1;
    color: rgba(255, 255, 255, .68);
    letter-spacing: .01rem;
}

/* ---------- 适龄提示弹窗 ---------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal[hidden] {
    display: none;
}

.modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.modal__panel {
    position: relative;
    width: 8.80rem;
    max-width: 92vw;
    max-height: 90vh;
    padding: .50rem .55rem .55rem;
    background: linear-gradient(180deg, #17171a 0%, #101012 100%);
    border: 1px solid rgba(214, 178, 110, .45);
    border-radius: .04rem;
    box-shadow: 0 .20rem .60rem rgba(0, 0, 0, .6);
}

.modal__close {
    position: absolute;
    top: .16rem;
    right: .16rem;
    width: .34rem;
    height: .34rem;
    padding: .05rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: border-color .2s var(--ease), color .2s var(--ease);
}

.modal__close:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.modal__close svg {
    display: block;
    width: 100%;
    height: 100%;
}

.modal__title {
    margin: 0 0 .35rem;
    font-size: .28rem;
    font-weight: 700;
    letter-spacing: .02rem;
    color: var(--gold);
}

.modal__body {
    display: flex;
    align-items: flex-start;
    gap: .38rem;
}

.modal__badge {
    flex: none;
    width: 1.00rem;
}

.modal__badge svg {
    display: block;
    width: 100%;
    height: auto;
}

.modal__badgecap {
    display: block;
    margin-top: .10rem;
    font-size: .13rem;
    line-height: 1.5;
    text-align: center;
    color: rgba(255, 255, 255, .5);
}

.modal__text {
    font-size: .17rem;
    line-height: 1.95;
    color: rgba(255, 255, 255, .86);
    max-height: 5.60rem;
    overflow-y: auto;
    padding-right: .18rem;
}

.modal__text p {
    margin: 0 0 .10rem;
}

.modal__list {
    margin: 0;
    padding-left: .30rem;
}

.modal__list li {
    margin-bottom: .12rem;
}

.modal__list li::marker {
    color: var(--gold);
    font-weight: 700;
}

.modal__foot {
    margin: .22rem 0 0;
    padding-top: .18rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .15rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .5);
}

/* 深色面板里的滚动条 */
.modal__text::-webkit-scrollbar {
    width: .06rem;
}

.modal__text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .06);
}

.modal__text::-webkit-scrollbar-thumb {
    background: rgba(214, 178, 110, .45);
    border-radius: .03rem;
}

.modal__text::-webkit-scrollbar-thumb:hover {
    background: rgba(214, 178, 110, .7);
}

/* ---------- 下载弹窗 ---------- */

.dl {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.dl[hidden] {
    display: none;
}

.dl__mask {
    position: absolute;
    inset: 0;
    background: rgba(4, 5, 8, .68);
    -webkit-backdrop-filter: blur(.06rem);
    backdrop-filter: blur(.06rem);
}

.dl__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.80rem 0 1.00rem;
}

.dl__slogan {
    margin: 0;
    font-size: .52rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: .03rem;
    color: #fff;
    text-shadow: 0 .02rem .12rem rgba(0, 0, 0, .55);
}

.dl__slogan-en {
    margin: .14rem 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .12rem;
    letter-spacing: .05rem;
    color: rgba(255, 255, 255, .72);
    text-shadow: 0 .01rem .08rem rgba(0, 0, 0, .5);
}

.dl__close {
    position: absolute;
    top: .04rem;
    right: -.52rem;
    width: .40rem;
    height: .40rem;
    padding: .06rem;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    transition: color .2s var(--ease), transform .2s var(--ease);
}

.dl__close:hover {
    color: var(--gold);
    transform: rotate(90deg);
}

.dl__close svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* 面板 + 左侧角色：角色挂在面板外，底边对齐面板底边 */
.dl__inner {
    position: relative;
    width: 8.70rem;
    margin-top: .60rem;
}

.dl__char {
    position: absolute;
    left: -2.86rem;
    bottom: 0;
    width: 3.20rem;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 .06rem .16rem rgba(0, 0, 0, .45));
}

.dl__panel {
    position: relative;
    background: #f1f0ee;
    border-radius: .06rem;
    overflow: hidden;
    box-shadow: 0 .26rem .70rem rgba(0, 0, 0, .5);
}

.dl__title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: .70rem;
    margin: 0;
    background: linear-gradient(180deg, #2c2c31 0%, #1d1d21 100%);
    color: var(--gold);
    font-size: .22rem;
    font-weight: 700;
    letter-spacing: .05rem;
}

.dl__body {
    display: flex;
    align-items: stretch;
    padding: .34rem .30rem .06rem;
}

.dl__col {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 .30rem;
}

.dl__col--cloud {
    border-left: 1px solid #dedcd8;
}

.dl__coltitle {
    margin: 0;
    font-size: .17rem;
    font-weight: 700;
    color: #2a2a2e;
}

.dl__coldesc {
    margin: .10rem 0 .22rem;
    font-size: .125rem;
    color: #8d8d93;
}

.dl__row {
    display: flex;
    align-items: flex-start;
    gap: .18rem;
}

.dl__qr {
    flex: none;
    width: 1.20rem;
    margin: 0;
}

.dl__qr img {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid #e3e1dd;
}

.dl__qr figcaption {
    margin-top: .06rem;
    padding: .045rem .02rem;
    background: #2c2c31;
    color: #e9e6e1;
    font-size: .105rem;
    text-align: center;
    letter-spacing: .01rem;
}

.dl__btns {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: .10rem;
}

.dl__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .07rem;
    height: .34rem;
    padding: 0 .06rem;
    border: 1px solid #d9d7d3;
    border-radius: .04rem;
    background: #fff;
    color: #3b3b41;
    font-size: .135rem;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}

.dl__btn svg {
    flex: none;
    width: .16rem;
    height: .16rem;
}

.dl__btn:hover {
    border-color: var(--gold);
    color: #b07f22;
    box-shadow: 0 .02rem .10rem rgba(176, 127, 34, .18);
}

.dl__foot {
    margin-top: .22rem;
    padding: .18rem .60rem .26rem;
    border-top: 1px solid #e2e0dc;
    font-size: .12rem;
    line-height: 2;
    color: #9b9b9f;
}

.dl__foot p {
    margin: 0;
}

.dl__links a {
    color: #71717a;
    text-decoration: none;
    transition: color .2s var(--ease);
}

.dl__links a:hover {
    color: #b07f22;
}

.dl__links i {
    margin: 0 .10rem;
    font-style: normal;
    color: #cfcdc9;
}

/* ---------- 轻提示 ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 1.40rem;
    z-index: 30;
    padding: .14rem .28rem;
    border: 1px solid rgba(214, 178, 110, .5);
    border-radius: .04rem;
    background: rgba(12, 12, 14, .92);
    color: var(--gold);
    font-size: .18rem;
    transform: translate(-50%, .12rem);
    opacity: 0;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.toast[hidden] {
    display: none;
}

.toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ==========================================================================
   移动端：参考图只有 PC 首屏，以下为按同一套视觉自行做的竖向适配
   ========================================================================== */

@media (max-width: 768px) {
    html {
        font-size: calc(100vw / 7.5);
        /* 750 设计稿 */
    }

    :root {
        --pad: .30rem;
        --nav-h: 1.00rem;
    }

    .nav__menu {
        display: none;
    }

    .nav__tools {
        margin-left: auto;
    }

    .nav__logo {
        height: .70rem;
        width: auto;
        margin-left: -.08rem;
    }

    .nav__title {
        font-size: .42rem;
        margin-left: .16rem;
        transform: scaleX(.86);
    }

    .round-btn {
        width: .60rem;
        height: .60rem;
        border-width: .03rem;
    }

    .round-btn svg {
        width: .30rem;
        height: .30rem;
    }

    /* 竖屏改为「贴底流式」排版：不写死 top，屏高变化时不会与按钮打架 */
    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding: 0 var(--pad) 2.40rem;
    }

    .hero__mark {
        right: .60rem;
        top: auto;
        bottom: 9.60rem;
        width: 5.00rem;
        height: 2.60rem;
    }

    .hero__title {
        position: static;
        font-size: .72rem;
        text-align: center;
        transform: scaleX(.82);
        transform-origin: center;
    }

    .hero__sub {
        position: static;
        margin-top: .46rem;
        font-size: .24rem;
        text-align: center;
    }

    .hero__slogan {
        position: static;
        margin-top: .28rem;
        font-size: .40rem;
        text-align: center;
        word-spacing: .18rem;
    }

    .btn-start {
        position: relative;
        /* 相对定位仍在文档流里，同时给内部绝对定位的底板提供包含块 */
        width: 100%;
        height: .90rem;
        margin-top: 1.00rem;
    }

    .btn-start__label {
        font-size: .34rem;
    }

    .badge {
        left: .24rem;
        bottom: .24rem;
        width: .86rem;
        height: 1.24rem;
    }

    .version {
        right: .20rem;
        bottom: .18rem;
        font-size: .20rem;
    }

    .modal__panel {
        width: 6.80rem;
        padding: .50rem .40rem;
    }

    .modal__title {
        font-size: .36rem;
    }

    /* 竖屏把徽标移到文字上方，给长文案让出整行宽度 */
    .modal__body {
        flex-direction: column;
        align-items: center;
        gap: .26rem;
    }

    .modal__text {
        font-size: .24rem;
        line-height: 1.9;
        max-height: 9.00rem;
        padding-right: .10rem;
    }

    .modal__list {
        padding-left: .40rem;
    }

    .modal__foot {
        font-size: .21rem;
    }

    .modal__badge {
        width: 1.10rem;
    }

    .modal__badgecap {
        display: none;
        /* 竖屏窄，徽标本身已写「适龄提示」，不再重复 */
    }

    /* 下载弹窗：竖屏取消左侧角色，两栏改上下，面板内滚动 */
    .dl {
        align-items: flex-start;
        padding: 0 .30rem 1.00rem;
    }

    .dl__stage {
        margin-top: 1.40rem;
        width: 100%;
    }

    .dl__slogan {
        font-size: .42rem;
        text-align: center;
    }

    .dl__slogan-en {
        font-size: .16rem;
        letter-spacing: .01rem;
        text-align: center;
    }

    .dl__close {
        top: -.90rem;
        right: .10rem;
        width: .60rem;
        height: .60rem;
    }

    .dl__inner {
        width: 100%;
        margin-top: .50rem;
    }

    .dl__char {
        display: none;
    }

    .dl__panel {
        max-height: 76vh;
        overflow-y: auto;
    }

    .dl__title {
        height: .90rem;
        font-size: .32rem;
    }

    .dl__body {
        flex-direction: column;
        padding: .30rem .30rem .10rem;
    }

    .dl__col {
        padding: 0 .10rem;
    }

    .dl__col--cloud {
        margin-top: .30rem;
        padding-top: .30rem;
        border-left: 0;
        border-top: 1px solid #dedcd8;
    }

    .dl__coltitle {
        font-size: .28rem;
    }

    .dl__coldesc {
        margin: .10rem 0 .24rem;
        font-size: .21rem;
    }

    .dl__qr {
        width: 1.80rem;
    }

    .dl__qr figcaption {
        font-size: .17rem;
    }

    .dl__btn {
        height: .56rem;
        font-size: .22rem;
        border-radius: .06rem;
    }

    .dl__btn svg {
        width: .26rem;
        height: .26rem;
    }

    .dl__foot {
        padding: .24rem .34rem .30rem;
        font-size: .19rem;
        line-height: 1.95;
    }

    .toast {
        bottom: 3.20rem;
        font-size: .26rem;
    }
}