/* =========================================================
   微信小游戏大全 wxminigame —— 科技蓝浅色风（贴合主站 #1890ff）
   前缀 wxmg-，复用主站 :root 变量与 .btn/.btn-primary/.pagination 等基础组件
   ========================================================= */

.wxmg-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* ---------- 首页 Hero ---------- */
.wxmg-hero {
    background: linear-gradient(135deg, var(--primary-color), #36cfc9);
    border-radius: var(--radius);
    padding: 40px 36px;
    color: #fff;
    text-align: center;
    margin: 24px 0 28px;
    box-shadow: var(--shadow);
}
.wxmg-hero h1 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.wxmg-hero p {
    font-size: 15px;
    line-height: 1.8;
    opacity: 0.95;
    max-width: 720px;
    margin: 0 auto 22px;
}

/* ---------- 搜索框 ---------- */
.wxmg-search {
    display: flex;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
}
.wxmg-search input {
    flex: 1;
    height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.wxmg-search input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}
.wxmg-search .btn {
    height: 44px;
    padding: 0 24px;
    border-radius: var(--radius);
    font-size: 15px;
    white-space: nowrap;
}

/* ---------- 分类导航（首页入口） ---------- */
.wxmg-cat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.wxmg-cat-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    color: var(--text-color);
    font-size: 14px;
    transition: all 0.25s;
}
.wxmg-cat-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: #e6f4ff;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* ---------- 区块（section_block 宏） ---------- */
.wxmg-block {
    background: var(--white);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}
.wxmg-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    border-left: 4px solid var(--primary-color);
    padding-left: 12px;
}
.wxmg-block-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.4;
}
.wxmg-block-more {
    font-size: 13px;
    color: var(--primary-color);
    white-space: nowrap;
}
.wxmg-block-more:hover {
    color: var(--primary-hover);
}

/* ---------- 游戏网格 ---------- */
.wxmg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
/* 首页「小游戏推荐」：桌面 5 列 → 5 个刚好一排；
   ≤1024 变 4 列、≤768 变 2 列，这两种列数下 5 个都会多出 1 个落单，
   所以非桌面端只显示前 4 个（4÷4、4÷2 都能整除，排版对齐）。 */
@media (max-width: 1024px) {
    .wxmg-grid-featured .wxmg-card:nth-child(n+5) { display: none; }
}

/* ---------- 游戏卡片 ---------- */
.wxmg-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--text-color);
    transition: all 0.25s;
}
.wxmg-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 6px 18px rgba(24, 144, 255, 0.18);
    transform: translateY(-3px);
}
.wxmg-card-cover {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 封面 */
    background: #f5f7fa;
    overflow: hidden;
}
.wxmg-card-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wxmg-card-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    background: linear-gradient(135deg, #e6f4ff, #f0f5ff);
}
.wxmg-card-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wxmg-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wxmg-card-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}
.wxmg-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    margin-top: 2px;
}
.wxmg-star {
    color: #faad14;
    font-weight: 600;
}
.wxmg-tag-cps,
.wxmg-tag-new {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}
.wxmg-tag-cps {
    background: #fff1f0;
    color: var(--danger-color);
    border: 1px solid #ffccc7;
}
.wxmg-tag-new {
    background: #f6ffed;
    color: var(--success-color);
    border: 1px solid #b7eb8f;
}

/* ---------- 列表页工具栏 ---------- */
.wxmg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 20px 0 16px;
}
.wxmg-toolbar .wxmg-search {
    flex: 1;
    min-width: 240px;
    max-width: 460px;
    margin: 0;
}
.wxmg-filters {
    display: flex;
    gap: 10px;
}
.wxmg-filters select {
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 14px;
    color: var(--text-color);
    cursor: pointer;
    outline: none;
}
.wxmg-filters select:focus {
    border-color: var(--primary-color);
}
.wxmg-count {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.wxmg-count b {
    color: var(--primary-color);
}
.wxmg-empty {
    background: var(--white);
    border-radius: var(--radius);
    padding: 48px 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 15px;
    box-shadow: var(--shadow);
}

/* ---------- 分类页头部 ---------- */
.wxmg-cat-head {
    background: var(--white);
    border-radius: var(--radius);
    padding: 28px 30px;
    margin: 24px 0 24px;
    box-shadow: var(--shadow);
    border-left: 5px solid var(--primary-color);
}
.wxmg-cat-head h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 8px;
}
.wxmg-cat-head p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ---------- 详情页 ---------- */
.wxmg-detail {
    display: flex;
    gap: 24px;
    margin-top: 20px;
    align-items: flex-start;
}
.wxmg-detail-main {
    flex: 1;
    min-width: 0;
}
.wxmg-detail-side {
    width: 320px;
    flex-shrink: 0;
}
.wxmg-detail-head {
    display: flex;
    gap: 24px;
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}
.wxmg-detail-cover {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: #f5f7fa;
}
.wxmg-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wxmg-detail-cover .wxmg-card-noimg {
    position: static;
    width: 100%;
    height: 100%;
    font-size: 60px;
}
.wxmg-detail-info {
    flex: 1;
    min-width: 0;
}
.wxmg-detail-info h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 12px;
}
.wxmg-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.wxmg-chip {
    display: inline-block;
    padding: 3px 10px;
    background: #f0f5ff;
    color: var(--primary-color);
    border-radius: 12px;
    font-size: 12px;
}
.wxmg-chip.wxmg-star {
    background: #fffbe6;
    color: #faad14;
}
.wxmg-chip.wxmg-tag-cps {
    background: #fff1f0;
    color: var(--danger-color);
}
.wxmg-detail-sub {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
}
.wxmg-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 46px;
    padding: 0 28px;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
}
.wxmg-detail-content {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-color);
}
.wxmg-detail-content p {
    margin-bottom: 12px;
}

/* ---------- 截图 ---------- */
.wxmg-shots-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    /* 兜底：轮播条绝不允许把父级撑宽（手机端溢出元凶） */
    max-width: 100%;
    overflow: hidden;
}
.wxmg-shots {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    /* ⚠️ 核心修复：flex 子项默认 min-width:auto，会被内容（截图卡）撑到最小宽度，
       导致 overflow-x:auto 失效、父容器被撑出横向滚动条。必须显式 min-width:0。 */
    min-width: 0;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.wxmg-shots::-webkit-scrollbar { height: 6px; }
.wxmg-shots::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }
.wxmg-shot {
    flex: 0 0 auto;
    width: 260px;
    max-width: 100%;      /* 卡片永远不超过容器宽度 */
    min-width: 0;
}
.wxmg-shot img {
    width: 260px;
    max-width: 100%;
    height: 170px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    object-fit: cover;
    display: block;
}
.wxmg-shot-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: #fff;
    color: #555;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.wxmg-shot-btn:hover { background: #f0f0f0; }

   /* ---------- 游戏视频（远程 URL 直接播，不下载） ---------- */
   .wxmg-video {
       position: relative;
       width: 100%;
       max-width: min(720px, 100%);
       aspect-ratio: 16 / 9;
       background: #000;
       border-radius: var(--radius);
       overflow: hidden;
   }
   .wxmg-video video {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: var(--radius);
       display: block;
   }

   /* ---------- 子分类导航 ---------- */
   .wxmg-subcat-nav {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 8px 10px;
       margin: 4px 0 18px;
   }
   .wxmg-subcat-label {
       color: #888;
       font-size: 13px;
   }
   .wxmg-subcat-btn {
       display: inline-block;
       padding: 5px 12px;
       border: 1px solid var(--border-color);
       border-radius: 999px;
       color: #444;
       font-size: 13px;
       text-decoration: none;
       transition: all .15s;
   }
   .wxmg-subcat-btn:hover {
       border-color: #1890ff;
       color: #1890ff;
   }

   /* ---------- 列表页标签筛选 ---------- */
   .wxmg-tag-filter {
       display: flex;
       flex-wrap: wrap;
       gap: 8px 10px;
       margin: 0 0 16px;
   }
   .wxmg-tag-filter .wxmg-tag {
       background: #f3f6fb;
       border-color: transparent;
   }
   .wxmg-tag-filter .wxmg-tag:hover {
       background: #e6f0ff;
   }

/* ---------- 官方榜单 ---------- */
.wxmg-rank-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wxmg-rank-list li {
    padding: 10px 14px;
    background: #fafafa;
    border-radius: var(--radius);
    border-left: 3px solid var(--primary-color);
    font-size: 14px;
    color: var(--text-color);
}

/* ---------- 详情页「{{游戏名}}排名」板块 ----------
   数据源与 /rank 页同源（WxmgRanking 快照）；榜单名样式照抄 rank 页：
   两侧 Union 装饰图标（.icon__item，mask 渲染榜单主色）+ 官网主色文字，可点进该榜。 */
