/* ===================================================================
 * css/v5.css — v5 改造覆盖层（加载于 style.css / index.css / v3.css 之后）
 * -------------------------------------------------------------------
 * 设计基调：红金年会主视觉 + 腾讯 2026 活动页的克制与秩序
 *
 * 本层实现的 v5 五项改动：
 *   1) 全局对齐体系：8px 栅格间距 / 统一 1440 栅格基线 / 卡片三段对齐
 *   2) 抽奖规则从主界面折叠为弹层（入口与中奖记录同排）
 *   3) 中奖记录改为标准表格：表头固定 · 列宽固定 · 数字右对齐 · 不换行
 *      · 超宽内容在容器内横向滚动
 *   4) 奖品图严格正方形；奖项 > 5 时无缝跑马灯（首尾无痕 / 悬停暂停 / 手动切换）
 *   5) 奖池剩余 / 抽奖规则 / 中奖记录 → 同一行三张大卡片
 * =================================================================== */

/* ==================================================================
 * 0. 设计令牌（8px 栅格 + 字体层级 + 圆角阴影层次 + 缓动）
 * ================================================================== */
:root {
  /* —— 间距：全部 8 的整数倍 —— */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-7: 56px;
  --s-8: 64px;

  /* 响应式间距（大屏按视口放大，仍是 8 的倍数思路） */
  --gap-sec: clamp(18px, 1.35vw, 26px);  /* 区块之间 */
  --gap-card: 16px;                      /* 卡片内部与卡片之间 */
  --gap-sec-head: 12px;                  /* 标题与内容之间 */

  /* —— 圆角层次 —— */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 20px;

  /* —— 阴影层次：越靠近主舞台越深 —— */
  --sh-1: 0 2px 8px rgba(0, 0, 0, .28);
  --sh-2: 0 12px 28px -16px rgba(0, 0, 0, .78);
  --sh-3: 0 26px 56px -28px rgba(0, 0, 0, .95);
  --sh-gold: 0 0 0 1px rgba(227, 185, 95, .22);

  /* —— 字体层级 —— */
  --fs-kicker: 11px;
  --fs-cap: 12px;
  --fs-body: 14px;
  --fs-lead: 15px;
  --fs-title: clamp(18px, 1.28vw, 24px);
  --lh-tight: 1.25;
  --lh-body: 1.65;

  /* —— 运动曲线 —— */
  --ease: cubic-bezier(.22, .82, .26, 1);

  /* —— 栅格基线 —— */
  --shell: 1440px;

  /* —— 记录表格列宽（像素固定，保证各断点列宽一致） —— */
  --cw-idx: 56px;
  --cw-no: 112px;
  --cw-name: 104px;
  --cw-zone: 112px;
  --cw-count: 88px;
  --cw-win: 104px;
  --cw-detail: 420px;
  --cw-time: 168px;
  --cw-act: 96px;
}

/* ==================================================================
 * 1. 全局对齐体系
 * -------------------------------------------------------------------
 * 所有区块共用同一条 1440 栅格基线：左右边缘严格对齐、卡片等宽等高、
 * 标题固定层级与高度，彻底消除 v4 的错位与参差。
 * ================================================================== */
.screen-wrap {
  max-width: calc(var(--shell) + 2 * clamp(16px, 2vw, 40px));
  padding: clamp(10px, 1.1vh, 18px) clamp(16px, 2vw, 40px) clamp(12px, 1.2vh, 20px);
  padding-bottom: clamp(12px, 1.2vh, 20px) !important;
}

.topbar {
  padding-bottom: var(--s-2);
  margin-bottom: var(--gap-sec);
  align-items: center;
}

/* 主体：单列 + 统一节奏（所有子区块间距一致） */
.layout-v5 {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sec);
}
.layout-v5 .sec { margin-bottom: 0; }
/* 所有区块统一回到 DOM 顺序（覆盖 v3 的 .sec-* order 排序） */
.layout-v5 .sec-stage,
.layout-v5 .sec-prizes,
.layout-v5 .sec-trio,
.layout-v5 .sec-pool,
.layout-v5 .sec-rules,
.layout-v5 .sec-feed { order: 0; }
.layout-v5 > .sec { width: 100%; min-width: 0; align-self: stretch; }

