/* ═══════════════════════════════════════════════════════
   YC-169/E — 2026-09 双节活动版（Figma 落地页 (Copy) / 页「双节活动」942:7098）
   H5 设计稿 750 × 1624（1 设计 px = 0.01rem）
   PC 设计稿 1920 × 1080（1 设计 px = 0.01rem）

   路线：3 组整版设计交叉渐隐轮播（bg 模糊氛围 / 人物透明层 / 标题透明层
   三层独立切片），chrome（logo/导航胶囊/下载键/tip/QR）固定 DOM。
   红包雨：8 张奖品卡由 JS 生成 N 个"雨滴"，各自无限循环从顶部落下，
   每轮换卡换位（.rain 层夹在设计层与 chrome 之间，pointer 穿透）。
   H5：bg cover 铺满视口；7.5rem 居中舞台，标题顶部锚定、人物随标题
       固定偏移、下载键/tip 底部锚定；rem 加 vh 上限矮窗整版等比缩小，
       顶栏 logo/胶囊 vw 定宽贴视口两边不缩。
   PC：bg cover + 人物锚视口底（p1 贴视口右）+ 居中 19.2rem 设计块
       （标题/二维码板，pointer 穿透），运行时 QR 叠在板内白框。

   ⚠️ 标题切片是 Figma 旋转 2.555°（PC 第 3 组 0.791°）后的导出，
      CSS 坐标用的是旋转后 bbox（left=node.x，top=node.y−w·sinθ）。
   ⚠️ 控制 display 的规则必须包在媒体查询里（§7.4-E/K）。
   ⚠️ out.css body 是 flex，根容器必须显式 width（§7.4-M）。
   ═══════════════════════════════════════════════════════ */

/* ── 轮播通用：渐隐切换 ── */
.sl {
    opacity: 0;
    transition: opacity 0.7s ease;
}
.sl.active {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   断点：只分 移动端(≤750) / PC(≥751) 两种（沿用 D 既有约定），
   751~960 方窗/iPad 一律走 PC 横版。
   ═══════════════════════════════════════════════════════ */
@media (min-width: 751px) {
    .h5-main { display: none !important; }
    .pc-main { display: block !important; }
}

/* ═══════════════════════════════════════════════════════
   H5 (≤750px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 750px) {
    /* rem 基准：宽度走 13.333vw（1rem=100 设计 px@750），加高度上限
       6.1576vh（=100vh/16.24）——窗口变矮时整版设计按比例统一缩小、
       水平居中，两侧露出 cover 的背景。三级回退：vw → min(vw,vh) → min(vw,dvh)。 */
    html {
        height: auto;
        font-size: 13.333vw;
        font-size: min(13.333vw, 6.1576vh);
        font-size: min(13.333vw, 6.1576dvh);
    }
    body {
        height: auto;
        min-height: 100dvh;
        margin: 0;
        overflow-x: hidden;
        background: #2a0618;
        display: block;
    }
}

.h5-main {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh;
    background: #2a0618;
    overflow: hidden;
}

.h5-sl {
    position: absolute;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
}
.h5-poster {
    position: absolute;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.h5-stage {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 7.5rem;
    margin-left: -3.75rem;
}

.h5-logo {
    position: absolute;
    left: 3.2vw;
    top: 3.2vw;
    width: 14.4vw;
    height: auto;
    z-index: 5;
    border-radius: 18%;
}
.h5-pill {
    position: absolute;
    top: 4.4vw;
    width: 28vw;
    z-index: 5;
    display: block;
}
.h5-pill img { display: block; width: 100%; height: auto; }
.h5-pill::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -2vw; bottom: -2vw;
}
.h5-pill.pill-tg    { right: 32vw; }
.h5-pill.pill-group { right: 2.8vw; }

.h5-chrome {
    z-index: 5;
    pointer-events: none;
}
.h5-dl {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(0.36rem + constant(safe-area-inset-bottom));
    bottom: calc(0.36rem + env(safe-area-inset-bottom));
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
}
.h5-btn {
    display: block;
    pointer-events: auto;
    width: 3.28rem;
}
.h5-btn img { display: block; width: 100%; height: auto; }
.h5-dl-row {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    gap: 0.22rem;
    width: 100%;
    padding: 0 0.28rem;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════
   红包雨（H5 / PC 共用）：.drop 负责直线下落（无限循环，JS 每轮换卡换 left），
   内层 img 负责左右摆动 + 初始倾角/缩放；整层 pointer 穿透。
   ═══════════════════════════════════════════════════════ */
.rain {
    position: absolute;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}
.rain .drop {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5rem;
    transform: translate3d(0, -130%, 0);
    -webkit-transform: translate3d(0, -130%, 0);
    animation: rainFall var(--dur, 9s) linear var(--delay, 0s) infinite;
    -webkit-animation: rainFall var(--dur, 9s) linear var(--delay, 0s) infinite;
    will-change: transform;
}
.rain .drop img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    transform-origin: 50% 30%;
    -webkit-transform-origin: 50% 30%;
    transform: rotate(var(--r0, 0deg)) scale(var(--sc, 1));
    -webkit-transform: rotate(var(--r0, 0deg)) scale(var(--sc, 1));
    animation: rainSway var(--sway, 3s) ease-in-out infinite alternate;
    -webkit-animation: rainSway var(--sway, 3s) ease-in-out infinite alternate;
}
@keyframes rainFall {
    from { transform: translate3d(0, -130%, 0); }
    to   { transform: translate3d(0, 110vh, 0); }
}
@-webkit-keyframes rainFall {
    from { -webkit-transform: translate3d(0, -130%, 0); }
    to   { -webkit-transform: translate3d(0, 110vh, 0); }
}
@keyframes rainSway {
    from { transform: rotate(calc(var(--r0, 0deg) - 9deg)) scale(var(--sc, 1)) translateX(-7%); }
    to   { transform: rotate(calc(var(--r0, 0deg) + 9deg)) scale(var(--sc, 1)) translateX(7%); }
}
@-webkit-keyframes rainSway {
    from { -webkit-transform: rotate(calc(var(--r0, 0deg) - 9deg)) scale(var(--sc, 1)) translateX(-7%); }
    to   { -webkit-transform: rotate(calc(var(--r0, 0deg) + 9deg)) scale(var(--sc, 1)) translateX(7%); }
}
@media (min-width: 751px) {
    .rain .drop { width: 1.3rem; }
}

