/* 游戏资料（职业介绍）手机端排版
 * PC 端样式不在此文件改动（除视频封面基础定位，因 HTML 去掉了内联样式）
 */

/* —— 视频封面：替代原内联 style，PC/手机共用 —— */
.zy-box .skill-result .video-poster-wrapper {
    position: relative;
    display: inline-block;
}

.zy-box .skill-result .video-poster-wrapper img.btn-view-video {
    cursor: pointer;
    display: block;
}

.zy-box .skill-result .play-button-on-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.48);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.zy-box .skill-result .play-button-on-poster span {
    display: block;
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 22px solid #fff;
    margin-left: 7px;
}

/* PC：隐藏手机标题；图标文案默认不占布局 */
.gamedata-m-title {
    display: none;
}

.m-long-bg {
    display: none !important;
}

.zy-icons .tit-text {
    display: none;
}

/* PC：特点描述文字仅手机端显示；PC 仍用整图 traits.png */
.r-box-vocation-spec .vs-traits-desc {
    display: none;
}

/* PC：手机标题切图隐藏；.header 仍相对 .page-tese 绝对定位 */
.tese-m-title-img {
    display: none;
}

/* 仅 PC：包装层不占盒模型，避免打乱原纵向结构 */
@media screen and (min-width: 769px) {
    .gamedata-m-body {
        display: contents;
    }
}

