/* ══ 卡纸配色（2026-11-03 定稿：浅色）════════════════════════════════
 *
 * 取色逻辑：卡背的暗红金边，落在卡纸米底上 = 一叠实体卡。
 *   底色   --bg / --surface      → 卡纸米 / 卡面白（不是纯白，纯白会让金边显脏）
 *   主色   --brand               → 卡背暗红，只在「涨 / 冠军 / 强调」出现
 *   点缀   --gold                → 卡名栏烫金，用于激活态与分隔线
 *   字色   --ink                 → 暖黑（不用纯黑，纯黑压在米底上偏硬）
 *
 * ⚠️ 全站颜色一律走变量。之前散落的 #FCFBF7 / #FDFAF3 这类浅色硬编码
 *    已全部换成 --raise / --gold-bg 等语义变量；新增样式请继续用变量。
 *
 * 语义说明（新加变量时按这个命名走）：
 *   --surface 卡片面板 · --raise 面板内深一层(内嵌/hover) · --raise2 再深一层(槽/骨架)
 *   --line 主分隔 · --line2 更淡(行分隔) · --line3 hover 边框
 *   --gold-bg 金色淡底 · --gold-bg2 金色淡底加深 · --gold-line 金色描边
 *   --ok-bg/--ok-line 通过态 · --danger-bg/--danger-line 危险态
 */
:root {
  --bg: #F4F1E8;
  --bg2: #EAE5D8;

  --surface: #FFFDF8;
  --raise: #FAF6EC;
  --raise2: #F1EADA;

  --ink: #241F1A;
  --ink2: #5E564B;
  --ink3: #8D8478;

  --line: #E1D8C6;
  --line2: #EDE6D6;
  --line3: #D2C7AF;

  --brand: #A8322B;
  --brand-soft: #FBF0EE;
  --brand-line: #F0D9D5;

  --gold: #B08A3E;
  --gold-ink: #7A5A16;
  --gold-bg: #FBF3DE;
  --gold-bg2: #F5E8C8;
  --gold-line: #E3D2A6;

  --ok-bg: #EFF6F2;
  --ok-line: #D3E6DB;
  --danger-bg: #FDF1F0;
  --danger-line: #F0DEDA;

  --art-bg: #F0EEE7;

  --up: #C0392B;
  --down: #2C7A55;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.app { display: flex; min-height: 100vh; }

/* ── 侧栏 ───────────────────────────────── */
.sidebar {
  width: 236px;
  flex: 0 0 236px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 20px 14px 32px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand { padding: 0 8px 18px; border-bottom: 1px solid var(--line2); margin-bottom: 16px; }
.brand-mark { display: flex; align-items: center; gap: 9px; }
.brand-sq {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; letter-spacing: -0.5px;
}
.brand-name { font-size: 15px; font-weight: 500; letter-spacing: 0.2px; }
.brand-sub { font-size: 11px; color: var(--ink3); margin-top: 6px; padding-left: 2px; }

/* 分组折叠（2026-11-05）：21 个入口平铺要滚两屏，现在默认只展开当前页那组。
   组标题本身就是按钮，右边一个小三角表示展开状态。 */
.nav-group { margin-bottom: 4px; }
.nav-label {
  width: 100%; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border: none; border-radius: 7px; background: none;
  font-family: inherit; font-size: 11.5px; letter-spacing: 0.5px;
  color: var(--ink3); text-align: left; cursor: pointer;
}
.nav-label:hover { background: var(--line2); color: var(--ink2); }
.nav-group.has-active .nav-label { color: var(--brand); }
.nav-care {
  margin-left: auto; width: 0; height: 0; opacity: .55;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform .15s ease;
}
.nav-group.open .nav-care { transform: rotate(90deg); }
.nav-items { display: none; }
.nav-group.open .nav-items { display: block; padding-bottom: 4px; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 16px; border-radius: 7px;
  color: var(--ink2); cursor: pointer;
  font-size: 13px;
}
.nav-item::before {
  content: ""; position: absolute; left: 7px; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--line3); transform: translateY(-50%);
}
.nav-item:hover { background: var(--line2); color: var(--ink); }
.nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 500; }
.nav-item.active::before { background: var(--brand); }
.nav-tail { margin-left: auto; font-size: 10.5px; color: var(--ink3); }
.nav-item.active .nav-tail { color: var(--brand); opacity: 0.7; }

.side-foot {
  margin-top: 18px; padding: 10px 8px 0;
  border-top: 1px dashed var(--line); border-radius: 8px;
  font-size: 11.5px; color: var(--ink3); line-height: 1.7;
}
.side-foot b { color: var(--ink2); font-weight: 500; }
/* 决斗盘只是装饰，别让它把导航顶到屏幕外 —— 高度按侧栏宽度自适应并封顶 */
.side-foot .side-disk { display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto; }

/* ── 主区 ───────────────────────────────── */
.main { flex: 1; min-width: 0; }

.topbar {
  height: 58px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 32px;
  background: rgba(245, 245, 242, 0.92);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 15px; font-weight: 500; margin: 0; }
.top-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink3); }
/* 顶栏徽标只在后端异常时出现；正常情况下这个容器是空的，别让它占位 */
.top-meta:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink2);
}
.chip.brand { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.chip .live { width: 5px; height: 5px; border-radius: 50%; background: var(--down); }

.view { padding: 26px 32px 60px; max-width: 1180px; }

.mobile-nav { display: none; }

/* 手机端导航（2026-11-05 改版）：不再是一整排要横向滑的 chip，
   而是一个「当前版块」按钮 + 一张按组排开的面板。 */
.mnav-sheet {
  position: fixed; inset: 0; z-index: 120; display: none;
  background: rgba(27, 27, 31, .35);
}
.mnav-sheet.on { display: flex; align-items: flex-end; }
.mnav-panel {
  width: 100%; max-height: 84vh; overflow-y: auto;
  background: var(--surface); border-radius: 14px 14px 0 0;
  padding: 12px 14px 24px;
  box-shadow: 0 -10px 34px rgba(27, 27, 31, .22);
}
.mnav-head { display: flex; align-items: center; margin-bottom: 6px; }
.mnav-head b { font-size: 13px; }
.mnav-x {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink3); padding: 0 4px;
}
.mnav-g { padding: 9px 0; border-top: 1px solid var(--line2); }
.mnav-g:first-of-type { border-top: none; }
.mnav-gl { font-size: 11px; color: var(--ink3); margin-bottom: 7px; letter-spacing: .4px; }
.mnav-items { display: flex; flex-wrap: wrap; gap: 6px; }
.mnav-it {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink2);
}
.mnav-it.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.mnav-it i { font-style: normal; font-size: 10px; opacity: .7; }
body.mnav-lock { overflow: hidden; }

@media (max-width: 760px) {
  .mobile-nav {
    display: block;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  .mnav-now {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    font-family: inherit; font-size: 13px; text-align: left;
  }
  .mnav-cur { font-weight: 500; }
  .mnav-grp { margin-left: auto; font-size: 11px; color: var(--ink3); }
  .mnav-care {
    width: 0; height: 0; margin-left: 2px;
    border-top: 5px solid var(--ink3);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }
}

/* ── 通用块 ─────────────────────────────── */
.grid { display: grid; gap: 14px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g2 { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
.g13 { grid-template-columns: 300px 1fr; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  min-width: 0;
}
.card.tight { padding: 14px 16px; }

.tbl { overflow-x: auto; }

.card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.card-title { font-size: 13.5px; font-weight: 500; }
.card-note { font-size: 11.5px; color: var(--ink3); margin-left: auto; }

.kpi-label { font-size: 12px; color: var(--ink3); }
.kpi-value { font-size: 26px; font-weight: 500; letter-spacing: -0.5px; margin-top: 4px; }
.kpi-value small { font-size: 12px; color: var(--ink3); font-weight: 400; margin-left: 3px; }
.kpi-delta { font-size: 11.5px; margin-top: 5px; }
.up { color: var(--up); }
.down { color: var(--down); }

/* ── 卡组分布饼图（2026-11-03 换掉 conic-gradient 甜甜圈）──────
   SVG 由 app.js 的 deckPieHTML() 手画：每块贴代表卡卡图，标签在圆外。
   旧的 .donut / .legend-row 留着没删，但页面已经不用了 —— 别再往回去。 */
.pie-wrap { overflow-x: auto; }
.pie-svg { display: block; width: 100%; height: auto; min-width: 460px; }
.pie-slice { cursor: pointer; transition: opacity .15s; }
.pie-slice.off { opacity: .25; }
.pie-slice:hover { opacity: .88; }
.pie-lab { cursor: pointer; }
.pie-lab.off { opacity: .3; }
.pie-lab:hover text:first-of-type { fill: var(--brand); }
.pie-lab text { font-family: inherit; }

/* ── 环形图（旧版，页面已不用）──────────── */
.donut-wrap { display: flex; align-items: center; gap: 22px; }
.donut {
  width: 168px; height: 168px; border-radius: 50%;
  flex: 0 0 168px; position: relative;
}
.donut::after {
  content: ""; position: absolute; inset: 34px;
  background: var(--surface); border-radius: 50%;
}
.donut-center {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-center b { font-size: 21px; font-weight: 500; line-height: 1.2; }
.donut-center span { font-size: 11px; color: var(--ink3); }

.legend { flex: 1; min-width: 0; }
.legend-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; cursor: pointer; border-radius: 5px;
}
.legend-row:hover { background: var(--line2); }
.legend-row.off { opacity: 0.35; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.legend-name { font-size: 13px; width: 62px; flex: 0 0 62px; }
.legend-bar { flex: 1; height: 5px; background: var(--line2); border-radius: 3px; overflow: hidden; }
.legend-bar i { display: block; height: 100%; border-radius: 3px; }
.legend-pct { font-size: 12px; color: var(--ink2); width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── 表格 ───────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11.5px; font-weight: 400; color: var(--ink3);
  padding: 0 10px 8px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 9px 10px; border-bottom: 1px solid var(--line2); font-size: 13px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--raise); }
.rank { color: var(--ink3); font-variant-numeric: tabular-nums; width: 40px; }
.rank.top { color: var(--brand); font-weight: 500; }
.tag {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  font-size: 11px; background: var(--line2); color: var(--ink2); margin-right: 4px;
  white-space: nowrap;
}
.mono { font-variant-numeric: tabular-nums; }

/* ── 搜索 ───────────────────────────────── */
.search-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.search-box {
  flex: 1; min-width: 240px; position: relative;
}
.search-box input {
  width: 100%; padding: 10px 14px; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); outline: none;
  font-family: inherit;
}
.search-box input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(168, 50, 43, 0.08); }
.quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.quick .chip { cursor: pointer; }
.quick .chip:hover { border-color: var(--ink3); color: var(--ink); }

/* ── 卡查筛选栏（2026-11-05）───────────────
   折叠状态只占一行：左边「筛选 + 数量」，中间已选条件，右边清空。
   展开后是一张表格式的面板（行 = 一个维度）。窄屏把标签移到控件上方。 */
.cf {
  margin-bottom: 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.cf-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
.cf-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink2); font-size: 12.5px; font-family: inherit;
}
.cf-toggle svg { width: 13px; height: 13px; }
.cf-toggle:hover { color: var(--ink); border-color: var(--ink3); }
.cf-toggle.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.cf-toggle em {
  font-style: normal; font-size: 10.5px; line-height: 15px; min-width: 15px;
  padding: 0 4px; border-radius: 999px; background: var(--brand); color: #fff;
  text-align: center;
}
.cf-toggle em:empty { display: none; }
.cf-sel-list { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.cf-sel-none { font-size: 11.5px; color: var(--ink3); }
.cf-sel-item {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-sel-item i { font-style: normal; opacity: .55; }
.cf-sel-item:hover i { opacity: 1; }
.cf-reset {
  margin-left: auto; font-size: 11.5px; color: var(--ink3);
  background: none; border: none; cursor: pointer; padding: 4px 6px; font-family: inherit;
}
.cf-reset:hover { color: var(--brand); }
.cf-body {
  border-top: 1px solid var(--line2); padding: 10px 12px 12px;
  display: grid; gap: 7px;
}
.cf-body[hidden] { display: none; }
.cf-row { display: flex; align-items: flex-start; gap: 10px; }
.cf-lab { flex: 0 0 56px; text-align: right; padding-top: 5px; font-size: 11.5px; color: var(--ink3); }
/* 「多选＝任一」小字：多选组旁边标一句，不然用户会以为是「同时满足」 */
.cf-lab .cf-multi { display: block; font-size: 10px; color: var(--ink4, #9aa0aa); letter-spacing: -.2px; }
.cf-ctl { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cf-chips { gap: 5px; }
.cf-in, .cf-sel, .cf-num {
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
  color: var(--ink); font-size: 12.5px; padding: 5px 9px; font-family: inherit; outline: none;
}
.cf-in:focus, .cf-num:focus, .cf-sel:focus { border-color: var(--brand); }
.cf-in { flex: 1 1 260px; max-width: 460px; }
.cf-num { width: 74px; }
.cf-sel { min-width: 116px; }
.cf-chip {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  font-size: 11.5px; line-height: 1.7; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink2);
  font-family: inherit;
}
.cf-chip:hover { border-color: var(--gold-line); color: var(--ink); }
.cf-chip.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.cf-chip.zero { opacity: .45; }
.cf-chip sup { font-size: 9.5px; color: var(--ink3); font-weight: 400; }
.cf-chip.on sup { color: var(--brand); opacity: .75; }
.cf-dash { color: var(--ink3); font-size: 11px; }
.cf-hint { font-size: 11px; color: var(--ink3); }
.cf-lv-range { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.cf-pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0 2px; }
.cf-pager:empty { display: none; }
.cf-pg {
  font-size: 12px; padding: 3px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink2); font-family: inherit;
}
.cf-pg:hover:not(:disabled) { border-color: var(--ink3); color: var(--ink); }
.cf-pg:disabled { opacity: .4; cursor: default; }
.cf-pg-n { font-size: 11.5px; color: var(--ink3); }

/* ── 卡详情 ─────────────────────────────── */
/* 左侧结果列表可能很长，详情卡片不该被拉成同样的高度 */
#card-panel { align-self: start; }
.card-detail { display: grid; grid-template-columns: 250px 1fr; gap: 24px; }
.card-art {
  aspect-ratio: 59 / 86; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--art-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--ink3); font-size: 11.5px;
  position: relative; overflow: hidden;
  align-self: start;
}
.card-art::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px dashed var(--line3); border-radius: 5px;
  pointer-events: none;
}
.card-art .art-name { font-size: 15px; color: var(--ink2); font-weight: 500; }
.card-art .art-hint { font-size: 10.5px; }

/* 卡图：图片绝对定位盖在占位框上，加载成功才显示（has-img）。
   失败时留在占位框里显示「暂无卡图」，不给用户看浏览器的破图图标。 */
.card-art { display: block; padding: 0; }
.card-art .art-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 12px; text-align: center;
}
.card-art .art-img {
  display: none; position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  background: var(--art-bg);
}
.card-art.has-img .art-img { display: block; }
.card-art.has-img .art-fallback { display: none; }
.card-art.art-miss { border-style: dashed; }

