/* 游戏详情页右栏：热门排行榜 + 随机推荐。仅改变展示，不改变数据及交互逻辑。 */
/* ---------- 热门排行榜 ---------- */
body.soft-article-page .right.public .r-list{
    position:relative;
    box-sizing:border-box;
    margin:0 0 20px;
    padding:16px 16px 14px;
    border:1px solid #e1e8f2;
    border-radius:14px;
    background:
        radial-gradient(circle at 96% 0,rgba(91,141,239,.1),transparent 28%),
        linear-gradient(145deg,#fff 0%,#fbfdff 100%);
    box-shadow:0 14px 30px -25px rgba(29,56,96,.58);
    transition:border-color .22s ease,box-shadow .22s ease;
}
body.soft-article-page .right.public .r-list:hover{
    border-color:#cbdaf0;
    box-shadow:0 18px 34px -25px rgba(42,84,151,.58);
}
body.soft-article-page .right.public .r-list:before{
    display:flex;
    align-items:center;
    height:24px;
    color:#202938;
    content:"\f005  热门排行榜";
    font-family:FontAwesome,"Microsoft YaHei",sans-serif;
    font-size:15px;
    font-weight:700;
    line-height:24px;
}
body.soft-article-page .right.public .r-list:after{
    position:absolute;
    top:18px;
    right:16px;
    color:#8793a4;
    content:"大家都在玩";
    font-size:12px;
    line-height:20px;
}
body.soft-article-page .right.public .r-list .bar{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    box-sizing:border-box;
    height:38px;
    margin:11px 0 9px;
    padding:3px;
    border:0;
    border-radius:10px;
    background:#f1f4f8;
}
body.soft-article-page .right.public .r-list .bar li{height:32px;margin:0;padding:0}
body.soft-article-page .right.public .r-list .bar button{
    height:32px;
    padding:0;
    border:0;
    border-radius:8px;
    color:#6f7a89;
    font-size:12px;
    line-height:32px;
    transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
body.soft-article-page .right.public .r-list .bar button:hover{background:rgba(255,255,255,.7);color:#4778c6}
body.soft-article-page .right.public .r-list .bar button.sel{
    border:0;
    background:#fff;
    box-shadow:0 3px 9px -5px rgba(45,72,112,.55);
    color:#4778d5;
    font-weight:700;
}
body.soft-article-page .right.public .r-list .bar button:focus-visible{outline:2px solid #83aaeb;outline-offset:-2px}
body.soft-article-page .right.public .r-list .bd{margin-top:0;counter-reset:game-rank}
body.soft-article-page .right.public .r-list .order li{
    height:29px;
    margin:0;
    line-height:29px;
    counter-increment:game-rank;
}
body.soft-article-page .right.public .r-list .order li a{
    display:flex;
    align-items:center;
    box-sizing:border-box;
    width:100%;
    height:29px;
    min-width:0;
    padding:0 6px;
    border-radius:8px;
    color:#475160;
    font-size:13px;
    line-height:29px;
    transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
body.soft-article-page .right.public .r-list .order li a:hover{
    background:#f1f6fd;
    color:#326bc4;
    transform:translateX(2px);
}
body.soft-article-page .right.public .r-list .order li a i{
    display:inline-flex;
    flex:0 0 24px;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    width:24px;
    height:24px;
    margin-right:7px;
    border-radius:7px;
    background:#f0f3f7;
    color:#8b95a3;
    font-size:0;
    font-style:normal;
    font-variant-numeric:tabular-nums;
    line-height:24px;
}
body.soft-article-page .right.public .r-list .order li a i:before{
    content:counter(game-rank,decimal-leading-zero);
    font-family:Arial,sans-serif;
    font-size:12px;
    font-weight:700;
}
body.soft-article-page .right.public .r-list .order li a span{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
body.soft-article-page .right.public .r-list .order li:nth-child(-n+3){height:34px;line-height:34px}
body.soft-article-page .right.public .r-list .order li:nth-child(-n+3) a{
    height:32px;
    margin:1px 0;
    background:linear-gradient(90deg,rgba(238,245,255,.95),rgba(248,251,255,.35));
    color:#303b4b;
    font-weight:600;
    line-height:32px;
}
body.soft-article-page .right.public .r-list .order li:nth-child(-n+3) a:hover{background:#edf4fe;color:#2f67bc}
body.soft-article-page .right.public .r-list .order li:nth-child(-n+3) a i{width:27px;height:27px;flex-basis:27px;color:#fff;line-height:27px}
body.soft-article-page .right.public .r-list .order li:nth-child(-n+3) a i:before{font-size:13px}
body.soft-article-page .right.public .r-list .order li:nth-child(1) a i{background:linear-gradient(135deg,#4c86e6,#6c78df);box-shadow:0 5px 10px -6px rgba(55,93,175,.85)}
body.soft-article-page .right.public .r-list .order li:nth-child(2) a i{background:#7f9bc7}
body.soft-article-page .right.public .r-list .order li:nth-child(3) a i{background:#9eb3d2}

/* ---------- 随机推荐 ---------- */
body.soft-article-page .right.public .cnxh{
    position:relative;
    box-sizing:border-box;
    margin:0 0 20px;
    padding:16px 14px 12px;
    border:1px solid #e1e8f2;
    border-radius:14px;
    background:
        radial-gradient(circle at 96% 0,rgba(111,121,223,.08),transparent 30%),
        linear-gradient(145deg,#fff 0%,#fbfdff 100%);
    box-shadow:0 14px 30px -25px rgba(29,56,96,.58);
    transition:border-color .22s ease,box-shadow .22s ease;
}
body.soft-article-page .right.public .cnxh:hover{
    border-color:#cbdaf0;
    box-shadow:0 18px 34px -25px rgba(42,84,151,.58);
}
body.soft-article-page .right.public .cnxh .title{
    display:flex;
    align-items:center;
    height:27px;
    margin:0 2px 9px;
    padding:0;
    border:0;
    color:#202938;
    font-size:15px;
    font-weight:700;
    line-height:27px;
}
body.soft-article-page .right.public .cnxh .title:before{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    margin-right:7px;
    border-radius:8px;
    background:#eef4fd;
    color:#527fc8;
    content:"\f14e";
    font-family:FontAwesome;
    font-size:12px;
    font-weight:400;
}
body.soft-article-page .right.public .cnxh .title:after{
    position:static;
    width:auto;
    height:24px;
    margin-left:auto;
    padding:0 9px;
    border-radius:999px;
    background:#f2f5f9;
    color:#8793a4;
    content:"发现新内容";
    font-size:12px;
    font-weight:500;
    line-height:24px;
}
body.soft-article-page .right.public .cnxh ul{margin:0;padding:0;background:transparent}
body.soft-article-page .right.public .cnxh li{
    min-height:0;
    margin:2px 0;
    border:0;
    border-radius:10px;
}
body.soft-article-page .right.public .cnxh li:first-child{margin-top:0}
body.soft-article-page .right.public .cnxh li:last-child{margin-bottom:0}
body.soft-article-page .right.public .cnxh li>a{
    display:flex;
    align-items:center;
    box-sizing:border-box;
    min-width:0;
    min-height:70px;
    padding:6px;
    border-radius:10px;
    color:#394454;
    transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
body.soft-article-page .right.public .cnxh li>a:hover{
    background:#f2f6fc;
    color:#326bc4;
    transform:translateY(-1px);
}
body.soft-article-page .right.public .cnxh li .img{
    float:none;
    flex:0 0 58px;
    box-sizing:border-box;
    width:58px;
    height:58px;
    margin:0 10px 0 0;
    overflow:hidden;
    border:1px solid #e7ecf3;
    border-radius:10px;
    background:#f0f3f7;
}
body.soft-article-page .right.public .cnxh li .img img{
    display:block;
    width:100%;
    height:100%;
    border-radius:9px;
    object-fit:contain;
    transition:transform .25s ease;
}
body.soft-article-page .right.public .cnxh li>a:hover .img img{transform:scale(1.045)}
body.soft-article-page .right.public .cnxh li .tit{
    float:none;
    flex:1 1 auto;
    width:auto;
    min-width:0;
    padding:0;
}
body.soft-article-page .right.public .cnxh li .tit h4{
    display:-webkit-box;
    height:auto;
    min-height:0;
    margin:0 0 5px;
    overflow:hidden;
    color:inherit;
    font-size:13px;
    font-weight:600;
    line-height:18px;
    word-break:break-word;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
}
body.soft-article-page .right.public .cnxh li .tit span{
    display:block;
    overflow:hidden;
    color:#929dab;
    font-size:11px;
    line-height:18px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ---------- 夜间模式 ---------- */
body.night.soft-article-page .right.public .r-list,
body.night.soft-article-page .right.public .cnxh{
    border-color:#3b4655;
    background:
        radial-gradient(circle at 96% 0,rgba(92,143,226,.12),transparent 30%),
        linear-gradient(145deg,#292d33 0%,#262a30 100%);
    box-shadow:0 16px 32px -25px rgba(0,0,0,.9);
}
body.night.soft-article-page .right.public .r-list:hover,
body.night.soft-article-page .right.public .cnxh:hover{border-color:#4b5b70;box-shadow:0 18px 36px -25px rgba(0,0,0,.95)}
body.night.soft-article-page .right.public .r-list:before,
body.night.soft-article-page .right.public .cnxh .title{color:#edf2f8}
body.night.soft-article-page .right.public .r-list:after{color:#8e9aa9}
body.night.soft-article-page .right.public .r-list .bar{background:#22272e}
body.night.soft-article-page .right.public .r-list .bar button{color:#aeb8c5}
body.night.soft-article-page .right.public .r-list .bar button:hover{background:#303740;color:#bcd4f3}
body.night.soft-article-page .right.public .r-list .bar button.sel{background:#343c47;box-shadow:none;color:#9fc2f6}
body.night.soft-article-page .right.public .r-list .order li a{color:#c2cad5}
body.night.soft-article-page .right.public .r-list .order li a:hover{background:#303944;color:#a9c8f4}
body.night.soft-article-page .right.public .r-list .order li a i{background:#343b44;color:#a9b4c1}
body.night.soft-article-page .right.public .r-list .order li:nth-child(-n+3) a{background:linear-gradient(90deg,rgba(53,65,82,.9),rgba(43,49,58,.35));color:#d8dee7}
body.night.soft-article-page .right.public .r-list .order li:nth-child(-n+3) a:hover{background:#344152;color:#bad2f3}
body.night.soft-article-page .right.public .cnxh .title:before{background:#303b4c;color:#8fb6ef}
body.night.soft-article-page .right.public .cnxh .title:after{background:#333a43;color:#a6b0bd}
body.night.soft-article-page .right.public .cnxh ul{background:transparent}
body.night.soft-article-page .right.public .cnxh li>a{color:#d0d7e0}
body.night.soft-article-page .right.public .cnxh li>a:hover{background:#303944;color:#b4cef2}
body.night.soft-article-page .right.public .cnxh li .img{border-color:#3d4652;background:#24282e}
body.night.soft-article-page .right.public .cnxh li .tit span{color:#929eac}

/* 1200-1320px 时站点固定导航右侧图标会换行，给首个模块保留安全距离。 */
@media screen and (min-width:1200px) and (max-width:1320px){
    body.soft-article-page .right.public .r-list{margin-top:38px}
}