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

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

/* xhs-B 桌面端：1920×1080 固定舞台整体缩放，背景图挂外层铺满真实窗口 */
.desktop {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: url('../images/desktop/bg.js') center / cover no-repeat;
}

.stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1920px;
    height: 1080px;
    transform: translate(-50%, -50%) scale(var(--pageScale, 1));
}

/* ============ 顶部：logo + 三胶囊按钮 ============ */
.logo {
    position: absolute;
    left: 60px;
    top: 36px;
    width: 332px;
}

.pillBar {
    position: absolute;
    right: 60px;
    top: 36px;
    display: flex;
}

/* 切图 222×78，未配置的入口由 stats 隐藏 */
.pill {
    width: 222px;
    margin-left: 16px;
    cursor: pointer;
}

/* ============ 人物轮播（右侧贴底，层级最低避免盖住顶部按钮） ============ */
.heroBox {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 993px;
    height: 950px;
    z-index: -1;
    cursor: pointer;
}

.heroImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    opacity: 0;
    transition: opacity 0.6s;
}

.heroImg.on {
    opacity: 1;
}

/* ============ 标题字图轮播（左侧主视觉，与人物同步，角标已烤入图内） ============ */
.titleBox {
    position: absolute;
    left: 120px;
    top: 275px;
    width: 990px;
    height: 419px;
}

.titleImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    opacity: 0;
    transition: opacity 0.6s;
}

.titleImg.on {
    opacity: 1;
}

/* 三张切图内文字基线不同（实心左缘 48/76/121@1134），按 title1 为基准左移补正，轮播时左缘一致 */
.titleImg:nth-child(2) {
    left: -24px;
}

.titleImg:nth-child(3) {
    left: -64px;
}

/* ============ 下载横条（Figma：x156 y772，874×188；二维码槽 x23.7 y24，140×140） ============ */
.qrBlock {
    position: absolute;
    left: 156px;
    top: 772px;
    width: 874px;
    height: 188px;
}

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

/* 运行时二维码盖在切图的二维码白区上（白区 140×140 @ 24,24），留白按原型加宽 */
#qrcode {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 157px;
    height: 157px;
    padding: 6px;
    background: #ffffff;
    border-radius: 10px;
}

#qrcode img,
#qrcode canvas {
    display: block;
}