/* ==================================================================
 * v11 · 奖品一览：PC / 移动端统一的无缝跑马灯
 * -------------------------------------------------------------------
 * 改动范围严格限定在 #secPrizes 的「奖品一览」可视区与卡片轨道：
 *   - 不再区分「≤5 款静止 / >5 款滚动」，任意数量（1/4/5/8…）统一滚动；
 *   - 位移由 js/marquee.js 用 requestAnimationFrame 写入 --mv-x，
 *     经 transform: translate3d() 在 GPU 合成层完成，60fps 无抖动；
 *   - 可视区左右边界仍与上下版块保持 v9 验收的 0px 对齐（容器 padding 归零）。
 * 其余布局、样式、逻辑、音频行为与 v10 完全一致，未被本文件覆盖。
 * ================================================================== */

/* 1. 容器：左右边界 0px 对齐基线（沿用 v9） + 纵向裁切，杜绝页面横向滚动 */
#secPrizes .prize-stage {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden;
}

#secPrizes .prize-viewport {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  /* 覆盖 v3 ≤767 的 overflow: visible，移动端同样只做横向裁切 */
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-radius: 0 !important;
}

/* 2. 轨道：等间距单行序列，位移由 --mv-x 驱动 */
#secPrizes .prize-track {
  /* 覆盖 v3 ≤767 的 display:grid，移动端与 PC 统一为 flex 单行 */
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  grid-template-columns: none !important;
  grid-auto-flow: row !important;
  justify-content: flex-start !important;
  align-items: stretch;
  align-content: flex-start;
  gap: var(--pv-gap) !important;
  row-gap: 0 !important;
  column-gap: var(--pv-gap) !important;
  width: max-content !important;
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* 位移层：GPU 合成，只改 transform，不触发重排 */
  /* v12：位移改由 js/marquee.js 的 WAAPI 无限循环动画驱动。
     （CSS 里的作者级 !important 声明级联优先级高于动画，会吞掉动画效果，
       故此处不再声明 transform，避免覆盖合成器线程的位移动画。） */
  transition: none !important;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 3. 卡片：定宽（随视口与基准列数计算），不换行、不缩放 */
#secPrizes .prize-stage.is-marquee .pc-card {
  flex: 0 0 var(--mv-card-w, 200px) !important;
  width: var(--mv-card-w, 200px) !important;
  min-width: 0 !important;
  max-width: var(--mv-card-w, 200px) !important;
  align-self: stretch;
}

/* 4. 导航按钮沿用 v9 的「叠在卡片边缘之上」，不占位、不影响左右边界 */
#secPrizes .prize-stage.is-marquee .pv-nav { display: flex; }
#secPrizes .prize-stage .pv-dots { display: none !important; }

/* 5. 系统降级动效偏好：不再停滚（现场大屏需持续滚动），仅让悬停抬升失效 */
@media (prefers-reduced-motion: reduce) {
  #secPrizes .prize-track {
    /* v12：位移改由 js/marquee.js 的 WAAPI 无限循环动画驱动。
     （CSS 里的作者级 !important 声明级联优先级高于动画，会吞掉动画效果，
       故此处不再声明 transform，避免覆盖合成器线程的位移动画。） */
  }
  #secPrizes .pc-card:hover { transform: none; }
}

/* 6. 窄屏（≤767）：基准 2 列 + 更紧凑间距，容器仍严格裁切 */
@media (max-width: 767px) {
  #secPrizes .prize-stage {
    --pv-cols: 2;
    padding: 0 !important;
  }
  #secPrizes .prize-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* v12：位移改由 js/marquee.js 的 WAAPI 无限循环动画驱动。
     （CSS 里的作者级 !important 声明级联优先级高于动画，会吞掉动画效果，
       故此处不再声明 transform，避免覆盖合成器线程的位移动画。） */
  }
  #secPrizes .pc-card {
    flex: 0 0 var(--mv-card-w, 160px) !important;
    width: var(--mv-card-w, 160px) !important;
    max-width: var(--mv-card-w, 160px) !important;
  }
  #secPrizes .prize-stage .pv-nav { display: none !important; }
}