/* ===== 全局 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --legend: #ffd700;
  --legend-strong: #d4af37;
  --legend-deep: #a16207;
  --legend-glow: rgba(255, 215, 0, 0.45);
  --epic: #a855f7;
  --epic-deep: #7e22ce;
  --epic-glow: rgba(168, 85, 247, 0.3);
  --rare: #3b82f6;
  --rare-deep: #1d4ed8;
  --rare-glow: rgba(59, 130, 246, 0.25);
  --normal: #22c55e;
  --normal-deep: #15803d;
  --normal-glow: rgba(34, 197, 94, 0.3);
  --bg: #f6f4ef;
  --card-bg: rgba(255, 255, 255, 0.92);
  --border: rgba(0, 0, 0, 0.1);
  --text-sub: #8b8374;
  --text-dim: #a8a094;
}

@font-face {
  font-family: 'p-bold';
  src: url('p-bold.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

html, body {
  min-height: 100%;
}

/* 表单控件不继承 body 字体，显式继承全局字体 */
button, input, select, textarea {
  font-family: inherit;
}

body {
  font-family: 'p-bold', "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(ellipse at 50% -20%, #fffdf8 0%, var(--bg) 60%) fixed;
  color: #333;
  overflow-x: hidden;
  /* 禁止鼠标拖动选中文字/图片 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* 移动端长按不弹菜单 */
}

/* ===== 星空背景（浅色微尘） ===== */
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(0, 0, 0, 0.12), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(212, 175, 55, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 60% 20%, rgba(0, 0, 0, 0.15), transparent),
    radial-gradient(1px 1px at 80% 50%, rgba(0, 0, 0, 0.1), transparent),
    radial-gradient(1.5px 1.5px at 90% 80%, rgba(0, 0, 0, 0.12), transparent),
    radial-gradient(1px 1px at 10% 85%, rgba(0, 0, 0, 0.1), transparent),
    radial-gradient(1px 1px at 70% 90%, rgba(212, 175, 55, 0.3), transparent),
    radial-gradient(1px 1px at 30% 10%, rgba(0, 0, 0, 0.1), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(0, 0, 0, 0.14), transparent),
    radial-gradient(1.5px 1.5px at 95% 15%, rgba(0, 0, 0, 0.12), transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* ===== 页面布局 ===== */
.page {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.header { text-align: center; }
.title {
  font-size: 28px;
  letter-spacing: 4px;
  color: #2e2a24;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.subtitle { margin-top: 4px; font-size: 13px; color: var(--text-sub); letter-spacing: 2px; }

/* ===== 音乐开关 ===== */
.music-btns {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.music-btn {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-sub);
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.25s;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.music-btn .music-icon { font-size: 15px; line-height: 1; }
.music-btn:hover { border-color: rgba(184, 134, 11, 0.5); color: #4a4a4a; }
.music-btn.on {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}
.music-btn.on .music-icon { animation: musicWave 1s ease-in-out infinite; }
@keyframes musicWave {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* ===== 曼德尔砖选择（下拉） ===== */
.brick-picker {
  width: 100%;
  max-width: 640px;
  padding: 0 16px 10px;
}
.brick-select {
  position: relative;
}
.brick-select-bar {
  display: flex;
  align-items: stretch;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.brick-select-main,
.brick-select-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}
.brick-select-main:disabled,
.brick-select-toggle:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.brick-select-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #4a4a4a;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.brick-select-main:hover:not(:disabled),
.brick-select-toggle:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.06);
}
.brick-select-main img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}
.brick-select-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brick-select-arrows {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  margin-left: 6px;
  padding-right: 2px;
}
.brick-select-arrow-up,
.brick-select-arrow-down {
  font-size: 8px;
  color: #aaa;
  line-height: 0.85;
}
.brick-select:not(.open) .brick-select-arrow-down { color: var(--legend-strong); }
.brick-select:not(.open) .brick-select-arrow-up { opacity: 0.35; }
.brick-select.open .brick-select-arrow-up { color: var(--legend-strong); }
.brick-select.open .brick-select-arrow-down { opacity: 0.35; }
.brick-select-toggle {
  flex-shrink: 0;
  min-width: 72px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border);
  color: #666;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.brick-select-toggle-text {
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.brick-select.open .brick-select-bar {
  border-color: var(--legend-strong);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.18);
}
.brick-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
}
.brick-select-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #555;
  cursor: pointer;
  transition: background 0.15s;
}
.brick-select-item img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}
.brick-select-item span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brick-select-item:hover { background: #f5f5f7; }
.brick-select-item.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.05));
  color: #333;
  font-weight: 600;
}

