/* ============================================================
   板块: 开发日志 (devlog) —— 2026-07-24 重做
   结构: ① 精简概览条 ② 小型日历导航 ③ 全量每日记录
   (旧版"大色块Hero / 一句话总志时间轴"已废弃删除)
   ============================================================ */

/* —— ① 概览条(精简, 小字小数字) —— */
.dl-overview{
  display:flex; flex-wrap:wrap; gap:clamp(18px,4vw,54px);
  padding:clamp(18px,3vh,28px) 0 clamp(14px,2vh,22px);
  border-bottom:1px dashed var(--line);
}
.dl-ov-item{ display:flex; flex-direction:column; min-width:64px; }
.dl-ov-item b{ font-family:var(--f-mono); font-weight:500; font-size:clamp(20px,2.4vw,28px); color:var(--tx); line-height:1.05; }
.dl-ov-item b em{ font-style:normal; }
.dl-ov-item b em.g{ color:var(--gold); }
.dl-ov-item span{ margin-top:5px; font-size:11px; color:var(--tx-dim); letter-spacing:.12em; }

/* —— ② 开发日历(小型图形化导航) —— */
.dl-calwrap{ padding:clamp(18px,3vh,26px) 0; }
.dl-cal-head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.dl-cal-title{ font-family:var(--f-song); font-weight:700; font-size:17px; letter-spacing:.08em; }
.dl-cal-sub{ font-size:12px; color:var(--tx-dim); }
.dl-cal-legend{ margin-left:auto; display:flex; align-items:center; gap:4px; font-size:10px; color:var(--tx-dim); }
.dl-cal-legend .sw{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.sw.h1{ background:var(--heat-1);} .sw.h2{ background:var(--heat-2);} .sw.h3{ background:var(--heat-3);}
.sw.h4{ background:var(--heat-4);} .sw.h5{ background:var(--heat-5);}

.dl-months-row{ display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,64px); }
.dl-month{ flex:none; }
.dl-mname{ font-family:var(--f-song); font-weight:700; font-size:16px; letter-spacing:.08em; margin-bottom:9px; }
.dl-mname span{ font-family:var(--f-mono); font-weight:400; font-size:11px; color:var(--tx-faint); margin-left:7px; letter-spacing:.1em; }
.dl-mgrid{ display:grid; grid-template-columns:repeat(7, 30px); gap:4px; }
.dl-dow{ font-family:var(--f-mono); font-size:10px; color:var(--tx-faint); text-align:center; padding-bottom:3px; }
.dl-cell{
  position:relative; width:30px; height:30px; border-radius:5px;
  background:var(--heat-0); cursor:default;
  font-family:var(--f-mono); font-size:11px; color:rgba(230,222,211,.6);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--hover-s) var(--ease), box-shadow var(--hover-s) var(--ease);
}
.dl-cell.empty{ background:transparent; }
.dl-cell.h0{ background:var(--heat-0); }
.dl-cell.h1{ background:var(--heat-1);} .dl-cell.h2{ background:var(--heat-2);}
.dl-cell.h3{ background:var(--heat-3);} .dl-cell.h4{ background:var(--heat-4);}
.dl-cell.h5{ background:var(--heat-5);}
.dl-cell.h1,.dl-cell.h2,.dl-cell.h3,.dl-cell.h4,.dl-cell.h5{ cursor:pointer; }
.dl-cell.h1:hover,.dl-cell.h2:hover,.dl-cell.h3:hover,.dl-cell.h4:hover,.dl-cell.h5:hover{
  transform:scale(1.18); box-shadow:0 4px 10px rgba(0,0,0,.5); z-index:2;
}
.dl-cell.peak::after{
  content:""; position:absolute; right:-3px; top:-4px; width:11px; height:11px;
  background:url("../assets/texture/star.svg") no-repeat center/contain;
}
.dl-cell:focus-visible{ outline:2px solid var(--gold-500); outline-offset:1px; }

