/* ==================== 赛博双节活动页 · 页面骨架 ====================
   设计稿画布 1920x3000，本文件所有坐标均为设计稿原始像素值（无需换算）。
   实现方式：.container-main 作为唯一定位上下文，各区块元素绝对定位到画布坐标。
   换活动时改动：本文件顶部主题变量 + images/double_festival_2026/ 下的图。

   布局与动态效果的职责划分：
     double.css  ← 页面骨架、套餐区、规则区、抽奖区外框与六宫格
     raffle.css  ← 抽奖区动态效果（跑灯高亮、按钮呼吸、名单滚动）
   维护：注释维护：2026-09-21 新建（赛博版）
   ==================================================================== */

:root {
  /* 色值取自蓝湖设计稿色板（lanhu_get_tokens，按使用频次） */
  --primary: #fd3d1c;
  /* 主红橙：按钮底、强调 */
  --primary-shadow: rgba(253, 121, 55, 0.74);
  /* 按钮右侧偏移投影 */
  --price-color: #861e08;
  /* 深红棕：价格 / 套餐名 */
  --title-color: #4b0e00;
  /* 深棕：大标题、规则正文 */
  --body-text: #2e2e2e;
  /* 正文灰（中奖名单等） */
  --panel-bg: #F9CC94;
  /* 面板 / 奖品格米白底 */
  --panel-border: #fedba1;
  /* 面板描边浅橙 */
  --btn-border: #fef8d9;
  /* 按钮描边米白 */
  --tab-bg: #f9d1a0;
  /* 我的奖品 tab 选中底 */
  --page-bg: #fdf8e8;
  /* 窗口宽于 1920 时的两侧留白 */
  --card-w: 464px;
  /* 套餐卡片内容区宽度 */
  --font-body: "Alibaba PuHuiTi", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-num: "Roboto", "Alibaba PuHuiTi", "Microsoft YaHei", sans-serif;
}

/* 整页由底部脚本按窗口宽度整体等比缩放（scale），
   页面宽度恒等于窗口宽度，所以既不需要 min-width，也不会露出兜底色。 */
html {
  background-color: var(--page-bg);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--title-color);
  background-color: var(--page-bg);
}

body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background-color: #999999;
  border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
  background-color: #666666;
}

