/* roulang page: index */
:root{
  --pcol:#c8a15a;
  --scol:#5fd0c4;
  --bgc:#0a0c11;
  --srf:#121620;
  --txtc:#f1f2f5;
  --mutec:#98a1b2;
  --bdc:rgba(255,255,255,.09);
  --rds:14px;
  --shdw:0 16px 36px rgba(0,0,0,.45);
  --spc:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bgc);color:var(--txtc);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
.mfmmwls-wrap{width:min(1200px,100% - 40px);margin-inline:auto}

/* 顶栏 */
.mfmmwls-top{position:sticky;top:0;z-index:30;background:rgba(10,12,17,.8);backdrop-filter:blur(14px);border-bottom:1px solid var(--bdc)}
.mfmmwls-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px}
.mfmmwls-logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.06em;font-size:17px}
.mfmmwls-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--pcol),#8a6a2f);color:#0a0c11;font-size:17px;font-weight:800}
.mfmmwls-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.mfmmwls-nav::-webkit-scrollbar{display:none}
.mfmmwls-nav a{display:inline-flex;align-items:center;height:44px;padding:0 15px;border-radius:999px;font-size:15px;color:var(--mutec);white-space:nowrap;transition:color .2s,background .2s}
.mfmmwls-nav a:hover,.mfmmwls-nav a:focus-visible{color:var(--txtc);background:rgba(255,255,255,.07)}
.mfmmwls-nav a:focus-visible{outline:2px solid var(--scol);outline-offset:2px}

/* 首屏 */
.mfmmwls-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:620px;padding:88px 0 78px}
.mfmmwls-heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mfmmwls-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(6,8,12,.95) 28%,rgba(6,8,12,.6) 66%,rgba(6,8,12,.32) 100%)}
.mfmmwls-herobox{position:relative;z-index:2}
.mfmmwls-kicker{display:inline-block;padding:6px 15px;border:1px solid rgba(200,161,90,.5);border-radius:999px;font-size:13px;letter-spacing:.14em;color:var(--pcol)}
.mfmmwls-hero h1{font-size:clamp(2.1rem,5.2vw,3.7rem);line-height:1.16;letter-spacing:-.01em;margin:16px 0 20px;max-width:660px}
.mfmmwls-hl{color:var(--pcol)}
.mfmmwls-lead{max-width:640px;color:#c9cfdb;font-size:16px;line-height:1.88}
.mfmmwls-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.mfmmwls-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:999px;background:linear-gradient(135deg,var(--pcol),#a8802f);color:#10131a;font-size:15px;font-weight:700;transition:transform .2s,box-shadow .2s}
.mfmmwls-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(200,161,90,.28)}
.mfmmwls-btn:focus-visible{outline:2px solid var(--scol);outline-offset:3px}
.mfmmwls-btn2{background:transparent;color:var(--txtc);border:1px solid rgba(255,255,255,.3)}
.mfmmwls-btn2:hover{border-color:var(--scol);color:var(--scol);box-shadow:none}
.mfmmwls-note{margin-top:24px;font-size:14px;color:var(--mutec);letter-spacing:.04em}

/* 板块通用 */
.mfmmwls-band{padding:72px 0}
.mfmmwls-alt{background:#0d1017}
.mfmmwls-h2{font-size:clamp(1.5rem,3vw,2.05rem);letter-spacing:-.01em;line-height:1.3}
.mfmmwls-sub{margin-top:14px;max-width:840px;color:var(--mutec);font-size:15.5px;line-height:1.88}

/* 卖点三连 */
.mfmmwls-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.mfmmwls-trio li{padding:26px;border:1px solid var(--bdc);border-radius:var(--rds);background:var(--srf);transition:transform .22s,border-color .22s}
.mfmmwls-trio li:hover{transform:translateY(-3px);border-color:rgba(200,161,90,.45)}
.mfmmwls-trio h3{font-size:1.08rem;margin-bottom:12px}
.mfmmwls-trio h3::before{content:"";display:block;width:26px;height:2px;background:var(--pcol);margin-bottom:12px}
.mfmmwls-trio p{color:var(--mutec);font-size:15px;line-height:1.8}

/* 分类频道 */
.mfmmwls-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.mfmmwls-cats li{padding:24px;border:1px solid var(--bdc);border-radius:var(--rds);background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012))}
.mfmmwls-cats h3{font-size:1.04rem;margin-bottom:9px;color:var(--txtc)}
.mfmmwls-cats p{color:var(--mutec);font-size:14.5px;line-height:1.8}

