/* ========================================
   m4-base.css - 基础样式与共用组件
   Mobile-first: 基础=手机, min-width 增强
   ======================================== */

*{margin:0;padding:0;box-sizing:border-box;}
body{font:15px/1.7 -apple-system,"Microsoft YaHei","PingFang SC",sans-serif;color:#e0e0e0;background:#0b0d17;-webkit-text-size-adjust:100%;}
a{color:#d0d0e0;text-decoration:none;}a:hover{color:#e94560;}

/* 手机端基础 */
.wrap{max-width:1200px;margin:0 auto;padding:0 12px;}

/* ========== Footer ========== */
.footer-links{padding:12px 0;text-align:center;font-size:11px;border-top:1px solid rgba(255,255,255,.04);}
.footer-links a{color:#5a5a70;margin:0 6px;}
.footer-links a:hover{color:#e94560;}
.site-footer{background:#0b0d17;color:#5a5a70;padding:16px 0;text-align:center;font-size:12px;line-height:1.8;}
.site-footer a{color:#8a8aa0;margin:0 4px;font-size:12px;}
.site-footer a:hover{color:#e94560;}
.site-footer .cp{color:#3a3a50;font-size:11px;margin-top:6px;}

/* ========== 侧栏 (手机默认隐藏) ========== */
.verdict-rail{display:none;width:300px;flex-shrink:0;}
.rail-card{background:#1a1a2e;border-radius:12px;padding:18px;margin-bottom:20px;border:1px solid rgba(255,255,255,.04);}
.rail-card h3{font-size:15px;font-weight:600;color:#fff;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06);}
.rail-card h3 em{font-style:normal;color:#e94560;}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:6px;}
.tags a{display:inline-block;padding:5px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:20px;font-size:12px;color:#8a8aa0;transition:all .2s;}
.tags a:hover{background:rgba(233,69,96,.12);border-color:rgba(233,69,96,.2);color:#e94560;}

/* Rank List (verdict-rail) */
.rank-list{liebiao-style:none;}
.rank-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.rank-list li:last-child{border-bottom:none;}
.rank-list .rn{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.rank-list .rn.r1{background:linear-gradient(135deg,#e94560,#c23152);color:#fff;}
.rank-list .rn.r2{background:linear-gradient(135deg,#f5c518,#d4a514);color:#0b0d17;}
.rank-list .rn.r3{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;}
.rank-list .rn.rn{background:rgba(255,255,255,.06);color:#5a5a70;}
.rank-list .rail-name{font-size:13px;color:#b0b0c0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.rank-list .rail-name:hover{color:#e94560;}
.rank-list .rv{font-size:11px;color:#5a5a70;}

/* ========== Card Grid (手机: 2列) ========== */
.duel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.card{background:#1a1a2e;border-radius:12px;overflow:hidden;transition:all .25s;border:1px solid rgba(255,255,255,.04);}
.card:hover{transform:translateY(-4px);border-color:rgba(233,69,96,.2);box-shadow:0 8px 30px rgba(0,0,0,.3);}
.duel-cover{position:relative;overflow:hidden;aspect-ratio:16/9;background:#13132a;}
.duel-poster{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.card:hover .duel-poster{transform:scale(1.08);}
.duel-badge{position:absolute;top:8px;right:8px;padding:2px 10px;background:rgba(233,69,96,.9);color:#fff;font-size:11px;font-weight:600;border-radius:4px;}
.duel-badge.gold{background:rgba(245,197,24,.9);color:#0b0d17;}
.duel-body{padding:8px 10px 10px;}
.duel-body h4{font-size:13px;font-weight:500;color:#e0e0e0;line-height:1.3;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.duel-body h4 a{color:#e0e0e0;}
.duel-body h4 a:hover{color:#e94560;}
.duel-meta{font-size:12px;color:#5a5a70;display:flex;gap:8px;align-items:center;}
.duel-meta .dot{color:#3a3a50;}
.duel-meta .score{color:#f5c518;font-weight:600;}

/* Breadcrumb */
.bread{padding:10px 0;font-size:12px;color:#5a5a70;}
.bread a{color:#5a5a70;}
.bread a:hover{color:#e94560;}
.bread span{color:#8a8aa0;}

/* ========== 平板 (≥768px) ========== */
@media(min-width:768px){
    .wrap{padding:0 20px;}
    .duel-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
    .duel-body{padding:12px 14px 14px;}
    .duel-body h4{font-size:14px;}
    .bread{font-size:13px;padding:14px 0;}
    .footer-links{padding:14px 0;font-size:12px;}
    .footer-links a{margin:0 8px;}
    .site-footer{padding:20px 0;font-size:13px;}
    .site-footer .cp{font-size:12px;}
}

/* ========== 桌面 (≥960px) ========== */
@media(min-width:960px){
    .verdict-rail{display:block;}
    .duel-grid{grid-template-columns:repeat(4,1fr);gap:16px;}
    .footer-links a{margin:0 10px;}
    .site-footer{padding:24px 0;}
}

/* ========================================
   📱 移动端增强块（P0必做 - 追加在文件末尾，权重最高）
   覆盖：导航横滑、卡片双列→单列、字号/行高/触控区、防横向溢出、
   详情页封面图堆叠、游戏模块响应式、分页触控优化
   ======================================== */
@media (max-width: 767px) {
    /* --- 通用防横向溢出 --- */
    html, body { overflow-x: hidden; max-width: 100vw; }
    *, *::before, *::after { box-sizing: border-box; }
    img, video, iframe { max-width: 100%; height: auto; display: block; }

    /* --- 容器内边距收紧 --- */
    .wrap { padding: 0 10px; max-width: 100%; }

    /* --- 顶部导航：横向滑动 Tab（核心） --- */
    .topbar-inner { padding: 0 10px; height: 48px; }
    .logo { font-size: 15px; }
    .nav {
        display: flex !important;
        gap: 4px;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        padding: 4px 0 8px; /* 底部留空间给滚动条 */
    }
    .nav::-webkit-scrollbar { display: none; } /* Chrome/Safari */
    .nav a {
        flex: 0 0 auto;
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 16px;
        min-height: 36px; /* 触控区 ≥ 38px */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- 面包屑：单行省略 + 横滑 --- */
    .bread {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        padding: 8px 0;
        font-size: 11px;
        scrollbar-width: none;
    }
    .bread::-webkit-scrollbar { display: none; }
    .bread a, .bread span { flex: 0 0 auto; white-space: nowrap; }

    /* --- 卡片网格：手机强制单列（更利于阅读和点击） --- */
    .duel-grid { grid-template-columns: 1fr !important; gap: 12px; }
    .card { border-radius: 10px; }
    .duel-body { padding: 12px; }
    .duel-body h4 {
        font-size: 14px;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
    }
    .duel-meta { font-size: 11px; gap: 6px; }
    .duel-badge { font-size: 10px; padding: 2px 8px; top: 6px; right: 6px; }

    /* --- 分类横幅 --- */
    .cate-banner { border-radius: 8px; margin-bottom: 12px; }
    .cate-banner-content { padding: 16px 12px; }
    .cate-banner h1 { font-size: 16px; line-height: 1.3; margin-bottom: 6px; }
    .cate-banner p { font-size: 12px; color: #8a8aa0; }
    .cate-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 10px; }
    .cate-stats span { background: rgba(255,255,255,.04); padding: 3px 8px; border-radius: 12px; }

    /* --- 主布局：侧栏移到主内容下方（手机端） --- */
    .duel-layout { display: flex; flex-direction: column; gap: 16px; }
    .liebiao-main { order: 1; width: 100%; }
    .verdict-rail { order: 2; width: 100%; display: block !important; }
    .rail-card { padding: 14px; margin-bottom: 12px; }
    .rail-card h3 { font-size: 14px; margin-bottom: 10px; }

    /* --- 标签云 --- */
    .tags { gap: 5px; }
    .tags a { padding: 4px 10px; font-size: 11px; border-radius: 16px; }

    /* --- 排行榜 --- */
    .rank-list li { padding: 8px 0; gap: 8px; }
    .rank-list .rn { width: 20px; height: 20px; font-size: 10px; border-radius: 4px; }
    .rank-list .rail-name { font-size: 12px; }
    .rank-list .rv { font-size: 10px; }

    /* --- 分页：大触控区、居中、简化 --- */
    .pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 12px 0; }
    .pages a, .pages span {
        min-width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        padding: 0 8px; font-size: 13px; border-radius: 6px;
        background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
        color: #8a8aa0; text-decoration: none;
    }
    .pages a:hover, .pages a.active, .pages a.du-active {
        background: #e94560; border-color: #e94560; color: #fff;
    }
    .pages .page-prev, .pages .page-next { min-width: auto; padding: 0 12px; }
    .pages-dots { padding: 0 4px; color: #5a5a70; }

    /* --- 筛选栏按钮：固定类名（不依赖 $zxPrefix 动态前缀）--- */
    .du-filter-btn {
        padding: 3px 10px;
        border-radius: 12px;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.06);
        color: #8a8aa0;
        text-decoration: none;
        font-size: 12px;
        white-space: nowrap;
    }
    .du-filter-btn:hover,
    .du-filter-btn.du-active {
        background: #e94560 !important;
        border-color: #e94560 !important;
        color: #fff !important;
    }

    /* --- 页脚 --- */
    .footer-links { padding: 10px 0; font-size: 10px; }
    .footer-links a { margin: 0 4px; display: inline-block; padding: 2px 0; }
    .site-footer { padding: 14px 0; font-size: 11px; }
    .site-footer a { margin: 0 3px; font-size: 11px; }
    .site-footer .cp { font-size: 10px; margin-top: 4px; }

    /* ========== 详情页专用 ========== */
    .main-card { padding: 12px; margin-bottom: 12px; border-radius: 10px; }
    .main-card h1 { font-size: 17px !important; line-height: 1.35; margin-bottom: 8px !important; }
    .main-card > div[style*="flex"] { flex-direction: column; gap: 8px; font-size: 12px; }

    /* 详情页：封面图与简介上下堆叠（防并排挤压） */
    .game-module { padding: 12px; border-radius: 8px; }
    .game-module .params-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
        padding: 0;
    }
    .game-module .param-box {
        flex-direction: row !important;
        padding: 0;
        background: transparent;
        border: none;
    }
    .game-module .param-left {
        width: 100% !important;
        height: 180px !important;
        max-width: 280px;
        margin: 0 auto;
        border-radius: 8px;
    }
    .game-module .param-right {
        padding: 12px;
        text-align: center;
        min-width: 0;
    }
    .game-module .param-right h3 { font-size: 16px; margin-bottom: 8px; white-space: normal; }
    .game-module .m4-meta-item { font-size: 13px; justify-content: center; gap: 12px; margin: 6px 0; }
    .game-module .description-box { padding: 12px; font-size: 13px; line-height: 1.7; text-align: left; }
    .game-module .tabs { flex-wrap: wrap; }
    .game-module .m4-tab-item {
        flex: 1 1 45%; min-width: 0;
        padding: 10px 8px; font-size: 12px;
        white-space: normal; text-overflow: clip; overflow: visible;
    }
    .game-module .m4-tab-content { padding: 12px 0; }
    .game-module .article-content h2 { font-size: 15px; margin: 16px 0 8px; padding-left: 10px; border-left-width: 3px; }
    .game-module .article-content > div[style*="background:linear-gradient"] { padding: 14px; margin-bottom: 16px; }
    .game-module .article-content > div[style*="background:linear-gradient"] > div { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    .game-module .article-content > div[style*="background:linear-gradient"] > div > div:first-child { width: 100%; max-width: 200px; height: 260px; }
    .game-module .comments-splice h3 { font-size: 14px; margin-bottom: 10px; }
    .game-module .m4-comment-splice-item { padding: 10px 0; font-size: 13px; }

    /* 相关推荐：单列 */
    .rel-section { margin-bottom: 12px; }
    .rel-section h3 { font-size: 14px; margin-bottom: 10px; }
    .rel-grid { grid-template-columns: 1fr !important; gap: 10px; }
    .rel-card .rc-body { padding: 8px; }
    .rel-card .rc-body h4 { font-size: 13px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .rel-card .rc-meta { font-size: 11px; }

    /* 标签区 */
    .tag-section { gap: 5px; margin-bottom: 12px; }
    .tag-section a { padding: 3px 8px; font-size: 10px; border-radius: 14px; }

    /* 评论区 */
    .m4-comment-section { margin-bottom: 12px; }
    .m4-comment-section h3 { font-size: 14px; margin-bottom: 10px; }
    .m4-comment-item { padding: 10px 0; }
    .m4-comment-head { gap: 8px; margin-bottom: 4px; }
    .m4-comment-head img { width: 24px; height: 24px; }
    .m4-comment-head .cn { font-size: 12px; }
    .m4-comment-head .ct { font-size: 11px; }
    .m4-comment-text { margin-left: 0; margin-top: 4px; font-size: 13px; line-height: 1.6; }

    /* ========== 首页专用 ========== */
    .du-stage { flex-direction: column; gap: 16px; }
    .du-deck { width: 100%; }
    .du-deck-slide { padding: 20px 12px !important; gap: 16px; flex-direction: column; align-items: stretch !important; }
    .du-deck-body { text-align: center; }
    .du-head { font-size: 16px !important; line-height: 1.3; }
    .du-lead { font-size: 12px !important; }
    .du-meta { justify-content: center; gap: 10px; font-size: 11px; flex-wrap: wrap; }
    .du-go { display: inline-block; width: auto; padding: 10px 24px; font-size: 13px; margin-top: 8px; }
    .du-deck-visual { display: none; } /* 手机端隐藏播放图标，节省空间 */
    .du-hot { width: 100%; }
    .du-hot-title { font-size: 14px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .du-hot-sig { padding: 10px 0; gap: 10px; }
    .du-hot-num { width: 22px; height: 22px; font-size: 11px; }
    .du-hot-name { font-size: 13px; }
    .du-hot-views { font-size: 11px; }

    /* 首页各区块卡片网格：单列 */
    .section .duel-grid { grid-template-columns: 1fr !important; }
    .viol-head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
    .viol-head h2 { font-size: 15px; }
    .viol-left { display: flex; align-items: center; gap: 8px; }
    .viol-more { font-size: 12px; padding: 4px 8px; }

    /* ========== 内容详情页通用 ========== */
    .content-body { font-size: 14px; line-height: 1.8; }
    .content-body .intro-box { padding: 12px; font-size: 13px; border-radius: 8px; }
    .content-body h2 { font-size: 15px; margin: 16px 0 8px; }
    .content-body .info-grid { grid-template-columns: 1fr; gap: 6px; padding: 10px; }
    .content-body .info-grid .gi { font-size: 12px; }
    .content-body figure { padding: 8px; margin: 12px 0; }
    .content-body figcaption { font-size: 11px; margin-top: 6px; }
}
/* === 懒加载动画 === */
.lazy { opacity: 0.3; transition: opacity .3s ease; }
.lazy-loaded { opacity: 1; }