/**
 * 盲盒抽奖动画 V2 - 赛博朋克风格
 * 设计理念：科技感 + 未来感 + 强视觉冲击
 *
 * 🎨 主题色适配设计原则：
 * - 盒子背景：使用透明黑色叠加（rgba(0,0,0,0.6-0.75)）
 * - 边框/网格：使用透明白色（rgba(255,255,255,0.05-0.1)）
 * - 霓虹特效：保持固定色彩（青/品红/黄），提供视觉冲击
 * - 问号发光：使用半透明白色+霓虹青色，适应背景
 *
 * 这样设计的好处：
 * ✅ 盒子会自然融入任何背景主题色
 * ✅ 紫色背景→盒子带紫色调
 * ✅ 橙色背景→盒子带橙色调
 * ✅ 霓虹特效始终醒目，不受背景影响
 */

/* ========== CSS变量定义 ========== */
:root {
  /* 霓虹色彩 - 固定色彩，提供视觉特效 */
  --neon-cyan: #00f5ff;
  --neon-magenta: #ff006e;
  --neon-yellow: #ffea00;
  --neon-purple: #b967ff;
  --neon-green: #05ffa1;

  /* 透明叠加层 - 适配任何背景色 */
  --overlay-dark: rgba(0, 0, 0, 0.6);
  --overlay-darker: rgba(0, 0, 0, 0.75);
  --overlay-light: rgba(255, 255, 255, 0.1);
  --overlay-lighter: rgba(255, 255, 255, 0.05);

  /* 发光效果 */
  --glow-cyan: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan);
  --glow-magenta: 0 0 10px var(--neon-magenta), 0 0 20px var(--neon-magenta), 0 0 40px var(--neon-magenta);
  --glow-yellow: 0 0 10px var(--neon-yellow), 0 0 20px var(--neon-yellow), 0 0 40px var(--neon-yellow);

  /* 动画时长 */
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;
}

/* ========== 容器布局 - 响应式设计 ========== */
.lottery-boxes-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;  /* 改为100%，由父容器控制实际宽度 */
  max-width: 100%;  /* 移除固定max-width */
  margin: 0;  /* 移除外边距，由父容器控制 */
  padding: 0;  /* 移除内边距，由父容器控制 */
  position: relative;

  /* 容器发光效果 */
  filter: drop-shadow(0 0 20px rgba(0, 245, 255, 0.1));
}

/* 移动端适配 - 平板 */
@media (max-width: 768px) {
  .lottery-boxes-v2 {
    gap: 16px;
  }
}

/* 移动端适配 - 手机 */
@media (max-width: 480px) {
  .lottery-boxes-v2 {
    gap: 12px;
  }
}