/* 区块标题：固定高度 + 固定下间距，保证任何区块的「标题→内容」节奏一致 */
.sec-head {
  margin-bottom: var(--gap-sec-head);
  min-height: 28px;
  align-items: center;
}
.sec-head h2 {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.2;
  margin: 0;
}

/* 卡片三段式基类：头部 / 内容 / 底部 高度与内边距统一 */
.trio-card,
.pc-card,
.rec-block {
  border-radius: var(--r-3);
}

/* 区块顺序复位：v3 曾把舞台 order:4 并 fixed 底部，v5 回到行内文档流
   （主舞台 → 奖品一览 → 奖池/规则/记录三卡） */
.layout-v5 .sec-stage { order: 0; }
.layout-v5 .sec-pool,
.layout-v5 .sec-rules,
.layout-v5 .sec-feed { order: 0; }

/* 复位 v3 的「常驻视口底部」主舞台：v5 需与其它卡片同一栅格基线 */
#stageSec {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
#stageSec::before { display: none !important; }
#stageSec .stage {
  display: block !important;
  height: auto !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  text-align: center;
}
#stageSec .stage-zone,
#stageSec .stage-title,
#stageSec .stage-desc,
#stageSec .stage-window,
#stageSec .btn-lucky,
#stageSec .stage-note {
  grid-row: auto;
  grid-column: auto;
  justify-self: auto;
  align-self: auto;
}
#stageSec .stage-lights { height: 148px; opacity: .62; }

/* ==================================================================
 * 2. 抽奖主舞台（stage-main 两栏：奖品窗口 + 操作区）
 * ================================================================== */
.stage {
  border-radius: var(--r-4);
  padding: var(--s-4) var(--s-5);
}

.stage-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(172px, 196px) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-5);
}

.stage-window {
  margin: 0;
  gap: var(--s-1);
}
.sw-img {
  width: 100%;
  border-radius: var(--r-2);
}
.sw-name {
  min-height: 1.5em;
  font-size: var(--fs-cap);
  letter-spacing: .06em;
  color: rgba(255, 238, 214, .62);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-1);
  min-width: 0;
}
.stage-zone { align-self: center; }
.stage-title {
  margin: var(--s-1) 0 0;
  line-height: var(--lh-tight);
}
.stage-desc {
  margin: 0 0 var(--s-2);
  line-height: var(--lh-body);
}
.btn-lucky { max-width: 392px; }
.stage-note {
  margin: var(--s-2) 0 0;
  line-height: 1.5;
}

/* ==================================================================
 * 3. 奖品一览
 * -------------------------------------------------------------------
 * 3.1 正方形产品图：严格 1:1（aspect-ratio），容器等比，绝不拉伸
 * 3.2 > 5 款：跑马灯无缝滚动（轨道由 JS 克隆一份，位移用 --mv-x 驱动）
 * 3.3 ≤ 5 款：静止居中铺满
 * ================================================================== */
.prize-stage {
  --pv-gap: var(--gap-card);
  --pv-cols: 5;
  position: relative;
  padding: 0 var(--s-4);
}

.prize-viewport {
  overflow: hidden;
  border-radius: var(--r-3);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

/* ---- 卡片 ---- */
.pc-card {
  border-radius: var(--r-3);
  box-shadow: inset 0 1px 0 rgba(255, 232, 180, .12), var(--sh-2);
}
.pc-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 232, 180, .18), var(--sh-3), 0 0 0 1px rgba(227, 185, 95, .18);
}

/* 正方形产品图：任何断点都保持 1:1，白底商品图 contain 不裁切 */
.pc-media {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  background: #FFFFFF;
}
.pc-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
}