/* ── 相关卡片 ───────────────────────────── */
.rel-group { margin-top: 10px; }
.rel-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px;
}
.rel-title { font-size: 12px; font-weight: 500; color: var(--ink2); }
.rel-count { font-size: 10.5px; color: var(--ink3); }
.rel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rel-chip {
  font-family: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 7px; padding: 5px 10px; line-height: 1.35;
  transition: border-color .12s, background .12s, transform .12s;
}
.rel-chip:hover {
  border-color: var(--gold); background: var(--raise); transform: translateY(-1px);
}
.rel-chip b {
  display: block; font-size: 12.5px; font-weight: 500; color: var(--ink);
  max-width: 156px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rel-chip em { font-style: normal; font-size: 10.5px; color: var(--ink3); }
.rel-chip s {
  text-decoration: none; margin-left: 5px; color: var(--ink3);
  opacity: .55; font-size: 10px;
}
.rel-chip:hover s { opacity: 1; }

/* ── 调整信息（官方补充说明）──────────────
   按钮放在卡名右侧，点开是**右侧抽屉**：调整属于「顺手看一眼」的信息，
   跳到新页面再回来会丢掉搜索结果和滚动位置。 */
.name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ruling-btn {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12px; color: var(--ink2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 11px; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.ruling-btn:hover { border-color: var(--gold); background: var(--raise); color: var(--ink); }
.ruling-btn em {
  font-style: normal; font-size: 11px; color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.ruling-btn.has-data { border-color: var(--gold-line); }
.ruling-btn.has-zh em { color: var(--gold); }
.ruling-btn.dim { color: var(--ink3); }
.ruling-btn.dim:hover { border-color: var(--line); background: var(--surface); color: var(--ink3); }

body.drawer-open { overflow: hidden; }
.drawer-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(30, 26, 18, .26);
  opacity: 0; transition: opacity .2s ease;
}
.drawer-mask.on { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(520px, 94vw);
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -10px 0 30px rgba(30, 26, 18, .10);
  display: flex; flex-direction: column;
  transform: translateX(101%);
  transition: transform .22s cubic-bezier(.32, .72, .3, 1);
}
.drawer.on { transform: none; }

.dr-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line2);
}
.dr-title { font-size: 14px; font-weight: 500; }
.dr-sub { font-size: 11.5px; color: var(--ink3); margin-top: 3px; }
.dr-x {
  margin-left: auto; flex: none; width: 26px; height: 26px;
  border: 1px solid var(--line); background: var(--surface); border-radius: 6px;
  color: var(--ink3); font-size: 12px; line-height: 1; cursor: pointer;
  font-family: inherit;
}
.dr-x:hover { border-color: var(--ink3); color: var(--ink); }

.dr-scroll {
  flex: 1; overflow-y: auto; padding: 0 20px;
  /* 内容短时把页脚顶到底部，否则脚注会孤零零挂在正文下面 */
  display: flex; flex-direction: column;
}
.dr-scroll::-webkit-scrollbar { width: 6px; }
.dr-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.dr-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 26px 0; font-size: 12.5px; color: var(--ink3);
}

.dr-tools {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0; border-bottom: 1px dashed var(--line2);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.dr-count { font-size: 11.5px; color: var(--ink3); margin-right: auto; }
.dr-tool {
  font-family: inherit; font-size: 11.5px; color: var(--ink2);
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 6px; padding: 3px 9px; cursor: pointer;
}
.dr-tool:hover { border-color: var(--gold); color: var(--ink); }
.dr-tool.on { border-color: var(--gold); background: var(--raise); color: var(--ink); }
.dr-tool.brand { border-color: var(--gold-line); background: var(--brand-soft); color: var(--brand); }
.dr-tool[disabled] { opacity: .6; cursor: default; }
.dr-tool.err { border-color: var(--danger-line); background: var(--danger-bg); color: var(--up); }

.dr-body { padding: 2px 0 0; }
.rl-item { display: flex; gap: 10px; padding: 13px 0; border-bottom: 1px dashed var(--line2); }
.rl-item:last-child { border-bottom: none; }
.rl-idx {
  flex: none; width: 20px; height: 20px; border-radius: 5px;
  background: var(--line2); color: var(--ink3);
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.rl-text {
  flex: 1; min-width: 0;
  font-size: 13px; line-height: 1.95; color: var(--ink2);
  white-space: pre-line; word-break: break-word;
}
.rl-zh { color: var(--ink); }
/* 日文原文默认收起（有中文时）；没中文时整篇就是日文，直接显示 */
.rl-ja { display: none; margin-top: 7px; font-size: 12px; color: var(--ink3); }
.dr-body.ja-only .rl-ja { display: block; margin-top: 0; font-size: 13px; color: var(--ink2); }
.dr-body.show-ja .rl-ja { display: block; }

.dr-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding: 12px 0;
  border-top: 1px solid var(--line2);
  font-size: 11px; color: var(--ink3);
}
.dr-foot a { color: var(--brand); }
.dr-foot span { margin-left: auto; }

.dr-empty { padding: 28px 0; text-align: center; }
.dr-empty b { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.dr-empty p {
  font-size: 12px; color: var(--ink3); line-height: 1.85;
  max-width: 320px; margin: 0 auto 14px;
}
.dr-link { font-size: 12px; color: var(--brand); }

/* 出场分析抽屉（使用量 + 搭配）
   2026-11-06 起抽屉里同时有线上 / 线下两段，`.us-env` 就是「一段」的容器，
   `.us-env-h em` 是标题后面的口径徽标（「按场次加权」「OCG 2026年10月表」）。 */
.us-env { padding: 14px 0; border-bottom: 1px dashed var(--line2); }
.us-env:last-child { border-bottom: none; }
.us-env-h { font-size: 13px; font-weight: 500; margin-bottom: 10px; }
.us-env-h em {
  font-style: normal; font-size: 11px; font-weight: 400;
  color: var(--ink3); margin-left: 6px;
}
.us-stat { display: flex; gap: 18px; margin-bottom: 12px; flex-wrap: wrap; }
.us-stat div { display: flex; flex-direction: column; }
.us-stat b { font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 600; }
.us-stat span { font-size: 11px; color: var(--ink3); margin-top: 2px; }
.us-sub { font-size: 12px; color: var(--ink3); margin-bottom: 8px; }
.us-co { display: flex; flex-wrap: wrap; gap: 7px; }
.us-dim { font-size: 12px; color: var(--ink3); }

/* 卡组库 · 热门单卡 */
.hot-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 16px; margin-bottom: 14px; }
.hot-head { font-size: 13px; font-weight: 500; margin-bottom: 10px; }
.hot-head em { font-style: normal; font-size: 11px; color: var(--ink3); margin-left: 8px; font-weight: 400; }
.hot-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.hot-empty { font-size: 12px; color: var(--ink3); padding: 4px 0; }

/* ── 抓取中 ─────────────────────────────── */
.tc-pending {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 16px; border: 1px dashed var(--line); border-radius: 8px;
  background: var(--raise);
}
.tc-pending b {
  display: block; font-size: 12.5px; font-weight: 500; color: var(--ink2);
}
.tc-pending em { font-style: normal; font-size: 11px; color: var(--ink3); }
.tc-spin {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--gold);
  animation: tcspin .8s linear infinite;
}
@keyframes tcspin { to { transform: rotate(360deg); } }

.card-name { font-size: 22px; font-weight: 500; letter-spacing: -0.3px; margin: 0; }
.card-alias { font-size: 12px; color: var(--ink3); margin-top: 4px; }
.attr-line { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.spec {
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; margin: 14px 0;
  /* 灵摆多一格「刻度」会变成 5 格，固定 4 列会把最后一件挤到第二行孤零零躺一个。
     auto-fit 让格子数跟着内容走，四格五格都齐整。 */
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
}
.spec div { background: var(--surface); padding: 9px 11px; }
.spec span { display: block; font-size: 11px; color: var(--ink3); }
.spec b { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* 连接标记（↙↓ 这类箭头），不是数字，用符号字体保证不打折 */
.spec b .arrows { font-size: 15px; letter-spacing: 2px; color: var(--ink2); }
.effect {
  font-size: 13px; line-height: 1.85; color: var(--ink2);
  background: var(--raise); border: 1px solid var(--line2);
  border-left: 2px solid var(--gold);
  border-radius: 0 8px 8px 0; padding: 13px 15px; white-space: pre-line;
}

.price-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.price-cell { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.price-cell span { font-size: 11px; color: var(--ink3); display: block; }
.price-cell b { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.price-cell.hi { border-color: var(--gold-line); background: var(--raise); }

.spark { width: 100%; height: 92px; display: block; }

/* 价格走势图（集换社日线）
   SVG 手画，不引图表库；viewBox 宽度按容器实际像素算，
   配合 preserveAspectRatio="none" 时才是 1:1，圆点不会变椭圆。 */
.tc { position: relative; margin-top: 6px; }
.tc-svg { width: 100%; height: 200px; display: block; cursor: crosshair; }

.tc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 8px; }
.tc-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: 12px; color: var(--ink2);
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.tc-tab:hover { border-color: var(--line3); }
.tc-tab.on { border-color: var(--gold); background: var(--raise); color: var(--ink); }
.tc-rar { font-weight: 500; }
/* 版本按钮上的「当前集换价」——整块里最该被一眼看到的东西，给足字重和对齐 */
.tc-now {
  font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
  padding: 0 6px; border-left: 1px solid var(--line2); border-right: 1px solid var(--line2);
}
.tc-tab.on .tc-now { color: var(--brand); }
.tc-pct { font-size: 11px; font-variant-numeric: tabular-nums; }
.tc-pct.up { color: var(--up); }
.tc-pct.down { color: var(--down); }

.tc-cap {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11.5px; color: var(--ink3); margin: 14px 0 -4px;
}
.tc-cap span { color: var(--ink2); font-weight: 500; }
.tc-cap em { font-style: normal; font-size: 11px; }

.tc-foot {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11px; color: var(--ink3); margin-top: 4px;
}
.tc-foot span:last-child { margin-left: auto; }

/* 悬停浮层：`position: fixed` + JS 视口夹取。
   用绝对定位跟着容器走时，图表在页面下半部分 → 浮层被推到折叠线以下，
   用户只看到「鼠标移上去没反应」（2026-11-05 报的就是这个）。
   ⚠️ 行样式叫 `.tc-trow` 而不是 `.tc-row`：`.tc-row` 已经被赛事日历占用了，
   后定义的那条会悄悄改掉浮层的 padding / 边框。 */
.tc-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 9px;
  /* 宽度跟着最宽那行走，否则加粗的当前行会把价格挤出队列、和下面几行对不齐 */
  width: max-content; min-width: 128px; max-width: 240px;
  box-shadow: 0 6px 20px rgba(30, 26, 18, .16);
  font-size: 11.5px; line-height: 1.55;
}
.tc-tip b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 3px; }
.tc-trow { display: flex; justify-content: space-between; gap: 14px; color: var(--ink3); white-space: nowrap; }
.tc-trow.on { color: var(--ink); font-weight: 600; }
.tc-trow.more { color: var(--ink3); opacity: .75; font-size: 11px; }
.tc-trow i { font-style: normal; }
.tc-trow em { font-style: normal; font-variant-numeric: tabular-nums; margin-left: auto; }

/* 顶栏状态点：绿=已连后端，黄=后端在但数据没读到，灰=未连（演示数据） */
.chip .live.on { background: var(--down); }
.chip .live.warn { background: #C08A2E; }
.chip .live.off { background: #B4B2A9; }

/* 版本价格分布：每个有报价的版本一个点，横轴对数 */
.ps { margin-top: 12px; }
.ps-track {
  position: relative; height: 30px;
  margin: 0 7px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to right, var(--line2), var(--surface));
  border-radius: 3px 3px 0 0;
}
.ps-dot {
  position: absolute; bottom: -4px; width: 7px; height: 7px;
  margin-left: -3.5px; border-radius: 50%;
  background: var(--gold);
  border: 1.5px solid var(--surface);
  cursor: default;
  transition: transform .12s ease;
}
.ps-dot:hover { transform: scale(1.7); }
.ps-axis {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink3); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.ps-note { font-size: 11px; color: var(--ink3); margin-top: 3px; }
.ps-none {
  font-size: 12px; color: var(--ink3); padding: 16px 0; margin-top: 10px;
  border: 1px dashed var(--line); border-radius: 8px; text-align: center;
}

/* 加载骨架 */
@keyframes sk-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sk-row, .sk-line, .sk-art {
  background: linear-gradient(90deg, var(--line2) 25%, var(--raise2) 50%, var(--line2) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s ease-in-out infinite;
}
.sk-row { height: 34px; border-radius: 7px; margin-bottom: 3px; }
.sk-line { height: 13px; border-radius: 4px; }
.sk-panel { display: grid; grid-template-columns: 250px 1fr; gap: 24px; }
.sk-art { aspect-ratio: 59 / 86; border-radius: 8px; align-self: start; }
.sk-body { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .sk-row, .sk-line, .sk-art { animation: none; }
}

/* ── 教学 ───────────────────────────────── */
.lesson-list { display: flex; flex-direction: column; gap: 3px; }
/* 卡查结果列表：最多 24 条，不限高会把详情面板顶到很下面（手机上要滑很久） */
#card-list {
  max-height: calc(100vh - 330px);
  overflow-y: auto;
  padding-right: 2px;
}
#card-list::-webkit-scrollbar { width: 6px; }
#card-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
#card-list::-webkit-scrollbar-track { background: transparent; }
.lesson-item {
  padding: 9px 11px; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; font-size: 13.5px;
}
.lesson-item:hover { background: var(--line2); }
.lesson-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 500; }
.lesson-item .fmt { margin-left: auto; font-size: 10.5px; color: var(--ink3); }

/* 人工补充教学（2026-11-05）：管理员在网页上写，要口令。
   表单插在左栏列表下面，不弹窗 —— 右边是长文，弹窗会把它挡住。 */
.lesson-add-wrap {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lesson-add-wrap .chip { cursor: pointer; }
.lesson-add-hint { font-size: 10.5px; color: var(--ink3); }
.lesson-add {
  margin-top: 10px; padding: 10px; border-radius: 9px;
  border: 1px dashed var(--gold); background: var(--raise2);
  display: flex; flex-direction: column; gap: 8px;
}
.lesson-add-row { display: flex; align-items: center; gap: 8px; }
.lesson-add-row.col { align-items: flex-start; }
.lesson-add-row > label {
  flex: 0 0 46px; font-size: 11.5px; color: var(--ink2);
}
.lesson-add-row.col > label { padding-top: 6px; }
.lesson-add-row input, .lesson-add-row select, .lesson-add-row textarea {
  flex: 1; min-width: 0; font-size: 12.5px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--ink); font-family: inherit;
}
.lesson-add-row textarea { resize: vertical; line-height: 1.6; }
.lesson-add-err { font-size: 11.5px; color: var(--rose, #c0392b); min-height: 0; }
.lesson-add .mdt-actions { margin-top: 2px; }

.lesson-sec { margin-top: 22px; }
.lesson-sec h3 {
  font-size: 13px; font-weight: 500; margin: 0 0 10px;
  display: flex; align-items: center; gap: 7px;
}
.lesson-sec h3::before {
  content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--brand);
}
.lesson-sec.warn h3::before { background: var(--gold); }
.lesson-sec ol { margin: 0; padding-left: 0; list-style: none; counter-reset: li; }
.lesson-sec li {
  counter-increment: li; position: relative;
  padding: 7px 0 7px 26px; font-size: 13.5px; line-height: 1.75; color: var(--ink2);
  border-bottom: 1px dashed var(--line2);
}
.lesson-sec li:last-child { border-bottom: none; }
.lesson-sec li::before {
  content: counter(li);
  position: absolute; left: 0; top: 9px;
  width: 17px; height: 17px; border-radius: 4px;
  background: var(--line2); color: var(--ink3);
  font-size: 10.5px; display: flex; align-items: center; justify-content: center;
}
.lesson-sec.warn li::before { background: var(--gold-bg); color: var(--gold); }

/* ── 卡组网格 ───────────────────────────── */
.deck-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.deck-card {
  border: 1px solid var(--line); border-radius: 9px; padding: 14px;
  cursor: pointer; background: var(--surface);
}
.deck-card:hover { border-color: var(--line3); }
.deck-card.active { border-color: var(--brand); background: var(--brand-soft); }
.deck-card.active h4 { color: var(--brand); }
.deck-card h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 500; }
.deck-meta { font-size: 11.5px; color: var(--ink3); display: flex; gap: 10px; margin-top: 10px; }

/* ── 卡组库：两个子版块（MC 环境 / 实卡环境）─────
   版块切换做成两张大标签，下面各自一条统计条 ——
   两个来源的口径不同（MC 看「场次」，实卡看「牌表份数」），
   混着显示会让人拿两边的数字互相比。 */
.src-tabs { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.src-tab {
  flex: 1 1 220px; text-align: left; cursor: pointer; font-family: inherit;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink2);
  display: flex; flex-direction: column; gap: 2px;
}
.src-tab b { font-size: 14px; font-weight: 500; color: var(--ink); }
.src-tab em { font-style: normal; font-size: 11px; color: var(--ink3); }
.src-tab:hover { border-color: var(--line3); }
.src-tab.active { border-color: var(--brand); background: var(--brand-soft); }
.src-tab.active b { color: var(--brand); }

.stat-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px;
}
.stat-label { font-size: 11px; color: var(--ink3); }
.stat-value {
  font-size: 18px; font-weight: 500; letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.stat-value small { font-size: 11px; font-weight: 400; color: var(--ink3); margin-left: 2px; }
/* 来源构成这类 note 会折成两行（「集换社 417 + 集换社 Pro 388 + yugiohmeta 292」），
   继承 body 的行高会让第二行压到卡片底边 —— 单独收一行高。 */
.stat-note { font-size: 10.5px; color: var(--ink3); margin-top: 2px; line-height: 1.35; }
/* 时间跨度这种长文本，字号降一档才放得下 */
.stat-wide .stat-value { font-size: 12.5px; font-weight: 400; color: var(--ink2); }

.fmt-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 12px;
}
.fmt-label { font-size: 11.5px; color: var(--ink3); }

