/* 横向轮播。一屏放几张只由 --nex-topic-cols 决定，断点也只改这一个变量。
       颜色全部走 --nx-* 令牌，跟随站点明暗主题。 */
    .nex-topics{
        --nex-topic-cols:5;
        --nex-topic-gap:14px;
        box-sizing:border-box;
        width:100%;
        max-width:var(--nex-content-w,1200px);
        /* 板块上下的留白。默认 16px，小工具里可以逐块改（0 = 完全贴着邻块）。
           原来写死 30/42，叠在主题首页模块的间距之上，两块之间凭空多 70 多像素。
           fallback 保留 16px：变量没写上时也不会整条 margin 失效。 */
        margin:var(--nex-topic-gap-y,16px) auto;
    }
    .nex-topics *,.nex-topics *::before,.nex-topics *::after{box-sizing:border-box}
    /* 标题块：「标题 → 4px → 副标题 → 14px → 内容」。
       **这三个数值跟着 .nex-sec（游戏展示板块 / 首页「最近更新」）走**，
       三个板块统一。改这里之前先确认那边要不要跟着改 —— 回归测试会比对两处的数值。

       !important 是防主题的 `.widget h2` 那类规则（特异性 (0,1,1) 高过单个 class）。
       .nex-sec 那边没加也没出过问题，但这两块加着更稳，不影响观感。 */
    .nex-topics-head{margin:0 0 14px !important}
    .nex-topics-title{margin:0 !important;font-size:22px !important;font-weight:800 !important;line-height:1.2;letter-spacing:.01em;color:var(--nx-text,#172033) !important}
    .nex-topics-sub{margin:4px 0 0 !important;font-size:13px !important;line-height:1.6;color:var(--nx-muted,#667085) !important}

    /* 轨道**不加左右内边距** —— 卡片左边缘必须和板块标题、和站上其它模块齐平。
       当初为了把箭头放到内容区外面，给这里加了 52px 内边距把卡片顶了进去，
       结果整块比别人右移一截。现在箭头改成压在轨道两端（见下），不占布局位置。 */
    .nex-topics-rail{position:relative}

    .nex-topics-track{
        display:flex;
        gap:var(--nex-topic-gap);
        overflow-x:auto;
        overscroll-behavior-x:contain;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        scrollbar-width:none;
        padding:2px 0;
    }
    .nex-topics-track::-webkit-scrollbar{display:none}

    /* 每张卡宽 =(整宽 - 间隙)/每屏张数。flex 基准写死、不参与伸缩 ——
       否则最后几张会被挤扁，滚动位置也就全对不上了。 */
    .nex-topic-card{
        position:relative;
        flex:0 0 calc((100% - (var(--nex-topic-cols) - 1) * var(--nex-topic-gap)) / var(--nex-topic-cols));
        display:block;
        aspect-ratio:5 / 3;
        border-radius:12px;
        overflow:hidden;
        background:var(--nx-soft,#f5f7fa);
        scroll-snap-align:start;
        text-decoration:none;
        -webkit-tap-highlight-color:transparent;
    }
    /* 最后一张按末尾对齐。不给它一个 end 吸附点的话，
       scroll-snap-type:mandatory 会把「滚到最右」弹回上一张卡的开头，
       最后一页就永远停不住 —— 页码点和箭头都会指向一个到不了的页。 */
    .nex-topic-card:last-child{scroll-snap-align:end}

    .nex-topic-cover{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
    .nex-topic-card:hover .nex-topic-cover{transform:scale(1.05)}
    /* 0.21.90 杂志式：一张静态主题图，左下角「专题 / 专题名 / 一句话介绍」，和分类盒子同一套字体和位置；
       不写数量、不放封面墙，一眼看出是编辑挑的主题而不是分类。底部压暗托住文字。 */
    .nex-topic-card::after{
        content:"";position:absolute;inset:0;pointer-events:none;
        background:linear-gradient(to top,rgba(8,14,24,.88) 0%,rgba(8,14,24,.5) 30%,rgba(8,14,24,.08) 58%,rgba(8,14,24,0) 72%);
    }
    .nex-topic-text{
        position:absolute;left:16px;right:16px;bottom:14px;z-index:1;
        display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;
        transition:transform .35s cubic-bezier(.2,.7,.2,1);
    }
    .nex-topic-kicker{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.14em;color:rgba(200,251,255,.85)}
    .nex-topic-name{
        max-width:100%;color:#fff;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:.02em;
        text-shadow:0 1px 10px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .nex-topic-desc{max-width:100%;color:rgba(255,255,255,.62);font-size:12.5px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .nex-topic-card:hover .nex-topic-text{transform:translateY(-2px)}

    /* 左右箭头：**压在轨道两端的卡片上**，绝对定位、不占布局位置。
       这样卡片边缘才和板块标题对齐。

       为什么不做成参考图那种「箭头站在内容区外面的留白里」：
       那要求内容区比视口窄、两侧有富余，而内容区宽度是主题给的变量（--nex-content-w），
       CSS 量不到两侧到底有没有留白。硬用负外边距去挤，窄一点的窗口就会顶出横向滚动条。
       与其赌，不如让箭头压在卡片上 —— 这也是 Steam / Netflix 那种轮播的通行做法。

       圆底 + 半透明：压在任意封面上都读得清，明暗主题都不用再单独换色。 */
    .nex-topics-arrow{
        position:absolute;
        top:50%;
        z-index:2;
        width:40px;height:40px;
        margin-top:-20px;
        padding:0;
        display:grid;place-items:center;
        border:0;
        border-radius:50%;
        background:rgba(12,18,30,.55);
        -webkit-backdrop-filter:blur(6px);
        backdrop-filter:blur(6px);
        color:#fff;
        cursor:pointer;
        box-shadow:0 2px 10px rgba(6,14,26,.35);
        transition:background .15s ease,transform .15s ease;
    }
    .nex-topics-arrow svg{width:22px;height:22px;display:block}
    .nex-topics-arrow:hover{background:rgba(12,18,30,.8);transform:scale(1.08)}
    .nex-topics-arrow[hidden]{display:none}
    .nex-topics-arrow.is-prev{left:10px}
    .nex-topics-arrow.is-next{right:10px}

    /* 页码点：当前页是拉长的胶囊，其余是小圆点 */
    .nex-topics-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:16px}
    .nex-topics-dots[hidden]{display:none}
    .nex-topics-dot{
        width:8px;height:8px;
        padding:0;border:0;border-radius:999px;
        background:var(--nx-border,#dfe5ed);
        cursor:pointer;
        transition:width .2s ease,background .2s ease;
    }
    .nex-topics-dot:hover{background:var(--nx-muted,#627187)}
    .nex-topics-dot.is-active{width:22px;background:var(--nx-text,#25324a)}

    .nex-topics-empty{margin:10px 0 0;font-size:12.5px;line-height:1.7;color:var(--nx-muted,#667085)}

    /* 一屏几张：只改 --nex-topic-cols，其余全跟着走。
       固定张数，**不随专题数量变** —— 试过「不够一屏就按实际数量铺满」，
       结果只有 2 个专题时卡片被拉到近 900px 宽、500px 高，整块像张大 banner。
       专题少的时候右边留白是对的：等专题攒够了自然填满，尺寸也不会跳。 */
    @media (max-width:1023px){
        .nex-topics{--nex-topic-cols:4;--nex-topic-gap:12px}
        .nex-topic-name{font-size:16px}
    }
    @media (max-width:760px){
        .nex-topics{--nex-topic-cols:3;--nex-topic-gap:10px}
        .nex-topics-arrow{width:34px;height:34px;margin-top:-17px}
        .nex-topics-arrow svg{width:18px;height:18px}
        .nex-topics-arrow.is-prev{left:6px}
        .nex-topics-arrow.is-next{right:6px}
    }
    @media (max-width:520px){
        /* 手机上卡片本来就小，两个圆钮一压就没了，直接手指滑 */
        .nex-topics{--nex-topic-cols:2;--nex-topic-gap:10px}
        .nex-topics-arrow{display:none!important}
        .nex-topic-text{left:11px;right:11px;bottom:10px}
        .nex-topic-name{font-size:14px}
        .nex-topic-desc{display:none}
    }
    @media (prefers-reduced-motion:reduce){
        .nex-topics-track{scroll-behavior:auto}
        .nex-topic-cover{transition:none}
        .nex-topic-card:hover .nex-topic-cover{transform:none}
        .nex-topic-card:hover .nex-topic-text{transform:none}
        .nex-topics-arrow{transition:none}
        .nex-topics-arrow:hover{transform:none}
    }