/**
 * 移动端适配样式
 * 策略：将根容器旋转90度并对调宽高，使横屏PC端页面在竖屏移动设备上正确显示
 * 
 * 重要概念：
 * - 旋转后，视觉上的"宽度"对应旋转前的"高度"（使用vh）
 * - 旋转后，视觉上的"高度"对应旋转前的"宽度"（使用vw）
 * - CSS变量用于统一管理这种对调关系
 */

/* 检测移动设备 - 屏幕宽度小于768px或高度大于宽度时（竖屏移动设备） */
@media screen and (max-width: 768px),
screen and (max-aspect-ratio: 1/1) {

    /* 防止body溢出 */
    html,
    body {
        width: 100%;
        height: 100dvh;
        /* 使用动态视口高度，排除浏览器UI */
        overflow: hidden;
        position: fixed;
        margin: 0;
        padding: 0;
    }

    /* 定义CSS变量 - 旋转后的视觉单位
     * 使用 dvh/dvw (dynamic viewport units) 而不是 vh/vw
     * dvh/dvw 只计算浏览器可用区域，会排除地址栏等UI元素
     * --visual-vw: 视觉上的1vw = 物理上的1dvh（因为旋转了90度）
     * --visual-vh: 视觉上的1vh = 物理上的1dvw
     */
    :root {
        --visual-vw: 1dvh;
        --visual-vh: 1dvw;
    }

    /* 主容器旋转和尺寸调整 */
    #all {
        /* 旋转90度 */
        transform: rotate(90deg);
        transform-origin: center center;

        /* 对调宽高 - 使用动态视口单位
         * 宽度使用100dvh（浏览器可用高度），高度使用100dvw（浏览器可用宽度） */
        width: 100dvh;
        height: 100dvw;

        /* 居中定位 */
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: calc(-50dvw);
        /* -高度的一半 */
        margin-left: calc(-50dvh);
        /* -宽度的一半 */

        overflow: hidden;
    }

    /* Swiper容器适配 */
    .swiper.mySwiper.swiperBG {
        width: 100%;
        height: 100%;
    }

    .head-logo {
        width: calc(16 * var(--visual-vw));
        /* 16vw的视觉效果 */
        top: 0;
        /* 确保紧贴顶部 */
        left: 0;
        /* 确保紧贴左侧 */
    }

    /* 底部按钮适配 */
    .bottom {
        width: 100%;
        bottom: calc(2 * var(--visual-vh)) !important;
        /* 重置底部位置，2vh的视觉效果 */
    }

    .bottom-arrow {
        width: calc(8 * var(--visual-vw));
        /* 8vw的视觉效果 */
        height: auto;
    }

    /* 确保视频背景正确填充 */
    .background-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 角色展示页面适配 */
    .character-left {
        width: calc(16 * var(--visual-vw));
        /* 16vw的视觉效果 - 缩小bar宽度 */
        height: calc(65 * var(--visual-vh));
        /* 65vh的视觉效果 - 增大bar高度 */
        left: calc(1 * var(--visual-vw));
        /* 1vw的视觉效果 */
        bottom: 15%;
        /* 调整底部位置 */
        pointer-events: auto !important;
        /* 确保可以接收触摸事件 */
        z-index: 101 !important;
        /* 提高z-index,确保在head之上 */
    }

    /* 左侧角色图片大小适配 */
    .character-left img {
        height: 4.5rem !important;
        /* 缩小图片高度 */
        object-fit: contain !important;
        /* 使用contain以保持完整性 */
    }

    /* 角色图片激活状态的位移调整 */
    .character-left .swiper-slide-active img,
    .character-left .swiper-slide-duplicate-active img {
        transform: translateX(1.2rem) !important;
        /* 减小位移量 */
    }

    /* 角色轮播容器内部间距调整 - 通过调整每个slide的高度和padding来减小间距 */
    .characterpc .swiper-slide {
        height: 4.8rem !important;
        /* 设置固定高度，略大于图片高度 */
        padding: 0.15rem 0 !important;
        /* 上下各0.15rem的间距 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .character-right {
        width: 75%;
        height: 100%;
    }

    .character-right-right {
        width: calc(45 * var(--visual-vw)) !important;
        /* 45vw的视觉效果 - 略微缩小 */
    }

    /* 角色信息容器适配 */
    .character-info-container {
        height: calc(18 * var(--visual-vw)) !important;
        /* 18vw的视觉效果 - 增加高度以容纳文字 */
        bottom: 8% !important;
        /* 调整底部位置 */
        padding: 1.5vh 1.5vw 1.5vh 1.5vw !important;
        /* 调整内边距 */
    }

    /* 角色名称容器适配 */
    .role-name-container {
        top: 8% !important;
        /* 调整顶部位置 */
        right: 15% !important;
        /* 调整右侧位置 */
        gap: calc(0.8 * var(--visual-vw)) !important;
        /* 缩小间距 */
    }

    /* 角色名称适配 */
    .role-name {
        font-size: calc(5.6 * var(--visual-vw)) !important;
        /* 5.6vw的视觉效果 - 放大一倍 */
    }

    /* 语音图标适配 */
    .voice-icon {
        width: calc(4.4 * var(--visual-vw)) !important;
        /* 4.4vw的视觉效果 - 放大一倍 */
        margin-top: calc(1.2 * var(--visual-vw)) !important;
        /* 1.2vw的视觉效果 - 放大一倍 */
    }

    /* 角色台词文字适配 */
    .character-right-right-str {
        font-size: 1.1rem !important;
        /* 缩小文字大小 */
        line-height: 1.5rem !important;
        /* 调整行高 */
        top: 35% !important;
        /* 调整顶部位置 */
        left: 15% !important;
        /* 调整左侧位置 */
        width: 60% !important;
        /* 增加宽度 */
        padding: calc(0.8 * var(--visual-vw)) !important;
        /* 减小内边距 */
    }

    /* 画廊展示适配 */
    .gallery-showcase-main {
        width: calc(60 * var(--visual-vw));
        height: calc(36 * var(--visual-vw));
        top: 12%;
    }

    .gallery-showcase-navigation {
        bottom: calc(5 * var(--visual-vw));
    }

    /* 背景故事适配 */
    .backstory-main-image {
        width: calc(70 * var(--visual-vw));
        height: calc(48 * var(--visual-vw));
        top: 15%;
    }

    .backstory-navigation {
        bottom: calc(5 * var(--visual-vw));
    }

    /* 登录容器适配 - 旋转后需要对调宽高概念 */
    .login-container {
        width: calc(68 * var(--visual-vw));
        /* 68vw的视觉效果 */
        height: calc(11 * var(--visual-vw));
        /* 11vw的视觉效果 */
        left: calc(50 * var(--visual-vw));
        /* 水平居中 - 使用视觉宽度单位 */
    }

    /* 登录规则框字体大小适配 */
    .login-container .rule-box {
        font-size: calc(1.25 * var(--visual-vw));
        /* 1.25vw的视觉效果 */
        gap: calc(5 * var(--visual-vw));
        /* 5vw的视觉效果 */
    }

    .login-container .rule-box input[type="checkbox"] {
        width: calc(1.5 * var(--visual-vw));
        /* 1.5vw的视觉效果 */
        height: calc(1.5 * var(--visual-vw));
        /* 1.5vw的视觉效果 */
    }

    /* 奖励页面适配 */
    .top2 {
        transform: translateY(-8%);
        /* 向上移动8%，确保整体居中 */
    }

    .rewardlogo {
        margin-top: 0 !important;
        /* 移除原有的上边距 */
    }

    .rewardlogo img {
        width: calc(36 * var(--visual-vw)) !important;
        /* 36vw的视觉效果 */
    }

    .itme-list li {
        width: calc(10 * var(--visual-vw)) !important;
        /* 10vw的视觉效果 */
        margin-right: calc(2 * var(--visual-vw));
        /* 调整间距 */
    }

    .itme-list2 li {
        width: calc(10 * var(--visual-vw)) !important;
        /* 10vw的视觉效果 */
        margin-right: calc(2 * var(--visual-vw));
        /* 调整间距 */
    }

    /* 按钮适配 */
    button.fn-skip-detail,
    button.fn-skip-detail-1 {
        width: calc(18.6 * var(--visual-vw)) !important;
        /* 18.6vw的视觉效果 */
    }

    /* 视频容器适配 */
    .gallery-video {
        width: calc(48 * var(--visual-vw)) !important;
        /* 48vw的视觉效果 */
        height: calc(28.8 * var(--visual-vw)) !important;
        /* 28.8vw的视觉效果 */
    }

    /* 隐藏视频原生控制条，保留自定义播放按钮 */
    #customVideo::-webkit-media-controls {
        display: none !important;
    }

    #customVideo::-webkit-media-controls-enclosure {
        display: none !important;
    }

    #customVideo::-moz-media-controls {
        display: none !important;
    }

    #customVideo {
        /* 移除controls属性的效果 */
        -webkit-appearance: none;
        appearance: none;
    }

    /* 确保自定义播放按钮可见且可点击 */
    .video-play-btn {
        display: flex !important;
        pointer-events: auto !important;
        z-index: 10 !important;
    }

    /* BGM控制按钮适配 */
    .bgm-control {
        top: calc(26 * var(--visual-vh));
        /* 26vh的视觉效果 - 位于dialog下方 */
        right: 20px;
    }

    /* 导航菜单间距适配 */
    .h-con-right-l {
        gap: calc(2 * var(--visual-vw));
        /* 2vw的视觉效果 */
    }

    /* 确保所有PC标识的元素显示 */
    .pc {
        display: flex !important;
    }

    /* 隐藏mobile标识的元素 */
    .mobile {
        display: none !important;
    }

    /* slide2需要根据预注册状态动态控制，不强制显示 */
    #slide2.pc {
        display: flex;
    }

    /* 移动端彻底隐藏statement页脚 */
    .statement.pc {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 移动端禁止游戏启动按钮点击 */
    button.fn-skip-detail,
    button.fn-skip-detail-1 {
        pointer-events: none !important;
        cursor: not-allowed !important;
    }

    /* 图片预览弹层适配 */
    .image-preview {
        position: fixed;
        inset: 0;
    }

    /* 强制横屏提示（可选）*/
    body::before {
        content: '';
        display: none;
    }

    /* Logo尺寸微调 */
    .loadingImg {
        width: calc(20 * var(--visual-vw)) !important;
    }

    /* Twitter图标适配 */
    .twitter-logo {
        width: 32px;
        height: 32px;
        margin-right: calc(2 * var(--visual-vw));
    }

    /* 对话框图片适配 - 向下移动避免遮挡菜单栏 */
    .h-con-right img[src*="dialog.png"] {
        width: calc(25 * var(--visual-vw)) !important;
        top: calc(16 * var(--visual-vh)) !important;
        right: 5px;
    }

    /* Swiper高度适配 */
    .swiper {
        height: calc(96 * var(--visual-vh)) !important;
    }

    /* 如果设备处于横屏模式，则取消旋转 */
    @media screen and (orientation: landscape) {
        :root {
            /* 横屏时重置CSS变量，使用动态视口单位 */
            --visual-vw: 1dvw;
            --visual-vh: 1dvh;
        }

        #all {
            transform: none;
            width: 100dvw;
            height: 100dvh;
            top: 0;
            left: 0;
            margin: 0;
        }

        /* 横屏时重置底部箭头位置 */
        .bottom {
            bottom: calc(2 * var(--visual-vh)) !important;
        }

        /* 横屏时重置头部导航栏对齐方式 */
        .head {
            align-items: flex-start;
            padding-top: 0;
        }

        /* 横屏时确保Logo大小和位置正确 */
        .h-con-left {
            align-items: flex-start;
            margin-top: 0;
            padding-top: 0;
        }

        .h-con-left h1 {
            height: auto;
            align-items: flex-start;
            margin: 0;
            padding: 0;
        }

        .h-con-left img {
            width: 16vw;
            top: 0;
            left: 0;
        }
    }
}