/* 卡片正文严格三段：等级 / 型号SKU / 名称 / 底部数据 基线对齐 */
.pc-body {
  padding: 12px 12px 12px;
  gap: 6px;
}
.pc-tier {
  line-height: 1.1;
  min-height: 1.1em;
}
.pc-sku { line-height: 1.5; }
.pc-name {
  min-height: 2.7em;
  line-height: 1.42;
}
.pc-meta { padding-top: var(--s-1); }

/* ---- 卡面文字层级统一（覆盖 v3 遗留的视口字号规则） ---- */
.pc-card .pc-tier { font-size: clamp(18px, .95vw, 26px); letter-spacing: .04em; }
.pc-card .pc-sku  { font-size: clamp(10px, .58vw, 13px); }
.pc-card .pc-name { font-size: clamp(13px, .78vw, 17px); min-height: 2.6em; }
.pc-card .pc-meta { font-size: clamp(11px, .66vw, 14px); padding-top: 6px; }

/* ---- 跑马灯模式 ---- */
.prize-stage.is-marquee .prize-track {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap;
  gap: var(--pv-gap);
  /* v12：位移改由 WAAPI 无限循环动画驱动，不再在此声明 transform
     （作者级 !important 会压过动画，必须留空） */
  transition: none !important;
  will-change: transform;
}
.prize-stage.is-marquee .pc-card {
  flex: 0 0 auto;
  max-width: none;
  min-width: 0;
}
.prize-stage.is-marquee .pv-nav { display: flex; }
.prize-stage.is-marquee .pv-dots { display: none; }

/* ---- 静止铺满模式（≤5 款）：等宽居中，末行不留半格 ---- */
.prize-track { display: flex; flex-wrap: wrap; gap: var(--pv-gap); align-items: stretch; }
.prize-stage.is-static .prize-track {
  transform: none !important;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: var(--pv-gap);
}
.prize-stage.is-static .pc-card {
  flex: 0 0 auto;
  align-self: stretch;
  width: calc((100% - (var(--pv-cols) - 1) * var(--pv-gap)) / var(--pv-cols));
  max-width: calc((100% - (var(--pv-cols) - 1) * var(--pv-gap)) / var(--pv-cols));
}
.prize-stage.is-static .pv-nav,
.prize-stage.is-static .pv-dots { display: none; }
.prize-stage.is-static .prize-viewport {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---- 左右切换按钮：垂直对齐到产品图中心 ---- */
.pv-nav {
  top: 38%;
  width: 40px;
  height: 40px;
  font-size: 22px;
  color: var(--gold-300);
  background: rgba(18, 2, 5, .58);
  border: 1px solid rgba(227, 185, 95, .38);
  box-shadow: var(--sh-2);
  transition: background .2s var(--ease), color .2s, border-color .2s, transform .16s var(--ease);
}
.pv-nav:hover {
  background: rgba(227, 185, 95, .22);
  border-color: rgba(227, 185, 95, .7);
  box-shadow: var(--sh-3), var(--sh-gold);
}
.pv-nav:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
.pv-prev { left: 0; }
.pv-next { right: 0; }

/* ==================================================================
 * 4. 三卡一行：奖池剩余 / 抽奖规则 / 中奖记录
 * ================================================================== */
.sec-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card);
  align-items: stretch;
}

.trio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 176px;
  padding: var(--s-3);
  text-align: left;
  border-radius: var(--r-3);
  border: 1px solid rgba(227, 185, 95, .24);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(227, 185, 95, .10) 0%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(160deg, rgba(122, 16, 30, .52) 0%, rgba(46, 5, 11, .72) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 232, 180, .10), var(--sh-2);
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s, background .22s;
  overflow: hidden;
}

/* 三段结构对齐：头部 / 内容（撑满）/ 底部 */
.trio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1);
  min-height: 20px;
  margin-bottom: var(--s-2);
}
.trio-kicker {
  font-family: var(--font-num);
  font-size: var(--fs-kicker);
  letter-spacing: .22em;
  color: rgba(255, 232, 200, .42);
  text-transform: uppercase;
}
.trio-tag {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: .08em;
  color: var(--gold-200);
  background: rgba(227, 185, 95, .12);
  border: 1px solid rgba(227, 185, 95, .34);
}

