/* 移动端显示修复 - Mobile Display Fixes */

/* 默认隐藏移动端下载按钮（通过UA检测启用） */
.mobile-download-buttons { display: none; }
.mobile-download-buttons.show {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 0 15px;
    margin-top: 10px;
}
.mobile-download-buttons .download-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    background-color: #428bca;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.mobile-download-buttons .download-btn:hover { background-color: #2a6eaa; }
.qr-grid.hide-on-mobile { display: none !important; }

/* 额外保护：桌面端始终隐藏按钮容器 */
@media (min-width: 769px) {
  .mobile-download-buttons { display: none !important; }
}

/* 重构后的模态框样式 - 适用于所有屏幕尺寸 */
/* 确保模态框和内容区域正确设置 */
@media all {
    /* 确保模态框本身不滚动 */
    .game-modal {
        overflow: hidden !important;
    }
    
    /* 确保页面在模态框打开时不滚动 */
    body.modal-open {
        overflow: hidden !important;
    }
    
    /* 模态框容器设置 */
    .modal-content {
        display: flex;
        flex-direction: column;
        overflow: hidden !important; /* 防止容器本身滚动 */
    }
    
    /* 内容区域设置为可滚动 */
    .game-details {
        flex: 1;
        overflow-y: auto !important; /* 只在内容区域滚动 */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
}

/* 移除之前的媒体查询，统一使用style.css中的设置 */

/* 移动端特定调整 */
@media (max-width: 768px) {
    
    /* 扩大移动端媒体展示区域为真正的屏幕宽度 */
    .media-showcase {
        padding: 0 !important; /* 去除两侧留白 */
        margin: 0 !important;
        width: 100vw; /* 视口宽度 */
        position: relative;
        left: 50%;
        transform: translateX(-50%); /* 让100vw居中对齐 */
    }
    .media-container {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0;
    }
    .media-main {
        margin: 0; /* 移除左右外边距，主展示区更宽 */
        max-height: none !important; /* 取消高度上限以配合16:9比例全宽显示 */
    }
    /* 移动端隐藏左右轮播按钮 */
    .media-nav-prev,
    .media-nav-next {
        display: none !important;
    }
    /* 移动端额外样式调整 */
    .modal-content {
        border-radius: 0; /* 移动端去除圆角 */
        padding-bottom: 10px;
    }
    
    /* 确保模态框内的内容不重复滚动 */
    .game-details {
        height: 100%;
        max-height: 100%;
        overflow-y: auto !important; /* 在内容区滚动，避免双滚动条 */
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior-y: contain;
    }
    
    /* 确保游戏标题显示 */
    .game-header h1.game-title {
        font-size: 1.5rem;
        padding: 15px;
        margin: 0 0 10px 0;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* 确保游戏内容区域正常显示 */
    .game-header {
        height: auto !important;
        min-height: 180px;
        overflow: visible !important;
    }
    
    /* 调整游戏描述部分 */
    .game-description-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0 15px;
        margin-top: 15px;
    }
    
    .description-title {
        font-size: 1.3rem;
        margin-bottom: 10px;
        display: block !important;
    }
    
    .game-description {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 15px;
        display: block !important;
    }
    
    /* 遇到问题链接样式 */
    .problem-link {
        display: inline-block;
        color: #f44336; /* 红色 */
        font-size: 14px;
        font-weight: 600;
        margin: 0 0 15px;
        text-decoration: none;
        transition: color 0.2s;
        display: block !important;
    }
    
    .problem-link:hover {
        color: #d32f2f; /* 深红色 */
        text-decoration: underline;
    }
    
    .dark-mode .problem-link {
        color: #ff5252; /* 暗色模式下更明亮的红色 */
    }
    
    .dark-mode .problem-link:hover {
        color: #ff8a80; /* 暗色模式下的悬停颜色 */
    }
    
    /* 调整游戏统计信息布局 */
    .game-stats {
        flex-direction: column;
        gap: 8px;
        margin: 15px 0;
        padding: 12px;
    }
    
    /* 调整下载区域显示 */
    .download-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0 15px;
        margin-top: 20px;
    }
    
    .download-title {
        font-size: 1.3rem;
        margin-bottom: 10px;
        display: none !important;
    }
    
    .download-desc {
        font-size: 14px;
        margin-bottom: 15px;
        display: none !important;
    }

    /* 按钮样式已在全局定义，显示逻辑由UA检测控制 */
    
    /* 调整二维码网格布局 */
    .qr-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 15px 0;
        position: relative;
        z-index: 1;
    }
    
    .qr-item {
        padding: 10px;
    }
    
    .qr-title {
        font-size: 14px;
        margin-bottom: 8px;
    }
    
    .qr-box {
        width: 140px;
        height: 140px;
        margin: 0 auto;
        cursor: default;
    }
    
    /* 确保二维码清晰显示 */
    .qr-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
    
    /* 隐藏提示 */
    .qr-tip {
        display: none !important;
    }
    
    /* 调整免责声明区域 */
    .disclaimer-section {
        padding: 10px 15px;
        margin: 15px 0;
    }
    
    .disclaimer-title {
        font-size: 16px;
    }
    
    .disclaimer-content {
        font-size: 12px;
    }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
    /* 改善横屏滚动 */
    .modal-content {
        height: 85vh;
        max-height: 85vh;
        padding: 15px;
        overflow: hidden !important; /* 仅内容区滚动，避免双滚动 */
    }
    
    .game-details {
        height: 100%;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
    
    /* 减小标题和内容的上下间距 */
    .game-header h1.game-title {
        padding: 10px;
        margin-bottom: 5px;
        font-size: 1.3rem;
    }
    
    /* 压缩各部分的间距 */
    .game-description-section,
    .download-section {
        margin-top: 10px;
        padding: 0 10px;
    }
    
    /* 更紧凑的网格布局：与标准断点保持一致，≤768px 为两列 */
    .qr-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }
    
    /* 调整二维码大小 */
    .qr-box {
        width: 120px;
        height: 120px;
    }
    
    /* 游戏媒体区域调整 */
    .media-main {
        max-height: 40vh;
    }
    
    /* 减小字体和边距 */
    .description-title,
    .download-title {
        font-size: 1.1rem;
        margin-bottom: 5px;
    }
    
    .game-description,
    .download-desc {
        font-size: 13px;
        margin-bottom: 10px;
    }
}

/* 更小屏幕的布局调整 */
@media (max-width: 576px) {
    /* 调整游戏标题 */
    .game-header h1.game-title {
        font-size: 1.3rem;
        padding: 12px;
    }
    
    /* 调整游戏描述标题 */
    .description-title,
    .download-title {
        font-size: 1.2rem;
    }
    
    /* 调整游戏描述内容 */
    .game-description,
    .download-desc {
        font-size: 13px;
    }
    
    /* 调整二维码布局 */
    .qr-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 适应更小屏幕的二维码大小 */
    .qr-box {
        width: 130px;
        height: 130px;
    }
}

/* 超小屏幕的布局调整 */
@media (max-width: 360px) {
    /* 单列二维码布局 */
    .qr-grid {
        grid-template-columns: 1fr;
    }
    
    /* 稍大的二维码 */
    .qr-box {
        width: 130px;
        height: 130px;
    }
}