/* ============================================================
 * 英雄资料之家 - 样式
 * 设计基调：深色调锁定 + 单一 B站 粉强调色 + 克制动效
 * 三连进度用语义色（完成=绿 / 未完成=灰），不破坏强调色锁定
 * ============================================================ */

:root {
  --bg: #0E1120;
  --bg-2: #141a2c;
  --surface: #171c2e;
  --surface-2: #1f2640;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #F4F6FB;
  --text-dim: #9AA4C2;
  --text-faint: #6b7494;
  --accent: #FB7299;
  --accent-2: #FF9FBE;
  --accent-soft: rgba(251, 114, 153, 0.14);
  --accent-line: rgba(251, 114, 153, 0.45);
  --good: #46D98A;
  --warn: #FFC24B;
  --bad: #FF6B81;
  --radius-card: 16px;
  --radius-tile: 14px;
  --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  --maxw: 1120px;
}

/* 站点锁定深色调（设计基调：深色调锁定 + 深色星空背景）。
   如需浅色卡片，可在此处重新启用 prefers-color-scheme: light 回退。 */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 2D 星空背景层（深色底，避免 JS 未就绪时的白闪） */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  background: #08091a;
}

/* 内容层级在背景之上 */
.site-header, .wrap, .site-footer { position: relative; z-index: 1; }

/* ---------- 顶部 ---------- */
.site-header {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  box-shadow: 0 8px 22px -10px var(--accent-line);
}
.brand-text h1 {
  font-size: clamp(20px, 3.4vw, 27px);
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.15;
}
.brand-text p {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--text-dim);
}

/* ---------- 容器 ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px 20px 40px;
}

.hero-banner {
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

/* ---------- 分区切换 ---------- */
.tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.tab:hover { color: var(--text); border-color: var(--border-strong); }
.tab:active { transform: scale(0.97); }
.tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 10px 24px -12px var(--accent-line);
}
.tab .count {
  display: inline-block;
  margin-left: 7px;
  font-size: 12px;
  opacity: 0.7;
}

/* ---------- 卡片墙 ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "cover"
    "body"
    "action";
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.card-cover {
  grid-area: cover;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-tile);
  background: var(--bg-2);
  display: block;
  transition: opacity 0.4s ease;
}
/* 未解锁：图片半透明，弱化视觉权重（仅封面图，按钮不受影响） */
.card.locked .card-cover { opacity: 0.5; }
.card.locked .card-action,
.card.locked .btn { opacity: 1; }
/* 已解锁：图片全亮，并做上下正弦缓动，强化解锁成就感 */
.card.unlocked .card-cover {
  opacity: 1;
  animation: coverFloat 3.2s ease-in-out infinite;
}
@keyframes coverFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.card-icon {
  display: none;
}
.card.unlocked .card-icon { display: none; }

.card-body { grid-area: body; min-width: 0; }
.card-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  background: rgba(255, 194, 75, 0.14);
  color: var(--warn);
  white-space: nowrap;
}
.card.unlocked .card-badge {
  background: rgba(70, 217, 138, 0.16);
  color: var(--good);
}
/* 未上线（视频未发布/已隐藏）徽章：中性灰蓝，深浅模式均可读 */
.card-badge.badge-waiting {
  background: rgba(150, 162, 186, 0.18);
  color: var(--text-dim);
}
/* 回看视频按钮：仅已解锁卡片显示在「已解锁」标签右侧的圆形播放键 */
.card-replay {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.card-replay i { font-size: 13px; line-height: 1; transform: translateX(0.5px); }
.card-replay:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.card-replay:active { transform: scale(0.92); }
/* hidden 属性需显式覆盖 display，否则作者样式 inline-flex 会顶掉浏览器默认的 [hidden]{display:none} */
.card-replay[hidden] { display: none; }
.card-desc {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* 三连进度（仅未解锁显示） */
.card-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
/* 已解锁时由 JS 设 hidden 隐藏三连进度；同理需显式覆盖 display */
.card-progress[hidden] { display: none; }
.step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-faint);
  background: var(--bg-2);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.step i { font-size: 14px; }
.step.done { color: #fff; border-color: var(--accent); background: var(--accent); }
.step.done i { color: #fff; }
/* 投币 x1：保留左半边粉色填充（亮一半，表示已投 1/2 枚），文字用 var(--text-faint)
   灰色（与 投币x0 默认态一致），且随主题切换，避免浅色模式下右半边白底白字看不清。 */
.step.half {
  color: var(--text-faint);
  border-color: var(--accent);
  background: linear-gradient(90deg, var(--accent) 0 50%, var(--bg-2) 50% 100%);
}

.card-action { grid-area: action; }
.card-hint {
  margin: 10px 2px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-faint);
  text-align: center;
}
.btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.14s ease, filter 0.18s ease, background 0.18s ease;
}
.btn:active { transform: scale(0.98); }
/* 禁用态（含「等待上线」灰化按钮）：低饱和灰、不可点 */
.btn:disabled,
.btn-disabled {
  cursor: not-allowed;
  opacity: .6;
  color: var(--text-dim);
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: none;
}
.btn:disabled:hover,
.btn-disabled:hover { filter: none; }
.btn:disabled:active,
.btn-disabled:active { transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn .spin { display: inline-block; animation: spin 0.9s linear infinite; }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 26px -14px var(--accent-line);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--accent-line); }

