/* ══════════════════════════════════════════════════════════════════════
   主题层 · 卡纸质感（2026-11-03 由暗色决斗盘改回浅色）
   ──────────────────────────────────────────────────────────────────────
   为什么单独一个文件、而不是继续往 style.css 里叠：
     style.css 承担「结构与排版」；这一层只管「气质」。
     分开的好处是回滚只需要删掉 index.html 里的一个 <link>。

   这一版的取色逻辑跟暗色版一样来自卡背，只是把「卡背」当成了**背光看**：
   卡背的暗红金边，落在卡纸米底上就是一叠实体卡 ——
     --bg        卡纸米（不是纯白，纯白会让金色描边脏掉）
     --surface   卡面白（比底色亮一档，卡片才浮得起来）
     --brand     卡背暗红，只在「涨 / 冠军 / 强调」出现
     --gold      烫金，用于激活态与分隔线
   装饰强度仍然按「克制」走：金色只出现在分隔线 / 激活态 / 徽标 / 卡边框。

   ⚠️ 本文件必须在 style.css **之后**加载，靠顺序覆盖同优先级规则。
   ⚠️ 卡背图案在 assets/img/cardback.svg（由 _gen_cardback.py 生成），
      是真正的游戏王卡背：深褐底 + 橙金描边 + 中心暗椭圆 + 金色螺旋涡流，
      不是之前那个「同心圆 + 八向放射」的罗盘纹。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 0. 底层：卡纸底 + 极淡的卡背线纹 ──────────────────────────────
   浅色主题不能平铺整张深色卡背（会变成一块块脏斑），
   所以用 cardback-line.svg —— 抽出漩涡线、去掉底色，
   压到 8% 当纸纹，滚动时固定不动，像印在纸里的暗纹。 */
body {
  background:
    radial-gradient(1100px 620px at 88% -12%, rgba(168, 50, 43, 0.055), transparent 62%),
    radial-gradient(820px 560px at -8% 104%, rgba(176, 138, 62, 0.085), transparent 64%),
    var(--bg);
  background-attachment: fixed, fixed, fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("img/cardback-line.svg");
  background-size: 240px 336px;
  opacity: 0.075;
}
/* 内容必须压在纹样之上；纹样是 fixed 的，滚动时不动，像刻在桌面上 */
.app { position: relative; z-index: 1; }

/* ── 1. 侧栏：一叠立起来的卡册 ───────────────────────────────────────
   右边缘一条金色渐变线替代实线边框 —— 像卡册书脊上的烫金压条。 */
.sidebar {
  border-right: 0;
  background-color: transparent;
  background-image:
    linear-gradient(180deg, transparent 0, var(--gold-line) 14%,
                    var(--gold-line) 86%, transparent 100%),
    linear-gradient(180deg, #FFFDF7 0%, #FBF7EC 100%);
  background-size: 1px 100%, 100% 100%;
  background-position: right top, left top;
  background-repeat: no-repeat, no-repeat;
}

/* 品牌徽标 = 一枚缩小的卡背（直接用生成的 SVG，不再用渐变硬凑） */
.brand-sq {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 0;
  color: transparent;
  background: url("img/cardback.svg") center / 100% 100% no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(120, 70, 20, 0.28);
}
.brand-name { letter-spacing: 1.2px; }

/* 分组标题两侧拉一条渐隐细线，像面板上的刻线 */
.nav-label {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 1.2px;
}
.nav-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* 状态点改成菱形 —— 决斗盘上的卡槽是方的，圆点太像普通监控面板 */
.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  transform: rotate(45deg);
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
}
.nav-item { border-radius: 6px; transition: background 0.15s, color 0.15s; }
.nav-item:hover { background: rgba(120, 90, 40, 0.055); }
.nav-item:hover .nav-dot { transform: rotate(45deg) scale(1.15); }
.nav-item.active {
  background: linear-gradient(90deg, var(--gold-bg2), rgba(245, 232, 200, 0));
  box-shadow: inset 0 0 0 1px var(--gold-line);
  color: var(--gold-ink);
}
.nav-item.active .nav-dot {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(176, 138, 62, 0.55);
}