.trio-body {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
}

.trio-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px dashed rgba(227, 185, 95, .18);
  font-size: var(--fs-cap);
  letter-spacing: .06em;
  color: rgba(255, 232, 200, .52);
  line-height: 1.5;
  white-space: nowrap;
}
.trio-foot b {
  font-family: var(--font-num);
  font-size: 1.18em;
  color: var(--gold-200);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* ---- 4-1 奖池剩余（数值展示） ---- */
.kpi-body {
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
}
.kpi-value {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  line-height: 1;
}
.kpi-value b {
  font-family: var(--font-num);
  font-size: clamp(34px, 2.9vw, 52px);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--gold-200);
  text-shadow: 0 0 26px rgba(227, 185, 95, .38), 0 3px 0 rgba(60, 8, 14, .55);
  font-variant-numeric: tabular-nums;
}
.kpi-unit {
  font-style: normal;
  font-size: var(--fs-body);
  letter-spacing: .12em;
  color: rgba(255, 232, 200, .55);
}
.kpi-meter {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.kpi-meter span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-300) 55%, var(--gold-200) 100%);
  box-shadow: 0 0 12px rgba(227, 185, 95, .55);
  transition: width .6s var(--ease);
}

/* ---- 4-2 / 4-3 引导卡片（抽奖规则 / 中奖记录） ---- */
.guide-card {
  cursor: pointer;
  appearance: none;
  font: inherit;
  color: inherit;
}
.guide-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(227, 185, 95, 0) 0%, rgba(227, 185, 95, .10) 50%, rgba(227, 185, 95, 0) 100%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.guide-card:hover {
  transform: translateY(-3px);
  border-color: rgba(227, 185, 95, .6);
  box-shadow: inset 0 1px 0 rgba(255, 232, 180, .16), var(--sh-3), 0 0 0 1px rgba(227, 185, 95, .2);
}
.guide-card:hover::after { opacity: 1; }
.guide-card:active { transform: translateY(-1px) scale(.998); }
.guide-card:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }

.guide-body {
  align-items: center;
  gap: var(--s-2);
}
.guide-ico {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  color: var(--gold-200);
  background: linear-gradient(180deg, rgba(227, 185, 95, .20) 0%, rgba(227, 185, 95, .06) 100%);
  border: 1px solid rgba(227, 185, 95, .36);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .22);
  transition: border-color .22s, background .22s, transform .22s var(--ease);
}
.guide-ico svg { width: 24px; height: 24px; }
.guide-card:hover .guide-ico {
  border-color: rgba(227, 185, 95, .72);
  background: linear-gradient(180deg, rgba(227, 185, 95, .30) 0%, rgba(227, 185, 95, .10) 100%);
  transform: scale(1.04);
}
.guide-txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.guide-txt em {
  font-style: normal;
  font-size: clamp(16px, 1.05vw, 19px);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  color: #FFEFE3;
}
.guide-txt i {
  font-style: normal;
  font-size: var(--fs-cap);
  letter-spacing: .03em;
  line-height: 1.55;
  color: rgba(255, 232, 200, .52);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.guide-foot .guide-arrow {
  font-size: 16px;
  line-height: 1;
  color: var(--gold-300);
  transition: transform .22s var(--ease);
}
.guide-card:hover .guide-arrow { transform: translateX(4px); }

/* ==================================================================
 * 5. 抽奖规则弹层
 * ================================================================== */
.rules-dialog {
  max-width: 760px;
  padding: var(--s-4) var(--s-4) var(--s-3);
}
.rules-sub {
  margin: 0 0 var(--s-3);
  text-align: center;
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: .04em;
  color: rgba(255, 232, 200, .58);
}
.rules-dialog .rule-list {
  grid-template-columns: 1fr;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-3);
  list-style: none;
  border-radius: var(--r-2);
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(227, 185, 95, .16);
}
.rules-dialog .rule-list li {
  align-items: flex-start;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px dashed rgba(227, 185, 95, .12);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: rgba(255, 240, 225, .82);
}
.rules-dialog .rule-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.rules-dialog .rule-list li::before {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-200);
  background: rgba(227, 185, 95, .14);
  border: 1px solid rgba(227, 185, 95, .34);
  padding-top: 0;
}
.rules-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  margin-top: var(--s-3);
  font-size: var(--fs-cap);
  letter-spacing: .06em;
  color: rgba(255, 232, 200, .42);
}
.rn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 10px rgba(227, 185, 95, .8);
}

