/* ============================================================================
   brand-deck.css —— 原 brand.css 的 第 4 段（14 卡组广场 / 15 单卡详情弹窗）
   ----------------------------------------------------------------------------
   **逐字搬过来、没有重排一行**（原第 2339–2955 行）。拆的理由：brand.css 涨到 4278 行，
   改一条规则要在大文件里翻；分段后按主题定位，每段 ≤1000 行。

   🔴 **加载顺序就是层叠顺序**：本文件必须在 brand.css 之后引用（HTML 里已按序写 5 个 link）。
      段内规则**不要搬到别的段** —— 位置一变，覆盖关系就变，视觉会飘（而截图未必看得出来）。
      要验证拆分无损，跑 `node _probe_style_hash.cjs` 对比拆分前的指纹。
   ========================================================================== */
/* ==========================================================================
   14 · 卡组广场（decks.html）
   组件沿用第 5/6 节的 panel / btn / fopt / badge 体系；新增部分全部 dk- 前缀。
   职业配色取错版四色 + 语义色子集（CLS_COLOR，JS 侧同源），
   黄金仍只做强调（造价 / 选中态 / 环心），不占扇区面积。
   ========================================================================== */
/* 「速览条」（.dk-stats）已随 renderStats() 于 2026-09-19 下线，样式一并删除。 */

/* 环境面板：左饼图右图例 */
.dk-env {
  /* 左栏 300 → 344（2026-10-23 店主：「把饼图放大点」）——
     饼图越小，楔子越窄，脸越认不出，这两件事是同一个问题。 */
  display: grid; grid-template-columns: 344px 1fr; gap: 24px;
  margin-bottom: 14px; align-items: start;
}
.dk-h { margin: 0; font-size: 15px; font-weight: 800; }
.dk-h-sub { margin: 4px 0 12px; font-size: 12.5px; }
.dk-h-sub b { color: var(--gold-ink); }
/* 职业分布饼图（2026-10-23 店主口径：**实心、每块铺原图、百分比压图上**）
   参考图是「整块切成几份，每份用一张图铺满，中间压 xx%」，不是环形 + 小圆图。 */
.dk-donut { max-width: 344px; margin: 0 auto; }
.dk-donut svg { width: 100%; height: auto; display: block; }
/* 扇区之间只留 1px 深色缝：图铺满后靠这道缝分块，太粗会像切碎的拼图 */
.dk-slice { cursor: pointer; stroke: var(--ink); stroke-width: 1.2; transition: filter .15s; }
.dk-slice:hover { filter: brightness(1.18); }
.dk-slice.sel { stroke: var(--gold); stroke-width: 2.5; }
/* 铺在扇区里的原图：不吃点击（否则"点扇形筛职业"在图面上失效），
   不加描边（描边会沿扇形边界多画一圈，看起来像重影）。 */
.dk-pie-img { stroke: none; pointer-events: none; }
/* 百分比：白字 + 深色描边（paint-order 让描边画在字**底下**）。
   不用半透明底板 —— 底板会盖住图，而描边只压一圈边，图还是透的。 */
.dk-pie-pct {
  /* 14.5 → 11（2026-10-23 店主：「数字也不要太大了，影响观看」）——
     百分比是"读一眼"的信息，不是主角；图才是。描边跟着收细，否则小字会糊成一团。 */
  fill: #fff; font-size: 11px; font-weight: 800; text-anchor: middle;
  dominant-baseline: middle; letter-spacing: .02em;
  paint-order: stroke; stroke: rgba(0, 0, 0, .62); stroke-width: 3;
  stroke-linejoin: round; pointer-events: none;
}
/* 楔子里**只留百分比**（2026-10-23 店主：「这个饼图不用显示职业」）。 */
/* 图例（2026-10-23）：原来是 6 条**整行**，名字贴左、数字贴右、中间整片空，
   用户：「这些一行一行的东西太占空间了，把他们变成卡片形式展示」。
   改成卡片网格后：一行 3 格、两行收完，高度 ~276 → ~90，
   空出来的右栏下半截正好放「环境速览」（env.css 的 .dk-ai）。 */
