/* 蜗牛影院 - 科技霓虹风 (深紫星空 + 玻璃拟态卡片)
   区别于旧xd0833(浅色卡片) 和 其他站 */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  background:radial-gradient(ellipse at top,#1a1038 0%,#0a0618 55%,#060312 100%);
  color:#e6e2f5; line-height:1.6; min-height:100vh;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* 顶部 */
.topbar {
  background:rgba(16,10,40,.75); backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(124,77,255,.25);
  display:flex; align-items:center; gap:20px; padding:14px 26px;
}
.logo { font-size:21px; font-weight:800; color:#a78bff; display:flex; align-items:center; gap:8px; }
.logo small { font-size:12px; color:#6b5a99; font-weight:400; }
.nav { display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
.nav a { color:#8f82bd; padding:7px 16px; border-radius:10px; font-size:14px; transition:.2s; }
.nav a:hover { color:#cbb8ff; background:rgba(124,77,255,.15); }
.nav a.act { color:#fff; background:linear-gradient(135deg,#7c4dff,#a46bff); box-shadow:0 4px 14px rgba(124,77,255,.45); }
.mc { display:none; }
.mt { display:none; font-size:22px; color:#a78bff; cursor:pointer; margin-left:auto; }

/* hero */
.hero { position:relative; height:360px; overflow:hidden; }
.hbg img { width:100%; height:100%; object-fit:cover; opacity:.35; }
.hov {
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(10,6,24,.96) 0%,rgba(10,6,24,.6) 45%,transparent 72%);
  display:flex; flex-direction:column; justify-content:center; padding:0 60px;
}
.hov .tag { align-self:flex-start; background:linear-gradient(135deg,#7c4dff,#a46bff); color:#fff; font-size:12px; padding:4px 14px; border-radius:6px; margin-bottom:14px; letter-spacing:1px; }
.hov h1 { font-size:36px; font-weight:800; color:#fff; margin-bottom:10px; text-shadow:0 0 30px rgba(124,77,255,.6); }
.hov p { color:#b5a8dd; max-width:480px; font-size:14px; }
.hov .hmeta { margin-top:14px; color:#8f82bd; font-size:13px; display:flex; gap:18px; }
.hov .hbtn { align-self:flex-start; margin-top:20px; background:linear-gradient(135deg,#7c4dff,#a46bff); color:#fff; padding:11px 30px; border-radius:10px; font-weight:700; font-size:14px; box-shadow:0 6px 20px rgba(124,77,255,.5); }

/* 内容 */
.container { max-width:1200px; margin:0 auto; padding:32px 20px; }
section { margin-bottom:40px; }
.sec { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.sec h2 { font-size:21px; font-weight:800; color:#cbb8ff; border-left:4px solid #7c4dff; padding-left:12px; }
.sec .more { color:#6b5a99; font-size:13px; }
.sec .more:hover { color:#a78bff; }

/* 玻璃拟态卡片 */
.ggrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; }
.gcard {
  background:rgba(255,255,255,.06); border:1px solid rgba(124,77,255,.25);
  backdrop-filter:blur(10px); border-radius:14px; overflow:hidden; transition:.3s;
}
.gcard:hover { transform:translateY(-6px); border-color:#a46bff; box-shadow:0 12px 30px rgba(124,77,255,.35); }
.gimg { position:relative; aspect-ratio:3/4; overflow:hidden; background:#14093a; }
.gimg img { width:100%; height:100%; object-fit:cover; transition:.4s; }
.gcard:hover .gimg img { transform:scale(1.06); }
.gscore { position:absolute; bottom:10px; right:10px; background:rgba(10,6,24,.8); color:#ffd166; font-weight:800; font-size:14px; padding:2px 10px; border-radius:8px; }
.gyear { position:absolute; top:10px; left:10px; background:rgba(124,77,255,.9); color:#fff; font-size:11px; padding:2px 10px; border-radius:6px; }
.gbody { padding:12px 14px 14px; }
.gbody h3 { font-size:15px; font-weight:700; color:#e6e2f5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gbody .gmeta { margin-top:6px; font-size:12px; color:#8f82bd; display:flex; justify-content:space-between; }

/* 排行 */
.rlist { display:flex; flex-direction:column; gap:12px; }
.ritem { display:flex; align-items:center; gap:18px; background:rgba(255,255,255,.05); border:1px solid rgba(124,77,255,.2); border-radius:12px; padding:10px 18px; transition:.2s; }
.ritem:hover { border-color:#a46bff; background:rgba(124,77,255,.12); }
.rno { font-size:22px; font-weight:900; width:42px; text-align:center; color:#6b5a99; }
.ritem:nth-child(-n+3) .rno { color:#a46bff; text-shadow:0 0 14px rgba(124,77,255,.6); }
.rthumb { width:64px; height:88px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.rthumb img { width:100%; height:100%; object-fit:cover; }
.rinfo { flex:1; min-width:0; }
.rinfo h3 { font-size:16px; font-weight:700; color:#e6e2f5; }
.rinfo .rmeta { color:#8f82bd; font-size:12px; margin-top:4px; }
.rscore { color:#ffd166; font-weight:800; font-size:15px; }

.pagehead { margin-bottom:22px; }
.pagehead h1 { font-size:26px; font-weight:800; color:#cbb8ff; margin-bottom:6px; }
.pagehead p { color:#6b5a99; font-size:14px; }

/* 详情 */
.dwrap { display:flex; gap:30px; margin-top:20px; }
.dimg { width:280px; flex-shrink:0; aspect-ratio:3/4; border-radius:14px; overflow:hidden; border:1px solid rgba(124,77,255,.35); box-shadow:0 8px 30px rgba(124,77,255,.3); }
.dimg img { width:100%; height:100%; object-fit:cover; }
.dinfo h1 { font-size:32px; font-weight:800; color:#fff; margin-bottom:12px; }
.dtags { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.dtags span { background:rgba(124,77,255,.15); color:#cbb8ff; font-size:12px; padding:5px 14px; border-radius:20px; border:1px solid rgba(124,77,255,.3); }
.desc { background:rgba(255,255,255,.05); border:1px solid rgba(124,77,255,.2); border-radius:14px; padding:18px 20px; margin-top:18px; }
.desc h3 { font-size:16px; color:#a78bff; margin-bottom:10px; }
.desc p { color:#b5a8dd; font-size:14px; line-height:1.9; }
.dbtns { margin-top:18px; display:flex; gap:12px; }
.dbtns .ghost { background:rgba(124,77,255,.2); color:#cbb8ff; padding:10px 24px; border-radius:8px; font-weight:700; border:1px solid rgba(124,77,255,.4); }
.back { display:inline-block; color:#6b5a99; font-size:13px; margin-top:14px; }
.back:hover { color:#a78bff; }
.note { color:#6b5a99; font-size:12px; margin-top:14px; font-style:italic; }

.foot { text-align:center; padding:24px; color:#6b5a99; font-size:13px; border-top:1px solid rgba(124,77,255,.2); margin-top:30px; }

@media (max-width:768px) {
  .mt { display:block; }
  .nav { display:none; position:absolute; top:100%; left:0; right:0; background:#14093a; flex-direction:column; padding:10px; }
  .mc:checked ~ .nav { display:flex; }
  .hero { height:240px; }
  .hov { padding:0 24px; }
  .hov h1 { font-size:24px; }
  .dwrap { flex-direction:column; }
  .dimg { width:100%; aspect-ratio:16/9; }
}