/* 解锁瞬间动画 */
@keyframes unlock-pop {
  0%   { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(70, 217, 138, 0.0); }
  35%  { transform: scale(1.015); box-shadow: 0 0 0 6px rgba(70, 217, 138, 0.28); }
  100% { transform: scale(1); box-shadow: var(--shadow); }
}
.card.just-unlocked {
  animation: unlock-pop 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  border-color: rgba(70, 217, 138, 0.5);
}

/* 卡片进场（加载后依次淡入） */
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card.enter { animation: card-in 0.45s ease both; }

/* ---------- 空提示 / 页脚 ---------- */
.empty-hint { text-align: center; color: var(--text-faint); padding: 36px 0; font-size: 14px; }
.site-footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 20px 34px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12.5px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  max-width: min(92vw, 460px);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 桌面布局：按钮置于下方，主体列不被挤压 ---------- */
/* 卡片为单行布局：cover / body / action，主体列拿到卡片全宽，
   三个步骤标签（点赞/投币/收藏）不会因列宽不足而换行。 */
@media (min-width: 760px) {
  .card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cover"
      "body"
      "action";
  }
  .card-action { max-width: 280px; margin: 0 auto; }
}

/* ============================================================
 * 已解锁卡片：金色霓虹流光边框（参考 炫酷效果集合/UI组件/neon_border.md）
 * 用 conic-gradient + mask 只描边，@property --ang 驱动流光绕圈；
 * 叠加一层模糊金色外发光，呈现霓虹辉光。尊重降速偏好（reduce 下停转）。
 * ============================================================ */
@property --ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.card.unlocked {
  position: relative;
  border-color: transparent; /* 隐藏原 1px 灰边，交给霓虹边描边 */
}
/* 流光描边带：只显示在边框环上 */
.card.unlocked::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-card) + 2px);
  padding: 2px; /* 边框厚度 */
  background: conic-gradient(from var(--ang),
    rgba(255, 194, 75, 0) 0deg,
    rgba(255, 194, 75, 0) 318deg,
    rgba(255, 210, 110, 0.85) 344deg,
    #fff3c8 358deg,
    #fff3c8 2deg,
    rgba(255, 210, 110, 0.85) 16deg,
    rgba(255, 194, 75, 0) 42deg,
    rgba(255, 194, 75, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  animation: neon-spin 4s linear infinite;
  filter: drop-shadow(0 0 5px rgba(255, 194, 75, 0.55));
}
/* 外发光层：更柔和的金色辉光，叠在描边外 */
.card.unlocked::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-card) + 2px);
  padding: 2px;
  background: rgba(255, 194, 75, 0.55);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  filter: blur(7px);
  opacity: 0.7;
}
@keyframes neon-spin { to { --ang: 360deg; } }

/* ---------- 降速偏好：关闭非必要动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .card, .card.just-unlocked, .card.enter { animation: none !important; transition: none !important; }
  .card.unlocked .card-cover { animation: none !important; }
  .card.unlocked::before { animation: none !important; }
  .ach-card.gold::before { animation: none !important; }
  .btn, .tab, .step { transition: none !important; }
  .toast { transition: opacity 0.2s ease; }
}

/* ---------- 视图切换（资料墙 / 排行榜） ---------- */
/* 顶部 banner 按钮（成就 / 排行榜） */
.banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.banner-btn:active { transform: scale(0.97); }
.banner-btn .btn-ico { display: block; flex: none; }
/* 两个按钮成组靠右，互相贴近 */
.banner-actions { display: flex; align-items: center; gap: 10px; }
.banner-rank-btn {
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 10px 24px -12px var(--accent-line);
}
.banner-rank-btn:hover { box-shadow: 0 14px 28px -12px var(--accent-line); }
/* 成就按钮与排行榜保持一致：同款粉色渐变 + 白字 */
.banner-ach-btn {
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 10px 24px -12px var(--accent-line);
}
.banner-ach-btn:hover { box-shadow: 0 14px 28px -12px var(--accent-line); }

