/* ==================== 赛博双节活动页 · 抽奖区内部 ====================
   坐标系：左面板（.lottery-section）外框 779x512，带 7px 描边，
   absolute 子元素的原点是 padding box（= 外框内缩 7px），
   故下列数值 = 设计稿坐标 - 面板外框坐标(360,1647) - 7。

   raffle.js 依赖的类/ID：
     .lottery-item           奖品格（querySelectorAll 取全部，按 DOM 顺序跑灯）
     .lottery-item.active    跑灯经过 / 初始默认选中
     .lottery-item.winner    跑灯结束后的中奖格
     #start-btn              抽奖按钮
   维护：注释维护：2026-09-21 新建（赛博版）
   ==================================================================== */

/* ---------- 六宫格 ----------
   设计稿：格 230x156，列 x=394/634/874（间距 240），行 y=1695/1861（间距 166）
   换算到 padding box：左上 (27,41)，gap 10 */
.lottery-grid {
  position: absolute;
  left: 27px;
  /* 394 - 360 - 7 */
  top: 41px;
  /* 1695 - 1647 - 7 */
  display: grid;
  grid-template-columns: repeat(3, 230px);
  grid-template-rows: repeat(2, 156px);
  gap: 10px;
  user-select: none;
}

/* 奖品格：米白底 + 21px 圆角，与面板同色系 */
.lottery-item {
  position: relative;
  width: 230px;
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--panel-bg, #fdf8e8);
  border-radius: 21px;
  overflow: hidden;
  cursor: default;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.prize-content {
  text-align: center;
  width: 230px;
  height: 156px;
  background: #FDF8E8;
  border-radius: 21px 21px 21px 21px;
}

/* 图标区：设计稿图标高约 94px，图标顶部距格顶 23px；宽度随奖品图自适应 */
.prize-icon {
  height: 94px;
  margin-top: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prize-icon img {
  max-width: 174px;
  max-height: 94px;
}

/* 奖品名：设计稿 16px Medium，深棕 */
.prize-name {
  display: block;
  margin-top: 8px;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--title-color, #4b0e00);
  line-height: 15px;
}

/* ---------- 抽奖按钮 ----------
   设计稿按钮 245x79 @627,2039 → padding box (260,385)
   底图 raffle-btn.png 为纯底图不含文字，文字由 HTML 叠加 */
.chou-jiang-kong {
  position: absolute;
  left: 260px;
  /* 627 - 360 - 7 */
  top: 385px;
  /* 2039 - 1647 - 7 */
  width: 245px;
  height: 79px;
  cursor: pointer;
  /* 呼吸动画挂在容器上而不是底图 .start-button 上：
     挂在底图上时只有底图会缩放、叠在其上的文字不动，视觉上文字会「浮」出按钮 */
  animation: breathe 2s infinite ease-in-out;
}

/* 悬停：暂停呼吸并提亮；按下：压暗 */
.chou-jiang-kong:hover {
  animation-play-state: paused;
  filter: brightness(1.1);
}
.chou-jiang-kong:active {
  filter: brightness(0.93);
}

.start-button {
  width: 100%;
  height: 100%;
  background: url("../../images/double_festival_2026/raffle-btn.png") no-repeat center center / 100% 100%;
}

/* 文字层浮在底图之上 */
.fudong {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  user-select: none;
}

.fudong[disabled] {
  cursor: not-allowed;
}

/* 主文案：设计稿 29px Medium 白色 */
.start-button-text {
  font-size: 29px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* 剩余次数：设计稿 16px Medium 白色 */
.chance-info {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}

/* 呼吸动画：底图轻微缩放，提示可点击 */
@keyframes breathe {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.04);
    opacity: 0.92;
  }
}

/* ---------- 跑灯高亮 ----------
   .active 用于跑灯经过的格子 + 初始默认选中；.winner 用于跑灯结束后的中奖格。
   两者样式一致，保证跑灯停下那一瞬间高亮不会闪断。
   注意：.prize-content 自身带有 #FDF8E8 背景，会盖住 .lottery-item 的 background，
   所以必须同时让 .prize-content 跟随父级变背景，否则高亮不可见。 */
.lottery-item.active,
.lottery-item.winner {
  background: radial-gradient(at 0% 0%, #fd3d1c 0%, #ffbd32 98.24%), #ffffff;
  box-shadow: 0 0 16px 4px rgba(255, 75, 31, 0.55), inset 0 0 0 3px #ffe05c;
}

/* 子元素 .prize-content 是实际铺底色块，active 时必须同步变背景 */
.lottery-item.active .prize-content,
.lottery-item.winner .prize-content {
  background: radial-gradient(at 0% 0%, #fd3d1c 0%, #ffbd32 98.24%), #ffffff;
}

/* 高亮态下奖品名改为白色，保证在橙红背景上可读 */
.lottery-item.active .prize-name,
.lottery-item.winner .prize-name {
  color: #ffffff;
}


/* ---------- 中奖名单面板 ---------- */
/* 标题行：▶▶ 中奖名单 ◀◀（设计稿 17.99px Bold 深灰，标题组竖直居中于 77px 内） */
.winner-indicator {
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--body-text, #2e2e2e);
  font-size: 18px;
  font-weight: 700;
}

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
}

.arrow-left {
  border-width: 5px 8px 5px 0;
  border-color: transparent #2e2e2e transparent transparent;
}

.arrow-right {
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #2e2e2e;
}

.arrow-center {
  letter-spacing: 1px;
}

/* 滚动名单：13.99px Regular，每条两行（恭喜 + 获得），条高 59px
   高度 = 面板 padding box 498 - 标题行 77 = 421，超出部分裁切、由 double.js 循环滚动 */
.scroll-container-border {
  height: 421px;
  overflow: hidden;
}

.scroll-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
}

.scroll-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.scroll-list li {
  height: 59px;
  padding: 8.5px 8px;
  font-size: 13.99px;
  font-weight: 400;
  color: var(--body-text, #2e2e2e);
  line-height: 21px;
}