/* 悬停 tooltip */
.dl-tip{
  position:fixed; z-index:80; pointer-events:none; max-width:230px;
  background:linear-gradient(160deg,#322d25,#241f1a);
  border:1px solid var(--line); border-radius:6px; padding:8px 11px;
  box-shadow:0 10px 26px rgba(0,0,0,.55); transform:rotate(-1deg);
  opacity:0; transition:opacity .12s var(--ease);
}
.dl-tip.show{ opacity:1; }
.dl-tip .t-date{ font-family:var(--f-mono); font-size:10px; color:var(--gold); letter-spacing:.08em; }
.dl-tip .t-n{ font-family:var(--f-song); font-weight:700; font-size:14px; margin:1px 0 2px; }
.dl-tip .t-theme{ font-size:11.5px; color:var(--tx-dim); line-height:1.45; }

/* —— ③ 每日记录(全量) —— */
.dl-days{ display:flex; flex-direction:column; gap:clamp(16px,2.4vh,24px); }
.dl-day{
  background:linear-gradient(160deg, var(--paper), var(--paper-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 6px 18px rgba(0,0,0,.32);
  padding:clamp(16px,2.6vw,26px) clamp(16px,2.6vw,26px) clamp(18px,2.6vw,26px);
  scroll-margin-top:78px; /* 吸顶头下留白, 跳转不被盖 */
  transition:border-color .3s, box-shadow .3s;
}
.dl-day.flash{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(224,178,60,.35), 0 8px 22px rgba(0,0,0,.4); }
.dl-day.is-peak{ border-color:rgba(224,178,60,.4); }

.dl-day-head{ display:flex; gap:16px; align-items:flex-start; }
.dl-day-datebox{ flex:none; text-align:center; min-width:52px; padding:6px 4px;
  background:var(--paper-3); border:1px solid var(--line); border-radius:8px; }
.dl-day-num{ font-family:var(--f-song); font-weight:900; font-size:30px; line-height:1; color:var(--gold); }
.dl-day-my{ margin-top:5px; font-family:var(--f-mono); font-size:9.5px; color:var(--tx-dim); letter-spacing:.06em; }
.dl-day-headmain{ min-width:0; flex:1; }
.dl-day-titleline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dl-day-theme{ font-family:var(--f-song); font-weight:700; font-size:clamp(17px,2vw,21px); margin:0; letter-spacing:.02em; }
.dl-peak-flag{ font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  color:var(--ink); background:var(--gold); padding:2px 8px; border-radius:999px; }
.dl-day-stats{ margin-top:7px; display:flex; flex-wrap:wrap; gap:6px 16px; font-family:var(--f-mono); font-size:11.5px; color:var(--tx-dim); }
.dl-day-stats b{ color:var(--tx); font-weight:500; }
.dl-day-stats .sc{ color:var(--tx-faint); }

.dl-day-bar{ height:3px; background:var(--paper-3); border-radius:2px; overflow:hidden; margin:13px 0 0; }
.dl-day-bar i{ display:block; height:100%; width:var(--pct); border-radius:2px;
  background:linear-gradient(90deg, var(--gold-soft), var(--gold)); }
.dl-day.is-peak .dl-day-bar i{ background:linear-gradient(90deg, var(--gold-500), var(--heat-5)); }

.dl-day-body{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.dl-day-main{ min-width:0; }

/* 模块分组(战报六模块口径, 五/六色标签) */
.dl-mod{ margin-bottom:16px; }
.dl-mod:last-of-type{ margin-bottom:4px; }
.dl-mod-label{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; margin-bottom:7px; letter-spacing:.04em; }
.dl-mod-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.dl-mod-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.dl-mod-list li{
  position:relative; padding-left:16px; font-size:14px; line-height:1.68; color:var(--tx);
}
.dl-mod-list li::before{
  content:""; position:absolute; left:1px; top:.66em; width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:.5;
}
/* 六模块配色(战报同款, 色盲校验) */
.dl-mod[data-tag="combat"]  .dl-mod-label{ color:var(--tag-combat); }
.dl-mod[data-tag="combat"]  .dl-mod-dot{ background:var(--tag-combat); }
.dl-mod[data-tag="ai"]      .dl-mod-label{ color:var(--tag-ai); }
.dl-mod[data-tag="ai"]      .dl-mod-dot{ background:var(--tag-ai); }
.dl-mod[data-tag="economy"] .dl-mod-label{ color:var(--tag-economy); }
.dl-mod[data-tag="economy"] .dl-mod-dot{ background:var(--tag-economy); }
.dl-mod[data-tag="content"] .dl-mod-label{ color:var(--tag-content); }
.dl-mod[data-tag="content"] .dl-mod-dot{ background:var(--tag-content); }
.dl-mod[data-tag="ui"]      .dl-mod-label{ color:var(--tag-ui); }
.dl-mod[data-tag="ui"]      .dl-mod-dot{ background:var(--tag-ui); }
.dl-mod[data-tag="tooling"] .dl-mod-label{ color:var(--gold-500); }
.dl-mod[data-tag="tooling"] .dl-mod-dot{ background:var(--gold-500); }

.dl-quote{
  margin:13px 0; padding:11px 15px; border-left:3px solid var(--gold-500);
  background:rgba(211,162,78,.07); font-family:var(--f-song); font-size:13.5px;
  color:var(--tx); border-radius:0 6px 6px 0;
}
.dl-day-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }

@media (max-width:820px){
  .dl-day-head{ gap:12px; }
  .dl-mgrid{ grid-template-columns:repeat(7, 24px); }
  .dl-cell{ width:24px; height:24px; font-size:10px; }
}

/* ============================================================
   板块: 图鉴 (codex) —— 深色羊皮纸收藏册
   三册: 技能卡(卡面网格) / 怪物(分类页签) / 遗物(稀有度分组)
   卡面结构 = 游戏同款: 底图 → 品质框SVG满铺最顶 → 攻/CD角标 → 名+品质
   ============================================================ */

/* ---------- 册页签 ---------- */
.cx-tabs{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;
}
.cx-tabs.small{ margin-bottom:18px; }
.cx-tab{
  padding:8px 18px; font-family:var(--f-song); font-weight:700; font-size:15px;
  letter-spacing:.1em; color:var(--tx-dim);
  background:var(--paper-3); border:1px solid var(--line); border-radius:6px;
  cursor:pointer;
  transition:color var(--hover-s) var(--ease), border-color var(--hover-s) var(--ease),
    transform var(--hover-s) var(--ease);
}
.cx-tab .num{ font-family:var(--f-mono); font-size:12px; font-weight:500; color:var(--tx-faint); margin-left:4px; }
.cx-tab:hover{ color:var(--tx); transform:translateY(calc(-1 * var(--lift))); }
.cx-tab.on{ color:var(--tx); border-color:var(--red); box-shadow:inset 0 -2px 0 var(--red); }
.cx-tab.on .num{ color:var(--gold); }
.cx-tabs.small .cx-tab{ padding:5px 13px; font-size:13px; font-weight:500; }

/* ---------- 筛选条 ---------- */
.cx-filters{
  padding:14px 18px; margin-bottom:22px;
  display:flex; flex-direction:column; gap:9px;
}
.cx-filter-row{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.cx-filter-label{
  flex:none; width:3em; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.26em; color:var(--tx-faint);
}
.cx-chip{
  cursor:pointer; background:var(--paper-3);
  transition:color var(--hover-s) var(--ease), border-color var(--hover-s) var(--ease),
    transform var(--hover-s) var(--ease);
}
.cx-chip:hover{ color:var(--tx); transform:translateY(-1px); }
.cx-chip.on{ color:var(--gold); border-color:var(--gold-soft); background:rgba(224,178,60,.08); }
.cx-chip.cx-type-attack.on{ color:var(--t-attack); border-color:var(--t-attack); background:rgba(194,91,78,.08); }
.cx-chip.cx-type-space.on{ color:var(--t-space); border-color:var(--t-space); background:rgba(106,142,175,.08); }
.cx-chip.cx-type-debuff.on{ color:var(--t-debuff); border-color:var(--t-debuff); background:rgba(143,108,163,.08); }
.cx-chip.cx-type-support.on{ color:var(--t-support); border-color:var(--t-support); background:rgba(200,162,74,.08); }
.cx-chip.cx-type-heal.on{ color:var(--t-heal); border-color:var(--t-heal); background:rgba(127,160,90,.08); }
.cx-chip.cx-type-summon.on{ color:var(--t-summon); border-color:var(--t-summon); background:rgba(79,163,165,.08); }
.cx-searchrow{ margin-top:2px; }
.cx-search{
  flex:1; min-width:200px; max-width:420px;
  background:var(--paper-3); border:1px solid var(--line); border-radius:6px;
  color:var(--tx); font-family:inherit; font-size:13px; padding:7px 12px;
  transition:border-color var(--hover-s) var(--ease);
}
.cx-search::placeholder{ color:var(--tx-faint); }
.cx-search:focus{ outline:none; border-color:var(--red); }
.cx-count{ margin-left:auto; font-size:12px; color:var(--tx-faint); letter-spacing:.08em; }
.cx-empty{
  padding:46px 0; text-align:center; color:var(--tx-faint); font-size:14px;
  border:1px dashed var(--line); border-radius:var(--radius-lg);
}

/* ---------- 卡面(迷你/大 共用, --cw=卡宽) ---------- */
.cx-face{
  --cw:230px;
  position:relative; width:var(--cw); aspect-ratio:416/576;
  border-radius:calc(var(--cw) * .045);
  overflow:hidden;
  background:linear-gradient(160deg, var(--paper), var(--paper-3));
  box-shadow:0 5px 14px rgba(0,0,0,.45);
}
.cx-art{ position:absolute; inset:6%; border-radius:calc(var(--cw) * .03); overflow:hidden; }
.cx-art img{ width:100%; height:100%; object-fit:cover; }
.cx-frame{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.cx-badges{
  position:absolute; z-index:4; left:0; right:0; top:57.5%;
  display:flex; justify-content:space-between; padding:0 5.5%;
  pointer-events:none;
}
.cx-badge{
  display:inline-flex; align-items:center; gap:.32em;
  font-family:var(--f-mono); font-size:calc(var(--cw) * .052);
  background:rgba(14,13,11,.86); border:1px solid var(--line); border-radius:4px;
  padding:.14em .42em; line-height:1;
}
.cx-badge i{ font-style:normal; font-size:.82em; color:var(--tx-dim); }
.cx-badge b{ font-weight:500; color:var(--tx); }
.cx-badge.atk b{ color:var(--red-hi); }
.cx-badge.cd b{ color:var(--gold); }
.cx-name{
  position:absolute; z-index:4; left:9%; right:9%; bottom:6%;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  font-family:var(--f-song); font-weight:700; font-size:calc(var(--cw) * .068);
  color:var(--tx); letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.cx-name .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-name .qd{
  flex:none; font-family:var(--f-mono); font-weight:500; font-size:.72em;
  border:1px solid currentColor; border-radius:3px; padding:.05em .3em;
  background:rgba(14,13,11,.7);
}
.q1{ color:var(--q1); } .q2{ color:var(--q2); } .q3{ color:var(--q3); }

/* ---------- 技能卡网格 ---------- */
.cx-cardgrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(124px, 1fr));
  gap:16px 14px;
}
.cx-minicard{
  display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
  border-radius:8px;
  transition:transform var(--hover-s) var(--ease);
}
.cx-minicard .cx-face{ width:100%; }
.cx-minicard:hover{ transform:translateY(calc(-1 * var(--lift))); }
.cx-minicard:hover .cx-face{ box-shadow:0 10px 22px rgba(0,0,0,.6); }

/* ---------- 怪物网格 ---------- */
.cx-mongrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr));
  gap:16px 14px;
}
.cx-mon{
  display:flex; gap:12px; padding:12px; text-align:left; cursor:pointer;
  background:linear-gradient(160deg, var(--paper), var(--paper-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  transition:transform var(--hover-s) var(--ease), box-shadow var(--hover-s) var(--ease),
    border-color var(--hover-s) var(--ease);
}
.cx-mon:hover{ transform:translateY(calc(-1 * var(--lift))); box-shadow:0 10px 22px rgba(0,0,0,.5); }
.cx-mon.boss{ border-color:var(--gold-soft); background:linear-gradient(160deg, var(--paper), rgba(224,178,60,.06)); }
.cx-mon-portrait{
  position:relative; flex:none; width:76px; height:76px;
  border-radius:8px; overflow:hidden;
  background:var(--paper-3); border:1px solid var(--line);
}
.cx-mon-portrait img{ width:100%; height:100%; object-fit:cover; }
.cx-mon.boss .cx-mon-portrait{ border-color:var(--gold-soft); }
.cx-threat{
  position:absolute; right:3px; bottom:3px; z-index:2;
  min-width:1.55em; height:1.55em; display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; color:#F4E8D8;
  background:var(--red); border-radius:4px;
  box-shadow:0 2px 5px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.14);
}
.cx-mon-info{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.cx-mon-name{
  font-family:var(--f-song); font-weight:700; font-size:15px; letter-spacing:.03em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cx-mon-klass{ font-size:11px; color:var(--tx-dim); letter-spacing:.14em; }
.cx-mon.boss .cx-mon-klass{ color:var(--gold); }
.cx-mon-stats{ font-size:11.5px; color:var(--tx-dim); }
.cx-mon-chap{ font-size:11px; color:var(--tx-faint); letter-spacing:.06em; }

/* ---------- 遗物 ---------- */
.cx-rar-head{
  display:flex; align-items:baseline; gap:12px;
  margin:26px 0 14px;
}
.cx-book > .cx-rar-head:first-child{ margin-top:0; }
.cx-rar-name{ font-family:var(--f-song); font-weight:700; font-size:19px; letter-spacing:.12em; }
.cx-rar-n{ font-size:12px; color:var(--tx-faint); }
.cx-rar-line{ flex:1; align-self:center; height:1px; background:var(--line); opacity:.7; }
.rar-common{ color:var(--tx-dim); }
.rar-rare{ color:var(--q2); }
.rar-legend{ color:var(--gold); }
.cx-relicgrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr));
  gap:14px;
}
.cx-relic{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:16px 10px 13px; cursor:pointer;
  background:linear-gradient(160deg, var(--paper), var(--paper-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:transform var(--hover-s) var(--ease), box-shadow var(--hover-s) var(--ease),
    border-color var(--hover-s) var(--ease);
}
.cx-relic:hover{ transform:translateY(calc(-1 * var(--lift))); box-shadow:0 10px 22px rgba(0,0,0,.5); }
.cx-relic img{ width:56px; height:56px; object-fit:contain; }
.cx-relic.r-legend{
  border-color:var(--gold-soft);
  box-shadow:0 0 0 1px rgba(224,178,60,.18), 0 0 16px rgba(224,178,60,.14), 0 4px 12px rgba(0,0,0,.3);
}
.cx-relic.r-legend:hover{ box-shadow:0 0 0 1px rgba(224,178,60,.3), 0 0 22px rgba(224,178,60,.22), 0 10px 22px rgba(0,0,0,.5); }
.cx-relic.r-rare{ border-color:rgba(183,169,201,.4); }
.cx-relic-name{
  font-family:var(--f-song); font-weight:700; font-size:13.5px; letter-spacing:.04em;
  text-align:center;
}

/* ---------- 弹窗(三册共用) ---------- */
.cx-overlay{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px, 3vw, 32px);
  background:rgba(8,7,6,.72);
  opacity:0; transition:opacity .16s var(--ease);
}
.cx-overlay.open{ opacity:1; }
.cx-overlay + .cx-overlay .cx-sheet{ box-shadow:0 30px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(224,178,60,.12); }
.cx-sheet{
  position:relative; width:min(660px, 100%);
  max-height:min(86vh, 780px); overflow:auto;
  padding:clamp(18px, 3vw, 30px);
  transform:translateY(12px); transition:transform .18s var(--ease);
}
.cx-overlay.open .cx-sheet{ transform:none; }
.cx-x{
  position:absolute; top:10px; right:10px; z-index:5;
  width:32px; height:32px; border-radius:6px; cursor:pointer;
  background:var(--paper-3); border:1px solid var(--line);
  color:var(--tx-dim); font-size:19px; line-height:1;
  transition:color var(--hover-s) var(--ease), border-color var(--hover-s) var(--ease);
}
.cx-x:hover{ color:var(--red-hi); border-color:var(--red); }

/* ---------- 弹窗: 详情布局 ---------- */
.cx-detail{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px, 3vw, 30px);
  align-items:start;
}
.cx-detail-art{ display:flex; flex-direction:column; align-items:center; }
.cx-detail-art .cx-face{ --cw:min(218px, 38vw); }
.cx-detail-name{
  font-family:var(--f-song); font-weight:900; font-size:26px; letter-spacing:.04em;
  margin:2px 0 10px;
}
.cx-detail-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.chip.t-attack{ color:var(--t-attack); } .chip.t-space{ color:var(--t-space); }
.chip.t-debuff{ color:var(--t-debuff); } .chip.t-support{ color:var(--t-support); }
.chip.t-heal{ color:var(--t-heal); } .chip.t-summon{ color:var(--t-summon); }
.chip.gold{ color:var(--gold); border-color:var(--gold-soft); }
.cx-stats{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  padding:12px 0; margin-bottom:14px;
  border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
}
.cx-stats.cols4{ grid-template-columns:repeat(4, 1fr); }
.cx-stats .st{ display:flex; flex-direction:column; gap:2px; }
.cx-stats .st b{ font-size:22px; font-weight:500; color:var(--tx); line-height:1.1; }
.cx-stats .st span{ font-size:11px; color:var(--tx-dim); letter-spacing:.14em; }
.cx-desc{ margin:0 0 16px; font-size:14.5px; line-height:1.85; color:var(--tx); }

/* 怪物详情补充块 */
.cx-block{ margin-bottom:16px; }
.cx-block-t{
  margin:0 0 8px; font-family:var(--f-mono); font-size:11px; font-weight:400;
  letter-spacing:.26em; color:var(--tx-dim); text-transform:uppercase;
}
.cx-block-b{ font-size:13.5px; color:var(--tx); }
.cx-block-b.dim{ color:var(--tx-faint); }
.cx-effhp{ display:flex; flex-wrap:wrap; gap:8px; }
.cx-effrow{
  display:inline-flex; align-items:baseline; gap:7px;
  background:var(--paper-3); border:1px solid var(--line); border-radius:6px;
  padding:5px 11px;
}
.cx-effrow em{ font-style:normal; font-size:11.5px; color:var(--tx-dim); }
.cx-effrow b{ font-size:16px; font-weight:500; color:var(--gold); }
.cx-tagrow{ display:flex; flex-wrap:wrap; gap:7px; }

/* 怪物详情: 立绘 */
.cx-portrait{
  position:relative; width:min(190px, 36vw); aspect-ratio:1/1;
  border-radius:10px; overflow:hidden;
  background:var(--paper-3); border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.cx-portrait img{ width:100%; height:100%; object-fit:cover; }
.cx-portrait.boss{ border-color:var(--gold-soft); box-shadow:0 0 18px rgba(224,178,60,.16), 0 6px 16px rgba(0,0,0,.4); }
.cx-portrait .cx-threat{ right:6px; bottom:6px; min-width:1.8em; height:1.8em; font-size:14px; }

/* 怪物详情: 所挂技能卡(联动翻看) */
.cx-hang{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:9px; }
.cx-hangcard{
  display:flex; align-items:center; gap:10px; padding:7px 9px; cursor:pointer;
  background:var(--paper-3); border:1px solid var(--line); border-radius:7px;
  text-align:left;
  transition:transform var(--hover-s) var(--ease), border-color var(--hover-s) var(--ease);
}
.cx-hangcard:hover{ transform:translateY(-1px); border-color:var(--gold-soft); }
.cx-hangcard .himg{
  flex:none; width:38px; height:52px; border-radius:4px; overflow:hidden;
  border:1px solid var(--line); background:var(--paper-2);
}
.cx-hangcard .himg img{ width:100%; height:100%; object-fit:cover; }
.cx-hangcard .hinfo{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.cx-hangcard .hname{
  font-family:var(--f-song); font-weight:700; font-size:13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cx-hangcard .hmeta{ font-size:10.5px; color:var(--tx-dim); }
.cx-hangcard.t-attack .hname{ color:var(--t-attack); }
.cx-hangcard.t-space .hname{ color:var(--t-space); }
.cx-hangcard.t-debuff .hname{ color:var(--t-debuff); }
.cx-hangcard.t-support .hname{ color:var(--t-support); }
.cx-hangcard.t-heal .hname{ color:var(--t-heal); }
.cx-hangcard.t-summon .hname{ color:var(--t-summon); }

/* 遗物详情: 大图标 */
.cx-relic-big{
  width:min(150px, 32vw); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, var(--paper), var(--paper-3));
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.cx-relic-big img{ width:64%; height:64%; object-fit:contain; }
.cx-relic-big.r-legend{ border-color:var(--gold-soft); box-shadow:0 0 22px rgba(224,178,60,.2), 0 6px 16px rgba(0,0,0,.4); }
.cx-relic-big.r-rare{ border-color:rgba(183,169,201,.45); }

/* ---------- 攻击范围 5×3 ---------- */
.cx-rangebox{ margin-top:4px; }
.cx-range-title{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.26em;
  color:var(--tx-dim); margin-bottom:9px; text-transform:uppercase;
}
.cx-range{
  display:grid; grid-template-columns:repeat(5, 34px); grid-auto-rows:34px; gap:4px;
}
.cx-cell{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:4px;
  background:var(--paper-3); border:1px solid var(--line-soft);
  font-family:var(--f-song); font-size:12px; color:var(--tx-dim);
}
.cx-cell.self{
  background:rgba(224,178,60,.14); border-color:var(--gold-soft); color:var(--gold);
  font-weight:700;
}
.cx-cell.hit{
  background:rgba(235,51,41,.2); border-color:var(--red-hi);
  box-shadow:inset 0 0 8px rgba(235,51,41,.25);
}
.cx-range-legend{
  display:flex; gap:18px; margin-top:9px;
  font-size:11px; color:var(--tx-faint); letter-spacing:.08em;
}
.cx-range-legend span{ display:inline-flex; align-items:center; gap:6px; }
.cx-range-legend .cx-cell{ width:13px; height:13px; font-size:0; }

/* ---------- 响应式 ---------- */
@media (max-width:700px){
  .cx-detail{ grid-template-columns:1fr; }
  .cx-detail-art{ align-items:flex-start; }
  .cx-range{ grid-template-columns:repeat(5, 30px); grid-auto-rows:30px; }
  .cx-stats, .cx-stats.cols4{ grid-template-columns:repeat(2, 1fr); }
  .cx-tab{ padding:7px 13px; font-size:14px; }
}

/* ============================================================
   板块: 玩法 (gameplay)
   五节拍: 开篇 / 核心循环 / 职业陈列(立绘主场) / 构筑养成 / 关卡肉鸽
   ============================================================ */

/* —— 0. 开篇: 超大宋体 + 破框立绘 —— */
.gp-hero{
  position:relative;
  display:grid; grid-template-columns:1.15fr .85fr;
  align-items:center; gap:clamp(20px,4vw,56px);
  min-height:min(78vh, 640px);
  overflow:visible;
  padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px);
  max-width:1200px; margin:0 auto;
}
.gp-hero-ghost{
  position:absolute; z-index:0; pointer-events:none;
  font-family:var(--f-song); font-weight:900;
  font-size:clamp(220px,34vw,430px); line-height:.9;
  right:-2%; top:50%; transform:translateY(-54%);
  color:var(--tx); opacity:.045; user-select:none;
}
.gp-hero-copy{ position:relative; z-index:1; }
.gp-eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.34em;
  color:var(--gold-soft); margin:0 0 14px;
}
.gp-hero-title{
  font-family:var(--f-song); font-weight:900;
  font-size:clamp(46px,7.2vw,92px); line-height:1.12; letter-spacing:.03em;
  margin:0 0 18px;
}
.gp-hero-title em{ font-style:normal; color:var(--red-hi); }
.gp-hero-sub{
  font-size:clamp(14px,1.35vw,17px); color:var(--tx-dim); line-height:1.9; margin:0 0 18px;
}
.gp-hero-sub b{ color:var(--tx); font-weight:600; }
.gp-hero-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }

.gp-hero-art{
  position:relative; z-index:1; justify-self:end;
  height:clamp(400px,58vh,560px); aspect-ratio:747/1000;
  margin-bottom:calc(-1 * clamp(30px,6vh,64px) - 1px); /* 破出 section 下缘(含分隔线), 下一节拍背景衔接遮住 */
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));
}
.gp-hero-art img{ width:100%; height:100%; object-fit:contain; object-position:bottom; }
.gp-hero-art-cap{
  position:absolute; right:6%; bottom:8%;
  font-family:var(--f-song); font-size:12px; letter-spacing:.3em;
  color:rgba(230,222,211,.55); writing-mode:vertical-rl;
}

