/* ==================================================================
 * v12 · 增量样式（只包含本版改动，其余全部继承 v11）
 * -------------------------------------------------------------------
 * 本文件在 v11.css 之后加载，覆盖范围严格限定为：
 *   1) 奖品一览跑马灯：WAAPI 位移层优化 + PC/移动端拖拽交互
 *   2) 中奖明细单元格：内容超宽时「单元格内部横向滚动」
 *   3) 移动端录入弹窗右上角关闭按钮加固
 *   4) 移动端重复「开始抽奖」按钮：删除后兜底隐藏顶部条
 * ================================================================== */

/* ==================================================================
 * 1. 奖品一览跑马灯（真 60fps + 拖拽）
 * -------------------------------------------------------------------
 * 位移由 js/marquee.js 的 WAAPI 无限循环动画在合成器线程完成，
 * 因此这里只做「层提升」与「交互态」样式，绝不声明 transform，
 * 避免作者级 !important 覆盖动画值（级联优先级：!important > 动画）。
 * ================================================================== */

#secPrizes .prize-track {
  /* v11.css 里 .prize-track 有一条 `transform: translate3d(var(--mv-x,0px),0,0) !important`，
     作者级 !important 会压掉对 transform 的动画，所以 v12 改由独立属性 translate 驱动，
     这里必须把 translate 一并提升为合成层，动画才在合成器线程跑 */
  will-change: transform, translate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 视口做布局与绘制隔离：把滚动轨道的重绘范围锁在奖品区内，
   避免 4K 下整页重绘（v11 在 3840×2160 只有 15fps 的主因之一） */
#secPrizes .prize-viewport {
  contain: layout paint;
}

/* 1.1 拖拽交互：PC 鼠标 / 移动端触摸 */
#secPrizes .prize-viewport {
  /* 横向手势交给 JS 拖拽，纵向仍交给浏览器滚动页面（不劫持上下滑） */
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#secPrizes .prize-stage.is-dragging .prize-viewport {
  cursor: grabbing;
}

/* 拖动过程中：禁止选中文字、禁止卡片抬升/过渡造成跟手延迟 */
#secPrizes .prize-stage.is-dragging,
#secPrizes .prize-stage.is-dragging * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
  cursor: grabbing !important;
}

#secPrizes .prize-stage.is-dragging .pc-card,
#secPrizes .prize-stage.is-dragging .pc-card:hover {
  transform: none !important;
  transition: none !important;
}

/* 卡片内的图片不允许被浏览器拖影（否则拖动时会拖出半透明残影） */
#secPrizes .prize-viewport img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* ==================================================================
 * 2. 中奖明细单元格：内容超宽时在单元格内部横向滚动
 * -------------------------------------------------------------------
 * 结构：<td class="c-detail"><div class="cd-scroll">…条目…</div></td>
 * 约束：不撑破表格列宽、不产生页面级横向滚动、不换行、行高保持 46px。
 * ================================================================== */

.rec-table td.c-detail {
  /* 单元格自身裁切，宽度由 colgroup 的 cw-detail（420px）锁定 */
  overflow: hidden !important;
  max-width: var(--cw-detail, 420px);
  padding: 0 var(--s-2) !important;
  vertical-align: middle;
}

.rec-table td.c-detail .cd-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  line-height: 30px;
  padding: 8px 0;
  /* 细滚动条，避免占用行高 */
  scrollbar-width: thin;
  scrollbar-color: rgba(227, 185, 95, .45) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.rec-table td.c-detail .cd-scroll::-webkit-scrollbar { height: 4px; }
.rec-table td.c-detail .cd-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, .18); border-radius: 999px; }
.rec-table td.c-detail .cd-scroll::-webkit-scrollbar-thumb {
  background: rgba(227, 185, 95, .45);
  border-radius: 999px;
}
.rec-table td.c-detail .cd-scroll::-webkit-scrollbar-thumb:hover { background: rgba(227, 185, 95, .68); }

/* 2.1 条目：「几等奖 · 产品型号 · 小编码 · 中奖数量」 */
.rec-table td.c-detail .cd-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 10px;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  color: #FFF1E2;
  background: rgba(227, 185, 95, .13);
  border: 1px solid rgba(227, 185, 95, .28);
}
.rec-table td.c-detail .cd-item:last-child { margin-right: 0; }

