.picks{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-bottom:56px}
.pk{display:block;background:var(--paper);padding:18px;text-decoration:none;color:inherit;transition:background .15s}
.pk:hover{background:#fbfaf8}
.pk figure{margin:0 0 12px;aspect-ratio:460/215;overflow:hidden;background:var(--line-soft)}
.pk figure img{width:100%;height:100%;object-fit:cover;display:block}
.pk figure .ph{display:block;width:100%;height:100%}
.pk .rk{font-family:var(--serif);font-size:12px;color:var(--faint);letter-spacing:.1em;margin-bottom:4px}
.pk h3{font-family:var(--serif);font-size:17px;font-weight:600;margin:0 0 8px;line-height:1.35}
.pk:hover h3{color:var(--accent)}
.pk .tg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.pk .tg span{font-size:11px;color:var(--mute);border:1px solid var(--line);padding:1px 7px;border-radius:2px}
.pk p{font-size:13.5px;line-height:1.75;color:var(--mute);margin:0}
.pk.off{cursor:default}
.pk.off h3{color:var(--mute)}
.buy{display:inline-flex;align-items:center;position:relative;margin-top:20px;padding:9px 26px;
  font-size:14px;letter-spacing:.08em;color:#a9a49d;background:#f4f2ef;border:1px solid var(--line);
  border-radius:3px;cursor:not-allowed;user-select:none}
.buy i{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;
  font-style:normal;font-size:12px;letter-spacing:.06em;color:var(--paper);background:var(--ink);
  padding:5px 10px;border-radius:3px;opacity:0;visibility:hidden;transition:opacity .15s}
.buy i::after{content:"";position:absolute;top:100%;left:50%;margin-left:-4px;border:4px solid transparent;border-top-color:var(--ink)}
.buy:hover i{opacity:1;visibility:visible}
@media(max-width:900px){.picks{grid-template-columns:1fr}}

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#fff; --ink:#141312; --mute:#77726c; --faint:#a5a099;
  --line:#e7e4df; --line-soft:#f1efeb; --accent:#a8321e;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,serif;
  --sans:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
html{-webkit-font-smoothing:antialiased}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.85;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1000px;margin:0 auto;padding:0 28px}
.narrow{max-width:680px;margin:0 auto;padding:0 28px}
figure{overflow:hidden;background:var(--line-soft)}
figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.95);transition:transform .5s ease}
a:hover figure img{transform:scale(1.03)}

header.site{border-bottom:1px solid var(--line);margin-bottom:48px}
.site .wrap{display:flex;align-items:baseline;gap:16px;padding:26px 28px 20px}
.brand{font-family:var(--serif);font-size:25px;letter-spacing:.03em;font-weight:600}
.brand em{font-style:normal;color:var(--accent)}
.slogan{font-size:12px;color:var(--faint);letter-spacing:.14em}
nav.top{margin-left:auto;display:flex;gap:26px;font-size:14px;color:var(--mute)}
nav.top a:hover,nav.top a.on{color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:2px}

.tagline{font-size:11.5px;letter-spacing:.2em;color:var(--accent)}
.tagline b{font-weight:400;color:var(--faint);margin-left:9px;letter-spacing:.06em}

.sec{display:flex;align-items:baseline;gap:16px;margin:0 0 26px}
.sec h2{font-size:13px;font-weight:600;letter-spacing:.22em;color:var(--mute);white-space:nowrap}
.sec .rule{flex:1;height:1px;background:var(--line);transform:translateY(-4px)}
.sec .more{font-size:12.5px;color:var(--faint)}
.sec .more:hover{color:var(--accent)}
section{margin-bottom:64px}

.hero-lead{display:block;margin-bottom:40px}
.hero-lead figure{aspect-ratio:21/9;margin-bottom:24px}
.hero-lead .tagline{margin-bottom:12px}
.hero-lead h1{font-family:var(--serif);font-size:38px;line-height:1.35;font-weight:600;max-width:80%}
.hero-lead:hover h1{color:var(--accent)}
.hero-lead p{margin-top:14px;color:var(--mute);font-size:15px;line-height:1.9;max-width:66%}
.hero-lead .by{margin-top:16px;font-size:12.5px;color:var(--faint)}