/* ==================================================================
 * 6. 中奖记录弹层 · 标准表格
 * -------------------------------------------------------------------
 * 核心：表头 sticky 固定 · 列宽固定 · 单元格 white-space: nowrap
 *       数字右对齐（tabular-nums）· 文本左对齐
 *       超宽时在 .rec-table-wrap 内横向滚动，绝不换行撑破行高
 * ================================================================== */
.rec-dialog {
  max-width: 1200px;
  padding: var(--s-3) var(--s-3) var(--s-2);
}
.rec-dialog .ug-dialog-title { margin-bottom: var(--s-3); }

.rec-block {
  margin-bottom: var(--s-2);
}
.rec-block:last-of-type { margin-bottom: 0; }
.rec-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1);
  margin-bottom: var(--s-1);
  min-height: 22px;
}
.rb-title {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: .1em;
  color: #FFEFE3;
}
.rb-note {
  font-size: var(--fs-cap);
  letter-spacing: .04em;
  color: rgba(255, 232, 200, .4);
}

/* ---- 搜索工具条 ---- */
.feed-tools {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-bottom: var(--s-1);
}
.feed-search { flex: 1 1 auto; min-width: 0; }
.rec-summary {
  margin-bottom: var(--s-1);
}

/* ---- 表格容器：横向 + 纵向滚动 ---- */
.rec-table-wrap {
  position: relative;
  max-height: clamp(300px, 44vh, 460px);
  overflow: auto;
  border-radius: var(--r-2);
  border: 1px solid rgba(227, 185, 95, .22);
  background: rgba(0, 0, 0, .26);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(227, 185, 95, .38) transparent;
}
.rec-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.rec-table-wrap::-webkit-scrollbar-track { background: rgba(0, 0, 0, .24); }
.rec-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(227, 185, 95, .34);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.rec-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(227, 185, 95, .55); background-clip: padding-box; }

/* ---- 表格本体 ---- */
.rec-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 240, 225, .86);
}

.rec-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 42px;
  padding: 0 var(--s-2);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255, 236, 205, .72);
  white-space: nowrap;
  text-align: left;
  background: linear-gradient(180deg, #5A0C16 0%, #43070F 100%);
  border-bottom: 1px solid rgba(227, 185, 95, .34);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

.rec-table tbody td {
  height: 46px;
  padding: 0 var(--s-2);
  white-space: nowrap;
  vertical-align: middle;
  border-bottom: 1px solid rgba(227, 185, 95, .10);
}
.rec-table tbody tr:last-child td { border-bottom: 0; }
.rec-table tbody tr { transition: background .18s var(--ease); }
.rec-table tbody tr:hover td { background: rgba(227, 185, 95, .07); }
.rec-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .022); }
.rec-table tbody tr:nth-child(even):hover td { background: rgba(227, 185, 95, .07); }

/* 列宽固定（col 与 th 双保险） */
.rec-table .cw-idx { width: var(--cw-idx); }
.rec-table .cw-no { width: var(--cw-no); }
.rec-table .cw-name { width: var(--cw-name); }
.rec-table .cw-zone { width: var(--cw-zone); }
.rec-table .cw-count { width: var(--cw-count); }
.rec-table .cw-win { width: var(--cw-win); }
.rec-table .cw-detail { width: var(--cw-detail); }
.rec-table .cw-time { width: var(--cw-time); }
.rec-table .cw-act { width: var(--cw-act); }