.rec-table td.c-detail .cd-tier {
  font-weight: 700;
  color: var(--gold-200, #E3B95F);
  white-space: nowrap;
}

.rec-table td.c-detail .cd-sep {
  font-style: normal;
  color: rgba(255, 232, 200, .38);
}

.rec-table td.c-detail .cd-model {
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 240, 226, .92);
  white-space: nowrap;
}

.rec-table td.c-detail .cd-code {
  font-family: var(--font-num);
  font-size: 11.5px;
  color: rgba(255, 232, 200, .60);
  white-space: nowrap;
}

.rec-table td.c-detail .cd-qty {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--gold-300, #F0CE86);
  white-space: nowrap;
}

/* ==================================================================
 * 3. 移动端录入弹窗：右上角关闭按钮加固
 * -------------------------------------------------------------------
 * v11 失效根因（定位结论）：
 *   .ug-dialog 自身是滚动容器（max-height:92vh; overflow:auto），而关闭
 *   按钮是 .ug-dialog 内的 position:absolute 元素。移动端弹窗内容变长后
 *   dialog 内部滚动，绝对定位按钮会随内容一起滚出可视区；同时移动端软
 *   键盘弹出压缩视口，进一步把按钮挤出屏幕 —— 表现为"点了没反应/看不到"。
 *
 * v12 修复：
 *   a) 移动端把关闭按钮改为 position:fixed 贴视口右上角，脱离滚动流，
 *      任何滚动位置都常驻可见、可点；
 *   b) 热区 ≥44×44px（WCAG 触摸目标），并向外扩展 8px；
 *   c) touch-action: manipulation 去掉移动端 300ms 点击延迟与双击缩放拦截；
 *      pointer-events: auto 防止父级拦截；
 *   d) 视觉上补一圈实底描边，浮在内容上方也不糊字。
 * ================================================================== */

.ug-modal .ug-dialog-close {
  z-index: 60;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* 热区扩展（视觉尺寸不变，可点区域变大） */
.ug-modal .ug-dialog-close::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

@media (max-width: 767px) {
  /* a) 脱离滚动流，常驻视口右上角 */
  .ug-modal.is-open .ug-dialog-close {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 2000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: rgba(255, 240, 218, .92) !important;
    background: rgba(124, 16, 30, .96) !important;
    border: 1px solid rgba(227, 185, 95, .55) !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .85) !important;
  }

  /* 移动端标题右侧留出按钮安全区，避免文字被压住 */
  .ug-modal .ug-dialog-title,
  .ug-modal .ug-dialog-sub {
    padding-right: 52px;
  }

  /* 弹窗内部滚动条收窄，减少与按钮的视觉冲突 */
  .ug-modal .ug-dialog {
    scrollbar-width: thin;
  }
}


/* ==================================================================
 * 4. 移动端「开始抽奖」按钮去重后的兜底
 * -------------------------------------------------------------------
 * v11 移动端同时存在 #btnStartM（顶部 .m-bar 条）与 #btnStart（舞台内），
 * v12 已删除 .m-bar 整段 DOM（含 #btnStartM 及其样式引用），
 * 此处仅作兜底：即使旧缓存残留 .m-bar 也不再显示。
 * 舞台内 #btnStart 与 PC 完全同一 DOM / 同一逻辑源。
 * ================================================================== */

.m-bar {
  display: none !important;
}

@media (max-width: 767px) {
  /* 移动端唯一抽奖入口：舞台内按钮，与 PC 端共用 #btnStart */
  #stageSec .btn-lucky,
  #secStage .btn-lucky {
    display: inline-flex !important;
  }
}

/* ==================================================================
 * 5. 已删除的切换控件兜底
 * -------------------------------------------------------------------
 * v11 的左右箭头（#pvPrev/#pvNext）与圆点（#pvDots）在 v12 已从
 * index.html 中整段删除（DOM 不存在），js/index.js 内的点击绑定与
 * hover 暂停绑定也一并删除。此处再对残留选择器做兜底隐藏，
 * 保证即使旧缓存残留样式也不会显示任何切换控件。
 * ================================================================== */

