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

html,
body {
    width: 100%;
    height: 100%;
    background: #f7f6f8;
}

body {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.desktop {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #1a1a1a;
    background: #f7f6f8 url("../images/desktop/bg.js") no-repeat center / cover;
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}

/* 1920×1080 固定舞台，JS 写入 --pageScale 整体缩放居中 */
.content {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1920px;
    height: 1080px;
    transform: translate(-50%, -50%) scale(var(--pageScale, 1));
    transform-origin: center;
}

.cooperationBtn,
.customerBtn,
.officialGroupBtn,
.statsDownload {
    cursor: pointer;
}

.cooperationBtn:active,
.customerBtn:active,
.officialGroupBtn:active,
.statsDownload:active {
    transform: scale(0.97);
}

/* ===== 顶部 ===== */
.logo {
    position: absolute;
    left: 60px;
    top: 45px;
    width: 380px;
}

.pills {
    position: absolute;
    right: 50px;
    top: 40px;
    display: flex;
    align-items: center;
}

/* 兼容 Chromium<84：不用 flex gap */
.pill+.pill {
    margin-left: 15px;
}

.pill {
    height: 46px;
    width: auto;
}

/* ===== 左列 ===== */
.left {
    position: absolute;
    left: 108px;
    top: 205px;
    width: 640px;
    /* 人物压在二维码卡右端之上（设计层级），列本身降到人物下面 */
    z-index: 2;
    pointer-events: none;
}

.left .qrWrap,
.left img {
    pointer-events: auto;
}

.title {
    width: 600px;
}

.slog {
    margin-top: 34px;
    font-size: 46px;
    font-weight: 700;
    color: #111111;
    line-height: 1.2;
}

.subline {
    margin-top: 18px;
    /* 设计约 20px，需在人物轮廓前收尾不被遮挡 */
    font-size: 20px;
    color: #777777;
    line-height: 1.5;
}

.osPill {
    display: inline-block;
    margin-top: 26px;
    background: #ffffff;
    color: #444444;
    font-size: 20px;
    padding: 12px 24px;
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* ===== 二维码卡（qrpic 整图 + 运行时二维码覆盖） ===== */
.qrWrap {
    position: relative;
    margin-top: 36px;
    /* 设计卡片约 560 宽，右端在人物身后（人物层级更高） */
    width: 560px;
}

.qrpic {
    width: 100%;
}

.qrHole {
    position: absolute;
    /* 对齐 qrpic 内橙框白洞（560 宽渲染时框位 45,41 尺寸 117），留 8px 静区贴合设计 */
    left: 47px;
    top: 42px;
    width: 113px;
    height: 113px;
    padding: 8px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#qrcode {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#qrcode img {
    width: 100%;
    height: 100%;
}

/* ===== 箭头涂鸦（白色，朝右上） ===== */
.jiantou {
    position: absolute;
    left: 1330px;
    top: 870px;
    width: 200px;
    pointer-events: none;
    z-index: 5;
}

/* ===== 扇形卡组（banner1-5 轮播淡切） ===== */
.stack {
    position: absolute;
    left: 952px;
    top: 195px;
    width: 905px;
    z-index: 4;
    pointer-events: none;
}

.stack img {
    width: 100%;
}

.stack img+img {
    position: absolute;
    left: 0;
    top: 0;
}

/* JS 轮播：当前帧 .on 淡入，其余淡出（与标签点亮联动） */
.stack img {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.stack img.on {
    opacity: 1;
}

/* ===== 中部人物（骑在斜切分界上，层级低于卡组） ===== */
.renwu {
    position: absolute;
    left: 450px;
    bottom: 0;
    height: 1008px;
    width: auto;
    max-width: none;
    z-index: 3;
    pointer-events: none;
}

/* ===== 标签气泡（CSS） ===== */
.tag {
    position: absolute;
    display: inline-flex;
    align-items: baseline;
    /* 设计标注标签高 44（163×44），font 20 + 上下 padding 12 */
    font-size: 20px;
    line-height: 1;
    color: #333333;
    background: #ffffff;
    /* 常驻 1px 透明描边，点亮时变色不跳动 */
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 12px 20px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    z-index: 6;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
    animation: tagFloat 3.6s ease-in-out infinite alternate;
}

/* 上下呼吸浮动，错开相位更自然 */
@keyframes tagFloat {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-16px);
    }
}

.tag em {
    font-style: normal;
    color: #ff9000;
    margin-right: 2px;
}

/* 点亮态 # 为白色 */
.tag.dark em {
    color: #ffffff;
}

/* 点亮态（Figma 标注）：#000 80% 填充、1px #000 90% 描边、投影 0 5 10 10%、背景模糊 10 */
.tag.dark {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.tagA {
    left: 1060px;
    top: 244px;
}

/* HOT 章用切图（184×92 @2x），文字部分保持 CSS，点亮态下橙章不变色 */
.tagA .hot {
    height: 26px;
    width: auto;
    margin-left: 5px;
    align-self: center;
}

.tagB {
    left: 1645px;
    top: 303px;
    animation-delay: -0.7s;
}

.tagC {
    left: 1065px;
    top: 880px;
    animation-delay: -1.4s;
}

.tagD {
    left: 1320px;
    top: 765px;
    animation-delay: -2.1s;
}

.tagE {
    left: 1765px;
    top: 695px;
    animation-delay: -2.8s;
}

@media (prefers-reduced-motion: reduce) {
    .tag {
        animation: none;
    }
}