/* ============================================================
   追梦科技 · 共享主题（游戏库 / 游戏详情页）
   与首页同一套黑金体系：无渐变装饰、单一强调色、2px 直角
============================================================ */
:root{
  --brand1:#C8A15A;
  --bg:#08080A;
  --bg-soft:#0C0C0F;
  --line:#1E1E23;
  --line-soft:#16161A;
  --txt:#F2F2F3;
  --muted:#8A8A94;
  --dim:#5F5F68;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC",
              "Source Han Sans SC","Microsoft YaHei",Segoe UI,sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.65;
  -webkit-font-smoothing:antialiased;letter-spacing:.01em;
}
a{color:inherit;text-decoration:none;transition:color .2s}
::selection{background:var(--brand1);color:#08080A}
img{display:block;max-width:100%}

.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--brand1);font-weight:600;margin-bottom:22px}

/* ---------- 导航 ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(8,8,10,.86);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:baseline;gap:12px}
.logo .mk{font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--brand1);
  padding-right:12px;border-right:1px solid var(--line)}
.logo .nm{font-size:16px;font-weight:600;letter-spacing:.04em}
.logo small{display:block;font-size:10px;color:var(--muted);letter-spacing:.22em;font-weight:500}
nav.links{display:flex;gap:32px;font-size:13.5px;color:var(--muted);font-weight:500}
nav.links a:hover{color:var(--txt)}
nav.links a.on{color:var(--brand1)}

.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:13px 28px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  font-weight:600;font-size:13.5px;letter-spacing:.04em;font-family:inherit;line-height:1.3;transition:.22s}
.btn-primary{background:var(--brand1);color:#08080A}
.btn-primary:hover{background:#DCB673}
.btn-ghost{background:transparent;color:var(--txt);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand1);color:var(--brand1)}
.btn-lg{padding:16px 34px;font-size:14.5px}

/* ---------- 页头 ---------- */
.phead{padding:78px 0 46px;border-bottom:1px solid var(--line-soft)}
.phead h1{font-size:clamp(30px,4.4vw,48px);line-height:1.14;font-weight:600;letter-spacing:-.014em}
.phead h1 em{font-style:normal;color:var(--brand1)}
.phead p{max-width:600px;color:var(--muted);font-size:15.5px;line-height:1.8;margin-top:18px}
.crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dim);margin-bottom:26px}
.crumb a:hover{color:var(--brand1)}
.crumb i{font-style:normal;color:var(--line)}
/* 游戏库页：页头在上、筛选与卡片在下 */
.phead-games{padding:70px 0 26px;border-bottom:0}

/* ---------- 筛选 ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;padding:26px 0 0}
.filters-bar{position:sticky;top:74px;z-index:50;background:rgba(8,8,10,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.filters-bar .filters{padding:13px 0}
.chip{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:2px;
  padding:7px 15px;font-size:12.5px;cursor:pointer;font-family:inherit;letter-spacing:.03em;transition:.18s}
.chip:hover{color:var(--txt);border-color:#2C2C34}
.chip.on{color:var(--brand1);border-color:rgba(200,161,90,.5);background:rgba(200,161,90,.06)}

/* ---------- 游戏卡片 ---------- */
.gwrap{padding:44px 0 96px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px}
.gcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:2px;
  overflow:hidden;transition:border-color .22s,transform .22s;
}
.gcard:hover{border-color:rgba(200,161,90,.42);transform:translateY(-2px)}
.gcard .cv{position:relative;height:132px;background:#101014;overflow:hidden}
.gcard .cv img.cover{width:100%;height:100%;object-fit:cover;opacity:.55;
  transition:opacity .3s,transform .5s;transform:scale(1.01)}
.gcard:hover .cv img.cover{opacity:.72;transform:scale(1.05)}
.gcard .cv::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.12) 0%,rgba(8,8,10,.86) 100%)}
.gcard .ic{
  position:absolute;left:20px;bottom:-26px;width:72px;height:72px;border-radius:2px;
  border:1px solid var(--line);background:#101014;object-fit:cover;z-index:2;
  box-shadow:0 8px 24px rgba(0,0,0,.5)
}
.gcard .ic.ph{display:grid;place-items:center;font-size:20px;font-weight:600;color:var(--brand1);
  background:#0E0E12;letter-spacing:.02em}
.gcard .bd{padding:38px 20px 20px;flex:1;display:flex;flex-direction:column}
.gcard h3{font-size:17px;font-weight:600;letter-spacing:.01em;margin-bottom:7px}
.gcard .bd-b{margin-bottom:9px}
.gcard .board-badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--brand1);
  border:1px solid rgba(200,161,90,.45);border-radius:2px;padding:2px 9px;background:rgba(200,161,90,.08)}
.gcard .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.gcard .tags span{font-size:10.5px;letter-spacing:.1em;color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:2px 7px}
.gcard .ds{font-size:13px;color:var(--muted);line-height:1.72;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px}
.gcard .ft{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft)}
.gcard .ft .pl{font-size:11.5px;color:var(--dim);letter-spacing:.06em}
.gcard .ft .go{font-size:12.5px;color:var(--brand1);font-weight:600;letter-spacing:.04em;transition:.2s}
.gcard:hover .ft .go{letter-spacing:.1em}

/* ---------- 空态 ---------- */
.gempty{grid-column:1/-1;padding:80px 20px;text-align:center;color:var(--dim);font-size:14px;
  border:1px dashed var(--line);border-radius:2px}

/* ---------- 游戏详情 ---------- */
.gh{padding:64px 0 56px;border-bottom:1px solid var(--line-soft)}
.gh-grid{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:flex-start}
.gh .bigic{width:132px;height:132px;border-radius:2px;border:1px solid var(--line);
  background:#101014;object-fit:cover;box-shadow:0 12px 40px rgba(0,0,0,.55)}
.gh .bigic.ph{display:grid;place-items:center;font-size:36px;font-weight:600;color:var(--brand1)}
.gh h1{font-size:clamp(28px,4vw,42px);font-weight:600;letter-spacing:-.014em;line-height:1.16}
.gh .tags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.gh .tags span{font-size:11px;letter-spacing:.12em;color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:3px 9px}
.gh .lead{color:var(--muted);font-size:15px;line-height:1.85;max-width:640px}
.gh .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:2px;margin-top:36px;overflow:hidden}
.kv > div{background:var(--bg-soft);padding:18px 22px}
.kv b{display:block;font-size:20px;font-weight:500;color:var(--brand1);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kv span{display:block;font-size:11px;color:var(--muted);letter-spacing:.12em;margin-top:6px}

.panel{padding:52px 0 0}
.panel h2{font-size:19px;font-weight:600;margin-bottom:16px}
.panel .box{background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:2px;
  padding:26px 28px;color:var(--muted);font-size:14px;line-height:1.9}
.panel .box b{color:var(--txt);font-weight:600}

.others{padding:64px 0 96px}
.others h2{font-size:19px;font-weight:600;margin-bottom:20px}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line-soft);padding:40px 0}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12.5px;color:var(--dim)}
.foot .slogan{font-size:14px;color:var(--txt);font-weight:600;letter-spacing:.04em;margin-bottom:6px}

@media (max-width:820px){
  nav.links{display:none}
  .phead{padding:34px 0 30px}
  .phead-games{padding:26px 0 16px;border-bottom:0}
  .gh-grid{grid-template-columns:1fr;gap:22px}
  .gh .bigic{width:96px;height:96px}
  .kv{grid-template-columns:1fr}
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}