.dk-legend {
  /* 238 → 226：饼图加宽到 344 后右栏只剩 728，238 只够排 2 列（6 格变 3 行）。
     226 刚好回到 3 列 × 2 行 —— 图例必须"两行收完"，否则省出来的空间又没了。 */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
  gap: 8px; margin-top: 0;
}
.dk-lg {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  background: var(--ink-3); border: 1px solid var(--ink-4); border-radius: 9px;
  padding: 7px 11px; color: var(--text-2); font-size: 12.5px; cursor: pointer;
  transition: .15s; text-align: left; width: 100%;
}
/* 色块从 10px 方块改成 4px 竖条：竖条贴边当"图例钥匙"，方块在卡片里更像一个孤立的点 */
.dk-lg i { width: 4px; height: 22px; border-radius: 2px; flex: none; }
.dk-lg:hover { border-color: var(--brand-2); background: var(--ink-4); color: var(--text); }
.dk-lg.on { background: var(--ink-4); border-color: var(--gold); color: var(--text); }
.dk-lg .t { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-lg .n { margin-left: auto; flex: none; color: var(--text-3); font-size: 11.5px; }
.dk-lg .n b { color: var(--gold-ink); font-size: 13px; }

/* 工具条 */
.dk-toolbar { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dk-cls-chips { gap: 6px; }
.dk-toolbar select.input { width: auto; }

/* 卡组卡片 */
.dk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dk-card {
  padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
  min-width: 0; position: relative; overflow: hidden;
}
/* 背景淡出（2026-09-18 拍板，替代原右侧 4 张单卡预览）：
   构筑中稀有度最高卡的**卡面**（2026-10-20 起不再裁原画，直接用 assets/img/cards/，
   天然满足用户三规矩：无费用标志 / 无边框 / 只有卡面卡图）作右侧底纹，
   mask 向左淡出融进面板底色，纯装饰不可点。cover 居中即可 —— 源图里已经没有文字区。 */
.dk-bg {
  position: absolute; top: 0; right: 0; bottom: 0; width: 58%;
  background-size: cover; background-position: center top;
  opacity: .32; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent 96%);
  mask-image: linear-gradient(to left, #000 40%, transparent 96%);
}
.dk-card > :not(.dk-bg) { position: relative; }   /* 内容浮在底纹之上 */
/* 白色薄纱方案试过一晚被用户否了（「没之前的好看」2026-09-18 撤）：不再往卡图上盖渐变 */
.dk-head { display: flex; justify-content: space-between; gap: 14px; }
.dk-head-l { min-width: 0; }
.dk-rank {
  display: inline-block; border-radius: 6px; padding: 3px 9px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; margin-right: 8px;
}
.dk-rank.champ   { background: var(--gold); color: var(--on-accent); }        /* 冠军 · 品牌黄 */
.dk-rank.second  { background: var(--paper); color: var(--on-accent); }       /* 亚军 · 米白 */
.dk-rank.semi    { background: var(--ink-3); color: var(--gold-ink); border: 1px solid var(--brand-2); }
.dk-rank.quarter { background: transparent; color: var(--text-3); border: 1px solid var(--ink-4); }
/* 卡名与职业同一行严格对齐（2026-09-18 拍板）：flex 行 + 垂直居中，职业永不掉行错位 */
.dk-name {
  margin: 8px 0 0; font-size: 17px; font-weight: 800; line-height: 1.3;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0;
}
.dk-name .dk-cls { margin-top: 2px; }   /* 视觉上与大号卡名基线齐平 */
/* 卡组广场的卡名是纯文本；详情页「携带构筑」里卡名是跳卡组广场的链接（2026-09-20），
   去默认链接色与下划线，视觉与纯文本完全一致，hover 才给金 */
.dk-name a { color: inherit; text-decoration: none; }
.dk-name a:hover { color: var(--gold-ink); }
.dk-cls { font-size: 12.5px; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; flex: none; }
/* 2026-09-20：这一行是整张卡上最细最淡的字，原来是 --text-3(#8A857D)，
   压在卡图亮部实测对比度只有 2.2:1，基本读不出来。提到 --text-2 并加一层很淡的文字投影，
   只作用于文字、不碰卡图本身（用户此前明确否掉「往卡图上盖渐变」的方案）。 */
.dk-meta {
  margin-top: 5px; font-size: 12px; color: var(--text-2);
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
.dk-nums {
  display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-2);
  padding: 2px 0;   /* 2026-09-18 拍板：上下分隔杠删除 */
}
.dk-nums b { color: var(--text); }
.dk-price b { color: var(--gold-ink); font-size: 16px; font-weight: 800; }
/* 售完提示（2026-09-20 重做）——
   旧版是**裸的 --brick 文字**直接压在卡图上：砖红 #8B1E2D 本身亮度很低，
   卡图（.dk-bg）一有亮部就把这行字吃掉，是用户圈选的那处「字体看不清楚」。
   改为品牌既有的「缺货徽章」语法（与 .badge.stock-out 同源）：砖红实底 + 近白粉字 + 描边 ——
   徽章自带底色，底下是亮插画还是黑底都读得清（实测 ≥6.5:1）；
   左侧黄菱形沿用 .hc-dots 的指示点语法做「注意」标记，不新增任何色相，
   仍然守住「橙系一律踢出调色板、告警只走砖红」的既有约定。 */
.dk-miss-n {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: center;                       /* .dk-nums 是 baseline 对齐，徽章改走居中 */
  padding: 1px 8px 1px 7px;
  border-radius: var(--r-l3);
  font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1.7;
  color: #FFE9EC;
  background: linear-gradient(180deg, #A32438 0%, #7C1A27 100%);
  border: 1px solid rgba(255,233,236,.3);
  box-shadow: 0 1px 6px rgba(0,0,0,.6);
  white-space: nowrap;
}
.dk-miss-n::before {
  content: ""; flex: none;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);                 /* 黄菱形 = 注意（同 .hc-dots 语法） */
}

/* ── 作者留言（卡组广场 · 2026-10-01）────────────────────────────────────
   同一份数据（d.note）三处呈现，各有各的职责：
     卡片元信息行 → 只放「📝 作者留言」**标记**（留言可到 300 字，正文塞进那行会把卡片撑变形）
     卡片正文区   → **单行摘要**（.dk-note1，超出省略号，title 里有全文）
     构筑详情页   → **整块**（.dk-note），保留作者换行
   颜色只走既有令牌：金 = 「作者本人的话」，与「造价」同级强调。 */
.dk-has-note { color: var(--gold-ink); font-weight: 700; white-space: nowrap; }
.dk-note1 {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.6;
  color: var(--text-2); text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.dk-note1-t { color: var(--gold-ink); margin-right: 5px; }
.dk-note {
  border: 1px solid var(--ink-4); border-left: 3px solid var(--gold);
  border-radius: var(--r-l1); background: rgba(255, 224, 0, .05);
  padding: 11px 14px; margin: 0 0 14px;
}
.dk-note-hd {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--gold-ink); margin-bottom: 7px;
}
.dk-note-by { font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.dk-note-bd {
  font-size: 13px; line-height: 1.85; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;   /* 作者换的行原样保留 */
}
@media (max-width: 640px) { .dk-note-by { margin-left: 0; } }
.dk-actions { display: flex; gap: 10px; }
.dk-actions .btn { flex: 1; }
/* 卡片内的竖排行式构筑明细已下线（2026-09-18 用户拍板：「查看构筑」改独立弹窗，
   见 14b 的 .dk-sheet / .dk-tiles）。随之失效的样式一并删除：
   .dk-detail / .dk-rows / .dk-row / .dk-th / .dk-cost / .dk-qty / .dk-rname /
   .dk-sub / .dk-out / .dk-warn / .dk-foot / .dk-total，以及配套的
   .dk-all-in（全现货）与 .dk-note（底部小注）。 */

/* 空状态 */
.dk-empty { padding: 46px 20px; text-align: center; }
.dk-empty h3 { margin: 0 0 8px; }
.dk-empty p { margin: 0; }

@media (max-width: 900px) {
  .dk-env { grid-template-columns: 1fr; }
  .dk-grid { grid-template-columns: 1fr; }
  /* 窄屏时图例回落成"一行一条"就又变回用户嫌弃的样子了 —— 强制两列，
     390~430px 的手机上每格 ~160px。代价是名字会被压成"皇…"，
     所以窄屏**省掉职业图标**（名字就在旁边、左边色条也已表明职业），把宽度让给名字。 */
  .dk-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-lg { gap: 7px; padding: 7px 9px; }
  .dk-lg img { display: none; }
  .dk-lg .n { font-size: 10.5px; }
}
@media (max-width: 680px) {
  .dk-toolbar select.input { flex: 1 1 120px; }
  .dk-head { flex-direction: column; gap: 10px; }
  .dk-bg { width: 100%; opacity: .2; }
  .dk-actions { flex-direction: column; }
}

/* ── 14b · 构筑弹窗（2026-09-18 用户拍板：查看构筑 → 单独弹窗横铺 + 卡图） ─────
   全屏遮罩 + 大面板；卡组卡牌横铺成图块网格（.dk-tiles），不再用竖排长行。 */
.dk-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 26px;
  background: rgba(10, 10, 10, .8); backdrop-filter: blur(3px);
}
/* .dk-modal 是 display:flex，[hidden] 压不住它 —— 由第 0 节的全局
   `[hidden]{display:none!important}` 兜底，这里不再单独写一条。 */
.dk-sheet {
  display: flex; flex-direction: column; width: min(1240px, 96vw); max-height: 88vh;
  background: var(--ink-2); border: 1px solid var(--ink-4);
  border-radius: var(--r-panel); box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  overflow: hidden;
}
/* 🔴 上面那条 `outline: none` 是 0,1,0，而 motion.css 的全局
   `:focus-visible { outline: 2px solid var(--gold) }` 也是 0,1,0 且**加载更晚**，
   于是打开弹窗（脚本会把焦点收到容器）时整圈金边压不住 —— 桌面端实测有框。
   手机端那条豁免原来写在 brand-touch 的媒体查询里，桌面不生效。
   这里补一条 0,2,0，两端都盖住。内部按钮的焦点环不受影响。 */
.cd-sheet:focus,
.cd-sheet:focus-visible { outline: none; }
/* 看卡表弹窗的打开动画（2026-10-26 店主：点「看卡表」也没有打开动画）。
   `.dk-modal` 用 `hidden` 切换 → 重新显示时动画自动重播，不用 JS 加类。
   与编辑器（#mdMask）同一套节奏：遮蔽淡入 200ms、面板抬起 320ms。 */
.dk-modal:not([hidden]) { animation: mv-fade var(--mv-2) var(--mv-ease) both; }
.dk-modal:not([hidden]) .dk-sheet { animation: mv-lift var(--mv-3) var(--mv-ease) both; }
.dk-sheet-hd {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--ink-4); flex: none;
}
.dk-sheet-hd .dk-name { margin: 6px 0 0; }
.dk-sheet-stats { margin-left: auto; text-align: right; font-size: 12.5px; color: var(--text-3); line-height: 1.7; flex: none; }
.dk-sheet-stats b { color: var(--gold-ink); }
.dk-close {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  background: transparent; border: 1px solid var(--ink-4); color: var(--text-2);
  font-size: 16px; line-height: 1; cursor: pointer; transition: .15s;
}
.dk-close:hover { border-color: var(--gold); color: var(--gold-ink); }
.dk-sheet-bd { overflow-y: auto; padding: 16px 20px; min-height: 0; }
.dk-sheet-bd h4 { margin: 4px 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--text-3); }
.dk-sheet-bd h4 + .dk-tiles { margin-bottom: 18px; }
.dk-sheet-warn { margin: 0 0 12px; font-size: 12.5px; color: #F3B6C2; }
.dk-tiles {
  display: grid; gap: 10px;
  /* 2026-10-23 店主：「不使用鼠标滑轮也能直接看到整个卡组页面或者大多数卡组页面」——
     卡格从 104px 收到 86px（980 宽下 9 列 → 11 列），40 张主卡组从 5 行压到 4 行，
     加上概览区正好一屏能看个七八成，不用先滚一轮。 */
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
}
.dk-tile {
  position: relative; display: block; min-width: 0;
  border: 1px solid var(--ink-4); border-radius: 8px; background: var(--ink-2);
  padding: 7px; transition: .16s;
}
.dk-tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.dk-tile-th {
  position: relative; border-radius: 5px; overflow: hidden;
  background: #0d0d0d; aspect-ratio: 5 / 7;
}
.dk-tile-th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: .3s; }
.dk-tile:hover .dk-tile-th img { transform: scale(1.04); }
.dk-tile .q {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  background: var(--gold); color: var(--on-accent);
  font-size: 11.5px; font-weight: 800; border-radius: 5px; padding: 1px 6px;
}
/* 同名替代角标（2026-10-18）：这张不是卡组里写的那个印版，
   而是「原版售完 → 同名有货」自动换上的。放**左上**，避开右上角的数量角标与售完蒙层。 */
