/* ====== 基础重置与全局样式 ====== */
:root {
    /* 基础字体大小 */
    --font-size-base: 16px;
    
    /* 断点定义 */
    --breakpoint-xs: 360px;    /* 超小屏幕 */
    --breakpoint-sm: 480px;    /* 小手机 */
    --breakpoint-md: 768px;    /* 平板/大屏手机 */
    --breakpoint-lg: 1024px;   /* 小笔记本 */
    --breakpoint-xl: 1200px;   /* 桌面端 */
    
    /* 触控最小尺寸 */
    --touch-min-size: 44px;
}

/* ====== 响应式字体大小 ====== */
@media (max-width: 768px) {
    :root {
        --font-size-base: 14px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-base: 13px;
    }
}

@media (max-width: 360px) {
    :root {
        --font-size-base: 12px;
    }
}

/* ====== 触控区域优化（仅移动端） ====== */
@media (max-width: 768px) {
    .touch-target {
        min-width: var(--touch-min-size);
        min-height: var(--touch-min-size);
    }

    /* 按钮触控优化 */
    button.touch-target,
    a.touch-target,
    input.touch-target,
    select.touch-target {
        min-width: var(--touch-min-size);
        min-height: var(--touch-min-size);
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
}

/* ====== 响应式布局辅助类 ====== */
/* 隐藏在移动端 */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* 隐藏在桌面端 */
@media (min-width: 769px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* 仅在横屏显示 */
@media (orientation: portrait) {
    .hide-on-portrait {
        display: none !important;
    }
}

/* 仅在竖屏显示 */
@media (orientation: landscape) {
    .hide-on-landscape {
        display: none !important;
    }
}

/* ====== 安全区域适配 ====== */
.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right);
}

/* 固定定位安全区域 */
.fixed-safe-top {
    top: env(safe-area-inset-top);
}

.fixed-safe-bottom {
    bottom: env(safe-area-inset-bottom);
}

.fixed-safe-left {
    left: env(safe-area-inset-left);
}

.fixed-safe-right {
    right: env(safe-area-inset-right);
}



