/* ==================================================================
   v13.css — 第四次调整（基于 v12，仅改四项，其余继承 v1~v12）
   ------------------------------------------------------------------
   1) body 背景：年会红金大屏背景图 + overlay 渐变，全屏铺满无断层
   2) 移动端「开始抽奖」按钮文字水平垂直居中（含 320 宽/多行兜底）
   3) 中奖结果弹层（#modalResult）表单文本左对齐
   4) 中奖记录查询弹层（#modalRecords）全部表格左对齐
      （「中奖明细」按奖项正序排序由 js/index.js 的 tierRank() 负责）

   本文件必须在 v12.css 之后引入（index.html 中为最后一个 <link>）。
   全部选择器带 #id / 元素+类提升特异性，覆盖前序版本无需改动任何旧文件。
   ================================================================== */

/* ==================================================================
   1｜body 背景 —— 年会红金大屏（100vw × 100vh 全屏铺满，无断层/接缝）
   ------------------------------------------------------------------
   方案：程序化生成一张 3840×2160 的红金年会舞台底图（本地资源，
         assets/img/bg-annual-4k.jpg；移动端用 1280×720 轻量版
         bg-annual-m.jpg），以 body 的 background-image 铺底；
         overlay 渐变作为 background-image 的**前若干层**叠加在图片之上
         （CSS 背景层按书写顺序"先写者在上"），等效于独立 overlay 层，
         不引入任何额外 DOM，因此没有 z-index 争用风险。

   铺满策略（逐条对应验收要求）：
     background-size: cover            → 等比放大至完全覆盖，永不露底
     background-position: center       → 四边等比裁切，画面重心居中
     background-repeat: no-repeat      → 杜绝平铺重复接缝
     min-height: 100vh → 100dvh        → 移动端地址栏收缩时仍按动态视口铺满
     background-color: 深红兜底        → 图片解码前的瞬间也不闪白
   ================================================================== */
html {
  background-color: #3D060D;
}

body {
  --v13-bg-img: url("../assets/img/bg-annual-4k.jpg");

  background-color: #3D060D;
  background-image:
    /* ① overlay 渐变（最上层）：上/下压暗，保证顶部标题与底部信息条对比度 */
    linear-gradient(180deg,
      rgba(26, 3, 7, .58) 0%,
      rgba(52, 6, 12, .12) 22%,
      rgba(58, 7, 14, .10) 52%,
      rgba(45, 5, 10, .34) 78%,
      rgba(20, 2, 5, .66) 100%),
    /* ② overlay 顶部金色暖光（提升年会氛围，同时提高标题区亮度层次） */
    radial-gradient(120% 68% at 50% -6%, rgba(255, 198, 122, .20) 0%, rgba(255, 198, 122, 0) 62%),
    /* ③ overlay 底部金色地脚的柔化（避免背景自带灯带过于抢眼） */
    radial-gradient(115% 58% at 50% 104%, rgba(255, 176, 96, .16) 0%, rgba(255, 176, 96, 0) 66%),
    /* ④ 年会红金背景图（最下层） */
    var(--v13-bg-img);

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center center, center top, center bottom, center center;
  background-size: cover, cover, cover, cover;
  background-attachment: scroll;
  background-origin: padding-box;
  background-clip: border-box;

  /* 动态视口高度：优先 dvh/svh，老浏览器回退 100vh */
  min-height: 100vh;
  min-height: 100dvh;
}

/* 移动端换用轻量底图（1280×720），减少解码与显存占用。
   竖屏 cover 只截取底图中央约 26% 的宽度，中央区域是画面最亮的灯芯，
   实测背景平均亮度由 77 升到 115，因此追加一层 34% 的中性压暗 overlay，
   把移动端背景亮度拉回与桌面端一致（≈76），保证前景文字可读性。 */
@media (max-width: 767px) {
  body {
    --v13-bg-img: url("../assets/img/bg-annual-m.jpg");
    /* svh 已在支持的浏览器生效，避免地址栏收起时露底 */
    min-height: 100svh;

    background-image:
      /* ⓪ 移动端专属压暗层（等比覆盖整视口，不产生任何色块边界） */
      linear-gradient(rgba(22, 3, 6, .34), rgba(22, 3, 6, .34)),
      /* ① overlay 渐变（与桌面端一致） */
      linear-gradient(180deg,
        rgba(26, 3, 7, .58) 0%,
        rgba(52, 6, 12, .12) 22%,
        rgba(58, 7, 14, .10) 52%,
        rgba(45, 5, 10, .34) 78%,
        rgba(20, 2, 5, .66) 100%),
      radial-gradient(120% 68% at 50% -6%, rgba(255, 198, 122, .20) 0%, rgba(255, 198, 122, 0) 62%),
      radial-gradient(115% 58% at 50% 104%, rgba(255, 176, 96, .16) 0%, rgba(255, 176, 96, 0) 66%),
      var(--v13-bg-img);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: center center, center center, center top, center bottom, center center;
    background-size: cover, cover, cover, cover, cover;
  }
}