.dk-tile .alt-tag {
  position: absolute; top: 5px; left: 5px; z-index: 2;
  background: rgba(240, 200, 74, .94); color: #241B02;
  font-size: 10px; font-weight: 800; line-height: 1;
  border-radius: 4px; padding: 3px 4px;
}
.dk-tile.is-alt .dk-tno { color: var(--gold-ink); }
/* 缺货提示**放在卡图下面**（2026-10-23 店主：「缺货提醒你移到下面啊，下面那么空」）：
   卡图上只留数量角标，价格与缺货并排一行 —— 卡面干干净净，缺几张一眼也能读到。
   卡框给一圈很淡的红边，扫一列就能看出哪些缺货（不压暗、不盖黑）。 */
.dk-tile.is-miss .dk-tile-th { box-shadow: inset 0 0 0 1px rgba(200, 52, 66, .40); }
.dk-tfoot {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 2px; min-width: 0;
}
.dk-tmiss {
  flex: none;
  font-size: 10.5px; font-weight: 800; line-height: 1.5;
  color: #FF8B96;
}
.dk-tname {
  margin-top: 6px; font-size: 12px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dk-tno { font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-tprice { margin-top: 2px; font-size: 12px; color: var(--gold-ink); font-weight: 700; }
.dk-tile.is-miss .dk-tprice { color: var(--gold-ink); }
.dk-sheet-ft {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 13px 20px; border-top: 1px solid var(--ink-4); flex: none;
}
.dk-sheet-ft .total { font-size: 14px; font-weight: 800; }
.dk-sheet-ft .total b { color: var(--gold-ink); font-size: 17px; }
.dk-sheet-ft .sub { font-size: 12px; color: var(--text-3); }
.dk-sheet-ft .btn { margin-left: auto; }
@media (max-width: 680px) {
  .dk-modal { padding: 10px; }
  .dk-sheet { max-height: 94vh; }
  .dk-sheet-stats { display: none; }
  .dk-tiles { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}


/* ============================================================================
   15 · 单卡详情弹窗（assets/js/cardmodal.js · 设计稿 §2.2）
   左图右文；闪卡走彩虹反光、平卡走白光 —— 两种质感**数据驱动**
   （判据 = 该短码有没有 finish='F' 的 SKU，见 cardmodal.js 的 foilOf）。
   层级 140：必须**高于**构筑弹窗（.dk-modal = 120，卡组里点卡要叠在它之上），
   低于 toast（200）。所以两边都别改这几个数。
   ========================================================================= */
.cd-mask {
  position: fixed; inset: 0; z-index: 140;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(10, 10, 10, .8);
}
/* 从组卡器里打开时抬到最上层（.cd-mask 默认 140 会被 #mdMask 的 400 压住）——
   2026-10-19 用户：「右键弹出个窗口，关闭之后依旧是卡组编辑界面」。 */
.cd-mask.is-top { z-index: 640; }
.cd-sheet {
  position: relative; display: flex; flex-direction: column;
  width: min(1040px, 96vw); max-height: 88vh; outline: none;
  background: var(--ink-2); border: 1px solid var(--ink-4);
  border-radius: var(--r-panel); box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  overflow: hidden;
}
/* 🔴 上面那条 `outline: none` 是 0,1,0，而 motion.css 的全局
   `:focus-visible { outline: 2px solid var(--gold) }` 也是 0,1,0 且**加载更晚**，
   于是打开弹窗（脚本会把焦点收到容器）时整圈金边压不住 —— 桌面端实测有框。
   手机端那条豁免原来写在 brand-touch 的媒体查询里，桌面不生效。
   这里补一条 0,2,0，两端都盖住。内部按钮的焦点环不受影响。 */
.cd-sheet:focus,
.cd-sheet:focus-visible { outline: none; }

/* —— 头：卡名 + 一行身份（编号 / 系列 / 职业 / 稀有度 / 字段）—— */
.cd-hd {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 56px 14px 20px; border-bottom: 1px solid var(--ink-4); flex: none;
}
.cd-hd-l { min-width: 0; }
.cd-name { margin: 0 0 8px; font-size: 21px; font-weight: 900; letter-spacing: .01em; line-height: 1.25; }
.cd-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.cd-meta .cd-mid { color: var(--gold-ink); font-size: 12.5px; }
.cd-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border: 1px solid var(--ink-4); border-radius: 999px;
  background: var(--ink-3); font-size: 12px; color: var(--text-2);
}
.cd-badge .cls-ico { width: 13px; height: 13px; vertical-align: -2px; }
/* 顶部标签行 2026-10-25 改成「类型 + 可用性」两个信息点（原来五个 pill 与规格表重复）。
   · 类型是"这是什么东西"，给它实一档的底 + 加粗，撑住这一行；
   · 可用性沿用 `.cd-avail` 的绿/金/红三档（那三颗是语义色，不要另起一套）；
   · `.cd-note` 的 margin-left 归零 —— 这里是 flex + gap 8，再留 6px 会变成 14。 */
.cd-typeb {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  background: var(--ink-2);
}
.cd-meta .cd-avail { font-size: 12.5px; }
.cd-meta .cd-note { margin-left: 0; }

/* ── 顶部信息 chip（2026-10-25 规格表并入这一行）──────────────────────
   配色分工（店主提醒的"勋章颜色搭配"）：
     · 中性信息（费用/攻血/系列/编号）→ 三号灰底 + 暗灰小标签前缀，**不抢眼**；
     · 类型 → 二号底（比中性亮一档）+ 800 字重，它是"这张卡是什么"，该最先被看到；
     · 职业 → 带图标，图标本身有颜色，底保持中性（不要双重着色）；
     · 稀有度 → 直接用既有的 `.badge.rar-*`（品牌色块），不套这层中性底，
       否则彩色徽章会被灰底"压"下去，看不出 LG / SR闪 的区分；
     · 可用性 → `.cd-avail` 的绿 / 金 / 红三档语义色。
   前缀用 `<i>`（10.5px、字距 .06em）而不是靠"费用：2"这种冒号 —— 冒号在小字号下
   和数字挤成一团，小号大写字母反而更清楚。 */
.cd-b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--ink-4);
  border-radius: 999px;
  background: var(--ink-3);
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.25;
  white-space: nowrap;
  min-width: 0;
}
.cd-b > i {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--text-3);
}
.cd-b > b { font-weight: 800; color: var(--text); }
.cd-b.is-type {
  padding-inline: 11px;
  background: var(--ink-2);
  color: var(--text);
  font-weight: 800;
}
.cd-b.is-cls { gap: 4px; color: var(--text); font-weight: 700; }
.cd-b.is-cls .cls-ico { width: 13px; height: 13px; vertical-align: -2px; }
.cd-b.is-wide { max-width: 260px; color: var(--text); }
.cd-b.is-wide > i { flex: none; }
/* 特征名可能很长（"公主连结·美食殿堂"）：让它自己截断，不要把整行撑开 */
.cd-b.is-wide > i + * , .cd-b.is-wide { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  /* 手机上 chip 会折成 3 行 —— 缩一点内边距与字号，别让头部吃掉半屏 */
  .cd-b { padding: 2px 8px; font-size: 11.5px; }
  .cd-b > i { font-size: 10px; }
}
.cd-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; z-index: 2;
  background: transparent; border: 1px solid var(--ink-4); border-radius: 8px;
  color: var(--text-2); font-size: 15px; line-height: 1; cursor: pointer; transition: .15s;
}
.cd-x:hover { color: var(--on-accent); background: var(--gold); border-color: var(--gold); }