/* 对齐规则：文本左对齐 · 数字右对齐 */
.ta-l { text-align: left !important; }
.ta-r { text-align: right !important; }
.ta-c { text-align: center !important; }

.rec-table .c-idx {
  font-family: var(--font-num);
  font-size: 12.5px;
  color: rgba(255, 232, 200, .42);
  font-variant-numeric: tabular-nums;
}
.rec-table .c-no {
  font-family: var(--font-num);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold-200);
}
.rec-table .c-name { color: rgba(255, 240, 225, .88); }
.rec-table .c-zone { color: rgba(255, 232, 200, .62); }
.rec-table .c-num {
  font-family: var(--font-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 244, 230, .92);
  letter-spacing: .02em;
}
.rec-table .c-win.is-zero { color: rgba(255, 232, 200, .34); font-weight: 600; }
.rec-table .c-time {
  font-family: var(--font-num);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: rgba(255, 232, 200, .58);
}

/* 中奖明细：内联徽章不换行，超长时由表格容器整体横向滚动 */
.rec-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.rb-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  color: #FFF1E2;
  background: rgba(227, 185, 95, .14);
  border: 1px solid rgba(227, 185, 95, .30);
}
.rb-badge b,
.rb-badge .rb-tier {
  font-family: var(--font-num);
  color: var(--gold-200);
  font-weight: 700;
  white-space: nowrap;
}
.rb-badge .rb-sku {
  font-style: normal;
  font-family: var(--font-num);
  font-size: 11.5px;
  color: rgba(255, 232, 200, .56);
  white-space: nowrap;
}
.rb-badge .rb-name {
  font-style: normal;
  color: rgba(255, 240, 226, .78);
  white-space: nowrap;
}
.rb-more {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  color: var(--gold-300);
  background: rgba(227, 185, 95, .10);
  border: 1px dashed rgba(227, 185, 95, .34);
}


/* 操作列：文字按钮 */
.rec-table .fd-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  margin: 0;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  color: rgba(255, 150, 130, .82);
  background: rgba(255, 120, 100, .08);
  border: 1px solid rgba(255, 150, 130, .26);
  opacity: 1;
  width: auto;
  transition: background .18s, border-color .18s, color .18s;
}
.rec-table .fd-del:hover {
  color: #FFD8CE;
  background: rgba(255, 120, 100, .18);
  border-color: rgba(255, 150, 130, .5);
}

/* 表格空状态 */
.rec-table .rec-empty-cell {
  height: 132px;
  text-align: center;
  color: rgba(255, 232, 200, .42);
  font-size: 13px;
  letter-spacing: .06em;
  white-space: normal;
}
.rec-table .rec-empty-cell .re-ico {
  display: block;
  margin: 0 auto var(--s-1);
  font-size: 22px;
  color: rgba(227, 185, 95, .5);
}

/* 查看更多 */
.feed-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  min-height: 32px;
}

html { overflow-x: hidden; }

/* ==================================================================
 * 6.9 一屏密度：主场景 1920×1080 无纵向滚动
 * ================================================================== */
#stageSec .stage { padding: 12px clamp(24px, 2.6vw, 40px); }
.stage-desc { margin-bottom: 12px; }
.stage-note { margin-top: 8px; }
.topbar { padding-bottom: 8px; }
.brand-txt h1 { font-size: clamp(19px, 1.5vw, 30px); }
.brand-txt p { margin-top: 3px; }
.trio-card { min-height: 190px; padding: var(--s-3); }
.trio-foot { padding-top: 12px; }
.pc-card .pc-name { min-height: 2.4em; }

/* ==================================================================
 * 7. 分辨率断点
 * ================================================================== */
/* 1440–2559 投屏主场景：整屏零滚动 */
@media (min-width: 1440px) {
  .stage { padding: var(--s-3) var(--s-5); }
  .stage-main { grid-template-columns: minmax(148px, 172px) minmax(0, 1fr); gap: var(--s-5); }
  .stage-title { font-size: clamp(24px, 1.9vw, 36px); }
  .btn-lucky { height: 62px; font-size: 19px; }
  .trio-card { min-height: 164px; }
}

