/* =====================================================================
   下载中心 · Steam 版式 + 王帝品牌色（仅作用于 .page-steam，不动全站 chrome）
   版式仿 Steam：应用横幅 + 左侧筛选 + 主推位(截图/宣传片+信息框) + 一大堆下载胶囊 + 点进详情
   颜色用全站品牌：纸 #f2ede2 / 墨 #13151a / 朱红 #b3352c / 金 #a8813c
   ===================================================================== */
.page-steam{background:var(--paper);color:var(--ink)}

/* ---------- 应用横幅（品牌墨色） ---------- */
.steam-top{position:relative;padding:112px 0 0;overflow:hidden;background:var(--ink)}
.steam-top .st-bg{position:absolute;inset:-20px;background:center/cover no-repeat;opacity:.3;filter:grayscale(.2)}
.steam-top::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,21,26,.5),rgba(19,21,26,.86) 68%,var(--paper))}
.steam-top .wrap{position:relative;z-index:2}
.steam-crumb{font-size:12.5px;color:rgba(242,237,226,.6);letter-spacing:1px;margin-bottom:20px}
.steam-crumb a{color:rgba(242,237,226,.72);transition:color .2s}
.steam-crumb a:hover{color:var(--gold2)}
.steam-crumb span{margin:0 9px;color:rgba(242,237,226,.3)}
.steam-title{margin:0;font:800 40px/1.15 var(--sans);letter-spacing:2px;color:#fff}
.steam-title em{font-style:normal;display:block;font-size:12px;letter-spacing:6px;color:var(--gold2);margin-top:12px;font-weight:500}
.steam-tags{margin:18px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.steam-tags .tg{padding:4px 12px;border-radius:3px;font-size:12px;color:var(--gold2);
  background:rgba(168,129,60,.16);border:1px solid rgba(217,184,119,.28)}
.steam-top .st-desc{margin:16px 0 0;max-width:760px;font-size:14px;line-height:1.9;color:rgba(242,237,226,.72);letter-spacing:.5px}
.steam-top .st-act{margin:22px 0 0;padding-bottom:32px;display:flex;gap:12px;flex-wrap:wrap}
.steam-btn-green{color:#fff;background:linear-gradient(180deg,var(--red2),var(--red));font-weight:800;box-shadow:0 8px 22px rgba(179,53,44,.32)}
.steam-btn-green:hover{background:linear-gradient(180deg,var(--red),#96291f);transform:translateY(-2px)}
.steam-btn-green.dis{cursor:not-allowed;background:var(--paper3);color:var(--muted);box-shadow:none}
.steam-btn-green.dis:hover{transform:none}
.bili-btn-ghost{color:var(--paper);background:rgba(255,255,255,.06);border:1px solid rgba(242,237,226,.32)}
.bili-btn-ghost:hover{background:rgba(255,255,255,.14);border-color:var(--gold2);color:var(--gold2);transform:translateY(-2px)}

/* ---------- 两栏 ---------- */
.steam-cols{padding:26px 0 64px}
.steam-cols .wrap{display:grid;grid-template-columns:232px minmax(0,1fr);gap:22px;align-items:start;
  max-width:1400px;margin:0 auto;padding:0 26px}

/* 左侧筛选栏 */
.steam-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.steam-search{position:relative}
.steam-search input{width:100%;height:38px;padding:0 12px 0 34px;border-radius:4px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:13px;font-family:inherit;outline:none;transition:border-color .2s}
.steam-search input:focus{border-color:var(--red)}
.steam-search input::placeholder{color:var(--muted)}
.steam-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--muted)}
.steam-rail h6{margin:0 0 8px;font-size:11px;letter-spacing:2.5px;color:var(--red);text-transform:uppercase;font-weight:700}
.steam-rail a{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:4px;
  font-size:13px;color:var(--ink3);transition:all .16s;cursor:pointer}
.steam-rail a:hover{background:var(--paper2);color:var(--ink)}
.steam-rail a.on{background:rgba(179,53,44,.1);color:var(--red);font-weight:600}
.steam-rail a u{font-style:normal;text-decoration:none;font-size:11.5px;color:var(--muted)}
.steam-rail a.on u{color:var(--red)}
.steam-note{padding:14px;border-radius:4px;background:#fff;border:1px solid var(--line);font-size:12px;line-height:1.85;color:var(--ink3)}
.steam-note a{color:var(--red)}
.steam-note a:hover{text-decoration:underline}

/* ---------- 主推区 ---------- */
.steam-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0;border-radius:6px;overflow:hidden;
  background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(19,21,26,.08)}
.steam-media{position:relative;background:var(--ink2);min-height:320px}
.steam-media .st-mtabs{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;gap:2px}
.steam-media .st-mtabs button{padding:8px 16px;font-size:12px;color:rgba(242,237,226,.7);background:rgba(19,21,26,.5);
  border:0;cursor:pointer;font-family:inherit;transition:all .18s;letter-spacing:1px}
.steam-media .st-mtabs button.on{color:#fff;background:rgba(179,53,44,.5);border-bottom:2px solid var(--red2)}
.steam-shot{position:relative;width:100%;height:100%;min-height:320px;background:#000 center/cover no-repeat}
.steam-shot img{width:100%;height:100%;object-fit:cover;display:block}
.steam-shot.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(160deg,var(--ink2),#101720)}
.steam-shot.ph .no{font:900 46px/1 var(--serif);letter-spacing:10px;color:rgba(242,237,226,.3)}
.steam-shot.ph .nh{font-size:12.5px;color:rgba(242,237,226,.45);letter-spacing:1px}
.steam-shot .cap{position:absolute;left:0;right:0;bottom:0;padding:8px 14px;font-size:12px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))}
.steam-play{position:absolute;inset:0;z-index:2;background:#000}
.steam-play video{width:100%;height:100%;object-fit:contain;display:block}
.steam-thumbs{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;gap:8px;padding:12px;overflow-x:auto;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}
.steam-thumbs::-webkit-scrollbar{height:6px}
.steam-thumbs::-webkit-scrollbar-thumb{background:rgba(242,237,226,.3);border-radius:3px}
.steam-thumb{position:relative;width:96px;aspect-ratio:16/9;flex:none;border-radius:2px;overflow:hidden;border:2px solid transparent;
  cursor:pointer;padding:0;background:#000;transition:border-color .18s}
.steam-thumb img{width:100%;height:100%;object-fit:cover}
.steam-thumb.on{border-color:var(--red2)}
.steam-thumb.vid::after{content:"▶";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;background:rgba(0,0,0,.35)}
.steam-thumb.empty{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);
  border:1px dashed var(--line);background:#fff;cursor:default}
.steam-media .steam-play{display:none}
.steam-media.m-vid .steam-play{display:block}
.steam-media.m-vid .steam-shot,.steam-media.m-vid .steam-thumbs{display:none}

/* 右侧信息 / 购买框 */
.steam-buy{padding:22px;display:flex;flex-direction:column;gap:14px}
.steam-buy .sb-name{margin:0;font-size:20px;font-weight:700;line-height:1.4;color:var(--ink)}
.steam-buy .sb-en{font-size:12px;color:var(--gold);letter-spacing:1px}
.steam-about{background:rgba(179,53,44,.06);border-left:3px solid var(--red);border-radius:3px;padding:12px 14px}
.steam-about h6{margin:0 0 8px;font-size:12px;letter-spacing:2px;color:var(--red);font-weight:700}
.steam-about li{position:relative;padding:3px 0 3px 15px;font-size:12.5px;line-height:1.7;color:var(--ink3)}
.steam-about li::before{content:"";position:absolute;left:2px;top:12px;width:4px;height:4px;border-radius:50%;background:var(--red)}
.steam-info{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.steam-info .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.steam-info .row span{color:var(--muted);flex:none}
.steam-info .row b{color:var(--ink3);font-weight:500;text-align:right;min-width:0;word-break:break-word}
.steam-price{margin-top:4px;display:flex;align-items:baseline;gap:10px}
.steam-price b{font-size:15px;color:var(--red);font-weight:800;letter-spacing:1px}
.steam-price s{font-size:12px;color:var(--muted)}
.steam-get .btn{width:100%;height:46px;font-size:15px;letter-spacing:3px}
.steam-get .note{margin:10px 0 0;font-size:12px;line-height:1.8;color:var(--muted)}
.steam-more{font-size:12.5px;color:var(--red);transition:color .18s}
.steam-more:hover{color:var(--red2);text-decoration:underline}

/* ---------- 安装步骤 ---------- */
.steam-steps{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:20px 22px}
.steam-steps .ss-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.steam-steps .ss-hd h4{margin:0;font-size:15px;color:var(--ink);letter-spacing:1px}
.steam-steps .ss-hd span{font-size:12px;color:var(--muted)}
.steam-steps ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.steam-steps .ss-item{display:flex;align-items:center;gap:14px}
.steam-steps .ss-no{width:30px;height:30px;flex:none;border-radius:50%;background:linear-gradient(180deg,var(--red2),var(--red));
  color:#fff;font:800 14px/30px var(--sans);text-align:center}
.steam-steps .ss-tx{min-width:0;flex:1}
.steam-steps .ss-tx b{display:block;font-size:13.5px;color:var(--ink3)}
.steam-steps .ss-tx small{display:block;margin-top:3px;font-size:12px;color:var(--muted);line-height:1.7}
.steam-steps .ss-item .btn{flex:none;height:32px}
.steam-steps .ss-ft{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line2);font-size:12px;color:var(--muted);line-height:1.8}
.steam-steps .ss-ft a{color:var(--red)}
.steam-steps .ss-ft a:hover{text-decoration:underline}

/* ---------- 列表头 + 胶囊网格 ---------- */
.steam-list-head{margin:30px 0 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.steam-list-head h3{margin:0;font-size:17px;color:var(--ink);letter-spacing:1px}
.steam-list-head .cnt{font-size:12.5px;color:var(--muted)}
.steam-list-head .sorts{margin-left:auto;display:flex;gap:8px}
.steam-list-head .sorts select{height:32px;padding:0 10px;border-radius:4px;border:1px solid var(--line);background:#fff;
  color:var(--ink3);font-size:12.5px;font-family:inherit;outline:none;cursor:pointer}
.steam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steam-card{display:flex;flex-direction:column;border-radius:6px;overflow:hidden;background:#fff;
  border:1px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s}
.steam-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(19,21,26,.13);border-color:var(--red)}
.steam-card.on{border-color:var(--red)}
.sc-art{position:relative;aspect-ratio:460/215;background:var(--ink2) center/cover no-repeat;overflow:hidden}
.sc-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease-out}
.steam-card:hover .sc-art img{transform:scale(1.05)}
.sc-art .sc-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:rgba(242,237,226,.4);font:900 34px/1 var(--serif);letter-spacing:8px}
.sc-art .sc-ph small{font:400 10.5px/1 var(--sans);letter-spacing:2px;color:rgba(242,237,226,.3)}
.sc-art .sc-plat{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:3px;font-size:11px;letter-spacing:1px;
  background:rgba(19,21,26,.78);color:#fff}
.sc-art .sc-plat.r{background:linear-gradient(180deg,var(--red2),var(--red));color:#fff;font-weight:700}
.sc-bd{padding:12px 14px;flex:1;display:flex;flex-direction:column;min-width:0}
.sc-bd .sc-t{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.steam-card:hover .sc-bd .sc-t{color:var(--red2)}
.sc-bd .sc-d{margin:6px 0 0;font-size:12px;line-height:1.7;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-ft{margin-top:12px;display:flex;align-items:center;gap:8px}
.sc-ft .sz{font-size:11.5px;color:var(--muted);flex:1;min-width:0}
.sc-ft .go{font-size:12px;color:var(--red);font-weight:700}
.sc-ft .wait{font-size:12px;color:var(--muted)}
.sc-mini{height:30px;padding:0 14px;font-size:12px;letter-spacing:1px;flex:none}
.steam-none{grid-column:1/-1;padding:44px 20px;text-align:center;border:1px dashed var(--line);border-radius:4px;
  font-size:13px;color:var(--muted)}
.steam-none a{color:var(--red)}
.steam-none a:hover{text-decoration:underline}

/* =====================================================================
   下载详情页（Steam 版式 + 品牌色）
   ===================================================================== */
.dvwrap{max-width:1400px;margin:0 auto;padding:26px 26px 40px;display:grid;
  grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start;position:relative;z-index:1}
.dvmain{min-width:0;display:flex;flex-direction:column;gap:20px}
.dvside{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.dvpanel{background:#fff;border:1px solid var(--line);border-radius:6px;padding:20px 22px}
.dvpanel h3{margin:0 0 14px;font-size:15px;color:var(--ink);letter-spacing:1px;display:flex;align-items:center;gap:9px}
.dvpanel h3::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--red)}
.dvpanel h3 span{margin-left:auto;font-size:12px;color:var(--muted);font-weight:400;letter-spacing:0}
.dvpanel p{margin:0;font-size:13.5px;line-height:1.95;color:var(--ink3)}
.dvpanel .muted{color:var(--muted)}
.dvpanel .muted a{color:var(--red)}
.dvpanel .muted a:hover{text-decoration:underline}
.about-list{margin:0;padding:0}
.about-list li{position:relative;padding:4px 0 4px 16px;font-size:13.5px;line-height:1.8;color:var(--ink3)}
.about-list li::before{content:"";position:absolute;left:2px;top:13px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.log-list{margin:0;padding:0}
.log-list li{position:relative;padding:5px 0 5px 18px;font-size:13px;line-height:1.8;color:var(--ink3)}
.log-list li::before{content:"▸";position:absolute;left:2px;top:4px;color:var(--red)}
.dvhelp{display:block;padding:13px 16px;border-radius:4px;background:rgba(179,53,44,.06);
  border:1px solid rgba(179,53,44,.22);font-size:12.5px;color:var(--red);text-align:center;transition:all .18s}
.dvhelp:hover{background:rgba(179,53,44,.12);border-color:var(--red)}
.dvrel{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.dvrel h5{margin:0 0 10px;font-size:14px;color:var(--ink);letter-spacing:1px}
.dvrel a{display:flex;gap:11px;padding:8px;border-radius:4px;transition:background .18s}
.dvrel a:hover{background:var(--paper2)}
.dvrel .rc{position:relative;width:118px;aspect-ratio:16/9;flex:none;border-radius:3px;overflow:hidden;background:var(--ink2)}
.dvrel .rc img{width:100%;height:100%;object-fit:cover}
.dvrel .rt{min-width:0;flex:1}
.dvrel .rt b{display:block;font-size:13px;color:var(--ink3);font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dvrel a:hover .rt b{color:var(--red2)}
.dvrel .rt small{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)}
.dvrel .none{font-size:12.5px;color:var(--muted);line-height:1.9;margin:0}
.dvupd{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px 20px}
.dvupd h4{margin:0 0 8px;font-size:14px;color:var(--ink);letter-spacing:1px}
.dvupd li{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2);font-size:13px}
.dvupd li:last-child{border-bottom:0}
.dvupd li a{color:var(--ink3);flex:1;min-width:0}
.dvupd li a:hover{color:var(--red2)}
.dvupd li time{color:var(--muted);font-size:12px;flex:none}

/* 响应式 */
@media (max-width:1080px){.steam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .steam-cols .wrap{grid-template-columns:1fr}
  .steam-side{position:static;flex-direction:row;flex-wrap:wrap;gap:12px}
  .steam-side .steam-search{flex:1 1 100%}
  .steam-side .steam-rail{flex:1 1 45%}
  .steam-hero{grid-template-columns:1fr}
  .steam-media{min-height:220px}
  .steam-shot{min-height:220px}
  .dvwrap{grid-template-columns:1fr}
  .dvside{position:static}
}
@media (max-width:620px){.steam-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .page-steam .steam-card:hover{transform:none}
  .sc-art img{transition:none}
}