/* ---------- 封面角标：始终显示「XX人已解锁」 ---------- */
.cover-wrap {
  grid-area: cover;
  position: relative;
}
.cover-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(14, 17, 32, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- 排行榜弹窗（玩家英雄榜） ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 6, 14, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal.hidden { display: none; }
.modal-card {
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
  box-shadow: var(--shadow);
  animation: slideUp .22s ease;
}
@keyframes slideUp { from { transform: translateY(40px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal .close {
  width: 34px; height: 34px;
  border: none; border-radius: 10px;
  background: var(--surface-2);
  color: var(--text); font-size: 16px; cursor: pointer;
}
.modal .close:hover { background: var(--border-strong); }

/* 资料弹窗：链接展示 + 复制 / 在浏览器打开 */
.res-tip { font-size: 12.5px; color: var(--text-dim); margin: 0 0 12px; line-height: 1.5; }
.res-link {
  display: block;
  word-break: break-all;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent-2);
  font-size: 12px;
  text-decoration: none;
  margin-bottom: 14px;
}
.res-link:hover { border-color: var(--border-strong); }
.res-actions { display: flex; gap: 10px; }
.res-actions .btn { flex: 1; justify-content: center; }

.rank-list { margin: 0; padding: 0; list-style: none; counter-reset: rk; }
.rank-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.rank-list li::before {
  counter-increment: rk;
  content: counter(rk);
  width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 800; font-size: 12px;
  background: var(--surface-2);
  color: var(--text-dim);
}
.rank-list li:nth-child(1)::before { background: linear-gradient(180deg, #ffd86b, #e2a020); color: #3a2a00; }
.rank-list li:nth-child(2)::before { background: linear-gradient(180deg, #dfe6f5, #9aa6c0); color: #222; }
.rank-list li:nth-child(3)::before { background: linear-gradient(180deg, #e0a06b, #b06a30); color: #2a1500; }
.rank-list .rk-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 排行榜昵称可点击跳转其 B站 空间页（cards.json 配置了 rankMids 时生效） */
.rank-list .rk-name.rk-link { cursor: pointer; color: var(--accent); display: inline-flex; align-items: center; gap: 3px; }
.rank-list .rk-name.rk-link:hover { text-decoration: underline; }
.rank-list .rk-name.rk-link.rk-me { color: var(--accent); }
.rank-list .rk-ext { font-size: 11px; opacity: .8; transform: translateY(-1px); font-weight: 700; }
/* 排行榜称号前缀：边框随档位升级越好看，金色(前3名)最突出 */
.rank-list .rk-title {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .5px;
  /* 默认(无档位)金色药丸；有档位时由 script.js 动态注入的 .rk-tier-* 类接管（深/浅两套） */
  color: #ffd98a;
  border: 1px solid rgba(255, 210, 75, .4);
  background: linear-gradient(135deg, rgba(255, 210, 75, .16), rgba(251, 114, 153, .14));
}
/* 前 3 名：统一金色框，层数 3 / 2 / 1（越靠前越多层越突出）；
   不透明亮金边 + 实心深底，确保在任何弹窗背景上都清晰可见 */
.rank-list .rk-title.rk-top1,
.rank-list .rk-title.rk-top2,
.rank-list .rk-title.rk-top3 {
  color: #FFE9A8;
  border-style: solid;
  border-color: #FFD86B;
  background: #1b2138;
  font-weight: 800;
}
/* 第 3 名：一层框（仅 border） */
.rank-list .rk-title.rk-top3 { border-width: 1.5px; }
/* 第 2 名：两层框（border + outline） */
.rank-list .rk-title.rk-top2 {
  border-width: 2px;
  outline: 1.5px solid #FFC24B;
  outline-offset: 2px;
}
/* 第 1 名：三层框（border + outline + 外发光环） */
.rank-list .rk-title.rk-top1 {
  border-width: 2.5px;
  outline: 1.5px solid #FFC24B;
  outline-offset: 2.5px;
  box-shadow: 0 0 0 4.5px rgba(255, 194, 75, .5), 0 0 16px 2px rgba(255, 194, 75, .5);
  padding: 3px 12px;
  font-size: 12.5px;
  text-shadow: 0 0 8px rgba(255, 194, 75, .55);
}
.rank-list .rk-score { color: var(--accent); font-weight: 800; white-space: nowrap; }
.rank-list .rk-me { color: var(--accent-2); font-weight: 800; }
.rank-list .rk-empty { justify-content: center; color: var(--text-faint); }

/* ---------- 成就弹窗（四维度 × 七档） ---------- */
.ach-list { display: flex; flex-direction: column; gap: 14px; }
.ach-dim {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  padding: 14px;
}
.ach-dim-head { display: flex; align-items: center; gap: 8px; }
.ach-dim-head > i { font-size: 18px; color: var(--accent); }
.ach-dim-name { font-weight: 700; font-size: 15px; }
.ach-dim-val { margin-left: auto; font-size: 20px; font-weight: 800; color: var(--text); line-height: 1; }
.ach-dim-unit { font-size: 12px; color: var(--text-faint); margin-left: 3px; }

/* 当前成就：达成时四字成语按档位对应颜色着色（色值由 JS 内联）；未解锁显示静默灰 */
.ach-current { margin-top: 11px; font-size: 13.5px; color: var(--text-dim); }
.ach-current b { font-weight: 700; }
.ach-next { margin-top: 6px; font-size: 12px; color: var(--text-faint); }

/* 成就：按维度分组（标题 + 卡片序列，一行最多三张）
   状态：非最高已解锁 = 粉色按钮卡（进度 a/b）；当前最高 = 金色霓虹边框卡（进度 a/b）；未解锁 = 灰色上锁卡（目标数） */
.ach-cat { margin-bottom: 18px; }
.ach-cat:last-child { margin-bottom: 0; }
.ach-cat-title {
  display: flex; align-items: center; gap: 8px;
  padding-left: 9px; border-left: 3px solid var(--accent);
  font-size: 14px; font-weight: 800; color: var(--text);
  margin-bottom: 10px;
}
.ach-cat-title i { color: var(--accent); font-size: 17px; }
/* 一行最多三张卡片 */
.ach-cat-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .ach-cat-items { grid-template-columns: repeat(2, 1fr); } }

/* 成就卡片基础样式 */
.ach-card {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  min-height: 62px;
  box-shadow: var(--shadow);
}
.ach-card-ico { font-size: 22px; line-height: 1; flex: none; color: var(--accent); }
.ach-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ach-card-title { font-size: 14px; font-weight: 800; line-height: 1.2; }
.ach-card-sub { font-size: 11.5px; color: var(--text-dim); }
.ach-card-sub b { color: var(--text); font-weight: 800; }

/* 非最高已解锁成就：经典粉色按钮（参考 .btn-primary） */
.ach-card.pink {
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 12px 26px -14px var(--accent-line);
}
.ach-card.pink .ach-card-ico { color: rgba(255, 255, 255, 0.95); }
.ach-card.pink .ach-card-title { color: #fff; }
.ach-card.pink .ach-card-sub { color: rgba(255, 255, 255, 0.85); }
.ach-card.pink .ach-card-sub b { color: #fff; }

/* 当前最高成就：金色霓虹流光边框（复用解锁卡片同款效果） */
.ach-card.gold {
  border-color: transparent;
  background: color-mix(in srgb, #FFC24B 15%, var(--surface));
}
.ach-card.gold::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: 16px; padding: 2px;
  background: conic-gradient(from var(--ang),
    rgba(255,194,75,0) 0deg, rgba(255,194,75,0) 318deg,
    rgba(255,210,110,0.85) 344deg, #fff3c8 358deg, #fff3c8 2deg,
    rgba(255,210,110,0.85) 16deg, rgba(255,194,75,0) 42deg, rgba(255,194,75,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none; z-index: 3;
  animation: neon-spin 4s linear infinite;
  filter: drop-shadow(0 0 5px rgba(255,194,75,0.55));
}
.ach-card.gold::after {
  content: ''; position: absolute; inset: -2px;
  border-radius: 16px; padding: 2px;
  background: rgba(255,194,75,0.55);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none; z-index: 2;
  filter: blur(7px); opacity: 0.7;
}
.ach-card.gold .ach-card-ico { color: #FFC24B; }
.ach-card.gold .ach-card-title { color: var(--text); }
.ach-card.gold .ach-card-sub { color: var(--text-dim); }
.ach-card.gold .ach-card-sub b { color: var(--text); }

/* 未解锁成就：灰色上锁，显示目标数，名字 ???? */
.ach-card.locked {
  border: 1.5px dashed var(--border-strong);
  background: var(--surface-2);
  color: var(--text-faint);
  box-shadow: none;
  opacity: 0.92;
}
.ach-card.locked .ach-card-ico { color: var(--text-faint); }
.ach-card.locked .ach-card-title { color: var(--text-faint); letter-spacing: 2px; }
.ach-card.locked .ach-card-sub { color: var(--text-faint); }
.ach-card.locked .ach-card-sub i { opacity: 0.85; }

.ach-empty { font-size: 13px; color: var(--text-faint); text-align: center; padding: 18px 0; }

/* 窄屏：成就数值行收紧 */
@media (max-width: 520px) {
  .ach-dim-val { font-size: 18px; }
  .ach-seg { padding: 3px 7px; }
}