.wxmg-rank-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
}
.wxmg-rank-item {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #f2f2f2;
    border-radius: 10px;
    transition: background-color .15s, border-color .15s;
}
.wxmg-rank-item:hover { background: #f5f8fc; border-color: #e3ecf7; }
.wxmg-rank-item__icon { width: 8px; height: 17px; margin: 0 5px; }
.wxmg-rank-item__icon.rotateY { transform: rotateY(180deg); transform-origin: center center; }
.wxmg-rank-item__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.wxmg-rank-item__name:hover { text-decoration: underline; }
.wxmg-rank-item__no {
    margin-left: auto;
    padding-left: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.wxmg-rank-item__no b { color: var(--text-color); font-size: 15px; }
@media (max-width: 900px) {
    .wxmg-rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .wxmg-rank-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- 侧栏相似列表 ---------- */
.wxmg-side-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wxmg-side-list .wxmg-card {
    flex-direction: row;
    align-items: center;
}
.wxmg-side-list .wxmg-card-cover {
    width: 64px;
    height: 64px;
    padding-top: 0;
    flex-shrink: 0;
}
.wxmg-side-list .wxmg-card-cover img {
    position: static;
}
.wxmg-side-list .wxmg-card-body {
    padding: 8px 10px;
}
.wxmg-side-list .wxmg-card-desc {
    display: none;
}
.wxmg-side-list .wxmg-card:hover {
    transform: none;
}

/* ---------- 标签云 ---------- */
/* 标签云：多行弹幕式水平自动滚动（GPU 合成，不卡） */
.wxmg-tag-marquee { display: flex; flex-direction: column; gap: 8px; }
.wxmg-tag-row {
    overflow: hidden;
    white-space: nowrap;
    padding: 1px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.wxmg-tag-track {
    display: inline-flex;
    will-change: transform;
    animation: wxmg-tag-scroll 30s linear infinite;
}
.wxmg-tag-track.rev { animation-name: wxmg-tag-scroll-rev; }
.wxmg-tag-marquee:hover .wxmg-tag-track { animation-play-state: paused; }
.wxmg-tag-track .wxmg-tag { flex: 0 0 auto; margin-right: 10px; }
@keyframes wxmg-tag-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes wxmg-tag-scroll-rev {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}
.wxmg-tag {
    display: inline-block;
    padding: 6px 14px;
    background: #f0f5ff;
    border: 1px solid #d6e4ff;
    border-radius: 16px;
    color: var(--primary-color);
    font-size: 13px;
    transition: all 0.2s;
}
.wxmg-tag:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 1024px) {
    .wxmg-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .wxmg-detail-side {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .wxmg-wrap {
        padding: 0 12px 28px;
    }
    .wxmg-hero {
        padding: 28px 20px;
        margin: 16px 0 20px;
    }
    .wxmg-hero h1 {
        font-size: 24px;
    }
    .wxmg-search {
        flex-direction: column;
    }
    .wxmg-search .btn {
        width: 100%;
    }
    .wxmg-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .wxmg-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .wxmg-toolbar .wxmg-search {
        max-width: none;
    }
    .wxmg-filters {
        flex-wrap: wrap;
    }
    .wxmg-filters select {
        flex: 1;
        min-width: 120px;
    }
    .wxmg-detail {
        flex-direction: column;
    }
    .wxmg-detail-main,
    .wxmg-detail-side {
        width: 100%;
    }
    .wxmg-detail-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 18px;
    }
    .wxmg-detail-cover {
        width: 120px;
        height: 120px;
    }
    .wxmg-detail-tags {
        justify-content: center;
    }
    .wxmg-play-btn {
        width: 100%;
        justify-content: center;
    }
    .wxmg-block {
        padding: 16px 14px;
    }
    .wxmg-block-title {
        font-size: 17px;
    }
}

/* ===== 即点即玩二维码 / 分类行 / 动态 / 商业模式 ===== */
.wxmg-play-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.wxmg-play-hint {
    flex-basis: 100%;
    margin: 0;
    padding: 10px 14px;
    background: #fff7e6;
    border: 1px solid #ffe58f;
    border-radius: 8px;
    color: #ad6800;
    font-size: 13px;
    line-height: 1.6;
}
.wxmg-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
}
.wxmg-qr #wxmg-qrcode {
    width: 132px;
    height: 132px;
    line-height: 0;
}
.wxmg-qr #wxmg-qrcode img,
.wxmg-qr #wxmg-qrcode canvas {
    display: block;
    width: 132px !important;
    height: 132px !important;
}
.wxmg-qr-tip {
    margin: 10px 0 0;
    font-size: 14px;
    color: #000;
}
.wxmg-detail-cat {
    margin: 6px 0 0;
    font-size: 13px;
    color: #666;
}
.wxmg-chip.wxmg-rec {
    background: #f6ffed;
    color: #52c41a;
}
.wxmg-dyn-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wxmg-dyn-item {
    padding: 12px 14px;
    background: #fafbfc;
    border: 1px solid #eef0f3;
    border-radius: 10px;
}
.wxmg-dyn-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}
.wxmg-dyn-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    word-break: break-word;
}
.wxmg-dyn-kv {
    margin: 2px 0;
    font-size: 13px;
    color: #555;
    word-break: break-word;
}
.wxmg-dyn-k {
    color: #999;
    margin-right: 4px;
}
.wxmg-biz-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wxmg-biz-list .wxmg-tag {
    background: #f0f5ff;
    color: var(--primary-color);
}