/* —— 1. 核心循环: 横向步骤条 —— */
.gp-loop{
  display:flex; align-items:stretch; gap:10px;
  margin-bottom:22px;
}
.gp-step{
  position:relative; flex:1 1 0; min-width:0;
  background:linear-gradient(165deg, var(--paper), var(--paper-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px 16px 16px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  transition:transform var(--hover-s) var(--ease), border-color var(--hover-s) var(--ease);
}
.gp-step:hover{ transform:translateY(calc(-1 * var(--lift))); border-color:var(--gold-soft); }
.gp-step-ic{ width:44px; height:44px; margin-bottom:10px; }
.gp-step-ic svg{ width:100%; height:100%; }
.gp-step-ic text{
  font-family:var(--f-song); font-weight:900; font-size:30px;
  fill:var(--gold); text-anchor:middle;
}
.gp-step:nth-child(7) .gp-step-ic text{ fill:var(--red-hi); } /* 同步结算 = 点睛红 */
.gp-step-num{
  position:absolute; top:12px; right:14px;
  font-size:12px; color:var(--tx-faint); letter-spacing:.1em;
}
.gp-step h3{
  font-family:var(--f-song); font-weight:700; font-size:19px;
  margin:0 0 6px; letter-spacing:.06em;
}
.gp-step p{ margin:0; font-size:13px; color:var(--tx-dim); line-height:1.7; }
.gp-step-arrow{
  align-self:center; flex:none; color:var(--red);
  font-size:20px; font-weight:700; transform:translateY(-2px);
}
.gp-diff{
  display:flex; align-items:center; gap:18px;
  background:rgba(200,162,74,.05);
  border:1px dashed var(--line); border-radius:var(--radius-lg);
  padding:16px 20px;
}
.gp-diff .sticker{ flex:none; }
.gp-diff p{ margin:0; font-size:14px; color:var(--tx-dim); line-height:1.8; }
.gp-diff b{ color:var(--gold); font-weight:600; }

/* —— 2. 职业陈列: 立绘选择器 + 详情面板(统一等高面板, 三栏对齐) —— */
.gp-classes{
  display:grid; grid-template-columns:148px minmax(0,1fr) minmax(0,420px);
  gap:clamp(16px,2.4vw,28px); align-items:stretch;
  background:linear-gradient(165deg, var(--paper), var(--paper-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:clamp(18px,2.6vw,30px);
}

/* 左: 立绘选择器(竖排, 与面板等高, 7卡均分) */
.gp-rail{
  display:grid; grid-template-rows:repeat(7, 1fr); gap:9px;
  align-content:stretch;
}
.gp-tab{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px;
  background:var(--ink-880); border:1px solid var(--line); border-radius:10px;
  padding:6px 5px 5px; cursor:pointer; overflow:hidden; min-height:0;
  transition:border-color var(--hover-s), background var(--hover-s), opacity var(--hover-s);
  opacity:.6;
}
.gp-tab img{
  width:100%; flex:1; min-height:0; object-fit:contain; object-position:bottom;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.gp-tab-name{ font-family:var(--f-song); font-weight:700; font-size:12.5px; letter-spacing:.05em; color:var(--tx); line-height:1.1; }
.gp-tab:hover{ opacity:.92; background:var(--ink-850); }
.gp-tab.on{
  opacity:1; border-color:var(--gold-500); background:var(--ink-850);
  box-shadow:0 0 0 1px var(--gold-500), 0 8px 18px rgba(0,0,0,.45);
}
.gp-tab.on::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold-500);
}
.gp-tab:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; opacity:1; }

/* 中: 大立绘(固定高, 立绘居中不沉底) */
.gp-panel-art{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 78% at 50% 100%, rgba(211,162,78,.14), transparent 62%);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer;
  height:620px; align-self:start;
}
.gp-panel-art img{
  position:absolute; inset:0; margin:auto;
  width:100%; height:100%; object-fit:contain; object-position:center;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));
  transition:opacity .16s var(--ease);
}
.gp-art-hint{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--f-mono); font-size:10px; color:var(--tx-dim); letter-spacing:.14em;
  background:rgba(20,17,12,.66); padding:4px 12px; border-radius:999px; border:1px solid var(--line);
  pointer-events:none; white-space:nowrap;
}