/* ========== 盒子基础样式 ========== */
.lottery-box-v2 {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  perspective: 1000px;
  transform-style: preserve-3d;
  cursor: pointer;

  /* 关键：外层容器也要圆角，与内部一致 */
  border-radius: 18px;
  overflow: hidden;  /* 裁剪溢出的方角内容 */

  /* 性能优化 */
  will-change: transform;
  contain: layout style paint;

  /* 抗锯齿和平滑渲染 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 盒子内部容器 */
.box-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 18px;  /* 内层也保持圆角 */

  /* 启用GPU加速，提升渲染质量 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ========== 盒体设计（拟物风格 - 中性灰色系）========== */
.box-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;

  /* 中性灰色渐变背景 - 兼容所有背景色 */
  background:
    /* 顶部高光 - 模拟金属光泽 */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 25%
    ),
    /* 左上光源 - 柔和光照 */
    radial-gradient(ellipse at 20% 20%,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 55%
    ),
    /* 右下阴影 - 增强立体感 */
    radial-gradient(ellipse at 80% 80%,
      transparent 35%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    /* 主体：中性灰色半透明 */
    linear-gradient(135deg,
      rgba(128, 128, 128, 0.25) 0%,
      rgba(96, 96, 96, 0.35) 100%
    );

  /* 毛玻璃效果 */
  backdrop-filter: blur(16px) saturate(1.1);

  /* 中性边框 - 柔和白边 */
  border: 2px solid rgba(255, 255, 255, 0.25);

  /* 柔和阴影 */
  box-shadow:
    /* 外部阴影 - 轻微浮起效果 */
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 12px 24px rgba(0, 0, 0, 0.12),
    /* 顶部内高光 - 柔和光泽 */
    inset 0 2px 3px rgba(255, 255, 255, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    /* 底部内阴影 - 轻微凹陷 */
    inset 0 -2px 3px rgba(0, 0, 0, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.06);

  /* 过渡效果 */
  transition: all var(--duration-normal) ease;

  /* 硬件加速 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 盒体内部网格纹理 - 使用透明白色 */
.box-face::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(var(--overlay-lighter) 1px, transparent 1px),
    linear-gradient(90deg, var(--overlay-lighter) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.3;
  pointer-events: none;
}

/* 问号标识 - 中性灰白色浮雕效果 */
.box-question {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85); /* 中性白色 */

  /* 柔和浮雕文字阴影 */
  text-shadow:
    /* 顶部高光 - 柔和光照 */
    0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 1px rgba(255, 255, 255, 0.15),
    /* 右下阴影 - 模拟深度 */
    1px 1px 2px rgba(0, 0, 0, 0.25),
    2px 2px 4px rgba(0, 0, 0, 0.18),
    3px 3px 6px rgba(0, 0, 0, 0.12),
    /* 中性白色柔光 - 替代霓虹青色 */
    0 0 12px rgba(255, 255, 255, 0.4),
    0 0 24px rgba(255, 255, 255, 0.25),
    0 0 40px rgba(255, 255, 255, 0.15);

  transition: all var(--duration-normal) ease;
  pointer-events: none;
  user-select: none;

  /* 微脉冲动画 */
  animation: questionPulse 2s ease-in-out infinite;

  /* 柔和3D阴影 */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.box-question.preview-active {
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  animation: none;
  text-shadow: none;
  filter: none;
  transition: none;
}

.lottery-box-v2.active .box-question.preview-active {
  animation: none;
}

/* 待机预览样式 */
.lottery-box-v2.idle-reveal .box-question {
  font-size: 0;
  animation: none;
  text-shadow: none;
  filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.box-image-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 14px;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}

.box-image-frame img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.preview-image {
  object-fit: contain;
}

.lottery-box-v2.idle-reveal .box-question .box-image-frame {
  width: clamp(96px, 72%, 150px);
}

.lottery-box-v2 .box-question .preview-image-frame {
  width: clamp(84px, 64%, 130px);
  animation: previewPop 0.2s ease;
}

.lottery-box-v2.idle-reveal .box-question .idle-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lottery-box-v2.idle-reveal .box-question .idle-emoji {
  font-size: 44px;
  line-height: 1;
}

.lottery-box-v2.idle-reveal .box-face {
  border-color: rgba(255, 218, 185, 0.45);
  box-shadow:
    0 6px 18px rgba(255, 170, 120, 0.16),
    inset 0 0 20px rgba(255, 214, 165, 0.12);
}

.lottery-box-v2.idle-reveal .neon-border {
  box-shadow:
    inset 0 0 0 2px rgba(255, 196, 140, 0.55),
    0 0 10px 1px rgba(255, 160, 120, 0.35),
    0 0 20px 2px rgba(255, 130, 96, 0.2);
  animation: idleWarmBreathing 6s ease-in-out infinite;
}

.lottery-box-v2.idle-swap .box-face {
  animation: idleGlow 0.48s ease-in-out;
}

.lottery-box-v2.idle-swap .box-question .idle-image,
.lottery-box-v2.idle-swap .box-question .idle-emoji {
  animation: idleSwap 0.48s ease-in-out;
}

.lottery-box-v2.idle-swap .idle-badge {
  animation: idleBadge 0.48s ease-in-out;
}

.lottery-box-v2.idle-flash .neon-border {
  opacity: 1;
  animation: neonFlow 1.2s linear infinite;
}

.lottery-box-v2.idle-flash .box-face {
  border-color: rgba(255, 178, 120, 0.6);
  box-shadow:
    0 8px 24px rgba(255, 166, 120, 0.25),
    inset 0 0 24px rgba(255, 196, 150, 0.12);
  transform: translateZ(0) scale(1.02);
}

.lottery-box-v2.idle-flash .scanline {
  opacity: 1;
  animation: scanlineMove 0.3s linear;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 188, 120, 0.8),
    transparent
  );
  box-shadow: 0 0 12px rgba(255, 170, 120, 0.45);
}

.lottery-box-v2 .idle-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.lottery-box-v2.idle-reveal .box-face::before {
  opacity: 0.15;
}

.lottery-box-v2.idle-reveal .box-face::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 245, 235, 0.2), transparent 60%),
    linear-gradient(135deg, rgba(255, 200, 150, 0.2), rgba(255, 155, 120, 0.06));
  pointer-events: none;
}

