/* ============================================================================
   职业套装外观（**数据库页 · 「套装」板块之后**）—— 2026-09-17 建，2026-09-18 从首页搬来
   ----------------------------------------------------------------------------
   ★ 2026-09-18 血染要求「首页的那一块 移动到数据库板块内 套装那一块的」。
     搬家只改了 patch_site.py 的 SETS_PAGE + 注入锚点，样式与脚本一个字节没动
     —— 这块本来就跟页面无关（只认 #tset 容器 + data-v）。
   ----------------------------------------------------------------------------
   素材来源：社区从 Beta 客户端里做的数据挖掘整理稿，生成脚本
   `_tmp/_sets_build.py`。⚠️ **非官方公布内容** —— 所以 `.ts-src` 那行来源与免责
   不能删，跟站上「三档证据」一个规矩（挖掘 / 玩家来源绝不写成官方口径）。
   ----------------------------------------------------------------------------
   ★ 为什么是「一行九张竖图 + 点开看大图」：
     原素材是 1080×约 500 的**四视角横排**图。直接铺进首页两头不讨好 ——
       ① 整张铺开每张要 250px 高，九张就是三屏（血染要求"别占太大位置"）；
       ② 缩到一行放得下时，四个视角全都糊成一片。
     所以：缩略图**预裁成正面视角的 3:4 竖图**（且只 101 KB / 9 张），
     四视角大图**点开才 new Image() 去取**（540 KB 不进首屏）。
   ⚠️ 独立文件（跟 gate.css / vote.css 一个模式）：主题回滚时不被整份带走。
   ⚠️ 换图必须升 VER —— 缩略图走 ?v=N 强缓存（见 patch_site.py 第 8b 步），
      大图的版本号取容器上的 data-v（js/sets.js 读它）。
   ========================================================================== */

.tset{display:grid;grid-template-columns:repeat(9,1fr);gap:13px;margin-top:4px}
.ts-i{
  position:relative;display:block;padding:0;margin:0;overflow:hidden;cursor:pointer;
  border:1px solid rgba(216,180,90,.22);
  background:linear-gradient(180deg,#141419,#080a0e);
  font:inherit;color:inherit;text-align:center;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.ts-i:hover{
  transform:translateY(-2px);border-color:rgba(216,180,90,.66);
  box-shadow:0 10px 26px -14px rgba(201,169,97,.8);
}
.ts-i:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.ts-i img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.ts-i b{
  display:block;padding:7px 2px 8px;
  font-size:12.5px;font-weight:400;letter-spacing:.6px;color:var(--parch-2);
}
.ts-i:hover b{color:var(--gold-hi)}

/* 来源 / 免责 —— ⚠️ 不能省：数据挖掘内容得让人知道它"还不是官方的" */
.ts-src{
  margin-top:13px;font-size:11.8px;line-height:1.75;letter-spacing:.4px;
  color:var(--parch-3);
}
.ts-src b{font-weight:400;color:var(--gold)}

/* ---- 灯箱：点开看四视角大图 ---- */
.ts-lb{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;padding:26px;
  background:rgba(3,4,6,.93);cursor:zoom-out;
}
.ts-lb img{
  max-width:min(920px,94vw);max-height:76vh;cursor:default;
  border:1px solid rgba(216,180,90,.42);box-shadow:0 26px 70px rgba(0,0,0,.85);
}
.ts-lb .ts-lbcap{
  position:absolute;left:0;right:0;bottom:24px;text-align:center;
  font-size:12.5px;letter-spacing:.6px;color:var(--parch-3);
}
.ts-lb .ts-lbcap b{font-family:var(--f-title);font-weight:400;color:var(--gold-hi)}
.ts-lb .ts-lbx{
  position:absolute;top:18px;right:22px;width:34px;height:34px;padding:0;
  border:1px solid rgba(216,180,90,.34);background:rgba(0,0,0,.42);
  font:inherit;font-size:17px;line-height:1;color:var(--parch-2);cursor:pointer;
}
.ts-lb .ts-lbx:hover{border-color:var(--gold);color:var(--gold-hi)}
.ts-lb .ts-lbmsg{font-size:13px;letter-spacing:.6px;color:var(--parch-3)}

/* 桌面九列 → 中屏五列（两行 5+4）→ 窄屏三列 */
@media (max-width:1240px){ .tset{grid-template-columns:repeat(5,1fr)} }
@media (max-width:820px){ .tset{grid-template-columns:repeat(3,1fr);gap:10px} }
@media (max-width:460px){
  .tset{gap:8px}
  .ts-i b{font-size:11px;padding:5px 2px 6px}
}
@media (prefers-reduced-motion:reduce){ .ts-i{transition:none} }