/* —— 体：左图右文（稿子 §2.2 视觉层「左图右文，图占一半」）—— */
.cd-bd {
  display: grid; grid-template-columns: minmax(236px, 306px) 1fr; gap: 24px;
  padding: 18px 20px 20px; overflow-y: auto; min-height: 0;
}
.cd-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cd-artbox { display: flex; flex-direction: column; gap: 8px; }
.cd-art { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; will-change: transform; }
/* 卡面实物 63×88mm = 400:558。只有一档视图了（原画档已删），比例固定在这层。
   反光/彩虹层跟着图一起被 overflow 裁掉，所以它们必须是这一层的子元素。 */
.cd-img-wrap {
  position: relative; display: block; width: 100%; overflow: hidden;
  aspect-ratio: 400 / 558; border-radius: 10px; background: var(--ink-3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.cd-img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.cd-shine, .cd-glare { position: absolute; inset: 0; pointer-events: none; }
.cd-shine {
  background: radial-gradient(58% 42% at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 72%);
  mix-blend-mode: screen;
}
.cd-glare { display: none; }
/* 闪版才有彩虹光带；位置跟着指针走（--mx/--my 由 cardmodal.js 写）
   🔴 膜必须**比卡面大一圈**（inset: -45%）：它整层跟着指针平移（±30%），
      如果和卡面一样大，往右下角拖的时候**左上角就露出没膜的部分** ——
      看上去像卡图多了一道边框（用户 2026-10-17 圈的就是这个）。
      外扩的部分被 .cd-img-wrap 的 overflow:hidden 裁掉，所以视觉上不会溢出。 */
.cd-art.is-foil .cd-glare {
  display: block; inset: -45%; opacity: .5; mix-blend-mode: color-dodge;
  background: linear-gradient(112deg, transparent 18%,
    rgba(255, 40, 120, .42) 30%, rgba(255, 214, 0, .42) 40%, rgba(40, 255, 190, .42) 50%,
    rgba(60, 150, 255, .42) 61%, transparent 74%);
  transform: translate(calc((var(--mx, 50%) - 50%) * .6), calc((var(--my, 50%) - 50%) * .6));
}

/* 放大档（点卡图）：右栏让位，卡图放大 —— 同一层里的视图状态，不是第二个弹窗 */
.cd-sheet.is-zoom .cd-bd { grid-template-columns: 1fr; justify-items: center; }
.cd-sheet.is-zoom .cd-right { display: none; }
.cd-sheet.is-zoom .cd-left { width: min(100%, 460px); }
.cd-sheet.is-zoom .cd-cond { display: none; }   /* 放大看图时把选品相也收起来，画面干净 */

/* —— 品相（同一短码的各品相档；本店按品相定价，买家必须能挑）—— */
.cd-cond-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--text-3); margin-bottom: 7px;
}
/* 「关于品相识别 ›」入口（2026-10-22）：和标题同一行、右端收口；
   字要小、颜色要弱 —— 它是解释，不该抢"选择品相"的注意力。 */