@media screen and (max-width: 768px) {
    /*
     * 手机端纵向滚动：解除 PC 全屏 Swiper 的 overflow/height 锁死
     */
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #index-swiper {
        overflow: visible !important;
        position: relative;
        height: auto !important;
        min-height: 0 !important;
        background-color: #dceaf4;
    }

    #index-swiper > .swiper-wrapper {
        position: relative;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        background-color: #dceaf4;
        /* 避免残留 transform 影响滚动高度计算 */
        transform: none !important;
    }

    #index-swiper > .swiper-wrapper > .swiper-slide {
        margin: 0 !important;
        background-color: #dceaf4;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* 仅首页保持一屏高度；新闻/资料不再撑满 100vh，避免屏间露底色缝 */
    #index-swiper > .swiper-wrapper > .swiper-slide.page-home {
        min-height: 100vh !important;
    }

    .page-news,
    .page-zhiye,
    .page-tese {
        background-color: #dceaf4 !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        margin-top: -2px;
        margin-bottom: -2px;
        overflow: visible !important;
        position: relative;
        z-index: 1;
    }

    .page-news {
        background-image: url(../images/gamedata-mobile/bg-11.png?v=1) !important;
        background-position: center top !important;
    }

    /*
     * 职业区：背景挂在伪元素上，尺寸只跟视口宽走，切换职业内容变高时背景不动
     */
    .page-zhiye {
        background-image: none !important;
        background-color: #dceaf4 !important;
    }

    .page-zhiye::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: calc(100vw * 1180 / 640);
        max-height: none;
        background-image: url(../images/gamedata-mobile/bg-11.png?v=1);
        background-position: center top;
        background-size: 100% auto;
        background-repeat: no-repeat;
        z-index: 0;
        pointer-events: none;
    }

    .page-tese {
        background-image: url(../images/gamedata-mobile/bg-22.png?v=1) !important;
        background-position: center bottom !important;
    }

    .page-tese > .tese-m-title,
    .page-tese > .img-wall,
    .page-news .news-main,
    .page-zhiye > * {
        position: relative;
        z-index: 1;
    }

    /* —— 三屏统一外间距；预留顶栏 + 系统安全区 —— */
    .page-zhiye,
    .page-tese {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        padding: calc(52px + env(safe-area-inset-top, 0px)) 0 calc(36px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box;
        min-height: auto !important;
        height: auto !important;
    }

    /*
     * 各区块主标题统一尺寸与间距（含关注我们）
     * 固定 336:74 显示框，切图画布略有差异时仍完全同大
     */
    .page-zhiye .ff-m-sec-title,
    .page-zhiye .gamedata-m-title,
    .page-tese .tese-m-title,
    .page-follow .follow-m-title,
    .page-follow .ff-m-sec-title {
        display: block !important;
        position: relative;
        width: 52.5vw;
        max-width: 336px;
        aspect-ratio: 336 / 74;
        height: auto;
        margin: 10px auto 14px;
        padding: 0;
        line-height: 0;
        box-sizing: border-box;
        text-align: center;
    }

    .page-zhiye .gamedata-m-title img,
    .page-zhiye .ff-m-sec-title img,
    .page-follow .follow-m-title img,
    .page-follow .ff-m-sec-title img {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        object-fit: contain;
        object-position: center center;
    }

    .page-tese .tese-m-title .tese-m-title-img {
        display: block !important;
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        object-fit: contain;
        object-position: center center;
        z-index: 1;
    }

    .page-tese .tese-m-title .header {
        display: none !important;
    }

    /* 游戏特色内容区：给绝对定位轮播明确高度，避免区域塌缩被下一屏盖住 */
    .page-tese .img-wall {
        width: 78% !important;
        height: auto !important;
        aspect-ratio: 405 / 720;
        min-height: 58vw;
        max-height: 72vh;
        top: auto !important;
        margin: 8px auto 0 !important;
        position: relative !important;
        box-sizing: border-box;
    }

    .page-tese .img-wall-inner {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 100%;
    }

    .page-tese .img-wall-item {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    .page-tese .img-wall-item img.pc {
        display: none !important;
    }

    .page-tese .img-wall-item img.mobile {
        display: block !important;
        width: 100%;
        height: auto;
    }

    .page-tese .tese-indicator {
        position: absolute !important;
        left: 50% !important;
        top: auto !important;
        bottom: 8px !important;
        transform: translateX(-50%) !important;
        height: auto !important;
        z-index: 12;
    }

    /*
     * 左栏规格固定：不随右栏文字多少拉伸；右栏文案长短只影响自身间距
     * 定位/难度放大；职业特点缩小；定位与难度间距收紧
     */
    .page-zhiye .gamedata-m-body {
        --gd-gap: 6px;
        --gd-meta-gap: 2px;
        --gd-meta-h: 34px;
        --gd-traits-h: 20px;
        --gd-nav-gap: 8px;
        position: relative;
        display: flex !important;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px 0 6px;
        min-height: 0;
        gap: 0;
    }

    .page-zhiye .gamedata-m-body .zy-icons {
        position: relative;
        z-index: 1;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        width: 54px !important;
        max-width: 54px !important;
        min-width: 54px;
        margin: 0 !important;
        padding: 0;
        box-sizing: border-box;
        gap: var(--gd-nav-gap);
        flex: 0 0 54px;
        align-self: flex-start;
        height: auto !important;
    }

    .page-zhiye .zy-icon-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        flex: 0 0 auto;
    }

    .page-zhiye .zy-icons .zy-icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        border-radius: 50%;
        filter: grayscale(1) brightness(0.85);
        opacity: 0.72;
        transition: filter 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    }

    .page-zhiye .zy-icons .zy-icon.active,
    .page-zhiye .zy-icons .zy-icon:active {
        filter: none;
        opacity: 1;
        box-shadow: 0 0 12px 3px rgba(255, 160, 140, 0.6);
    }

    .page-zhiye .zy-icons .tit-text {
        display: block;
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.15;
        color: #9aa0a6;
        text-align: center;
        white-space: nowrap;
    }

    .page-zhiye .zy-icons .tit-text.active {
        color: #4a7eb8;
        font-weight: 500;
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
    }

    .page-zhiye .gamedata-m-body .zy-box {
        position: relative !important;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--gd-gap);
        flex: 1 1 auto;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0;
        min-width: 0;
        margin: 0 0 0 8px !important;
        padding: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    /* 立绘：通栏，左右齐定位～难度 */
    .page-zhiye .zy-box .l-box {
        width: 100% !important;
        flex: 0 0 auto;
        max-height: none;
        min-height: 0;
        height: auto;
        margin: 0 !important;
        padding: 0;
        line-height: 0;
        display: block;
        align-self: stretch;
    }

    .page-zhiye .zy-box .l-box img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: left top;
        margin: 0;
    }

    .page-zhiye .zy-box .r-box {
        width: 100% !important;
        flex: 0 0 auto;
        min-width: 0;
        min-height: 0;
        height: auto;
        margin: 0 !important;
        padding: 0;
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: visible;
        align-self: stretch;
    }

    .page-zhiye.is-vocation-spec .r-box-dynamic {
        display: none !important;
    }

    .page-zhiye.is-vocation-spec .r-box-vocation-spec {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "meta meta"
            "traits-label traits-label"
            "traits-desc traits-desc"
            "stats stats";
        align-items: stretch;
        justify-items: stretch;
        column-gap: var(--gd-gap);
        row-gap: var(--gd-gap);
        width: 100% !important;
        max-width: 100%;
        height: auto;
        min-height: 0;
        box-sizing: border-box;
        text-align: left;
        margin: 0;
        padding: 0;
    }

    .page-zhiye .r-box-vocation-spec .vs-tit {
        display: none !important;
    }

    .page-zhiye.spec-blade .r-box-vocation-spec .vs-tit,
    .page-zhiye.spec-element .r-box-vocation-spec .vs-tit,
    .page-zhiye.spec-spirit .r-box-vocation-spec .vs-tit,
    .page-zhiye.spec-guardian .r-box-vocation-spec .vs-tit,
    .page-zhiye.spec-violence .r-box-vocation-spec .vs-tit,
    .page-zhiye.spec-ranger .r-box-vocation-spec .vs-tit,
    .page-zhiye.spec-stealth .r-box-vocation-spec .vs-tit {
        margin-left: 0 !important;
    }

    .page-zhiye .r-box-vocation-spec .vs-stage {
        display: contents;
        position: static;
        width: auto !important;
        margin: 0;
    }

    .page-zhiye .r-box-vocation-spec .vs-meta {
        grid-area: meta;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--gd-meta-gap);
        width: 100% !important;
        max-width: 100%;
        height: var(--gd-meta-h) !important;
        min-height: var(--gd-meta-h);
        margin: 0;
        padding: 0;
        align-self: stretch;
        justify-self: stretch;
        box-sizing: border-box;
    }

    .page-zhiye .r-box-vocation-spec .vs-position,
    .page-zhiye .r-box-vocation-spec .vs-difficulty {
        /* 统一按 222×44 基准框显示，各职业切图字号视觉一致 */
        width: calc(var(--gd-meta-h) * 222 / 44) !important;
        max-width: calc((100% - var(--gd-meta-gap)) / 2) !important;
        flex: 0 0 auto;
        height: var(--gd-meta-h) !important;
        max-height: var(--gd-meta-h) !important;
        object-fit: fill !important;
        object-position: left center;
        display: block;
        margin: 0 !important;
    }

    .page-zhiye .r-box-vocation-spec .vs-difficulty {
        object-position: right center;
        margin-left: auto !important;
        object-fit: contain !important;
        width: auto !important;
        max-width: calc((100% - var(--gd-meta-gap)) / 2) !important;
    }

    /* 职业特点：标题切图略小于定位/难度；描述为文字 */
    .page-zhiye .r-box-vocation-spec .vs-traits {
        grid-area: traits-label;
        width: auto !important;
        max-width: 38% !important;
        height: var(--gd-traits-h) !important;
        max-height: var(--gd-traits-h) !important;
        min-height: var(--gd-traits-h);
        margin: 0 !important;
        padding: 0;
        object-fit: contain !important;
        object-position: left center;
        display: block;
        align-self: start;
        justify-self: start;
    }

    .page-zhiye .r-box-vocation-spec .vs-traits-desc {
        grid-area: traits-desc;
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 12px;
        line-height: 1.45;
        color: #3a4a5c;
        text-align: left;
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.85);
        word-break: break-word;
        align-self: start;
        justify-self: stretch;
        /* 文案长短只撑开右栏，不回写左栏间距；切图高度仍固定 */
        height: auto;
        min-height: 0;
    }

    .page-zhiye .r-box-vocation-spec .vs-preview {
        display: none !important;
    }

    .page-zhiye .r-box-vocation-spec .vs-stats {
        grid-area: stats;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        max-height: none;
        aspect-ratio: 513 / 204;
        margin: 0 !important;
        padding: 0;
        object-fit: contain;
        object-position: left bottom;
        display: block;
        align-self: end;
        justify-self: stretch;
    }

    /* 覆盖 PC 端按职业写死的 rem 宽高，统一手机端显示尺寸 */
    .page-zhiye.spec-blade .vs-stage,
    .page-zhiye.spec-blade .vs-traits,
    .page-zhiye.spec-element .vs-stage,
    .page-zhiye.spec-element .vs-traits,
    .page-zhiye.spec-spirit .vs-stage,
    .page-zhiye.spec-spirit .vs-traits,
    .page-zhiye.spec-guardian .vs-stage,
    .page-zhiye.spec-guardian .vs-traits,
    .page-zhiye.spec-violence .vs-stage,
    .page-zhiye.spec-violence .vs-traits,
    .page-zhiye.spec-ranger .vs-stage,
    .page-zhiye.spec-ranger .vs-traits,
    .page-zhiye.spec-stealth .vs-stage,
    .page-zhiye.spec-stealth .vs-traits {
        width: auto !important;
        max-width: 38% !important;
    }

    .page-zhiye.spec-blade .vs-traits,
    .page-zhiye.spec-element .vs-traits,
    .page-zhiye.spec-spirit .vs-traits,
    .page-zhiye.spec-guardian .vs-traits,
    .page-zhiye.spec-violence .vs-traits,
    .page-zhiye.spec-ranger .vs-traits,
    .page-zhiye.spec-stealth .vs-traits,
    .page-zhiye .r-box-vocation-spec .vs-traits {
        height: var(--gd-traits-h) !important;
        max-height: var(--gd-traits-h) !important;
    }

    .page-zhiye.spec-spirit .vs-meta,
    .page-zhiye.spec-stealth .vs-meta {
        width: 100% !important;
    }

    .page-zhiye.spec-spirit .vs-position,
    .page-zhiye.spec-guardian .vs-position,
    .page-zhiye.spec-violence .vs-position,
    .page-zhiye.spec-ranger .vs-position,
    .page-zhiye.spec-stealth .vs-position,
    .page-zhiye.spec-blade .vs-position,
    .page-zhiye.spec-element .vs-position,
    .page-zhiye .r-box-vocation-spec .vs-position {
        width: calc(var(--gd-meta-h) * 222 / 44) !important;
        max-width: calc((100% - var(--gd-meta-gap)) / 2) !important;
        height: var(--gd-meta-h) !important;
        max-height: var(--gd-meta-h) !important;
        object-fit: fill !important;
    }

    .page-zhiye .r-box-vocation-spec .vs-difficulty {
        width: auto !important;
        max-width: calc((100% - var(--gd-meta-gap)) / 2) !important;
        height: var(--gd-meta-h) !important;
        max-height: var(--gd-meta-h) !important;
        object-fit: contain !important;
    }

    .page-zhiye.is-vocation-spec .zy-box .r-box,
    .page-zhiye.spec-spirit .zy-box .r-box,
    .page-zhiye.spec-spirit .r-box-vocation-spec {
        width: 100% !important;
    }

    .page-zhiye .r-box-dynamic .skill-result {
        display: none !important;
    }
}