/* ===================================================================
 * css/v7.css — v7 改造覆盖层（最后加载，优先级最高）
 * -------------------------------------------------------------------
 * 本轮（第 13 轮）4 项改动：
 *   1) 主标题文案改为「内购满 5 件 · 幸运抽奖一次」，标题区零图片
 *      （.brand 内无 img/无背景图，纯文字 + 描金）
 *   2) TOP 新增实时数据统计条：已抽奖人数 / 已中产品总数 /
 *      一至五等奖各自已抽出数量（同宽对齐、不换行、抽奖后即时刷新）
 *   3) 中奖记录弹层：各奖项中奖率改为横向卡片（等宽等高、严格对齐）；
 *      弹层关闭按钮宽度严格 200px 并居中
 *   4) 修复「全屏」按钮文字溢出（水平内边距 + min-width + nowrap +
 *      图标文字垂直居中 + 与相邻按钮等高，hover/全屏态同样不溢出）
 * =================================================================== */

/* ==================================================================
 * 1. 主标题区：纯文字（零图片、零图标、零背景图）
 * ================================================================== */
.topbar .brand-txt h1 {
  /* 文案已改短，字距略收，保证 4K 下仍是一行完整显示 */
  letter-spacing: .035em;
  white-space: nowrap;
  overflow: visible;
}
/* 兜底：标题区内任何图片一律不参与渲染（需求：标题区无图片） */
.topbar .brand img,
.topbar .brand .brand-mark,
.topbar .brand-txt picture,
.topbar .brand-txt svg {
  display: none !important;
}
.topbar .brand,
.topbar .brand-txt,
.topbar .brand-txt h1 { background-image: none !important; }
.topbar .brand-mark { display: none !important; }

/* ==================================================================
 * 2. TOP 实时数据统计条
 *    位置：主标题下方、正文版块上方；左右边界与主标题 / 右上工具栏对齐
 * ================================================================== */
.top-stats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(227, 185, 95, .26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 100%),
    radial-gradient(120% 160% at 50% -40%, rgba(239, 209, 136, .16) 0%, transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .16),
    0 16px 38px -26px rgba(0, 0, 0, .95);
  flex: none;
}

.ts-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 0 8px;
  position: relative;
}
/* 单元格之间的金色细分隔线（首列不加） */
.ts-cell + .ts-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(227, 185, 95, .34), transparent);
}

.ts-k {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .06em;
  color: rgba(255, 232, 200, .62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ts-num {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-num);
  line-height: 1;
  white-space: nowrap;
}
.ts-num b {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold-200);
  text-shadow: 0 1px 0 rgba(70, 6, 14, .8), 0 0 16px rgba(255, 205, 120, .28);
}
.ts-num i {
  font-style: normal;
  font-size: 11px;
  color: rgba(255, 232, 200, .52);
}

/* 前两项为汇总口径，视觉权重更高 */
.ts-total .ts-num b {
  font-size: 26px;
  color: #FFF4D9;
  text-shadow: 0 1px 0 rgba(70, 6, 14, .85), 0 0 20px rgba(255, 205, 120, .42);
}
.ts-total .ts-k { color: rgba(255, 232, 200, .8); }