/* ===== 微信中转桥页 /bridge/<slug> ===== */
.wxmg-bridge {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin: 20px 0 40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.wxmg-bridge-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.wxmg-bridge-cover {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.wxmg-bridge-info h1 {
    font-size: 20px;
    margin: 0 0 6px;
}

.wxmg-bridge-sub {
    color: #888;
    font-size: 13px;
    margin: 0;
    line-height: 1.6;
}

.wxmg-bridge-status {
    margin: 18px 0 8px;
    padding: 10px 12px;
    background: #f6f8fa;
    border-left: 3px solid var(--primary-color);
    border-radius: 4px;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

.wxmg-bridge-acts {
    margin-top: 8px;
}

@media (max-width: 768px) {
    .wxmg-bridge {
        padding: 16px;
    }

    .wxmg-bridge-cover {
        width: 56px;
        height: 56px;
    }
}

/* ===== 左右布局（对齐 scenic 的 .scenic-page） ===== */
.page-wrap { width: 100%; }
.wxmg-page { max-width: 1200px; margin: 0 auto 40px; padding: 0; display: flex; gap: 24px; align-items: flex-start; box-sizing: border-box; width: 100%; overflow-x: hidden; }
.wxmg-main { flex: 1; min-width: 0; }
.wxmg-sidebar { width: 300px; flex: 0 0 300px; }
/* 无侧栏通栏页（/games、/cat/x、/tag/x）：不参与左右布局，整页单列铺满。
   ⚠️ max-width 必须与首页 .wxmg-page 一致（1200px），否则三处页面左右边缘错位。 */
.wxmg-page-full { display: block; max-width: 1200px; }
.wxmg-page-full .wxmg-lp-head { padding: 24px 28px; }
/* 搜索组：搜索框（搜索始终是「搜全站」，不提示任何范围） */
.wxmg-lp-searchbox { flex: 0 1 420px; min-width: 0; }
.wxmg-lp-searchbox .wxmg-lp-search { flex: 1 1 auto; }

/* 首页标题头 */
.wxmg-header { background: linear-gradient(135deg, #1890ff, #0056b3); color: #fff; border-radius: 8px; padding: 24px; margin-bottom: 20px; text-align: center; }
.wxmg-header h1 { margin: 0 0 8px; font-size: 26px; }
.wxmg-header p { margin: 0; opacity: .9; font-size: 14px; }

/* 分类页 / 排行榜页头（融入主区） */
.wxmg-cat-head { background: var(--white); border-radius: var(--radius); padding: 24px 28px; margin: 24px 0 18px; box-shadow: var(--shadow); border-left: 5px solid var(--primary-color); }
.wxmg-cat-head h1 { font-size: 24px; font-weight: 700; color: var(--text-color); margin-bottom: 8px; }
.wxmg-cat-head p { font-size: 14px; color: var(--text-secondary); margin: 0; }

/* 卡片类型标签 / 推荐数徽标 */
.wxmg-card-type { font-size: 12px; color: var(--primary-color); background: #e6f4ff; border-radius: 10px; padding: 1px 8px; display: inline-block; margin-bottom: 2px; }
.wxmg-tag-rec { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1.6; background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }

/* ===== 侧栏卡片 ===== */
.wxmg-side-card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.wxmg-side-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; padding-left: 10px; border-left: 4px solid var(--primary-color); }
.wxmg-side-search { display: flex; gap: 8px; }
.wxmg-side-search input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 13px; outline: none; }
.wxmg-side-search input:focus { border-color: var(--primary-color); }
.wxmg-side-search .btn { height: 38px; padding: 0 16px; font-size: 13px; }
.wxmg-side-cats { display: flex; flex-direction: column; gap: 14px; }
.wxmg-side-cat-link { display: block; font-size: 15px; font-weight: 600; color: var(--text-color); text-decoration: none; margin-bottom: 2px; }
.wxmg-side-cat-link:hover { color: var(--primary-color); }
.wxmg-side-subcats { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; padding-left: 4px; }
.wxmg-side-subcat { font-size: 13px; line-height: 1.5; color: #555; text-decoration: none; background: #f3f6fb; border-radius: 14px; padding: 5px 13px; }
.wxmg-side-subcat:hover { background: var(--primary-color); color: #fff; }
.wxmg-side-tools { display: flex; flex-direction: column; gap: 8px; }
.wxmg-side-tool { display: flex; align-items: center; padding: 8px 10px; background: #f8f9fa; border-radius: 8px; text-decoration: none; transition: all .2s; }
.wxmg-side-tool:hover { background: #e8f4ff; }
.wxmg-side-tool-icon { width: 32px; height: 32px; margin-right: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 32px; }
.wxmg-side-tool-icon img { width: 100%; height: 100%; object-fit: contain; }
.wxmg-side-tool-name { color: #333; font-size: 14px; }
.wxmg-side-tool:hover .wxmg-side-tool-name { color: var(--primary-color); }

/* 页面简介 / 排序条 / 子分类联动 */
.wxmg-intro-text { font-size: 14px; line-height: 1.9; color: #555; margin: 0; }
.wxmg-sortbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.wxmg-sort-label { font-size: 13px; color: #888; }
.wxmg-sort-btn { display: inline-block; padding: 5px 14px; border: 1px solid var(--border-color); border-radius: 999px; color: #555; font-size: 13px; text-decoration: none; transition: all .15s; }
.wxmg-sort-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.wxmg-sort-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.wxmg-subcat-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* 首页「小游戏排行榜」板块容器：对齐官网 .game-list（纵向、条目自带内边距，无额外间距） */
.wxmg-rank-list-grid { display: flex; flex-direction: column; gap: 0; width: 100%; }
.wxmg-rank-type { font-size: 12px; color: var(--primary-color); margin: 2px 0; }

/* 排行榜 tab */
.wxmg-rank-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.wxmg-rank-tab { display: inline-block; padding: 6px 16px; border: 1px solid var(--border-color); border-radius: 999px; color: #555; font-size: 14px; text-decoration: none; transition: all .15s; }
.wxmg-rank-tab:hover { border-color: var(--primary-color); color: var(--primary-color); }
.wxmg-rank-tab.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.wxmg-rank-tabs-cat { margin-top: 0; }

/* 首页排行榜板块下的所有榜单快捷入口 */
.wxmg-rank-tabs-home { margin-top: 14px; }

/* ===== 详情页多色标签 / 网友评分 / 推荐 ===== */
.wxmg-detail-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.wxmg-detail-titlerow h1 { margin-bottom: 0; }
.wxmg-mini-badge { display: inline-block; padding: 3px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #1890ff, #36cfc9); }
.wxmg-chip-cat { background: #f0f5ff; color: var(--primary-color); }
.wxmg-biz-label { background: #fafafa; color: #888; }
.wxmg-biz-chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; color: #fff; }
.wxmg-biz-1 { background: #ff7a45; }
.wxmg-biz-2 { background: #36cfc9; }
.wxmg-biz-3 { background: #9254de; }
.wxmg-biz-4 { background: #52c41a; }
.wxmg-biz-5 { background: #faad14; }
/* 评分区高度锁死：星星行 24px + 提示行 18px + 行间距 10px = 52px，
   「未评分」和「已评分」两种状态下几何完全一致，点击星星后整块不会变高。 */
.wxmg-rate-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; min-height: 52px; align-content: center; }
.wxmg-rate-label { font-size: 14px; color: var(--text-secondary); }
.wxmg-stars { display: inline-flex; gap: 2px; cursor: pointer; font-size: 20px; line-height: 24px; height: 24px; color: #d9d9d9; }
.wxmg-stars i { font-style: normal; transition: color .15s; }
.wxmg-stars i.on { color: #faad14; }
.wxmg-stars.disabled { cursor: default; }
.wxmg-stars.disabled i { pointer-events: none; }
/* 分数固定最小宽度：0.0 分 → 10.0 分 不会把后面的提示文字挤换行 */
.wxmg-rate-val { font-size: 14px; font-weight: 600; color: #fa8c16; min-width: 46px; display: inline-block; }
/* 提示行：固定 18px 高 + 永不换行（过长省略），保证评分前后整块高度一致 */
.wxmg-rate-tip {
    font-size: 12px;
    color: #999;
    flex: 0 0 100%;
    height: 18px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wxmg-vote-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 132px; padding: 0 20px; border: 1px solid var(--primary-color); border-radius: var(--radius); background: #fff; color: var(--primary-color); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .2s; }
.wxmg-vote-btn:hover { background: #e6f4ff; }
.wxmg-vote-btn.voted { background: var(--primary-color); color: #fff; }

/* ===== FAQ ===== */
.wxmg-faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wxmg-faq-item {
    padding: 12px 14px;
    background: #fafbfc;
    border: 1px solid #eef0f3;
    border-radius: 10px;
}
.wxmg-faq-q {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 6px;
}
.wxmg-faq-a {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
}
.wxmg-faq-a::before { content: ''; }

/* ===== 详情页合并区：基本 + 简介 + 相关标签（5 行结构） ===== */
.wxmg-detail-meta1 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.wxmg-detail-meta1 b {
    color: var(--text-color);
    font-weight: 600;
}
/* 第五排：官方 vs 网友 数据对比块（2×2 网格，区别于标签胶囊） */
.wxmg-detail-cmp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 30px;
    background: #fafbfc;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 16px 20px;
    width: 100%;
    max-width: 460px;
    /* 网格子项撑宽是手机端横向溢出的常见原因，这里显式允许收缩 */
    min-width: 0;
    overflow: hidden;
}
.wxmg-cmp-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.wxmg-cmp-label {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    letter-spacing: .5px;
}
.wxmg-cmp-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.2;
    /* 千分位数字（如 13,375 人）在窄屏必须能换行/缩小，否则撑破对比块。
       word-break 让长数字断开，min-width:0 让 grid 子项允许收缩。 */
    min-width: 0;
    word-break: break-all;
}
.wxmg-cmp-val.wxmg-cmp-score { color: #fa8c16; }
.wxmg-cmp-val.wxmg-cmp-rec { color: #389e0d; }
.wxmg-cmp-cell .wxmg-vote-btn { align-self: flex-start; }
.wxmg-cmp-cell .wxmg-rate-box { margin: 0; }
.wxmg-detail-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.wxmg-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
    cursor: pointer;
}
.wxmg-pill-cat {
    background: #e6f4ff;
    color: var(--primary-color);
    border: 1px solid #91d5ff;
}
.wxmg-pill-cat:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
.wxmg-pill-tag {
    background: #fff7e6;
    color: #fa8c16;
    border: 1px solid #ffd591;
}
.wxmg-pill-tag:hover {
    background: #fa8c16;
    color: #fff;
    border-color: #fa8c16;
}
.wxmg-detail-intro {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-color);
    margin-bottom: 18px;
}
.wxmg-detail-intro p {
    margin: 0 0 10px;
}
.wxmg-detail-act {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px dashed #e8e8e8;
}
.wxmg-act-left {
    flex: 0 0 auto;
}
.wxmg-act-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;        /* 二维码在其列内水平居中 */
    justify-content: center;    /* 与左侧对比块垂直居中对齐 */
}
.wxmg-act-right .wxmg-rate-box {
    margin: 0;
}
/* 电脑端展示二维码 / 手机端展示「立即玩」按钮（互斥切换） */
.wxmg-pc-only {
    display: flex;
}
.wxmg-mobile-only {
    display: none;
}
.wxmg-vote-down {
    border-color: #ff7875;
    color: #ff4d4f;
}
.wxmg-vote-down:hover {
    background: #fff1f0;
}
.wxmg-vote-btn:disabled,
.wxmg-vote-btn.voted {
    opacity: .8;
    cursor: default;
}


/* ==========================================================================
   微信小游戏「官网排行榜」样式 —— 100% 照抄 xiaoyouxi.qq.com
   数值全部来自 2026-09-30 实抓官网 <style> 内联 CSS，改动前必须实抓核对。
   官网设计变量（真值）：
     --wg_blue #10AEEF   --wg_clear_orange #FA9D3B  --wg_orange #F06B1F
     --wg_wx_brand #07C160  --wg_red #FA5151  --wg_gold #E6AF00
     --wg_background_color_1 #F7F7F7   --wg_background_color_2 #FFFFFF
     --wg_foreground_color_0 rgba(0,0,0,.9)   --wg_foreground_color_1 rgba(0,0,0,.55)
     --wg_foreground_color_2 rgba(0,0,0,.3)   --wg_foreground_color_3 rgba(0,0,0,.1)
     --wg_border_radius_game 25%   --wg_border_radius_minigame 50%   --wg_border_radius_0_5_a 4px
   ========================================================================== */
.wxmg-xyx { width: 100%; }

/* --- 官网标题两侧装饰图标（Union.svg 5x13，mask 渲染榜单主色） --- */
.icon__item {
    display: inline-block;
    flex-shrink: 0;
    background-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='5' height='13' viewBox='0 0 5 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.98718 4.14178C3.45956 3.69441 3.12752 3.04435 3.12752 2.32083C3.12752 1.59738 3.4595 0.947372 3.98704 0.5C4.51466 0.947376 4.84669 1.59744 4.84669 2.32095C4.84669 3.0444 4.51472 3.69441 3.98718 4.14178ZM3.205 5.85567C2.52374 5.73129 1.91024 5.33387 1.54745 4.70729C1.1847 4.08076 1.14627 3.35232 1.37881 2.70186C2.06007 2.82624 2.67357 3.22366 3.03636 3.85024C3.39911 4.47677 3.43754 5.20521 3.205 5.85567ZM1.15161 7.50563C1.77997 7.86739 2.51056 7.90568 3.16291 7.67373C3.03814 6.99448 2.6396 6.38279 2.0113 6.02106C1.38294 5.65931 0.652349 5.62101 0 5.85296C0.124766 6.53222 0.523304 7.14391 1.15161 7.50563ZM5.00005 11.6428C4.55141 12.1689 3.8995 12.5 3.17393 12.5C2.44842 12.5 1.79656 12.169 1.34792 11.6429C1.79657 11.1168 2.44848 10.7857 3.17405 10.7857C3.89955 10.7857 4.55141 11.1167 5.00005 11.6428ZM1.68825 10.0753C2.38909 10.2625 3.10473 10.111 3.67464 9.71856C3.37782 9.09465 2.8341 8.60666 2.13331 8.41942C1.43247 8.23216 0.716836 8.38372 0.146918 8.77613C0.443737 9.40004 0.987463 9.88803 1.68825 10.0753Z' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='5' height='13' viewBox='0 0 5 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.98718 4.14178C3.45956 3.69441 3.12752 3.04435 3.12752 2.32083C3.12752 1.59738 3.4595 0.947372 3.98704 0.5C4.51466 0.947376 4.84669 1.59744 4.84669 2.32095C4.84669 3.0444 4.51472 3.69441 3.98718 4.14178ZM3.205 5.85567C2.52374 5.73129 1.91024 5.33387 1.54745 4.70729C1.1847 4.08076 1.14627 3.35232 1.37881 2.70186C2.06007 2.82624 2.67357 3.22366 3.03636 3.85024C3.39911 4.47677 3.43754 5.20521 3.205 5.85567ZM1.15161 7.50563C1.77997 7.86739 2.51056 7.90568 3.16291 7.67373C3.03814 6.99448 2.6396 6.38279 2.0113 6.02106C1.38294 5.65931 0.652349 5.62101 0 5.85296C0.124766 6.53222 0.523304 7.14391 1.15161 7.50563ZM5.00005 11.6428C4.55141 12.1689 3.8995 12.5 3.17393 12.5C2.44842 12.5 1.79656 12.169 1.34792 11.6429C1.79657 11.1168 2.44848 10.7857 3.17405 10.7857C3.89955 10.7857 4.55141 11.1167 5.00005 11.6428ZM1.68825 10.0753C2.38909 10.2625 3.10473 10.111 3.67464 9.71856C3.37782 9.09465 2.8341 8.60666 2.13331 8.41942C1.43247 8.23216 0.716836 8.38372 0.146918 8.77613C0.443737 9.40004 0.987463 9.88803 1.68825 10.0753Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ===== 首页榜单总览容器（抄 .static-rankcategory / .rank-list-page） ===== */
.static-rankcategory__body { display: flex; flex-direction: column; width: 100%; overflow: hidden; }
.static-rankcategory__title { color: rgba(0, 0, 0, .9); font-size: 32px; font-weight: 500; margin: 0; padding-bottom: 16px; padding-left: 40px; }
.rank-list-page__content { margin-left: auto; margin-right: auto; width: 100%; }
.rank-list-page__rank-container { border-radius: 12px; display: flex; flex-direction: column; margin-top: 8px; overflow: hidden; position: relative; width: 100%; }
.rank-list-page__list { display: flex; flex-flow: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; width: 100%; }
.rank-list-page__list__item { min-height: 454px; min-width: 240px; position: relative; width: calc(25% - 15px); }

/* ===== 榜单卡片（抄 .rank-cate-card；--card-bg-color 由模板按榜注入） ===== */
.rank-cate-card {
    background: var(--card-bg-color, #fff);
    border-radius: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    max-height: 454px;
    overflow: hidden;
    padding: 16px 8px;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
}
.rank-cate-card__content { display: flex; flex-direction: column; flex-grow: 1; height: 100%; justify-content: space-between; }
.rank-cate-card__content__title { align-items: center; display: flex; flex-direction: row; flex-shrink: 0; justify-content: center; padding: 12px 0; }
.rank-cate-card__content__title__text { font-size: 24px; font-weight: 600; line-height: 34px; margin: 0 8px; white-space: nowrap; }
.rank-cate-card__content__title__icon { flex-shrink: 0; margin-left: 2px; margin-right: 2px; height: 24px; width: 10px; }
.rank-cate-card__content__title__icon.rotate180 { transform: rotateY(180deg); transform-origin: center center; }
.rank-cate-card__content__list { height: 100%; }
.rank-cate-card__content .footer { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; position: relative; }
.rank-cate-card__content .meta { color: rgba(0, 0, 0, .55); font-size: 14px; line-height: 100%; padding-left: 24px; }
.rank-cate-card__content .meta:hover { color: rgba(0, 0, 0, .7); cursor: pointer; }
.rank-cate-card__content .meta .view-all { align-items: center; display: inline-flex; color: inherit; text-decoration: none; }
.rank-cate-card__content .meta .arrow {
    background-color: currentcolor;
    display: inline-block;
    flex-shrink: 0;
    height: 11px;
    margin-left: 4px;
    width: 6px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='7' height='12.224' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.008 12.224 0 11.216l5.12-5.104L0 1.008 1.008 0l5.44 5.44a.938.938 0 0 1 .288.688.82.82 0 0 1-.288.64l-5.44 5.456Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='7' height='12.224' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.008 12.224 0 11.216l5.12-5.104L0 1.008 1.008 0l5.44 5.44a.938.938 0 0 1 .288.688.82.82 0 0 1-.288.64l-5.44 5.456Z'/%3E%3C/svg%3E");
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
}
.game-list { display: flex; flex-direction: column; height: 100%; overflow: hidden; position: relative; width: 100%; }

/* ===== 游戏条目 .pure-game-item（官网通用基类） ===== */
.pure-game-item {
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    height: 94px;
    max-width: 100%;
    min-width: 0;
    padding: 16px;
    position: relative;
    width: 100%;
    color: rgba(0, 0, 0, .9);
    text-decoration: none;
    box-sizing: border-box;
}
.pure-game-item:hover { background: rgba(0, 0, 0, .03); }
.pure-game-item:active { background: rgba(0, 0, 0, .1); transition: .2s ease-in-out; }
.pure-game-item__icon { align-items: center; display: flex; flex-shrink: 0; height: 48px; justify-content: center; position: relative; width: 48px; }
/* 霸榜角标：绝对定位在图标左上角（官网 top:-4px / left:0） */
.pure-game-item__icon__badge {
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 10px;
    font-weight: 400;
    height: 16px;
    left: 0;
    letter-spacing: 0;
    line-height: 12px;
    min-width: 28px;
    padding: 2px 3px;
    pointer-events: none;
    position: absolute;
    text-align: center;
    top: -4px;
    width: max-content;
    z-index: 1;
}
.wg-bg-color__gold { background-color: #E6AF00; }
.pure-game-item__icon__img { background-color: #F7F7F7; border-radius: 25%; height: 100%; object-fit: cover; width: 100%; }
.pure-game-item__icon__img-minigame, .pure-game-item__icon__img-minigame::after { border-radius: 50%; }
.pure-game-item__right { display: flex; height: 100%; max-width: 100%; min-width: 0; padding-left: 12px; width: 100%; }
.pure-game-item__content { display: flex; flex: 1 1 0%; flex-direction: column; height: 100%; justify-content: flex-start; min-width: 0; position: relative; width: 100%; }
.pure-game-item__content-wrapper { display: flex; flex-direction: column; max-width: 100%; width: 100%; }
.pure-game-item__content-center { height: 100%; justify-content: center; width: 100%; }
.pure-game-item__content__title { align-items: center; display: flex; position: relative; }
/* 名次：绝对定位到内容左侧（官网 left:-4px + translateX(-100%)） */
.pure-game-item__content__title__rank-index {
    color: rgba(0, 0, 0, .9);
    display: inline-flex;
    flex-direction: column;
    font-family: DIN, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    justify-content: center;
    left: -4px;
    line-height: 16px;
    overflow: visible;
    position: absolute;
    text-align: center;
    top: 4px;
    transform: translateX(-100%);
    vertical-align: middle;
    width: 24px;
}
.pure-game-item__content__title__name { -webkit-line-clamp: 1; color: rgba(0, 0, 0, .9); font-size: 16px; font-weight: 400; line-height: 22px; }
/* 官网基础文本类（.wg-text / .wg-text__clamp）：单行截断 */
.wg-text { font-size: inherit; }
.wg-text__clamp { -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; white-space: normal; }
.pure-game-item__content__feature-list, .pure-game-item__content__game-introduction { flex-shrink: 0; margin-top: 4px; }

/* --- theme-2：首页榜单卡片内的紧凑条目（icon 48 / 行高 64px） --- */
.pure-game-item-theme-2 { align-items: center; display: flex; height: 64px; padding: 8px 16px; }
.pure-game-item-theme-2 .pure-game-item__right { align-items: center; justify-content: center; padding-left: 32px; }
.pure-game-item-theme-2 .pure-game-item__content { justify-content: center; width: 100%; }
.pure-game-item-theme-2 .pure-game-item__content__title__rank-index { left: -8px; width: 16px; }
.pure-game-item-theme-2 .pure-game-item__content__title__name { font-size: 14px; line-height: 20px; }
.pure-game-item-theme-2 .pure-game-item__content-wrapper { display: flex; flex-direction: row; mask-image: linear-gradient(to left, transparent, #fff 10%); max-width: 100%; min-width: 0; overflow: hidden; width: 100%; }
.pure-game-item-theme-2 .pure-game-item__content-wrapper .pure-game-item__content__game-introduction { max-width: 100%; min-width: 0; overflow: hidden; flex-shrink: 1; }
.pure-game-item-theme-2 .pure-game-item__content-wrapper .pure-game-item__content__feature-list { flex-shrink: 0; flex-wrap: nowrap; max-width: 100%; min-width: 0; }
.pure-game-item-theme-2 .pure-game-item__content-wrapper .pure-game-item__content__feature-list + .pure-game-item__content__game-introduction { margin-left: 8px; }
.pure-game-item-theme-2 .pure-game-item__content-wrapper .game-tag-list { flex-shrink: 0; }

/* --- theme-3：详情页列表条目（icon 96 / 行高 128px / 带「立即玩」） --- */
.pure-game-item-theme-3 { border-radius: 16px; height: 128px; padding: 16px 0 16px 16px; }
.pure-game-item-theme-3 .pure-game-item__content__title__name { font-size: 14px; line-height: 20px; }
.pure-game-item-theme-3 .pure-game-item__right { align-items: flex-start; flex-direction: column; justify-content: space-between; max-height: 100%; min-width: 0; overflow: hidden; padding-left: 40px; }
.pure-game-item-theme-3 .pure-game-item__content-center { height: 96px; }
.pure-game-item-theme-3 .pure-game-item__icon { height: 96px; width: 96px; }
.pure-game-item-theme-3 .game-desc, .pure-game-item-theme-3 .game-feature-list, .pure-game-item-theme-3 .game-tag-list { flex-shrink: 0; height: 17px; }
.pure-game-item-theme-3 .pure-game-item__btn { margin: 10px 0 0; }

/* ===== 特色文案（金色）与游戏标签（灰色）：官网是两种元素，不可混 ===== */
.game-feature-list { align-items: center; display: flex; flex-wrap: nowrap; max-height: 17px; overflow: hidden; position: relative; }
.game-feature-list__item { align-items: center; display: flex; flex-shrink: 0; }
.game-feature-desc { align-items: center; display: flex; gap: 2px; max-width: 100%; overflow: hidden; white-space: nowrap; }
.game-feature-desc__text { font-size: 12px; font-weight: 400; line-height: 16.8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #E6AF00; }
.game-feature-list__divide-line { background-color: rgba(0, 0, 0, .1); flex-shrink: 0; height: 8px; margin: 0 8px; transform: scaleX(.5); width: 1px; }
.game-tag-list { align-items: center; display: flex; max-width: 100%; overflow: hidden; position: relative; }
.game-tag-list__item { color: rgba(0, 0, 0, .55); flex-shrink: 0; font-size: 12px; font-weight: 400; line-height: 17px; white-space: nowrap; }
.game-tag-list__item:nth-of-type(n+2) { margin-left: 8px; }
.game-desc { -webkit-line-clamp: 1; color: rgba(0, 0, 0, .55); font-size: 12px; font-weight: 400; line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 「立即玩」按钮（抄 .game-button） ===== */
.pure-game-item__btn { height: 32px; margin-left: 12px; width: 66px; }
.pure-game-item__btn-center { display: flex; flex-direction: column; height: 100%; justify-content: center; }
.game-button { align-items: center; background-color: rgba(0, 0, 0, .05); border-radius: 6px; color: rgba(0, 0, 0, .7); cursor: pointer; display: flex; font-size: 12px; font-weight: 500; height: 24px; justify-content: center; line-height: 17px; padding: 4px 8px; text-align: center; }
.game-button:hover { background-color: rgba(0, 0, 0, .1); }
.game-button__text { line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 单榜单详情页（抄 .rank-list-detail-page） ===== */
.rank-list-detail-page { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding-top: 24px; position: relative; width: 100%; }
.rank-list-detail-page__bg { background-position: 100% 0; background-repeat: no-repeat; background-size: 100%; height: 100%; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; width: 100%; z-index: 0; }
.rank-list-detail-page__header { flex-shrink: 0; margin-bottom: 12px; margin-left: auto; margin-right: auto; position: relative; width: 100%; z-index: 3; }
.rank-list-detail-page__header__title { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 3; }
.rank-list-detail-page__header__title__collapse { align-items: center; background-color: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 6px; color: rgba(0, 0, 0, .55); cursor: pointer; display: flex; height: 20px; justify-content: center; width: 20px; text-decoration: none; flex-shrink: 0; }
.rank-list-detail-page__header__title__collapse:hover { background: #f7f7f7; }
.rank-list-detail-page__header__title__collapse__textbtn { align-items: center; cursor: pointer; display: flex; font-size: 12px; font-weight: 500; gap: 4px; }
.rank-list-detail-page__header__title__collapse__textbtn-item.arrow {
    background-color: currentcolor;
    display: inline-block;
    height: 10px;
    width: 6px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='7' height='12.224' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.008 12.224 0 11.216l5.12-5.104L0 1.008 1.008 0l5.44 5.44a.938.938 0 0 1 .288.688.82.82 0 0 1-.288.64l-5.44 5.456Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='7' height='12.224' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.008 12.224 0 11.216l5.12-5.104L0 1.008 1.008 0l5.44 5.44a.938.938 0 0 1 .288.688.82.82 0 0 1-.288.64l-5.44 5.456Z'/%3E%3C/svg%3E");
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: rotate(90deg);
    vertical-align: middle;
}
.rank-list-detail-page__header__title__content { align-items: center; display: flex; gap: 6px; }
.rank-list-detail-page__header__title__content__icon { flex-shrink: 0; width: 10px; height: 25px; }
.rank-list-detail-page__header__title__content__icon--rotate { transform: rotateY(180deg); transform-origin: center center; }
.rank-list-detail-page__header__title__content__text { font-size: 28px; font-weight: 600; line-height: normal; margin: 0; white-space: nowrap; }
.rank-list-detail-page__header__title__rule { color: rgba(0, 0, 0, .55); font-size: 14px; font-weight: 400; line-height: 20px; margin-left: 0; margin-top: 2px; order: 3; padding-left: 48px; width: 100%; }
.rank-list-detail-page__list { flex: 1 1 0%; width: 100%; position: relative; z-index: 1; }
.rank-list-detail-page__list-wrapper { align-content: flex-start; display: flex; flex-flow: wrap; margin-left: auto; margin-right: auto; width: 100%; }
.rank-list-detail-page__list__ol { list-style: none; margin: 0; padding: 0; }
.rank-list-detail-page__list__item { box-sizing: border-box; position: relative; width: 33.33%; }
.rank-list-detail-page__list__item__content { align-items: center; cursor: pointer; display: flex; height: 130px; position: relative; transition: background-color .2s; }
.rank-list-detail-page__list__item__content::after { background: rgba(0, 0, 0, .1); bottom: 0; content: ""; height: .5px; position: absolute; right: 0; width: calc(100% - 120px); }
.rank-list-detail-page__list__item:nth-last-child(-n+3) .rank-list-detail-page__list__item__content::after { display: none; }
.rank-list-detail-page__list__item__content .pure-game-item__content { height: 100%; }
.rank-list-detail-page__list__item__content .pure-game-item__btn { height: 24px; margin: 10px 0 0; }
.rank-list-detail-page__list__item__game .game-button { font-size: 12px; font-weight: 400; height: 24px; line-height: 16px; max-width: 58px; min-width: 48px; }
.rank-list-detail-page__end { align-items: center; display: flex; font-size: 14px; font-weight: 400; height: 20px; justify-content: center; margin-top: 32px; position: relative; width: 100%; }
.rank-list-detail-page__end-text { color: rgba(0, 0, 0, .3); }

/* ===== 官网排行榜样式：响应式列数（4→3→2→1） ===== */
@media (max-width: 1600px) {
    .rank-list-page__list__item { width: calc(33.333% - 13.33px); }
}
@media (max-width: 1200px) {
    .rank-list-page__list__item { width: calc(50% - 10px); }
    .rank-list-detail-page__list__item { width: 50%; }
}
@media (max-width: 768px) {
    .static-rankcategory__title { font-size: 24px; padding-left: 16px; }
    .rank-list-page__list { gap: 12px; }
    .rank-list-page__list__item { width: 100%; min-width: 0; min-height: auto; }
    .rank-cate-card { max-height: none; }
    .rank-cate-card__content__title__text { font-size: 20px; line-height: 28px; }
    .rank-list-detail-page__list__item { width: 100%; }
    .rank-list-detail-page__header__title__content__text { font-size: 22px; white-space: normal; }
    .rank-list-detail-page__header__title__rule { padding-left: 0; }
    .rank-list-detail-page__list__item__content { height: 120px; }
    .pure-game-item-theme-3 { height: 118px; padding: 12px 0 12px 12px; }
    .pure-game-item-theme-3 .pure-game-item__icon { height: 72px; width: 72px; }
    .pure-game-item-theme-3 .pure-game-item__content-center { height: 72px; }
    .pure-game-item-theme-3 .pure-game-item__right { padding-left: 24px; }
}


/* ===== 首页「小游戏排行榜」板块：100% 照抄官网 xiaoyouxi.qq.com 首页排行榜模块 =====
   官网结构：rank-list-card-container > rank-list-card-body > N × rank-sub-card
   · 子榜 flex:1 1 0 等宽，之间用 :after 0.5px 竖线分隔（最后一个无线）
   · 子榜标题 20px/500/28px 主色，两侧 Union 装饰图标（16 × 6.67，第二个 rotate180）
   · 每榜游戏条目：官网 showLineCounts=3 / iconSize=48 / theme=2，条目 padding 12px 16px
   · 底部「查看全部」14px rgba(0,0,0,.55) + Union 箭头 6×11
   响应式沿用官网断点思路：窄屏依次只保留前 2 个 / 前 1 个子榜。 */
.wxmg-home-rank3 { width: 100%; }
.wxmg-home-rank3 .rank-list-card-container { box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.wxmg-home-rank3 .rank-list-card-body {
    background-color: #ffffff;
    border-radius: 16px;
    box-sizing: border-box;
    -moz-column-gap: .5px;
    column-gap: .5px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    width: 100%;
}
.wxmg-home-rank3 .rank-list-card-body .pure-game-item { align-items: center; border-radius: 8px; height: auto !important; padding: 12px 16px; }
.wxmg-home-rank3 .rank-list-card-body .pure-game-item__content { min-width: 0; }
.wxmg-home-rank3 .rank-list-card-body .pure-game-item__content__title__name { overflow: hidden; text-overflow: ellipsis; }
.wxmg-home-rank3 .rank-list-card-body .pure-game-item__btn { display: none; }

.wxmg-home-rank3 .rank-sub-card {
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 16px 0;
    position: relative;
}
.wxmg-home-rank3 .rank-sub-card:after {
    background: rgba(0, 0, 0, .15);
    content: "";
    height: calc(100% - 32px);
    position: absolute;
    right: 0;
    top: 16px;
    width: .5px;
}
.wxmg-home-rank3 .rank-sub-card:last-child:after { display: none; }
.wxmg-home-rank3 .rank-sub-card__header { display: flex; justify-content: flex-start; padding: 0 16px; }
.wxmg-home-rank3 .rank-sub-card__header .header-content { align-items: center; display: flex; gap: 4px; min-width: 0; }
.wxmg-home-rank3 .rank-sub-card__header .decor-icon {
    background-color: currentcolor;
    display: inline-block;
    flex-shrink: 0;
    height: 16px !important;
    width: 6.67px !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='5' height='13' viewBox='0 0 5 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.98718 4.14178C3.45956 3.69441 3.12752 3.04435 3.12752 2.32083C3.12752 1.59738 3.4595 0.947372 3.98704 0.5C4.51466 0.947376 4.84669 1.59744 4.84669 2.32095C4.84669 3.0444 4.51472 3.69441 3.98718 4.14178ZM3.205 5.85567C2.52374 5.73129 1.91024 5.33387 1.54745 4.70729C1.1847 4.08076 1.14627 3.35232 1.37881 2.70186C2.06007 2.82624 2.67357 3.22366 3.03636 3.85024C3.39911 4.47677 3.43754 5.20521 3.205 5.85567ZM1.15161 7.50563C1.77997 7.86739 2.51056 7.90568 3.16291 7.67373C3.03814 6.99448 2.6396 6.38279 2.0113 6.02106C1.38294 5.65931 0.652349 5.62101 0 5.85296C0.124766 6.53222 0.523304 7.14391 1.15161 7.50563ZM5.00005 11.6428C4.55141 12.1689 3.8995 12.5 3.17393 12.5C2.44842 12.5 1.79656 12.169 1.34792 11.6429C1.79657 11.1168 2.44848 10.7857 3.17405 10.7857C3.89955 10.7857 4.55141 11.1167 5.00005 11.6428ZM1.68825 10.0753C2.38909 10.2625 3.10473 10.111 3.67464 9.71856C3.37782 9.09465 2.8341 8.60666 2.13331 8.41942C1.43247 8.23216 0.716836 8.38372 0.146918 8.77613C0.443737 9.40004 0.987463 9.88803 1.68825 10.0753Z' fill='white'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='5' height='13' viewBox='0 0 5 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.98718 4.14178C3.45956 3.69441 3.12752 3.04435 3.12752 2.32083C3.12752 1.59738 3.4595 0.947372 3.98704 0.5C4.51466 0.947376 4.84669 1.59744 4.84669 2.32095C4.84669 3.0444 4.51472 3.69441 3.98718 4.14178ZM3.205 5.85567C2.52374 5.73129 1.91024 5.33387 1.54745 4.70729C1.1847 4.08076 1.14627 3.35232 1.37881 2.70186C2.06007 2.82624 2.67357 3.22366 3.03636 3.85024C3.39911 4.47677 3.43754 5.20521 3.205 5.85567ZM1.15161 7.50563C1.77997 7.86739 2.51056 7.90568 3.16291 7.67373C3.03814 6.99448 2.6396 6.38279 2.0113 6.02106C1.38294 5.65931 0.652349 5.62101 0 5.85296C0.124766 6.53222 0.523304 7.14391 1.15161 7.50563ZM5.00005 11.6428C4.55141 12.1689 3.8995 12.5 3.17393 12.5C2.44842 12.5 1.79656 12.169 1.34792 11.6429C1.79657 11.1168 2.44848 10.7857 3.17405 10.7857C3.89955 10.7857 4.55141 11.1167 5.00005 11.6428ZM1.68825 10.0753C2.38909 10.2625 3.10473 10.111 3.67464 9.71856C3.37782 9.09465 2.8341 8.60666 2.13331 8.41942C1.43247 8.23216 0.716836 8.38372 0.146918 8.77613C0.443737 9.40004 0.987463 9.88803 1.68825 10.0753Z' fill='white'/%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain;
}
.wxmg-home-rank3 .rank-sub-card__header .decor-icon.rotate180 { transform: rotateY(180deg); transform-origin: center; }
.wxmg-home-rank3 .rank-sub-card__header .rank-title { font-size: 20px; font-weight: 500; line-height: 28px; white-space: nowrap; }
.wxmg-home-rank3 .rank-sub-card__list { display: flex; flex: 1; flex-direction: column; padding: 0 8px; }
.wxmg-home-rank3 .rank-sub-card__list .game-list { display: flex; flex-direction: column; }
.wxmg-home-rank3 .rank-sub-card .game-feature-desc { min-width: 0; overflow: hidden; }
.wxmg-home-rank3 .rank-sub-card .game-feature-desc__text { flex-shrink: 0; min-width: 0; }
.wxmg-home-rank3 .rank-sub-card .game-feature-list__item:last-child { min-width: 0; overflow: hidden; }

.wxmg-home-rank3 .rank-sub-card__footer {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    padding: 0 16px 0 24px;
    text-decoration: none;
}
.wxmg-home-rank3 .rank-sub-card__footer:hover { opacity: .9; }
.wxmg-home-rank3 .rank-sub-card__footer:active { opacity: .7; }
.wxmg-home-rank3 .rank-sub-card__footer .view-all-text { color: rgba(0, 0, 0, .55); font-size: 14px; }
.wxmg-home-rank3 .rank-sub-card__footer .view-all-arrow {
    color: rgba(0, 0, 0, .55);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    margin-left: 4px;
}

/* 官网在窄屏是「砍掉多余子榜」（≤767 只留第 1 个榜）；
   本站只有 3 个榜，砍掉会直接丢内容，所以窄屏改成**竖排**：3 个榜全保留，
   子榜之间的分隔线由竖向 0.5px 改为横向 0.5px。 */
@media (max-width: 999px) {
    .wxmg-home-rank3 .rank-list-card-body {
        flex-direction: column;
        -moz-column-gap: 0;
        column-gap: 0;
    }
    .wxmg-home-rank3 .rank-sub-card {
        flex: none;
        width: 100%;
        padding: 12px 0;
    }
    .wxmg-home-rank3 .rank-sub-card:nth-child(n+2) { display: flex; }
    .wxmg-home-rank3 .rank-sub-card:after {
        top: auto;
        bottom: 0;
        left: 16px;
        right: auto;
        width: calc(100% - 32px);
        height: .5px;
    }
    .wxmg-home-rank3 .rank-sub-card:last-child:after { display: none; }
    .wxmg-home-rank3 .rank-sub-card__header { padding: 0 12px; }
    .wxmg-home-rank3 .rank-sub-card__list { padding: 0 4px; }
    .wxmg-home-rank3 .rank-sub-card__footer { padding: 0 12px 0 20px; }
}
/* ⚠️ 手机端撑宽根因：特色文案(.game-feature-desc__text) 与游戏标签(.game-tag-list__item)
   都是 white-space:nowrap + flex-shrink:0，一行塞不下就往外顶破容器。
   手机端处理：① 隐藏标签（省宽度、也让榜单更干净）② 特色文案允许收缩+省略号
   ③ 图标 48→40、内边距收紧 ④ overflow:hidden 兜底，任何内容都不再顶破卡片。 */
@media (max-width: 767px) {
    .wxmg-home-rank3 .rank-sub-card__header .rank-title { font-size: 17px; line-height: 24px; }
    .wxmg-home-rank3 .rank-sub-card__footer { padding: 0 12px 0 20px; }
    /* 图标与条目间距收紧 */
    .wxmg-home-rank3 .rank-list-card-body .pure-game-item { padding: 8px 10px; }
    .wxmg-home-rank3 .pure-game-item__icon { height: 40px !important; width: 40px !important; }
    .wxmg-home-rank3 .pure-game-item-theme-2 .pure-game-item__right { padding-left: 24px; }
    /* 手机端不显示游戏标签 */
    .wxmg-home-rank3 .game-tag-list { display: none; }
    /* 特色文案允许收缩并省略号截断（覆盖 flex-shrink:0） */
    .wxmg-home-rank3 .game-feature-list,
    .wxmg-home-rank3 .game-feature-list__item,
    .wxmg-home-rank3 .game-feature-desc,
    .wxmg-home-rank3 .game-feature-desc__text {
        flex-shrink: 1;
        min-width: 0;
    }
    .wxmg-home-rank3 .game-feature-desc__text { text-overflow: ellipsis; }
    /* 兜底：整行不再顶破卡片 */
    .wxmg-home-rank3 .rank-list-card-body .pure-game-item,
    .wxmg-home-rank3 .rank-sub-card__list,
    .wxmg-home-rank3 .rank-sub-card { overflow: hidden; min-width: 0; }
}

/* ===== 响应式（左右结构堆叠） =====
   ⚠️ 容器断点必须与全局 .tool-layout（style.css）的 ≤900px 保持一致：
   外层 .tool-layout 在 768~900 区间已经塌成上下，若此处仍用 768，
   内层 .wxmg-page 会保持左右结构、.wxmg-sidebar 死扛 280px 固定宽，
   把主栏挤成一条（实测 768~900 区间主栏仅剩约 100px）。故整体对齐 900。 */
@media (max-width: 1024px) {
    .wxmg-sidebar { width: 280px; flex-basis: 280px; }
}
@media (max-width: 900px) {
    .wxmg-page { flex-direction: column; padding: 0 12px; gap: 16px; }
    .wxmg-sidebar { width: 100%; flex: none; }
}
@media (max-width: 768px) {
    .page-wrap { padding: 0; }
    .wxmg-header { padding: 18px; }
    .wxmg-header h1 { font-size: 22px; }
    /* 电脑端二维码隐藏，手机端改显「立即玩」按钮 */
    .wxmg-pc-only { display: none !important; }
    .wxmg-mobile-only { display: inline-flex !important; }
    /* 基本区：手机端居中、操作区竖向堆叠 */
    .wxmg-detail-titlerow { justify-content: center; }
    .wxmg-detail-meta1 { justify-content: center; }
    .wxmg-detail-cats { justify-content: center; }
    .wxmg-detail-act { flex-direction: column; gap: 14px; }
    .wxmg-act-left { width: 100%; }
    .wxmg-mobile-only { width: 100%; justify-content: center; }
    .wxmg-act-right { width: 100%; align-items: stretch; }
    .wxmg-act-right .wxmg-vote-btn { width: 100%; justify-content: center; }
    .wxmg-act-right .wxmg-rate-box { justify-content: center; }
}

/* =========================================================
   详情页手机端适配（2026-10-10 修复）
   之前只有零散几条 ≤768 规则，且 .wxmg-detail-cmp 仍写死 2 列 / 截图卡固定 260px，
   在 360~390px 宽的手机上会横向溢出（星星+分数被挤出格子、标题顶破容器）。
   ========================================================= */
@media (max-width: 768px) {
    /* ---- 基本区：封面与内边距收窄 ---- */
    .wxmg-detail-head { padding: 14px; gap: 14px; }
    .wxmg-detail-cover { width: 96px; height: 96px; }
    .wxmg-detail-cover .wxmg-card-noimg { font-size: 40px; }
    .wxmg-detail-info h1 { font-size: 19px; }
    .wxmg-detail-intro { font-size: 14px; }

    /* ---- 官方 vs 网友对比块：2 列改 1 列 ----
       2 列时每格只有约 117px，5 颗星(108px)+分数(46px) 必然换行/溢出，
       而评分区为了「点星星不跳版」锁了 min-height:52px，换行后会压住提示行。 */
    .wxmg-detail-cmp {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
        max-width: 100%;
    }
    /* 单列下长数字（13,375 人）仍可能超宽 → 自动缩号，不换行 */
    .wxmg-cmp-val { font-size: 18px; word-break: normal; white-space: nowrap; }
    .wxmg-cmp-label { font-size: 12px; }
    .wxmg-rate-box { min-height: 0; }   /* 单列放得下，不再需要锁高 */
    .wxmg-cmp-val { font-size: 20px; }
    .wxmg-cmp-cell .wxmg-vote-btn { width: 100%; justify-content: center; }
    .wxmg-stars { font-size: 18px; height: 22px; line-height: 22px; }

    /* ---- 板块标题：长标题（如「XX小游戏常见问题」）不撑破容器 ---- */
    .wxmg-block-head { flex-wrap: wrap; row-gap: 6px; }
    .wxmg-block-title { font-size: 16px; min-width: 0; word-break: break-word; }

    /* ---- 排名板块：一行一个（≤900 已降为 2 列，手机再降到 1 列更好读） ---- */
    .wxmg-rank-grid { grid-template-columns: 1fr; gap: 8px; }

    /* ---- 截图轮播：卡片 260→200，手机一屏能看到下一张的边 ---- */
    .wxmg-shot { width: 200px; }
    .wxmg-shot img { width: 200px; height: 130px; }
    .wxmg-shot-btn { width: 26px; height: 26px; font-size: 16px; }

    /* ---- 全局兜底：任何子元素都不得撑出横向滚动条 ----
       ⚠️ 手机端出现横向滚动时，最快的定位手段就是这一条：
       哪个元素宽度超过 360px 一眼就能在 DevTools 里看出来。 */
    .wxmg-page, .wxmg-main, .wxmg-block, .wxmg-detail-head,
    .wxmg-detail-info, .wxmg-detail-act, .wxmg-act-left, .wxmg-act-right {
        max-width: 100%;
        min-width: 0;
    }
    .wxmg-block, .wxmg-detail-head, .wxmg-detail-intro, .wxmg-detail-meta1 {
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .wxmg-shots { max-width: 100%; }

    /* ---- 视频 / 动态 / FAQ 字号收窄 ---- */
    .wxmg-video { max-width: 100%; }
    .wxmg-faq-q { font-size: 15px; }
    .wxmg-faq-a { font-size: 14px; }
}

/* 超窄屏（≤380）：截图卡再缩一档，避免左右按钮把卡片挤没 */
@media (max-width: 380px) {
    .wxmg-detail-head { padding: 12px; }
    .wxmg-detail-cover { width: 76px; height: 76px; }
    .wxmg-shot { width: 168px; }
    .wxmg-shot img { width: 168px; height: 110px; }
    .wxmg-shot-btn { display: none; }   /* 窄屏靠手势滑动，隐藏左右按钮省出宽度 */
}

/* =========================================================
   列表页 /games —— 上中下结构（用户 2026-10-04 要求）
     上：左标题区 + 右搜索板块
     中：主分类 → 次分类 → 排序 → 标签 四行筛选
     下：游戏列表 + 分页 → 常见问题 → 页面简介
   ========================================================= */

/* ---------- 上：标题区（左）+ 搜索（右） ---------- */
.wxmg-lp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--white);
    border-radius: var(--radius);
    padding: 22px 26px;
    margin: 0 0 16px;
    box-shadow: var(--shadow);
    border-left: 5px solid var(--primary-color);
}
.wxmg-lp-title { min-width: 0; }
.wxmg-lp-title h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 6px;
    line-height: 1.4;
}
.wxmg-lp-sub { margin: 0; font-size: 13px; color: var(--text-secondary); }
.wxmg-lp-sub b { color: var(--primary-color); }
.wxmg-lp-search { display: flex; gap: 10px; flex: 0 1 380px; }
.wxmg-lp-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 14px;
    outline: none;
    background: #fff;
}
.wxmg-lp-search input:focus { border-color: var(--primary-color); }
.wxmg-lp-search .btn {
    height: 44px;
    padding: 0 22px;
    white-space: nowrap;
    font-size: 15px;
}
/* 重置按钮：清除搜索词与全部筛选（回到 /games 无参数），视觉上略弱于「搜索」 */
.wxmg-lp-search .wxmg-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background: var(--white);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 400;
}
.wxmg-lp-search .wxmg-reset-btn:hover {
    background: #fff;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ---------- 中：筛选区 ---------- */
.wxmg-filter {
    background: var(--white);
    border-radius: var(--radius);
    padding: 10px 20px;
    margin: 0 0 18px;
    box-shadow: var(--shadow);
}
.wxmg-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed #ececec;
}
.wxmg-filter-row:last-child { border-bottom: none; }
/* ⚠️ 标签 / 分类 / 子类 / 排序 四行必须完全同款：同一套 padding、字号、行高，
   只有文字内容不同（用户要求「字体样式改成一样的」）。 */
.wxmg-filter-key {
    flex: 0 0 40px;
    font-size: 14px;
    color: #8c8c8c;
    line-height: 28px;
}
.wxmg-filter-vals { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.wxmg-chip.wxmg-chip-filter {
    padding: 7px 16px;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    background: var(--white);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    transition: all .15s;
}
.wxmg-chip.wxmg-chip-filter:hover { background: #e6f4ff; border-color: #91d5ff; color: var(--primary-color); }
.wxmg-chip.wxmg-chip-filter.active,
.wxmg-chip.wxmg-chip-filter.active:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* ---------- 板块右上角「换一批」按钮（首页小游戏推荐） ---------- */
.wxmg-block-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* ⚠️ 按钮宽度必须写死 min-width：loading 时不能改文案（「换一批」→「换一批…」只有 1 个字宽差，
   但肉眼就是「点一下按钮变大了」），加载态一律用图标旋转表示。 */
.wxmg-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    min-width: 92px;
    padding: 0 16px;
    white-space: nowrap;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1;
    color: var(--primary-color);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.wxmg-refresh-txt { display: inline-block; min-width: 39px; text-align: center; }
.wxmg-refresh-btn:hover { background: #e6f4ff; border-color: var(--primary-color); }
.wxmg-refresh-btn:disabled { opacity: .6; cursor: default; }
.wxmg-refresh-ico { display: inline-block; font-size: 15px; line-height: 1; }
.wxmg-refresh-btn:hover .wxmg-refresh-ico { animation: wxmg-rotate .6s linear; }
.wxmg-refresh-btn.is-loading .wxmg-refresh-ico { animation: wxmg-rotate .8s linear infinite; }
@keyframes wxmg-rotate {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

/* ---------- 下：游戏列表面板（白底整块）+ 8 列 × 140px 网格 ----------
   用户 2026-10-05 要求：列表要有背景块、每行 8 个、每格 140px 宽、每页 80 个。
   8 × 140 = 1120，加上 7 个 8px 列间距 = 1176，落在面板内容区 1180px 内，格子不会被压缩。 */
.wxmg-list-panel {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 10px;
    margin: 0 0 20px;
}
.wxmg-grid-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 140px));
    justify-content: space-between;
    row-gap: 18px;
    column-gap: 8px;
}
/* 140px 窄卡片：简介保留（两行截断，min-height 锁死保证同行卡片等高），标题 13px 单行 */
.wxmg-grid-list .wxmg-card-title { font-size: 13px; font-weight: 600; }
.wxmg-grid-list .wxmg-card-desc {
    font-size: 11.5px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    min-height: 34px;
}
.wxmg-grid-list .wxmg-card-body { padding: 8px 7px 10px; gap: 5px; }
.wxmg-grid-list .wxmg-card-noimg { font-size: 30px; }
.wxmg-list-pager {
    margin: 20px 0 2px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    gap: 8px;
}
/* 页码：统一成方形按钮 + 描边；hover/选中都不位移不上浮，选中用蓝色背景 */
.wxmg-list-pager a,
.wxmg-list-pager span.current,
.wxmg-list-pager span.dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text-color);
    font-size: 14px;
    line-height: 1;
    transform: none;
    box-shadow: none;
}
.wxmg-list-pager a:hover {
    transform: none;
    box-shadow: none;
    background: var(--white);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.wxmg-list-pager span.current,
.wxmg-list-pager span.current:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
    font-weight: 600;
    transform: none;
    box-shadow: none;
}
.wxmg-list-pager span.dots,
.wxmg-list-pager span.dots:hover {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    transform: none;
}
/* ---------- 排行榜页 /rank（与 /games 同构：上标题搜索 / 中榜单筛选 / 下榜单内容 / FAQ / 简介） ---------- */
.wxmg-rank-panel { padding: 18px 16px; }
/* 榜单筛选 chip：默认与其它筛选一致；选中时用该榜单的官网主色（--bc 由模板注入） */
.wxmg-chip.wxmg-chip-board:hover {
    background: #fff;
    border-color: var(--bc, #91d5ff);
    color: var(--bc, var(--primary-color));
}
.wxmg-chip.wxmg-chip-board.active,
.wxmg-chip.wxmg-chip-board.active:hover {
    background: var(--bc, var(--primary-color));
    border-color: var(--bc, var(--primary-color));
    color: #fff;
}

/* 分榜页游戏区：官网那块「方形彩色渐变背景」在白底面板里很突兀，去掉；
   改成行 hover 轻微高亮 + 圆角，和本站其它列表的手感一致。 */
.wxmg-rank-panel .rank-list-detail-page__bg { display: none; }
.wxmg-rank-panel .rank-list-detail-page { padding-top: 8px; }
.wxmg-rank-panel .rank-list-detail-page__header__title { justify-content: center; gap: 0; }
.wxmg-rank-panel .rank-list-detail-page__list__item__content {
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 12px;
}
.wxmg-rank-panel .rank-list-detail-page__list__item__content:hover { background: #f4f8fe; }
.wxmg-rank-panel .rank-list-detail-page__list__item__content:hover::after { background: transparent; }
.wxmg-rank-panel .rank-list-detail-page__end { margin-top: 20px; }

/* 列表 → 常见问题 → 页面简介 三段间距统一 20px */
.wxmg-page-full .wxmg-block { margin-bottom: 20px; }
.wxmg-page-full .wxmg-block:last-child { margin-bottom: 0; }

/* ---------- 列表页响应式 ---------- */
@media (max-width: 768px) {
    .wxmg-lp-head { flex-direction: column; align-items: stretch; padding: 18px; }
    .wxmg-lp-title h1 { font-size: 20px; }
    .wxmg-lp-searchbox { flex: 1 1 auto; min-width: 0; }
    /* 搜索框 + 搜索 + 重置 三个挤一行：输入框必须能压到 0 宽，按钮不准压缩也不准放大，
       否则窄屏（≤360）按钮会被顶出白色卡片外面。 */
    .wxmg-lp-search { flex: 1 1 auto; min-width: 0; gap: 8px; }
    .wxmg-lp-search input { flex: 1 1 0; width: 0; min-width: 0; height: 42px; }
    .wxmg-lp-search .btn,
    .wxmg-lp-search .wxmg-reset-btn {
        flex: 0 0 auto;
        height: 42px;
        padding: 0 14px;
        font-size: 14px;
    }
    .wxmg-filter { padding: 6px 14px; }
    .wxmg-filter-row { flex-direction: column; gap: 8px; padding: 10px 0; }
    .wxmg-filter-key { line-height: 20px; }
    .wxmg-chip.wxmg-chip-filter { padding: 6px 14px; font-size: 14px; }
    .wxmg-block-actions { gap: 8px; }
    .wxmg-rank-panel { padding: 14px 10px; }
}

/* 超窄屏（≤560）：搜索框独占一行，「搜索 / 重置」各占一半，彻底不会溢出 */
@media (max-width: 560px) {
    .wxmg-lp-search { flex-wrap: wrap; }
    .wxmg-lp-search input { flex: 1 1 100%; width: 100%; }
    .wxmg-lp-search .btn,
    .wxmg-lp-search .wxmg-reset-btn {
        flex: 1 1 calc(50% - 4px);
        padding: 0 12px;
        text-align: center;
    }
}

/* 列表页 8 列 → 窄屏逐级降列，保证每行不出现半格 */
@media (max-width: 1200px) {
    .wxmg-grid-list { grid-template-columns: repeat(6, minmax(0, 140px)); }
}
@media (max-width: 900px) {
    .wxmg-grid-list { grid-template-columns: repeat(4, minmax(0, 140px)); }
    .wxmg-list-panel { padding: 16px 12px; }
}
@media (max-width: 560px) {
    .wxmg-grid-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 14px;
        column-gap: 8px;
    }
    .wxmg-list-panel { padding: 14px 10px; }
}
@media (max-width: 380px) {
    .wxmg-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}