/* ========================================
   响应式设计样式文件
   Responsive Design Styles
   ======================================== */

/* 超大屏幕 (1600px+) */
@media (min-width: 1600px) {
    .container-p8j5k {
        max-width: 1400px;
    }
    
    .hero-content-b8j6x {
        padding: 6rem var(--spacing-md);
    }
    
    .title-main-k8j5p {
        font-size: 4rem;
    }
    
    .features-grid-j6k9m {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gallery-grid-k6j9m {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 大屏幕 (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .container-p8j5k {
        max-width: 1140px;
    }
    
    .features-grid-j6k9m {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg);
    }
    
    .hero-stats-m8k5x {
        gap: var(--spacing-xl);
    }
}

/* 中等屏幕 (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .container-p8j5k {
        max-width: 960px;
        padding: 0 var(--spacing-lg);
    }
    
    .nav-container-p2y6m {
        padding: 0 var(--spacing-lg);
    }
    
    .features-grid-j6k9m {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .story-content-k6x9m {
        gap: var(--spacing-xl);
    }
    
    .footer-links-p7j4k {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }
}

/* 小屏幕平板 (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .container-p8j5k {
        max-width: 720px;
        padding: 0 var(--spacing-md);
    }
    
    .nav-container-p2y6m {
        padding: 0 var(--spacing-md);
    }
    
    .nav-menu-b7j9k {
        display: none;
    }
    
    .mobile-toggle-n8x4r {
        display: block;
    }
    
    .hero-content-b8j6x {
        padding: var(--spacing-xxl) var(--spacing-md);
    }
    
    .title-main-k8j5p {
        font-size: var(--font-4xl);
    }
    
    .hero-buttons-k8x5m {
        justify-content: center;
    }
    
    .features-grid-j6k9m {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .gallery-grid-k6j9m {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .story-content-k6x9m {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .story-text-p7j4k {
        order: 2;
        text-align: center;
    }
    
    .story-image-k8x5m {
        order: 1;
    }
    
    .footer-content-m7k4q {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .footer-links-p7j4k {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 大手机 (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .container-p8j5k {
        max-width: 540px;
        padding: 0 var(--spacing-sm);
    }
    
    .nav-container-p2y6m {
        padding: 0 var(--spacing-sm);
    }
    
    .hero-content-b8j6x {
        padding: var(--spacing-xl) var(--spacing-sm);
    }
    
    .title-main-k8j5p {
        font-size: var(--font-3xl);
        text-align: center;
    }
    
    .title-sub-m2x6k {
        font-size: var(--font-lg);
        text-align: center;
    }
    
    .hero-description-w6x2k {
        text-align: center;
    }
    
    .hero-buttons-k8x5m {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .hero-stats-m8k5x {
        justify-content: center;
        gap: var(--spacing-sm);
    }
    
    .stat-item-n6j9k {
        min-width: 100px;
        padding: var(--spacing-sm);
    }
    
    .features-grid-j6k9m {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .feature-card-p5x8k {
        padding: var(--spacing-lg);
    }
    
    .gallery-grid-k6j9m {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .section-title-k8j6p {
        font-size: var(--font-3xl);
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .download-buttons-p8j5k {
        flex-direction: column;
        align-items: stretch;
    }
    
    .download-features-m7k4x {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }
    
    .footer-links-p7j4k {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .footer-bottom-k6x9m {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }
}

/* 小手机 (320px - 575px) */
@media (max-width: 575px) {
    .container-p8j5k {
        padding: 0 var(--spacing-sm);
    }
    
    .nav-container-p2y6m {
        padding: 0 var(--spacing-sm);
    }
    
    .mobile-toggle-n8x4r {
        display: block;
        color: var(--primary-gold);
        font-size: 1.2rem;
        cursor: pointer;
        padding: var(--spacing-xs);
    }
    
    .nav-menu-b7j9k {
        display: none;
    }
    
    .logo-text-q3m7n {
        font-size: var(--font-xl);
    }
    
    .subtitle-v4n2x {
        font-size: var(--font-xs);
    }
    
    .hero-content-b8j6x {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .title-main-k8j5p {
        font-size: var(--font-2xl);
        text-align: center;
    }
    
    .title-sub-m2x6k {
        font-size: var(--font-base);
        text-align: center;
    }
    
    .hero-tagline-n7k4x {
        padding: 0 20px;
    }
    
    .hero-tagline-n7k4x::before,
    .hero-tagline-n7k4x::after {
        width: 10px;
    }
    
    .tagline-text-q9m3k {
        font-size: var(--font-base);
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .desc-text-m4k9p {
        font-size: var(--font-base);
        text-align: center;
    }
    
    .hero-buttons-k8x5m {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .btn-primary-j9k6x,
    .btn-secondary-p7m4k {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-base);
    }
    
    .hero-stats-m8k5x {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
    
    .stat-item-n6j9k {
        min-width: 70px;
        padding: var(--spacing-xs);
        flex: 1;
        max-width: 90px;
    }
    
    .stat-number-w5k8p {
        font-size: var(--font-2xl);
    }
    
    .stat-label-x2j6m {
        font-size: var(--font-xs);
    }
    
    .section-title-k8j6p {
        font-size: var(--font-2xl);
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .section-subtitle-n9k3x {
        font-size: var(--font-base);
    }
    
    .feature-card-p5x8k {
        padding: var(--spacing-md);
    }
    
    .feature-title-w7k4m {
        font-size: var(--font-xl);
    }
    
    .feature-desc-n5j8x {
        font-size: var(--font-sm);
    }
    
    .story-block-p6j9k {
        padding: var(--spacing-md);
    }
    
    .story-subtitle-w7k4m {
        font-size: var(--font-lg);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .download-info-m8k5x {
        padding: var(--spacing-md);
    }
    
    .game-version-k6j9m {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-xs);
    }
    
    .requirements-list-j6k9m li {
        font-size: var(--font-sm);
    }
    
    .footer-brand-j6k9m {
        text-align: center;
        max-width: none;
    }
    
    .footer-social-m8k5x {
        justify-content: center;
    }
}

/* 极小屏幕 (小于320px) */
@media (max-width: 319px) {
    .container-p8j5k {
        padding: 0 var(--spacing-xs);
    }
    
    .nav-container-p2y6m {
        padding: 0 var(--spacing-xs);
    }
    
    .logo-text-q3m7n {
        font-size: var(--font-lg);
    }
    
    .title-main-k8j5p {
        font-size: var(--font-xl);
    }
    
    .hero-tagline-n7k4x {
        padding: 0 15px;
    }
    
    .hero-tagline-n7k4x::before,
    .hero-tagline-n7k4x::after {
        width: 8px;
    }
    
    .tagline-text-q9m3k {
        font-size: var(--font-sm);
    }
    
    .hero-stats-m8k5x {
        gap: var(--spacing-xs);
    }
    
    .stat-item-n6j9k {
        min-width: 70px;
    }
    
    .feature-card-p5x8k {
        padding: var(--spacing-sm);
    }
    
    .download-features-m7k4x {
        gap: var(--spacing-xs);
    }
    
    .feature-highlight-k8x5p {
        font-size: var(--font-sm);
    }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 600px) {
    .hero-section-m9k3x {
        min-height: 90vh;
    }
    
    .hero-content-b8j6x {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .hero-stats-m8k5x {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-bg-img-k2x9n {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .gallery-img-m5k8x,
    .story-img-j6k9m {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 打印样式 */
@media print {
    .header-nav9x3z,
    .mobile-toggle-n8x4r,
    .hero-buttons-k8x5m,
    .download-section-m9k3x,
    .footer-section-w8k5x {
        display: none !important;
    }
    
    .hero-section-m9k3x {
        min-height: auto;
        page-break-inside: avoid;
    }
    
    .features-section-k9x6m,
    .gallery-section-w8k5x,
    .story-section-j8k5m {
        page-break-inside: avoid;
        margin: 2rem 0;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .container-p8j5k {
        max-width: none;
        padding: 0;
    }
}

/* 动画减少偏好设置 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 色彩方案偏好设置 */
@media (prefers-color-scheme: light) {
    /* 如果用户偏好亮色主题，可以在这里添加亮色版本的样式 */
    /* 目前保持暗色主题 */
}

/* 对比度偏好设置 */
@media (prefers-contrast: more) {
    :root {
        --text-secondary: #e5e7eb;
        --text-muted: #d1d5db;
        --border-light: rgba(212, 175, 55, 0.4);
        --border-medium: rgba(212, 175, 55, 0.7);
    }
    
    .nav-link-w5t8m,
    .link-list-j6k9m a {
        color: var(--text-secondary);
    }
    
    .feature-card-p5x8k,
    .stat-item-n6j9k {
        border-width: 2px;
    }
}

/* ========================================
   Download Platform Responsive Styles
   ======================================== */

/* 平板端 (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .download-platforms-w8k5x {
        padding: var(--spacing-md);
    }
    
    .platform-item-m5k8x {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .windows-icon-p7k4m,
    .android-icon-n6j9k {
        font-size: 2rem;
    }
}

/* 小手机 (320px - 575px) */
@media (max-width: 575px) {
    .download-platforms-w8k5x {
        padding: var(--spacing-sm);
    }
    
    .platforms-title-k7m4q {
        font-size: var(--font-lg);
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .platform-item-m5k8x {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    
    .platform-info-k8x5p h5 {
        font-size: var(--font-base);
    }
    
    .platform-info-k8x5p p {
        font-size: var(--font-xs);
    }
    
    .windows-icon-p7k4m,
    .android-icon-n6j9k {
        font-size: 1.8rem;
    }
    
    .btn-platform-j9k6x {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-sm);
    }
}