/* ============ 必玩大作列表页 · 现代化 UI 2026-07-05 ============ */
/* 独立命名空间 .biwan-*，不影响 list.css / 其他列表页 */
.biwan-page{--bw-accent:#5b8def;--bw-accent-2:#7ea6f5;--bw-radius:16px}

/* ---------- 顶部 Hero ---------- */
.biwan-header{position:relative;width:100%;height:300px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(125deg,#0b0f16 0%,#171a20 45%,#20242c 70%,#0f1218 100%)}
.biwan-header:before{content:"";position:absolute;inset:-10%;background:radial-gradient(80% 120% at 15% 10%,rgba(91,141,239,.32),transparent 55%),radial-gradient(70% 110% at 88% 20%,rgba(126,166,245,.26),transparent 55%),radial-gradient(90% 130% at 60% 120%,rgba(123,80,255,.20),transparent 60%);animation:bwHeroGlow 14s ease-in-out infinite}
@keyframes bwHeroGlow{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){.biwan-header:before{animation:none}}
.biwan-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%)}
.biwan-header-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,16,.05),rgba(8,10,16,.55))}
.biwan-header-inner{position:relative;z-index:2;text-align:center;padding:0 20px;max-width:1000px}
.biwan-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)}
.biwan-header-title i{font-size:36px;background:linear-gradient(135deg,var(--bw-accent-2),var(--bw-accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-right:8px}
.biwan-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}

/* ---------- 主体容器 ---------- */
.biwan-main{margin-top:-56px;position:relative;z-index:3;padding-bottom:40px}
.biwan-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)}

/* ---------- 卡片网格 ---------- */
.biwan-cover{width:100%}
.biwan-cover ul{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin:0;min-height:200px}
.biwan-cover ul li{float:none;width:auto;margin:0;border-radius:var(--bw-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}
.biwan-cover ul li:hover{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(91,141,239,.42);border-color:#cddcfa}

/* 封面 */
.biwan-cover ul li .img{position:relative;width:100%;aspect-ratio:92/43;height:auto;overflow:hidden;background:#eef1f5}
.biwan-cover ul li .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.biwan-cover ul li:hover .img img{transform:scale(1.08)}
.biwan-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}
.biwan-cover ul li:hover .img:after{opacity:1}

/* 标题 + 信息行 */
.biwan-cover ul li .tit{padding:12px 14px 14px}
.biwan-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}
.biwan-cover ul li .tit .meta-row{display:flex;align-items:center;justify-content:space-between;line-height:20px;font-size:12px}
.biwan-cover ul li .tit .rank{display:inline-flex;align-items:center;gap:4px;color:#f5a623;font-weight:600}
.biwan-cover ul li .tit .rank:before{color:#f5a623}
.biwan-cover ul li .tit .meta{display:inline-flex;align-items:center;gap:5px;color:#8b95a3}
.biwan-cover ul li .tit .meta:before{margin-right:2px;color:var(--bw-accent)}

/* ---------- 分页 ---------- */
.biwan-cover .pages{margin-top:30px;text-align:center}
.biwan-cover .pages li a{border-color:var(--bw-accent);color:var(--bw-accent)}
.biwan-cover .pages li a:hover{color:#3f6fd0}
.biwan-cover .pages .thisclass a{background:var(--bw-accent);border-color:var(--bw-accent);color:#fff}
.biwan-cover .pages .thisclass a:hover{color:#fff}

/* ---------- 夜间模式 ---------- */
body.night .biwan-main>.container{background:#292a2d;box-shadow:none}
body.night .biwan-cover ul li{background:#323335;border-color:#3a3d42;box-shadow:none}
body.night .biwan-cover ul li .img{background:#3a3d42}
body.night .biwan-cover ul li .tit h3{color:#e6e8eb}
body.night .biwan-cover ul li .tit .meta{color:#9aa3b0}

/* ---------- 响应式 ---------- */
@media screen and (max-width:1520px){.biwan-main>.container{width:1300px}.biwan-cover ul{gap:18px}}
@media screen and (max-width:1320px){.biwan-main>.container{width:1200px}.biwan-cover ul{grid-template-columns:repeat(4,1fr);gap:16px}}
@media screen and (max-width:1000px){.biwan-cover ul{grid-template-columns:repeat(3,1fr)}}
@media screen and (max-width:800px){
  .biwan-header{height:12rem}
  .biwan-header-title{font-size:1.6rem}
  .biwan-header-title i{font-size:1.5rem}
  .biwan-header-desc{font-size:.85rem;margin-top:8px}
  .biwan-main{margin-top:-2.5rem}
  .biwan-main>.container{width:94%;padding:16px 14px 20px;border-radius:16px}
  .biwan-cover ul{grid-template-columns:repeat(2,1fr);gap:12px}
  .biwan-cover ul li .tit{padding:10px}
  .biwan-cover ul li .tit h3{font-size:14px;height:40px;line-height:20px}
}