.subs{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid var(--line);margin-bottom:56px}
.sub-card figure{aspect-ratio:16/9;margin-bottom:16px}
.sub-card .tagline{margin-bottom:9px}
.sub-card h3{font-family:var(--serif);font-size:20px;line-height:1.5;font-weight:600}
.sub-card:hover h3{color:var(--accent)}
.sub-card p{margin-top:9px;font-size:13.5px;color:var(--mute);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.feed{list-style:none}
.item{display:grid;grid-template-columns:200px 1fr 64px;gap:26px;padding:22px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.item:first-child{border-top:1px solid var(--line-soft)}
.item figure{aspect-ratio:16/9}
.item .tagline{margin-bottom:8px}
.item .t{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.5}
.item:hover .t{color:var(--accent)}
.item .d{margin-top:8px;font-size:13.5px;color:var(--mute);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .m{margin-top:9px;font-size:12px;color:var(--faint);letter-spacing:.05em}
.stat{font-family:var(--serif);font-size:26px;text-align:right;font-variant-numeric:tabular-nums;line-height:1;padding-top:20px}
.stat small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;color:var(--faint);margin-top:8px;font-variant-numeric:normal}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.card figure{aspect-ratio:3/2;margin-bottom:16px}
.card .tagline{margin-bottom:9px}
.card h3{font-family:var(--serif);font-size:18px;line-height:1.5;font-weight:600}
.card a:hover h3{color:var(--accent)}
.card a:hover figure img{transform:scale(1.03)}
.card ol{margin-top:14px;list-style:none;counter-reset:p}
.card ol li{counter-increment:p;font-size:13px;color:var(--mute);padding:6px 0 6px 26px;position:relative;border-top:1px solid var(--line-soft);line-height:1.6}
.card ol li:before{content:counter(p);position:absolute;left:0;top:6px;font-family:var(--serif);font-size:12px;color:var(--faint)}
.card ol li a:hover{color:var(--accent)}

/* 游戏小卡：封面即入口 */
.gcards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.gcard figure{aspect-ratio:460/215;margin-bottom:11px}
.gcard .n{font-size:14px;line-height:1.5;font-weight:500}
.gcard:hover .n{color:var(--accent)}
.gcard .s{font-size:12px;color:var(--faint);margin-top:3px}

.tags{display:flex;flex-wrap:wrap;gap:10px 12px}
.tags a{border:1px solid var(--line);padding:9px 15px;font-size:13.5px;color:var(--mute)}
.tags a:hover{border-color:var(--accent);color:var(--accent)}

.colhead{padding-bottom:32px;border-bottom:1px solid var(--line);margin-bottom:8px}
.colhead h1{font-family:var(--serif);font-size:32px;font-weight:600}
.colhead p{margin-top:10px;color:var(--faint);font-size:13.5px;letter-spacing:.06em}

article{padding-bottom:80px}
.head{margin-bottom:40px}
.head .tagline{margin-bottom:16px}
.head h1{font-family:var(--serif);font-size:32px;line-height:1.5;font-weight:600}
.head .sub{margin-top:18px;color:var(--mute);font-size:15px;line-height:1.9}
.head .by{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint);display:flex;gap:18px;flex-wrap:wrap}
.head .by a{border-bottom:1px solid var(--line)}
.head .by a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.hero{margin:0 0 44px;aspect-ratio:2/1;display:block}

.verdict{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:28px 0 24px;margin-bottom:44px}
.verdict .big{display:flex;align-items:flex-end;gap:18px;margin-bottom:26px}
.verdict .big b{font-family:var(--serif);font-size:56px;font-weight:600;line-height:.9;font-variant-numeric:tabular-nums}
.verdict .big i{font-style:normal;font-size:13px;color:var(--mute);line-height:1.7;padding-bottom:4px}
.dims{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.dim{font-size:12px;color:var(--faint);letter-spacing:.08em}
.dim b{display:block;font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:600;margin-bottom:6px;font-variant-numeric:tabular-nums}
.dim .bar{height:2px;background:var(--line);margin-top:8px}
.dim .bar span{display:block;height:2px;background:var(--ink)}

.pc{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-bottom:44px}
.pc h3{font-size:12px;letter-spacing:.2em;color:var(--mute);margin-bottom:14px;font-weight:600}
.pc ul{list-style:none}
.pc li{font-size:14px;line-height:1.85;padding:9px 0 9px 18px;position:relative;color:#3a3733;border-bottom:1px solid var(--line-soft)}
.pc li:before{content:"";position:absolute;left:0;top:16px;width:7px;height:1px;background:var(--faint)}
.pc .con li:before{background:var(--accent)}

.body h2{font-family:var(--serif);font-size:22px;font-weight:600;margin:52px 0 18px;line-height:1.5}
.body h3{font-family:var(--serif);font-size:17.5px;font-weight:600;margin:36px 0 14px}
.body p{margin:0 0 20px;font-size:15.5px;line-height:2.05;color:#2a2724}
.body a{color:var(--accent);border-bottom:1px solid #e3cdc7}
.body a:hover{border-bottom-color:var(--accent)}
.body .nolink{color:var(--ink);font-weight:500}
.body img{margin:32px 0;width:100%}
.body blockquote{border-left:2px solid var(--ink);padding:4px 0 4px 22px;margin:0 0 32px;color:#3a3733;font-size:14.5px}
.body blockquote p{margin:0;line-height:1.95}
.body ul,.body ol{margin:0 0 20px 20px}
.body li{margin-bottom:8px;font-size:15px;line-height:1.95}
.body hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.dimtag{font-size:11.5px;letter-spacing:.16em;color:var(--faint);margin-bottom:6px}

/* 游戏详情：够用就好 */
.gh{display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:start;margin-bottom:44px}
.gh h1{font-family:var(--serif);font-size:31px;font-weight:600;line-height:1.4;margin-top:12px}
.gh .en{font-size:13px;color:var(--faint);margin-top:8px;letter-spacing:.04em}
.gh p.desc{margin-top:20px;color:var(--mute);font-size:14.5px;line-height:1.95}
.gh figure{aspect-ratio:460/215}
table.facts{width:100%;border-collapse:collapse;margin-bottom:56px}
table.facts th,table.facts td{text-align:left;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:14px;font-weight:400}
table.facts th{width:110px;color:var(--faint);font-size:12.5px;letter-spacing:.1em}
ul.plain{list-style:none}
ul.plain li{border-bottom:1px solid var(--line-soft)}
ul.plain a{display:flex;gap:14px;align-items:baseline;padding:15px 0;font-size:15px}
ul.plain a:hover{color:var(--accent)}
ul.plain .k{font-size:11.5px;letter-spacing:.16em;color:var(--accent);min-width:32px}
ul.plain .r{margin-left:auto;font-family:var(--serif);font-size:16px;color:var(--faint);font-variant-numeric:tabular-nums}

footer.site{border-top:1px solid var(--line);margin-top:20px;padding:32px 0 60px;font-size:12.5px;color:var(--faint)}
footer.site .wrap{display:flex;gap:20px;flex-wrap:wrap}
footer.site .r{margin-left:auto}
footer.site .fb{font-family:var(--serif);color:var(--mute);letter-spacing:.03em}
.back{font-size:12.5px;color:var(--faint);margin-bottom:32px;display:inline-block}
.back:hover{color:var(--accent)}

@media(max-width:900px){
  .hero-lead h1,.hero-lead p{max-width:100%}
  .hero-lead h1{font-size:27px}
  .subs,.cards,.pc,.gh{grid-template-columns:1fr;gap:32px}
  .gcards{grid-template-columns:repeat(2,1fr);gap:20px}
  .item{grid-template-columns:132px 1fr;gap:18px}
  .item .stat{grid-column:2;text-align:left;padding-top:10px;font-size:20px}
  .item .stat small{display:inline;margin-left:8px}
  .dims{grid-template-columns:repeat(2,1fr)}
  nav.top{width:100%;margin:14px 0 0;gap:20px}
  .site .wrap{flex-wrap:wrap}
}