/* ============================================================
   移动端自适应补丁（电脑版页面直接在手机端适配显示）
   说明：本文件在其它样式文件之后加载，用于覆盖小屏下的布局规则
   ============================================================ */

/* 1. 基础：禁止页面横向滚动 / 图片撑破容器 */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
embed,
iframe {
    max-width: 100%;
}

/* 2. 详情页主布局：把 grid 列的最小宽度归零，避免长文本/缩略图把整列撑宽 */
@media (max-width: 960px) {
    .wrap-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .main-content,
    .sidebar,
    .sidebar-card,
    .info-card,
    .thumb-scroll {
        min-width: 0;
    }
}

/* 3. 顶部导航：小屏允许横向滑动，避免导航项挤压变形 */
@media (max-width: 900px) {
    .top-nav {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .top-nav::-webkit-scrollbar {
        display: none;
    }
}

/* 4. 详情页：小屏收紧留白、缩小字号，保证阅读完整 */
@media (max-width: 640px) {
    .wrap-container {
        margin: 14px auto 26px;
        padding: 0 12px;
        gap: 14px;
    }

    .main-content,
    .sidebar-card {
        padding: 14px;
        border-radius: 14px;
    }

    .main-image-wrap {
        max-height: 52vh;
    }

    .info-card h1 {
        font-size: 19px;
        line-height: 1.5;
    }

    .wp-desc,
    .intro-content {
        font-size: 13.5px;
    }

    .pan-item {
        padding: 12px;
    }

    .pan-url {
        font-size: 12px;
    }

    .thumb-item {
        width: 76px;
        height: 52px;
    }
}

/* 5. 首页 / 栏目页：小屏左右留白收紧 */
@media (max-width: 640px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .all-games {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
    }

    .news-grid {
        gap: 10px;
    }

    .site-footer {
        padding: 20px 0 24px;
    }

    .footer-inner {
        padding: 0 12px;
        font-size: 12px;
    }
}

/* 6. 窄屏手机：带文字的模板改单列，小图网格保留双列 */
@media (max-width: 420px) {
    .tpl-compact,
    .tpl-h5 {
        grid-template-columns: 1fr;
    }

    .tpl-dense,
    .tpl-mini {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}