/**
 * 移动端性能优化 - 温和版
 * 策略：减少GPU负担，但不破坏布局
 */

/* 0. 盒子颜色 - 强制中性暖灰色 */
.box-face {
  background:
    /* 主体：温暖的米灰色 */
    linear-gradient(135deg,
      rgba(200, 195, 185, 0.75) 0%,
      rgba(180, 175, 165, 0.85) 100%
    ) !important;
  /* 移除backdrop-filter避免偏蓝 */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 0.1 扫描线 - 改为暖金色 */
.scanline {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 215, 0, 0.6),  /* 金色 */
    transparent
  ) !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important;
}

/* 1. 简化背景装饰动画 */
.decoration-circle {
  animation-duration: 30s; /* 更慢 */
}

/* 2. 减慢Logo动画 */
.logo-icon {
  animation-duration: 3s; /* 更慢 */
}

/* 3. 移除多重box-shadow，使用简单阴影 */
.blind-box-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-content {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* 4. 简化backdrop-filter，减少模糊 */
.blind-box-card,
.modal-content,
.user-dropdown {
  backdrop-filter: blur(5px); /* 减少: 10px→5px */
  -webkit-backdrop-filter: blur(5px);
}

/* 5. 移除不必要的光效 */
.box-front::before {
  display: none;
}

.btn-draw .btn-shine {
  display: none;
}

/* 6. 减慢骨架屏动画 */
.prize-skeleton {
  animation-duration: 2s; /* 更慢 */
}

/* 7. 移除中奖结果页面的旋转光效 */
#resultModal .prize-result::after {
  display: none;
}

#resultModal .celebration-header::before,
#resultModal .celebration-header::after {
  animation-duration: 6s; /* 更慢 */
}

/* 8. 减慢sparkle动画 */
#resultModal .sparkle {
  animation-duration: 3s;
}

/* 9. 减慢奖品浮动 */
#resultModal .prize-result .prize-image {
  animation-duration: 4s;
}

/* 10. 弹幕优化 - 减少文本阴影 */
.danmaku-item {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* 11. 禁用3D transforms */
.box-front {
  animation: none;
}

/* 12. 限制抽奖容器渲染范围 */
.lottery-boxes,
.lottery-container {
  contain: layout style;
}

/* 13. 减慢ticker滚动 */
.ticker-list {
  animation-duration: 30s;
}

/* 14. 优化hover效果 - 只用opacity */
.btn-user-avatar:hover {
  transform: none;
  opacity: 0.9;
}

.user-action-btn:hover {
  transform: none;
}

@media (max-width: 768px) {
  .modal-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.modal-open .modal-content {
    animation: none;
  }

  body.modal-open .modal-icon {
    animation: none;
  }

  body.modal-open .btn-icon,
  body.modal-open .btn-glow,
  body.modal-open .title-decoration,
  body.modal-open .hot-tags-track,
  body.modal-open .hot-tag::before,
  body.modal-open .ticker-list,
  body.modal-open .logo-icon,
  body.modal-open .decoration-circle {
    animation: none !important;
  }

  body.modal-open .winning-ticker {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.modal-open .background-decorations,
  body.modal-open #particleBackground {
    display: none;
  }

  #paymentResultModal .loading-spinner,
  #paymentResultModal .progress-bar {
    animation: none !important;
  }

  #paymentResultModal .progress-bar {
    width: 60%;
  }
}