/* ── 牌表（天梯展开 / 卡组库详情共用）─────────
   三列并排，手机上堆成一列。列内保持后端给的原始顺序 ——
   那是玩家自己的构筑排列，按张数重排会看不出构筑意图。 */
.dk-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-top: 10px;
}
.dk-col-head {
  font-size: 12px; color: var(--ink2); font-weight: 500;
  padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line2);
  display: flex; align-items: baseline; gap: 8px;
}
.dk-col-head em { font-style: normal; font-size: 10.5px; color: var(--ink3); font-weight: 400; }
.dk-list { list-style: none; margin: 0; padding: 0; }
.dk-list li {
  display: flex; gap: 7px; font-size: 12.5px; line-height: 1.75;
  color: var(--ink2);
}
.dk-list li b {
  color: var(--ink3); font-weight: 400; min-width: 14px;
  font-variant-numeric: tabular-nums; text-align: right; flex: none;
}
.dk-name { color: var(--ink); }
.dk-name[data-card] { cursor: pointer; }
.dk-name[data-card]:hover { color: var(--brand); text-decoration: underline; }

/* 天梯榜 */
.chip-n { font-style: normal; font-size: 10px; color: var(--ink3); }
.chip.brand .chip-n { color: var(--brand); opacity: .7; }
/* 天梯榜 6 列，手机上 460px 会把卡组名挤成三行、右边两列直接截断。
   给一个下限让它横向滚动，而不是压缩到看不清。
   ⚠️ 必须写 `.tbl .ladder-table`（两个类）：媒体查询里的 `.tbl table`
   特异性更高，只写 `.ladder-table` 会被它按回 460px。 */
.tbl .ladder-table { min-width: 700px; }
.ladder-table tbody tr.ld-row { cursor: pointer; }
.ladder-table tbody tr.ld-row:hover { background: var(--line2); }
.ladder-table tbody tr.ld-row.open { background: var(--brand-soft); }
.ld-player { font-weight: 500; }
.ld-more > td { padding: 0 !important; background: var(--line2); }
.ld-deck { padding: 14px 16px; }
.ld-deck-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; margin-bottom: 4px;
}
.ld-deck-head b { font-size: 13.5px; font-weight: 500; }
.ld-deck-head em { font-style: normal; color: var(--ink3); font-size: 11.5px; }
.ld-deck-head a { color: var(--brand); font-size: 11.5px; }
.ld-deck-head a:hover { text-decoration: underline; }
/* ourygo 原始牌表：给个描边让它像个入口，不然混在一行小字里没人注意到 */
.ld-deck-head .deck-link {
  padding: 3px 9px; border: 1px solid currentColor; border-radius: 20px;
  text-decoration: none; line-height: 1.6; white-space: nowrap;
}
.ld-deck-head .deck-link:hover { background: var(--raise); text-decoration: none; }
.ld-deck-head .deck-link-alt { color: var(--ink3); }
.ld-foot {
  padding: 12px 10px 2px; margin-top: 6px;
  font-size: 11.5px; color: var(--ink3); border-top: 1px solid var(--line2);
}
/* 前 100 牌表分页（2026-11-02 从独立页并进环境概览）：一页 25 条。
   页码那排复用 .quick，窄屏自动换行，不会把「下一页」挤出屏幕。 */
.ld-pager {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 4px 2px; margin-top: 8px; border-top: 1px solid var(--line2);
}
.ld-pager-info { font-size: 11.5px; color: var(--ink3); }
.ld-pager .quick { margin-left: auto; }
.ld-pager .chip.off { opacity: .35; pointer-events: none; }
.btn-lite {
  margin-left: auto; padding: 4px 10px; font-size: 11.5px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink2); font-family: inherit;
}
.btn-lite:hover { border-color: var(--ink3); color: var(--ink); }
/* ── 卡组库「记录列表」（2026-11-03 改版，对标集换社 Pro 的构筑参考）──
   一行一条真实记录：日期 + 赛事 / 玩家 + 名次徽章；
   点开才铺那一次的牌表 —— 几十条记录一次全铺开，页面能滚十几屏。 */
