/* ===================================
   移动端通用样式 - 所有页面共享
   基础字体规范和通用组件样式
   =================================== */

/* === 中等屏幕通用优化 (1200px以下) === */
@media screen and (max-width: 1200px) {
    .container {
        padding: 0 2rem !important;
    }
}

/* === 平板尺寸通用优化 (992px以下) === */
@media screen and (max-width: 992px) {
    .content-section .container,
    .content-section .container.reverse {
        flex-direction: column !important;
        gap: 3rem;
    }
}

/* === 移动端通用媒体查询 === */
@media screen and (max-width: 768px) {
    
    /* === 1. 字体大小严格规范（策略文档要求） === */
    
    /* Hero标题 h1 = 1.5rem (严格执行) */
    .hero h1,
    .hero-content h1,
    .hero-title {
        font-size: 1.5rem !important;
        line-height: 1.3;
        margin-bottom: 1rem;
        font-weight: 700;
    }
    
    /* Section标题 h2 = 1.3rem (严格执行) */
    .section-title,
    h2 {
        font-size: 1.3rem !important;
        margin-bottom: 1.5rem;
        font-weight: 600;
    }
    
    /* 所有h3标题 = 1.0rem (严格执行) */
    .brand-card h3,
    .tech-item h3,
    .content-text-box h3,
    .feature-content h3,
    .advantage-item .content h3,
    .promo-card-title,
    .platform-card h3,
    .payment-card h3,
    .tab-description h3,
    .news-card h3,
    .feature-card h3,
    .advantage-card h3,
    .brand-promo-title,
    .game-module-title,
    h3 {
        font-size: 1.0rem !important;
        margin-bottom: 0.75rem;
        font-weight: 600;
    }
    
    /* 所有h4标题 = 1.0rem (严格执行) */
    .footer-column h4,
    h4 {
        font-size: 1.0rem !important;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }
    
    /* 所有内容文本 = 0.8rem (严格执行) */
    .hero p,
    .hero-content p,
    .brand-card p,
    .brand-card ul li,
    .tech-item p,
    .content-text-box p,
    .feature-content p,
    .advantage-item .content p,
    .promo-card-description,
    .platform-card p,
    .payment-card p,
    .tab-description p,
    .news-card p,
    .news-date,
    .feature-card p,
    .advantage-card p,
    .footer-column a,
    .footer-column p,
    .footer-bottom p,
    .game-module-description,
    .large-text,
    p {
        font-size: 0.8rem !important;
        line-height: 1.6;
    }
    
    /* 按钮文字 = 0.8rem (严格执行) */
    .cta-button,
    .btn,
    .tab-link,
    .header-cta,
    .download-button {
        font-size: 0.8rem !important;
        line-height: 1.4;
    }
    
    /* === 2. 通用布局样式 === */
    
    /* 容器和间距 */
    .container {
        padding: 0 1rem !important;
        max-width: 100% !important;
    }
    
    .section {
        padding: 50px 0 !important;
    }
    
    /* === 图片响应式优化 === */
    
    /* Content Section 图片占位符响应式 */
    .content-image-box .image-placeholder {
        width: 100% !important;
        max-width: 100% !important; /* 移除最大宽度限制，让图片与屏幕宽度一致 */
        height: auto !important;
        /* 备用方案：为不支持aspect-ratio的浏览器设置固定高度 */
        min-height: 50vh !important; /* 使用视窗高度的50%作为最小高度 */
        aspect-ratio: 17/18 !important; /* 保持原始比例 680:720 */
        margin: 0 !important; /* 移除左右居中，让图片占满容器宽度 */
        display: block !important;
        object-fit: cover !important; /* 确保背景图片正确显示 */
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    
    /* Content Section 布局优化 */
    .content-section .container {
        flex-direction: column !important;
        gap: 2rem !important;
        text-align: center !important;
    }
    
    /* 图片区域的容器特殊处理，让图片能够占满屏幕宽度 */
    .content-section .content-image-box {
        margin-left: calc(-1rem) !important; /* 抵消容器的左内边距 */
        margin-right: calc(-1rem) !important; /* 抵消容器的右内边距 */
        width: calc(100% + 2rem) !important; /* 补偿被抵消的内边距 */
    }
    
    .content-section .container.reverse {
        flex-direction: column !important;
    }
    
    .content-text-box,
    .content-image-box {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 确保图片容器占满宽度 */
    .content-image-box {
        padding: 0 !important; /* 移除内边距让图片真正占满宽度 */
    }
    
    /* Hero区域通用样式 */
    .hero,
    .hero-banner {
        min-height: auto !important; /* 自适应内容高度 */
        height: auto !important;
        max-height: none !important;
        padding: 2rem 0 !important;
        text-align: center;
    }
    
    .hero-content,
    .hero .hero-content,
    .hero-banner .container {
        padding: 1.5rem !important;
        max-width: 90% !important;
        width: 90% !important;
        margin: 0 auto;
        text-align: center;
    }
    
    .hero-cta-container {
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .hero-cta-container .cta-button {
        width: auto !important;
        min-width: 160px;
        max-width: 280px;
        padding: 1rem 2rem !important;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap !important; /* 防止文字换行 */
        border-radius: 50px !important; /* 更现代的圆角设计 */
        font-weight: 600 !important;
        font-size: 0.9rem !important; /* 适中的字体大小 */
        letter-spacing: 0.5px; /* 增加字母间距 */
        background: linear-gradient(135deg, #E0B8A0 0%, #D4A574 50%, #C09A82 100%) !important;
        box-shadow: 0 4px 15px rgba(224, 184, 160, 0.3), 
                    0 2px 8px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* === 3. 通用网格系统 === */
    
    /* 主要网格 - 单列布局 */
    .comparison-grid,
    .features-grid,
    .features-grid-vertical,
    .tech-grid,
    .promo-grid,
    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* 小组件网格 - 双列布局 */
    .platform-grid,
    .payment-methods {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* === 4. 通用按钮样式 === */
    
    .cta-button,
    .btn,
    .header-cta,
    .download-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem !important;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        transition: all 0.3s ease;
        min-height: 48px !important;
        min-width: 48px;
        touch-action: manipulation;
        border: none;
        cursor: pointer;
    }
    
    .cta-button {
        background: var(--primary-gradient, linear-gradient(135deg, #E0B8A0, #C09A82)) !important;
        color: #000 !important;
        white-space: nowrap !important; /* 确保所有按钮文字不换行 */
        border-radius: 25px !important; /* 统一圆角设计 */
        font-weight: 600 !important;
        letter-spacing: 0.3px;
        min-width: 100px;
        text-align: center;
    }
    
    .cta-button.inverted {
        background: linear-gradient(135deg, #b0a497 0%, #9c8b7a 50%, #88775e 100%) !important;
        color: #fff !important;
        border: 2px solid transparent !important;
    }

    .btn-secondary {
        background: transparent !important;
        color: var(--primary-color, #E0B8A0) !important;
        border: 2px solid var(--primary-color, #E0B8A0) !important;
    }
    
    .header-cta {
        background: var(--primary-color, #E0B8A0) !important;
        color: #000 !important;
    }
    
    /* Hero按钮悬停效果 */
    .hero-cta-container .cta-button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 25px rgba(224, 184, 160, 0.4), 
                    0 4px 12px rgba(0, 0, 0, 0.15) !important;
        background: linear-gradient(135deg, #E5C2A5 0%, #D9AA79 50%, #C59F87 100%) !important;
    }

    /* 按钮触摸反馈 */
    .hero-cta-container .cta-button:active {
        transform: translateY(0) scale(0.98) !important;
        transition: transform 0.1s ease !important;
        box-shadow: 0 2px 8px rgba(224, 184, 160, 0.3), 
                    0 1px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    .cta-button:active,
    .btn:active,
    .header-cta:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease;
    }
    
    /* === 5. 通用卡片样式 === */
    
    .brand-card,
    .feature-card,
    .feature-card-vertical,
    .tech-item,
    .platform-card,
    .payment-card,
    .news-card,
    .promo-card {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem;
        border-radius: 12px;
        text-align: center;
        background: rgba(28, 28, 28, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    /* 卡片悬停效果简化 */
    .brand-card:hover,
    .feature-card:hover,
    .tech-item:hover,
    .platform-card:hover,
    .payment-card:hover,
    .news-card:hover,
    .promo-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* === 6. 触摸优化 === */
    
    /* 触摸目标最小尺寸 */
    .cta-button,
    .btn,
    .tab-link,
    .nav-item a,
    .mobile-bottom-nav .nav-item a {
        min-height: 48px !important;
        min-width: 48px !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* 禁用iOS默认点击高亮 */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* 允许文本选择 */
    p, span, h1, h2, h3, h4, h5, h6, li {
        -webkit-user-select: text;
        -khtml-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }
    
    /* === 7. 输入框优化 === */
    
    input,
    textarea,
    select {
        font-size: 16px !important; /* 防止iOS自动缩放 */
        padding: 0.75rem;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        width: 100%;
        box-sizing: border-box;
        min-height: 48px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: var(--primary-color, #E0B8A0);
        box-shadow: 0 0 0 2px rgba(224, 184, 160, 0.2);
        background: rgba(255, 255, 255, 0.1);
    }
    
    /* === 8. 性能优化 === */
    
    /* 简化动画 */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* 减少不必要的重绘 */
    * {
        will-change: auto;
    }
    
    /* 只对需要动画的元素设置will-change */
    .cta-button,
    .btn,
    .brand-card,
    .feature-card {
        will-change: transform;
    }
    
    /* 优化滚动 */
    .container {
        -webkit-overflow-scrolling: touch;
    }
    
    /* 修复可能的样式冲突 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    body {
        overflow-x: hidden !important;
    }
}

/* === 小屏手机优化 (480px以下) === */
@media screen and (max-width: 480px) {
    .container {
        padding: 0 0.75rem !important;
    }
    
    .section {
        padding: 40px 0 !important;
    }
    
    .hero,
    .hero-banner {
        min-height: auto !important; /* 自适应内容高度 */
        height: auto !important;
        max-height: none !important;
        padding: 1.5rem 0 !important;
    }
    
    .hero-content,
    .hero .hero-content,
    .hero-banner .container {
        padding: 1rem !important;
    }
    
    .hero-cta-container .cta-button {
        width: auto !important;
        min-width: 140px !important;
        max-width: 250px !important;
        padding: 0.9rem 1.6rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important; /* 确保小屏幕也不换行 */
    }
    
    .brand-card,
    .feature-card,
    .tech-item,
    .platform-card,
    .payment-card {
        padding: 1.25rem !important;
    }
    
    /* 小屏幕下所有网格都改为单列 */
    .platform-grid,
    .payment-methods {
        grid-template-columns: 1fr !important;
    }
    
    /* 按钮调整 */
    .cta-button,
    .btn {
        padding: 0.6rem 1.2rem !important;
    }
    
    /* 小屏幕图片优化 */
    .content-image-box .image-placeholder {
        max-width: 100% !important; /* 小屏幕也保持全宽 */
        min-height: 40vh !important; /* 使用视窗高度的40%，更适合小屏幕 */
        aspect-ratio: 4/5 !important; /* 小屏幕使用更紧凑的比例 */
    }
    
    /* 小屏幕的图片容器也需要占满屏幕宽度 */
    .content-section .content-image-box {
        margin-left: calc(-0.75rem) !important; /* 抵消小屏幕容器的左内边距 */
        margin-right: calc(-0.75rem) !important; /* 抵消小屏幕容器的右内边距 */
        width: calc(100% + 1.5rem) !important; /* 补偿被抵消的内边距 */
    }
}

/* === 横屏模式优化 === */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .hero,
    .hero-banner {
        min-height: auto !important; /* 自适应内容高度 */
        height: auto !important;
        max-height: none !important;
        padding: 1rem 0 !important;
    }
    
    .hero-content,
    .hero .hero-content,
    .hero-banner .container {
        padding: 1rem !important;
    }
    
    .section {
        padding: 40px 0 !important;
    }
    
    /* 横屏下网格优化 */
    .platform-grid,
    .payment-methods {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .comparison-grid,
    .tech-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* === 移动端页脚优化 === */
@media screen and (max-width: 768px) {
    
    /* 页脚整体优化 - 减少内边距 */
    .site-footer {
        padding: 2rem 0 1rem 0 !important;
    }
    
    /* 页脚网格优化 - 品牌单独一行，导航游戏同行 */
    .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* 品牌区域跨越两列 */
    .footer-brand {
        grid-column: 1 / -1 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* 快速导航占第一列 */
    .footer-column:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    
    /* 游戏与活动占第二列 */
    .footer-column:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    
    /* 隐藏帮助中心列 */
    .footer-column:nth-child(4) {
        display: none !important;
    }
    
    /* 页脚列优化 */
    .footer-column {
        margin-bottom: 1rem !important;
    }
    
    .footer-column h4 {
        margin-bottom: 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    .footer-column ul li {
        margin-bottom: 0.4rem !important;
    }
    
    /* 页脚品牌区域优化 */
    .footer-brand p {
        margin-top: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* 社交媒体图标优化 */
    .footer-social {
        margin-top: 1rem !important;
    }
    
    .footer-social a {
        font-size: 1.2rem !important;
        margin-right: 1rem !important;
    }
    
    /* 页脚底部优化 */
    .footer-bottom {
        padding-top: 1.5rem !important;
        margin-top: 1rem !important;
    }
    
    .footer-bottom p {
        margin: 0.25rem 0 !important;
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
    }
}

/* === 小屏手机页脚进一步优化 === */
@media screen and (max-width: 480px) {
    
    /* 进一步减少页脚高度 */
    .site-footer {
        padding: 1.5rem 0 0.75rem 0 !important;
    }
    
    /* 更紧凑的网格间距 - 保持两列布局 */
    .footer-grid {
        gap: 1rem !important;
        margin-bottom: 1rem !important;
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* 小屏下品牌区域依然跨越两列 */
    .footer-brand {
        grid-column: 1 / -1 !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* 更小的标题和间距 */
    .footer-column h4 {
        margin-bottom: 0.5rem !important;
        font-size: 0.85rem !important;
    }
    
    .footer-column ul li {
        margin-bottom: 0.3rem !important;
    }
    
    /* 品牌区域进一步压缩 */
    .footer-brand p {
        margin-top: 0.5rem !important;
        margin-bottom: 0.75rem !important;
        font-size: 0.75rem !important;
    }
    
    /* 社交媒体图标更紧凑 */
    .footer-social {
        margin-top: 0.75rem !important;
    }
    
    .footer-social a {
        font-size: 1.1rem !important;
        margin-right: 0.75rem !important;
    }
    
    /* 页脚底部最小化 */
    .footer-bottom {
        padding-top: 1rem !important;
        margin-top: 0.75rem !important;
    }
    
    .footer-bottom p {
        margin: 0.2rem 0 !important;
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
    }
}

/* === 移动端APP下载区域优化 === */
@media screen and (max-width: 768px) {
    
    /* APP下载容器 - 上下两部分布局 */
    #app-download .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    /* 上半部分：图片和文字 */
    .app-preview {
        order: 1 !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }
    
    .app-preview img {
        max-width: 480px !important;
        height: auto !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    }
    
    .app-info {
        order: 2 !important;
        text-align: center !important;
    }
    
    .app-info h2 {
        margin-bottom: 1rem !important;
        font-size: 1.1rem !important;
    }
    
    .app-info p {
        margin-bottom: 1rem !important;
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    .app-info ul {
        margin-bottom: 1.5rem !important;
        text-align: left !important;
    }
    
    .app-info ul li {
        margin-bottom: 0.75rem !important;
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
    
    /* 下半部分：下载按钮 */
    .download-buttons {
        order: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin-top: 1.5rem !important;
        padding-top: 1.5rem !important;
        border-top: 1px solid rgba(224, 184, 160, 0.2) !important;
    }
    
    .download-button {
        background: linear-gradient(145deg, #1c1c1c, #111) !important;
        border: 1px solid rgba(224, 184, 160, 0.2) !important;
        border-radius: 12px !important;
        padding: 1.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        transition: all 0.3s ease !important;
    }
    
    .download-button:hover {
        transform: translateY(-2px) !important;
        border-color: rgba(224, 184, 160, 0.4) !important;
        box-shadow: 0 6px 20px rgba(224, 184, 160, 0.15) !important;
    }
    
    .download-icon {
        font-size: 2rem !important;
        color: var(--primary-color, #E0B8A0) !important;
        margin-right: 1rem !important;
    }
    
    .download-text {
        flex: 1 !important;
        text-align: left !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #fff !important;
    }
    
    .download-button .cta-button {
        padding: 0.6rem 1.2rem !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }
}

/* === 小屏手机APP下载进一步优化 === */
@media screen and (max-width: 480px) {
    
    /* APP图片进一步缩小 */
    .app-preview img {
        max-width: 320px !important;
    }
    
    /* 文字内容进一步压缩 */
    .app-info h2 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .app-info p {
        font-size: 0.8rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .app-info ul li {
        font-size: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* 下载按钮更紧凑 */
    .download-buttons {
        gap: 0.75rem !important;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
    }
    
    .download-button {
        padding: 1.25rem !important;
    }
    
    .download-icon {
        font-size: 1.8rem !important;
        margin-right: 0.75rem !important;
    }
    
    .download-text {
        font-size: 0.85rem !important;
    }
    
    .download-button .cta-button {
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
    }
}

/* === 帮助中心文本样式 === */
@media screen and (max-width: 768px) {
    /* 帮助中心的span元素样式，使其看起来像普通文本 */
    .footer-column span {
        color: rgba(255, 255, 255, 0.6) !important;
        cursor: default !important;
        font-size: 0.8rem !important;
        line-height: 1.6 !important;
    }
}