/* 右: 详情(信息紧凑排满) */
.gp-panel-info{ min-width:0; display:flex; flex-direction:column; }
.gp-panel-no{ font-family:var(--f-mono); font-size:11px; color:var(--gold-700); letter-spacing:.3em; }
.gp-panel-name{ font-family:var(--f-song); font-weight:900; font-size:clamp(30px,3.2vw,40px); margin:4px 0 2px; letter-spacing:.06em; line-height:1.05; }
.gp-panel-role{ display:inline-block; font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; color:var(--gold-500); border:1px solid var(--gold-700); border-radius:999px; padding:3px 12px; margin:8px 0 14px; align-self:flex-start; }
.gp-panel-intro{ font-size:13.5px; color:var(--tx-dim); line-height:1.8; margin:0 0 16px; }
.gp-panel-stats{ display:flex; flex-direction:column; gap:2px; margin-bottom:18px; max-width:280px; }
.gp-panel-lab{ font-family:var(--f-mono); font-size:10px; letter-spacing:.26em; color:var(--tx-faint); text-transform:uppercase; margin:0 0 9px; }

/* 起手手卡(网格排满, 不再稀拉) */
.gp-deck{ display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.gp-deck-card{
  position:relative; width:78px; aspect-ratio:416/576;
  transition:transform var(--hover-s) var(--ease);
}
.gp-deck-card:hover{ transform:translateY(-4px); }
.gp-deck-card .gp-deck-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:7px; }
.gp-deck-card .gp-deck-frame{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.gp-deck-name{ position:absolute; left:0; right:0; bottom:-19px; text-align:center; font-size:11px; color:var(--tx-dim); letter-spacing:.04em; }

/* 主动技 */
.gp-panel-skills{ display:flex; flex-direction:column; gap:9px; margin-top:auto; }
.gp-skill{ background:linear-gradient(165deg,#241f15,#1c1810); border:1px solid var(--line); border-radius:8px; padding:11px 13px; }
.gp-skill-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:3px; }
.gp-skill-head b{ font-family:var(--f-song); font-size:15px; letter-spacing:.05em; }
.gp-skill-head i{ font-style:normal; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; margin-left:auto; flex:none; }
.gp-skill.blood{ border-left:3px solid var(--tag-combat); }
.gp-skill.blood .gp-skill-head i{ color:var(--tag-combat); }
.gp-skill.cd{ border-left:3px solid var(--gold-500); }
.gp-skill.cd .gp-skill-head i{ color:var(--gold-500); }
.gp-skill p{ margin:0; font-size:12px; color:var(--tx-dim); line-height:1.62; }

/* 微型数值条 */
.gp-stat{ display:flex; align-items:center; gap:8px; margin-top:5px; }
.gp-stat label{ flex:none; width:32px; font-size:11px; color:var(--tx-faint); letter-spacing:.12em; }
.gp-stat-track{ flex:1; height:4px; border-radius:3px; background:var(--ink-800); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.gp-stat-track i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, var(--gold-700), var(--gold-500)); }
.gp-stat.hp .gp-stat-track i{ background:linear-gradient(90deg,#8e2f2c,var(--tag-combat)); }
.gp-stat b{ flex:none; width:20px; text-align:right; font-size:12px; color:var(--tx); font-weight:500; }

@media (max-width:980px){
  .gp-classes{ grid-template-columns:120px minmax(0,1fr); }
  .gp-panel-info{ grid-column:1 / -1; }
  .gp-panel-art{ height:440px; }
}
@media (max-width:640px){
  .gp-classes{ grid-template-columns:1fr; }
  .gp-rail{ grid-template-rows:none; grid-auto-flow:column; grid-auto-columns:70px; overflow-x:auto; }
  .gp-tab img{ height:60px; flex:none; }
  .gp-panel-art{ height:340px; }
}

/* —— 3/4. 构筑与关卡: 特性格 —— */
.gp-build, .gp-run{
  display:grid; gap:14px; margin-bottom:22px;
}
.gp-build{ grid-template-columns:repeat(3, 1fr); }
.gp-run{ grid-template-columns:repeat(4, 1fr); }
.gp-feat{
  background:linear-gradient(165deg, var(--paper), var(--paper-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px 16px 16px;
  transition:transform var(--hover-s) var(--ease), border-color var(--hover-s) var(--ease);
}
.gp-feat:hover{ transform:translateY(calc(-1 * var(--lift))); border-color:var(--gold-soft); }
.gp-feat-ic{ width:40px; height:40px; margin-bottom:10px; }
.gp-feat-ic svg{ width:100%; height:100%; }
.gp-feat-ic text{
  font-family:var(--f-song); font-weight:900; font-size:28px;
  fill:var(--gold-soft); text-anchor:middle;
}
.gp-feat h3{
  font-family:var(--f-song); font-weight:700; font-size:17.5px;
  margin:0 0 6px; letter-spacing:.05em;
}
.gp-feat p{ margin:0; font-size:13px; color:var(--tx-dim); line-height:1.75; }

/* 示例卡条(真实卡面 + 品质框) */
.gp-cards{
  display:flex; gap:clamp(14px,2.4vw,30px); justify-content:center;
  padding:8px 0 4px;
}
.gp-card{
  position:relative; width:clamp(128px,13vw,168px); height:clamp(168px,17vw,216px);
  margin:0; transition:transform .16s var(--ease);
}
.gp-card > img:first-child{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:bottom;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.6));
}
.gp-card .gp-card-frame, .gp-card figcaption{ display:none; }
.gp-card:nth-child(odd){ transform:rotate(-2.2deg); }
.gp-card:nth-child(even){ transform:rotate(1.8deg) translateY(6px); }
.gp-card:hover{ transform:rotate(0) translateY(-8px) scale(1.06); z-index:2; }
.gp-cards-cap{
  margin:14px 0 0; text-align:center; font-size:13px; color:var(--tx-dim); letter-spacing:.03em;
}

/* 关卡节拍收尾金句 */
.gp-tail{
  border-left:3px solid var(--gold);
  background:rgba(200,162,74,.06);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:14px 20px;
}
.gp-tail p{
  margin:0; font-family:var(--f-song); font-size:15px; color:var(--tx); line-height:1.9;
}
.gp-tail b{ color:var(--gold); font-weight:700; }

/* —— 响应式 —— */
@media (max-width:960px){
  .gp-build{ grid-template-columns:1fr 1fr; }
  .gp-run{ grid-template-columns:1fr 1fr; }
  .gp-loop{ flex-wrap:wrap; }
  .gp-step{ flex:1 1 42%; }
  .gp-step-arrow{ display:none; }
}
@media (max-width:760px){
  .gp-hero{ grid-template-columns:1fr; min-height:0; }
  .gp-hero-art{
    justify-self:center; height:min(58vh,440px); margin-bottom:-32px; margin-top:-8px;
  }
  .gp-hero-ghost{ right:auto; left:-4%; top:8%; transform:none; font-size:200px; }
  .gp-run{ grid-template-columns:1fr; }
  .gp-diff{ flex-direction:column; align-items:flex-start; gap:10px; }
}
@media (max-width:560px){
  .gp-build{ grid-template-columns:1fr; }
  .gp-step{ flex:1 1 100%; }
}

/* ============================================================
   板块: 资源陈列 (gallery)
   深色展墙 + 悬浮展签; 馆 = section, 展品 = 立轴/小格/横幅
   ============================================================ */

/* —— 板块头 —— */
.ga-hero .sec-sub{ max-width:560px; }
.ga-hero-stats{ display:flex; gap:26px; margin-top:18px; }
.ga-hero-stat b{ font-size:26px; font-weight:500; color:var(--gold); line-height:1; }
.ga-hero-stat span{ display:block; margin-top:4px; font-size:11px; color:var(--tx-dim); letter-spacing:.18em; }

/* —— 馆头 —— */
.ga-hall-head{ position:relative; margin-bottom:24px; }
.ga-hall-ord{
  font-size:11px; letter-spacing:.4em; color:var(--gold-soft);
  text-transform:uppercase; margin-bottom:4px;
}
.ga-hall-title{
  display:inline-block; font-family:var(--f-song); font-weight:700;
  font-size:clamp(20px,2.6vw,27px); letter-spacing:.05em; margin:0 12px 0 0;
}
.ga-hall-count{ vertical-align:6px; }
.ga-hall-count b{ color:var(--gold); font-weight:500; }
.ga-hall-blurb{ margin:8px 0 0; max-width:640px; font-size:13px; color:var(--tx-dim); }

/* —— 展墙网格 —— */
.ga-wall{ display:grid; gap:16px; }
.ga-wall-tall{ grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); }
.ga-wall-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }

/* —— 展品卡(公共) —— */
.ga-item{
  position:relative; margin:0; cursor:zoom-in;
  transition:transform var(--hover-s) var(--ease), filter var(--hover-s) var(--ease);
}
.ga-item:hover, .ga-item:focus-visible{
  transform:translateY(calc(var(--lift) * -1)) scale(1.02);
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));
  z-index:3;
}
.ga-stage{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-soft); border-radius:var(--radius);
  background:
    radial-gradient(90% 70% at 50% 18%, rgba(230,222,211,.05), transparent 70%),
    var(--paper-3);
  box-shadow:inset 0 0 26px rgba(0,0,0,.5);
  overflow:hidden;
  transition:border-color var(--hover-s) var(--ease), box-shadow var(--hover-s) var(--ease);
}
.ga-item:hover .ga-stage, .ga-item:focus-visible .ga-stage{
  border-color:var(--gold-soft);
  box-shadow:inset 0 0 26px rgba(0,0,0,.5), 0 0 0 1px rgba(224,178,60,.22),
    0 8px 22px rgba(0,0,0,.45);
}
.ga-stage img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  transition:transform var(--hover-s) var(--ease);
}
.ga-item:hover .ga-stage img{ transform:scale(1.05); }
/* 近黑素材提亮一档画布 */
.ga-lift .ga-stage{
  background:
    radial-gradient(90% 70% at 50% 18%, rgba(230,222,211,.07), transparent 70%),
    #1E1B16;
}