/* ====== 移动端特定样式 ====== */
@media (max-width: 768px) {
    /* 优化移动端滚动体验 */
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* 优化表单控件 */
    input,
    select,
    textarea {
        font-size: 1rem;
        padding: 0.75rem;
        border-radius: 8px;
    }
    
    /* 优化链接点击区域 */
    a {
        min-height: var(--touch-min-size);
        display: inline-flex;
        align-items: center;
    }
    
    /* ====== 主页6个功能按钮尺寸统一化 ====== */
    /* 按钮容器布局调整 */
    .btn-group {
        gap: 1.5rem !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .btn-group-left,
    .btn-group-right {
        gap: 1.5rem !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* 所有功能按钮统一尺寸 */
    .btn-group .btn {
        width: 100% !important;
        max-width: 280px !important;
        min-width: 180px !important;
        min-height: 56px !important;
        height: auto !important;
        padding: 0.9rem 1.8rem !important;
        margin: 0 !important;
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
        border-radius: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    /* 移除右侧按钮特殊样式干扰 */
    .btn-group-right .btn {
        min-width: 180px !important;
        white-space: normal !important;
        padding: 0.9rem 1.8rem !important;
        font-size: 1.15rem !important;
    }
}

/* ====== 小屏幕优化 (≤480px) ====== */
@media (max-width: 480px) {
    .btn-group {
        gap: 1.2rem !important;
    }
    
    .btn-group-left,
    .btn-group-right {
        gap: 1.2rem !important;
    }
    
    .btn-group .btn {
        max-width: 240px !important;
        min-width: 160px !important;
        min-height: 52px !important;
        padding: 0.85rem 1.5rem !important;
        font-size: 1.05rem !important;
    }
}

/* ====== 超小屏幕优化 (≤360px) ====== */
@media (max-width: 360px) {
    .btn-group {
        gap: 1rem !important;
    }
    
    .btn-group-left,
    .btn-group-right {
        gap: 1rem !important;
    }
    
    .btn-group .btn {
        max-width: 220px !important;
        min-width: 140px !important;
        min-height: 48px !important;
        padding: 0.8rem 1.2rem !important;
        font-size: 1rem !important;
    }
}

/* ====== 横屏模式按钮优化 ====== */
@media (max-height: 500px) and (orientation: landscape) {
    .btn-group {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.8rem !important;
    }
    
    .btn-group-left,
    .btn-group-right {
        flex-direction: row !important;
        gap: 0.8rem !important;
    }
    
    .btn-group .btn {
        max-width: 140px !important;
        min-width: 100px !important;
        min-height: 44px !important;
        padding: 0.6rem 1.2rem !important;
        font-size: 0.9rem !important;
    }
}

/* ====== 横屏模式布局优化 ====== */
@media (max-height: 500px) and (orientation: landscape) {
    /* 横屏模式下的紧凑布局 */
    .compact-landscape {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    /* 化学先驱画廊（灵语画廊）横屏适配 - 缩放版本 */
    .gallery-section {
        padding: 0.8rem 0.5rem 1rem;
        min-height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .gallery-section .carousel-container {
        transform: scale(0.65);
        transform-origin: center top;
        width: 100%;
    }
    
    .gallery-section .cards-wrapper {
        gap: 0.8rem;
        padding: 0.3rem 0.2rem;
        margin: 0.5rem 0;
    }
    
    .gallery-section .spirit-card {
        width: 140px;
    }
    
    .gallery-section .circle-frame {
        width: 120px;
        height: 120px;
        margin-bottom: 0.4rem;
    }
    
    .gallery-section .character-info {
        font-size: 0.9rem;
        padding: 0.15rem 0.1rem;
    }
    
    .gallery-section .text-box {
        font-size: 0.75rem;
        padding: 0.3rem 0.2rem;
        min-height: 2.5rem;
    }
    
    .gallery-section .gallery-subtle {
        font-size: 0.7rem;
        padding: 0.15rem 0.6rem;
        margin-bottom: 0.5rem;
        letter-spacing: 1px;
    }
    
    .gallery-section .nav-arrow {
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
        top: 40%;
    }
    
    .gallery-section .arrow-left {
        left: -5px;
    }
    
    .gallery-section .arrow-right {
        right: -5px;
    }
    
    /* 元素幻廊（胶片画廊）横屏适配 */
    .film-gallery-section {
        padding: 2rem 1rem 3rem;
        min-height: 100vh;
    }
    
    .film-gallery-section .film-header {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
    
    .film-gallery-section .film-rail {
        gap: 0.8rem;
        padding: 0.8rem 1.5rem;
    }
    
    .film-gallery-section .film-item {
        width: 140px;
        padding: 0.6rem 0.4rem;
    }
    
    .film-gallery-section .film-item img {
        max-height: 120px;
    }
    
    .film-gallery-section .film-caption {
        font-size: 0.7rem;
    }
    
    .film-gallery-section .track {
        margin-bottom: 2rem;
    }
    
    .film-gallery-section .track-title {
        font-size: 0.7rem;
    }
}

/* ====== 主页特定元素的移动端适配 ====== */
@media (max-width: 768px) {
    /* 主内容区域 */
    .content {
        padding: 1.5rem;
    }
    
    /* 主标题 */
    .title {
        font-size: clamp(2rem, 8vw, 3.5rem);
        margin-bottom: 0.8rem;
    }
    
    /* 副标题 */
    .subtitle {
        font-size: clamp(0.9rem, 3vw, 1.2rem);
        padding: 0.4rem 1.5rem;
        margin-bottom: 1.2rem;
    }
    
    /* 描述文本 */
    .description {
        max-width: 100%;
        font-size: 0.9rem;
        padding: 0.8rem 1.5rem;
        margin-bottom: 2rem;
        line-height: 1.5;
    }
    
    /* 唱片控件 */
    .vinyl-player {
        top: 16px;
        right: 16px;
        padding: 8px;
    }
    
    .vinyl-disc {
        width: 56px;
        height: 56px;
    }
    
    /* 滚动提示 */
    .scroll-hint {
        bottom: 20px;
        font-size: 0.75rem;
    }
}

/* ====== 小屏幕优化 (≤480px) ====== */
@media (max-width: 480px) {
    /* 主内容区域 */
    .content {
        padding: 1rem;
    }
    
    /* 主标题 */
    .title {
        font-size: clamp(1.8rem, 7vw, 3rem);
    }
    
    /* 描述文本 */
    .description {
        font-size: 0.85rem;
        padding: 0.7rem 1.2rem;
        margin-bottom: 1.8rem;
    }
    
    /* 唱片控件 */
    .vinyl-player {
        top: 12px;
        right: 12px;
        padding: 6px;
    }
    
    .vinyl-disc {
        width: 48px;
        height: 48px;
    }
}

/* ====== 超小屏幕优化 (≤360px) ====== */
@media (max-width: 360px) {
    /* 主内容区域 */
    .content {
        padding: 0.8rem;
    }
    
    /* 描述文本 */
    .description {
        font-size: 0.8rem;
        padding: 0.6rem 1rem;
        margin-bottom: 1.5rem;
    }
}

/* ====== 化学先驱画廊（灵语画廊）移动端等比例缩放 ====== */
@media (max-width: 768px) {
    .gallery-section {
        padding: 3rem 1rem 3rem;
    }
    
    .gallery-section .carousel-container {
        width: 100%;
        max-width: 100%;
    }
    
    .gallery-section .cards-wrapper {
        gap: 1.2rem;
        padding: 0.5rem 0.3rem;
    }
    
    .gallery-section .spirit-card {
        width: 100px;
    }
    
    .gallery-section .circle-frame {
        width: 90px;
        height: 90px;
    }
    
    .gallery-section .character-info {
        font-size: 0.8rem;
        padding: 0.2rem 0.1rem;
    }
    
    .gallery-section .text-box {
        font-size: 0.65rem;
        padding: 0.4rem 0.3rem;
        min-height: 2.5rem;
    }
    
    .gallery-section .spirit-card.center-card {
        transform: scale(1.08);
    }
    
    .gallery-section .nav-arrow {
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
    }
    
    .gallery-section .arrow-left {
        left: -8px;
    }
    
    .gallery-section .arrow-right {
        right: -8px;
    }
    
    .gallery-section .gallery-subtle {
        font-size: 0.9rem;
        letter-spacing: 2px;
        padding: 0.3rem 1rem;
    }
}

@media (max-width: 480px) {
    .gallery-section {
        padding: 2rem 0.8rem 2.5rem;
    }
    
    .gallery-section .spirit-card {
        width: 85px;
    }
    
    .gallery-section .circle-frame {
        width: 75px;
        height: 75px;
    }
    
    .gallery-section .character-info {
        font-size: 0.7rem;
    }
    
    .gallery-section .text-box {
        font-size: 0.6rem;
        min-height: 2.2rem;
    }
    
    .gallery-section .gallery-subtle {
        font-size: 0.8rem;
    }
    
    .gallery-section .nav-arrow {
        width: 32px;
        height: 32px;
        font-size: 1.3rem;
    }
}

@media (max-width: 360px) {
    .gallery-section {
        padding: 1.5rem 0.5rem 2rem;
    }
    
    .gallery-section .cards-wrapper {
        gap: 0.8rem;
    }
    
    .gallery-section .spirit-card {
        width: 75px;
    }
    
    .gallery-section .circle-frame {
        width: 65px;
        height: 65px;
    }
    
    .gallery-section .character-info {
        font-size: 0.65rem;
    }
    
    .gallery-section .text-box {
        font-size: 0.55rem;
        min-height: 2rem;
    }
}

/* ====== 元素幻廊（胶片画廊）移动端等比例缩放 ====== */
@media (max-width: 768px) {
    .film-gallery-section {
        padding: 2.5rem 1rem 4rem;
    }
    
    .film-gallery-section .film-header {
        font-size: 1.3rem;
        letter-spacing: 2px;
        margin-bottom: 2rem;
    }
    
    .film-gallery-section .film-header p {
        font-size: 0.75rem;
    }
    
    .film-gallery-section .track {
        margin-bottom: 2.5rem;
    }
    
    .film-gallery-section .film-rail {
        gap: 1.2rem;
        padding: 1rem 2rem;
    }
    
    .film-gallery-section .film-item {
        width: 200px;
        padding: 0.8rem 0.6rem;
        border-radius: 22px;
    }
    
    .film-gallery-section .film-item img {
        max-height: 180px;
        border-radius: 16px;
    }
    
    .film-gallery-section .film-caption {
        font-size: 0.85rem;
        padding: 4px 10px;
    }
    
    .film-gallery-section .track-title {
        font-size: 0.8rem;
        margin-bottom: 0.6rem;
    }
}

@media (max-width: 480px) {
    .film-gallery-section {
        padding: 2rem 0.8rem 3rem;
    }
    
    .film-gallery-section .film-header {
        font-size: 1.1rem;
        letter-spacing: 1.5px;
        margin-bottom: 1.5rem;
    }
    
    .film-gallery-section .film-rail {
        gap: 1rem;
        padding: 0.8rem 1.5rem;
    }
    
    .film-gallery-section .film-item {
        width: 160px;
        padding: 0.7rem 0.5rem;
        border-radius: 20px;
    }
    
    .film-gallery-section .film-item img {
        max-height: 145px;
        border-radius: 14px;
    }
    
    .film-gallery-section .film-caption {
        font-size: 0.75rem;
        padding: 3px 8px;
    }
    
    .film-gallery-section .track-title {
        font-size: 0.7rem;
    }
}

@media (max-width: 360px) {
    .film-gallery-section {
        padding: 1.5rem 0.5rem 2.5rem;
    }
    
    .film-gallery-section .film-header {
        font-size: 1rem;
        letter-spacing: 1px;
        margin-bottom: 1.2rem;
    }
    
    .film-gallery-section .film-rail {
        gap: 0.8rem;
        padding: 0.6rem 1rem;
    }
    
    .film-gallery-section .film-item {
        width: 140px;
        padding: 0.6rem 0.4rem;
        border-radius: 18px;
    }
    
    .film-gallery-section .film-item img {
        max-height: 125px;
        border-radius: 12px;
    }
    
    .film-gallery-section .film-caption {
        font-size: 0.7rem;
        padding: 3px 7px;
    }
    
    .film-gallery-section .track-title {
        font-size: 0.65rem;
        margin-bottom: 0.5rem;
    }
    
    .film-gallery-section .track {
        margin-bottom: 2rem;
    }
}

/* ====== 背景视频移动端适配 ====== */
@media (max-width: 768px) {
    .video-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -2;
        overflow: hidden;
        pointer-events: none;
    }
    
    .video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* 横屏模式下的视频适配 */
@media (max-height: 500px) and (orientation: landscape) {
    .video-container {
        width: 100vw;
        height: 100vh;
    }
    
    .video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* 小屏幕设备的视频适配 */
@media (max-width: 480px) {
    .video-container {
        width: 100vw;
        height: 100vh;
    }
    
    .video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ====== 高DPI屏幕适配 ====== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* 高清屏幕优化 */
    .high-dpi-optimized {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ====== 打印样式 ====== */
@media print {
    .landscape-overlay {
        display: none !important;
    }
}