.rec-list { display: flex; flex-direction: column; gap: 7px; }
.rec {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); font: inherit; color: inherit; text-align: left;
  cursor: pointer; transition: border-color .14s, background .14s;
}
.rec:hover { border-color: var(--line3); background: var(--raise); }
.rec.open { border-color: var(--gold); background: var(--raise); }
.rec-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rec-title {
  display: flex; align-items: baseline; gap: 9px; min-width: 0;
  font-size: 13.5px; font-weight: 500;
}
.rec-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-date { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.rec-sub {
  font-size: 11.5px; color: var(--ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-badge {
  flex: 0 0 auto; font-size: 11.5px; line-height: 1.7; padding: 1px 9px;
  border-radius: 4px; background: var(--line2); color: var(--ink2); white-space: nowrap;
}
.rec-badge.strong { background: var(--gold-bg2); color: #6B5220; }
.rec-badge.champ { background: var(--ink); color: #F1DDB4; }
.rec-badge.soft { background: transparent; border: 1px solid var(--line); color: var(--ink3); }
.rec-arrow { color: var(--ink3); font-size: 16px; line-height: 1; transition: transform .18s; }
.rec.open .rec-arrow { transform: rotate(90deg); }
.rec-body { display: none; }
.rec-body.open {
  display: block; margin: -8px 0 2px; padding: 12px 14px 6px;
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 9px 9px; background: var(--raise);
}
.rg-section { margin-top: 16px; }
.rg-section-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--line2);
}
.rg-section-head b { font-size: 13px; font-weight: 500; }
.rg-section-head em { font-style: normal; font-size: 11.5px; color: var(--ink3); }
/* 线上「最主流构筑」那条是聚类口径（多场综合），和下面一条条真实记录区分开 */
.rec-hl { margin-top: 4px; background: var(--raise); border-style: dashed; }
/* 首屏之外先用 .rec-hide 收起，点「显示更多」再放（线上能有两百条记录） */
.rec-item.rec-hide { display: none; }
.rec-more { display: block; margin: 12px auto 0; }

.variant { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }
.variant-note { font-size: 11.5px; color: var(--ink3); }

/* ── 教学正文 ────────────────────────────── */
.sec-note { font-style: normal; font-size: 10.5px; color: var(--ink3); font-weight: 400; margin-left: 6px; }
.pool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 14px;
}
.pool-item {
  display: flex; align-items: baseline; gap: 8px; font-size: 12.5px;
  padding: 3px 0; border-bottom: 1px dotted var(--line2);
}
.pool-item b { font-weight: 400; color: var(--ink); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-item span { color: var(--ink3); font-size: 11px; flex: none; }
/* ── 教学：思路图（阶段流程）────────────────
   四个阶段横着排，箭头连起来。手机上（见文末媒体查询）改成一列，
   箭头转 90 度 —— 不用左右拖动也能看全。 */
.flow { display: flex; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }
/* 四个阶段要在一屏里看全：让它们等比收缩（min-width 兜底），
   而不是固定 168px 后把第四个挤出可视区 —— 那样用户根本不知道右边还有。 */
.flow-node {
  flex: 1 1 0; min-width: 108px; max-width: 280px;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px;
  background: var(--surface);
}
.flow-no {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 11.5px; display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.flow-title { font-size: 13px; font-weight: 500; margin: 8px 0 4px; line-height: 1.45; }
.flow-desc { margin: 0 0 8px; font-size: 11.5px; color: var(--ink2); line-height: 1.7; }
.flow-cards { display: flex; flex-wrap: wrap; gap: 4px; }
.flow-cards .tag { margin-right: 0; }
/* 箭头用 grid + place-items 居中：flex + ::before 在某些缩放比下会贴到底边 */
.flow-arrow {
  flex: 0 0 16px; display: grid; place-items: center;
  color: var(--ink3); font-size: 12px; line-height: 1;
}
.flow-arrow::before { content: "→"; }

/* ── 教学：展开路线 ─────────────────────── */
.route-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.route-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink2); font-size: 11.5px;
  cursor: pointer; font-family: inherit; line-height: 1.4; text-align: left;
}
.route-tab b { font-weight: 500; font-size: 12px; }
.route-tab em { font-style: normal; font-size: 10.5px; color: var(--ink3); }
.route-tab:hover { border-color: var(--ink3); color: var(--ink); }
.route-tab.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.route-tab.active em { color: var(--brand); opacity: .75; }
.route-head { margin: 8px 0 0; font-size: 13px; }
.route-head b { font-weight: 500; }
.route-goal {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  background: var(--brand-soft); border: 1px solid var(--danger-line); border-radius: 8px;
  padding: 8px 12px; margin: 8px 0 12px; font-size: 12px;
}
.route-goal b { color: var(--brand); font-weight: 500; flex: none; }
.route-goal span { color: var(--ink2); }
.rt-steps { list-style: none; margin: 0; padding: 0; }
/* ⚠️ 必须重置 `.lesson-sec li` 那套（虚线分隔 + 圆形序号 + 左内边距）：
   路线步骤也在 lesson-sec 里，不重置会出现两套编号、每步一条虚线。 */
.lesson-sec .rt-steps > li {
  padding: 0 0 12px; border-bottom: none; counter-increment: none;
}
.lesson-sec .rt-steps > li::before { display: none; }
.rt-step { display: flex; gap: 10px; position: relative; }
/* 竖线连着下一步；最后一条不画 */
.rt-step::before {
  content: ""; position: absolute; left: 10px; top: 24px; bottom: 0;
  width: 1px; background: var(--line);
}
.rt-step:last-child::before { display: none; }
.rt-no {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  background: var(--line2); color: var(--ink2); font-size: 10.5px;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; position: relative; z-index: 1;
}
.rt-step:first-child .rt-no { background: var(--brand); color: #fff; }
.rt-body { flex: 1; min-width: 0; }
.rt-line { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.rt-act { font-size: 11.5px; font-weight: 500; color: var(--brand); flex: none; }
.rt-note { margin: 2px 0 0; font-size: 12px; color: var(--ink3); line-height: 1.7; }

/* 思路图 / 路线里的卡名可以点进卡查页 */
.tag-card { cursor: pointer; }
.tag-card:hover { background: var(--brand-soft); color: var(--brand); }
.manual-item { padding: 10px 12px; background: var(--line2); border-radius: 8px; margin-top: 8px; }
.manual-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.manual-head b { font-size: 12.5px; font-weight: 500; }
.manual-head em { font-style: normal; font-size: 11px; color: var(--ink3); }
.manual-item p { margin: 0; font-size: 12.5px; color: var(--ink2); white-space: pre-wrap; }
.lesson-text {
  font-family: inherit; font-size: 12.5px; color: var(--ink2);
  white-space: pre-wrap; margin: 12px 0 0; line-height: 1.9;
}
.lesson-note {
  margin-top: 14px; font-size: 11.5px; color: var(--ink3);
  padding-top: 10px; border-top: 1px solid var(--line2); line-height: 1.8;
}

/* ── 占位页 ─────────────────────────────── */
.placeholder { padding: 60px 20px; text-align: center; }
.placeholder .ph-icon {
  width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 16px;
  border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center;
  color: var(--ink3); font-size: 18px;
}
.placeholder h2 { font-size: 16px; font-weight: 500; margin: 0 0 8px; }
.placeholder p { font-size: 13px; color: var(--ink3); margin: 0 auto 18px; max-width: 420px; line-height: 1.8; }
.cmd-box {
  display: inline-block; font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; background: var(--line2); color: var(--ink2);
  padding: 7px 13px; border-radius: 6px;
}

.empty { padding: 40px; text-align: center; color: var(--ink3); font-size: 13px; }

@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2, .g13 { grid-template-columns: minmax(0, 1fr); }
  /* 两张饼的等宽规则写在文件后面，媒体查询里得用更高的优先级压回来 */
  .g2.g2pie { grid-template-columns: minmax(0, 1fr); }
  .deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-detail { grid-template-columns: 200px 1fr; }
  .sk-panel { grid-template-columns: 200px 1fr; }
}
@media (max-width: 760px) {
  .sidebar { display: none; }
  .topbar {
    height: auto; min-height: 58px; flex-wrap: wrap;
    padding: 10px 16px; gap: 6px 10px;
  }
  .top-meta { margin-left: 0; width: 100%; gap: 6px; }
  .view { padding: 18px 16px 48px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ph-top-grid { grid-template-columns: 1fr; }
  .card { padding: 14px; }
  .card-detail { grid-template-columns: 1fr; }
  /* 单列时卡图会按 59:86 撑满整个宽度，太高，把详情顶下去 */
  /* 必须给确定宽度：卡图内容全是绝对定位，靠 margin:auto 居中会让 grid 子项
     收缩到内容宽度（0），aspect-ratio 再按 0 算高度，整块塌成一条线。 */
  .card-art { width: 190px; margin: 0 auto 2px; }
  .sk-panel { grid-template-columns: 1fr; }
  .sk-art { display: none; }
  #card-list { max-height: 44vh; }
  .deck-grid { grid-template-columns: minmax(0, 1fr); }
  /* 牌表三列在手机上堆成一列，否则每列只剩 100px 宽，卡名全被截断 */
  .dk-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* 统计条两列：四列在手机上每格只剩 70px，数字全挤在一起 */
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* 「2023-07-02 ~ 2026-10-18」这种长值独占一行，否则日期会被折成两半 */
  .stat-wide { grid-column: 1 / -1; }
  /* 标题 + 右侧说明挤一行在手机上会把标题折成两行，让它换行更清楚 */
  .card-head { flex-wrap: wrap; }
  /* 思路图改竖排，箭头转向下；横排的话四个阶段只能靠左右拖 */
  .flow { flex-direction: column; overflow-x: visible; }
  .flow-node { flex: 1 1 auto; min-width: 0; max-width: none; }
  .flow-arrow { flex: 0 0 22px; }
  .flow-arrow::before { content: "↓"; }
  .src-tab { flex: 1 1 100%; }
  .pool-grid { grid-template-columns: minmax(0, 1fr); }
  .donut-wrap { flex-direction: column; align-items: stretch; gap: 16px; }
  .donut { align-self: center; }
  .spec { grid-template-columns: repeat(2, 1fr); }
  .price-row { grid-template-columns: 1fr; }
  .tbl table { min-width: 460px; }
  .kpi-value { font-size: 22px; }
  /* 筛选栏：标签换到控件上方，chip 一行放不下就换行（不要横向滚动，
     横滑的 chip 条几乎没人会往右拖） */
  .cf-row { flex-direction: column; gap: 3px; }
  .cf-lab { flex: none; text-align: left; padding-top: 0; }
  .cf-in { max-width: none; flex: 1 1 100%; }
  .cf-num { width: 64px; }
  .cf-body { padding: 10px; }
  .cf-reset { margin-left: 0; }
}

/* ── 卡名悬停预览 ───────────────────────────
   牌表 / 教学里的卡名悬停时弹的小卡。宽度固定 306px：
   卡图 92px + 右侧文字，正好放得下「等级 4 · ATK 1800 · DEF 1200」一行。 */
.card-pop {
  position: fixed; z-index: 90; display: none; width: 340px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(27, 27, 31, .16);
  overflow: hidden; font-size: 12.5px; color: var(--ink);
}
.card-pop.on { display: flex; }
.card-pop.loading { width: 150px; }
.card-pop .pop-art { width: 100px; flex: none; background: var(--line2); align-self: flex-start; }
.card-pop .pop-art img { display: block; width: 100%; height: auto; }
.card-pop .pop-main { padding: 10px 12px; min-width: 0; flex: 1 1 auto; }
.card-pop .pop-name { font-size: 13.5px; font-weight: 600; margin-bottom: 5px; line-height: 1.4; }
.card-pop .pop-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.card-pop .pop-chips span {
  font-size: 10.5px; line-height: 1.5; padding: 1px 7px; border-radius: 20px;
  background: var(--line2); color: var(--ink2);
}
.card-pop .pop-spec { font-size: 11.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.card-pop .pop-spec i { font-style: normal; color: var(--ink3); margin: 0 5px; }
.card-pop .pop-arrows { letter-spacing: 2px; color: var(--ink); }
.card-pop .pop-desc {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line2);
  font-size: 11.5px; line-height: 1.75; color: var(--ink2); white-space: pre-line;
  /* 效果长的（灵摆 / 连接怪）能写三百字，截 6 行，想看全的点进去 */
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-pop .pop-hint { margin-top: 7px; font-size: 10.5px; color: var(--gold); }

/* 触屏（手机 / 平板）没有真正的 hover，浮层只会卡在屏幕上收不掉 —— 干脆不弹。
   判据用 `pointer: coarse`（输入设备是手指），**不要用窗口宽度**：
   窄窗口的桌面浏览器照样有鼠标，悬停该弹。 */
@media (pointer: coarse) {
  .card-pop { display: none !important; }
}

/* ── 线下环境：上位 / 赛事 / 攻略 ─────────────── */
.tag.gold { background: var(--brand-soft); color: var(--brand); }

/* 卡组名 Top 榜（线下上位右侧那块）：名字 + 占比 + 细条 */
.ph-top { padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.ph-top:hover { background: var(--line2); }
.ph-top-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ph-rank { font-size: 11px; color: var(--ink3); width: 16px; flex: 0 0 16px; }
.ph-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-n { margin-left: auto; font-size: 12px; color: var(--ink2); }
.ph-pct { font-size: 12px; color: var(--gold); width: 46px; text-align: right; }
.ph-bar { height: 4px; background: var(--line2); border-radius: 2px; overflow: hidden; }
.ph-bar i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }
/* 卡组名 Top 12：通栏两列，单列 12 行会顶到屏幕外 */
.ph-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; }
/* 环境概览的「当前卡表 / 上周」两张饼要等宽（.g2 本身是 1.15fr / 0.85fr） */
.g2pie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* 牌表流水的赛事列：赛事名很长，只占一行，完整名放 title */
.ph-ev {
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 760px) {
  .ph-ev { max-width: 140px; }
  /* 卡组库的记录行：手机上右边还有徽章 + 箭头，左边要留够地方，
     日期和赛事名不至于被挤成两个字 */
  .rec { padding: 9px 11px; gap: 8px; }
  .rec-title { font-size: 12.5px; gap: 7px; }
  .rec-date { font-size: 11.5px; }
  .rec-badge { font-size: 10.5px; padding: 0 7px; }
  .rec-body.open { padding: 10px 10px 4px; }
}

/* 赛事列表：一行一场，点开看名次 / 卡组构成 */
.ev-list { border-top: 1px solid var(--line2); }
.ev-row { border-bottom: 1px solid var(--line2); cursor: pointer; }
.ev-row:hover { background: var(--raise); }
.ev-row.open { background: var(--brand-soft); }
.ev-main { display: flex; align-items: center; gap: 9px; padding: 9px 4px; }
.ev-date { font-size: 12px; color: var(--ink3); width: 82px; flex: 0 0 82px; }
.ev-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-champ { font-size: 12px; color: var(--ink2); margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-player { font-style: normal; color: var(--ink3); margin-left: 5px; font-size: 11px; }
.ev-caret { margin-left: auto; color: var(--ink3); font-size: 15px; transition: transform .15s; }
.ev-row.open .ev-caret { transform: rotate(90deg); color: var(--brand); }
.ev-detail { padding: 4px 8px 14px 95px; }
.ev-foot { font-size: 11.5px; color: var(--ink3); margin-top: 12px; }
.ev-top-box { margin-bottom: 4px; }
.ev-top-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.ev-top-rank { font-size: 11.5px; color: var(--ink3); width: 34px; flex: 0 0 34px; }
.ev-top-group .tag { cursor: pointer; }
.ev-deck-more { margin: 8px 0 4px; border-top: 1px dashed var(--line2); padding-top: 4px; }

/* 赛事日历子版块 */
.tc-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px;
  border-bottom: 1px dotted var(--line2); font-size: 12.5px; }
.tc-row:last-child { border-bottom: none; }
.tc-date { font-size: 11.5px; color: var(--ink3); width: 82px; flex: 0 0 82px; }
.tc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-n { font-size: 11px; color: var(--ink2); flex: none; }
.tc-status { font-size: 10.5px; color: var(--ink3); flex: none; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: 4px; }
.tc-status.on { color: #2C7A55; border-color: #2C7A55; }
.tc-status.pend { color: #8A6A12; border-color: #C9A227; }
@media (max-width: 760px) {
  .ev-detail { padding-left: 8px; }
  .ev-champ { display: none; }
  .tc-row { flex-wrap: wrap; }
  .tc-date { width: 72px; flex-basis: 72px; }
}

/* 卡组攻略：封面小卡网格 */
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 10px; }
.gd-card {
  display: flex; gap: 10px; padding: 9px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.gd-card:hover { border-color: var(--gold-line); background: var(--brand-soft); }
.gd-cover {
  width: 78px; height: 58px; flex: 0 0 78px; border-radius: 6px;
  object-fit: cover; background: var(--line2); display: block;
}
.gd-main { min-width: 0; flex: 1; }
.gd-title {
  font-size: 13px; font-weight: 500; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gd-meta { font-size: 11px; color: var(--ink3); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 攻略正文：公众号转存的 markdown，图片宽度不能撑破 */
.md-body { max-width: 860px; font-size: 14px; line-height: 1.85; color: var(--ink); }
.md-body > *:first-child { margin-top: 0; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 {
  margin: 26px 0 10px; line-height: 1.4; font-weight: 600;
}
.md-body h1 { font-size: 20px; }
.md-body h2 { font-size: 17.5px; }
.md-body h3 { font-size: 15px; color: var(--brand); }
.md-body h4, .md-body h5, .md-body h6 { font-size: 14px; color: var(--ink2); }
.md-body p { margin: 10px 0; }
.md-body img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 14px auto; }
.md-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.md-body ul, .md-body ol { margin: 10px 0; padding-left: 22px; }
.md-body li { margin: 4px 0; }
.md-body blockquote {
  margin: 14px 0; padding: 9px 14px; border-left: 3px solid var(--line);
  background: var(--line2); border-radius: 0 8px 8px 0; color: var(--ink2);
}
.md-body hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.md-body code {
  background: var(--line2); padding: 1px 5px; border-radius: 4px;
  font-size: 12.5px; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.md-body pre {
  background: var(--line2); padding: 12px 14px; border-radius: 8px;
  overflow-x: auto; margin: 14px 0;
}
.md-body pre code { background: none; padding: 0; }
.md-body table.md-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 14px 0;
  display: block; overflow-x: auto;
}
.md-body table.md-table th, .md-body table.md-table td {
  border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top;
}
.md-body table.md-table th { background: var(--line2); font-weight: 500; }

/* ── 禁限卡表 ───────────────────────────────
   三列并排（禁止 / 限制 / 准限制），每列自己滚动：
   TCG 一列 156 张，整页跟着拉长会把其他两列推到几十屏之外。 */
.bl-select {
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink2); font-size: 11.5px;
  font-family: inherit; cursor: pointer;
}
.bl-select:focus { outline: none; border-color: var(--brand); }
.bl-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bl-col { padding: 14px 12px 8px; }
.bl-list { list-style: none; margin: 0; padding: 0; max-height: 620px; overflow-y: auto; }
.bl-list::-webkit-scrollbar { width: 6px; }
.bl-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.bl-item {
  display: flex; gap: 8px; align-items: center;
  padding: 5px 5px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.bl-item:hover { background: var(--line2); }
.bl-item.open { background: var(--brand-soft); }
.bl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-caret { margin-left: auto; color: var(--ink3); font-size: 12px; transition: transform .15s; }
.bl-item.open .bl-caret { transform: rotate(90deg); color: var(--brand); }

.bl-st {
  display: inline-block; padding: 0 6px; border-radius: 4px;
  font-size: 10.5px; line-height: 17px; border: 1px solid transparent; white-space: nowrap;
}
.bl-st0 { color: #fff; background: #A8322B; }
.bl-st1 { color: #fff; background: #B0762B; }
.bl-st2 { color: var(--gold-ink); background: var(--gold-bg2); border-color: var(--gold-line); }
.bl-st3 { color: var(--ink3); background: var(--line2); }

.bl-hist {
  list-style: none; margin: 2px 0 8px; padding: 9px 11px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font-size: 12px;
}
.bl-h-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.bl-h-head b { font-size: 12.5px; }
.bl-h-head span { color: var(--ink3); font-size: 11px; }
.bl-h-go { margin-left: auto; color: var(--brand); font-size: 11.5px;
  background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.bl-h-go:hover { text-decoration: underline; }
.bl-h-row { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; }
.bl-h-fmt { flex: 0 0 34px; color: var(--ink3); }
.bl-h-track { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; color: var(--ink2); }
.bl-h-track i { font-style: normal; color: var(--ink3); }
.bl-h-step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 5px; padding: 0 6px; font-size: 11px; white-space: nowrap;
}
.bl-h-step.dim { color: var(--ink3); border-style: dashed; }

.bl-chg { padding: 9px 0; border-top: 1px dashed var(--line2); }
.bl-chg:first-of-type { border-top: none; }
.bl-chg-head { display: flex; gap: 10px; align-items: center; margin-bottom: 7px; }
.bl-chg-tag { font-size: 11.5px; padding: 1px 9px; border-radius: 999px; background: var(--line2); color: var(--ink2); }
.bl-chg-tag.bl-new { background: var(--danger-bg); color: var(--brand); }
.bl-chg-tag.bl-free { background: var(--ok-bg); color: var(--down); }
.bl-chg-tag.bl-move { background: var(--raise); color: var(--gold); }
.bl-chg-n { font-size: 11px; color: var(--ink3); }
.bl-tag { cursor: pointer; }
.bl-tag.open { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.bl-none { padding: 12px 4px; color: var(--ink3); font-size: 12.5px; }
.bl-warn {
  font-size: 12.5px; color: var(--gold-ink); background: var(--raise);
  border: 1px solid var(--gold-line); border-radius: 8px; padding: 8px 12px;
}
.bl-foot { margin-top: 16px; font-size: 11.5px; color: var(--ink3); line-height: 1.8; }
.bl-foot a { color: var(--brand); }

/* ── 裁定助手 ─────────────────────────────── */
.rl-head {
  display: flex; gap: 14px; padding-bottom: 14px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line2);
}
.rl-art { width: 84px; flex: 0 0 84px; }
.rl-art img { width: 100%; border-radius: 6px; display: block; }
.rl-art.miss { display: none; }
.rl-meta { min-width: 0; flex: 1; }
.rl-name { font-size: 18px; font-weight: 500; letter-spacing: -0.2px; }
.rl-sub { font-size: 12px; color: var(--ink3); margin-top: 4px; }

/* ── 裁定库自动更新（.rl-sync-*）2026-11-06 撤掉 ──────────
   那块 UI 已经整块挪进后台 `/admin#jobs`（样式在 admin.css 的 `.ad-note`）。
   前台的 API 函数也删了，别在这里留一份没人用的样式等着以后被误用。 */
.tag.warn { color: #C0803A; border-color: #C0803A; }

/* ── AI 裁定问答 ─────────────────────────── */
.ask-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ask-empty { padding: 20px 0; text-align: center; color: var(--ink3); font-size: 13px; }
.ask-empty b { display: block; font-size: 13px; font-weight: 500; color: var(--ink2); margin-bottom: 6px; }
.ask-empty p { margin: 0; }
.ask-result { font-size: 13.5px; line-height: 1.7; }
.ask-conclusion {
  padding: 10px 12px; border-left: 3px solid var(--brand, #2C7A55);
  background: var(--line2); border-radius: 0 8px 8px 0; margin-bottom: 10px;
}
.ask-sec { margin-bottom: 10px; }
.ask-sec-title { font-weight: 500; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.ask-sec-text { color: var(--ink2); }
.ask-sec-text p { margin: 4px 0; }
.ask-sec-text ul, .ask-sec-text ol { margin: 4px 0; padding-left: 20px; }
.ask-ev {
  margin-top: 10px; border: 1px solid var(--line2); border-radius: 8px;
  padding: 8px 10px; background: var(--bg2, var(--raise));
}
.ask-ev-head { font-size: 11.5px; color: var(--ink3); margin-bottom: 6px; }
.ask-ev-item { display: flex; gap: 8px; padding: 3px 0; font-size: 12px; color: var(--ink2); }
.ask-ev-tag {
  flex: 0 0 auto; font-size: 10.5px; padding: 0 6px; height: 18px; line-height: 18px;
  border-radius: 9px; background: var(--line2); color: var(--ink3);
}
.ask-ev-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-meta {
  margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  font-size: 11.5px; color: var(--ink3);
}
.ask-meta .chip { margin: 0 4px 0 0; }
.ask-warn {
  margin-top: 8px; font-size: 11.5px; color: var(--gold);
  background: var(--gold-bg); border: 1px solid var(--gold-line); border-radius: 6px; padding: 6px 10px;
}
.ask-disclaim { margin-top: 10px; font-size: 10.5px; color: var(--ink3); opacity: 0.85; }

/* ── 先行卡徽标 ─────────────────────────── */
.ext-chip {
  font-size: 11px; font-weight: 400; vertical-align: 2px;
  background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-line);
}
.ext-tag {
  font-style: normal; font-size: 10px; padding: 1px 5px; margin-left: 5px;
  border-radius: 4px; background: var(--gold-bg); color: var(--gold); vertical-align: 1px;
}


/* ── 卡盒 / 先行卡 ────────────────────────── */
.pk-code { cursor: pointer; font-variant-numeric: tabular-nums; }
.pk-code:hover { border-color: var(--ink3); color: var(--ink); }
.pk-code.has { background: var(--ok-bg); border-color: var(--ok-line); color: #2C7A55; }
.pk-up { display: flex; flex-direction: column; gap: 2px; }
.pk-up-row {
  display: flex; gap: 10px; align-items: center;
  padding: 7px 6px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.pk-up-row:hover { background: var(--line2); }
.pk-up-date { color: var(--ink3); font-size: 12px; width: 78px; flex: 0 0 78px; }
.pk-up-name { color: var(--ink2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-up-n { margin-left: auto; font-size: 11.5px; color: var(--ink3); }
.pk-group { padding: 7px 0 9px; border-top: 1px dashed var(--line2); }
.pk-group:first-of-type { border-top: none; }
.pk-group-head { font-size: 12px; color: var(--ink2); margin-bottom: 6px; }
.pk-group-head em { font-style: normal; color: var(--ink3); margin-left: 6px; font-size: 11px; }

/* ── 卡盒网格（2026-11-06：haiyuan 只有 81 盒，接集换社商品库后统一成卡片样式） ── */
.pk-grid {
  display: grid; gap: 10px; margin-top: 2px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.pk-tile {
  border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  background: var(--bg2); cursor: pointer; display: flex; flex-direction: column;
  transition: border-color .12s, transform .12s;
}
.pk-tile:hover { border-color: var(--ink3); transform: translateY(-1px); }
.pk-tile.no-open { cursor: default; }
.pk-tile.no-open:hover { border-color: var(--line); transform: none; }
.pk-tile-img {
  aspect-ratio: 1 / 1; background: var(--line2); display: flex;
  align-items: center; justify-content: center; overflow: hidden;
}
.pk-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-tile-img .pk-tile-ph {
  font-size: 20px; font-weight: 600; color: var(--ink3);
  letter-spacing: .5px; font-variant-numeric: tabular-nums;
}
.pk-tile-b { padding: 7px 8px 4px; min-width: 0; }
.pk-tile-b b { display: block; font-size: 13px; line-height: 1.2; }
.pk-tile-b span {
  display: block; font-size: 11.5px; color: var(--ink3); line-height: 1.35;
  margin-top: 2px; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pk-tile-m {
  padding: 0 8px 8px; margin-top: auto; display: flex; gap: 5px;
  align-items: center; flex-wrap: wrap;
}
.pk-tile-m .mono { font-size: 11px; color: var(--ink3); }
.pk-tile-m .tag { font-size: 10.5px; padding: 1px 5px; }
.pk-tile.is-past { opacity: .62; }
.pk-tile .pk-has { font-size: 10.5px; color: #2C7A55; }

/* ── 卡盒目录的行列表（2026-11-06）──
   2,842 个盒用卡片铺就是「太多太杂」，改成一行一个盒：
   代号（等宽、固定宽）| 名称（吃掉剩余宽度）| 分类 · 发售日 · 语言 | 卡表状态。
   一行 34px，一屏能扫 20 来个，比卡片省 80% 的纵向空间。 */
.pkrows {
  border-top: 1px solid var(--line2);
  max-height: 620px; overflow-y: auto; overscroll-behavior: contain;
}
.pkrow {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-bottom: 1px solid var(--line2);
  cursor: pointer; font-size: 12.5px; line-height: 1.35;
}
.pkrow:hover { background: var(--bg3, rgba(0, 0, 0, .03)); }
.pkrow.no-open { cursor: default; }
.pkrow-code {
  flex: 0 0 76px; font-family: var(--mono, monospace); font-size: 12px;
  font-weight: 600; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.pkrow-name {
  flex: 1 1 auto; min-width: 0; color: var(--ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pkrow-meta {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--ink3); white-space: nowrap;
}
.pkrow-meta .pkrow-g {
  font-style: normal; padding: 1px 6px; border-radius: 4px;
  background: var(--line2); color: var(--ink2); font-size: 11px;
}
.pkrow-lang { min-width: 30px; }
.pkrow-state {
  flex: 0 0 52px; text-align: right; font-size: 11px; color: var(--ink3);
}
.pkrow.has .pkrow-state { color: #2C7A55; font-weight: 600; }
body.dark .pkrow:hover { background: rgba(255, 255, 255, .04); }
body.dark .pkrow.has .pkrow-state { color: #7ED0A3; }
@media (max-width: 720px) {
  .pkrow-code { flex-basis: 58px; }
  .pkrow-meta .pkrow-g, .pkrow-lang { display: none; }
}
/* 语言角标：OCG 蓝、简中红、TCG 紫，跟站内其它语言标记一个口径 */
.pk-lang-OCG { background: #EAF1FB; color: #2A5D9E; border-color: #C5D9F0; }
.pk-lang-SC { background: #FBEDEC; color: #A6403A; border-color: #EFC9C6; }
.pk-lang-TCG { background: #F2ECFA; color: #62479B; border-color: #D8C9EC; }
body.dark .pk-lang-OCG { background: #1B2A3E; color: #8FB8E8; border-color: #2A4160; }
body.dark .pk-lang-SC { background: #3A2220; color: #E29A94; border-color: #5A3330; }
body.dark .pk-lang-TCG { background: #2A2338; color: #B9A2E0; border-color: #3F3458; }
.pk-table td { font-size: 12.5px; vertical-align: middle; }
.pk-no { color: var(--ink3); font-size: 11.5px; }
.pk-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pk-k-normal { background: #C9A227; }
.pk-k-effect { background: #C77A3E; }
.pk-k-ritual { background: #3D6E8C; }
.pk-k-fusion { background: #7A5C8C; }
.pk-k-sync { background: #B5B5AC; }
.pk-k-xyz { background: #4A4A4F; }
.pk-k-link { background: #4C5FA8; }
.pk-k-spell { background: #2C7A55; }
.pk-k-trap { background: #8C4A6B; }
.pk-k-other { background: var(--line); }
.pk-info { color: var(--ink3); font-size: 12px; }
.pk-ru { font-size: 11.5px; color: var(--ink2); white-space: nowrap; }
.pk-ru.ru-gold { color: #8A6A12; font-weight: 500; }
.pk-ru.ru-mirror { color: #4C5FA8; }

/* ── 卡盒卡表：卡图网格 ─────────────────── */
.pkg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.pkg-cell { position: relative; }
.pkg-art {
  position: relative; aspect-ratio: 421 / 614; border-radius: 6px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
}
.pkg-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkg-art.has-cid { cursor: pointer; }
.pkg-art.has-cid:hover { border-color: var(--brand); }
.pkg-art.miss { background: var(--line2); }
.pkg-art .pkg-ph { position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink3); font-size: 10.5px; }
.pkg-art .pkg-ph::after { content: "无图"; }
/* 罕贵角标：右上角小字 + 描边高亮。金＝UR 以上，镜＝SER/PSER */
.pkg-ru {
  position: absolute; top: 0; right: 0; font-size: 9.5px; line-height: 1;
  padding: 3px 5px; border-radius: 0 6px 0 6px; color: #fff; font-weight: 500;
  background: rgba(0,0,0,.45); pointer-events: none;
}
.pkg-cell.ru-gold .pkg-art { border-color: #C9A227; box-shadow: 0 0 0 1px #C9A227 inset; }
.pkg-cell.ru-gold .pkg-ru { background: #C9A227; }
.pkg-cell.ru-mirror .pkg-art { border-color: #4C5FA8; box-shadow: 0 0 0 1px #4C5FA8 inset; }
.pkg-cell.ru-mirror .pkg-ru { background: #4C5FA8; }
.pkg-name {
  margin-top: 6px; font-size: 12px; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 32px;
}
.pkg-name[data-card] { cursor: pointer; }
.pkg-name[data-card]:hover { color: var(--brand); }
.pkg-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.pkg-no { font-size: 10.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.pkg-kind { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
/* 「先行」小标：这张卡的名字/卡图来自萌卡先行卡清单，不是本站卡库 */
.pkg-pre {
  font-size: 9.5px; line-height: 1; padding: 2px 4px; border-radius: 3px;
  color: var(--brand); border: 1px solid var(--brand-line); background: var(--brand-soft);
  white-space: nowrap;
}

.pk-note {
  font-size: 10.5px; color: var(--brand); border: 1px solid var(--brand-line);
  border-radius: 4px; padding: 0 4px; margin-left: 6px;
}
.pk-row { cursor: pointer; }
.pk-row.dim { opacity: .6; }
.pk-row.open > td { background: var(--line2); }
.pr-body { padding: 10px 4px 12px; }
.pr-desc { font-size: 12.5px; color: var(--ink2); line-height: 1.8; max-width: 860px; }
.pr-desc.dim { color: var(--ink3); }

@media (max-width: 1080px) {
  .bl-cols { grid-template-columns: 1fr; }
  .bl-list { max-height: none; }
}

/* 攻略封面用卡图兜底（竖版卡图放进 78×58 的方框：往下挪一点对准卡绘） */
.gd-cover.is-card { object-position: center 42%; }

/* ── 卡片统计（「卡片使用量 › 卡片统计」子版块）───────────────
   三区 chips + 排行表。这里用表格不用条形图：卡名要能点进卡查、
   数字要能上下对齐看，「投入率」保留一条细条做视觉锚点就够了。
   右侧三个数字（带 1 / 2 / 3+ 张）的配色跟机器人那张图的堆叠柱一致。 */
.cs-secs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.cs-table-wrap { overflow-x: auto; }
.cs-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.cs-table th {
  text-align: left; font-size: 11px; font-weight: 400; color: var(--ink3);
  padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.cs-table td {
  padding: 7px 8px; border-bottom: 1px solid var(--line2);
  font-size: 13px; vertical-align: middle;
}
.cs-table tr:last-child td { border-bottom: none; }
.cs-table tbody tr:hover td { background: var(--brand-soft); }
.cs-rank { width: 30px; color: var(--ink3); font-size: 11px; font-variant-numeric: tabular-nums; }
.cs-rate { white-space: nowrap; }
/* 条不铺满整列：一整屏 15 根齐头的长条会把注意力从卡名上抢走，
   限宽之后长短对比反而更清楚，右边数字也好对齐。 */
.cs-bar {
  display: inline-block; width: min(170px, calc(100% - 54px)); height: 6px;
  background: var(--line2); border-radius: 3px; overflow: hidden; vertical-align: middle;
}
.cs-bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.cs-rate span.mono {
  display: inline-block; width: 52px; text-align: right;
  font-size: 12px; color: var(--ink2); vertical-align: middle;
}
/* 表里卡名比正文略小一号是常态，但 11px 在这个密度下太小，放大一点 */
.cs-table .tag-card { font-size: 12.5px; padding: 2px 8px; }
.cs-dist b {
  display: inline-block; min-width: 34px; text-align: right;
  font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums;
}
.cs-dist .d1 { color: #5b9bd5; }
.cs-dist .d2 { color: var(--gold); }
.cs-dist .d3 { color: #c0504d; }

/* ── 卡查页「返回来源」 ──────────────────────
   从卡盒 / 卡组构筑等页面点一张卡过来，看完要能回到原处：
   顶部给一枚胶囊按钮，说明「从哪来」，点一下回去并停在原来的滚动位置。 */
.back-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--gold-line);
  border-radius: 20px;
  background: var(--gold-bg);
  color: var(--gold-ink);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.back-btn:hover {
  background: var(--gold-bg2);
  border-color: var(--gold);
  transform: translateX(-1px);
}
.back-arw { font-size: 14px; line-height: 1; }
.back-hint { font-size: 11.5px; color: var(--ink3); }

@media (max-width: 760px) {
  .back-hint { display: none; }
}

/* ══ 参考构筑 ══════════════════════════════════════════════════════
   左列表（卡组名 + 变体数）+ 右详情（建议构筑三列 + 全部候选卡表）。 */
.rc-list { max-height: 62vh; overflow-y: auto; }
.rc-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
.rc-item:hover { background: var(--raise); }
.rc-item.active {
  background: var(--gold-bg);
  border-color: var(--gold-line);
}
.rc-cover {
  width: 26px;
  height: 37px;
  flex: 0 0 26px;
  border-radius: 3px;
  object-fit: cover;
  background: var(--raise2);
  box-shadow: 0 1px 3px rgba(90, 66, 30, 0.25);
}
.rc-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.rc-meta b {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-meta span { font-size: 11px; color: var(--ink3); }

/* 参考构筑标题行右边的三个导出键（ourygo / ydk 文本 / ydk 文件）。
   标题行本身是 flex + baseline，`.card-note` 有 margin-left:auto 把这几颗推到最右，
   所以这里只管横排和间距，别再给自己加 auto 边距 —— 会把 note 挤到中间去。 */
.rc-ops { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: 10px; }
.rc-ops .chip { font-size: 11.5px; }
.rc-ops-miss { font-size: 11px; color: var(--ink3); margin-left: 2px; }

.rc-tip {
  font-size: 12px;
  color: var(--ink2);
  background: var(--raise);
  border-left: 2px solid var(--gold-line);
  border-radius: 0 6px 6px 0;
  padding: 7px 10px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.rc-build {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.rc-col {
  background: var(--raise);
  border: 1px solid var(--line2);
  border-radius: 9px;
  overflow: hidden;
}
.rc-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--line2);
  background: var(--raise2);
}
.rc-col-head em { font-style: normal; font-size: 11px; color: var(--ink3); font-weight: 400; }
.rc-rows { padding: 4px 0; }
.rc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.rc-row[data-card] { cursor: pointer; }
.rc-row[data-card]:hover { background: var(--gold-bg); color: var(--gold-ink); }
.rc-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-n { color: var(--ink3); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.rc-none { padding: 10px; font-size: 12px; color: var(--ink3); }

.rc-sub {
  margin: 16px 0 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.rc-sub em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--ink3); margin-left: 6px; }
.rc-table-wrap { max-height: 340px; overflow: auto; border: 1px solid var(--line2); border-radius: 9px; }
.rc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rc-table th {
  position: sticky;
  top: 0;
  background: var(--raise2);
  z-index: 1;
  text-align: left;
  padding: 7px 10px;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--ink2);
  border-bottom: 1px solid var(--line);
}
.rc-table td { padding: 5px 10px; border-bottom: 1px solid var(--line2); }
.rc-table tr[data-card] { cursor: pointer; }
.rc-table tr[data-card]:hover td { background: var(--gold-bg); }
.rc-table .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink2); }
.rc-table .rc-sec { color: var(--ink3); font-size: 11.5px; }

/* ══ 截图辨认 ══════════════════════════════════════════════════════ */
.chip.danger {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  color: var(--brand);
}
.rg-drop {
  margin-top: 10px;
  padding: 26px 18px 28px;
  min-height: 178px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--line3);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  background: var(--raise);
  transition: border-color 0.15s, background 0.15s;
}
.rg-drop:hover, .rg-drop.over {
  border-color: var(--gold);
  background: var(--gold-bg);
}
.rg-art { display: flex; gap: 6px; margin-bottom: 12px; }
.rg-art img {
  width: 30px;
  height: 42px;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(90, 66, 30, 0.3);
  transform: rotate(-9deg);
  opacity: 0.9;
}
.rg-art img:nth-child(2) { transform: rotate(0deg) translateY(-5px); }
.rg-art img:nth-child(3) { transform: rotate(9deg); }
.rg-title { font-size: 14px; font-weight: 600; }
.rg-sub { font-size: 11.5px; color: var(--ink3); margin-top: 5px; }
.rg-preview { margin-top: 10px; }
.rg-preview:empty { display: none; }
.rg-preview { text-align: center; }
.rg-preview img {
  max-width: 100%;
  max-height: 170px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-block;
  box-shadow: 0 2px 8px -4px rgba(90, 66, 30, 0.5);
}
.rg-hint { font-size: 12.5px; color: var(--ink2); line-height: 1.75; }
.rg-hint b { display: block; margin-bottom: 6px; color: var(--ink); }
.rg-hint ul { margin: 0; padding-left: 18px; }
.rg-busy { padding: 28px; text-align: center; color: var(--ink3); font-size: 13px; }

.card.warn { border-color: var(--gold-line); }
.rg-sum { font-size: 13px; line-height: 1.6; margin-bottom: 9px; }
.rg-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-guess-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.rg-guess-label { font-size: 12px; color: var(--ink3); }
.rg-guess { cursor: pointer; }
.rg-guess em { font-style: normal; opacity: 0.7; margin-left: 3px; font-size: 11px; }
.rg-actions { display: flex; gap: 8px; margin-top: 12px; }
/* .btn-lite 全局是 margin-left:auto（用在卡片标题右侧），这里要贴左排 */
.rg-actions .btn-lite { margin-left: 0; }

.rg-sec { margin-bottom: 14px; }
.rg-sec-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 8px;
}
.rg-sec-head em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--ink3); }
.rg-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px;
}
.rg-tile {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 5px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.rg-tile:hover { border-color: var(--gold); transform: translateY(-1px); }
.rg-tile.low { border-color: var(--danger-line); }
.rg-tile.low::after {
  content: "存疑";
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 10px;
  padding: 0 4px;
  border-radius: 4px;
  color: var(--brand);
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
}
.rg-tile img { width: 100%; border-radius: 4px; display: block; background: var(--raise2); }
.rg-nophoto {
  display: grid;
  place-items: center;
  height: 74px;
  border-radius: 4px;
  color: var(--ink3);
  background: var(--raise2);
  font-size: 20px;
}
.rg-tile b { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.35; margin-top: 4px; }
.rg-tile .rg-n { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: var(--gold-ink); font-weight: 600; }

@media (max-width: 760px) {
  .rc-build { grid-template-columns: 1fr; }
  .rg-tiles { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}

/* ══ 起手概率 / 卡表生成（功能版块）══════════════════════════════════
   两块共用一组小元件（op-*）：来源切换 tab、条件 chip、检查徽标。
   配色一律走变量，别写字面色值 —— 换肤时这里要跟着变。 */
.op-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.op-row select {
  flex: 1 1 160px; min-width: 0; height: 32px; padding: 0 8px;
  border: 1px solid var(--line3); border-radius: 7px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
}
.op-hint { font-size: 11.5px; color: var(--ink3); line-height: 1.65; }
.op-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.op-tab {
  font: inherit; font-size: 12px; padding: 4px 11px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink2);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.op-tab:hover { border-color: var(--ink3); color: var(--ink); }
.op-tab.on { background: var(--gold-bg2); border-color: var(--gold-line); color: var(--gold-ink); }
.op-tab em { font-style: normal; opacity: 0.7; margin-left: 3px; }
.op-tab.add { border-style: dashed; color: var(--ink3); }

.op-group-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 8px; font-size: 12px; color: var(--ink2);
}
.op-group-head input[type="number"] {
  width: 52px; height: 27px; padding: 0 6px; text-align: center;
  border: 1px solid var(--line3); border-radius: 6px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 12px;
}
.op-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; align-items: flex-start; }
.op-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 3px 4px 3px 8px; border-radius: 6px;
  background: var(--raise); border: 1px solid var(--line);
}
.op-chip i { font-style: normal; cursor: pointer; color: var(--ink3); padding: 0 3px; border-radius: 4px; }
.op-chip i:hover { color: var(--brand); background: var(--danger-bg); }
.op-empty { font-size: 12px; color: var(--ink3); }

.op-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 12px; }
.op-kpi {
  background: var(--raise); border: 1px solid var(--line2);
  border-radius: 9px; padding: 10px 12px;
}
.op-kpi b {
  display: block; font-size: 26px; line-height: 1.2; letter-spacing: 0.5px;
  color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums;
}
.op-kpi.hero b { color: var(--brand); font-size: 34px; }
.op-kpi span { font-size: 11.5px; color: var(--ink3); }

.op-gline { font-size: 12px; color: var(--ink2); line-height: 1.95; margin-bottom: 10px; }
.op-gline em { font-style: normal; color: var(--ink3); margin-left: 6px; }
.op-gtag {
  display: inline-block; font-size: 10.5px; padding: 0 5px; margin-right: 6px;
  border-radius: 4px; background: var(--gold-bg2);
  color: var(--gold-ink); border: 1px solid var(--gold-line);
}

.op-dist {
  display: flex; align-items: flex-end; gap: 8px;
  height: 128px; padding: 8px 4px 0;
  border-bottom: 1px solid var(--line2);
}
.op-bar {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 2px;
}
.op-bar span {
  width: 100%; max-width: 46px; min-height: 2px;
  background: linear-gradient(180deg, var(--gold-line), var(--gold));
  border-radius: 4px 4px 0 0;
}
.op-bar em { font-style: normal; font-size: 10.5px; color: var(--ink3); }
.op-bar i { font-style: normal; font-size: 10px; color: var(--ink3); }

.op-hand { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.op-hand .chip { cursor: pointer; }
.op-hand .fmt-label { font-size: 11.5px; color: var(--ink3); margin-right: 2px; }

.op-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.op-table th {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  text-align: left; font-weight: 500; font-size: 11.5px; color: var(--ink3);
  padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.op-table td { padding: 5px 8px; border-bottom: 1px solid var(--line2); }
.op-table tr.on td { background: var(--gold-bg); }
.op-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.op-table .op-pick { width: 26px; padding-right: 0; }
#op-main { max-height: 54vh; overflow: auto; }
#op-main .op-table th { background: var(--surface); }

.op-check {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink2);
}
.op-check em { font-style: normal; color: var(--ink3); }
.op-check.ok { background: var(--ok-bg); border-color: var(--ok-line); color: #2C7A55; }
.op-check.bad { background: var(--danger-bg); border-color: var(--danger-line); color: var(--brand); }
.op-check.warn { background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-ink); }
.op-checks { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }

/* 卡表生成 */
.dl-grid { grid-template-columns: 362px minmax(0, 1fr); }
.dl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.dl-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink3); }
.dl-form label.wide { grid-column: 1 / -1; }
.dl-form input {
  height: 30px; padding: 0 8px; border: 1px solid var(--line3); border-radius: 7px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px;
}
.dl-form input:focus { border-color: var(--brand); outline: none; }
.dl-frame-wrap {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; min-height: 200px;
}
.dl-frame-wrap iframe {
  position: absolute; top: 0; left: 0; border: 0;
  transform-origin: top left; background: #fff;
}

textarea#op-text, textarea#dl-text {
  width: 100%; padding: 8px 10px; margin-bottom: 8px;
  border: 1px solid var(--line3); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 12.5px; line-height: 1.65; resize: vertical;
}
textarea#op-text:focus, textarea#dl-text:focus { border-color: var(--brand); outline: none; }

/* 禁限徽标：禁止=红、限制=金、准限制=绿。
   只在真被限的卡上出现 —— 无限制的卡不画，满屏小标签等于没有标签。 */
.rc-ban {
  flex: 0 0 auto; font-size: 10.5px; line-height: 1.6;
  padding: 0 5px; border-radius: 4px; border: 1px solid;
}
.rc-ban.ban0 { color: var(--brand); background: var(--danger-bg); border-color: var(--danger-line); }
.rc-ban.ban1 { color: var(--gold-ink); background: var(--gold-bg2); border-color: var(--gold-line); }
.rc-ban.ban2 { color: #2C7048; background: var(--ok-bg); border-color: var(--ok-line); }
.rc-row .rc-nm { flex: 1 1 auto; min-width: 0; }

/* 「参考牌表已经不合当前卡表」的提示块 */
.rc-warn {
  border: 1px solid var(--danger-line); background: var(--danger-bg);
  border-radius: 8px; padding: 9px 11px; margin-bottom: 12px;
  font-size: 12px; color: var(--ink2); line-height: 1.7;
}
.rc-warn b { display: block; color: var(--brand); margin-bottom: 2px; }
.rc-warn-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rc-warn-item {
  display: inline-flex; flex-direction: column; gap: 1px; cursor: pointer;
  font-size: 11.5px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
}
.rc-warn-item em { font-style: normal; font-size: 10.5px; color: var(--ink3); }
.rc-short { color: var(--brand); }

/* 「AI 建议」那一块（后台生成参考构筑后才有）。
   视觉上要比上面的「按投入率拼出来的」**明显低一档** —— 上面是统计，
   这里是模型看着统计写的，不能让人一眼看过去分不清谁是谁。 */
.rc-ai {
  margin-top: 14px; padding: 12px 13px;
  border: 1px dashed var(--gold-line); background: var(--gold-bg);
  border-radius: 10px;
}
.rc-ai-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.rc-ai-head b { font-size: 13.5px; color: var(--gold-ink); }
.rc-ai-head em { font-style: normal; font-size: 11px; color: var(--ink3); }
.rc-ai-tag {
  font-size: 10.5px; color: var(--ink3); border: 1px solid var(--gold-line);
  border-radius: 999px; padding: 1px 7px;
}
.rc-ai-notes {
  font-size: 12.5px; line-height: 1.8; color: var(--ink2);
  margin-bottom: 10px; padding-left: 9px; border-left: 2px solid var(--gold-line);
}
.rc-ai .rc-col { background: var(--surface); }
.rc-ai-drop {
  margin-top: 8px; font-size: 11px; color: var(--ink3); line-height: 1.7;
}

@media (max-width: 1100px) {
  .dl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .op-kpis { grid-template-columns: 1fr 1fr; }
  .dl-form { grid-template-columns: 1fr; }
  .dl-form label.wide { grid-column: auto; }
}

/* ══ Master Duel 版块 ═══════════════════════════════════════════════
   ⚠️ 这一段的类名都以 `md-` 开头，和攻略正文的 `.md-body` / `.md-table`
      （markdown 渲染）只差一个字母。新增类名时别撞上那两个。
   版式参考线下页：KPI 四格 → 左饼图右榜单 → 卡组榜 → 底部脚注。 */

.md-src { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 10px; }

/* 拿的是旧缓存、后台在刷 —— 明说，别让人以为数字是刚抓的 */
.md-stale {
  border: 1px solid var(--gold-line); background: var(--gold-bg);
  color: var(--gold-ink); border-radius: 8px; padding: 7px 11px;
  font-size: 12px; margin-bottom: 12px;
}

/* ── Tier 榜 ── */
.md-tier-head,
.md-trow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 52px 74px;
  align-items: center;
  gap: 8px;
}
.md-tier-head {
  font-size: 11px; color: var(--ink3);
  padding: 0 4px 4px; border-bottom: 1px solid var(--line2);
}
.md-tier-head span:nth-child(2),
.md-tier-head span:nth-child(3) { text-align: right; }
.md-tiers { display: flex; flex-direction: column; gap: 11px; padding-top: 9px; }
.md-tier-cap { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.md-tier-cap em { font-style: normal; font-size: 11px; color: var(--ink3); }

.md-tier {
  display: inline-block; font-size: 10.5px; font-weight: 600; line-height: 1;
  padding: 3px 6px; border-radius: 4px; flex: 0 0 auto;
  border: 1px solid var(--line); color: var(--ink2); background: var(--raise);
}
.md-tier.t1 { background: var(--brand); border-color: var(--brand); color: #fff; }
.md-tier.t2 { background: var(--gold-bg2); border-color: var(--gold-line); color: var(--gold-ink); }
.md-tier.t3 { background: var(--raise2); border-color: var(--line3); color: var(--ink2); }
.md-tier.t4 { background: var(--raise2); border-color: var(--line2); color: var(--ink3); }
.md-tier.t0 { background: transparent; color: var(--ink3); }

.md-trow { padding: 4px; border-radius: 6px; cursor: pointer; }
.md-trow:hover { background: var(--line2); }
/* untapped 里没有同名卡组（引擎类很常见）→ 不能点，也不能假装有份额 */
.md-trow.dim { cursor: default; }
.md-trow.dim:hover { background: transparent; }
.md-tname { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-eng {
  font-style: normal; font-size: 9.5px; line-height: 1; margin-left: 5px;
  padding: 2px 4px; border-radius: 3px; vertical-align: 1px;
  border: 1px solid var(--line3); color: var(--ink3);
}
/* 中文名下面那行英文原名（卡组库的卡组瓷砖、卡包档案 / 展开路线）。
   源站的英文名保留，一是方便对照攻略，二是给「搜英文也能搜到」一个交代。 */
.md-ten {
  display: block; font-style: normal; font-weight: 400;
  font-size: 10.5px; line-height: 1.2; color: var(--ink3); margin-top: 2px;
  letter-spacing: 0; opacity: .85;
}
.md-tshare, .md-twin {
  font-size: 11.5px; text-align: right; color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.md-twin.hot { color: var(--brand); font-weight: 500; }
.md-tbar { height: 4px; background: var(--line2); border-radius: 2px; overflow: hidden; }
.md-tbar i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }
.md-tmore { font-size: 11px; color: var(--ink3); padding: 2px 4px 0; }

/* 卡组榜每条下面的小字（流行度 / 造价） */
.md-row-meta { font-size: 10.5px; color: var(--ink3); margin-top: 2px; padding-left: 22px; }

/* ── 热门卡网格 ── */
.md-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.md-card { cursor: pointer; }
.md-card-art {
  position: relative; aspect-ratio: 421 / 614; border-radius: 6px; overflow: hidden;
  background: var(--art-bg); border: 1px solid var(--line);
}
.md-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-card:hover .md-card-art { border-color: var(--brand); }
.md-card-pct {
  position: absolute; right: 0; bottom: 0; padding: 2px 5px;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  background: rgba(36, 31, 26, .72); color: #fff; border-radius: 6px 0 0 0;
}
.md-card-name {
  margin-top: 5px; font-size: 11.5px; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 30px;
}
.md-card-bar { height: 3px; background: var(--line2); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.md-card-bar i { display: block; height: 100%; background: var(--brand); border-radius: 2px; }

/* ── 配套工具（外链卡片） ── */
.md-tools {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px;
}
.md-tool {
  display: block; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--raise);
  transition: border-color .15s, background .15s;
}
.md-tool:hover { border-color: var(--brand); background: var(--brand-soft); }
.md-tool b { display: block; font-size: 13px; }
.md-tool span { display: block; font-size: 11.5px; color: var(--ink3); margin-top: 2px; }
.md-tool em { display: block; font-style: normal; font-size: 10.5px; color: var(--gold-ink); margin-top: 5px; }

/* 牌表流水的日期列：日期一行、时间小字起一行。
   ⚠️ 一定要 nowrap —— 默认列宽会把 `2026-11-04` 折成 `2026-11-` / `04` 两行，
      每行都变双倍高（2026-11-04 实测）。 */
.mdp-date { white-space: nowrap; }
.mdp-time {
  display: block; font-style: normal; font-size: 10.5px;
  color: var(--ink3); line-height: 1.2;
}

/* ── 上位牌表筛选条（对齐 masterduelmeta 的 top-decks 页）──────────────
   三个下拉 + 搜索框一行放不下就折行；下拉用原生 select —— 自定义下拉要
   自己处理键盘 / 点外部关闭 / 移动端，为三个选项不值得。 */
.mdp-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mdp-sel { display: flex; flex-direction: column; gap: 4px; }
.mdp-sel > span { font-size: 11px; color: var(--ink3); }
.mdp-sel select {
  height: 34px; min-width: 132px; padding: 0 10px;
  border: 1px solid var(--line3); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-family: inherit; cursor: pointer;
}
.mdp-sel select:hover { border-color: var(--gold-line); }

/* 分享 / 来源：和按钮同一行，字号压小 —— 表格里它是配角 */
.mdp-act { white-space: nowrap; }
.mdp-share {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border: 1px solid var(--line3); border-radius: 6px;
  font-size: 12px; color: var(--ink2); background: var(--raise);
  cursor: pointer; user-select: none;
}
.mdp-share:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.mdp-share.inline { margin-left: 2px; height: 20px; }
.mdp-src { margin-left: 8px; font-size: 12px; color: var(--brand); text-decoration: none; }
.mdp-src:hover { text-decoration: underline; }

/* 分享面板：fixed 定位挂在按钮下方，点别处 / 切页就收起 */
.md-share-pop {
  position: fixed; z-index: 260; width: 292px; padding: 8px;
  border: 1px solid var(--line3); border-radius: 10px;
  background: var(--surface); box-shadow: 0 14px 34px rgba(60, 40, 20, .18);
}
.md-share-pop button {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); font-family: inherit; cursor: pointer;
}
.md-share-pop button:hover { background: var(--raise2); }
.md-share-pop button b { display: block; font-size: 13px; font-weight: 600; }
.md-share-pop button span { display: block; font-size: 11px; color: var(--ink3); margin-top: 2px; }
.md-share-head {
  padding: 4px 10px 8px; margin-bottom: 6px; font-size: 12px; color: var(--ink2);
  border-bottom: 1px solid var(--line2);
}
.md-share-head em { float: right; font-style: normal; color: var(--ink3); }
.md-share-warn {
  margin: 6px 10px 2px; font-size: 11px; line-height: 1.55; color: var(--gold-ink);
}
.md-share-err { padding: 10px; font-size: 12px; color: var(--ink3); }

@media (max-width: 1080px) {
  .md-tier-head, .md-trow { grid-template-columns: minmax(0, 1fr) 48px 48px; }
  .md-tier-head span:last-child, .md-tbar, .md-tmore { display: none; }
}
@media (max-width: 760px) {
  .md-cards { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .md-tools { grid-template-columns: 1fr; }
}

/* ── Master Duel 工具（构筑器 / 卡库 / 禁限 / 小世界 / 联栗炮）──────
   2026-11-04：配套工具从外链改成站内，这一块是它们共用的版式。
   命名统一 mdt- 前缀，别和 md-（环境概览）/ mdp-（牌表流水）混。 */
.mdt-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mdt-tab {
  flex: 1 1 150px; text-align: left; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--raise); color: var(--ink); font-family: inherit; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mdt-tab b { display: block; font-size: 13px; font-weight: 600; }
.mdt-tab span { display: block; margin-top: 2px; font-size: 11px; color: var(--ink3); }
.mdt-tab:hover { border-color: var(--gold-line); }
.mdt-tab.on { border-color: var(--brand); background: var(--brand-soft); }
.mdt-tab.on b { color: var(--brand); }

/* 构筑器：左找卡右卡组，窄屏堆叠 */
.mdt-build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 14px; }
.mdt-pane { display: flex; flex-direction: column; min-width: 0; }
.mdt-search, .mdt-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mdt-search select, .mdt-filter select, .mdt-filter input {
  height: 34px; min-width: 108px; padding: 0 9px;
  border: 1px solid var(--line3); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font-size: 12.5px; font-family: inherit;
}
.mdt-filter .mdp-sel input { min-width: 150px; }
.mdt-res { max-height: 560px; overflow: auto; }
.mdt-row, .mdt-drow, .mdt-bridge, .mdt-sugrow {
  display: flex; align-items: center; gap: 9px;
  padding: 6px; border-radius: 8px;
}
.mdt-row:hover, .mdt-sugrow:hover { background: var(--raise2); }
.mdt-row-main { flex: 1; min-width: 0; }
/* ⚠️ 一定要 `>`：小世界的「与 A 同<b>等级</b>」是嵌套 b，
   写成后代选择器会把它们各自变成一块，一行文字被拆成两行。 */
.mdt-row-main > b, .mdt-row-main > span { display: block; }
.mdt-row-main b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdt-row-main span { font-size: 11px; color: var(--ink3); }
.mdt-thumb { width: 64px; height: 92px; border-radius: 5px; object-fit: cover; background: var(--line2); flex: none; }
.mdt-thumb.sm { width: 28px; height: 40px; }
.mdt-thumb.none { display: inline-flex; align-items: center; justify-content: center; color: var(--ink3); font-size: 11px; }
.mdt-add {
  width: 26px; height: 26px; flex: none; border: 1px solid var(--line3);
  border-radius: 7px; background: var(--raise); color: var(--brand);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.mdt-add:hover { border-color: var(--brand); background: var(--brand-soft); }
.mdt-ban { font-size: 10px; }
.mdt-none { padding: 10px 4px; font-size: 12px; color: var(--ink3); }

.mdt-deck { display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow: auto; }
.mdt-dsec { border: 1px solid var(--line2); border-radius: 9px; padding: 6px 8px; }
.mdt-dhead { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 2px 4px; }
.mdt-dhead b { font-size: 12.5px; }
.mdt-dcount { font-size: 11.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.mdt-dcount.bad { color: var(--brand); font-weight: 600; }
.mdt-dcount.dim { color: var(--ink3); }
.mdt-drow { padding: 3px 2px; }
.mdt-drow .mdt-row-main b { font-size: 12px; }
.mdt-step { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.mdt-step button {
  width: 22px; height: 22px; border: 1px solid var(--line3); border-radius: 6px;
  background: var(--raise); color: var(--ink2); cursor: pointer; font-size: 12px; line-height: 1;
}
.mdt-step button:hover { border-color: var(--brand); color: var(--brand); }
.mdt-step em { min-width: 14px; text-align: center; font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; }
.mdt-sum { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink2); padding: 2px; }
.mdt-warn { margin-top: 6px; font-size: 11.5px; color: var(--gold-ink); line-height: 1.6; }
.mdt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mdt-actions .chip { cursor: pointer; }
.mdt-imp { margin-top: 10px; font-size: 12px; }
.mdt-imp summary { cursor: pointer; color: var(--ink2); }
.mdt-imp textarea {
  width: 100%; min-height: 84px; margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--line3); border-radius: 8px; resize: vertical;
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 12px;
}

/* 卡库：一屏 8 列的缩略图 */
.mdt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.mdt-cg { cursor: pointer; min-width: 0; }
.mdt-cg-art { position: relative; }
.mdt-cg .mdt-thumb { width: 100%; height: auto; aspect-ratio: 59 / 86; }
.mdt-cg:hover .mdt-thumb { outline: 2px solid var(--brand); }
.mdt-cg b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 11.5px; line-height: 1.3; margin-top: 4px; min-height: 30px;
}
.mdt-cg span { display: block; font-size: 10.5px; color: var(--ink3); }
.mdt-cg-ban, .mdt-cg-rar {
  position: absolute; left: 2px; top: 2px; padding: 1px 4px; border-radius: 4px;
  font-size: 9.5px; font-style: normal; background: rgba(36, 31, 26, .78); color: #fff;
}

/* 禁限：三列里每行右挂罕贵 */
.mdt-banhint { font-size: 11px; color: var(--ink3); margin: 2px 0 6px; }
.bl-item .mdt-rar { margin-left: auto; font-size: 10px; flex: none; }

/* 小世界 */
.mdt-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.mdt-pick { position: relative; }
.mdt-picked { display: flex; gap: 10px; align-items: flex-start; }
.mdt-picked b { display: block; font-size: 13px; }
.mdt-picked span { display: block; font-size: 11.5px; color: var(--ink3); margin: 3px 0 8px; }
.mdt-sug { margin-top: 4px; }
.mdt-sugrow { cursor: pointer; }
.mdt-sugrow b { font-size: 12px; flex: 1; min-width: 0; }
.mdt-sugrow span { font-size: 11px; color: var(--ink3); }
.mdt-props { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.mdt-prop { font-size: 11.5px; color: var(--ink2); }
.mdt-bridges { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px; }
.mdt-bridge { border: 1px solid var(--line2); }
.mdt-bridge .mdt-row-main span b { color: var(--brand); font-weight: 600; }

/* 联栗炮 */
.mdt-eqnote {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--raise2); font-size: 11.5px; line-height: 1.8; color: var(--ink2);
}
.mdt-eqs { display: flex; flex-direction: column; gap: 10px; }
.mdt-eq-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.mdt-eq-head b { font-size: 14px; }
.mdt-eq-head span { font-size: 11.5px; color: var(--ink3); }
.mdt-eq-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.mdt-eq-tag { font-size: 11px; color: var(--ink3); }

@media (max-width: 1080px) {
  .mdt-build { grid-template-columns: 1fr; }
  .mdt-res, .mdt-deck { max-height: none; }
}

/* 卡组行里的禁限标签：必须 flex:none，否则会被行宽拉成一条色带 */
.mdt-drow .tag, .mdt-row .tag { flex: none; font-size: 10px; white-space: nowrap; }
.mdt-drow .mdt-row-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ 卡包档案（#/md-packs）══════════════════════════════════════════
   2026-11-04 新增。列表用 table 而不是卡片网格：卡包之间要横向比的是
   「类型 / 发售 / 包内卡片数」，表格比卡片更容易扫。
   封面图沿用卡图接口（卡包的 icon 卡已经换成站内 cid），取不到就留一个「包」字。 */
.mp-row { cursor: pointer; }
.mp-row:hover { background: var(--line2); }
.mp-row.open { background: var(--brand-soft); }
.mp-cover { width: 56px; }
.mp-cover img, .mp-cover span {
  display: block; width: 40px; height: 58px; border-radius: 4px;
  object-fit: cover; background: var(--raise2); border: 1px solid var(--line2);
}
.mp-cover span {
  font-size: 10px; color: var(--ink3); text-align: center; line-height: 58px;
}
.mp-en { display: block; font-size: 11px; color: var(--ink3); font-style: normal; margin-top: 2px; }
.mp-desc {
  font-size: 12px; line-height: 1.8; color: var(--ink2);
  margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--raise2);
}

/* ══ 展开路线（#/md-combos）═════════════════════════════════════════
   一条路线 = 一张卡（或几张）→ 若干步骤。列表卡片故意做得比卡组卡轻：
   这里一屏可能出现 20 条，标题 + 起手卡 + 赞踩就够判断要不要点开了。 */
.mc-list { display: flex; flex-direction: column; gap: 8px; }
.mc-item {
  border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px;
  background: var(--surface); cursor: pointer;
}
.mc-item:hover { border-color: var(--gold); }
.mc-item.open { border-color: var(--brand); background: var(--brand-soft); }
.mc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mc-head b { font-size: 13.5px; line-height: 1.5; }
.mc-vote { margin-left: auto; font-size: 11.5px; color: var(--ink3); font-style: normal; }
.mc-starts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mc-start {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px;
  border: 1px solid var(--line2); border-radius: 8px; background: var(--raise2);
  font-size: 11.5px; color: var(--ink2);
}
.mc-start img { width: 24px; height: 35px; border-radius: 3px; object-fit: cover; }
.mc-start[data-mdt-open] { cursor: pointer; }
.mc-start[data-mdt-open]:hover { border-color: var(--brand); color: var(--brand); }
.mc-meta { font-size: 11px; color: var(--ink3); margin-top: 8px; }
.mc-body:empty { display: none; }
.mc-body { margin-top: 10px; border-top: 1px dashed var(--line2); padding-top: 10px; }

.mc-dhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.mc-dhead b { font-size: 14px; }
.mc-dhead em { margin-left: auto; font-size: 11.5px; color: var(--ink3); font-style: normal; }
.mc-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mc-step { display: flex; gap: 10px; }
.mc-n {
  flex: none; width: 20px; height: 20px; border-radius: 50%; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; margin-top: 2px;
}
.mc-st { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mc-entry { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mc-ec {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px;
  border: 1px solid var(--line2); border-radius: 8px; font-size: 11.5px;
  background: var(--raise2);
}
.mc-ec img { width: 22px; height: 32px; border-radius: 3px; object-fit: cover; }
.mc-ec[data-mdt-open] { cursor: pointer; }
.mc-ec[data-mdt-open]:hover { border-color: var(--brand); color: var(--brand); }
.mc-text { font-size: 12px; color: var(--ink2); line-height: 1.7; }
.mc-notes {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  background: var(--raise2); font-size: 11.5px; line-height: 1.8; color: var(--ink2);
}

/* ══ 分享卡组码（构筑器）════════════════════════════════════════════
   码要当主角：字号给到 20px、等宽字体、可选中 —— 用户多半是手抄或口述。 */
.mdt-share {
  margin-top: 10px; padding: 10px; border-radius: 10px;
  border: 1px dashed var(--gold); background: var(--raise2);
}
.mdt-share-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 20px; letter-spacing: 2px; color: var(--brand);
  user-select: all; word-break: break-all; line-height: 1.3;
}
.mdt-share-sub { font-size: 11.5px; color: var(--ink3); margin: 4px 0 8px; }
.mdt-share-tip { font-size: 11px; color: var(--ink3); line-height: 1.7; margin-top: 8px; }
.mdt-code-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.mdt-code-row input {
  font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px;
}

/* ══ 牌表详情的「分享 / 导出」（2026-11-04）══════════════════════════
   按钮紧跟在 masterduelmeta 外链后面（都在 .ld-deck-head 里），
   面板插在这一行下面 —— 不做弹窗，卡表本来就长，弹窗会把卡挡住。 */
.ld-deck-head .mdshare-btn { margin-left: 6px; }
.mdshare-host { margin: 8px 0 10px; }
.mdt-share-host .mdt-share { margin-top: 0; }

/* ══ 任意构筑的「分享 / 导出」（2026-11-05）══════════════════════════
   线上 / 线下 / 天梯都用同一套，位置对齐 Master Duel：按钮贴在标题行，
   「ourygo 原始牌表 ↗」后面紧跟一个，面板插在这一行下面。
   （原先在三列右上角，用户要求挪到外链旁边，2026-11-05 改。）
   不要给它 `order` 或绝对定位 —— flex 换行时标题行会自动折行，绝对定位会盖住标题。 */
.ld-deck-head .dk-share { margin-left: 6px; cursor: pointer; white-space: nowrap; }
.dk-share-host { margin: 8px 0 2px; }

/* ══ 决斗计算器（#/duel）══════════════════════════════════════════════
   参考 doctordc.cn/duel-calculator 的排布：上面计时，中间两块 LP，
   下面是场攻 / 工具 / 输入区 / 键盘。改的地方只有配色（跟着本站卡纸底走）
   和尺寸（手机上 LP 两块并排，键盘 5 列，拇指够得着）。
   ⚠️ 数值一律 `tabular-nums` + 固定位数，倒数时不左右抖。 */
.duel { max-width: 720px; display: flex; flex-direction: column; gap: 10px; }
.duel, .duel button { font-variant-numeric: tabular-nums; }

/* ── 计时 ── */
.duel-timer {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; box-shadow: 0 1px 0 var(--line2);
}
.duel-timer.on { border-color: var(--gold-line); box-shadow: 0 0 0 1px var(--gold-bg2); }
.duel-timer-main { display: flex; align-items: center; gap: 12px; }
.duel-tstat {
  flex: 1; display: flex; align-items: baseline; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.duel-tstat span { font-size: 12px; color: var(--ink3); }
.duel-tnum { font-size: 26px; letter-spacing: .5px; color: var(--ink); }
.duel-timer-btns { display: flex; gap: 6px; }
.duel-tedit { margin-top: 10px; }
.duel-edit-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink2); }
.duel-mini {
  width: 58px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--raise); color: var(--ink); font-size: 15px; text-align: center;
}

/* ── 通用按钮 ── */
.duel-btn {
  padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line3);
  background: var(--raise); color: var(--ink); font-size: 13px; cursor: pointer;
}
.duel-btn:hover { border-color: var(--gold-line); background: var(--gold-bg); }
.duel-btn.ghost { background: transparent; color: var(--ink2); }
.duel-btn.danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--brand); }
.duel-mini-btn {
  padding: 4px 8px; font-size: 11px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink3);
}
.duel-mini-btn:hover { color: var(--ink); border-color: var(--line3); }

/* ── 两位玩家 ── */
.duel-players { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duel-p {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px 12px;
}
.duel-p1 { border-top: 3px solid #4a7fbe; }
.duel-p2 { border-top: 3px solid var(--brand); }
.duel-p-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.duel-pname { font-size: 12px; color: var(--ink2); display: flex; align-items: center; gap: 6px; }
.duel-pname i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35; }
.duel-pname b { font-size: 10px; color: var(--ink3); font-weight: 500; }
.duel-score {
  display: flex; align-items: baseline; gap: 6px; padding: 3px 9px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink2);
}
.duel-score span { font-size: 11px; }
.duel-score b { font-size: 14px; color: var(--ink); }
.duel-lp {
  display: block; width: 100%; margin: 10px 0; padding: 8px 4px 10px; cursor: pointer;
  border: 1px dashed var(--line3); border-radius: 10px; background: transparent;
  text-align: center; color: var(--ink);
}
.duel-lp-lab { display: block; font-size: 10px; letter-spacing: .12em; color: var(--ink3); }
.duel-lp-lab i { font-style: normal; opacity: .7; }
.duel-lp-num { display: block; font-size: 34px; line-height: 1.15; letter-spacing: -.5px; }
.duel-lp-hint { font-size: 10px; color: var(--ink3); }
.duel-lp.on, .duel-score.on, .duel-cnt.on, .duel-atk.on {
  border-color: var(--gold); background: var(--gold-bg);
  box-shadow: 0 0 0 1px var(--gold-line) inset;
}
.duel-lp.on .duel-lp-hint { color: var(--gold-ink); }
.duel-cnt-row { display: flex; align-items: center; gap: 8px; }
.duel-cnt {
  flex: 1; display: flex; align-items: baseline; justify-content: space-between;
  padding: 5px 10px; cursor: pointer; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink2); font-size: 12px;
}
.duel-cnt b { font-size: 15px; color: var(--ink); }

/* ── 场攻 ── */
.duel-atk {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; text-align: left; color: var(--ink);
}
.duel-atk-copy { flex: 1; min-width: 0; }
.duel-atk-lab { display: block; font-size: 12px; color: var(--ink2); }
.duel-atk-lab i { font-style: normal; font-size: 10px; color: var(--ink3); margin-left: 6px; }
.duel-atk-expr {
  display: block; margin-top: 3px; font-size: 14px; color: var(--ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.duel-atk-ans { display: flex; align-items: baseline; gap: 4px; }
.duel-atk-ans i { color: var(--ink3); font-style: normal; }
.duel-atk-ans strong { font-size: 22px; }

/* ── 工具条 ── */
.duel-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.duel-tool {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 9px 10px; cursor: pointer; color: var(--ink2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px; font-size: 12px;
}
.duel-tool b { font-size: 15px; color: var(--ink); }
.duel-tool i { font-style: normal; color: var(--ink3); }
.duel-tool.on { border-color: var(--gold-line); background: var(--gold-bg); }

/* 掷骰 / 抛硬币的过程（2026-11-06）：滚动时边框与数字都在动，
   落定后再弹一下 —— 连着两次掷出同一个数也看得出「确实重掷了」。 */
.duel-tool.rolling {
  border-color: var(--gold-line);
  background: var(--gold-bg);
  animation: duelShake .28s linear infinite;
}
.duel-tool.rolling b { color: var(--gold-ink); }
.duel-tool.roll-hit { animation: duelPop .42s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes duelShake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-1px, 1px) rotate(-1.6deg); }
  50% { transform: translate(1px, -1px) rotate(1.4deg); }
  75% { transform: translate(-1px, -1px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes duelPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.13); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .duel-tool.rolling, .duel-tool.roll-hit { animation: none; }
}

/* ── 输入区 ── */
.duel-editor {
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 12px 10px;
}
.duel-ed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.duel-ed-tgt { font-size: 12px; color: var(--gold-ink); }
.duel-ed-stat { font-size: 11px; color: var(--ink3); text-align: right; }
.duel-ed-expr {
  margin-top: 4px; font-size: 20px; min-height: 26px; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.duel-ed-expr.done { color: var(--ink); }
.duel-ph { color: var(--ink3); font-size: 13px; font-style: normal; }

/* ── 键盘 ── */
.duel-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.duel-key {
  padding: 12px 0; font-size: 17px; cursor: pointer; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.duel-key:active { transform: translateY(1px); }
.duel-key.op { color: var(--gold-ink); background: var(--gold-bg); border-color: var(--gold-line); }
.duel-key.act { font-size: 13px; color: var(--ink2); background: var(--raise); }
.duel-key.ok { font-size: 14px; color: #fff; background: var(--brand); border-color: var(--brand); }
.duel-key.zero { grid-column: span 1; }
.duel-keys.off { opacity: .45; pointer-events: none; }

/* ── 重置确认 ── */
.duel-mask {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(36, 31, 26, .28); padding: 16px;
}
.duel-dialog {
  width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 18px 40px rgba(36, 31, 26, .18);
}
.duel-dialog p { margin: 0 0 4px; font-size: 12px; color: var(--ink3); }
.duel-dialog .duel-btn { text-align: left; }
.duel-dialog .duel-btn small { display: block; font-size: 11px; color: var(--ink3); margin-top: 2px; }

@media (max-width: 760px) {
  .duel-lp-num { font-size: 27px; }
  .duel-tnum { font-size: 22px; }
  .duel-tools { grid-template-columns: repeat(2, 1fr); }
  .duel-key { padding: 14px 0; }
  .duel-atk-ans strong { font-size: 19px; }
}

/* ══ 版块关闭提示（2026-11-05）═════════════════════════════════
   ⚠️ 前台**不放**任何指向 /admin 的入口（2026-11-05 站主明确要求：
   网站要对外开放，不能让访客看到后台）。站主用「打开后台.bat」直接进。 */

.page-closed { max-width: 560px; }
.page-closed .card-title { margin-bottom: 6px; }