a {
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==================== 页面容器（1920x3000，与设计稿 1:1） ====================
   整页主视觉由设计出图 banner.jpg 铺满，页面只在这张图上叠加文案与交互元素。
   size 写死 1920px 3000px 而非 100%：内容块都是按画布坐标绝对定位的，
   背景若被拉伸或缩放就会与内容错位。 */
/* 舞台：高度由脚本设为 3000 x 缩放比，用来裁掉缩放后溢出的部分；
   此处 3000px 是脚本未执行（如 JS 被禁用）时的兜底值。 */
.page-stage {
  position: relative;
  width: 100%;
  height: 3000px;
  overflow: hidden;
}

/* 画布：固定 1920x3000（等于设计稿尺寸），由脚本整体 scale 到窗口宽度。
   水平居中用 left:50% + margin-left:-960px 而非 translateX —— 后者与 scale 共用
   transform 属性会互相覆盖；transform-origin 取顶部中心，保证缩放后仍居中、
   且顶边与舞台顶边对齐。背景按元素自身尺寸 100% 100% 铺，与元素同比、不失真。 */
.container-main {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -960px;
  width: 1920px;
  height: 3000px;
  transform-origin: top center;
  background: url("../../images/double_festival_2026/banner.jpg") no-repeat top center / 100% 100%;
}

/* 内容定位层：所有区块相对本层按设计稿原始坐标绝对定位 */
.page-inner {
  width: 1920px;
  height: 3000px;
  position: relative;
}

/* ==================== 首屏导航（设计稿未单列图层，沿用站内通用规格） ==================== */
.active-nav {
  position: absolute;
  top: 20px;
  left: 0;
  width: 1920px;
  height: 80px;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.active-nav .logo {
  width: 188px;
  height: 51px;
  display: block;
}

.user-info-active {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar_icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.login-button,
.login-button-closs {
  height: 40px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  background-color: #ffd2af;
  color: #000000;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  transition: filter 0.2s ease;
}

.login-button:hover,
.login-button-closs:hover {
  filter: brightness(1.08);
}

/* ==================== 段落标题（位图整块，文字已含在图内） ====================
   三个标题图尺寸各不相同（817x87 / 839x72 / 451x89），
   故只用 left:50% + translateX(-50%) 居中，不写死宽高，按图片原始尺寸渲染。 */
.act-section-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  line-height: 0;
}

.act-section-title img {
  display: block;
}

.banner2 .act-section-title {
  top: 754px;
  /* 设计稿标题中心 y=797，图高 87 */
}

.banner3 .act-section-title {
  top: 1474px;
  /* 设计稿标题中心 y=1510，图高 72 */
}

.activity-remind .act-section-title {
  top: 2251px;
  /* 设计稿标题中心 y=2295.5，图高 89 */
}

/* ==================== 超值套餐区 ====================
   与斧牛最大的不同：卡片框、礼盒、丝带全部由设计出在一张整图里
   （banner2-bg.png，设计稿 1671x568 @ 134,815），页面不再用 CSS 画卡片框，
   只需把文案与按钮叠到图上对应位置。
   卡片内容区各自 464x438，左 @454,902、右 @1002,902。 */
.package-bg {
  position: absolute;
  left: 134px;
  top: 815px;
  width: 1671px;
  height: 568px;
  display: block;
  pointer-events: none;
  /* 装饰图不拦截按钮点击 */
}

.pkg-card {
  position: absolute;
  top: 902px;
  width: var(--card-w);
  height: 438px;
  text-align: center;
}

.pkg-card-left {
  left: 454px;
}

.pkg-card-right {
  left: 1002px;
}

/* 角标文字：设计稿 28px Medium */
.pkg-name {
  position: absolute;
  left: 0;
  top: 80px;
  width: 100%;
  font-size: 28px;
  font-weight: 500;
  color: var(--price-color);
  line-height: 27px;
}

/* 价格：斜体 + 橙色填充 + 白色粗描边 + 淡投影，参数取自设计稿的 PS 图层样式：
     描边 4px / 位置外部 / 纯白 / 100%
     投影 152° / 距离 6px / 大小 4px / 不透明度 19%
   描边用多向 text-shadow 实现：纯外侧、紧贴字形，且不受 paint-order 兼容性影响。
   4px 偏粗，故铺满 16 个方向 —— 只铺 8 向时斜角会出现明显多边形缺口。 */
.pkg-price {
  position: absolute;
  left: 0;
  top: 163px;
  width: 100%;
  font-family: var(--font-num);
  font-size: 56.7px;
  font-weight: 900;
  font-style: italic;
  color: #f64a26;
  line-height: 58px;
  letter-spacing: 1px;
  text-shadow:
    /* —— 描边：4px 外部，16 向铺满一周 —— */
    4px 0 0 #ffffff,
    -4px 0 0 #ffffff,
    0 4px 0 #ffffff,
    0 -4px 0 #ffffff,
    2.83px 2.83px 0 #ffffff,
    -2.83px 2.83px 0 #ffffff,
    2.83px -2.83px 0 #ffffff,
    -2.83px -2.83px 0 #ffffff,
    3.7px 1.53px 0 #ffffff,
    -3.7px 1.53px 0 #ffffff,
    3.7px -1.53px 0 #ffffff,
    -3.7px -1.53px 0 #ffffff,
    1.53px 3.7px 0 #ffffff,
    -1.53px 3.7px 0 #ffffff,
    1.53px -3.7px 0 #ffffff,
    -1.53px -3.7px 0 #ffffff,
    /* —— 投影：写在最后 → 落在最下层，与 PS 中「描边压在投影之上」的层序一致。
       PS 的「角度」是光源方向（152° → 左上方：cos152°≈-0.883、sin152°≈+0.469），
       阴影落在光源的反方向即右下方，位移 = -6×(cos152°, sin152°) ≈ (5.30, 2.82)；
       CSS 的 y 轴向下为正，符号已换算 —— */
    5.3px 2.82px 4px rgba(134, 30, 8, 0.19);
}

.pkg-price .pkg-unit {
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 700;
  margin-left: 2px;
}

/* 描述行：设计稿 44px Bold */
.pkg-desc {
  position: absolute;
  left: 0;
  top: 231px;
  width: 100%;
  font-size: 44px;
  font-weight: 700;
  color: var(--price-color);
  line-height: 41px;
}

/* 购买按钮：底图 buy-btn.png（纯底图不含文字），尺寸按设计稿 245x79
   class 名固定为 .banner2-content-bottom —— buy.js 靠它绑定下单事件，不可改 */
.banner2-content-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 311px;
  width: 245px;
  height: 79px;
  padding: 0;
  border: 0;
  outline: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 29px;
  font-weight: 500;
  color: #ffffff;
  background: url("../../images/double_festival_2026/buy-btn.png") no-repeat center center / 100% 100%;
  transition: filter 0.2s ease;
}

.banner2-content-bottom:hover {
  filter: brightness(1.12);
  transform: translateX(-50%) scale(1.04);
}

.banner2-content-bottom:active {
  filter: brightness(0.94);
  transform: translateX(-50%) scale(0.97);
}

/* ==================== 抽奖区外框 ====================
   左面板 779x512 @360,1647；右面板 389x512 @1171,1647；
   两面板同高同色（米白 #fdf8e8 + 39px 圆角 + 7px 浅橙描边），间距 32px，
   合计 1200px，居中后左边缘正好落在设计稿的 360px。 */
.content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1647px;
  width: 1200px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.lottery-section,
.winning-announce {
  position: relative;
  height: 512px;
  border: 7px solid var(--panel-border);
  border-radius: 39px;
  overflow: hidden;
}

.lottery-section {
  background-color: var(--panel-bg);
}

.lottery-section {
  width: 779px;
}

.winning-announce {
  width: 389px;
}

/* 中奖概率 / 我的奖品：两个弹窗入口在面板正上方，各自定位（prize.js 绑这两个 class） */
.winning-probability {
  position: absolute;
  left: 364px;
  top: 1598px;
  height: 19px;
  font-size: 20px;
  font-weight: 500;
  color: #000000;
  line-height: 19px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.winning-probability:hover {
  opacity: 0.68;
}

.winning-record {
  position: absolute;
  left: 1416px;
  top: 1582px;
  width: 145px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  color: #000000;
  background-color: var(--tab-bg);
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.winning-record:hover {
  filter: brightness(1.06);
  transform: scale(1.04);
}
.winning-record:active {
  transform: scale(0.97);
}

/* 活动 id 载体：仅供 JS 读取 data-id，不参与视觉 */
.act-title {
  display: none;
}

/* ==================== 活动规则区 ====================
   规则正文为整块文本（设计稿 1192x207 @360,2415，18px Medium）。 */
.remind-content {
  position: absolute;
  left: 360px;
  top: 2415px;
  width: 1192px;
  font-size: 18px;
  font-weight: 500;
  color: var(--title-color);
  line-height: 34px;
}

.remind-text-1 {
  word-break: break-word;
}

.remind-text-red {
  color: var(--primary);
  font-weight: 700;
}

.remind-content .lian-jie {
  color: var(--primary);
  text-decoration: underline;
}