/* ============ 收藏家的桌面 ============ */
:root {
  --felt: #10241c;
  --felt-hi: #1b3a2d;
  --gold: #e8c565;
  --paper: #fffdf4;
  --ink: #2b2620;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* .arena 的 display:flex 会覆盖 UA 的 [hidden] 规则，这里强制生效 */
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  font-family: 'Noto Sans SC', sans-serif;
  color: var(--paper);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--felt-hi), transparent 70%),
    radial-gradient(900px 500px at 80% 110%, #142b36 0%, transparent 60%),
    var(--felt);
  position: relative;
}
/* 桌面噪点质感 */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage {
  max-width: 1060px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  position: relative;
  overflow-x: clip; /* 窄屏卡片等比缩放后，卡框布局盒仍是 366px，裁掉两侧空白避免横向滚动 */
}

/* ============ 标题区 ============ */
.masthead { text-align: center; margin-bottom: 36px; }
.pokeball {
  display: block;
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid #1c1c1c;
  background: linear-gradient(to bottom, #ffe411 0 46%, #1c1c1c 46% 54%, #f6f2e9 54% 100%);
  position: relative;
  cursor: pointer;
  text-decoration: none;
}
.pokeball::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #f6f2e9;
  border: 3px solid #1c1c1c;
}
.pokeball:hover,
.pokeball:focus-visible {
  animation: pokeball-wobble 0.72s ease-in-out;
}
.pokeball:focus-visible {
  outline: 2px solid rgba(232, 197, 101, 0.95);
  outline-offset: 6px;
}
@keyframes pokeball-wobble {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(3deg); }
}
h1 {
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
  font-size: clamp(34px, 6vw, 54px);
  letter-spacing: 6px;
  color: var(--gold);
  text-shadow: 0 3px 0 #4a3a10, 0 8px 24px rgba(0, 0, 0, 0.5);
}
.sub {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 3px;
  color: #9db8a7;
}