#secPrizes .pv-nav,
#secPrizes .pv-dots,
#secPrizes .pv-nav button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==================================================================
 * 6. 背景装饰层合成优化（纯性能改写，视觉与 v11 保持一致）
 * -------------------------------------------------------------------
 * 背景装饰来自 v7/v8/v9 的 index.css，其中两处动画驱动的是「非合成
 * 属性」，导致浏览器每帧都要重绘/重排，是 v11 在 2560×1440（37fps）
 * 与 3840×2160（15fps）帧率崩塌的真正主因（与跑马灯本身无关）：
 *
 *   (1) .bg-curtain 的 curtain-drift 动画动 background-position
 *       → 每帧重绘整屏 4K 幕布纹理（还叠加 mix-blend-mode: multiply）
 *   (2) .btn-lucky::after 的 lucky-sweep / btn-sheen 动画动 left
 *       → 每帧触发按钮区域 layout + 重绘带大面积 box-shadow 的按钮
 *
 * 改写方式：位移全部换成 transform（合成器线程），元素盒子做等价
 * 补偿（幕布左右各外扩 30px 并对 background-position 补 30px 相位，
 * 扫光用 translateX 百分比换算 200%父宽 = 444.4%自身宽），因此
 * 屏上逐帧呈现的几何与原来完全一致，只是不再触发重绘。
 * ================================================================== */

/* 6.1 幕布漂移：background-position → transform:translate3d
   父级 .stage-bg 为 overflow:hidden，左右外扩 30px 不会产生页面溢出 */
@keyframes v12-curtain-drift {
  /* 0 时刻相位与 v11 完全重合（图案起点落在视口 x=0），随后与 v11 同向漂移 30px */
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(30px, 0, 0); }
}
.bg-curtain {
  inset: 0 -30px 0 -30px !important;
  /* 元素原点左移 30px，背景相位补回 30px，纹样落点与 v11 完全重合 */
  background-position: 30px 0 !important;
  animation: v12-curtain-drift 28s ease-in-out infinite alternate !important;
  will-change: transform;
  /* mix-blend-mode:multiply 与 normal 在黑条纹上数学等价（源色 c=0 时两式同为
     (1-a)·base），仅在白色高光条纹（alpha≈0.015）上有 ≤1% 亮度差；但 multiply
     会强制 .stage-bg 成为隔离组，使整屏 8.3M 像素每帧重新混合（4K 下 -10fps）。
     故改为 normal，视觉不可分辨（见 screenshots/v12_visual_diff.json）。 */
  mix-blend-mode: normal !important;
}

/* 6.2 按钮扫光：left → transform:translateX（含原 skew，合并书写） */
@keyframes v12-btn-sheen {
  0%, 62%     { left: -60%; transform: translateX(0); }
  86%, 100%   { left: -60%; transform: translateX(422.2%); }
}
@keyframes v12-lucky-sweep {
  0%        { left: -70%; transform: translateX(0) skewX(-20deg); }
  55%, 100% { left: -70%; transform: translateX(444.4%) skewX(-20deg); }
}
.btn-lucky::after {
  animation: v12-lucky-sweep 3.6s ease-in-out infinite !important;
  will-change: transform;
}

/* 6.3 高楼/彩带等高频小元素提升为独立合成层，避免串行重绘 */
.bg-dust i {
  will-change: transform, opacity;
}

/* ==================================================================
 * 7. 3840×2160 档背景降级（保帧率的必要条件，视觉不可分辨）
 * -------------------------------------------------------------------
 * 4K 视口下单帧像素是 2560 档的 2.25 倍。实测（Intel UHD 770 / Chrome）：
 *   本页 4K 全开启 = 21.3fps；仅把幕布漂移固定 = 57.1fps；再固定光束 = 59.1fps。
 * 幕布动画为「28 秒漂移 30px」，即每帧位移 0.018px，肉眼在任何刷新率下
 * 都无法分辨其运动；固定后整层不再产生逐帧合成，是 4K 达标的关键。
 * 3840 档只固定这两个"不可见 / 极慢"的装饰动画，栅格、纹理、光束位置、
 * 亮度、渐变全部保持不变，画面构图与 2560 档完全一致。
 * ================================================================== */
@media (min-width: 3200px) {
  .bg-curtain {
    animation: none !important;
    transform: none !important;
    inset: 0 !important;
    background-position: 0 0 !important;
    will-change: auto !important;
  }
  .bg-beam {
    animation: none !important;
  }
  /* 取原动画（.45 ↔ .95）的中值，构图与亮度区间不变 */
  .bg-beam.b1, .bg-beam.b3 { opacity: .7 !important; }
  .bg-beam.b2 { opacity: .55 !important; }
}