/* 画布形态: 立轴(卡/框/底) / 小方格(图标) / 横幅 / 细条 / 按钮皮 */
.ga-tall  .ga-stage{ aspect-ratio:3/4; padding:8px; }
.ga-tall  .ga-stage img{ max-height:100%; }
.ga-tile  .ga-stage{ aspect-ratio:1/1; padding:16%; }
.ga-banner{ grid-column:span 2; }
.ga-banner .ga-stage{ aspect-ratio:2.4/1; padding:12px 10%; }
.ga-spine .ga-stage{ aspect-ratio:1/2.6; padding:18% 26%; }
.ga-chip  .ga-stage{ aspect-ratio:2/1; padding:14px 12%; }

/* —— 悬浮展签(微旋纸片) —— */
.ga-tag{
  position:absolute; left:8px; right:8px; bottom:8px; z-index:2;
  background:linear-gradient(165deg, #383226, #2A251D);
  border:1px solid var(--line); border-radius:4px;
  padding:7px 10px 6px;
  box-shadow:0 6px 14px rgba(0,0,0,.5);
  transform:rotate(var(--tag-rot, -1.6deg));
  transition:transform var(--hover-s) var(--ease), border-color var(--hover-s) var(--ease),
    background var(--hover-s) var(--ease);
  pointer-events:none;
}
.ga-item:hover .ga-tag, .ga-item:focus-visible .ga-tag{
  transform:rotate(0deg) translateY(-2px);
  border-color:var(--gold-soft);
  background:linear-gradient(165deg, #413A2B, #2E2820);
}
.ga-tag::before{  /* 纸片顶上一小段朱红裱头 */
  content:""; position:absolute; left:10px; top:-1px; width:26px; height:2px;
  background:var(--red); border-radius:2px; opacity:.85;
}
.ga-name{
  font-family:var(--f-song); font-weight:700; font-size:13.5px; letter-spacing:.03em;
  color:var(--tx); line-height:1.35;
}
.ga-note{
  margin-top:2px; font-size:11px; line-height:1.5; color:var(--tx-dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ga-item:hover .ga-note{ color:var(--tx); }

/* —— 卡面结构特展: 三层扇形叠放 —— */
.ga-assemble{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,60px);
  align-items:center; margin-bottom:34px;
}
.ga-stack{
  position:relative; width:min(300px, 72vw); aspect-ratio:3/4.1;
  margin-bottom:22px;   /* 给底层名牌留位 */
  transition:transform var(--hover-s) var(--ease);
}
.ga-layer{
  position:absolute; inset:0; margin:0;
  border-radius:var(--radius);
  transition:transform .18s var(--ease), filter .18s var(--ease);
}
.ga-layer img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
.ga-layer:nth-child(1){ transform:rotate(-4deg) translate(-13%, 1%); }
.ga-layer:nth-child(2){ transform:rotate(0deg)  translate(0, -1%); }
.ga-layer:nth-child(3){ transform:rotate(4deg)  translate(13%, 1%); }
.ga-stack:hover .ga-layer:nth-child(1){ transform:rotate(-7deg) translate(-30%, 2%); }
.ga-stack:hover .ga-layer:nth-child(2){ transform:rotate(0deg)  translate(0, -3%); }
.ga-stack:hover .ga-layer:nth-child(3){ transform:rotate(7deg)  translate(30%, 2%); }
.ga-stack:hover .ga-layer:hover{ transform:translateY(-10px) scale(1.04); z-index:4; }
.ga-layer-chip{
  position:absolute; left:50%; bottom:-12px; transform:translateX(-50%) rotate(-1deg);
  white-space:nowrap; font-size:11.5px; letter-spacing:.05em;
  background:linear-gradient(165deg, #383226, #29241C);
  border:1px solid var(--line); border-radius:20px; padding:3px 12px;
  color:var(--tx-dim); box-shadow:0 4px 10px rgba(0,0,0,.5);
}
.ga-layer-chip em{ font-style:normal; color:var(--gold); margin-right:6px; }
.ga-assemble-kicker{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.34em; color:var(--gold-soft);
}
.ga-assemble-title{
  font-family:var(--f-song); font-weight:700; font-size:clamp(19px,2.4vw,25px);
  margin:8px 0 10px; letter-spacing:.04em;
}
.ga-assemble-note{ margin:0 0 16px; font-size:13.5px; color:var(--tx-dim); max-width:520px; line-height:1.8; }
.ga-assemble-open{ display:flex; flex-wrap:wrap; gap:8px; }
.ga-mini{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--paper-3); border:1px solid var(--line); border-radius:20px;
  padding:6px 14px; font-size:12.5px; color:var(--tx-dim); letter-spacing:.04em;
  transition:color var(--hover-s) var(--ease), border-color var(--hover-s) var(--ease),
    transform var(--hover-s) var(--ease);
}
.ga-mini:hover{ color:var(--tx); border-color:var(--gold-soft); transform:translateY(calc(var(--lift) * -1)); }
.ga-mini-dot{ width:6px; height:6px; border-radius:50%; background:var(--red); flex:none; }

/* —— 放大 modal —— */
.ga-modal{ position:fixed; inset:0; z-index:200; display:none; }
.ga-modal.on{ display:flex; align-items:center; justify-content:center; }
.ga-modal-mask{
  position:absolute; inset:0; background:rgba(10,9,8,.82);
  backdrop-filter:blur(3px); cursor:zoom-out;
}
.ga-modal-card{
  position:relative; z-index:1; margin:0; max-width:min(92vw, 860px);
  background:linear-gradient(160deg, var(--paper), var(--paper-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  padding:clamp(18px,3vw,30px);
  animation:gaModalIn .18s var(--ease);
}
@keyframes gaModalIn{ from{ opacity:0; transform:translateY(12px) scale(.97);} to{ opacity:1; transform:none;} }
.ga-modal-stage{
  display:flex; align-items:center; justify-content:center;
  min-height:200px; max-height:62vh; padding:14px;
  background:radial-gradient(80% 70% at 50% 20%, rgba(230,222,211,.06), transparent 70%), var(--paper-3);
  border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:inset 0 0 30px rgba(0,0,0,.55);
}
.ga-modal-stage img{ max-height:56vh; max-width:100%; width:auto; height:auto; object-fit:contain; }
.ga-modal-cap{ text-align:center; padding-top:14px; }
.ga-modal-name{ font-family:var(--f-song); font-weight:700; font-size:19px; letter-spacing:.05em; }
.ga-modal-key{ margin-top:4px; font-size:11px; color:var(--gold-soft); letter-spacing:.1em; }
.ga-modal-note{ margin-top:6px; font-size:13px; color:var(--tx-dim); }
.ga-modal-x{
  position:absolute; top:10px; right:12px; z-index:2;
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  background:var(--paper-3); border:1px solid var(--line); color:var(--tx-dim);
  font-size:18px; line-height:1; transition:color var(--hover-s), border-color var(--hover-s);
}
.ga-modal-x:hover{ color:var(--tx); border-color:var(--red); }

/* —— 响应式 —— */
@media (max-width:860px){
  .ga-assemble{ grid-template-columns:1fr; }
  .ga-stack{ margin:0 auto 14px; }
  .ga-banner{ grid-column:span 1; }
  .ga-wall-tall{ grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); }
  .ga-wall-grid{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); }
}