/* ---------- 配色变量 ----------
   深色为默认（卡面本身是深色调，先做深色）。浅色由 <html data-theme="light">
   覆盖：主题取值在 index.html 的内联脚本里于首次绘制前算好，app.js 负责切换、
   持久化和「跟随系统」的实时响应，所以这里只需要两个静态色板，不用再写
   prefers-color-scheme 媒体查询（同一套浅色值写两遍，改一处漏一处）。
   凡是「两种主题下取值不同」的颜色都收进变量，别在规则里写死色值。 */
:root {
  color-scheme: dark;

  --bg: #0b0910;
  --bg-soft: #14101d;
  --surface: #1a1526;
  --surface-2: #221b30;
  --border: #302641;
  --text: #ece7f5;
  --text-dim: #9b91ad;
  --text-faint: #6d6480;
  --accent: #a855f7;
  --accent-soft: rgba(168, 85, 247, .18);
  --gold: #e0b34a;

  /* 炉石稀有度配色 */
  --r5: #ff8000;
  --r4: #a335ee;
  --r3: #0070dd;
  --r1: #e8e1f0;
  --r2: #e8e1f0;

  /* 稀有度配色在「文字」场景下的版本（深色底上要提亮，浅色底上要压暗） */
  --name-4: #c98cff;
  --name-3: #6fb3ff;

  --radius: 12px;
  --shadow: 0 6px 22px rgba(0, 0, 0, .5);
  --shadow-hover: 0 12px 30px rgba(0, 0, 0, .6);
  --shadow-modal: 0 26px 70px rgba(0, 0, 0, .72);

  --bar-bg: rgba(11, 9, 16, .82);      /* 吸顶工具栏 */
  --overlay: rgba(5, 4, 8, .82);       /* 详情弹层遮罩 */
  --close-bg: rgba(10, 8, 15, .8);     /* 弹层关闭按钮 */
  --chip-bg: rgba(0, 0, 0, .3);        /* 职业横幅里的小胶囊 */
  --tint: rgba(255, 255, 255, .02);    /* 深色底上「提亮一点」的底色 */
  --tint-strong: rgba(255, 255, 255, .07);
  --page-glow:                         /* 页面背景的氛围光 */
    radial-gradient(1100px 520px at 12% -8%, rgba(124, 45, 180, .28), transparent 62%),
    radial-gradient(900px 460px at 92% 0%, rgba(30, 120, 90, .16), transparent 60%);
  --title-grad: linear-gradient(180deg, #fff 6%, #d9c2ff 52%, #8b5cf6 100%);
  --title-glow: 0 0 44px rgba(168, 85, 247, .32);
  --logo-filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .6))
                 drop-shadow(0 0 26px rgba(168, 85, 247, .3));
  --icon-shadow: drop-shadow(0 2px 5px rgba(0, 0, 0, .55));
  --kw-name: #d8b4fe;                  /* 关键词名、组徽标 */
  --kw-strong: #e9d5ff;                /* 卡牌文本里的 <b> */
  --warn-text: #ffc9d2;
  --maxw: 1280px;
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #f2f0f6;
  --bg-soft: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f1f9;
  --border: #e2dcec;
  --text: #1d1729;
  --text-dim: #5f5673;
  --text-faint: #8b8299;
  --accent: #7c3aed;
  --accent-soft: rgba(124, 58, 237, .12);
  --gold: #a1730f;

  --r5: #d9660a;
  --r4: #8b1fd8;
  --r3: #0b62c4;
  --r1: #2b2536;
  --r2: #2b2536;

  --name-4: #8b1fd8;
  --name-3: #0b62c4;

  --shadow: 0 6px 20px rgba(58, 38, 102, .13);
  --shadow-hover: 0 12px 28px rgba(58, 38, 102, .2);
  --shadow-modal: 0 26px 70px rgba(58, 38, 102, .22);

  --bar-bg: rgba(242, 240, 246, .86);
  --overlay: rgba(28, 20, 44, .48);
  --close-bg: rgba(255, 255, 255, .88);
  --chip-bg: rgba(255, 255, 255, .7);
  --tint: rgba(20, 10, 40, .022);
  --tint-strong: rgba(20, 10, 40, .06);
  --page-glow:
    radial-gradient(1100px 520px at 12% -8%, rgba(150, 90, 220, .16), transparent 62%),
    radial-gradient(900px 460px at 92% 0%, rgba(30, 150, 110, .1), transparent 60%);
  --title-grad: linear-gradient(180deg, #2a1a45 8%, #5b21b6 55%, #7c3aed 100%);
  --title-glow: 0 2px 26px rgba(124, 58, 237, .18);
  --logo-filter: drop-shadow(0 4px 13px rgba(70, 30, 120, .22));
  --icon-shadow: drop-shadow(0 2px 4px rgba(58, 38, 102, .35));
  --kw-name: #7c3aed;
  --kw-strong: #6d28d9;
  --warn-text: #a0122b;
}