/* 卡片墙 */
.mfmmwls-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px}
.mfmmwls-card{background:var(--srf);border:1px solid var(--bdc);border-radius:var(--rds);overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s}
.mfmmwls-card:hover{transform:translateY(-4px);box-shadow:var(--shdw);border-color:rgba(200,161,90,.4)}
.mfmmwls-thumb{position:relative;aspect-ratio:2/3;overflow:hidden;background:#06080c}
.mfmmwls-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mfmmwls-card:hover .mfmmwls-thumb img{transform:scale(1.05)}
.mfmmwls-tag{position:absolute;top:10px;left:10px;padding:3px 9px;border-radius:6px;background:rgba(10,12,17,.8);border:1px solid rgba(255,255,255,.16);font-size:12px;color:var(--scol)}
.mfmmwls-score{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:6px;background:rgba(200,161,90,.94);color:#10131a;font-size:13px;font-weight:700}
.mfmmwls-card h3{font-size:1rem;margin:14px 16px 6px}
.mfmmwls-card p{margin:0 16px 16px;color:var(--mutec);font-size:13.5px;line-height:1.62}

/* 排行榜 */
.mfmmwls-rank{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:38px}
.mfmmwls-rank li{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 18px;border:1px solid var(--bdc);border-radius:12px;background:var(--srf);transition:border-color .2s,transform .2s}
.mfmmwls-rank li:hover{border-color:rgba(200,161,90,.45);transform:translateX(3px)}
.mfmmwls-no{min-width:26px;font-size:15px;font-weight:800;color:var(--pcol);font-variant-numeric:tabular-nums}
.mfmmwls-rname{font-weight:600;font-size:15px}
.mfmmwls-rtype{font-size:12.5px;color:var(--mutec);border:1px solid var(--bdc);border-radius:999px;padding:2px 9px}
.mfmmwls-rheat{margin-left:auto;font-size:13px;color:var(--scol);white-space:nowrap}

/* 主题片单 */
.mfmmwls-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.mfmmwls-feats li{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:290px;padding:26px;border:1px solid var(--bdc);border-radius:var(--rds);overflow:hidden}
.mfmmwls-feats img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s ease}
.mfmmwls-feats li:hover img{transform:scale(1.04)}
.mfmmwls-feats li::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,8,12,.12),rgba(6,8,12,.93))}
.mfmmwls-feats h3,.mfmmwls-feats p,.mfmmwls-meta{position:relative;z-index:2}
.mfmmwls-feats h3{font-size:1.16rem;margin-bottom:8px}
.mfmmwls-feats p{color:#c6ccd8;font-size:14.5px;line-height:1.75}
.mfmmwls-meta{display:inline-block;margin-top:14px;font-size:12.5px;letter-spacing:.08em;color:var(--pcol)}

/* 高分好评 */
.mfmmwls-picks{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:38px}
.mfmmwls-picks li{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--bdc);border-radius:var(--rds);background:var(--srf);transition:border-color .2s,transform .2s}
.mfmmwls-picks li:hover{border-color:rgba(200,161,90,.45);transform:translateY(-2px)}
.mfmmwls-pic{flex:0 0 88px;width:88px;aspect-ratio:2/3;border-radius:10px;overflow:hidden}
.mfmmwls-pic img{width:100%;height:100%;object-fit:cover}
.mfmmwls-picks h3{font-size:1rem;display:flex;align-items:center;gap:9px;margin-bottom:7px}
.mfmmwls-sc{font-size:13px;font-weight:700;color:#10131a;background:var(--pcol);border-radius:6px;padding:1px 7px}
.mfmmwls-picks p{font-size:14px;color:var(--mutec);line-height:1.7}

/* 类型专区 */
.mfmmwls-genres{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
.mfmmwls-genres > li{padding:24px;border:1px solid var(--bdc);border-radius:var(--rds);background:var(--srf)}
.mfmmwls-genres h3{font-size:1.04rem;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--bdc);color:var(--pcol)}
.mfmmwls-genres ul li{font-size:14.5px;color:#c3cad6;padding:6px 0;line-height:1.6}

/* 资讯 */
.mfmmwls-news{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:38px}
.mfmmwls-news li{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid var(--bdc);border-radius:12px;background:var(--srf);transition:border-color .2s}
.mfmmwls-news li:hover{border-color:rgba(95,208,196,.45)}
.mfmmwls-news img{flex:0 0 112px;width:112px;height:76px;object-fit:cover;border-radius:9px}
.mfmmwls-newstx h3{font-size:15px;line-height:1.5;margin-bottom:5px}
.mfmmwls-newstx p{font-size:13.5px;color:var(--mutec);line-height:1.65}
.mfmmwls-time{display:inline-block;margin-top:7px;font-size:12.5px;color:var(--pcol);letter-spacing:.06em}

/* 口碑 */
.mfmmwls-voices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.mfmmwls-voices li{padding:26px;border:1px solid var(--bdc);border-radius:var(--rds);background:var(--srf)}
.mfmmwls-voices p{font-size:15px;color:#d5dae4;line-height:1.8}
.mfmmwls-who{display:block;margin-top:16px;font-size:13px;color:var(--pcol);letter-spacing:.04em}

/* 问答 */
.mfmmwls-qa{margin-top:34px;display:grid;gap:14px;max-width:940px}
.mfmmwls-qa > div{padding:22px 24px;border:1px solid var(--bdc);border-radius:var(--rds);background:var(--srf)}
.mfmmwls-qa dt{font-size:1.02rem;font-weight:700;margin-bottom:9px}
.mfmmwls-qa dd{margin:0;font-size:15px;color:var(--mutec);line-height:1.82}

/* 收口 */
.mfmmwls-cta{padding:74px 0;text-align:center;border-top:1px solid var(--bdc);background:radial-gradient(circle at 50% 10%,rgba(200,161,90,.16),transparent 62%),#0b0e14}
.mfmmwls-cta h2{font-size:clamp(1.4rem,3vw,2rem)}
.mfmmwls-cta p{max-width:640px;margin:16px auto 0;color:var(--mutec);font-size:15.5px;line-height:1.85}
.mfmmwls-cta .mfmmwls-btn{margin-top:28px}

/* 页脚 */
.mfmmwls-foot{background:#070910;border-top:1px solid var(--bdc);padding:56px 0 26px}
.mfmmwls-fcols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px}
.mfmmwls-fcols h3{font-size:13.5px;letter-spacing:.1em;color:var(--mutec);margin-bottom:16px}
.mfmmwls-fcols p{font-size:14px;color:#b8bfcc;line-height:1.85;max-width:320px}
.mfmmwls-fcols li{font-size:14px;color:#b8bfcc;margin-bottom:10px}
.mfmmwls-fcols a{color:#b8bfcc;transition:color .2s}
.mfmmwls-fcols a:hover{color:var(--pcol)}
.mfmmwls-copy{margin-top:38px;padding-top:20px;border-top:1px solid var(--bdc);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:13px;color:#78818f}

@media (max-width:1024px){
  .mfmmwls-cards{grid-template-columns:repeat(3,1fr);gap:18px}
  .mfmmwls-cats{grid-template-columns:repeat(2,1fr)}
  .mfmmwls-genres{grid-template-columns:repeat(2,1fr)}
  .mfmmwls-fcols{grid-template-columns:1fr 1fr;gap:28px}
  .mfmmwls-hero{min-height:560px;padding:72px 0 64px}
  .mfmmwls-band{padding:60px 0}
  .mfmmwls-feats li{min-height:260px}
}
@media (max-width:768px){
  .mfmmwls-topbar{min-height:auto;flex-direction:column;align-items:stretch;gap:4px;padding:10px 0 6px}
  .mfmmwls-nav{gap:2px}
  .mfmmwls-nav a{height:44px;padding:0 12px;font-size:14.5px}
  .mfmmwls-hero{min-height:0;padding:56px 0}
  .mfmmwls-hero h1{font-size:clamp(1.85rem,7vw,2.5rem)}
  .mfmmwls-lead{font-size:15px}
  .mfmmwls-trio,.mfmmwls-picks,.mfmmwls-news,.mfmmwls-voices,.mfmmwls-feats,.mfmmwls-rank{grid-template-columns:1fr}
  .mfmmwls-cards{grid-template-columns:repeat(2,1fr);gap:14px}
  .mfmmwls-band{padding:52px 0}
  .mfmmwls-sub{font-size:15px}
  .mfmmwls-qa > div{padding:18px}
}
@media (max-width:520px){
  .mfmmwls-wrap{width:min(1200px,100% - 28px)}
  .mfmmwls-cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .mfmmwls-card h3{font-size:14.5px;margin:12px 12px 4px}
  .mfmmwls-card p{font-size:13px;margin:0 12px 12px}
  .mfmmwls-cats,.mfmmwls-genres,.mfmmwls-fcols{grid-template-columns:1fr}
  .mfmmwls-btns .mfmmwls-btn{flex:1 1 100%}
  .mfmmwls-rank li{flex-wrap:wrap;gap:10px}
  .mfmmwls-rheat{margin-left:0;width:100%}
  .mfmmwls-news li{flex-direction:column;align-items:flex-start}
  .mfmmwls-news img{width:100%;height:150px;flex:none}
  .mfmmwls-picks li{align-items:flex-start}
  .mfmmwls-cta{padding:56px 0}
}