/* 针对小屏幕移动设备的额外优化 */
@media screen and (max-width: 480px) {

    /* 调整字体大小，确保可读性 */
    .div-head-text {
        font-size: 1.2rem;
    }

    /* 小屏幕角色左侧bar进一步缩小 */
    .character-left {
        width: calc(14 * var(--visual-vw)) !important;
        /* 14vw的视觉效果 */
        height: calc(60 * var(--visual-vh)) !important;
        /* 60vh的视觉效果 - 增大高度 */
        pointer-events: auto !important;
        /* 确保可以接收触摸事件 */
    }

    /* 小屏幕角色图片进一步缩小 */
    .character-left img {
        height: 3.8rem !important;
        /* 进一步缩小图片 */
    }

    /* 小屏幕角色轮播容器内部间距调整 */
    .characterpc .swiper-slide {
        height: 4.1rem !important;
        /* 设置更小的固定高度 */
        padding: 0.15rem 0 !important;
        /* 保持相同的上下间距 */
    }

    /* 调整角色名称大小 - 使用视觉单位 */
    .role-name {
        font-size: calc(4.8 * var(--visual-vw)) !important;
        /* 4.8vw - 放大一倍 */
    }

    /* 小屏幕语音图标放大一倍 */
    .voice-icon {
        width: calc(3.6 * var(--visual-vw)) !important;
        /* 3.6vw的视觉效果 - 放大一倍 */
        margin-top: calc(1.0 * var(--visual-vw)) !important;
        /* 放大一倍 */
    }

    /* 调整角色描述文字大小 */
    .character-right-right-str {
        font-size: 0.95rem !important;
        /* 进一步缩小 */
        line-height: 1.35rem !important;
        /* 调整行高 */
    }

    /* 小屏幕角色信息容器调整 */
    .character-info-container {
        height: calc(20 * var(--visual-vw)) !important;
        /* 增加高度 */
        bottom: 6% !important;
    }

    /* 角色右侧容器宽度调整 */
    .character-right-right {
        width: calc(48 * var(--visual-vw)) !important;
        /* 增加宽度 */
    }

    /* 调整头部导航栏对齐方式 */
    .head {
        align-items: flex-start !important;
        /* 顶部对齐 */
        padding-top: 0 !important;
    }

    /* 调整头部Logo大小 - 使用视觉单位 */
    .h-con-left {
        align-items: flex-start !important;
        /* 顶部对齐 */
        margin-top: 0 !important;
        /* 移除上边距 */
        padding-top: 0 !important;
        /* 移除顶部内边距 */
    }

    .h-con-left h1 {
        height: auto !important;
        /* 移除固定高度 */
        align-items: flex-start !important;
        /* 顶部对齐 */
        margin: 0 !important;
        padding: 0 !important;
    }

    .h-con-left img {
        width: calc(18 * var(--visual-vw)) !important;
        top: 0 !important;
        /* 确保紧贴顶部 */
        left: 0 !important;
        /* 确保紧贴左侧 */
    }

    /* 调整BGM控制按钮大小 */
    .bgm-control img {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* 横屏移动设备（已经是横屏，无需旋转）*/
@media screen and (max-width: 926px) and (orientation: landscape) {
    :root {
        /* 横屏时不需要对调，重置CSS变量，使用动态视口单位 */
        --visual-vw: 1dvw;
        --visual-vh: 1dvh;
    }

    html,
    body {
        width: 100%;
        height: 100dvh;
        overflow: hidden;
    }

    #all {
        transform: none;
        width: 100dvw;
        height: 100dvh;
        position: relative;
        top: auto;
        left: auto;
        margin: 0;
    }

    /* 微调导航栏在小屏横屏设备上的显示 */
    .h-con-right-l {
        gap: 1.5vw;
    }

    .div-head-text {
        font-size: 1.2rem;
    }

    /* 调整角色展示区域 */
    .character-right-right-str {
        font-size: 1.3rem;
    }

    /* 横屏时重置底部箭头位置 */
    .bottom {
        bottom: 2vh !important;
    }

    /* 横屏时重置头部导航栏对齐方式 */
    .head {
        align-items: flex-start;
        padding-top: 0;
    }

    /* 横屏时确保Logo大小和位置正确 */
    .h-con-left {
        align-items: flex-start;
        margin-top: 0;
        padding-top: 0;
    }

    .h-con-left h1 {
        height: auto;
        align-items: flex-start;
        margin: 0;
        padding: 0;
    }

    .h-con-left img {
        width: 16vw;
        top: 0;
        left: 0;
    }
}

/* 平板设备适配（768px-1024px）*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* 如果是竖屏平板，应用旋转 */
    @media (orientation: portrait) {
        :root {
            /* 竖屏平板需要对调视觉单位，使用动态视口单位 */
            --visual-vw: 1dvh;
            --visual-vh: 1dvw;
        }

        #all {
            transform: rotate(90deg);
            transform-origin: center center;
            width: 100dvh;
            height: 100dvw;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: calc(-50dvw);
            margin-left: calc(-50dvh);
        }
    }

    /* 如果是横屏平板，无需旋转，但需要微调样式 */
    @media (orientation: landscape) {
        :root {
            /* 横屏平板不需要对调，使用动态视口单位 */
            --visual-vw: 1dvw;
            --visual-vh: 1dvh;
        }

        .h-con-right-l {
            gap: 1.8dvw;
        }

        .div-head-text {
            font-size: 1.3rem;
        }

        /* 横屏平板重置底部箭头位置 */
        .bottom {
            bottom: 2vh !important;
        }

        /* 横屏平板重置头部导航栏对齐方式 */
        .head {
            align-items: flex-start;
            padding-top: 0;
        }

        /* 横屏平板确保Logo大小和位置正确 */
        .h-con-left {
            align-items: flex-start;
            margin-top: 0;
            padding-top: 0;
        }

        .h-con-left h1 {
            height: auto;
            align-items: flex-start;
            margin: 0;
            padding: 0;
        }

        .h-con-left img {
            width: 16vw;
            top: 0;
            left: 0;
        }
    }
}

