/* ===================================================================
 * css/v6.css — v6 改造覆盖层（最后加载，优先级高于 style/index/v3/v5）
 * -------------------------------------------------------------------
 * 本轮（第 12 轮）5 项改动：
 *   1) 顶部标题区：删除左侧品牌图标，只留纯文字主标题并改文案
 *      「内购购满5件 · 获取一次幸运抽奖」，加大加粗 + 金色描金
 *   2) 右上角工具栏最右侧新增「全屏」按钮（图标 + 文字，状态随全屏切换）
 *   3) 底部三卡压扁：PC 端 100vh 一屏展示零纵向滚动，等比适配 1080p/2K/4K
 *   4) 三大版块（标题区 / 奖品一览 / 底部三卡）左右宽度严格一致，
 *      「奖池信息」卡片补充醒目大字标题
 *   5) 修复奖品卡 hover：去掉图片放大溢出，改克制上浮 + 阴影加深 + 描金加深，
 *      图片严格裁在卡片圆角内
 * =================================================================== */

/* ==================================================================
 * 1. 顶部标题区：纯文字主标题（无图标、无图片）
 * ================================================================== */
.topbar .brand-mark { display: none !important; }

.topbar .brand {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0;
}

.topbar .brand-txt { min-width: 0; }

.topbar .brand-txt h1 {
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.22;
  white-space: nowrap;
  overflow: visible;
  overflow-wrap: normal;
  /* 描金更醒目：金色渐变 + 双层投影拉出立体感 */
  filter:
    drop-shadow(0 1px 0 rgba(72, 6, 14, .85))
    drop-shadow(0 3px 0 rgba(60, 4, 10, .45))
    drop-shadow(0 14px 34px rgba(0, 0, 0, .55));
}

.topbar .brand-txt p {
  margin-top: .35em;
  font-family: var(--font-num);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 232, 200, .5);
}

/* ==================================================================
 * 2. 全屏按钮（右上角工具栏最右侧）
 * ================================================================== */
.fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  padding: 0 12px;
  flex: none;
  transition: color .2s var(--ease), border-color .2s, background .2s, box-shadow .2s, transform .2s var(--ease);
}
.fs-btn .fs-ico {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
}
.fs-btn .fs-ico-exit { display: none; }
.fs-btn .fs-txt {
  font-size: 12px;
  line-height: 1;
  letter-spacing: .1em;
  white-space: nowrap;
}
.fs-btn:hover {
  color: var(--gold-100);
  border-color: rgba(227, 185, 95, .62);
  box-shadow: 0 0 0 1px rgba(227, 185, 95, .2), 0 10px 24px -14px rgba(0, 0, 0, .9);
  transform: translateY(-1px);
}
.fs-btn.is-fs {
  color: var(--gold-100);
  border-color: rgba(239, 209, 136, .78);
  background: linear-gradient(180deg, rgba(227, 185, 95, .28) 0%, rgba(227, 185, 95, .10) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 220, .26), 0 0 22px -6px rgba(255, 205, 120, .7);
}
.fs-btn.is-fs .fs-ico-enter { display: none; }
.fs-btn.is-fs .fs-ico-exit { display: block; }
.fs-btn.is-unsupported { display: none !important; }

/* 全屏后主体仍严格居中，不产生错位 */
:fullscreen { background: var(--red-900); }
:-webkit-full-screen { background: var(--red-900); }
:fullscreen .screen-wrap,
:-webkit-full-screen .screen-wrap { margin: 0 auto; }

/* ==================================================================
 * 3. 奖品卡 hover 修复：图片不再放大，卡片克制上浮 + 阴影/描金加深
 * ================================================================== */
