* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}

/* --px = 1 设计稿 px（设计稿宽 750）。全部尺寸用 calc(N * var(--px))，
   移动端等于纯 vw 布局；PC 覆盖 --px 即整体等比缩成居中窄列。
   bg1（爱心网点）叠在 bg2（紫色渐变）上，都是半透明图，压在黑底上 */
.mobile {
    --px: calc(100vw / 750);
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: #000;
}

/* PC：手机比例窄列居中，两侧黑底。--px 封顶 0.6px（列宽最大 450px）；
   矮窗口由 0.0616vh 主导（列宽=46.2vh，46.2/100 ≈ 手机宽高比）。
   旧内核不支持 min() 时落在固定 0.6px */
body.is-pc .mobile {
    --px: 0.6px;
    width: calc(750 * var(--px));
    margin: 0 auto;
}

@supports (width: min(1px, 1vh)) {
    body.is-pc .mobile {
        --px: min(0.6px, 0.0616vh);
    }
}

/* ============ 三页横向轮播：每页顶部固定 banner+导航，中间信息流单独滑动 ============ */
.swiper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.swiper::-webkit-scrollbar {
    display: none;
}

/* 页背景：后两页（淫妻/片库）紫色渐变 bg2；第一页（品茶）爱心网点 bg1，
   上面压一层半透明深紫罩色（按设计稿：顶部留光晕、往下压暗到近黑）；
   都是半透明图压在黑底上，挂在 page 上不随信息流滚动 */
.page {
    flex: none;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background-image: url('../images/mobile/bg2.js');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

.page:first-child {
    background-image: linear-gradient(180deg, rgba(20, 6, 24, 0.55) 0%, rgba(20, 6, 24, 0.82) 40%, rgba(8, 2, 10, 0.95) 100%), url('../images/mobile/bg1.js');
    background-repeat: no-repeat, no-repeat;
    background-position: top center, top center;
    background-size: 100% 100%, 100% auto;
}

.sectionHead {
    flex: none;
    padding: calc(14 * var(--px)) 0 calc(10 * var(--px));
}

/* 中间滑动区：底部固定 CTA 悬浮其上，留出等高空白 */
.pageScroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: calc(300 * var(--px));
}

.pageScroll::-webkit-scrollbar {
    display: none;
}

/* PC 底部是更高的 qrpic 扫码块 */
body.is-pc .pageScroll {
    padding-bottom: calc(330 * var(--px));
}

.sectionBanner {
    display: block;
    width: calc(710 * var(--px));
    height: auto;
    margin: 0 auto;
    cursor: pointer;
}

.sectionNav,
.sectionPic {
    display: block;
    width: calc(712 * var(--px));
    height: auto;
    margin: calc(12 * var(--px)) auto 0;
}

/* 好茶导航与楼凤信息流是 750 全宽切图 */
.navCha,
.picFull {
    width: 100%;
}

/* 栏目头没给切图，CSS 文字实现（风韵少妇/中文字幕） */
.feedHead {
    display: flex;
    align-items: baseline;
    padding: calc(20 * var(--px)) calc(20 * var(--px)) calc(12 * var(--px));
    color: #fff;
}

.feedTitle {
    font-size: calc(30 * var(--px));
    font-weight: bold;
}

.feedTitle span {
    margin-left: calc(12 * var(--px));
    font-size: calc(22 * var(--px));
    font-weight: normal;
    color: rgba(255, 255, 255, 0.55);
}

.feedMore {
    margin-left: auto;
    font-size: calc(22 * var(--px));
    color: rgba(255, 255, 255, 0.55);
}

/* ============ 底部固定 CTA：渐变压底，信息流从下面透出 ============ */
.ctaBar {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: calc(750 * var(--px));
    padding: calc(30 * var(--px)) 0 calc(16 * var(--px));
    padding-bottom: calc(16 * var(--px) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(10, 3, 12, 0) 0%, rgba(10, 3, 12, 0.9) 32%, #0a030c 100%);
    z-index: 9;
}

.ctaTitle {
    display: block;
    width: calc(404 * var(--px));
    height: auto;
    margin: 0 auto calc(14 * var(--px));
}

/* 主下载 + 备用占位同放 dlBox（stats 按第一个 backDownBtn 的父容器写 data-dl-count，
   含同容器 statsDownload：4=三备用窄图，3=两中宽图，2=单中宽图，1=仅主按钮） */
.dlBox {
    width: calc(680 * var(--px));
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.dlMain {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
}

/* 按钮间距用 margin 而非 flex gap（gap 需 Chromium 84+/iOS 14.5+，仓库要兼容更旧内核） */
.backSlot {
    width: calc(220 * var(--px));
    height: calc(85 * var(--px));
    margin: calc(16 * var(--px)) 0 0 calc(10 * var(--px));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.backSlot:first-of-type {
    margin-left: 0;
}

/* 占位按 DOM 顺序绑定备用地址；3 备用用窄图，2 个及以下换中宽图 */
.backSlot:nth-of-type(1) {
    background-image: url('../images/mobile/beiyong1.js');
}

.backSlot:nth-of-type(2) {
    background-image: url('../images/mobile/beiyong2.js');
}

.backSlot:nth-of-type(3) {
    background-image: url('../images/mobile/beiyong3.js');
}

.dlBox[data-dl-count="3"] .backSlot {
    width: calc(316 * var(--px));
    margin-left: calc(47 * var(--px));
}

.dlBox[data-dl-count="3"] .backSlot:first-of-type {
    margin-left: 0;
}

.dlBox[data-dl-count="3"] .backSlot:nth-of-type(1) {
    background-image: url('../images/mobile/zhongbeiyong1.js');
}

.dlBox[data-dl-count="3"] .backSlot:nth-of-type(2) {
    background-image: url('../images/mobile/zhongbeiyong2.js');
}

/* 只配 1 个备用：全宽大备用按钮 */
.dlBox[data-dl-count="2"] .backSlot {
    width: 100%;
    margin-left: 0;
    background-image: url('../images/mobile/dabeiyong.js');
}

/* ============ PC 扫码块：动态二维码叠在 qrpic 左侧白区（像素扫描测得） ============ */
.pcQr {
    position: relative;
    width: calc(621 * var(--px));
    margin: 0 auto;
}

.pcQrBg {
    display: block;
    width: 100%;
    height: auto;
}

.pcQrBox {
    position: absolute;
    left: 1.21%;
    top: 3.57%;
    width: 31.32%;
    height: 92.62%;
    background: #fff;
    padding: calc(6 * var(--px));
}

#qrcode,
#qrcode canvas,
#qrcode img {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ============ 右侧悬浮竖条（商务合作/官方群组/在线客服） ============ */
/* left 用列中心推算：移动端与 PC 窄列同一公式，始终贴列右缘 12px */
.floatBar {
    position: fixed;
    left: calc(50% + 259 * var(--px));
    top: 50%;
    transform: translateY(-50%);
    width: calc(104 * var(--px));
    height: calc(380 * var(--px));
    background-image: url('../images/mobile/btn.js');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 10;
}

/* 点击区绝对定位三等分：某个入口没配 URL 被 stats 隐藏时，
   其余点击区不塌陷位移，始终对准底图上烧死的胶囊 */
.floatBar .zone {
    position: absolute;
    left: 0;
    width: 100%;
    height: 33.33%;
    cursor: pointer;
}

.floatBar .zone:nth-of-type(1) {
    top: 0;
}

.floatBar .zone:nth-of-type(2) {
    top: 33.33%;
}

.floatBar .zone:nth-of-type(3) {
    top: 66.66%;
}