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

/* 统一缩放因子：1920×1080 基准（1.78 = 1920/1080），超宽屏按高度封顶，防止元素放大溢出 */
:root {
    --dw: min(1vw, 1.78vh);
}

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

.desktop {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #17070a;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* ============ 顶栏：logo + 官方群组/商务渠道/官方客服 三胶囊 ============ */
.header {
    position: absolute;
    top: calc(1.4 * var(--dw));
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(14.5 * var(--dw));
    gap: 2vw;
}

.logo {
    height: calc(3.2 * var(--dw));
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.contact {
    display: flex;
    align-items: center;
    gap: calc(3.5 * var(--dw));
}

.nav-btn {
    height: calc(2 * var(--dw));
    width: auto;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.nav-btn:active {
    transform: scale(0.97);
    opacity: 0.85;
}

/* ============ 左上主标题（金字+标语条烧在图内） ============ */
.title-img {
    position: absolute;
    left: calc(22 * var(--dw));
    top: calc(7.5 * var(--dw));
    z-index: 3;
    width: calc(31.5 * var(--dw));
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

/* ============ 标题下二维码整块（qrpic 1128×316 @2x，白盒区 x29-288/y31-290） ============ */
.qr-panel {
    position: absolute;
    left: calc(22 * var(--dw));
    top: calc(24.8 * var(--dw));
    z-index: 4;
    width: calc(35 * var(--dw));
    aspect-ratio: 1128 / 316;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* 动态二维码盖在图内印刷二维码上：坐标 = 图内白盒位置 × (35/1128) */
.qr-panel #qrcode {
    position: absolute;
    left: calc(0.9 * var(--dw));
    top: calc(0.96 * var(--dw));
    width: calc(8.04 * var(--dw));
    height: calc(8.04 * var(--dw));
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-panel #qrcode img,
.qr-panel #qrcode canvas {
    width: 94% !important;
    height: 94% !important;
    display: block;
}

/* ============ 底部：装饰标题条 + 居中六卡片整条（整条可点） ============ */
.xiushi-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(36.4 * var(--dw));
    z-index: 3;
    width: calc(68.3 * var(--dw));
    height: auto;
    pointer-events: none;
}

.card-strip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(2 * var(--dw));
    z-index: 4;
    width: calc(69.8 * var(--dw));
    height: auto;
    cursor: pointer;
}