/* ============ 游戏专题聚合页 · 现代化 UI 2026-07-05 ============ */
:root{--sp-accent:#5b8def;--sp-accent-2:#7ea6f5;--sp-radius:16px}

/* ---------- 顶部 Hero ---------- */
.special-header{position:relative;width:100%;height:300px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(125deg,#070b14 0%,#0d1830 42%,#122a52 68%,#0b1526 100%)}
.special-header:before{content:"";position:absolute;inset:-10%;background:radial-gradient(80% 120% at 15% 10%,rgba(91,141,239,.38),transparent 55%),radial-gradient(70% 110% at 88% 20%,rgba(126,166,245,.24),transparent 55%),radial-gradient(90% 130% at 60% 120%,rgba(123,80,255,.20),transparent 60%);animation:spHeroGlow 14s ease-in-out infinite}
@keyframes spHeroGlow{0%{transform:translate3d(0,0,0) scale(1);opacity:.9}50%{transform:translate3d(2.5%,-2%,0) scale(1.08);opacity:1}100%{transform:translate3d(0,0,0) scale(1);opacity:.9}}
@media (prefers-reduced-motion:reduce){.special-header:before{animation:none}}
.special-header:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(120% 100% at 50% 0,#000,transparent 75%);mask-image:radial-gradient(120% 100% at 50% 0,#000,transparent 75%)}
.special-header-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,20,.05),rgba(8,12,20,.55))}
.special-header-inner{position:relative;z-index:2;text-align:center;padding:0 20px;max-width:1000px}
.special-header-title{color:#fff;font-size:38px;font-weight:800;letter-spacing:2px;line-height:1.2;text-shadow:0 6px 24px rgba(0,0,0,.5)}
.special-header-title i{font-size:38px;background:linear-gradient(135deg,var(--sp-accent-2),var(--sp-accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-right:6px}
.special-header-desc{color:rgba(255,255,255,.82);font-size:15px;line-height:1.7;margin-top:14px;max-width:760px;margin-left:auto;margin-right:auto;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- 主体容器 ---------- */
.special-main{margin-top:-56px;position:relative;z-index:3;padding-bottom:40px}
.special-main>.container{background:#fff;border-radius:20px;box-sizing:border-box;padding:26px 26px 30px;box-shadow:0 20px 50px -24px rgba(15,30,60,.35)}

/* ---------- 子专题导航（pill） ---------- */
.special-subnav{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid #eef1f5}
.special-subnav a{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;font-size:14px;color:#5a6572;background:#f4f6f9;border-radius:999px;line-height:1;transition:all .25s;white-space:nowrap}
.special-subnav a i{font-size:13px}
.special-subnav a:hover{color:var(--sp-accent);background:#eef3fd;transform:translateY(-1px)}
.special-subnav a.hover{color:#fff;background:linear-gradient(135deg,var(--sp-accent),#7ea6f5);box-shadow:0 4px 10px -4px rgba(91,141,239,.35)}

/* ---------- 专题卡片网格（修复：Grid 替代 width:24%+gap 溢出） ---------- */
.special-main .special-box{width:100%!important}
.special-main .special-box .box-list-item{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;box-sizing:border-box}
.special-main .special-box .box-list-item .item-in{width:auto;margin:0;background:#fff;position:relative;border-radius:var(--sp-radius);overflow:hidden;border:1px solid #eef1f5;box-shadow:0 12px 30px -20px rgba(20,40,80,.4);transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;display:flex;flex-direction:column}
.special-main .special-box .box-list-item .item-in:hover{transform:translateY(-6px);box-shadow:0 26px 44px -20px rgba(91,141,239,.45);border-color:#cddcfa}

/* 封面 */
.special-main .special-box .box-list-item .item-in .in-cover{display:block;position:relative}
.special-main .special-box .box-list-item .item-in .in-img{width:100%;aspect-ratio:92/43;height:auto;overflow:hidden;background:#eef1f5}
.special-main .special-box .box-list-item .item-in .in-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.special-main .special-box .box-list-item .item-in:hover .in-img img{transform:scale(1.08)}
.special-main .special-box .box-list-item .item-in .in-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.5))}
.special-main .special-box .box-list-item .item-in .in-count{position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:4px 11px;font-size:12px;font-weight:600;color:#fff;background:rgba(91,141,239,.85);border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* 标题 + 描述 */
.special-main .special-box .box-list-item .item-in .in-info{padding:14px 16px 12px;border-bottom:1px solid #f2f4f7}
.special-main .special-box .box-list-item .item-in .in-info h3{font-size:18px;line-height:26px;font-weight:700;color:#1f2530;margin-bottom:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.special-main .special-box .box-list-item .item-in .in-info .info-meta{display:block}
.special-main .special-box .box-list-item .item-in .in-info .info-meta span.desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;color:#8b95a3;font-size:13px;line-height:20px;height:40px}

/* 专题内游戏小列表 */
.special-main .special-box .box-list-item .item-in .in-list{margin:8px 16px 4px;flex:1}
.special-main .special-box .box-list-item .item-in .in-list li{display:flex;align-items:center;padding:8px 0}
.special-main .special-box .box-list-item .item-in .in-list li+li{border-top:1px dashed #f0f2f5}
.special-main .special-box .box-list-item .item-in .in-list .list-icon{display:block;margin-right:10px;width:46px;height:46px;flex-shrink:0}
.special-main .special-box .box-list-item .item-in .in-list .list-icon img{width:100%;height:100%;background:#eef1f5;display:block;border-radius:10px;object-fit:cover}
.special-main .special-box .box-list-item .item-in .in-list .list-info{min-width:0;flex:1}
.special-main .special-box .box-list-item .item-in .in-list .list-info h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;line-height:22px;font-weight:500;color:#2b323d}
.special-main .special-box .box-list-item .item-in .in-list .list-info p,.special-main .special-box .box-list-item .item-in .in-list .list-info p a{color:#9aa3b0;font-size:12px}
.special-main .special-box .box-list-item .item-in .in-list .list-info p a:hover{color:var(--sp-accent)}
.special-main .special-box .box-list-item .item-in .in-list .list-info p span{margin-right:14px}
.special-main .special-box .box-list-item .item-in .in-list .list-info p span:before{margin-right:4px}

/* 查看专题按钮 */
.special-main .special-box .box-list-item .item-in .in-btn{padding:12px 16px 16px}
.special-main .special-box .box-list-item .item-in .in-btn a{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--sp-accent);background:#eef3fd;line-height:34px;border-radius:999px;font-size:14px;font-weight:600;transition:all .3s}
.special-main .special-box .box-list-item .item-in:hover .in-btn a{color:#fff;background:linear-gradient(135deg,var(--sp-accent),#7ea6f5);box-shadow:0 4px 10px -4px rgba(91,141,239,.35)}
body.night .special-main .special-box .box-list-item .item-in:hover .in-btn a{background:linear-gradient(135deg,#3a6db5,#4f7cc0);box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}

/* ---------- 分页 ---------- */
.special-main .pages{margin-top:30px;text-align:center}

/* ---------- 夜间模式 ---------- */
body.night .special-main>.container{background:#292a2d;box-shadow:none}
body.night .special-subnav{border-bottom-color:#3a3d42}
body.night .special-subnav a{background:#323335;color:#c0c4cc}
body.night .special-subnav a:hover{background:#22403c;color:#8bb0f7}
body.night .special-subnav a.hover{background:linear-gradient(135deg,#3a6db5,#4f7cc0);color:#fff;box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
body.night .special-main .special-box .box-list-item .item-in{background:#323335;border-color:#3a3d42;box-shadow:none}
body.night .special-main .special-box .box-list-item .item-in .in-info{border-bottom-color:#3a3d42}
body.night .special-main .special-box .box-list-item .item-in .in-info h3{color:#e6e8eb}
body.night .special-main .special-box .box-list-item .item-in .in-list .list-info h3{color:#c0c4cc}
body.night .special-main .special-box .box-list-item .item-in .in-list li+li{border-top-color:#3a3d42}
body.night .special-main .special-box .box-list-item .item-in .in-btn a{background:#22403c}
/* 子专题页 .cover 网格夜间模式 */
body.night .special-main .cover ul li{background:#323335;border-color:#3a3d42;box-shadow:none}
body.night .special-main .cover ul li .img{background:#3a3d42}
body.night .special-main .cover ul li .tit h3{color:#e6e8eb}
body.night .special-main .cover ul li .tit .meta{color:#9aa3b0}

/* ---------- 响应式 ---------- */
@media screen and (max-width:1520px){
  .special-main>.container{width:1300px}
  .special-main .special-box .box-list-item{gap:18px}
}
@media screen and (max-width:1320px){
  .special-main>.container{width:1200px}
  .special-main .special-box .box-list-item{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media screen and (max-width:1000px){
  .special-main .special-box .box-list-item{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:800px){
  .special-header{height:auto;min-height:12rem;padding-top:5rem;padding-bottom:1.5rem;box-sizing:border-box}
  .special-header-title{font-size:1.6rem}
  .special-header-title i{font-size:1.6rem}
  .special-header-desc{font-size:.85rem;margin-top:8px}
  .special-main{margin-top:-2.5rem}
  .special-main>.container{width:94%;padding:16px 14px 20px;border-radius:16px}
  .special-subnav{gap:8px;padding-bottom:14px;margin-bottom:16px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .special-subnav::-webkit-scrollbar{height:0}
  .special-subnav a{padding:7px 14px;font-size:13px}
  .special-main .special-box .box-list-item{gap:12px}
  .special-main .special-box .box-list-item .item-in .in-info h3{font-size:16px}
}
@media screen and (max-width:520px){
  .special-main .special-box .box-list-item{grid-template-columns:1fr}
}

/* ============ 子专题游戏列表页 · list_special.htm 的 .cover ul li 网格 ============ */
.special-main .cover{width:100%!important}
.special-main .cover ul{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin:0;min-height:200px}
.special-main .cover ul li{float:none;width:auto;margin:0;border-radius:var(--sp-radius);overflow:hidden;background:#fff;border:1px solid #eef1f5;box-shadow:0 10px 26px -18px rgba(20,40,80,.35);transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.special-main .cover ul li:hover{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(91,141,239,.45);border-color:#cddcfa}
.special-main .cover ul li .img{position:relative;width:100%;aspect-ratio:92/43;height:auto;overflow:hidden;background:#eef1f5}
.special-main .cover ul li .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.special-main .cover ul li:hover .img img{transform:scale(1.08)}
.special-main .cover ul li .img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));opacity:0;transition:opacity .3s}
.special-main .cover ul li:hover .img:after{opacity:1}
.special-main .cover ul li .tit{padding:12px 14px 14px}
.special-main .cover ul li .tit h3{font-size:15px;height:44px;line-height:22px;font-weight:400;color:#1f2530;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.special-main .cover ul li .tit .meta-row{display:flex;align-items:center;justify-content:space-between;line-height:20px;font-size:12px}
.special-main .cover ul li .tit .rank{display:inline-flex;align-items:center;gap:4px;color:#f5a623;font-weight:600}
.special-main .cover ul li .tit .rank:before{color:#f5a623}
.special-main .cover ul li .tit .meta{display:inline-flex;align-items:center;gap:5px;color:#8b95a3}
.special-main .cover ul li .tit .meta:before{margin-right:2px;color:var(--sp-accent)}
@media screen and (max-width:1320px){.special-main .cover ul{grid-template-columns:repeat(4,1fr);gap:16px}}
@media screen and (max-width:1000px){.special-main .cover ul{grid-template-columns:repeat(3,1fr)}}
@media screen and (max-width:800px){.special-main .cover ul{grid-template-columns:repeat(2,1fr);gap:12px}
.special-main .cover ul li .tit{padding:10px}
.special-main .cover ul li .tit h3{font-size:14px;height:40px;line-height:20px}}

/* ---------- 专题页分页器：主色跟随青绿（局部覆盖 public.css 的蓝） ---------- */
.special-main .pages li a{border-color:var(--sp-accent);color:var(--sp-accent)}
.special-main .pages li a:hover{color:#3f6fd0}
.special-main .pages .thisclass a{background:var(--sp-accent);border-color:var(--sp-accent);color:#fff}
.special-main .pages .thisclass a:hover{color:#fff}