* { box-sizing: border-box; }

/* 全局兜底：hidden 属性靠浏览器默认的 [hidden]{display:none} 生效，
   而作者样式里的 display 声明会压过浏览器默认样式（与优先级数值无关），
   导致「设了 hidden 却还显示」。用 !important 保证 hidden 一定生效。
   ——「礼物牌」徽标就踩过这个坑：JS 正确设了 hidden，但 .gift-chip 的
   display:inline-block 把它顶掉了，于是每张卡的详情都挂着礼物牌标签。 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  background-image: var(--page-glow);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  min-height: 100vh;
}

a { color: inherit; }

/* ---------- 顶部 ---------- */
.hero {
  position: relative;
  padding: 38px 20px 26px;
  text-align: center;
}
/* 拓展包主 logo（官方素材，透明底），宽度贴近原图 326px 以免放大发虚 */
.hero__logo {
  display: block;
  width: clamp(196px, 38vw, 330px);
  height: auto;
  margin: 0 auto 14px;
  filter: var(--logo-filter);
}
.hero__title {
  margin: 0;
  font-size: clamp(24px, 4.6vw, 40px);
  font-weight: 800;
  letter-spacing: .18em;
  text-indent: .18em;      /* 抵消尾部字距，让四个字视觉居中 */
  line-height: 1.2;
  background: var(--title-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: var(--title-glow);
}
.hero__sub {
  margin: 10px 0 0;
  color: var(--text-dim);
  font-size: clamp(12px, 2.6vw, 14px);
}
.hero__sub b { color: var(--text); font-weight: 600; }

/* ---------- 工具栏 ---------- */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 20px;
  background: var(--bar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.segmented button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, color .18s;
  white-space: nowrap;
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-selected="true"] {
  background: linear-gradient(180deg, #8b5cf6, #6d28d9);
  color: #fff;
  box-shadow: 0 2px 10px rgba(139, 92, 246, .4);
}

.toolbar__right {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-faint);
  font-size: 12px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--tint);
  color: var(--text-dim);
  white-space: nowrap;
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}
/* 同步异常：数据太旧或连续失败时，把状态胶囊变红提醒 */
.chip--warn {
  border-color: rgba(244, 63, 94, .6);
  background: rgba(244, 63, 94, .12);
  color: var(--warn-text);
}
.chip--warn .dot {
  background: #f43f5e;
  box-shadow: 0 0 8px #f43f5e;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ---------- 配色模式切换（浅色 / 深色 / 跟随系统） ---------- */
.themesw {
  display: inline-flex;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.themesw__btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 30px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  color: var(--text-faint);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.themesw__btn:hover { color: var(--text); }
.themesw__btn[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}
.themesw__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 图标统一描边，currentColor 跟着按钮状态走；「跟随系统」那枚半圆用 class 填实 */
.themesw__btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.themesw__btn svg .solid { fill: currentColor; stroke: none; }

/* ---------- 主体 ---------- */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 20px 64px;
}

/* ---------- 按职业浏览：职业横幅小标题 ---------- */
/* 职业配色用炉石/魔兽的官方职业色，让每个职业一眼可辨。
   选择器带上 .cls-head 提高优先级，否则会被 .cls-head 里的默认值覆盖 */
.cls-head[data-cls="deathknight"] { --cls: #c41e3a; }
.cls-head[data-cls="demonhunter"] { --cls: #a330c9; }
.cls-head[data-cls="druid"]       { --cls: #ff7c0a; }
.cls-head[data-cls="hunter"]      { --cls: #aad372; }
.cls-head[data-cls="mage"]        { --cls: #3fc7eb; }
.cls-head[data-cls="paladin"]     { --cls: #f48cba; }
.cls-head[data-cls="priest"]      { --cls: #e8e8f0; }
.cls-head[data-cls="rogue"]       { --cls: #fff468; }
.cls-head[data-cls="shaman"]      { --cls: #0070dd; }
.cls-head[data-cls="warlock"]     { --cls: #8788ee; }
.cls-head[data-cls="warrior"]     { --cls: #c69b6d; }
.cls-head[data-cls="neutral"]     { --cls: #9d9d9d; }

/* 浅色底上，几个职业的官方色太亮（牧师的白、盗贼的亮黄、猎人的嫩绿…），
   直接用会糊在白底上看不清。这里只在浅色模式下把这些色调暗，
   其余职业保持官方色——横幅标题和胶囊边框都吃 --cls，改一处就够。 */
[data-theme="light"] .cls-head[data-cls="druid"]    { --cls: #c25c00; }
[data-theme="light"] .cls-head[data-cls="hunter"]   { --cls: #4f7c15; }
[data-theme="light"] .cls-head[data-cls="mage"]     { --cls: #0e7fa3; }
[data-theme="light"] .cls-head[data-cls="paladin"]  { --cls: #c0407c; }
[data-theme="light"] .cls-head[data-cls="priest"]   { --cls: #7f8398; }
[data-theme="light"] .cls-head[data-cls="rogue"]    { --cls: #9a8800; }
[data-theme="light"] .cls-head[data-cls="shaman"]   { --cls: #0b5fc4; }
[data-theme="light"] .cls-head[data-cls="warlock"]  { --cls: #4d4ec4; }
[data-theme="light"] .cls-head[data-cls="warrior"]  { --cls: #8a6231; }
[data-theme="light"] .cls-head[data-cls="neutral"]  { --cls: #6e6e6e; }

.cls-head {
  --cls: var(--accent);
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 13px 20px;
  border-radius: 14px;
  /* 兜底（不支持 color-mix 的旧浏览器）：普通边框与底色 */
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}
/* 支持 color-mix 时再叠上职业配色 */
@supports (border-color: color-mix(in srgb, red 50%, blue)) {
  .cls-head {
    border-color: color-mix(in srgb, var(--cls) 42%, var(--border));
    /* 职业色淡染 + 斜向织纹（花纹）*/
    background:
      repeating-linear-gradient(115deg,
        color-mix(in srgb, var(--cls) 7%, transparent) 0 3px,
        transparent 3px 9px),
      linear-gradient(100deg,
        color-mix(in srgb, var(--cls) 20%, transparent),
        color-mix(in srgb, var(--cls) 5%, transparent) 46%,
        transparent 78%),
      var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05),
      0 4px 20px -10px color-mix(in srgb, var(--cls) 65%, transparent);
  }
}

/* 四角菱形装饰 */
.cls-head::before,
.cls-head::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--cls);
  transform: rotate(45deg);
  opacity: .75;
}
.cls-head::before { left: -5px; top: 50%; margin-top: -4.5px; }
.cls-head::after { right: -5px; top: 50%; margin-top: -4.5px; }

/* 上下的细装饰线 */
.cls-head__rule {
  position: absolute;
  left: 18px;
  right: 18px;
  height: 1px;
  background: var(--border);
  opacity: .55;
  pointer-events: none;
}
@supports (border-color: color-mix(in srgb, red 50%, blue)) {
  .cls-head__rule {
    background: linear-gradient(90deg, transparent,
      color-mix(in srgb, var(--cls) 55%, transparent) 22%,
      color-mix(in srgb, var(--cls) 55%, transparent) 78%, transparent);
  }
}
.cls-head__rule--top { top: 5px; }
.cls-head__rule--bottom { bottom: 5px; }

.cls-head__icon {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  /* 徽章本身就是圆形完整图案，不需要再套底色和描边 */
  background: none;
  border: 0;
}
.cls-head__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 职业色柔光，让徽章从横幅上浮起来 */
@supports (filter: drop-shadow(0 0 1px red)) {
  .cls-head__icon img {
    filter: var(--icon-shadow)
            drop-shadow(0 0 9px color-mix(in srgb, var(--cls) 45%, transparent));
  }
}

.cls-head__text { min-width: 0; flex: 1; }

.cls-head__name {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--cls);
}
@supports (border-color: color-mix(in srgb, red 50%, blue)) {
  .cls-head__name {
    text-shadow: 0 0 18px color-mix(in srgb, var(--cls) 45%, transparent);
  }
}

.cls-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.cls-head__meta span {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-dim);
  background: var(--chip-bg);
  border: 1px solid var(--border);
  white-space: nowrap;
}
@supports (border-color: color-mix(in srgb, red 50%, blue)) {
  .cls-head__meta span {
    border-color: color-mix(in srgb, var(--cls) 22%, transparent);
  }
}
.cls-head__meta span b {
  color: var(--cls);
  font-weight: 700;
}

@media (max-width: 640px) {
  .cls-head { gap: 11px; padding: 11px 14px; border-radius: 12px; }
  .cls-head__icon { width: 44px; height: 44px; }
  .cls-head__name { font-size: 17.5px; }
  .cls-head__meta span { font-size: 11px; padding: 2px 7px; }
}

.group { margin-bottom: 34px; }
.group__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.group__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
}
.group__meta { color: var(--text-faint); font-size: 12px; }
.group__badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(168, 85, 247, .4);
  color: var(--kw-name);
  font-size: 11px;
  font-weight: 600;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 18px;
}

/* ---------- 卡牌 ---------- */
.card {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
  transition: transform .18s ease;
}
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.card__art {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: border-color .18s, box-shadow .18s, transform .18s;
  aspect-ratio: 404 / 558;
}
.card:hover .card__art,
.card:focus-visible .card__art {
  transform: translateY(-4px);
  border-color: var(--rc, var(--accent));
  box-shadow: var(--shadow-hover), 0 0 0 1px var(--rc, var(--accent)),
    0 0 26px -6px var(--rc, var(--accent));
}
.card__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s;
}
.card__art img.loaded { opacity: 1; }

/* 稀有度描边（传说带流光） */
.card[data-rarity="5"] .card__art { border-color: rgba(255, 128, 0, .62); }
.card[data-rarity="4"] .card__art { border-color: rgba(163, 53, 238, .58); }
.card[data-rarity="3"] .card__art { border-color: rgba(0, 112, 221, .55); }
.card[data-rarity="5"] .card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(115deg, transparent 38%, rgba(255, 208, 120, .3) 50%,
    transparent 62%);
  background-size: 260% 100%;
  animation: shine 4.6s linear infinite;
  pointer-events: none;
}
@keyframes shine {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

.card__new {
  position: absolute;
  top: 8px;
  right: 8px;              /* 无礼物条带时用右上角，避开卡面自带的左上角法力水晶 */
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f43f5e, #be123c);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 2px 10px rgba(190, 18, 60, .55);
}
/* 有礼物条带时，条带占了右上角，「新」角标下移让开 */
.card--gift .card__new { top: 62px; }

.card__foot {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;         /* 标记多时换到第二行，不挤掉卡名 */
  margin-top: 9px;
  padding: 0 2px;
}
/* 「新」「待补全」这类小标记：跟在卡名后面，放不下就整行换下去 */
.card__flags {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}
.flag {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.flag--new {
  background: linear-gradient(180deg, #f43f5e, #be123c);
  color: #fff;
}
.flag--pending {
  background: rgba(224, 179, 74, .14);
  border: 1px solid rgba(224, 179, 74, .55);
  color: var(--gold);
}
/* 礼物牌：卡框右上角的歪斜条带。
   右上角是唯一没有被卡面自带的法力水晶（左上）和攻防数值（下）占用的角落。
   用「外层方块 overflow:hidden + 内部旋转长条」的经典做法，条带会被卡框的
   圆角一起裁掉，看起来是长在框上的。 */
.card__gift {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.card__gift span {
  position: absolute;
  top: 19px;
  right: -32px;
  width: 136px;
  padding: 3px 0;
  transform: rotate(45deg);
  text-align: center;
  background: linear-gradient(180deg, #ffeaa8 0%, #e0b34a 52%, #a8761a 100%);
  color: #2c1d03;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow: 0 1px 7px rgba(0, 0, 0, .55);
  border-top: 1px solid rgba(255, 255, 255, .6);
  border-bottom: 1px solid rgba(0, 0, 0, .35);
}

.card__name {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.card__tag {
  flex: none;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--tint-strong);
  color: var(--text-dim);
  white-space: nowrap;
}
.card__name[data-r="5"] { color: var(--r5); }
.card__name[data-r="4"] { color: var(--name-4); }
.card__name[data-r="3"] { color: var(--name-3); }

/* ---------- 详情弹层 ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--overlay);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow-y: auto;
}
.modal[data-open="true"] { display: flex; }
.modal__box {
  position: relative;
  width: min(880px, 100%);
  margin: auto;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: pop .22s ease;
}
@keyframes pop {
  from { transform: translateY(14px) scale(.975); opacity: 0; }
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--close-bg);
  color: var(--text-dim);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.modal__close:hover { color: var(--text); border-color: var(--accent); }

.modal__body {
  display: grid;
  /* minmax(0,1fr) 而非 1fr：否则关联卡牌的横向滚动条会把这一列撑宽，
     导致卡牌文本溢出弹层被截断 */
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 26px;
  padding: 26px;
}
.modal__art {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  align-self: start;
  box-shadow: var(--shadow);
}
.modal__art img { display: block; width: 100%; }

.modal__name {
  margin: 0 0 4px;
  font-size: 25px;
  font-weight: 800;
}
/* 详情里的「礼物牌」小徽标，与列表的歪斜条带呼应 */
.gift-chip {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  transform: skewX(-12deg);          /* 同样歪斜，保持一致的视觉语言 */
  border-radius: 4px;
  background: linear-gradient(180deg, #ffeaa8, #e0b34a 52%, #a8761a);
  color: #2c1d03;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.modal__sub {
  margin: 0 0 18px;
  color: var(--text-faint);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.modal__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.stat {
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--tint);
  font-size: 12px;
}
.stat i {
  display: block;
  color: var(--text-faint);
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: .08em;
  margin-bottom: 1px;
}
.stat b { font-weight: 700; }
.stat--r5 b { color: var(--r5); }
.stat--r4 b { color: var(--name-4); }
.stat--r3 b { color: var(--name-3); }

.modal__text {
  margin: 0 0 16px;
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
  font-size: 15px;
  line-height: 1.75;
}
.modal__text b { color: var(--kw-strong); font-weight: 700; }
.modal__text i { color: var(--text-faint); font-style: italic; font-size: 13.5px; }
/* 官网数据尚未补全的说明文案 */
.modal__text.is-pending {
  border-left-color: var(--gold);
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.7;
}
.modal__text.is-empty { color: var(--text-faint); font-size: 13.5px; }

.kw-list { display: flex; flex-direction: column; gap: 9px; margin: 0 0 16px; }
/* 没有说明框时（常规关键词不显示，或这张卡没有关键词）整块收起，
   否则会白留 16px 空隙 */
.kw-list:empty { display: none; }
.kw {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--tint);
}
.kw__name {
  color: var(--kw-name);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}
.kw__desc { color: var(--text-dim); font-size: 12.5px; }

.modal__flavor {
  margin: 0 0 16px;
  padding-left: 13px;
  border-left: 2px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
}

/* ---------- 关联卡牌 ---------- */
.related {
  display: none;
  margin: 4px 0 18px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}
.related[data-show="true"] { display: block; }
.related__title {
  margin: 0 0 11px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.related__count {
  margin-left: 5px;
  color: var(--text-faint);
  font-size: 11.5px;
  font-weight: 400;
}
.related__strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 3px 3px 12px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.related__strip::-webkit-scrollbar { height: 7px; }
.related__strip::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.rel {
  appearance: none;
  flex: 0 0 auto;
  width: 118px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}
.rel img {
  display: block;
  width: 100%;
  aspect-ratio: 404 / 558;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.rel:hover img,
.rel:focus-visible img {
  transform: translateY(-3px);
  border-color: var(--rc, var(--accent));
  box-shadow: var(--shadow-hover), 0 0 0 1px var(--rc, var(--accent));
}
.rel[data-rarity="5"] img { border-color: rgba(255, 128, 0, .55); }
.rel[data-rarity="4"] img { border-color: rgba(163, 53, 238, .5); }
.rel__name {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-dim);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 联动卡来自别的系列，标一下出处（本系列卡不显示这行） */
.rel__set {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rel--back .rel__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 404 / 558;
  border-radius: 9px;
  border: 1px dashed var(--border);
  background: var(--tint);
  color: var(--text-dim);
  font-size: 22px;
}
.rel--back:hover .rel__ph { border-color: var(--accent); color: var(--text); }
.modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11.5px;
}

/* ---------- 页脚 ---------- */
.foot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 20px 44px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11.5px;
  line-height: 1.9;
  text-align: center;
}
.foot a { color: var(--text-dim); }

.empty {
  padding: 70px 20px;
  text-align: center;
  color: var(--text-faint);
}

/* ---------- 移动端 ---------- */
@media (max-width: 820px) {
  .modal__body { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; }
  .modal__art { max-width: 250px; margin: 0 auto; }
  .modal__name { font-size: 21px; }
}

@media (max-width: 640px) {
  .hero { padding: 24px 16px 18px; }
  .hero__logo { margin-bottom: 10px; }
  .toolbar { padding: 9px 14px; gap: 9px; }
  /* 手机上工具栏会折成两行：第一行浏览方式，第二行配色切换 + 同步状态。
     flex-basis:100% 让第二行独占一行，再把两者左右顶开，免得挤在左边空出半行；
     wrap 是给最窄的手机兜底——「同步异常 · 最后更新 xx」这条偏长，
     320px 下跟配色切换并排会撑出横向滚动条，宁可让它多占一行。 */
  .toolbar__right {
    gap: 8px 10px;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .chip { font-size: 11px; padding: 4px 9px; }
  .themesw__btn svg { width: 14px; height: 14px; }
  main { padding: 16px 14px 50px; }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
    gap: 12px;
  }
  .card__name { font-size: 12.5px; }
  .card__foot { gap: 5px; }
  .group { margin-bottom: 26px; }
  .group__title { font-size: 15.5px; }
  .modal { padding: 0; }
  .modal__box { border-radius: 0; min-height: 100%; width: 100%; }
  .modal__close { top: 9px; right: 9px; }
}

@media (max-width: 380px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}