.cd-cond-help {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0;
  color: var(--text-3); text-decoration: none; white-space: nowrap;
  border-bottom: 1px dashed rgba(255, 255, 255, .18); padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.cd-cond-help:hover { color: var(--gold-ink); border-bottom-color: var(--gold); }
.cd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-chip {
  display: flex; flex-direction: column; gap: 2px; min-width: 86px;
  padding: 7px 10px; text-align: left; cursor: pointer;
  background: var(--ink-3); border: 1px solid var(--ink-4); border-radius: 8px;
  color: var(--text-2); font-size: 12px; transition: .15s;
}
.cd-chip .cd-chip-p { font-size: 12px; font-weight: 800; color: var(--gold-ink); }
.cd-chip:hover { border-color: var(--brand-2); }
.cd-chip.cur { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 224, 0, .25) inset; }
.cd-chip.out { opacity: .5; }
.cd-chip.out .cd-chip-p { color: var(--text-3); }

/* —— 价格：卡普塔斯售价 / 日本行情价 ——
   左侧那格是本站真金白银的成交价（金）；右侧是日本 yuyu-tei 的行情（青）。
   行情 2026-10-16 接入取价源后**不再是「未接入」的占位格**：有价就显价、
   售罄或未上架才回灰（在 cardmodal.js 的 jpBoxHtml 里内联处理）。 */
/* 价格盒在**左栏卡图下面**、两格并排（2026-10-16 用户圈选回到这里）。
   左栏总宽 236~306px，两格各约 140px → 字必须比右栏时收一档，否则会折成三行。 */