.pc-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;               /* 卡片圆角内裁切一切子元素 */
  transition: transform .26s var(--ease), border-color .26s, box-shadow .26s;
}
.pc-media {
  position: relative;
  overflow: hidden;               /* 图片严格被裁剪在媒体区圆角内 */
  border-radius: inherit;
}
.pc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none !important;     /* v6：禁止任何位移/缩放导致溢出 */
  transition: filter .3s var(--ease), box-shadow .3s;
}
.pc-card:hover,
.pc-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(239, 209, 136, .68);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .22),
    0 26px 52px -24px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(239, 209, 136, .34),
    0 0 24px -10px rgba(255, 205, 120, .5);
}
.pc-card:hover .pc-media img { filter: brightness(1.03); }

/* 上浮需要「容身空间」：给视口留出上下内边距，避免被 overflow 裁掉/压住边框 */
.prize-viewport { padding: .6vh 0 .9vh; }

/* ==================================================================
 * 4. 奖池卡大字标题
 * ================================================================== */
.kpi-title {
  margin: 0 0 .5em;
  font-weight: 900;
  font-size: clamp(17px, 1.4vw, 26px);
  letter-spacing: .16em;
  line-height: 1.15;
  filter: drop-shadow(0 2px 0 rgba(70, 6, 14, .6));
}
.kpi-card .kpi-value b { line-height: 1; }

/* ==================================================================
 * 5. PC 端（≥1024）一屏布局：全部尺寸以 vh 等比标定
 *    · 外壳宽度 = min(94vw, 156vh)：由视口高度决定比例，
 *      1920×1080 / 2560×1440 / 3840×2160 得到完全一致的版面比例
 *    · 三版块共用同一外壳宽度与左右内边距 → 左右边界坐标严格重合
 * ================================================================== */