/* ============ 搜索表单 ============ */
.seeker {
  display: flex;
  gap: 10px;
  max-width: 366px;
  margin: 0 auto 28px;
  position: relative;
  --catch-progress: 0;
}
.seeker input {
  flex: 1;
  min-width: 0; /* 允许在窄屏收缩，否则默认 size 会把按钮挤出屏幕 */
  padding: 13px 18px;
  font: 14px 'Noto Sans SC', sans-serif;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(232, 197, 101, 0.35);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.seeker input:focus { border-color: var(--gold); background: rgba(255, 255, 255, 0.11); }
.seeker.is-catching input {
  color: transparent;
  -webkit-text-fill-color: transparent; /* WebKit 禁用态文字不吃 color:transparent，需单独覆盖 */
  caret-color: transparent;
  border-color: rgba(232, 197, 101, 0.72);
  background: rgba(255, 255, 255, 0.06);
}
.seeker-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(232, 197, 101, 0.72);
  border-radius: 999px;
  /* 不透明底色（半透明白叠在桌面深绿上），完全盖住下方地址文字 */
  background: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)), var(--felt);
  color: var(--paper);
  font: 900 14px 'Noto Sans SC', sans-serif;
  letter-spacing: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.seeker.is-catching .seeker-loading {
  opacity: 1;
  visibility: visible;
}
.seeker-loading__bar {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(248, 223, 140, 0.9), rgba(232, 197, 101, 0.68)),
    rgba(255, 255, 255, 0.07);
  transform: scaleX(var(--catch-progress));
  transform-origin: left center;
  transition: transform 0.18s ease-out;
}
.seeker-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: translateX(-100%);
  animation: catch-sheen 1.7s ease-in-out infinite;
}
.catch-ball {
  position: relative;
  z-index: 2;
  width: 20px;
  height: 20px;
  flex: none;
  border: 2px solid #1c1c1c;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ffe411 0 46%, #1c1c1c 46% 54%, #f6f2e9 54% 100%);
  box-shadow: 0 2px 6px rgba(58, 37, 3, 0.24);
  animation: catch-spin 0.9s linear infinite;
}
.catch-ball::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  border: 2px solid #1c1c1c;
  border-radius: 50%;
  background: #f6f2e9;
}
.seeker-loading__text {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62), 0 0 8px rgba(0, 0, 0, 0.35);
}
@keyframes catch-spin {
  to { transform: rotate(360deg); }
}
@keyframes catch-sheen {
  0% { transform: translateX(-100%); opacity: 0; }
  30%, 70% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
.seeker button {
  flex: none;
  white-space: nowrap;
  padding: 13px 28px;
  font: 700 15px 'ZCOOL QingKe HuangYou', sans-serif;
  letter-spacing: 3px;
  color: #3a2503;
  background: linear-gradient(to bottom, #f4d888, #d9a83c);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 0 #8a6417, 0 8px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}
.seeker button:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6417; }
.seeker button:disabled { opacity: 0.6; cursor: wait; }

.status { text-align: center; color: #e0b8a0; margin-bottom: 20px; font-size: 14px; }

/* ============ 展示区 ============ */
.arena {
  display: flex;
  gap: 44px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ VS 对战页 ============ */
body.is-duel-page .stage {
  max-width: 1240px;
}
body.is-duel-page .masthead {
  margin-bottom: 30px;
  position: relative;
}
body.is-duel-page .masthead h1 {
  position: relative;
  z-index: 0;
  /* 刀痕横穿金色标题，补一圈深色描边保证文字可读 */
  text-shadow:
    0 3px 0 #4a3a10,
    0 0 5px rgba(16, 36, 28, 0.65),
    0 0 2px rgba(16, 36, 28, 0.9),
    0 8px 24px rgba(0, 0, 0, 0.5);
}
/* 标题背后的刀痕：右上劈向左下，暗边 + 金色渐变刀身 + 亮芯，附两道短副痕与飞溅碎屑 */
body.is-duel-page .masthead h1::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(470px, 92vw);
  height: 160px;
  transform: translate(-50%, -52%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 190'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe411'/%3E%3Cstop offset='.5' stop-color='%23e8c565'/%3E%3Cstop offset='1' stop-color='%23a97e24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg opacity='.8'%3E%3Cpath fill='%233c2e0a' opacity='.9' d='M544 16Q300 56 16 172 300 114 544 16Z'/%3E%3Cpath fill='url(%23a)' d='M542 18Q300 64 20 170 300 106 542 18Z'/%3E%3Cpath fill='%23fff6c9' opacity='.9' d='M538 22Q300 74 26 166 300 90 538 22Z'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Cpath fill='%233c2e0a' opacity='.85' d='M472 6Q380 24 288 64 380 48 472 6Z'/%3E%3Cpath fill='url(%23a)' d='M470 8Q380 28 292 62 380 44 470 8Z'/%3E%3Cpath fill='%233c2e0a' opacity='.85' d='M302 116Q180 138 56 188 180 166 302 116Z'/%3E%3Cpath fill='url(%23a)' d='M300 118Q180 144 60 186 180 160 300 118Z'/%3E%3C/g%3E%3Cpath fill='%23fff6c9' d='M468 34l14-9-4 15Z'/%3E%3Cpath fill='%23ffe411' opacity='.85' d='M352 60l10-7-2 12Z'/%3E%3Cpath fill='%23fff6c9' opacity='.9' d='M520 12l9-6-2 10Z'/%3E%3Cpath fill='%23ffe411' opacity='.75' d='M428 50l9-6-2 10Z'/%3E%3Cpath fill='%23fff6c9' opacity='.7' d='M238 118l8-5-2 9Z'/%3E%3Cpath fill='%23ffe411' opacity='.75' d='M150 138l11-7-3 12Z'/%3E%3Cpath fill='%23e8c565' opacity='.7' d='M88 166l9-6-2 10Z'/%3E%3Cpath fill='%23ffe411' opacity='.7' d='M306 92l8-5-2 9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(232, 197, 101, 0.2));
  opacity: 0.88;
  pointer-events: none;
  z-index: -1;
  animation: slash-reveal 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes slash-reveal {
  from { clip-path: inset(0 0 100% 100%); }
  to { clip-path: inset(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.is-duel-page .masthead h1::before { animation: none; }
}
/* 精灵球与副标题抬到刀痕之上，避免被划过遮挡 */
body.is-duel-page .masthead .pokeball,
body.is-duel-page .masthead .sub {
  position: relative;
  z-index: 1;
}
body.is-duel-page .masthead h1 .slash {
  display: inline-block;
  margin: 0 -2px;
  font-style: italic;
  opacity: 0.65;
}
.duel-arena {
  display: block;
}
.duel-shell {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 366px) minmax(260px, 330px) minmax(260px, 366px);
  gap: 24px;
  align-items: start;
  justify-content: center;
}
.duel-card-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.duel-seeker {
  width: min(100%, 366px);
  margin: 0 auto 2px;
}
.duel-seeker input {
  width: 100%;
  padding: 12px 16px;
  font-size: 13px;
}
.duel-swap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(100%, 366px);
  margin: 0 auto 2px;
  padding: 10px 16px;
  font: 500 13px 'Noto Sans SC', sans-serif;
  letter-spacing: 1px;
  color: #9db8a7;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(157, 184, 167, 0.28);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.duel-swap-btn:hover {
  color: var(--gold);
  background: rgba(232, 197, 101, 0.08);
  border-color: rgba(232, 197, 101, 0.38);
}
.duel-swap-btn:active {
  transform: scale(0.98);
}
.duel-seeker.is-hidden {
  display: none;
}
.duel-card-meta {
  width: min(100%, 366px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  color: #d8cfae;
  background: rgba(255, 253, 244, 0.06);
  border: 1px solid rgba(232, 197, 101, 0.22);
  border-radius: 10px;
  margin: 2px auto 0;
}
.duel-card-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--paper);
  font-size: 14px;
}
.duel-card-meta span {
  flex: none;
  color: #9db8a7;
  font-size: 12px;
}
.duel-board {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 22px 20px;
  color: var(--paper);
  background:
    linear-gradient(145deg, rgba(255, 253, 244, 0.1), rgba(255, 253, 244, 0.04)),
    rgba(7, 18, 14, 0.72);
  border: 1px solid rgba(232, 197, 101, 0.28);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
}
.duel-board::before {
  display: none;
}
.duel-kicker {
  text-align: center;
  color: #9db8a7;
  font: 900 11px 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: 2px;
}
.duel-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
.duel-score span {
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.22s ease, color 0.22s ease, text-shadow 0.22s ease;
}
.duel-score span:first-child {
  color: var(--gold);
}
.duel-score span:last-child {
  color: #39d353;
}
.duel-board--left .duel-score span:last-child,
.duel-board--right .duel-score span:first-child {
  color: #6b7c73;
  text-shadow: none;
}
.duel-score span.is-bumped {
  color: #f6e79a;
  transform: scale(1.18);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 18px rgba(232, 197, 101, 0.52);
}
.duel-score span:last-child.is-bumped {
  color: #7ee787;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 18px rgba(57, 211, 83, 0.52);
}
.duel-score b {
  color: #9db8a7;
  font-size: 28px;
  line-height: 1;
  text-shadow: none;
}
.duel-board h2 {
  margin-top: 8px;
  overflow: hidden;
  color: var(--paper);
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 2px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duel-board h2:empty {
  display: none;
}
.duel-verdict {
  margin: 8px auto 16px;
  max-width: 260px;
  color: #d8cfae;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
}
.duel-rows {
  display: grid;
  gap: 10px;
}
.duel-row {
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  opacity: 0.52;
  transform: translateY(2px);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease,
    box-shadow 0.24s ease;
}
.duel-row.is-resolved {
  opacity: 0.82;
  transform: translateY(0);
}
.duel-row.is-current {
  opacity: 1;
  border-color: rgba(232, 197, 101, 0.58);
  background: rgba(232, 197, 101, 0.09);
  box-shadow: 0 0 0 1px rgba(232, 197, 101, 0.14), 0 0 22px rgba(232, 197, 101, 0.14);
}
.duel-row.is-current[data-winner='left'] {
  border-color: rgba(232, 197, 101, 0.68);
}
.duel-row.is-current[data-winner='right'] {
  border-color: rgba(57, 211, 83, 0.72);
  background: rgba(57, 211, 83, 0.09);
  box-shadow: 0 0 0 1px rgba(57, 211, 83, 0.16), 0 0 22px rgba(57, 211, 83, 0.14);
}
.duel-row.is-current[data-winner='draw'] {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.07);
}
.duel-row-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.duel-row-head strong {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 1px;
}
.duel-row-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--paper);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duel-row-head span:last-child {
  text-align: right;
}
.duel-share {
  display: grid;
  grid-template-columns: var(--left-share, 50%) var(--right-share, 50%);
  margin-top: 7px;
  height: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.duel-share i {
  display: block;
  min-width: 0;
  height: 100%;
  max-width: 100%;
}
.duel-share__left {
  background: linear-gradient(90deg, rgba(182, 190, 181, 0.14), rgba(182, 190, 181, 0.38));
}
.duel-share__right {
  background: linear-gradient(90deg, rgba(182, 190, 181, 0.38), rgba(182, 190, 181, 0.14));
}
.duel-row[data-winner='left'] .duel-share__left {
  background: linear-gradient(90deg, rgba(232, 197, 101, 0.28), rgba(232, 197, 101, 0.98));
}
.duel-row[data-winner='right'] .duel-share__right {
  background: linear-gradient(90deg, rgba(57, 211, 83, 0.98), rgba(57, 211, 83, 0.28));
}
.duel-row[data-winner='left'] .duel-row-head span:first-child {
  color: #f6e79a;
}
.duel-row[data-winner='right'] .duel-row-head span:last-child {
  color: #7ee787;
}
.duel-receipts {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px dashed rgba(232, 197, 101, 0.28);
}
.duel-receipts div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.duel-receipts dt {
  color: #9db8a7;
  font-size: 11px;
  white-space: nowrap;
  text-align: center;
}
.duel-receipt-value {
  min-width: 0;
  overflow: hidden;
  color: #d8cfae;
  font-weight: 700;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duel-receipt-value--left {
  text-align: left;
}
.duel-receipt-value--right {
  text-align: right;
}
.duel-loading {
  width: min(100%, 366px);
  min-height: 180px;
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--paper);
  background: rgba(255, 253, 244, 0.06);
  border: 1px solid rgba(232, 197, 101, 0.24);
  border-radius: 12px;
}
.duel-loading strong {
  font-size: 14px;
  letter-spacing: 1px;
}
.duel-loading--error {
  flex-direction: column;
  color: #e0b8a0;
  text-align: center;
  line-height: 1.6;
}

/* —— 对战空位：问号卡上的「挑战」按钮，比首页「捕捉」略收一号 —— */
.duel-challenge-btn {
  padding: 13px 34px;
  font-size: 20px;
  letter-spacing: 4px;
}
/* 空位的元信息条整体置灰，等待挑战者现身 */
.duel-card-meta--mystery strong,
.duel-card-meta--mystery span {
  color: #9db8a7;
}
/* 待命面板：比分未知置灰 */
.duel-board--pending .duel-score span {
  color: #6b7c73;
  text-shadow: none;
}
.duel-board--pending .duel-verdict {
  margin-bottom: 4px;
}

/* 3D 倾斜容器。--m 为窄屏等比缩放系数（由 JS 按可用宽度计算，桌面端为 1）。
   卡片用 transform: scale 缩放，容器高度按同比例收缩以回收底部空白。 */
.card-tilt {
  perspective: 1100px;
  width: calc(366px * var(--m, 1));
  height: calc(512px * var(--m, 1));
  position: relative; /* 供中央「捕捉」按钮绝对定位 */
}

/* —— 卡片背后的 mesh 光效：多色柔光缓慢漂移，衬托卡片 —— */
.card-tilt::before {
  content: '';
  position: absolute;
  inset: -24% -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 44% at 28% 24%, rgba(232, 197, 101, 0.5), transparent 70%),
    radial-gradient(44% 48% at 76% 38%, rgba(69, 184, 172, 0.46), transparent 70%),
    radial-gradient(52% 56% at 44% 74%, rgba(167, 95, 190, 0.34), transparent 74%),
    radial-gradient(78% 68% at 50% 50%, rgba(245, 240, 220, 0.18), transparent 76%);
  filter: blur(40px);
  animation: glow-drift 9s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  from { transform: translate(-2.5%, -1.5%) scale(1); opacity: 0.85; }
  to { transform: translate(2.5%, 1.5%) scale(1.07); opacity: 1; }
}

/* —— 中央「抓取」按钮：浮在卡片正中，脉冲光圈吸引点击 —— */
.open-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
  padding: 16px 42px;
  font: 400 22px 'ZCOOL QingKe HuangYou', sans-serif;
  letter-spacing: 5px;
  color: #3a2503;
  background: linear-gradient(to bottom, #f8df8c, #dfab3c);
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 0 #8a6417, 0 14px 32px rgba(0, 0, 0, 0.5);
  animation: open-pulse 1.7s ease-in-out infinite;
}
.open-btn:active { animation: none; transform: translate(-50%, -48%); box-shadow: 0 2px 0 #8a6417; }
.open-btn:disabled { animation: none; opacity: 0.85; cursor: wait; letter-spacing: 2px; }
.open-btn[hidden] { display: none; }
@keyframes open-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 6px 0 #8a6417, 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(248, 223, 140, 0.55);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 6px 0 #8a6417, 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 16px rgba(248, 223, 140, 0);
  }
}

/* —— 神秘占位卡：大问号 + 字段淡化 —— */
.mystery-q {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 130px 'M PLUS Rounded 1c', sans-serif;
  color: #cfc8b6;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}
.card.is-mystery .card-name,
.card.is-mystery .card-hp,
.card.is-mystery .move-name,
.card.is-mystery .move-dmg,
.card.is-mystery .move-text,
.card.is-mystery .cb-val,
.card.is-mystery .card-info,
.card.is-mystery .card-foot,
.card.is-mystery .rarity-mark { color: #b3ab99 !important; }
.card.is-mystery .mystery-hint {
  color: #7a7059;
  font-style: normal;
  text-align: center;
  font-weight: 700;
  -webkit-line-clamp: 3;
}

/* ============ 卡片本体 ============ */
.card {
  --frame: #f3d048;          /* 卡框颜色，随稀有度变化 */
  --frame-deep: #c9a52e;
  --body-bg: #fdf7e3;
  width: 366px;
  height: 512px;
  border-radius: 16px;
  padding: 13px; /* 四边卡框等宽 */
  background: linear-gradient(135deg, var(--frame) 0%, var(--frame-deep) 50%, var(--frame) 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.35) inset,
    0 -2px 0 rgba(0, 0, 0, 0.25) inset,
    0 24px 60px rgba(0, 0, 0, 0.55);
  color: var(--ink);
  position: relative;
  z-index: 1; /* 盖在背后的 mesh 光效之上 */
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  display: flex;
  flex-direction: column;
  user-select: none;
  transform: scale(var(--m, 1)); /* 窄屏等比缩放，桌面端 scale(1) 无副作用 */
  transform-origin: top left; /* 从左上角缩放，填满 .card-tilt 的缩放宽度 */
}

/* —— 稀有度卡框 —— */
.card[data-rarity='C'] { --frame: #cfc8bb; --frame-deep: #a89f8e; }
.card[data-rarity='U'] { --frame: #d8925c; --frame-deep: #a05f2e; }
.card[data-rarity='R'] { --frame: #7fa8d9; --frame-deep: #40679e; }
.card[data-rarity='SR'] { --frame: #f3d048; --frame-deep: #c9982e; }
.card[data-rarity='UR'] {
  background: linear-gradient(120deg, #f7c3d0, #f9e79b, #b9f0c3, #a9d8f5, #d5b8f2, #f7c3d0);
  background-size: 300% 300%;
  animation: rainbow-frame 6s linear infinite;
}
@keyframes rainbow-frame {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* 镭射闪光层（SR / UR） */
.card .holo {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  mix-blend-mode: color-dodge;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 120, 180, 0.5) 36%,
    rgba(255, 235, 120, 0.55) 44%,
    rgba(120, 255, 200, 0.5) 52%,
    rgba(120, 180, 255, 0.5) 60%,
    transparent 76%
  );
  background-size: 260% 260%;
  background-position: var(--hx, 50%) var(--hy, 50%);
}
.card[data-rarity='SR'] .holo,
.card[data-rarity='UR'] .holo { opacity: 0.8; }
.card[data-rarity='R'] .holo { opacity: 0.35; }

.card-inner {
  background: var(--body-bg);
  border-radius: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 10px 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
  position: relative;
  z-index: 2;
  min-height: 0;
}

/* —— 顶栏 —— */
.card-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.stage-chip {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #fff, #d8d2c2);
  border: 1px solid #a89f8e;
  white-space: nowrap;
  align-self: center;
}
/* 超进化：万粉老号专属彩蛋徽章，流光金 + 微光晕 */
.stage-chip--mega {
  color: #5a3a00;
  border-color: #d99a2b;
  background: linear-gradient(100deg, #f7c948, #ffd98a, #ff9d5b, #f7c948);
  background-size: 200% 100%;
  box-shadow: 0 0 7px rgba(247, 180, 60, 0.75);
  animation: mega-shimmer 3s linear infinite;
}
@keyframes mega-shimmer {
  to { background-position: 200% 0; }
}
.card-name {
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-hp {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: #c22;
  white-space: nowrap;
}
.card-hp small { font-size: 11px; margin-right: 2px; }
.type-orb {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  align-self: center;
  flex: none;
  background: radial-gradient(circle at 32% 28%, #fff8 0 18%, transparent 40%), var(--type-color, #999);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1.5px #fff inset;
}

/* —— 画面 —— */
.card-art {
  height: 178px;
  flex: none;
  border: 5px solid;
  border-image: linear-gradient(to bottom, #efe6c8, #b8ad8a) 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) inset, 0 1px 0 #fff;
  position: relative;
  overflow: hidden;
  background: var(--ripple-weak, #f2f2f2); /* 纯色兜底；波纹由 .art-ripple 图片铺满 */
}
/* 波纹背景用 <img> 而非 CSS 背景：html-to-image 导出时 <img> 能可靠光栅化，CSS 渐变/背景不行 */
.art-ripple {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0;
}
.card-art .avatar {
  position: absolute;
  left: 50%; top: 50%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
  box-shadow: 0 0 0 4px #fffc, 0 10px 26px rgba(0, 0, 0, 0.35);
}
.art-badges {
  position: absolute;
  right: 6px; top: 6px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.art-badges span {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

/* —— 图鉴信息条 —— */
.card-info {
  font-size: 9px;
  text-align: center;
  padding: 3px 6px;
  margin: 5px 8px 6px;
  background: linear-gradient(to bottom, #e9dfbe, #d9cda4);
  border-radius: 999px;
  border: 1px solid #b3a67c;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* —— 技能区 —— */
.moves { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; padding: 0 2px; min-height: 0; overflow: hidden; }
.move { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; }
.move + .move { border-top: 1px solid #0002; }
/* 固定列宽（按最多 3 个能量图标预留 17×3 + 2×2 = 55px），使不同图标数的技能名左对齐 */
.move-cost { display: flex; gap: 2px; flex: none; width: 55px; padding-top: 2px; }
.energy {
  width: 17px; height: 17px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  background: radial-gradient(circle at 32% 28%, #fff8 0 18%, transparent 40%), var(--e-color, #999);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px #fff inset;
}
.move-main { flex: 1; min-width: 0; }
.move-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.move-name { font-weight: 900; font-size: 14px; letter-spacing: 0.5px; }
.move-dmg { font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 900; font-size: 17px; }
.move-text {
  font-size: 9px;
  line-height: 1.4;
  color: #4a4437;
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* —— 弱点 / 抵抗 / 撤退 —— */
.card-bottom {
  display: flex;
  border-top: 2px solid #0003;
  padding: 3px 2px 2px;
  font-size: 8.5px;
  gap: 4px;
  flex: none;
}
.cb-cell { flex: 1; text-align: center; min-width: 0; }
.cb-cell b { display: block; font-size: 8px; color: #6b6350; letter-spacing: 1px; margin-bottom: 2px; }
.cb-cell .energy { width: 14px; height: 14px; font-size: 8px; }
.cb-val { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.cb-note {
  display: block;
  margin-top: 1px;
  font-size: 7px;
  color: #8a7f66;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* —— 风味文本 & 卡底 —— */
.card-flavor {
  font-size: 8.4px;
  line-height: 1.45;
  font-style: italic;
  color: #55503f;
  border-top: 1px solid #0002;
  padding: 3px 2px 1px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: none;
}
.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  color: #6b6350;
  padding: 3px 2px 0;
}
.rarity-mark { font-weight: 900; letter-spacing: 1px; }
.card[data-rarity='SR'] .rarity-mark { color: #a8821c; }
.card[data-rarity='UR'] .rarity-mark {
  background: linear-gradient(90deg, #d33, #d90, #291, #16b, #92c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============ 档案侧栏 ============ */
.dossier {
  width: 300px;
  background: rgba(255, 253, 244, 0.06);
  border: 1px solid rgba(232, 197, 101, 0.25);
  border-radius: 14px;
  padding: 22px 24px;
  font-size: 13px;
  line-height: 1.7;
  backdrop-filter: blur(4px);
}
.dossier h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
  font-size: 19px;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 12px;
}
.dossier h2 .dossier-en {
  font: 700 11px 'M PLUS Rounded 1c', 'Noto Sans SC', sans-serif;
  letter-spacing: 4px;
  color: #9db8a7;
}
.dossier dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; }
.dossier dt { color: #9db8a7; white-space: nowrap; }
.dossier dd { color: var(--paper); }
.dossier .verdict {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(232, 197, 101, 0.3);
  color: #d8cfae;
  font-size: 12.5px;
}

/* ============ 动作 & 页脚 ============ */
.actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}
.actions[hidden] { display: none; }
.actions button {
  padding: 12px 32px;
  font: 700 14px 'Noto Sans SC', sans-serif;
  letter-spacing: 2px;
  color: var(--paper);
  background: transparent;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.actions button:hover { background: var(--gold); color: #3a2503; }

/* 导出按钮 + 右侧下拉：胶囊按钮组 */
.export-group {
  position: relative;
  display: inline-flex;
  gap: 6px;
}
.export-group[hidden] { display: none; }
.actions .export-menu-btn {
  padding: 12px 16px;
  letter-spacing: 0;
  font-size: 12px;
  line-height: 1;
}
.actions .export-menu-btn[aria-expanded='true'] { background: var(--gold); color: #3a2503; }
.export-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 148px;
  padding: 6px;
  background: #16362a;
  border: 1px solid rgba(232, 197, 101, 0.45);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.actions .export-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  letter-spacing: 1px;
  border: none;
  border-radius: 9px;
}
.actions .export-menu button svg {
  flex: none;
  width: 15px;
  height: 15px;
  opacity: 0.85;
}
.actions .export-menu button:hover { background: var(--gold); color: #3a2503; }

body.is-export-preview-open {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.mobile-export-preview {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  color: var(--paper);
  background:
    radial-gradient(1000px 520px at 50% -12%, var(--felt-hi), transparent 70%),
    var(--felt);
}
.mobile-export-preview__hint {
  flex: none;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 56px 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(to bottom, rgba(16, 36, 28, 0.98), rgba(16, 36, 28, 0.72));
}
.mobile-export-preview__close {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.1);
  font-size: 28px;
  line-height: 32px;
  cursor: pointer;
}
.mobile-export-preview img {
  display: block;
  width: auto;
  max-width: min(calc(100vw - 20px), 620px);
  max-height: calc(100vh - 76px);
  max-height: calc(100svh - 76px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  height: auto;
  margin: 10px auto max(12px, env(safe-area-inset-bottom, 0px));
  object-fit: contain;
  touch-action: none;
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
}

.colophon {
  text-align: center;
  margin-top: 56px;
  font-size: 12px;
  color: #6f8a7a;
}
.colophon a { color: #9db8a7; }
.colophon .brand {
  margin-top: 10px;
  letter-spacing: 1px;
  color: var(--gold);
  opacity: 0.75;
}
.colophon .disclaimer {
  margin-top: 14px;
  font-size: 10.5px;
  line-height: 1.6;
  color: #4c6157;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.colophon .disclaimer a {
  color: inherit;
}

/* 卡片入场动画 */
/* 开卡揭晓：爆光 + 弹出，像拆开卡包 */
@keyframes card-reveal {
  0% { opacity: 0; transform: translateY(8px) scale(calc(var(--m, 1) * 0.8)); filter: brightness(2.6) saturate(1.5); }
  45% { filter: brightness(1.55); }
  100% { opacity: 1; transform: scale(var(--m, 1)); filter: none; }
}
.card.reveal { animation: card-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
.card.is-exporting,
.card.is-exporting * {
  animation: none !important;
  transition: none !important;
}
.card.is-exporting {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.card.is-exporting .holo {
  display: none !important;
}

@media (max-width: 820px) {
  /* 纵向堆叠后 align-items 变为水平轴：改回 center 让卡牌与档案水平居中 */
  .arena { flex-direction: column; align-items: center; }
  .dossier { width: 366px; max-width: 100%; }
  .duel-shell {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .duel-board {
    width: min(100%, 420px);
    margin: 0 auto;
    order: 1;
  }
  .duel-card-side--left { order: 2; }
  .duel-card-side--right { order: 3; }
  .duel-board::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .stage { padding: 32px 14px 60px; }
  .seeker { gap: 8px; }
  .seeker input { padding: 12px 14px; font-size: 13px; }
  .seeker button { padding: 12px 16px; letter-spacing: 2px; }
  .duel-board {
    padding: 18px 14px;
    border-radius: 12px;
  }
  .duel-score span { font-size: 46px; }
  .duel-score b { font-size: 24px; }
  .duel-row { padding: 8px; }
  .duel-row-head {
    gap: 7px;
    font-size: 11px;
  }
  .duel-row-head strong { font-size: 12px; }
  .duel-card-meta {
    padding: 9px 11px;
  }
  .duel-card-meta span {
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}