/* ========================================
   m4-detailx.css - 详情页专属样式 (Mobile-first)
   ======================================== */

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

/* ========== Main Card ========== */
.main-card{background:#1a1a2e;border-radius:12px;padding:14px;border:1px solid rgba(255,255,255,.04);margin-bottom:18px;}

/* ========== Content Body ========== */
.content-body{line-height:1.9;font-size:14px;color:#c0c0d0;}
.content-body .intro-box{padding:14px 16px;background:rgba(255,255,255,.03);border-radius:10px;margin-bottom:16px;border-left:3px solid #e94560;color:#a0a0b0;font-size:14px;}
.content-body .intro-box strong{color:#e0e0e0;}
.content-body p{margin:12px 0;}
.content-body h2{font-size:15px;font-weight:600;color:#fff;margin:20px 0 10px;}
.content-body h2 em{font-style:normal;color:#e94560;}
.content-body figure{margin:16px 0;text-align:center;background:rgba(255,255,255,.02);border-radius:10px;padding:10px;border:1px solid rgba(255,255,255,.04);}
.content-body figure img{max-width:100%;height:auto;border-radius:8px;}
.content-body figcaption{font-size:12px;color:#5a5a70;margin-top:8px;}
.content-body .info-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:12px 0;padding:12px;background:rgba(255,255,255,.02);border-radius:8px;}
.content-body .info-grid .gi{font-size:12px;color:#8a8aa0;}
.content-body .info-grid .gi strong{color:#d0d0e0;font-weight:500;}

/* ========== Tags Section ========== */
.tag-section{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.tag-section a{display:inline-block;padding:4px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:20px;font-size:11px;color:#8a8aa0;transition:all .2s;}
.tag-section a:hover{background:rgba(233,69,96,.12);border-color:rgba(233,69,96,.2);color:#e94560;}

/* ========== Related ========== */
.rel-section{margin-bottom:18px;}
.rel-section > h2{font-size:15px;font-weight:600;color:#fff;margin-bottom:12px;}
.rel-section > h2 em{font-style:normal;color:#e94560;}
.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.rel-card{background:#1a1a2e;border-radius:10px;overflow:hidden;transition:all .25s;border:1px solid rgba(255,255,255,.04);}
.rel-card:hover{transform:translateY(-3px);border-color:rgba(233,69,96,.2);box-shadow:0 8px 24px rgba(0,0,0,.3);}
.rel-card .rc-img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .3s;background:#13132a;}
.rel-card:hover .rc-img{transform:scale(1.06);}
.rel-card .rc-img-wrap{overflow:hidden;}
.rel-card .rc-body{padding:5px 6px 7px;}
.rel-card .rc-body h3{font-size:12px;font-weight:500;color:#d0d0e0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rel-card .rc-body .rc-meta{font-size:11px;color:#5a5a70;margin-top:2px;}

/* ========== Comments ========== */
.m4-comment-section{margin-bottom:18px;}
.m4-comment-section h3{font-size:15px;font-weight:600;color:#fff;margin-bottom:12px;}
.m4-comment-section h3 em{font-style:normal;color:#e94560;}
.m4-comment-item{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.m4-comment-item:last-child{border-bottom:none;}
.m4-comment-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.m4-comment-head img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#13132a;}
.m4-comment-head .cn{font-size:13px;font-weight:500;color:#d0d0e0;}
.m4-comment-head .ct{font-size:12px;color:#5a5a70;margin-left:auto;}
.m4-comment-text{font-size:14px;color:#a0a0b0;line-height:1.6;margin-left:0;}

/* ========== game-module (短剧对比模块) 手机端基础 ========== */
.game-module{max-width:1180px;margin:0 auto;color:#333!important;line-height:1.7;font-family:'Noto Sans SC',system-ui,-apple-system,sans-serif;background:#fff;border-radius:8px;padding:10px 12px}
.game-module .params-container{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 0 16px}
.game-module .param-box{display:flex;flex-direction:row;padding-left:10px;align-items:center;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden}
.game-module .param-left{width:72px;height:72px;background-size:cover;background-position:center;flex-shrink:0;border-radius:6px}
.game-module .param-right{padding:10px;flex:1;min-width:0}
.game-module .param-right h3{font-size:14px;margin:0 0 4px;color:#222;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-module .m4-meta-item{display:flex;justify-content:space-between;margin:8px 0;font-size:15px}
.game-module .m4-meta-label{color:#666}
.game-module .m4-meta-value{font-weight:600;color:#e74c3c}
.game-module .description-box{padding:14px;font-size:14px;color:#444;text-align:justify}
.game-module .tabs{display:flex;overflow:hidden;background:#f8f9fa;border-top:1px solid #eee;border-bottom:1px solid #eee}
.game-module .m4-tab-item{flex:1;min-width:0;padding:12px 6px;text-align:center;cursor:pointer;font-weight:500;color:#666;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .3s}
.game-module .m4-tab-item.active{background:#fff;color:#e74c3c;border-bottom:3px solid #e74c3c}
.game-module .m4-tab-content{display:none;padding:16px 0}
.game-module .m4-tab-content.active{display:block!important}
.game-module .article-content h2{font-size:17px;margin:20px 0 10px;color:#2c3e50;border-left:4px solid #e74c3c;padding-left:16px}
.game-module .article-content p{margin-bottom:14px}
.game-module .comments-splice{margin-top:20px;padding-top:16px;border-top:1px dashed #ddd}
.game-module .comments-splice h3{margin-bottom:14px;color:#222;font-size:16px}
.game-module .m4-comment-splice-item{padding:12px 0;border-bottom:1px solid #f0f0f0;font-size:14px}
.game-module .m4-comment-splice-item:last-child{border-bottom:none}
.game-module .m4-comment-header{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13px;color:#888}
.game-module .m4-comment-author{color:#e74c3c;font-weight:500}

/* ========== 平板 (≥768px) ========== */
@media(min-width:768px){
    .wrap{padding:0 20px;}
    .main-card{padding:20px;border-radius:14px;margin-bottom:22px;}
    .content-body{font-size:15px;}
    .content-body h2{font-size:17px;margin:24px 0 12px;}
    .content-body .info-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:16px;}
    .content-body .info-grid .gi{font-size:13px;}
    .rel-grid{grid-template-columns:repeat(3,1fr);gap:12px;}
    .rel-section{margin-bottom:22px;}
    .rel-section > h2{font-size:16px;margin-bottom:14px;}
    .rel-card .rc-body{padding:6px 8px 8px;}
    .rel-card .rc-body h3{font-size:13px;}
    .m4-comment-section{margin-bottom:22px;}
    .m4-comment-section h3{font-size:16px;}
    .m4-comment-item{padding:14px 0;}
    .m4-comment-head img{width:28px;height:28px;}
    .m4-comment-text{margin-left:36px;}
    .tag-section{margin-bottom:20px;gap:8px;}
    .tag-section a{font-size:12px;padding:5px 12px;}
    .game-module{border-radius:10px;padding:14px 16px}
    .game-module .params-container{gap:14px;padding:8px 0 20px}
    .game-module .param-box{padding-left:12px}
    .game-module .param-left{width:88px;height:88px}
    .game-module .param-right{padding:12px}
    .game-module .param-right h3{font-size:16px;margin-bottom:6px}
    .game-module .tabs{overflow:visible}
    .game-module .m4-tab-item{padding:14px 16px;font-size:13px;white-space:normal;overflow:visible;text-overflow:clip}
    .game-module .m4-tab-content{padding:24px 0}
    .game-module .description-box{padding:0 0 25px;font-size:15px}
    .game-module .article-content h2{font-size:18px;margin:24px 0 12px}
    .game-module .comments-splice{margin-top:30px;padding-top:18px}
    .game-module .comments-splice h3{font-size:17px}
    .game-module .m4-comment-splice-item{padding:14px 0;font-size:14px}
}

/* ========== 桌面 (≥960px) ========== */
@media(min-width:960px){
    .main-card{padding:24px;margin-bottom:24px;}
    .content-body .info-grid{gap:12px;}
    .rel-grid{grid-template-columns:repeat(4,1fr);gap:14px;}
    .rel-card .rc-body{padding:8px 10px 10px;}
    .rel-card .rc-body h3{font-size:13px;}
    .tag-section{margin-bottom:24px;}
    .game-module{border-radius:12px;padding:20px 24px}
    .game-module .params-container{gap:20px;padding:10px 0 30px}
    .game-module .param-box{padding-left:16px}
    .game-module .param-left{width:120px;height:120px}
    .game-module .param-right{padding:20px}
    .game-module .param-right h3{font-size:20px;margin-bottom:12px}
    .game-module .m4-tab-item{padding:16px 18px;font-size:14px}
    .game-module .m4-tab-content{padding:30px 0}
    .game-module .description-box{padding:0 0 30px;font-size:15.5px}
    .game-module .article-content h2{font-size:20px;margin:28px 0 14px}
    .game-module .comments-splice{margin-top:35px}
    .game-module .comments-splice h3{font-size:18px;margin-bottom:16px}
    .game-module .m4-comment-splice-item{padding:15px 0;font-size:14.5px}
}

@media (max-width: 767px) {
    .game-module .params-container {
        grid-template-columns: 1fr !important;
    }
    .game-module .param-box {
        flex-direction: column !important;
        align-items: stretch !important;
        padding-left: 0 !important;
    }
    .game-module .param-left {
        width: 100% !important;
        height: 140px !important;
        margin-bottom: 8px !important;
    }
    .game-module .param-right {
        flex: none !important;
        padding: 10px !important;
        min-width: 0 !important;
    }
}