/* 一等奖最高亮，逐级递减（呼应奖品卡分级配色） */
.ts-tier[data-tier-idx="0"] .ts-num b { color: #FFE9A8; }
.ts-tier[data-tier-idx="1"] .ts-num b { color: #F7E1C0; }
.ts-tier[data-tier-idx="2"] .ts-num b { color: #F0D4C8; }
.ts-tier[data-tier-idx="3"] .ts-num b { color: #EAD9D2; }
.ts-tier[data-tier-idx="4"] .ts-num b { color: #E4DAD6; }
.ts-tier .ts-num b { font-size: 20px; }

/* 数字更新时轻微脉冲（抽奖后即时可见） */
.ts-num b.is-bump { animation: tsBump .5s var(--ease-out, ease-out); }
@keyframes tsBump {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-2px) scale(1.16); }
  100% { transform: translateY(0) scale(1); }
}

/* ==================================================================
 * 3. 全屏按钮：修复文字溢出
 *    根因：.top-right .icon-btn 的固定 width(4.3vh/38~50px) 命中 .fs-btn，
 *          而按钮内容（图标 16px + 间距 + 两字文案 + 左右内边距）更宽，
 *          文字被挤出按钮边界。
 *    修法：提高选择器权重，宽度改为 auto + 合适 min-width，
 *          水平内边距 + nowrap + 图标文字垂直居中 + overflow 裁切兜底。
 * ================================================================== */
.top-right .fs-btn,
.fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 78px;
  padding: 0 12px;
  height: 38px;
  flex: none;
  box-sizing: border-box;
  overflow: hidden;           /* 任何情况下文字都不越出按钮 */
  white-space: nowrap;
  line-height: 1;
  transform: none;            /* 覆盖 .icon-btn:hover 的旋转，避免文字倾斜 */
}
.top-right .fs-btn:hover,
.fs-btn:hover {
  transform: translateY(-1px);
}
.fs-btn .fs-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  align-self: center;
}
.fs-btn .fs-txt {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
  /* 竖向居中的兜底：用 flex + line-height:1 已足够，这里再加行盒高度锁定 */
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-btn:focus-visible {
  outline: 2px solid rgba(239, 209, 136, .7);
  outline-offset: 2px;
}

/* ==================================================================
 * 4. 中奖记录弹层：中奖率横向卡片
 * ================================================================== */
.rec-rate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 1fr;        /* 多行时行高一致 → 卡片等高 */
  gap: 10px;
  align-items: stretch;
}

.rc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-width: 0;
  padding: 10px 12px 11px;
  border-radius: 12px;
  border: 1px solid rgba(227, 185, 95, .26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .022) 100%),
    radial-gradient(120% 140% at 50% -30%, rgba(239, 209, 136, .14) 0%, transparent 60%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .16),
    0 12px 26px -22px rgba(0, 0, 0, .95);
  transition: border-color .22s, box-shadow .22s, transform .22s var(--ease-out, ease-out);
}
.rc-card:hover {
  border-color: rgba(239, 209, 136, .6);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .22),
    0 18px 34px -22px rgba(0, 0, 0, 1),
    0 0 20px -10px rgba(255, 205, 120, .55);
}

.rc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.rc-tier {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--gold-200);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-stock {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: rgba(255, 232, 200, .55);
  white-space: nowrap;
}
.rc-stock b {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 244, 217, .9);
}

.rc-name {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 239, 227, .78);
  /* 固定两行高度 → 卡片内部严格对齐，不因奖品名长短而错位 */
  height: 2.7em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rc-rate {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-num);
  line-height: 1;
  white-space: nowrap;
}
.rc-rate b {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #FFF4D9;
  text-shadow: 0 1px 0 rgba(70, 6, 14, .85), 0 0 18px rgba(255, 205, 120, .3);
}
.rc-rate i {
  font-style: normal;
  font-size: 13px;
  color: var(--gold-300);
}
.rc-rate em {
  font-style: normal;
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(255, 232, 200, .45);
}

/* 售罄（剩余 0）：降饱和 + 描边转灰金，仍保持等宽等高不错位 */
.rc-card.is-out {
  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .014) 100%);
}
.rc-card.is-out .rc-rate b,
.rc-card.is-out .rc-tier { color: rgba(255, 232, 200, .42); text-shadow: none; }
.rc-card.is-out .rc-stock b { color: rgba(255, 232, 200, .5); }

.rr-empty {
  grid-column: 1 / -1;
  font-size: 12px;
  color: rgba(255, 232, 200, .45);
}

/* ---- 弹层关闭按钮：宽度严格 200px，水平居中 ---- */
.ug-dialog-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.rec-dialog .ug-dialog-foot .rec-close-btn,
.rec-close-btn {
  flex: 0 0 auto !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
  box-sizing: border-box;
}

/* ==================================================================
 * 5. PC（≥1024）一屏：统计条用 vh 令牌，与 v6 的 100vh 布局共存
 *    —— 统计条横向 7 等分，纵向高度压缩，避免挤压主舞台
 * ================================================================== */