/* 兼容兜底：v12 及以前的 .bg-photo（旧主视觉图）已在 index.html 中移除，
   此处再兜一层，防止缓存残留的旧 DOM 覆盖新背景 */
.bg-photo {
  display: none !important;
}

/* ==================================================================
   2｜移动端「开始抽奖」按钮：文字水平 + 垂直双居中
   ------------------------------------------------------------------
   问题根因：v12.css 在 ≤767px 给按钮追加了
       #stageSec .btn-lucky { display: inline-flex !important; }
   但按钮本身是**定高**（44px）+ padding:0 16px，inline-flex 的
   匿名文本项在默认 align-items:stretch 下会撑满行盒、基线贴顶，
   表现为文字贴顶而非居中。
   修复：显式 align-items/justify-content:center（flex 方案），
        并把 line-height 收敛到 1.12，多行时行距均衡不裁切。
   ================================================================== */
@media (max-width: 767px) {
  #stageSec .btn-lucky,
  #secStage .btn-lucky,
  .btn-lucky {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    flex-wrap: wrap;
    text-align: center !important;
    line-height: 1.12 !important;
    text-indent: 0 !important;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    /* 文字超出时不被裁切 */
    min-height: 44px;
    height: auto !important;
    max-height: none !important;
  }
  /* 按钮内部伪元素（扫光）不参与 flex 排版占位 */
  #stageSec .btn-lucky::after,
  #secStage .btn-lucky::after { position: absolute; }
}

/* 320px 窄屏兜底：收紧字距与内边距，保证 4 字单行不出界 */
@media (max-width: 359px) {
  #stageSec .btn-lucky,
  #secStage .btn-lucky,
  .btn-lucky {
    padding-left: 10px !important;
    padding-right: 10px !important;
    letter-spacing: .04em !important;
    font-size: 13.5px !important;
  }
}

/* ==================================================================
   3｜中奖结果弹层（#modalResult）：表头与单元格统一左对齐
   ------------------------------------------------------------------
   .result-dialog 基础样式为 text-align:center（标题/按钮需要居中），
   仅对表格内文本覆盖为 left，不改动弹层标题、副标题、按钮的居中。
   ================================================================== */
#modalResult .sum-table thead th,
#modalResult .sum-table tbody td,
#modalResult .sum-table tfoot td,
#modalResult #sumTable th,
#modalResult #sumTable td {
  text-align: left !important;
}

/* 数量列原本右键对齐（.ta-r），按要求一并左对齐 */
#modalResult .sum-table .ta-r,
#modalResult .sum-table th.ta-r,
#modalResult .sum-table td.ta-r {
  text-align: left !important;
}

/* 奖项徽标在左对齐单元格内保持自然起点，去掉居中残留的外边距 */
#modalResult .sum-table .tier-cell,
#modalResult .sum-table .sku-cell { display: block; }

/* 合计行（tfoot）同样左对齐，注脚文案跟随 */
#modalResult .sum-table tfoot .tf-note { text-align: left; }

/* ==================================================================
   4｜中奖记录查询弹层（#modalRecords）：全部表格左对齐
   ------------------------------------------------------------------
   覆盖范围：汇总表、明细表（#recTable）、按工号查询结果表等，
   凡落在 #modalRecords 内的 <table> 一律 th/td 左对齐；
   原有 .ta-c（#、操作）、.ta-r（次数、中奖件数）虽带 !important，
   但本选择器含 #id，特异性更高，可稳定覆盖。
   ================================================================== */
#modalRecords table thead th,
#modalRecords table tbody td,
#modalRecords table tfoot td,
#modalRecords table th.ta-c,
#modalRecords table th.ta-r,
#modalRecords table td.ta-c,
#modalRecords table td.ta-r {
  text-align: left !important;
}

/* 单元格内多行元素（中奖明细胶囊串）随之左起排布 */
#modalRecords table .c-detail,
#modalRecords table td.c-detail,
#modalRecords table .c-detail .cd-scroll {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* 「中奖明细」列内部条目保持从左到右的阅读顺序与可横滚 */
#modalRecords table .cd-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}