.cd-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cd-pbox {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 8px 10px; background: var(--ink-3);
  border: 1px solid var(--ink-4); border-left: 3px solid var(--gold); border-radius: 8px;
}
.cd-pbox.jp { border-left-color: var(--c-cyan); }
.cd-p-t { font-size: 11px; color: var(--text-3); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-p-v { font-size: 18px; font-weight: 900; color: var(--gold-ink); line-height: 1.2; }
/* 行情有值时用青色（与左边金色的卡普售价区分开）；售罄 / 未上架由 jpBoxHtml 内联改回灰 */
.cd-pbox.jp .cd-p-v { color: var(--c-cyan); white-space: nowrap; }
/* 售罄小标：价还在、但买不到 —— 必须比价格本身更显眼，否则会被当成有效报价 */
.cd-p-out {
  font-style: normal; font-size: 10px; font-weight: 700; margin-left: 4px;
  vertical-align: middle; padding: 0 4px; border-radius: 3px;
  color: var(--text-3); border: 1px solid var(--ink-4);
}
/* 2026-10-22 用户：「取消这玩意儿的链接，本站不能导向任何一个网站」——
   日本行情价那一格的 `↗` 出站箭头（.cd-p-lnk）已删，这里两条规则一并清掉，不留死样式。 */
.cd-p-s { font-size: 10.5px; color: var(--text-3); line-height: 1.5; }

/* —— 右栏：规格表 —— */
.cd-spec { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 0 0 16px; }
.cd-spec tr { border-bottom: 1px solid var(--ink-4); }
.cd-spec tr:last-child { border-bottom: 0; }
.cd-spec td { padding: 8px 6px; vertical-align: top; }
.cd-spec .cd-lb { width: 62px; color: var(--text-3); font-size: 12px; white-space: nowrap; }
.cd-spec .cd-k { color: var(--text); }
.cd-spec .cd-k .cls-ico { width: 14px; height: 14px; vertical-align: -2px; }
/* .cd-rarname 已删（2026-10-25 店主："后面文字解释可以删了"）——
   稀有度徽章自己已印 LG/SR闪/主战者，再跟一句中文是同义重复，还挤窄了那一行。 */
.cd-note { color: var(--text-3); font-size: 11.5px; margin-left: 6px; }
.cd-avail { font-weight: 800; }
.cd-avail.ok { color: var(--green, #4CC38A); }
.cd-avail.warn { color: var(--gold-ink); }
.cd-avail.bad { color: var(--danger-text, var(--red)); }
.cd-bad { color: var(--danger-text, var(--red)); }
.cd-link { color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid rgba(255, 224, 0, .35); }
.cd-link:hover { border-bottom-color: var(--gold); }

/* —— 右栏：卡效 / 使用卡组 两个面板 —— */
.cd-panel {
  padding: 12px 14px; margin-bottom: 12px;
  background: var(--ink-3); border: 1px solid var(--ink-4); border-radius: 10px;
}
.cd-h4 {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 9px; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--text);
}
.cd-sub { font-size: 11.5px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.cd-skill { font-size: 12.8px; line-height: 1.85; color: var(--text-2); white-space: pre-wrap; }
.cd-kw { color: var(--gold-ink); font-weight: 800; }   /* 《启动》《费用1》这类能力标记 */

/* ── 关键词「看解释」（2026-10-18）───────────────────────────────────────
   金色加粗 = 认得出这是个字段；**虚线下划线 = 这个词能查**。
   桌面悬停、手机点一下、键盘 Tab 聚焦，都出同一个气泡。
   注意：不是所有《…》都能查 —— 数值标记（《费用1》《攻击力》）和规则表暂未收录的
   联动能力（《UB》《用餐》）保持「只加粗、不可点」，因为查不到条目，
   点开只会是个空气泡。判定在 assets/js/keywords.js 的 lookup()。 */
.cd-kw--q {
  font: inherit; font-weight: 800; color: var(--gold-ink);
  background: none; border: 0; padding: 0; margin: 0;
  white-space: nowrap;                      /* 「进化时」这种词不许在框里折行 */
  cursor: help; border-radius: 3px;
  text-decoration: underline dotted rgba(184,147,46,.55);
  text-underline-offset: 2px;
}
.cd-kw--q:hover { text-decoration-style: solid; }
.cd-kw--q:focus-visible { outline: 2px solid rgba(184,147,46,.65); outline-offset: 2px; }
.cd-kw--q[aria-describedby] { background: rgba(184,147,46,.14); }

/* 气泡：fixed 定位（.cd-bd 会滚，absolute 会被 overflow 裁掉），
   z-index 300 高于单卡弹窗的 140。 */
.kwtip {
  position: fixed; z-index: 300; left: 0; top: 0;
  width: max-content; max-width: 320px;
  padding: 10px 13px 9px;
  /* 🔴 2026-10-26 店主（白色主题截图）：「效果解释框样式也没有改过来」——
     这里原先是 `background:#14130f`（写死的深底）+ 主题 token 的字。
     深色主题下天经地义；**浅色主题下 --text-2 是深灰 #57534A，压上去只有 2.43:1**，
     整段规则说明等于看不见（`--text-3` 也只有 3.45）。
     病根还是那条老规矩：**新颜色必须走 token，写死一颗就会在白主题看不见**。
     所以底与描边改回 `--ink-2 / --ink-4`（浅色=纸白+暖灰线，深色=次黑），
     字继续用 `--text / --text-2 / --text-3 / --gold-ink` —— 两套主题各自成立，
     而且浅色下看起来和站内其它浮层（.cd-sheet / .mynav）是同一族材质。
     浅色主题的阴影单独收轻（见 theme-light.css 的 .kwtip 段）：.62 的黑影压在纸白上像一圈脏。 */
  background: var(--ink-2);
  border: 1px solid rgba(184,147,46,.5); border-radius: 8px;
  box-shadow: var(--shadow-3);
  font-size: 12.5px; line-height: 1.72; color: var(--text-2);
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.kwtip.on { opacity: 1; pointer-events: auto; }
.kwtip-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.kwtip-hd b { color: var(--gold-ink); font-size: 13px; }
.kwtip-ref { color: var(--text-3); font-size: 11.5px; }
.kwtip-bd { margin: 0 0 7px; }
.kwtip-bd b { color: var(--text); }        /* 说明里的重点词跟主文字走，别再抢金色 */
/* 卡面写法与规则页词条名不一致时的对应提示（如 毁灭 → 规则页叫「必杀」） */
.kwtip-note { margin: 0 0 7px; font-size: 11.5px; color: var(--text-3); }
.kwtip-go { display: inline-block; color: var(--gold-ink); font-size: 11.5px; text-decoration: none;
  border-bottom: 1px solid rgba(184,147,46,.35); }
.kwtip-go:hover { border-bottom-color: var(--gold); }
@media (max-width: 520px) { .kwtip { max-width: calc(100vw - 20px); } }
.cd-extra { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ink-4); }
.cd-extra-t { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--text-3); }
.cd-extra-b { font-size: 12.3px; line-height: 1.8; color: var(--text-2); white-space: pre-wrap; }
.cd-loading, .cd-empty { margin: 0; font-size: 12.5px; color: var(--text-3); }

/* —— 日历块里的「迷你月历」（用户 2026-10-16：日历格子只显示日历，缩小点，详情点进去看）——
   7 列周一起始；格子里只有日号 + 事件圆点；有事的格子提亮、今天描金边。 */
.bnav-pv-hd .ym { color: var(--text); font-size: 12.5px; }
.bnav-mc { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; flex: 1 1 auto; }
.bnav-mc-w { text-align: center; font: 600 10.5px/1.6 var(--font-sans, sans-serif); color: var(--text-3); }
.bnav-mc-c {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 0; padding: 3px 0; border-radius: 6px; background: rgba(255, 255, 255, .022);
}
.bnav-mc-c.b { background: transparent; }
.bnav-mc-c > b { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.bnav-mc-c.has { background: rgba(255, 224, 0, .07); }
.bnav-mc-c.has > b { color: var(--text); font-weight: 800; }
.bnav-mc-c.today { box-shadow: 0 0 0 1px var(--gold) inset; }
.bnav-mc-c.today > b { color: var(--gold-ink); }
.bnav-mc-p { display: flex; gap: 2px; }
.bnav-mc-p i { display: block; width: 5px; height: 5px; border-radius: 50%; }

/* —— 卡组块：左字右图（用户 2026-10-16 图3 的版式）——
   左边深色面板依次是「类别小标 / 卡组名 / 名次+职业 / 日期·赛事 / 张数」，
   右边卡图等比铺满右半格（锚上部露脸）；左右之间靠左侧面板右端的渐变过渡，不留硬边。 */
.bnav-split { display: flex; align-items: stretch; border-radius: 10px; overflow: hidden; background: var(--ink-2); }
.bnav-split-l {
  position: relative; flex: 1 1 54%; min-width: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 9px 14px 9px 12px;
  background: linear-gradient(90deg, rgba(var(--ink-2-rgb), .99) 0%, rgba(var(--ink-2-rgb), .95) 62%, rgba(var(--ink-2-rgb), .55) 88%, rgba(var(--ink-2-rgb), 0) 100%);
}
/* 🔴 硬护栏（2026-10-16 用户报「字体都被遮住了」的真因）：
   .bnav-split-l 是 flex 纵列，默认 flex-shrink:1 —— 内容一超高就**把每一行等比压扁**，
   11.5px 的行盒被压到 11px，字形被 overflow:hidden 上下切掉，看起来像「被横切/遮住」。
   这里禁止任何子元素收缩：放不下就整块裁（见 .bnav-meta/.bnav-decks 的 overflow:hidden），
   绝不把文字压成半截。 */
.bnav-split-l > * { flex: 0 0 auto; }
.bnav-split-l .nm {
  font-size: 17px; font-weight: 800; color: #fff; letter-spacing: .01em; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bnav-split-l .bg-row { display: flex; gap: 5px; flex-wrap: nowrap; overflow: hidden; }
.bnav-split-l .mt { font-size: 11.5px; line-height: 1.32; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnav-split-l .mt .mono { color: var(--text-2); margin-right: 5px; }
.bnav-split-l .num { color: var(--gold-ink); font-weight: 700; }
.bnav-split .bnav-chip { position: static; align-self: flex-start; margin-bottom: 2px; }
.bnav-split-r { position: relative; flex: 1 1 46%; min-width: 0; overflow: hidden; background: var(--ink-3); }
.bnav-split-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  display: block; transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.bnav-t:hover .bnav-split-img { transform: scale(1.05); }
/* 🔴 卡图左侧的透明度过渡（2026-10-17 用户圈图：「太突兀，用透明度过渡一下」）
   原来 `.bnav-split-img { inset: 0 }` 是**实心块**，在 54% 处一刀切下去 ——
   上面 `.bnav-split-l` 那条渐变只让**文字面板自己**淡出，露出来的是卡片底色，
   卡图并不会跟着淡 → 交界处仍是一条硬边（原来那句注释「不留硬边」是没兑现的）。
   这里在卡图上压一层同色渐变，让「深色面板 → 卡图」真正连续。
   颜色与 `.bnav-split-l` 同源（都取 --ink-2-rgb），所以不会换一条新的色差线。 */
.bnav-split-r::before {
  content: ''; position: absolute; z-index: 1;
  inset: 0 auto 0 0; width: 54%;
  background: linear-gradient(90deg,
    rgba(var(--ink-2-rgb), 1) 0%,
    rgba(var(--ink-2-rgb), .96) 26%,
    rgba(var(--ink-2-rgb), .74) 56%,
    rgba(var(--ink-2-rgb), .34) 80%,
    rgba(var(--ink-2-rgb), 0) 100%);
  pointer-events: none;
}
/* 空态（还没有投稿）那块是斜线底 + ＋ 号，不要这层渐变去糊它 */
.bnav-split.empty .bnav-split-r::before { display: none; }
.bnav-split-r .plus {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--text-3);
}
.bnav-split.empty .bnav-split-r {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 9px, transparent 9px 18px);
  border-left: 1px dashed var(--ink-4);
}
.bnav-split.empty .bnav-split-l .nm { font-size: 13.5px; color: var(--text-2); font-weight: 700; }

/* —— 官方 Q&A（单卡弹窗里的折叠列表）——
   Q 常驻可见（扫一眼就知道问的是什么），A 点开看 —— 一屏能列好几条。 */
.cd-qa-list { display: grid; gap: 8px; }
.cd-qa { background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: 8px; overflow: hidden; }
.cd-qa > summary {
  /* 2026-10-18：baseline → flex-start。问题文本折成两行时，baseline 对齐会让左侧的
     编号/日期跟着「往下走」；顶部对齐才是稳的，行数怎么变都不动。 */
  display: flex; align-items: flex-start; gap: 8px; flex-wrap: nowrap;
  padding: 9px 11px; cursor: pointer; list-style: none;
}
/* 编号 + 日期 = 一个整体：并排、不换行、不参与伸缩。见 cardmodal.js 里同名注释。 */
.cd-qa-meta {
  display: inline-flex; align-items: baseline; gap: 6px;
  flex: none; white-space: nowrap; padding-top: 1px;
}
.cd-qa > summary::-webkit-details-marker { display: none; }
.cd-qa > summary::after { content: "▾"; flex: none; align-self: flex-start; margin-top: 3px; color: var(--text-3); font-size: 11px; }
.cd-qa[open] > summary::after { content: "▴"; }
.cd-qa > summary .n { flex: none; color: var(--gold-ink); font-size: 11.5px; font-weight: 700; }
.cd-qa > summary .d { flex: none; color: var(--text-3); font-size: 11px; }
.cd-qa > summary .q {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cd-qa[open] > summary { border-bottom: 1px dashed var(--ink-4); }
.cd-qa[open] > summary .q { display: block; -webkit-line-clamp: unset; color: var(--text); }
.cd-qa-a {
  display: flex; gap: 8px; padding: 10px 11px;
  font-size: 12.5px; line-height: 1.85; color: var(--text-2);
}
.cd-qa-a .a { flex: none; color: var(--gold-ink); font-weight: 700; }

/* —— 关系网（同名卡 / 进化 / 衍生物 / 关联卡）——
   缩略卡本体复用旧详情页的 .ref-card（SVE.refCard 渲染），这里只管分组与网格。 */
.cd-rel-g { margin-bottom: 12px; }
.cd-rel-g:last-child { margin-bottom: 0; }
.cd-rel-hd {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 8px;
}
/* 关掉 .ref-grid 的 104px 太小值会**把卡名挤成竖排**（真机截图实测）——
   右栏约 670px，104px → 6 列；卡名 9 个字在 ~100px 里刚好一行。 */
.cd-rel-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.cd-rel-grid .ref-card { border-radius: 8px; }
.cd-rel-grid .ref-no { font-size: 10px; }

.cd-ugroup { margin-bottom: 10px; }
.cd-ughd { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 6px; letter-spacing: .05em; }
.cd-urow {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border-radius: 8px; text-decoration: none; color: inherit;
  border: 1px solid transparent; transition: .15s;
}
.cd-urow:hover { background: var(--ink-2); border-color: var(--ink-4); }
.cd-uth { flex: none; width: 38px; height: 38px; border-radius: 6px; overflow: hidden; background: var(--ink-2); }
.cd-uth img { width: 100%; height: 100%; object-fit: cover; }
.cd-ui { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.cd-ui b { font-size: 12.8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-ui span { font-size: 11.5px; color: var(--text-3); }
.cd-ubadge {
  flex: none; padding: 2px 7px; border-radius: 999px; font-size: 11px;
  background: var(--ink-2); border: 1px solid var(--ink-4); color: var(--text-3);
}
.cd-ubadge.gold { color: var(--gold-ink); border-color: rgba(255, 224, 0, .35); }
.cd-un { flex: none; font-size: 12.5px; font-weight: 800; color: var(--gold-ink); }
.cd-ug { flex: none; font-size: 11.5px; color: var(--text-3); }
.cd-urow:hover .cd-ug { color: var(--gold-ink); }
/* .cd-tip（「这张表的真正用法：携带率…」那块黄底提示）已于 2026-10-16 随
   用户圈图一起删除 —— 解释性文字一律不留（他的口径是「最纯粹的客户端」）。 */

/* —— 脚：回卡组 / 在库 / 位置 + 收藏 / 加购 —— */
.cd-ft {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--ink-4); flex: none;
  background: var(--ink-2);
}
.cd-ft-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); }
.cd-ft-r { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cd-backdeck {
  padding: 5px 10px; font-size: 12px; color: var(--text-2); cursor: pointer;
  background: transparent; border: 1px solid var(--ink-4); border-radius: 6px; transition: .15s;
}
.cd-backdeck:hover { color: var(--on-accent); background: var(--gold); border-color: var(--gold); }
.cd-indeck b, .cd-stock b, .cd-pos { color: var(--gold-ink); font-weight: 800; }
.cd-hint { color: var(--text-3); }

/* —— 左右翻卡（稿子 §2.2 交互层「弹窗可连续翻卡」）——
   键盘 ← → 是主通路，这两个按钮是给只用鼠标的人的显式入口。 */
.cd-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: rgba(20, 20, 20, .72); border: 1px solid rgba(184, 147, 46, .5); border-radius: 3px;
  transition: background .2s ease, border-color .2s ease;
}
.cd-nav::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px;
  background: var(--gold); clip-path: polygon(0 0, 0 100%, 100% 50%);
}
/* 2026-10-16 用户圈选：「这两个箭头不能在窗口里面」—— 原来贴在 .cd-sheet 里、压在卡图上。
   现在它们挂在遮罩上（弹窗外面）：宽屏站在弹窗两侧的留白里；
   窗口快占满宽度、两侧放不下时，整体挪到弹窗**下方**的留白（仍然是窗外）。 */
.cd-prev { left: max(10px, calc(50% - min(1040px, 96vw) / 2 - 54px)); }
.cd-prev::before { transform: rotate(180deg); }
.cd-next { right: max(10px, calc(50% - min(1040px, 96vw) / 2 - 54px)); }
@media (max-width: 1240px) {
  .cd-nav { top: auto; bottom: 10px; transform: none; }
  .cd-prev { left: 22px; }
  .cd-next { right: 22px; }
  .cd-sheet { max-height: 84vh; }
}
.cd-nav:hover { background: var(--gold); border-color: var(--gold); }
.cd-nav:hover::before { background: var(--ink); }
.cd-nav:focus-visible, .cd-x:focus-visible, .cd-art:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* —— 响应式：一栏（图在上、信息在下），箭头挪到头部一行 —— */
@media (max-width: 820px) {
  .cd-mask { padding: 10px; }
  .cd-sheet { max-height: 94vh; width: 100%; }
  .cd-bd { grid-template-columns: 1fr; gap: 16px; padding: 14px 14px 16px; }
  /* 手机上把卡图收到 270px：420px 的卡图会占掉首屏，
     价格与品相被顶到折叠线以下 —— 顾客第一个要看的恰恰是价格。 */
  .cd-left { max-width: 270px; margin: 0 auto; width: 100%; }
  .cd-hd { padding: 14px 52px 12px 14px; }
  .cd-name { font-size: 18px; }
  .cd-sheet.is-zoom .cd-left { width: min(100%, 380px); }
  .cd-ft { padding: 10px 14px; gap: 8px; }
  .cd-ft-r { margin-left: 0; width: 100%; }
  .cd-ft-r .btn { flex: 1; }
  .cd-prices { grid-template-columns: 1fr; }
  .cd-nav { width: 34px; height: 34px; }
}

/* —— 破图占位（配套 store.js 的 installImgFallback）——
   img 加载失败时被藏掉、容器打上 data-noimg，这里补一个不刺眼的占位，避免「碎裂图标」。 */
[data-noimg="1"] { position: relative; }
[data-noimg="1"]::after {
  content: "暂无卡图";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 400 11px/1 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--text-3); background: var(--ink-3); border-radius: inherit;
}


/* 弹窗头部右侧动作区（2026-10-23）：下载按钮 + 关闭。
   原来这里只有个 ✕，标题下面还挂着一行技术参数；现在参数删了、按钮上来了，
   头部就该是"标题 ← → 主按钮 · 关闭"这一条。 */
.dc-hd-act {
  display: flex; align-items: center; gap: 10px; flex: none;
}
.dc-hd-act .btn { padding: 7px 16px; font-size: 13px; }