/* 游戏资源站样式 —— 暗色 Linear 风（深蓝黑底 + indigo 强调 + 氛围光晕 + 噪点）
 *
 * 为什么单独成文件：浏览器可以缓存 CSS，二次访问更快；改配色也只用动这一个文件。
 * 色值来自 site_config.py 的 THEME，由 build_site.py 在 <style> 之外以 CSS 变量注入，
 * 因此本文件里的颜色统一用 var(--xxx)，不要写死具体色值。
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 氛围光晕：三处径向渐变叠在底色上，让纯深色背景有"空气感"而不是一片死黑 */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(60% 45% at 12% -5%, rgba(99,102,241,0.20), transparent 70%),
    radial-gradient(50% 40% at 88% 8%, rgba(56,189,248,0.10), transparent 70%),
    radial-gradient(70% 50% at 50% 105%, rgba(139,92,246,0.12), transparent 70%);
  pointer-events: none; z-index: 0;
}
/* 噪点层：3.5% 透明度的颗粒，消除大面积纯色的塑料感 */
body::after {
  content: "";
  position: fixed; inset: 0;
  opacity: 0.035; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; flex: 1; }

a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- 头部 */
header { padding: 32px 0 22px; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: linear-gradient(140deg, var(--accent), #8b5cf6);
  box-shadow: 0 6px 22px rgba(99,102,241,0.42);
  display: grid; place-items: center; font-size: 19px;
}
.brand h1 { font-size: 19px; font-weight: 650; letter-spacing: -0.2px; }
.brand p { font-size: 12.5px; color: var(--dim); margin-top: 1px; }

.search {
  margin-top: 18px; display: flex; align-items: center; gap: 10px;
  background: var(--elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 15px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 30px rgba(0,0,0,0.35);
}
.search svg { opacity: 0.45; flex: none; }
.search input {
  background: none; border: none; outline: none; color: var(--text);
  font-size: 14.5px; width: 100%; font-family: inherit;
}
.search input::placeholder { color: #5b5b74; }
.clear-btn { display: none; color: var(--dim); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }
.clear-btn.on { display: block; }

/* 首页搜索框下方不再放统计条（数量已由「最新收录」标题带出），少一层视觉噪音 */

/* ---------------------------------------------------------------- 列表 */
.section-head { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 14px; }
.section-head h2 { font-size: 15.5px; font-weight: 620; }
.section-head small { font-size: 12px; color: var(--dim); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(99,102,241,0.45);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.12);
}
.thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #0d0d16; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
             transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.card:hover .thumb img { transform: scale(1.045); }
/* 缩略图底部渐隐，标题区与图片过渡自然 */
.thumb::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
                background: linear-gradient(to top, rgba(10,10,18,0.92), transparent); }
.card-body { padding: 12px 13px 14px; }
.card-title { font-size: 13.8px; font-weight: 560; line-height: 1.42;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
              overflow: hidden; min-height: 39px; }
.card-meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.date { font-size: 11.5px; color: var(--dim); }
.ver { font-size: 10.5px; color: var(--accent); background: var(--accent-soft);
       border: 1px solid rgba(99,102,241,0.28); border-radius: 20px; padding: 1.5px 8px;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 132px; }

.empty { padding: 60px 0; text-align: center; color: var(--dim); font-size: 14px; display: none; }
.empty.on { display: block; }

/* ---------------------------------------------------------------- 详情页 */
.crumb { font-size: 12.5px; color: var(--dim); margin: 22px 0 14px; }
.crumb a:hover { color: var(--accent); }
.detail-head h1 { font-size: 23px; font-weight: 650; line-height: 1.4; letter-spacing: -0.3px; }
.detail-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px;
               font-size: 12.5px; color: var(--dim); align-items: center; }
/* 英文名（从素材名称行抽出来的副标题），比元信息略亮，便于扫读 */
.alt-title { color: #a5a5c0; font-size: 13.5px; }

/* 截图区固定 3 列：素材都是 6 张，3×2 正好两行整齐；用 auto-fit 会出现 5+1 的难看排布 */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.shots img { width: 100%; border-radius: 10px; border: 1px solid var(--border); display: block;
             aspect-ratio: 16/9; object-fit: cover; background: #0d0d16; }

/* ---------------------------------------------------------------- 网盘下载卡片 */
/* 这是详情页的主行动区，所以给它比普通卡片更强的存在感（indigo 描边 + 淡渐变底） */
.dl-card {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin: 20px 0 6px; padding: 20px 22px;
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(99,102,241,0.02) 60%, transparent);
  border: 1px solid rgba(99,102,241,0.28); border-radius: var(--radius);
}
.dl-main { flex: 1 1 260px; min-width: 220px; }
.dl-name { font-size: 16px; font-weight: 620; }
.dl-hint { font-size: 12.5px; color: var(--dim); margin-top: 6px; }
.dl-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* 二维码：白底深模块，保证在任何深色背景下都能被手机扫出来 */
.dl-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.dl-qr img { width: 132px; height: 132px; border-radius: 10px; background: #fff; padding: 6px; display: block; }
.dl-qr span { font-size: 11.5px; color: var(--dim); }

/* 解压密码：源站的密码常埋在正文里，这里单独提出来 */
.zip-pwd { margin-top: 12px; padding: 11px 16px; font-size: 13px; color: var(--dim);
           background: var(--card); border: 1px dashed var(--border); border-radius: 10px; }
.zip-pwd code { color: #f0b429; font-size: 13.5px; letter-spacing: 0.3px; }

.btn { border-radius: 11px; padding: 12px 22px; font-size: 13.5px; font-weight: 560;
       display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.btn-primary { background: linear-gradient(140deg, var(--accent), #7c3aed); color: #fff;
               box-shadow: 0 8px 24px rgba(99,102,241,0.38); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border: 1px solid var(--border); color: var(--dim); background: var(--elev); }
.btn-ghost:hover { color: var(--text); border-color: rgba(99,102,241,0.4); }

.body-text { margin-top: 22px; padding: 18px 20px; background: var(--card);
             border: 1px solid var(--border); border-radius: var(--radius);
             font-size: 14px; line-height: 1.85; color: #cfcfdd; white-space: pre-wrap; word-break: break-word; }
.body-text a { color: var(--accent); }

.related { margin-top: 30px; }

/* 免责声明：放页脚，写清内容来源与版权归属 */
footer { position: relative; z-index: 2; margin-top: 44px; padding: 24px 20px 34px;
         border-top: 1px solid var(--border); font-size: 12px; color: #5f5f78; }
footer .wrap { padding: 0; }
footer p { margin-bottom: 6px; }
footer a { color: #7d7d99; }
footer a:hover { color: var(--accent); }

@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .card-title { font-size: 12.8px; }
  .brand h1 { font-size: 17px; }
  .detail-head h1 { font-size: 19px; }
  .shots { grid-template-columns: repeat(2, 1fr); }
  /* 手机上二维码放到下方居中，按钮占满宽度更好点 */
  .dl-card { flex-direction: column; align-items: stretch; gap: 16px; }
  .dl-main { flex: none; }     /* 竖排时 flex-basis 会变成高度，把卡片撑出大片留白 */
  .dl-qr { align-self: center; }
  .dl-actions .btn { flex: 1 1 auto; justify-content: center; }
}