/* ===== 保底进度 ===== */
.pity-bar {
  width: 100%;
  max-width: 640px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.pity-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 8px;
}
.pity-label { color: var(--text-sub); }
.pity-count { color: #3f3f3f; font-weight: 700; }
.pity-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.pity-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #eab308, #b8860b);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  transition: width 0.5s ease;
}
.pity-tip { margin-top: 8px; font-size: 12px; color: var(--text-dim); }

/* ===== 抽卡展示区 ===== */
.draw-stage {
  width: 100%;
  min-height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 0;
}
.draw-stage .placeholder {
  color: #b5aea0;
  font-size: 14px;
  letter-spacing: 2px;
  text-align: center;
  line-height: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}

/* ===== 卡池轮播（S/A 级枪皮展示，样式同典藏图鉴库卡面） ===== */
.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.carousel-card {
  position: relative;
  width: 100%;
  height: 246px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}
.carousel-card.g-legend {
  border-color: var(--legend);
  box-shadow: 0 0 22px var(--legend-glow), inset 0 0 18px rgba(255, 215, 0, 0.1);
  background: linear-gradient(165deg, #3a2f0a, #221c08);
}
.carousel-card.g-epic {
  border-color: var(--epic);
  box-shadow: 0 0 18px var(--epic-glow), inset 0 0 14px rgba(168, 85, 247, 0.12);
  background: linear-gradient(165deg, #2c1440, #1a0b2a);
}
.carousel-card .carousel-img {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.carousel-card .carousel-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.carousel-card.g-legend .carousel-img img {
  animation: legendFloat 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.7));
}
.carousel-card .carousel-name {
  width: 100%;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #c9c9d0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.carousel-card.g-legend .carousel-name { color: #ffd700; }
.carousel-card.g-epic .carousel-name { color: #d8b4fe; }
.carousel-card .carousel-ratio {
  font-size: 12px;
  color: #9a9aa2;
  letter-spacing: 1px;
  padding: 0 6px 10px;
  white-space: nowrap;
}
.carousel-grade {
  position: absolute;
  top: 8px;
  left: 8px;
  width: auto;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.carousel-card.g-legend .carousel-grade { background: var(--legend); color: #3a2f0a; }
.carousel-card.g-epic .carousel-grade { background: var(--epic); color: #fff; }
.carousel-dots {
  display: flex;
  gap: 6px;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.carousel-dot.active {
  background: #b8860b;
  transform: scale(1.3);
}
.carousel-dot:hover { background: rgba(184, 134, 11, 0.55); }
/* 轮播切换动画：左进右出 */
.carousel-fade-enter-active,
.carousel-fade-leave-active {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.carousel-fade-enter { opacity: 0; transform: translateX(28px); }
.carousel-fade-leave-to { opacity: 0; transform: translateX(-28px); }

/* 卡片容器 */
.card-wrap {
  perspective: 1000px;
}
/* 十连：一行最多 5 张 */
.draw-stage.multi {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px 12px;
  align-items: center;
  justify-items: center;
}
.draw-stage.multi .card-wrap { width: 100%; }
.card {
  position: relative;
  width: 180px;
  height: 252px;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.card.flipped { transform: rotateY(180deg); }

/* 卡面通用 */
.card-face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 2px solid rgba(255, 255, 255, 0.12);
}

/* 卡背 */
.card-back {
  background:
    radial-gradient(circle at 50% 35%, rgba(212, 175, 55, 0.16), transparent 60%),
    linear-gradient(160deg, #26262b, #131316);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.card-back .brick-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px dashed rgba(184, 134, 11, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: brickPulse 1.6s ease-in-out infinite;
}
.card-back .brick-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.card-back .back-name {
  font-size: 12px;
  color: #9a9aa2;
  letter-spacing: 1px;
  padding: 0 8px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@keyframes brickPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(212, 175, 55, 0.2); }
  50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.55); }
}

/* 卡面（正面） */
.card-front {
  transform: rotateY(180deg);
  background: #1c1c20;
}
.card-front .card-img {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  min-height: 0;
}
.card-front .card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}
.card-front .card-name {
  padding: 8px 6px;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  color: #c9c9d0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 二次判定信息（所有卡显示成色，S 卡多品质） */
.card-front .card-sub {
  font-size: 10px;
  letter-spacing: 1px;
  text-align: center;
  padding: 0 6px 6px;
  color: #ffd700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-front.g-epic .card-sub { color: #d8b4fe; }
.card-front.g-rare .card-sub { color: #93c5fd; }
.card-front.g-normal .card-sub { color: #86efac; }

/* 等级角标 */
.card-grade {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* 等级颜色边框与光效 */
.card-front.g-legend {
  border-color: var(--legend);
  box-shadow: 0 0 22px var(--legend-glow), inset 0 0 18px rgba(255, 215, 0, 0.1);
  background: linear-gradient(165deg, #3a2f0a, #221c08);
}
.card-front.g-legend .card-grade { background: var(--legend); color: #3a2f0a; }
.card-front.g-legend .card-name { color: #ffd700; }

.card-front.g-epic {
  border-color: var(--epic);
  box-shadow: 0 0 18px var(--epic-glow), inset 0 0 14px rgba(168, 85, 247, 0.12);
  background: linear-gradient(165deg, #2c1440, #1a0b2a);
}
.card-front.g-epic .card-grade { background: var(--epic); color: #fff; }
.card-front.g-epic .card-name { color: #d8b4fe; }

.card-front.g-rare {
  border-color: var(--rare);
  box-shadow: 0 0 14px var(--rare-glow), inset 0 0 10px rgba(59, 130, 246, 0.1);
  background: linear-gradient(165deg, #122b4d, #0a1830);
}
.card-front.g-rare .card-grade { background: var(--rare); color: #fff; }
.card-front.g-rare .card-name { color: #93c5fd; }

.card-front.g-normal {
  border-color: var(--normal);
  box-shadow: 0 0 10px var(--normal-glow), inset 0 0 10px rgba(34, 197, 94, 0.1);
  background: linear-gradient(165deg, #0e3520, #081f12);
}
.card-front.g-normal .card-grade { background: var(--normal); color: #fff; }
.card-front.g-normal .card-name { color: #86efac; }
.card-front .card-grade{width: auto;font-size: 11px;padding: 0 5px;height: 20px; }
/* 传说卡专属光效（翻牌后持续闪烁 + 光柱） */
.card-front.g-legend::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: conic-gradient(from 0deg, transparent 0deg, var(--legend-strong) 30deg, transparent 60deg, transparent 180deg, var(--legend-strong) 210deg, transparent 240deg);
  animation: legendSpin 2.4s linear infinite;
  z-index: -1;
  filter: blur(6px);
  opacity: 0.9;
}
@keyframes legendSpin {
  to { transform: rotate(360deg); }
}
.card-front.g-legend .card-img img {
  animation: legendFloat 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.7));
}
@keyframes legendFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.04); }
}

/* 十连模式缩小 */
.draw-stage.multi .card {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
}
.draw-stage.multi .card-front .card-img { padding: 6px; }
.draw-stage.multi .card-front .card-name { font-size: 10px; padding: 5px 4px; }
.draw-stage.multi .card-grade { width: auto; height: 20px; font-size: 11px; top: 6px; left: 6px; border-radius: 6px; padding: 0 5px; }
.draw-stage.multi .card-back .brick-mark { width: 44px; height: 44px; font-size: 20px; }
.draw-stage.multi .card-back .back-name { font-size: 9px; }

/* ===== 抽卡仪式（中心砖不动 + 环绕旋转发光） ===== */
.intro-stage {
  position: relative;
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 十连 grid 下仪式层占满整行 */
.draw-stage.multi .intro-stage { grid-column: 1 / -1; }
/* 环绕轨道：只有这层旋转，中心砖不放进旋转层，保持静止；点击左滑/右滑后才开始旋转 */
.intro-orbit {
  position: absolute;
  inset: 0;
  --orbit: 130px;
}
.intro-orbit.spin-cw  { animation: introSpin 1s cubic-bezier(0.25, 0.6, 0.35, 1); }
.intro-orbit.spin-ccw { animation: introSpinRev 1s cubic-bezier(0.25, 0.6, 0.35, 1); }
@keyframes introSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes introSpinRev {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
.intro-brick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(160deg, #26262b, #131316);
  border: 2px solid rgba(212, 175, 55, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.intro-brick img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  transition: transform 0.3s;
}
/* 发光：闪白一下 + 按品质变边框光晕 + 图片轻微放大 */
.intro-brick.lit { animation: introFlash 0.55s ease; }
.intro-brick.lit img { transform: scale(1.12); }
@keyframes introFlash {
  0% { filter: brightness(2.6); }
  100% { filter: brightness(1); }
}
.intro-brick.lit-legend { border-color: var(--legend); box-shadow: 0 0 20px var(--legend-glow), 0 0 34px rgba(255, 215, 0, 0.55); }
.intro-brick.lit-epic   { border-color: var(--epic); box-shadow: 0 0 20px var(--epic-glow), 0 0 34px rgba(168, 85, 247, 0.5); }
.intro-brick.lit-rare   { border-color: var(--rare); box-shadow: 0 0 20px var(--rare-glow), 0 0 30px rgba(59, 130, 246, 0.45); }
.intro-brick.lit-normal { border-color: var(--normal); box-shadow: 0 0 20px var(--normal-glow), 0 0 26px rgba(34, 197, 94, 0.4); }
.intro-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 18px;
  background: linear-gradient(160deg, #2e2e34, #18181c);
  border: 2px solid rgba(212, 175, 55, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: introCenterPulse 1.2s ease-in-out infinite;
}
.intro-center img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}
.intro-center-tag {
  position: absolute;
  bottom: 4px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #ffd700;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  padding: 1px 6px;
}
@keyframes introCenterPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(212, 175, 55, 0.3); }
  50% { box-shadow: 0 0 36px rgba(212, 175, 55, 0.65); }
}
/* ===== 祈祷滑动按钮（左滑/右滑，点击后才开始旋转） ===== */
.intro-swipe {
  position: absolute;
  left: 50%;
  top: calc(50% + 66px);
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 2;
  white-space: nowrap;
}
.swipe-btn {
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.9);
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #3d2c00;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.25s;
  user-select: none;
  animation: swipePulse 1.4s ease-in-out infinite;
}
.swipe-btn:hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(217, 119, 6, 0.8); }
.swipe-btn:active { transform: scale(0.95); }
@keyframes swipePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(217, 119, 6, 0.4); }
  50% { box-shadow: 0 0 22px rgba(217, 119, 6, 0.85); }
}
/* 点击后按钮向对应方向滑出（左滑向左、右滑向右） */
.intro-swipe.swipe-out-left { animation: swipeLeft 0.4s ease forwards; }
.intro-swipe.swipe-out-right { animation: swipeRight 0.4s ease forwards; }
@keyframes swipeLeft {
  to { transform: translate(calc(-50% - 120px), 0); opacity: 0; }
}
@keyframes swipeRight {
  to { transform: translate(calc(-50% + 120px), 0); opacity: 0; }
}
/* ===== S 卡全屏特效 ===== */
.legend-flash {
  position: fixed; /* fixed 不参与文档高度计算，避免把页面撑出大片空白 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}
.legend-flash.on {
  opacity: 1;
  animation: flashFade 3s ease-out forwards;
}
.legend-flash .flash-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(190, 150, 40, 0.5) 8deg, transparent 16deg,
    transparent 45deg, rgba(255, 235, 190, 0.6) 53deg, transparent 61deg,
    transparent 90deg, rgba(190, 150, 40, 0.5) 98deg, transparent 106deg,
    transparent 135deg, rgba(255, 235, 190, 0.6) 143deg, transparent 151deg,
    transparent 180deg, rgba(190, 150, 40, 0.5) 188deg, transparent 196deg,
    transparent 225deg, rgba(255, 235, 190, 0.6) 233deg, transparent 241deg,
    transparent 270deg, rgba(190, 150, 40, 0.5) 278deg, transparent 286deg,
    transparent 315deg, rgba(255, 235, 190, 0.6) 323deg, transparent 331deg);
  animation: raySpin 3s linear infinite;
}
@keyframes raySpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes flashFade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  100% { opacity: 0; }
}

/* 金色粒子 */
.gold-particle {
  position: absolute;
  z-index: 998;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8, #d4af37);
  box-shadow: 0 0 10px var(--legend-strong);
  pointer-events: none;
  animation: particleFall 1.4s ease-out forwards;
}
@keyframes particleFall {
  to { transform: translateY(120px) scale(0.2); opacity: 0; }
}

/* ===== 按钮 ===== */
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
}
.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.action-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #3f3f3f;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}
.btn {
  padding: 13px 34px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  color: #fff;
  transition: all 0.25s;
  user-select: none;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.35);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 4px 26px rgba(220, 38, 38, 0.55); transform: translateY(-2px); }

.btn-gold {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #3d2c00;
  box-shadow: 0 4px 18px rgba(217, 119, 6, 0.35);
}
.btn-gold:hover:not(:disabled) { box-shadow: 0 4px 28px rgba(217, 119, 6, 0.55); transform: translateY(-2px); }

.btn-ghost {
  background: #fff;
  border: 1px solid var(--border);
  color: #6b6b6b;
  font-weight: 500;
}
.btn-ghost:hover:not(:disabled) { border-color: rgba(184, 134, 11, 0.5); color: #3a3a3a; }

/* ===== 统计 ===== */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  font-size: 13px;
  color: var(--text-sub);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.stats b { font-weight: 700; color: #333; }
.stats-clear {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: #ef4444;
  cursor: pointer;
}
.stats-clear:hover:not(:disabled) { color: #b91c1c; }
.stats-clear:disabled { color: #9ca3af; cursor: default; }
.c-legend { color: var(--legend-deep) !important; }
.c-epic { color: var(--epic-deep) !important; }
.c-rare { color: var(--rare-deep) !important; }

/* ===== 概率弹窗 ===== */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(25, 18, 8, 0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-mask.open { display: flex; }
.modal {
  width: 100%;
  max-width: 720px;
  max-height: 84vh;
  background: linear-gradient(170deg, #fffdf8, #f8f5ee);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: 16px; color: #3a3a3a; letter-spacing: 1px; }
.modal-close {
  background: none;
  border: none;
  color: #9a9180;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.modal-close:hover { color: #333; }
.modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
}
.modal-ava {
  font-size: 13px;
  color: #5a5a5a;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  white-space: pre-line; /* avaRatio 内含 \n，需保留换行 */
}
.prob-group-title {
  font-size: 13px;
  color: var(--text-sub);
  margin: 12px 0 8px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prob-group-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.prob-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.prob-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.prob-item:hover { border-color: var(--primary, #e54d42); }
.prob-item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}
.prob-item .prob-name {
  flex: 1;
  font-size: 12px;
  color: #555;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.prob-item .prob-ratio {
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ===== 卡片详情弹窗（黑色系） ===== */
.modal.card-detail {
  max-width: 420px;
  background: linear-gradient(170deg, #232327, #151518);
  border-color: rgba(212, 175, 55, 0.35);
}
.modal.card-detail .modal-head { border-bottom-color: rgba(255, 255, 255, 0.12); }
.modal.card-detail .modal-head h3 { color: #e8e8e8; }
.modal.card-detail .modal-close { color: #9a9aa2; }
.modal.card-detail .modal-close:hover { color: #fff; }
.card-detail-body { padding: 0; overflow-y: auto; }
.detail-img {
  position: relative;
  isolation: isolate; /* 创建 stacking context，让 z-index:-1 的扫光伪元素显示在背景之上 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 260px;
}
/* 详情弹窗 S 卡专属光效（与卡面一致：旋转扫光 + 图片浮动辉光） */
.detail-img.g-legend::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  background: conic-gradient(from 0deg,
    transparent 0deg, var(--legend-strong) 70deg, transparent 130deg,
    transparent 180deg, var(--legend-strong) 250deg, transparent 310deg);
  animation: detailSweep 2.4s linear infinite;
  z-index: -1;
  opacity: 0.9;
  filter: blur(2px);
  /* 中心与外圈淡出，只保留中间半径的细长光带 */
  -webkit-mask: radial-gradient(circle, transparent 15%, #000 55%, transparent 82%);
  mask: radial-gradient(circle, transparent 15%, #000 55%, transparent 82%);
}
@keyframes detailSweep {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.detail-img.g-legend img {
  animation: legendFloat 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.7));
}
.detail-img.g-legend { background: radial-gradient(circle at 50% 30%, rgba(255, 215, 0, 0.12), transparent 60%), linear-gradient(165deg, #3a2f0a, #221c08); }
.detail-img.g-epic   { background: radial-gradient(circle at 50% 30%, rgba(168, 85, 247, 0.14), transparent 60%), linear-gradient(165deg, #2c1440, #1a0b2a); }
.detail-img.g-rare   { background: radial-gradient(circle at 50% 30%, rgba(59, 130, 246, 0.1), transparent 60%), linear-gradient(165deg, #122b4d, #0a1830); }
.detail-img.g-normal { background: radial-gradient(circle at 50% 30%, rgba(34, 197, 94, 0.1), transparent 60%), linear-gradient(165deg, #0e3520, #081f12); }
.detail-img img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}
.detail-info { padding: 16px 20px 22px; }
.detail-rank-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.detail-rank-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: #333;
  border: 2px solid rgba(255, 215, 0, 0.35);
}
.detail-rank-user-meta { flex: 1; min-width: 0; }
.detail-rank-user-meta .detail-meta { margin-bottom: 4px; }
.detail-rank-user-meta .detail-meta:last-child { margin-bottom: 0; }
.detail-grade {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}
.grade-badge {
  /*width: 30px;*/
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  width: auto;
  padding: 0 10px;
}
.detail-name {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0 12px;
  word-break: break-all;
}
.detail-meta {
  font-size: 13px;
  color: #9a9aa2;
  margin-top: 6px;
}
.detail-meta b { color: #e0e0e0; font-weight: 600; }

/* ===== 移动端适配 ===== */
/* ===== 粉丝门禁 ===== */
.fan-gate {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(25, 18, 8, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.fan-gate-card {
  width: 100%;
  max-width: 340px;
  background: linear-gradient(170deg, #fffdf8, #f8f5ee);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  padding: 26px 20px 22px;
  text-align: center;
}
.fan-gate-badge {
  display: inline-block;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #3d2c00;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  border-radius: 999px;
  margin-bottom: 16px;
}
.fan-gate-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
}
.fan-gate-name { font-size: 18px; font-weight: 700; color: #222; }
.fan-gate-fans { font-size: 12px; color: #888; margin-top: 4px; }
.fan-gate-tip { font-size: 13px; color: #6b6b6b; margin: 14px 0 18px; line-height: 1.6; }
.fan-gate-btn { width: 100%; margin-top: 10px; letter-spacing: 1px; }

/* ===== 作者信息卡 ===== */
.author-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 13px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: opacity 0.2s;
}
.author-card:hover { opacity: 0.85; }
.author-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  object-fit: cover;
}
.author-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.author-name {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.author-fans { font-size: 12px; color: #888; }
.author-follow-btn {
  flex-shrink: 0;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.author-follow-btn:active { opacity: 0.85; }

/* ===== 底部二维码 ===== */
.qr-section {
  width: 100%;
  max-width: 640px;
  margin: 4px auto 0;
  padding: 20px 16px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
}
.qr-code {
  width: 140px;
  height: 140px;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: contain;
}
.qr-tip {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-sub);
  letter-spacing: 1px;
}

/* ===== 配置模块 ===== */
.config-section {
  width: 100%;
  max-width: 640px;
  margin: 10px auto 0;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.config-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.config-label {
  font-size: 13px;
  color: #555;
  white-space: nowrap;
}
.config-range {
  flex: 1;
  accent-color: #b8860b;
  cursor: pointer;
}
.config-value {
  font-size: 13px;
  font-weight: 700;
  color: #3f3f3f;
  min-width: 42px;
  text-align: right;
  white-space: nowrap;
}

/* ===== 图鉴库 ===== */
.collection-section {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 16px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.collection-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.collection-title {
  font-size: 16px;
  font-weight: 700;
  color: #3a3a3a;
  letter-spacing: 1px;
}
.collection-count {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}
.collection-empty {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  padding: 18px 8px 6px;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px 12px;
  justify-items: center;
}
.collection-grid .card-wrap {
  width: 100%;
  cursor: pointer;
}
.collection-grid .card {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
}
.collection-grid .card-front .card-img { padding: 6px; }
.collection-grid .card-front .card-name { font-size: 10px; padding: 5px 4px; }
.collection-grid .card-grade {
  width: auto;
  height: 20px;
  font-size: 11px;
  top: 6px;
  left: 6px;
  border-radius: 6px;
  padding: 0 5px;
}

.collection-cloud {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.collection-cloud-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-sm {
  padding: 8px 18px;
  font-size: 13px;
  letter-spacing: 1px;
}
.btn-cloud {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  box-shadow: 0 3px 12px rgba(2, 132, 199, 0.3);
}
.btn-cloud:hover:not(:disabled) { transform: translateY(-1px); }
/* 非 B 站环境：云存档按钮置灰 */
.btn-cloud:disabled {
  background: #9ca3af;
  box-shadow: none;
}
.btn-danger {
  background: linear-gradient(135deg, #f472b6, #db2777);
  box-shadow: 0 3px 12px rgba(219, 39, 119, 0.3);
}
.btn-danger:hover:not(:disabled) { transform: translateY(-1px); }
.cloud-tip {
  text-align: center;
  padding: 0 0 10px;
  color: #b45309;
  font-size: 12px;
  line-height: 1.5;
}

/* 系统弹窗 / Toast / Loading */
.sys-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(25, 18, 8, 0.55);
  backdrop-filter: blur(4px);
}
.sys-modal-box {
  width: 100%;
  max-width: 340px;
  background: #fffdf8;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}
.sys-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.5;
}
.sys-modal-content {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.6;
  margin-bottom: 12px;
}
.sys-modal-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
  background: #fff;
}
.sys-modal-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.loading-mask {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-box {
  background: #fff;
  border-radius: 12px;
  padding: 20px 28px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.loading-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  border: 3px solid #eee;
  border-top-color: #ef4444;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 13px; color: #666; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  z-index: 1400;
  background: rgba(30, 30, 30, 0.88);
  color: #fff;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 999px;
  max-width: 80vw;
  text-align: center;
  pointer-events: none;
}

/* ===== 主 Tab / 排行榜 ===== */
.tab-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.main-tabs {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 640px;
  padding: 6px;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
}
.main-tab {
  flex: 1;
  min-width: 0;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #666;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.main-tab:active { transform: scale(0.98); }
.main-tab.active {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.38);
}

.lb-head { text-align: center; }
.lb-title {
  font-size: 20px;
  color: #2d2a26;
}
.lb-sub {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 4px;
}
.lb-periods {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.lb-period {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: #666;
  font-size: 13px;
  cursor: pointer;
}
.lb-period.active {
  background: #2d2a26;
  border-color: #2d2a26;
  color: #fff;
}
.my-rank-card {
  width: 100%;
  max-width: 640px;
  text-align: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
}
.my-rank-body {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  text-align: left;
}
.my-rank-detail {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--legend-deep);
  font-weight: 600;
  line-height: 1.5;
  word-break: break-all;
}
.lb-empty {
  text-align: center;
  padding: 36px 0;
  color: var(--text-dim);
  font-size: 14px;
}
.rank-list {
  width: 100%;
  max-width: 640px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card-bg);
}
.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.rank-row-top {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.rank-row:last-child { border-bottom: none; }
.rank-no {
  width: 36px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #444;
  flex-shrink: 0;
}
.rank-medal { font-size: 18px; }

/* 排行榜右侧枪皮卡（复用典藏图鉴库 card 样式） */
.rank-card-wrap {
  width: 110px;
  flex-shrink: 0;
  margin-left: 12px;
  cursor: pointer;
}
.rank-card-wrap .card {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
}
.rank-card-wrap .card-front .card-img { padding: 6px; }
.rank-card-wrap .card-front .card-name {
  font-size: 10px;
  padding: 5px 4px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.rank-card-wrap .card-sub {
  font-size: 9px;
  padding: 0 4px 5px;
}
.rank-card-wrap .card-grade {
  width: auto;
  height: 20px;
  font-size: 11px;
  top: 6px;
  left: 6px;
  border-radius: 6px;
  padding: 0 5px;
}

.rank-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 0 10px;
  flex-shrink: 0;
  background: #eee;
  object-fit: cover;
}
.rank-info {
  flex: 1;
  min-width: 0;
}
.rank-name {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-detail {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 3px;
  line-height: 1.4;
  word-break: break-all;
}

@media (max-width: 640px) {
  .page { padding: 16px 12px 32px; gap: 14px; }
  .title { font-size: 22px; }
  .draw-stage { gap: 10px; }
  .draw-stage .card { width: 150px; height: 210px; }
  /* 手机屏窄，十连改 3 列（10 张 = 4 行），一行 5 张太小看不清 */
  .draw-stage.multi { grid-template-columns: repeat(3, 1fr); }
  .intro-stage { width: 260px; height: 260px; }
  .intro-orbit { --orbit: 104px; }
  .intro-brick { width: 46px; height: 46px; }
  .intro-center { width: 76px; height: 76px; }
  /* 移动端中心砖更小，滑动按钮上移避开轨道环带 */
  .intro-swipe { top: calc(50% + 48px); }
  .swipe-btn { padding: 10px 20px; font-size: 13px; }
  .draw-stage.multi { gap: 8px; }
  .draw-stage.multi .card-front .card-img { padding: 4px; }
  .draw-stage.multi .card-back .brick-mark { width: 36px; height: 36px; font-size: 16px; }
  .btn { padding: 12px 26px; font-size: 14px; }
  .brick-picker { padding-left: 12px; padding-right: 12px; }
  .brick-select-main { padding: 9px 12px; font-size: 13px; }
  .brick-select-main img { width: 30px; height: 30px; }
  .brick-select-toggle { min-width: 64px; padding: 9px 8px; font-size: 11px; }
  .brick-select-item img { width: 28px; height: 28px; }
  .main-tab { padding: 12px 14px; font-size: 15px; letter-spacing: 1px; }
  .prob-list { grid-template-columns: 1fr; }
  .stats { gap: 6px 12px; font-size: 12px; }
  .collection-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .collection-grid .card-front .card-img { padding: 4px; }

  /* 手机版排行榜：用户信息一行，枪皮卡居中放下方 */
  .lb-sub-hint { font-size: 11px; }
  .rank-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  .rank-row-top { width: 100%; }
  .rank-card-wrap {
    width: 132px;
    max-width: 46vw;
    margin: 0 auto;
  }
  .rank-card-wrap .card-front .card-name { font-size: 10px; }
  .rank-card-wrap .card-sub { font-size: 9px; }
  .my-rank-body {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .my-rank-detail { text-align: center; }
  .my-rank-body .rank-card-wrap { margin: 0 auto; }
}

/* ===== 资源条（量子密钥 / 曼德尔砖 + 任务中心入口） ===== */
.res-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px auto 14px;
  max-width: 640px;
}
.res-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px 5px 6px;
}
.res-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.res-num {
  font-size: 15px;
  font-weight: 700;
  color: #3f3f3f;
  font-variant-numeric: tabular-nums;
}
.btn-task {
  position: relative;
  margin-left: auto;
  background: linear-gradient(135deg, #ff8a4c, #ff5f3c);
  color: #fff;
}
.btn-task:hover:not(:disabled) { box-shadow: 0 4px 20px rgba(255, 95, 60, 0.45); transform: translateY(-1px); }
.task-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b30;
  border: 2px solid #fff;
}
.res-bar-modal {
  margin: 0 0 12px;
  max-width: none;
}
.res-bar-modal .btn-task { display: none; }

/* ===== 任务中心弹窗 ===== */
.task-modal { max-width: 560px; }
.task-free {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 143, 76, 0.12), rgba(255, 95, 60, 0.08));
  border: 1px solid rgba(255, 95, 60, 0.3);
  margin-bottom: 12px;
}
.task-free-title { font-size: 14px; font-weight: 700; color: #3a3a3a; }
.task-free-desc { font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.task-free-reward {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.task-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #3a3a3a;
  margin: 14px 0 10px;
}
/* 非 B 站环境：任务中心提示条 */
.task-env-tip {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(180, 83, 9, 0.1);
  border: 1px dashed rgba(180, 83, 9, 0.35);
  color: #b45309;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.task-sep::before,
.task-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
}
.task-info { flex: 1; min-width: 0; }
.task-name {
  font-size: 14px;
  font-weight: 700;
  color: #3a3a3a;
}
.task-rewards {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.task-reward {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--legend-strong);
  background: rgba(212, 175, 55, 0.15);
  border-radius: 6px;
  padding: 1px 7px;
  white-space: nowrap;
}
.res-icon-sm {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  object-fit: cover;
}
.task-desc { font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.task-progress { font-size: 12px; color: #6b6b6b; margin-top: 5px; font-variant-numeric: tabular-nums; }
.task-progress-done { color: var(--rare-deep); font-weight: 700; }
.task-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.task-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.task-foot-tip { font-size: 11px; color: var(--text-dim); }