* {
    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;
}

/* 背景直接 cover 铺满真实窗口；主构图用统一单位 --s 整体等比缩放：
   宽度受限时 1vw（=1920 稿等比），高度受限（宽扁窗）时按通栏下方可用高换算，
   保证任何窗口比例都复现 1920x1080 的构图。旧内核（Chromium<79 无 min()）兜底 1vw */
.desktop {
    --s: 1vw;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000 center / cover no-repeat;
}

/* 门槛测 calc 内嵌 min 的组合形态（裸 min() 判定会放过不支持嵌套的旧 WebKit）；
   7.71vw = 通栏高（148/1920），48.54 = 稿内通栏下方区域高（56.25-7.71） */
@supports (bottom: calc(min(1vw, (100vh - 7.71vw) / 48.54) * 1)) {
    .desktop {
        --s: min(1vw, (100vh - 7.71vw) / 48.54);
    }
}

/* ============ 顶部通栏：整图满窗宽，胶囊点击区按图宽百分比对位（随图同步伸缩） ============ */
.topBar {
    position: relative;
    z-index: 1;
    width: 100%;
}

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

.zone,
.zoneCover {
    position: absolute;
    width: 10.5%;
}

.zone {
    top: 25%;
    height: 50%;
    cursor: pointer;
}

/* 未配置 URL 时盖住图内烤死的胶囊（通栏底色实测 #1f181c 均匀） */
.zoneCover {
    top: 18%;
    height: 64%;
    background: #1f181c;
}

/* ============ 主构图舞台：通栏下方 100s x 48.54s 贴底居中，
   坐标全部按 1920 稿像素值 ÷19.2 转 --s（纵向已减去通栏 7.71s） ============ */
.stage {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: calc(var(--s) * 100);
    height: calc(var(--s) * 48.54);
}

.stage > * {
    position: absolute;
}

/* 左列三元素可见左缘锁定通栏 logo 的 5vw 线：logo 烤在全宽 toppic 里（左缘=5%窗口宽），
   而舞台居中、宽扁窗口下比窗口窄，须抵消舞台左边距 (50vw - 50s) 再减图内留白
   （截图实测留白：title/qrpic 0.45s、qiandao 1.3s），即 left = 5vw - (50vw - 50s) - 留白 */

/* 标题块（营业中徽标+主标语+副标语+分类行烤入图内） */
.titleImg {
    left: calc(var(--s) * 49.55 - 45vw);
    top: calc(var(--s) * 2);
    width: calc(var(--s) * 35.3);
}

/* 权益胶囊行（每日签到/全场0元/每日上新）：在扫码卡（底 40.46s）下方贴底 */
.qiandaoImg {
    left: calc(var(--s) * 48.7 - 45vw);
    top: calc(var(--s) * 41.6);
    width: calc(var(--s) * 36.8);
}

/* 右侧四卡拼贴：renwu 图 892px 即 1x 尺寸，稿内显示宽 46.4s（1:1 像素） */
.renwuImg {
    left: calc(var(--s) * 50);
    top: calc(var(--s) * 2);
    width: calc(var(--s) * 46.4);
}

/* ============ 左列扫码卡：白码区由运行时二维码盖住（图内烤死假码位）
   位于标题块下方、权益胶囊上方（UI 稿左列顺序）；
   qrpic 图 1412x382，width 36.8s → 高 9.96s，top 30.5s → 底 40.46s，与下方 qiandao(41.6s) 不重叠 ============ */
.qrCard {
    left: calc(var(--s) * 49.55 - 45vw);
    top: calc(var(--s) * 30.5);
    width: calc(var(--s) * 36.8);
}

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

/* 白码区实测：left 5.5% top 15.7% w 18.6% h 68.6%（相对 qrpic 图） */
.qrBox {
    position: absolute;
    left: 5.5%;
    top: 15.7%;
    width: 18.6%;
    height: 68.6%;
    background: #fff;
    border-radius: 6%/8%;
    padding: 1.2%;
}

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