/* 旋转提示（可选功能）- 当用户旋转设备时提供视觉反馈 */
@keyframes rotateHint {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* 为旋转的容器添加平滑过渡效果 */
#all {
    transition: transform 0.3s ease-in-out;
}

/* 移动端禁用某些PC端特效 */
@media screen and (max-width: 768px),
screen and (max-aspect-ratio: 1/1) {

    /* 简化动画以提升性能 */
    .animate__animated {
        animation-duration: 0.5s !important;
    }

    /* 减少模糊效果（如果有的话） */
    .backdrop-blur {
        backdrop-filter: none;
    }

    /* 优化transform性能 */
    * {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* 确保在移动端禁用某些hover效果以提升性能 */
@media (hover: none) and (pointer: coarse) {

    .div-center:hover div,
    .voice-icon:hover,
    .bgm-control:hover,
    .bottom-arrow:hover {
        /* 移动设备上禁用hover效果 */
        transform: none;
    }

    /* 但保持点击效果 */
    .div-center:active div {
        color: red;
    }

    .voice-icon:active,
    .bgm-control:active {
        transform: scale(1.1);
    }
}

/* 移动端触摸优化 */
@media screen and (max-width: 768px) {

    /* 增大可点击区域 */
    .div-center,
    .voice-icon,
    .bgm-control,
    .bottom-arrow {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* 防止长按时的上下文菜单 */
    img {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* 优化滚动性能 */
    .character-right-right-str {
        -webkit-overflow-scrolling: touch;
    }

    /* Swiper容器触摸优化 */
    .swiper.mySwiper.swiperBG {
        touch-action: pan-y;
        /* 允许垂直滑动 */
    }

    /* 确保视频容器不干扰滑动 */
    .background-video,
    .slide3-background-video,
    .character-background-video {
        pointer-events: none;
        /* 视频不捕获触摸事件 */
    }

    /* 视频页面的视频需要可点击 */
    #customVideo {
        pointer-events: auto !important;
    }

    /* 视频播放按钮需要捕获点击 */
    .video-play-btn {
        pointer-events: auto;
        z-index: 10;
    }

    /* 确保导航按钮可点击 */
    .div-centerpc {
        pointer-events: auto;
        z-index: 101;
    }

    /* 角色左侧区域触摸优化 */
    .character-left {
        touch-action: pan-y;
        /* 允许垂直滑动 */
        -webkit-overflow-scrolling: touch;
    }

    /* 角色轮播触摸优化 */
    .characterpc {
        touch-action: pan-y;
    }

    /* 角色轮播图片可拖动 */
    .characterpc .swiper-slide img {
        user-select: none;
        -webkit-user-drag: none;
    }

    /* 画廊和背景故事轮播触摸优化 */
    #galleryShowcaseSwiper,
    #pcbackstory {
        touch-action: pan-x;
        /* 允许横向滑动 */
    }

    /* 缩略图导航区域可以点击但不干扰滑动 */
    .gallery-showcase-navigation,
    .backstory-navigation {
        pointer-events: auto;
        z-index: 100;
    }

    /* 缩略图可以点击 */
    .gallery-showcase-nav-img,
    .backstory-nav-img,
    .backstory-nav-arrow {
        pointer-events: auto;
    }

    /* 年龄认证移动端优化 - 缩小内容间距 */
    .common-age-verification {
        padding-top: calc(10 * var(--visual-vh)) !important;
        /* 10vh的视觉效果 - 减少顶部内边距 */
    }

    .common-age-verification-heading {
        font-size: calc(3 * var(--visual-vw)) !important;
        /* 3vw的视觉效果 */
        margin-top: calc(4 * var(--visual-vh)) !important;
        /* 4vh的视觉效果 - 减少顶部外边距 */
    }

    .common-age-verification-description {
        font-size: calc(2 * var(--visual-vw)) !important;
        /* 2vw的视觉效果 */
        line-height: 1.6 !important;
        /* 减少行高 */
        margin: calc(3 * var(--visual-vh)) 0 !important;
        /* 3vh的视觉效果 - 减少上下外边距 */
    }

    .common-age-verification-button {
        width: calc(32 * var(--visual-vw)) !important;
        /* 32vw的视觉效果 */
        height: calc(7 * var(--visual-vw)) !important;
        /* 7vw的视觉效果 */
        line-height: calc(7 * var(--visual-vw)) !important;
        /* 与高度一致 */
        font-size: calc(2.4 * var(--visual-vw)) !important;
        /* 2.4vw的视觉效果 */
        border-radius: calc(3.5 * var(--visual-vw)) !important;
        /* 保持圆角比例 */
    }

    .common-age-verification-button+.common-age-verification-button {
        margin-top: calc(2.5 * var(--visual-vh)) !important;
        /* 2.5vh的视觉效果 - 减少按钮间距 */
    }
}