@media (min-width: 1024px) {

  :root {
    --gap-sec: 2vh;
    --gap-card: 1.6vh;
    --gap-sec-head: 1.1vh;
    --fs-title: 2.1vh;
    --fs-kicker: 1.05vh;
    --fs-cap: 1.18vh;
    --fs-body: 1.35vh;
    --fs-lead: 1.42vh;
  }

  html, body { height: 100%; }

  .screen-wrap {
    width: min(94vw, 156vh);
    max-width: none;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1.6vh 2.2vh 1.4vh !important;
    overflow: visible;
  }

  /* 顶部栏：底部金线更贴近内容，压缩纵向占用 */
  .topbar {
    flex: none;
    padding-bottom: 1vh;
    margin-bottom: 0;
    gap: 1.4vh;
  }
  .topbar .brand-txt h1 { font-size: 3.05vh; }
  .topbar .brand-txt p { font-size: 1.15vh; margin-top: .5vh; }
  .top-right { gap: 1.05vh; }
  .top-right .icon-btn { width: 4.3vh; height: 4.3vh; font-size: 1.9vh; border-radius: 1.2vh; }
  .fs-btn {
    height: 4.3vh;
    padding: 0 1.5vh;
    gap: .75vh;
    border-radius: 1.2vh;
  }
  .fs-btn .fs-ico { width: 1.85vh; height: 1.85vh; }
  .fs-btn .fs-txt { font-size: 1.3vh; }
  .top-clock { height: 4.3vh; padding: 0 1.4vh; }
  .top-clock time { font-size: 1.3vh; }
  .pool-chip { height: 4.3vh; padding: 0 1.4vh; font-size: 1.35vh; }
  .zone-pick { height: 4.3vh; padding: 0 1.4vh; font-size: 1.35vh; border-radius: 1.1vh; }
  .zone-pick .zp-label { font-size: 1.15vh; }

  /* 主体：撑满剩余高度，余量按 gap 均分 → 满屏无多余留白 */
  .layout-v5 {
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--gap-sec);
    justify-content: space-between;
  }
  .layout-v5 > .sec { flex: 0 0 auto; }

  /* ---------- 5.1 主舞台 ---------- */
  #stageSec .stage {
    padding: 1.3vh 2.6vh;
    border-radius: 1.8vh;
  }
  #stageSec .stage-lights { height: 12vh; }
  #stageSec .stage-main {
    grid-template-columns: minmax(0, 19vh) minmax(0, 1fr);
    gap: 2.6vh;
  }
  #stageSec .stage-window {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 11vh;
    border-radius: 1.2vh;
  }
  #stageSec .stage-window .sw-name { font-size: 1.15vh; padding: .6vh 1vh; }
  #stageSec .stage-zone {
    font-size: 1.1vh;
    padding: .35em 1.2em;
    margin: 0 0 .4vh;
    letter-spacing: .14em;
  }
  #stageSec .stage-title {
    font-size: 2.75vh;
    line-height: 1.16;
    margin: 0 0 .35vh;
    letter-spacing: .1em;
  }
  #stageSec .stage-desc {
    font-size: 1.25vh;
    margin: 0 0 .8vh;
    letter-spacing: .14em;
  }
  #stageSec .btn-lucky {
    height: 4.8vh;
    min-width: min(24vh, 100%);
    padding: 0 3vh;
    font-size: 1.95vh;
    letter-spacing: .2em;
  }
  #stageSec .stage-note { margin: .7vh 0 0; font-size: 1.02vh; }

  /* ---------- 5.2 奖品一览 ---------- */
  .sec-head { min-height: 2.6vh; margin-bottom: var(--gap-sec-head); }
  .sec-head h2 { font-size: 2.1vh; letter-spacing: .18em; }

  .prize-stage { padding: 0 2vh; }
  .pc-card { border-radius: 1.2vh; }
  .pc-body {
    padding: .85vh .95vh .8vh;
    gap: .42vh;
  }
  .pc-card .pc-tier { font-size: 2vh; line-height: 1.08; letter-spacing: .03em; }
  .pc-card .pc-sku { font-size: 1.02vh; line-height: 1.35; }
  .pc-card .pc-name { font-size: 1.22vh; line-height: 1.34; min-height: 2.68em; }
  .pc-card .pc-meta { font-size: 1.08vh; padding-top: .55vh; margin-top: .1vh; }
  .pc-sold { font-size: 1.25vh; }

  /* ---------- 5.3 底部三卡：压扁（去掉冗余内边距与空白） ---------- */
  .sec-trio .trio-grid { gap: var(--gap-card); }
  .trio-card {
    min-height: 0;
    padding: 1.3vh 1.7vh;
    border-radius: 1.2vh;
  }
  .trio-head { min-height: 1.9vh; margin-bottom: .7vh; }
  .trio-kicker { font-size: 1.05vh; }
  .trio-tag { font-size: 1.05vh; line-height: 1.7vh; padding: 0 .7vh; }
  .trio-foot {
    margin-top: .7vh;
    padding-top: .7vh;
    font-size: 1.15vh;
    line-height: 1.5;
  }

  .kpi-card .kpi-title {
    font-size: 2.2vh;
    letter-spacing: .18em;
    margin: 0 0 .45vh;
  }
  .kpi-body { gap: .55vh; }
  .kpi-value { gap: .7vh; }
  .kpi-value b { font-size: 4.15vh; }
  .kpi-unit { font-size: 1.3vh; letter-spacing: .1em; }
  .kpi-meter { height: .65vh; }

  .guide-body { gap: 1.4vh; }
  .guide-ico { width: 4.4vh; height: 4.4vh; border-radius: 1vh; }
  .guide-ico svg { width: 2.2vh; height: 2.2vh; }
  .guide-txt { gap: .35vh; }
  .guide-txt em { font-size: 1.95vh; letter-spacing: .12em; line-height: 1.3; }
  .guide-txt i { font-size: 1.15vh; line-height: 1.5; }
  .guide-foot .guide-arrow { font-size: 1.7vh; }

  /* ---------- 5.4 弹层在大屏（2K/4K）同步放大，避免"小窗大字"错位 ---------- */
  .rules-dialog { max-width: min(94vw, 80vh); }
  .rec-dialog { max-width: min(94vw, 150vh); }
}

/* 4K 及以上：外壳已由 vh 决定宽度，这里只兜住极大的 3840×2160 不贴边 */
@media (min-width: 2560px) {
  :root { --shell: 1440px; }
  .screen-wrap { width: min(94vw, 156vh); }
}