.lottery-box-v2.idle-reveal .scanline {
  opacity: 0;
}

.lottery-box-v2.idle-reveal .box-lid-v2 {
  opacity: 0.25;
  filter: blur(0.8px);
  background: linear-gradient(135deg,
    rgba(70, 35, 20, 0.55) 0%,
    rgba(55, 30, 25, 0.6) 100%
  );
  border: 1px solid rgba(255, 196, 150, 0.2);
  border-bottom: none;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 214, 165, 0.12);
}

.lottery-box-v2.idle-reveal .box-lid-v2::after {
  background: rgba(255, 188, 140, 0.35);
  box-shadow:
    0 0 4px rgba(255, 188, 140, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.2);
}

.lottery-box-v2 .idle-badge.rarity-sp { background: var(--color-rarity-sp, #b967ff); }
.lottery-box-v2 .idle-badge.rarity-sss { background: var(--color-rarity-sss, #ff0844); }
.lottery-box-v2 .idle-badge.rarity-ss { background: var(--color-rarity-ss, #ff8c00); }
.lottery-box-v2 .idle-badge.rarity-s { background: var(--color-rarity-s, #ffea00); color: #5a4b00; }
.lottery-box-v2 .idle-badge.rarity-sr { background: var(--color-rarity-sr, #00f5ff); color: #004e54; }
.lottery-box-v2 .idle-badge.rarity-r { background: var(--color-rarity-r, #ff69b4); }
.lottery-box-v2 .idle-badge.rarity-unknown { background: #9ca3af; }

@keyframes idleSwap {
  0% { opacity: 1; transform: scale(1); }
  45% { opacity: 0.3; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes idleGlow {
  0% { box-shadow: none; transform: translateZ(0) scale(1); }
  50% { box-shadow: 0 0 18px rgba(255, 176, 120, 0.35); transform: translateZ(0) scale(1.02); }
  100% { box-shadow: none; transform: translateZ(0) scale(1); }
}

@keyframes idleWarmBreathing {
  0%, 100% {
    box-shadow:
      inset 0 0 0 2px rgba(255, 196, 140, 0.5),
      0 0 8px 1px rgba(255, 170, 120, 0.3),
      0 0 16px 2px rgba(255, 140, 110, 0.2);
  }
  50% {
    box-shadow:
      inset 0 0 0 2px rgba(255, 160, 120, 0.6),
      0 0 10px 1px rgba(255, 140, 120, 0.35),
      0 0 20px 2px rgba(255, 120, 100, 0.25);
  }
}

@keyframes idleBadge {
  0% { opacity: 1; transform: scale(1); }
  45% { opacity: 0.6; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* 问号脉冲动画 - 中性色版本 */
@keyframes questionPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.35),
      0 2px 1px rgba(255, 255, 255, 0.15),
      1px 1px 2px rgba(0, 0, 0, 0.25),
      2px 2px 4px rgba(0, 0, 0, 0.18),
      3px 3px 6px rgba(0, 0, 0, 0.12),
      0 0 12px rgba(255, 255, 255, 0.4),
      0 0 24px rgba(255, 255, 255, 0.25),
      0 0 40px rgba(255, 255, 255, 0.15);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.45),
      0 2px 2px rgba(255, 255, 255, 0.25),
      1px 1px 3px rgba(0, 0, 0, 0.3),
      2px 2px 6px rgba(0, 0, 0, 0.22),
      3px 3px 8px rgba(0, 0, 0, 0.15),
      0 0 16px rgba(255, 255, 255, 0.5),
      0 0 32px rgba(255, 255, 255, 0.35),
      0 0 50px rgba(255, 255, 255, 0.2);
  }
}

/* 霓虹边框效果 - 使用box-shadow实现，彻底解决毛边 */
.neon-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 18px;  /* 与盒子圆角一致 */
  pointer-events: none;

  /* 使用box-shadow创建平滑边框 */
  box-shadow:
    /* 内层边框（青色） */
    inset 0 0 0 2px rgba(0, 245, 255, 0.6),
    /* 外层发光（青色） */
    0 0 10px 1px rgba(0, 245, 255, 0.4),
    0 0 20px 2px rgba(0, 245, 255, 0.2);

  /* 呼吸灯 + 颜色变化动画 */
  animation: neonBreathing 6s ease-in-out infinite;

  /* GPU加速 */
  transform: translateZ(0);
  will-change: box-shadow;
}

/* 呼吸灯动画 - 三色渐变循环 */
@keyframes neonBreathing {
  0%, 100% {
    box-shadow:
      inset 0 0 0 2px rgba(0, 245, 255, 0.5),
      0 0 8px 1px rgba(0, 245, 255, 0.3),
      0 0 16px 2px rgba(0, 245, 255, 0.15);
  }
  33% {
    box-shadow:
      inset 0 0 0 2px rgba(255, 0, 110, 0.6),  /* 品红 */
      0 0 12px 1px rgba(255, 0, 110, 0.4),
      0 0 24px 2px rgba(255, 0, 110, 0.2);
  }
  66% {
    box-shadow:
      inset 0 0 0 2px rgba(255, 234, 0, 0.6),  /* 黄色 */
      0 0 12px 1px rgba(255, 234, 0, 0.4),
      0 0 24px 2px rgba(255, 234, 0, 0.2);
  }
}

/* ========== 扫描线效果 ========== */
.scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--neon-cyan),
    transparent
  );
  box-shadow: var(--glow-cyan);
  opacity: 0.6; /* 待机状态可见 */
  pointer-events: none;

  /* 添加扫描动画 */
  animation: scanning 3s linear infinite;
}

/* 扫描线动画 */
@keyframes scanning {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* ========== 状态样式（中性灰色系）========== */

/* 悬停状态 - 盒子微抬起效果 */
.lottery-box-v2:hover .box-face {
  /* 增强高光 - 更明亮的灰白色 */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      transparent 28%
    ),
    radial-gradient(ellipse at 20% 20%,
      rgba(255, 255, 255, 0.18) 0%,
      transparent 60%
    ),
    radial-gradient(ellipse at 80% 80%,
      transparent 30%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    linear-gradient(135deg,
      rgba(148, 148, 148, 0.3) 0%,
      rgba(112, 112, 112, 0.4) 100%
    );

  /* 增强边框亮度 */
  border-color: rgba(255, 255, 255, 0.35);

  /* 增强立体阴影 - 模拟抬起 */
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 12px 24px rgba(0, 0, 0, 0.12),
    0 16px 32px rgba(0, 0, 0, 0.15),
    inset 0 2px 3px rgba(255, 255, 255, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -2px 3px rgba(0, 0, 0, 0.06);

  transform: translateY(-4px) translateZ(10px);
}

.lottery-box-v2:hover .box-question {
  color: rgba(255, 255, 255, 0.95); /* 中性白色 */
  /* 增强浮雕和柔光效果 */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(255, 255, 255, 0.3),
    1px 1px 3px rgba(0, 0, 0, 0.28),
    2px 2px 6px rgba(0, 0, 0, 0.22),
    3px 3px 9px rgba(0, 0, 0, 0.15),
    0 0 16px rgba(255, 255, 255, 0.5),
    0 0 32px rgba(255, 255, 255, 0.35),
    0 0 50px rgba(255, 255, 255, 0.2);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

/* 激活状态（闪动） */
.lottery-box-v2.active .neon-border {
  opacity: 1;
  animation: neonFlow 2s linear infinite;
}

.lottery-box-v2.active .box-face {
  border-color: var(--neon-cyan);
  box-shadow:
    0 10px 40px rgba(0, 245, 255, 0.4),
    inset 0 0 30px rgba(0, 245, 255, 0.1);
  transform: scale(1.05) translateZ(20px);
}

.lottery-box-v2.active .box-question {
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
  animation: pulse 0.5s ease infinite;
}

.lottery-box-v2.active .scanline {
  opacity: 1;
  animation: scanlineMove 0.3s linear;
}

/* 中奖状态 */
.lottery-box-v2.winner .box-face {
  background: linear-gradient(135deg,
    rgba(255, 0, 110, 0.3) 0%,
    rgba(255, 77, 77, 0.3) 100%
  );
  border-color: var(--neon-magenta);
  box-shadow:
    0 0 50px var(--neon-magenta),
    0 0 100px rgba(255, 0, 110, 0.5),
    inset 0 0 50px rgba(255, 0, 110, 0.2);
  animation: winnerPulse 0.5s ease-in-out 3;
}

.lottery-box-v2.winner .neon-border {
  opacity: 1;
  background: var(--neon-magenta);
  animation: neonExplode 0.6s ease-out;
}

/* ========== 开盒动画 ========== */
.box-lid-v2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25%;  /* 从40%降低到25% - 减少视觉占比 */
  border-radius: 16px 16px 0 0;

  /* 优化渐变：更暗的色调,更低的透明度,更好地融入背景 */
  background: linear-gradient(135deg,
    rgba(30, 20, 50, 0.6) 0%,
    rgba(20, 25, 60, 0.65) 100%
  );

  /* 更细的边框,更低的透明度 */
  border: 1px solid rgba(0, 245, 255, 0.15);
  border-bottom: none;

  /* 优化阴影：减弱盒盖存在感 */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(0, 245, 255, 0.1);

  transform-origin: top center;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 10;
}

/* 盒盖提手 */
.box-lid-v2::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;  /* 稍微缩小 */
  height: 6px;   /* 更细致 */

  /* 青色霓虹主题,与盒子边框呼应 */
  background: rgba(0, 245, 255, 0.3);
  border-radius: 3px;

  /* 细微发光效果 */
  box-shadow:
    0 0 4px rgba(0, 245, 255, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.2);
}

/* 盒盖飞出动画 */
.box-lid-v2.fly-out {
  animation: lidFlyOut 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* ========== 商品展示 ========== */
.box-content-v2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 8px;
  opacity: 0;
  transform: scale(0) translateZ(-50px);
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 5;
}

.box-content-v2.show {
  opacity: 1;
  transform: scale(1) translateZ(0);
}

/* 商品图片容器 */
.product-media-v2 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image-frame {
  width: 82%;
  max-width: 190px;
  aspect-ratio: 1 / 1;
}

.product-image-v2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}

/* 商品名称 */
.product-name-v2 {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  margin-bottom: 8px;
  line-height: 1.3;
  max-width: 90%;

  /* 文字截断 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 稀有度徽章 */
.product-rarity-v2 {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;

  /* 发光效果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* 动画 */
  animation: rarityFloat 2s ease-in-out infinite;
}

/* 稀有度颜色 - 6级系统 */
.rarity-sp {
  background: linear-gradient(135deg,
    var(--color-rarity-sp, #b967ff) 0%,
    var(--color-rarity-sp, #b967ff) 100%);
  color: #ffffff;
  box-shadow:
    0 0 20px var(--color-rarity-sp, #b967ff),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.rarity-sss {
  background: linear-gradient(135deg,
    var(--color-rarity-sss, #ff0844) 0%,
    var(--color-rarity-sss, #ff0844) 100%);
  color: #ffffff;
  box-shadow:
    0 0 20px var(--color-rarity-sss, #ff0844),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.rarity-ss {
  background: linear-gradient(135deg,
    var(--color-rarity-ss, #ff8c00) 0%,
    var(--color-rarity-ss, #ff8c00) 100%);
  color: #1a1a2e;
  box-shadow:
    0 0 20px var(--color-rarity-ss, #ff8c00),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.rarity-s {
  background: linear-gradient(135deg,
    var(--color-rarity-s, #ffea00) 0%,
    var(--color-rarity-s, #ffea00) 100%);
  color: #1a1a2e;
  box-shadow:
    0 0 20px var(--color-rarity-s, #ffea00),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.rarity-sr {
  background: linear-gradient(135deg,
    var(--color-rarity-sr, #00f5ff) 0%,
    var(--color-rarity-sr, #00f5ff) 100%);
  color: #ffffff;
  box-shadow:
    0 0 20px var(--color-rarity-sr, #00f5ff),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.rarity-r {
  background: linear-gradient(135deg,
    var(--color-rarity-r, #ff69b4) 0%,
    var(--color-rarity-r, #ff69b4) 100%);
  color: #ffffff;
  box-shadow:
    0 0 20px var(--color-rarity-r, #ff69b4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ========== 粒子效果容器 ========== */
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: 16px;
  z-index: 20;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--neon-cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--neon-cyan);
  opacity: 0;
  pointer-events: none;
}

/* ========== 关键帧动画 ========== */

/* 霓虹流动 */
@keyframes neonFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

@keyframes previewPop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 脉冲 */
@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.8;
  }
}

/* 扫描线移动 */
@keyframes scanlineMove {
  0% {
    top: -100%;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* 中奖脉冲 */
@keyframes winnerPulse {
  0%, 100% {
    transform: scale(1.05) translateZ(20px);
  }
  50% {
    transform: scale(1.15) translateZ(30px);
  }
}

/* 霓虹爆炸 */
@keyframes neonExplode {
  0% {
    opacity: 1;
    filter: blur(0px);
  }
  50% {
    opacity: 1;
    filter: blur(4px);
  }
  100% {
    opacity: 0.8;
    filter: blur(0px);
  }
}

/* 盒盖飞出 */
@keyframes lidFlyOut {
  0% {
    transform: rotateX(0deg) translateY(0) translateZ(0);
    opacity: 1;
  }
  100% {
    transform: rotateX(45deg) translateY(-250px) translateZ(100px) rotateZ(20deg);
    opacity: 0;
  }
}

/* 稀有度徽章漂浮 */
@keyframes rarityFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* 粒子爆发 */
@keyframes particleExplode {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* ========== 稀有度特效 - 6级系统 ========== */

/* SP级 - 紫色魔法阵 */
.sp-circle {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  border: 3px solid var(--color-rarity-sp, #b967ff);
  border-radius: 50%;
  box-shadow:
    0 0 20px var(--color-rarity-sp, #b967ff),
    inset 0 0 20px var(--color-rarity-sp, #b967ff);
  animation: circleExpand 1.5s ease-out;
  pointer-events: none;
  z-index: 15;
}

/* SSS级 - 红色光柱 */
.sss-beam {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 300px;
  background: linear-gradient(to top,
    var(--color-rarity-sss, #ff0844),
    transparent
  );
  opacity: 0.8;
  filter: blur(10px);
  animation: beamRise 1s ease-out;
  pointer-events: none;
  z-index: 15;
}

/* SS级 - 橙色光柱 */
.ss-beam {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 300px;
  background: linear-gradient(to top,
    var(--color-rarity-ss, #ff8c00),
    transparent
  );
  opacity: 0.8;
  filter: blur(10px);
  animation: beamRise 1s ease-out;
  pointer-events: none;
  z-index: 15;
}

/* S级 - 黄色光柱 */
.s-beam {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 300px;
  background: linear-gradient(to top,
    var(--color-rarity-s, #ffea00),
    transparent
  );
  opacity: 0.8;
  filter: blur(10px);
  animation: beamRise 1s ease-out;
  pointer-events: none;
  z-index: 15;
}

/* SR级 - 蓝色光波 */
.sr-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-rarity-sr, #00f5ff);
  border-radius: 16px;
  animation: waveExpand 1s ease-out;
  pointer-events: none;
  z-index: 15;
}

/* R级 - 粉色光波 */
.r-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-rarity-r, #ff69b4);
  border-radius: 16px;
  animation: waveExpand 1s ease-out;
  pointer-events: none;
  z-index: 15;
}

/* 动画定义 */
@keyframes beamRise {
  0% {
    height: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    height: 300px;
    opacity: 0.8;
  }
}

@keyframes circleExpand {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

@keyframes waveExpand {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* ========== 响应式设计 ========== */

/* 平板 */
@media (max-width: 768px) {
  .lottery-boxes-v2 {
    gap: 16px;
    max-width: 540px;
    padding: 15px;
  }

  .box-question {
    font-size: 60px;
  }

  .product-name-v2 {
    font-size: 14px;
  }

  .product-rarity-v2 {
    font-size: 12px;
    padding: 5px 12px;
  }
}

/* 手机 */
@media (max-width: 480px) {
  .lottery-boxes-v2 {
    gap: 12px;
    max-width: calc(100vw - 40px);
    padding: 10px;
    margin: 20px auto;
  }

  .box-face {
    border-radius: 12px;
  }

  .box-question {
    font-size: 48px;
  }

  .product-image-wrapper {
    width: 80%;
    height: 45%;
  }

  .product-name-v2 {
    font-size: 13px;
  }

  .product-rarity-v2 {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* 减少特效强度 */
  .lottery-box-v2.active .box-face {
    transform: scale(1.03) translateZ(10px);
  }

  .neon-border {
    display: none; /* 移动端隐藏霓虹边框以提升性能 */
  }
}

/* 小手机 */
@media (max-width: 375px) {
  .lottery-boxes-v2 {
    gap: 10px;
    max-width: calc(100vw - 30px);
  }

  .box-question {
    font-size: 40px;
  }

  .product-name-v2 {
    font-size: 12px;
  }

  .product-rarity-v2 {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* ========== 性能优化 ========== */

/* 减少动画在低性能设备上的复杂度 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .neon-border,
  .scanline,
  .particles-container {
    display: none !important;
  }
}

/* 提升性能的硬件加速 */
.lottery-box-v2,
.box-inner,
.box-face,
.box-lid-v2,
.box-content-v2 {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}