/* 1024–1439：四款一屏，三卡仍同行 */
@media (min-width: 1024px) and (max-width: 1439px) {
  .prize-stage { padding: 0 var(--s-4); }
  .trio-card { min-height: 172px; padding: var(--s-3); }
  .guide-ico { width: 40px; height: 40px; }
  .guide-ico svg { width: 20px; height: 20px; }
  .rec-dialog { max-width: 96vw; }
}

/* 768–1023：三款一屏，三卡两行（奖池独占一行） */
@media (min-width: 768px) and (max-width: 1023px) {
  .sec-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .trio-card { min-height: 168px; padding: var(--s-2) var(--s-3); }
  .trio-head { font-size: 14px; }
  .kpi-value b { font-size: 34px; }
  .guide-ico { width: 34px; height: 34px; border-radius: 10px; }
  .guide-ico svg { width: 17px; height: 17px; }
  .guide-title { font-size: 15px; }
  .guide-desc { font-size: 12px; line-height: 1.5; }
  .trio-foot { font-size: 11.5px; }
  .stage-main { grid-template-columns: minmax(140px, 168px) minmax(0, 1fr); gap: var(--s-4); }
  .prize-stage { padding: 0 var(--s-4); }
  .pv-nav { width: 34px; height: 34px; font-size: 18px; }
}

/* ≤767 移动端：单列、两卡一屏、按钮 44px 可点区域 */
@media (max-width: 767px) {
  .layout-v5 { gap: var(--s-3); }
  .sec-trio { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: var(--s-2); }
  .sec-head { min-height: 28px; margin-bottom: var(--s-2); }
  .stage { padding: var(--s-3) var(--s-2) var(--s-3); }
  .stage-main {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .stage-window { max-width: 168px; margin: 0 auto; }
  .prize-stage { padding: 0; --pv-cols: 2; }
  .prize-viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .prize-stage.is-static .prize-track {
    flex-wrap: wrap;
    row-gap: var(--pv-gap);
  }
  .prize-stage.is-static .pc-card {
    width: calc((100% - var(--pv-gap)) / 2);
    max-width: calc((100% - var(--pv-gap)) / 2);
    min-height: 268px;
  }
  .pc-card .pc-name { min-height: 3.2em; }
  .m-bar {
    margin-left: calc(-1 * var(--pad-x, 16px));
    margin-right: calc(-1 * var(--pad-x, 16px));
    padding-left: var(--pad-x, 16px);
    padding-right: var(--pad-x, 16px);
  }
  .trio-card { min-height: 0; padding: var(--s-3); }
  .trio-body { min-height: 0; }
  .kpi-value b { font-size: 40px; }
  .guide-ico { width: 44px; height: 44px; }

  /* 弹层：移动端全屏化，表格仍保持横向滚动 */
  .rules-dialog,
  .rec-dialog {
    max-width: 100%;
    max-height: 92vh;
    padding: var(--s-3) var(--s-2) var(--s-2);
  }
  .rec-table-wrap { max-height: 52vh; }
  .rec-table { min-width: 1080px; }
  .rules-dialog .rule-list { padding: var(--s-2); }
  .rules-dialog .rule-list li { font-size: 13.5px; }
  .feed-tools { flex-wrap: wrap; }
}

/* ≥2560 4K 投屏：六款一屏，字号与留白等比放大 */
@media (min-width: 2560px) {
  :root { --shell: 2160px; }
  .pc-tier { font-size: clamp(20px, 1vw, 28px); }
  .trio-card { min-height: 200px; padding: var(--s-4); }
  .kpi-value b { font-size: 64px; }
  .rec-dialog { max-width: 1560px; }
}

/* 系统级降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
  /* v12：移动端同样由 WAAPI 驱动位移，此处不再写 transform */
  .guide-card:hover { transform: none; }
  .pc-card:hover { transform: none; }
}