* {
    padding: 0;
    margin: 0;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    box-sizing: border-box;
}

body {
    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

.desktop {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* ============ 三场景轮播 ============ */
/* 同层三套场景元素（图 + 标签）叠放，data-scene 指定哪套可见 */
.sceneImg,
.tag {
    position: absolute;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

/* 场景图铺满槽位 */
.sceneImg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sceneRoot[data-scene="0"] .scene0,
.sceneRoot[data-scene="1"] .scene1,
.sceneRoot[data-scene="2"] .scene2 {
    opacity: 1;
}

/* 全屏背景（1920x1080）铺满真实窗口，不进舞台 */
.pageBg {
    object-fit: cover;
}

/* ============ 顶栏 ============ */
/* 整图 1920x113 随舞台缩放居中；超宽窗两侧用图里同样的半透明底 + 底部金线延展 */
.topBar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: calc(113px * var(--pageScale, 1));
    background: linear-gradient(to top, rgba(124, 106, 40, 0.65), rgba(124, 106, 40, 0.65) 1px, rgba(18, 18, 16, 0.5) 1px);
}

.topBarInner {
    position: relative;
    margin: 0 auto;
    width: calc(1920px * var(--pageScale, 1));
    height: 100%;
}

.topPic {
    display: block;
    width: 100%;
    height: 100%;
}

/* 三胶囊点击区（设计稿 1920 坐标：x 1164 / 1392 / 1620，宽 203，y 26 高 60） */
.zone {
    position: absolute;
    top: 23%;
    height: 53%;
    width: 10.57%;
    cursor: pointer;
}

.zone.customerBtn {
    left: 60.63%;
}

.zone.cooperationBtn {
    left: 72.5%;
}

.zone.officialGroupBtn {
    left: 84.38%;
}

/* ============ 两个 1920×1080 舞台：主舞台贴顶、人物舞台贴底，同宽同缩放保证右缘对齐 ============ */
.stage,
.renwuStage {
    position: absolute;
    left: 50%;
    width: 1920px;
    height: 1080px;
    transform: translateX(-50%) scale(var(--pageScale, 1));
}

.stage {
    top: 0;
    z-index: 2;
    transform-origin: center top;
}

.renwuStage {
    bottom: 0;
    z-index: 1;
    transform-origin: center bottom;
}

/* 切图即设计尺寸（884x967 等），在铺满舞台的图盒里按原尺寸贴右下 */
.renwuImg {
    object-fit: none;
    object-position: right bottom;
}

/* 人物上的四个标签：黄底黑字平行四边形（设计稿高 60、字 42、内距 26），按舞台坐标定位，随场景淡切 */
.tag {
    line-height: 60px;
    padding: 0 26px;
    background: linear-gradient(180deg, #fde26a, #f8cc30);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
    color: #111;
    font-size: 42px;
    font-weight: bold;
    letter-spacing: 2px;
    white-space: nowrap;
    transform: rotate(-5deg) skewX(-25deg);
}

.tagTopLeft {
    left: 1072px;
    top: 310px;
}

.tagTopRight {
    right: 93px;
    top: 371px;
}

.tagBottomLeft {
    left: 1090px;
    top: 630px;
}

.tagBottomRight {
    right: 78px;
    top: 771px;
}

/* ============ 左列（设计稿 x 75） ============ */
.titleSlot,
.futitleSlot,
.qrArea {
    position: absolute;
    left: 75px;
}

/* 标题槽宽 964、高取最高的 420，三张底对齐 */
.titleSlot {
    top: 150px;
    width: 964px;
    height: 420px;
}

.titleImg {
    object-position: left bottom;
}

/* 副标题切图 2x：最宽 1053x72（设计稿 y 588） */
.futitleSlot {
    top: 588px;
    width: 1053px;
    height: 72px;
}

.futitleImg {
    object-position: left center;
}

/* 扫码卡 964x253（设计稿 y 699） */
.qrArea {
    top: 699px;
    width: 964px;
}

.qrPic {
    display: block;
    width: 100%;
}

/* 运行时二维码盖住卡图里烤死的假码（白块实测位置 187x191）；内距用 px（百分比内距按卡宽算会把码挤小），留出正方形内容区 */
.qrBox {
    position: absolute;
    left: 3.42%;
    top: 12.65%;
    width: 19.45%;
    height: 75.69%;
    background: #fff;
    border-radius: 10%;
    padding: 10px 8px;
}

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