/* 侧栏底部：决斗盘（纯装饰）。
   图在 `assets/img/duel-disk.png`，由 `_gen_dueldisk.py` 生成（白底已抠成透明）。
   演进：手绘 SVG（用户评「太难看」）→ 图片版（左右双翼）→ 第二版：去掉右翼、
   左翼卡槽改成 上2+下3、顺时针转 90° → 第三版：3 格那翼整体拉长到与 2 格那翼等宽
   （原来是把 3 格压进 2 格的长度里，格子明显偏小）、底部通气口按 3 格重排成 3 条
   → **第四版**：卡槽由矩形改成「凸」字六边形（顶部外端内收，和右翼同一套设计）、
   通气口改细到 4px 并与翼板同倾、左翼再拉长一档。
   → **第五版（2026-11-04）**：用户自己 P 的图，同名覆盖，构图改成
   左 3 格 + 右 2 格 + 中央红盘 + 右侧挂卡槽。文件名没变 → `app.js` 里加了
   `?v=` 破缓存（换图记得把 `DUEL_DISK_VERSION` 加 1）。
   ⚠️ 图片是浅色金属 + 蓝色卡区，压在米色侧栏上要靠一点投影托住，否则像贴纸。 */
.side-disk {
  display: block;
  width: 100%;
  /* 图是「左翼 3 格 + 右翼 2 格」的不对称构图（510×315，左翼比右翼长 1.46 倍）。
     用 210px 右翼尖角会贴到侧栏边缘，收一点留出呼吸位。 */
  max-width: 192px;
  height: auto;
  margin: 2px auto 0;
  filter: drop-shadow(0 4px 7px rgba(90, 66, 30, 0.22));
  user-select: none;
  -webkit-user-drag: none;
}
.side-foot { border: 0; background: none; padding: 0; }

/* ── 2. 顶栏 ─────────────────────────────────────────────────────────
   毛玻璃 + 底部一条中间亮两端灭的金线。 */
.topbar {
  background: rgba(255, 253, 247, 0.82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line2);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent,
    rgba(176, 138, 62, 0.28) 18%, rgba(176, 138, 62, 0.55) 50%,
    rgba(176, 138, 62, 0.28) 82%, transparent);
}
.topbar h1 { letter-spacing: 0.6px; }

/* ── 3. 卡片 = 卡框 ──────────────────────────────────────────────────
   顶部一条极淡的金线（卡名栏烫金的剪影），加内高光 + 柔和投影，
   让面板像一张浮在桌面上的卡，而不是贴上去的色块。
   浅色下投影要短而软：大扩散的灰影在米底上会显脏。 */
.card {
  position: relative;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 42%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(90, 66, 30, 0.05),
    0 10px 22px -18px rgba(90, 66, 30, 0.55);
}
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 1px;
  border-radius: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(176, 138, 62, 0.45), transparent);
}

/* 卡片标题前的金色菱形：一个符号就够，别再加图标 */
.card-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.4px;
}
.card-title::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 1px;
  background: var(--gold);
  transform: rotate(45deg);
}
.card-head { align-items: center; }

/* ── 4. 表格：行悬停时左侧亮起一道卡槽光 ───────────────────────────── */
th { letter-spacing: 0.5px; }
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: rgba(176, 138, 62, 0.055); }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
.rank.top { color: var(--gold-ink); }

/* ── 5. 小元件 ─────────────────────────────────────────────────────── */
.chip {
  background: var(--raise);
  border-color: var(--line);
}
.chip.brand {
  background: var(--brand-soft);
  border-color: var(--brand-line);
}
.tag {
  background: var(--raise);
  border: 1px solid var(--line2);
  color: var(--ink2);
  border-radius: 5px;
}
.mobile-nav { background: rgba(255, 253, 247, 0.94); border-bottom: 1px solid var(--line2); }
.mobile-nav .chip.active {
  background: var(--gold-bg2);
  border-color: var(--gold-line);
  color: var(--gold-ink);
}

/* 抽屉：遮罩用暖黑（纯黑遮罩在米底上偏冷），面板左侧镶一条金边 */
.drawer-mask { background: rgba(40, 30, 16, 0.34); }
.drawer {
  border-left: 1px solid var(--gold-line);
  box-shadow: -18px 0 48px rgba(90, 66, 30, 0.18);
}
.dr-tools { background: var(--surface); }

/* 搜索框：聚焦时金色光环 */
.search-box input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 138, 62, 0.15);
}
.search-box input::placeholder { color: var(--ink3); }

/* ── 6. 卡图 ─────────────────────────────────────────────────────────
   卡图是整站最「游戏王」的东西，给它一点实体感：金边 + 悬浮微放大。 */