/* ═══════════════════════════════════════════════════════
   PC (≥751px) — 1920 × 1080，bg cover + 人物锚视口底 + 居中 19.2rem 设计块。
   ═══════════════════════════════════════════════════════ */
@media (min-width: 751px) {
    html { font-size: min(5.20833vw, 9.259vh); }
}
.pc-main {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #2a0618;
    overflow: hidden;
}
.pc-sl {
    position: absolute;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
}
.pc-bg {
    position: absolute;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* 人物：切片已被 frame 裁到底边，故锚视口底（不锚 stage，宽高比不同时
   stage 上下留白会露出人物硬切边）；p1 切片右侧同样被裁 → 贴视口右 */
.pc-person {
    position: absolute;
    bottom: 0;
    height: auto;
    max-width: none;
    z-index: 1;
}
.pc-person.p1 { right: 0;                    width: 11.833rem; }
.pc-person.p2 { left: calc(50% - 0.9rem);    width: 10.18rem; }
.pc-person.p3 { left: calc(50% + 0.23rem);   width: 8.74rem; }

/* 居中设计块（19.2 × 10.8rem），内容不可点，pointer 穿透 */
.pc-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 19.2rem;
    height: 10.8rem;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}
.pc-stage img {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
}
/* 标题（旋转后 bbox；t1/t2 964×646，t3 946×618） */
.pc-title.t1,
.pc-title.t2 { left: 0.1257rem; top: 1.2496rem; width: 9.6467rem; }
.pc-title.t3 { left: 0.5146rem; top: 1.3912rem; width: 9.4667rem; }

/* 二维码板（3 帧同一张，独立 chrome 层压在红包雨之上；白框占位区已在
   切片里抹平），运行时 QR 白底方块叠在框内居中 */
.pc-chrome { z-index: 5; }
.pc-qr-panel { left: 0.67rem; top: 7.67rem; width: 7.32rem; }
.pc-qr {
    /* 内区 (39..261, 50..257)@设计 px，2.0rem 白盒居中 (150,153.5)，上下各留 3.5px */
    position: absolute;
    left: 1.17rem;
    top: 8.205rem;
    width: 2.0rem;
    height: 2.0rem;
    padding: 0.08rem;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0.08rem;
}
.pc-qr .con-code {
    position: relative;
    width: 100%;
    height: 100%;
}
.pc-qr .con-code img,
.pc-qr .con-code canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ── chrome：logo（贴视口左）+ 3 导航胶囊（贴视口右） ── */
.pc-logo {
    position: absolute;
    left: 0.32rem;
    top: 0.24rem;
    width: 1.08rem;
    height: auto;
    z-index: 5;
    border-radius: 0.18rem;
}
.pc-pill {
    position: absolute;
    top: 0.32rem;
    width: 2.46rem;
    z-index: 5;
    display: block;
    transition: transform 0.2s ease;
}
.pc-pill:hover {
    transform: scale(1.06);
    -webkit-transform: scale(1.06);
}
.pc-pill img { display: block; width: 100%; height: auto; }
.pc-pill.pill-tg    { right: 2.76rem; }
.pc-pill.pill-group { right: 0.18rem; }

.ios-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.84);
    z-index: 9998;
    display: none;
    justify-content: center;
    align-items: center;
}
.ios-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7.02rem;
    height: 9.22rem;
    background: #2f3039;
    border-radius: 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.3rem 0.2rem;
    box-sizing: border-box;
    z-index: 9999;
    text-align: center;
}
.modal-header p {
    font-size: 0.26rem;
    line-height: 1.5;
    margin: 5px 0;
}
.modal-header .text-danger {
    color: #ff034f;
    font-weight: bold;
}
.modal-body {
    width: 96%;
    margin: 0 auto;
}
.modal-body img {
    width: 100%;
    display: block;
}
.modal-footer .ios-dl-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    width: 5.6rem;
    height: 0.9rem;
    margin: 0 auto;
    background: linear-gradient(180deg, #ff5a3c 0%, #d80f16 100%);
    border: 1px solid #ffd77a;
    border-radius: 999px;
    color: #fff;
    font-size: 0.36rem;
    font-weight: bold;
    text-decoration: none;
}
.modal-footer .ios-dl-pill img {
    width: 0.4rem;
    height: auto;
    display: block;
}

/* ═══════ 右下角浮动广告 (通用) ═══════ */
.ad-float-box {
    position: fixed;
    bottom: 125px;
    right: 14px;
    width: 88px;
    height: 88px;
    z-index: 999;
}
@media (min-width: 751px) {
    .ad-float-box { display: none !important; }
}
.ad-slide {
    position: absolute;
    inset: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none;
    opacity: 0;
    transition: opacity 0.4s;
}
.ad-slide.active {
    display: block;
    opacity: 1;
}
.ad-slide img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 4px;
}
.ad-close {
    position: absolute;
    top: -4px;
    right: 4px;
    color: #555;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    padding: 2px 4px;
}