@media (min-width: 1024px) {
  .top-stats {
    height: 6.2vh;
    min-height: 54px;
    margin: 0 0 1.1vh;
    padding: 0 1.4vh;
    border-radius: 1.2vh;
  }
  .ts-cell { gap: .28vh; padding: 0 .8vh; }
  .ts-k { font-size: 1.15vh; letter-spacing: .08em; }
  .ts-num { gap: .3vh; }
  .ts-num b,
  .ts-tier .ts-num b { font-size: 2.1vh; }
  .ts-total .ts-num b { font-size: 2.6vh; }
  .ts-num i { font-size: 1.05vh; }

  /* 全屏按钮：与相邻 .icon-btn 等高（4.3vh），宽度由内容决定 */
  .top-right .fs-btn,
  .fs-btn {
    height: 4.3vh;
    min-width: 8.2vh;
    min-width: max(72px, 8.2vh);
    padding: 0 1.5vh;
    gap: .7vh;
    border-radius: 1.2vh;
  }
  .fs-btn .fs-ico { width: 1.85vh; height: 1.85vh; }
  .fs-btn .fs-txt { font-size: 1.3vh; letter-spacing: .1em; }

  /* 弹层内中奖率卡片：大屏按 vh 放大，横向一行 5 张（10 个奖项则两行） */
  .rec-rate {
    grid-template-columns: repeat(auto-fit, minmax(13vh, 1fr));
    grid-auto-rows: 1fr;
    gap: 1.1vh;
  }
  .rc-card { padding: 1.1vh 1.3vh 1.2vh; border-radius: 1.2vh; gap: .6vh; }
  .rc-head { gap: .6vh; }
  .rc-tier { font-size: 1.55vh; }
  .rc-stock { font-size: 1.15vh; }
  .rc-stock b { font-size: 1.3vh; }
  .rc-name { font-size: 1.25vh; height: 2.7em; }
  .rc-rate b { font-size: 2.6vh; }
  .rc-rate i { font-size: 1.4vh; }
  .rc-rate em { font-size: 1.05vh; }
}

/* ==================================================================
 * 5.5 PC 纵向预算回收：新增统计条后仍保证 100vh 单屏不裁切
 *     统计条约占 6vh，必须从「版块间距 + 各版块内边距 + 行距」等量回收，
 *     避免底部三卡被视口裁掉。全部使用 vh 令牌，1K/2K/4K 同比缩放。
 * ================================================================== */
@media (min-width: 1024px) {
  /* 版块间距：space-between 会把余量补回，此值仅作下限 */
  .layout-v5 { gap: 1.2vh; }

  /* ---- 主舞台：压缩内外边距与行距 ---- */
  #stageSec .stage { padding: .9vh 2.6vh; }
  #stageSec .stage-main .stage-side { gap: .45vh; }
  #stageSec .stage-title { font-size: 2.45vh; margin-bottom: .3vh; }
  #stageSec .stage-desc { margin-bottom: .45vh; }
  #stageSec .btn-lucky { height: 4.3vh; font-size: 1.85vh; }
  #stageSec .stage-note { margin-top: .45vh; }

  /* ---- 奖品一览：压缩标题行、卡片文字区内边距与行距 ---- */
  .sec-head { min-height: 2.1vh; margin-bottom: .7vh; }
  .pc-body { padding: .62vh .95vh .58vh; gap: .3vh; }
  .pc-card .pc-tier { font-size: 1.85vh; }
  .pc-card .pc-name { min-height: 2.6em; }

  /* ---- 底部三卡：压缩卡片内边距与行距 ---- */
  .trio-card { padding: 1vh 1.2vh !important; }
  .trio-card .trio-head { margin-bottom: .5vh; }
  .trio-card .kpi-title { margin-bottom: .4vh; }
  .trio-card .trio-foot { margin-top: .5vh; }
}

/* ==================================================================
 * 6. 平板 / 手机：统计条换行铺满，不横向溢出
 * ================================================================== */
@media (max-width: 1023px) {
  .top-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    row-gap: 10px;
    column-gap: 0;
    padding: 12px 6px;
  }
  /* 4 列布局下：前两项各占 2 列（一行两项），一至五等奖各占 1 列 */
  .ts-total { grid-column: span 2; }
  .ts-cell:nth-child(2)::before { display: none; }
  .ts-cell:nth-child(3)::before { display: none; }
}

@media (max-width: 767px) {
  /* 10 等分栅格：两个汇总项各占 5 列（第一行），五个奖项各占 2 列（第二行）
     —— 手机端仅 2 行，不挤占首屏 */
  .top-stats {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    padding: 8px 2px;
    row-gap: 6px;
    margin-bottom: 10px;
  }
  .ts-total { grid-column: span 5; }
  .ts-tier { grid-column: span 2; gap: 1px; }
  .ts-cell { padding: 0 2px; }
  .ts-k { font-size: 9px; letter-spacing: .01em; }
  .ts-num b { font-size: 17px; }
  .ts-total .ts-num b { font-size: 21px; }
  .ts-num i { font-size: 9px; }
  /* 每行首列不显示左侧分隔线 */
  .ts-total:nth-child(1)::before,
  .ts-tier[data-tier-idx="0"]::before { display: none; }

  .rec-rate { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rc-rate b { font-size: 20px; }
  .rec-dialog .ug-dialog-foot .rec-close-btn,
  .rec-close-btn { width: 200px !important; min-width: 200px !important; max-width: 200px !important; }

  /* 移动端全屏按钮常藏，避免占位拥挤 */
  .fs-btn { min-width: 72px; }
}