.card-art {
  border-color: var(--gold-line);
  box-shadow:
    0 8px 20px -12px rgba(90, 66, 30, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.card-art .art-img { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1); }
.card-art.has-img:hover .art-img { transform: scale(1.03); }
.card-art.art-miss {
  background:
    radial-gradient(circle at 50% 50%, rgba(176, 138, 62, 0.10) 0 34%, transparent 68%),
    var(--art-bg);
  border-style: solid;
  border-color: var(--line);
}

/* 卡组卡片 */
.deck-card {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  background: var(--surface);
}
.deck-card:hover { border-color: var(--gold-line); }
.deck-card.active {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-bg), rgba(245, 232, 200, 0.18));
  box-shadow: inset 0 0 0 1px var(--gold-line), 0 6px 16px -10px rgba(176, 138, 62, 0.5);
}
.deck-card.active h4 { color: var(--gold-ink); }
.src-tab.active {
  border-color: var(--gold);
  background: var(--gold-bg);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.src-tab.active b { color: var(--gold-ink); }

/* ── 7. 牌表三列：用卡片种类上色 ─────────────────────────────────────
   主卡组 = 怪兽（橙）/ 额外 = 紫（融合·同调·超量·连接共用的色）/
   副卡组 = 青（魔法陷阱多半在副卡组）。表头左侧的图标由 app.js 的
   `deckColumn()` 塞进来，颜色在这里定义，别在 JS 里写死。 */
.dk-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dk-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 4px;
}
.dk-kind svg { width: 12px; height: 12px; display: block; }
.dk-kind.k-main { color: #B26A18; background: rgba(224, 164, 94, 0.20); }
.dk-kind.k-extra { color: #7B4BA8; background: rgba(168, 124, 200, 0.20); }
.dk-kind.k-side { color: #1E7F68; background: rgba(95, 191, 168, 0.20); }

/* ── 8. 空态与骨架：卡背兜底，别给用户一片空白 ─────────────────────── */
.empty {
  position: relative;
  color: var(--ink3);
}
.empty::before {
  content: "";
  display: block;
  width: 46px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 5px;
  opacity: 0.55;
  background: url("img/cardback.svg") center / 100% 100% no-repeat;
  box-shadow: 0 3px 9px rgba(90, 66, 30, 0.22);
}
/* 卡片容器里的空态：不要额外撑高，也不要再来一张卡背（上一条已经给了） */
.card > .empty::before { opacity: 0.48; }

/* 骨架屏（.sk-row / .sk-line / .sk-art）的背景走的是 --line2 → --raise2 渐变，
   换色后自动适配，这里不用管。 */

/* ── 9. 滚动条 / 选中 / 焦点 ────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb {
  background: #D6CCB6;
  border-radius: 5px;
  border: 2px solid var(--bg2);
}
::-webkit-scrollbar-thumb:hover { background: #C2B69C; }
::-webkit-scrollbar-corner { background: var(--bg2); }
* { scrollbar-color: #D6CCB6 var(--bg2); scrollbar-width: thin; }

::selection { background: rgba(176, 138, 62, 0.28); color: var(--ink); }

a:focus-visible,
button:focus-visible,
.nav-item:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* 数字统一用等宽数字，表格纵向才不跳 */
.mono, .kpi-value, .rank, .pie-lab text { font-variant-numeric: tabular-nums; }

/* ── 10. 首页 KPI ───────────────────────────────────────────────────── */
.kpi-value { letter-spacing: -0.6px; }
.kpi-label { letter-spacing: 0.4px; }

/* ── 11. 窄屏 ───────────────────────────────────────────────────────
   小屏上金色装饰减半：屏幕小，装饰密度会显得吵。 */
@media (max-width: 760px) {
  body::before { opacity: 0.055; }
  .card::before { left: 12px; right: 12px; }
  .deck-card { padding-right: 46px; }
  .deck-card::after { right: 11px; width: 23px; height: 33px; margin-top: -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-art .art-img,
  .nav-dot,
  .nav-item,
  tbody tr { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   12. 逐条修补（两轮换肤各踩过的坑，留档）
   ══════════════════════════════════════════════════════════════════════ */

/* ① 激活态统一收金色，红色只留给「涨 / 危险」。
      原来 `.chip.brand` 把筛选条铺成一片红（卡表、赛制、类别几十个 chip），
      红色被稀释后，表格里真正的涨幅反而不显眼了。 */
.chip.brand {
  background: var(--gold-bg2);
  border-color: var(--gold-line);
  color: var(--gold-ink);
}
.mobile-nav .chip.active {
  background: var(--gold-bg2);
  border-color: var(--gold-line);
  color: var(--gold-ink);
}

/* ② 冠军徽章：深红底 + 金边，像一枚奖章。
      注意它是**反色块**，跟主题明暗无关，浅色主题下也不能改成浅底
      （浅底浅金字同样看不见），所以这里写字面色值而不是变量。 */
.rec-badge.champ {
  background: linear-gradient(180deg, #8E2A22, #6B1D17);
  color: #F7E0B8;
  border: 1px solid rgba(176, 138, 62, 0.5);
}
.rec-badge.strong {
  background: var(--gold-bg2);
  color: var(--gold-ink);
}

/* ③ 卡组卡右侧一枚缩略图 —— 卡组库是这个站最「卡」的页面，
      原来固定贴一张卡背，一整屏都是同一张图。
      2026-11-03 起改成**本家卡卡图**（后端 `cover` 给 cid，前端写进 `--art`），
      挑不到本家卡时才退回卡背。 */
.deck-card { padding-right: 52px; }
.deck-card::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 26px;
  height: 37px;
  margin-top: -18px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0.9;
  transform: rotate(-7deg);
  background: url("img/cardback.svg") center / 100% 100% no-repeat;
  box-shadow: 0 2px 6px rgba(90, 66, 30, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: opacity 0.18s, transform 0.18s;
}
.deck-card.has-art::after {
  background-image: var(--art);
  background-size: 100% 100%;
  opacity: 1;
  border-radius: 2px;
}
.deck-card:hover::after { transform: rotate(-7deg) translateY(-1px); }
.deck-card.active::after {
  box-shadow: 0 3px 9px rgba(90, 66, 30, 0.45), 0 0 0 1px var(--gold);
}

/* ④ 饼图横向溢出：窄屏下保持横向滚动，不做整体缩放。
      缩到屏宽虽然「完整」了，但 560→398 是 71% 缩放，同一侧的标签
      在视觉上挤到一起（SVG 里行距是固定坐标，不跟着缩放变），
      比滑一下难看得多。宁可让用户左右拖一点。 */
@media (max-width: 760px) {
  .pie-svg { min-width: 440px; }
}

/* ⑤ 顶栏标题前一枚小菱形，和卡片标题、导航槽位同一套符号语言 */
.topbar h1 { display: flex; align-items: center; gap: 9px; }
.topbar h1::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 1px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ⑥ 搜索结果 / 列表里的选中行：改用浅金底，别整块反白 */
.ld-deck-head .deck-link:hover { background: var(--raise); }

/* ⑦ 类名叫 `.tag.gold`，配的却一直是品牌红 —— 卡组库那一整行类别标签
      （全部 / 混沌 / 闪刀…）因此全站最红，比真正的涨幅还显眼。
      名字本来就叫 gold，拨回金色。 */
.tag.gold {
  background: var(--gold-bg2);
  color: var(--gold-ink);
  border-color: var(--gold-line);
}
.tag-card:hover {
  background: var(--gold-bg2);
  color: var(--gold-ink);
  border-color: var(--gold-line);
}
.chip.brand .chip-n { color: var(--gold-ink); opacity: 0.75; }

/* ⑧ 牌表三列表头间距 */
.dk-col-head { gap: 7px; }

/* ⑨ 卡片种类 / 属性标签（卡查详情页的「怪兽 · 炎属性 · 不死」那一行）。
      配色按游戏王官方属性色，但**按浅色底重新配过**：
      暗色版那套是提亮过的粉彩色，压在米白上会糊成一片；
      这里统一改成「深字 + 同色淡底」，保住色相又保住对比度。 */
.chip.ck-monster { color: #99500C; background: #FBEFE0; border-color: #EFD6B4; }
.chip.ck-spell { color: #0F6E5A; background: #E8F5F0; border-color: #C6E5DA; }
.chip.ck-trap { color: #97386C; background: #FBEDF3; border-color: #EEDACF; }

.chip.ca-light { color: #8A6E12; background: #FBF6E0; border-color: #EADDAF; }
.chip.ca-dark { color: #5B3B8C; background: #F2EDFA; border-color: #DDD2EE; }
.chip.ca-fire { color: #A83A22; background: #FCEEE9; border-color: #F2D3C7; }
.chip.ca-water { color: #1F5F91; background: #EAF3FA; border-color: #CBE0F0; }
.chip.ca-wind { color: #2C7048; background: #EAF5EE; border-color: #CBE4D5; }
.chip.ca-earth { color: #7A5327; background: #F6EFE5; border-color: #E5D6BF; }
.chip.ca-divine { color: var(--gold-ink); background: var(--gold-bg2); border-color: var(--gold-line); }