* {
    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: #05091a;
}

/* 背景直接 cover 铺满；主构图（标题+人物+卡片）用统一单位 --s 整体等比缩放：
   宽度受限时 1vw（=1920 稿等比），高度受限（宽扁窗）时按扫码条上方可用高换算，
   保证任何窗口比例都复现 1920x1080 的构图、标题与卡片不会相撞。
   旧内核（Chromium<79 无 min()）兜底 1vw。 */
.desktop {
    --s: 1vw;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #05091a center / cover no-repeat;
}

/* 门槛测 calc 内嵌 min 的组合形态（裸 min() 判定会放过不支持嵌套的旧 WebKit） */
@supports (bottom: calc(min(1vw, (100vh - 12.03vw) / 44.2) * 1)) {
    .desktop {
        --s: min(1vw, (100vh - 12.03vw) / 44.2);
    }
}

/* ============ 顶部导航：透明浮在背景上，无底色 ============ */
.top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.8vh 3vw;
}

.logo {
    height: 9vh;
    width: auto;
}

.contact {
    display: flex;
    align-items: center;
}

/* 间距用 margin 不用 flex gap：Chromium<84 不支持 flex gap */
.navBtn + .navBtn {
    margin-left: 1.4vw;
}

.navBtn {
    /* 先写 vh 兜底：Chromium<79 不认 clamp() */
    height: 5vh;
    height: clamp(38px, 5vh, 60px);
    width: auto;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.navBtn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ============ 居中主视觉：标题在下、人物居中在上（发丝盖字缘，按设计稿），
   头部嵌「收录全球/成人内容」中缝 ============ */
/* 主构图舞台：1920x1080 稿等效坐标系（100s x 56.25s），贴底居中；
   --s 的定义保证任何窗口比例下舞台都完整放进视口，
   舞台底边恒等于视口底边（出血沉扫码条的关系因此恒成立） */
.stage {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: calc(var(--s) * 100);
    height: calc(var(--s) * 56.25);
}

/* 全部按 1920x1080 稿的像素值 ÷19.2 转 --s，挂舞台坐标系 */
.titleImg {
    position: absolute;
    left: 50%;
    top: calc(var(--s) * 5.2);
    transform: translateX(-50%);
    width: calc(var(--s) * 70);
}

/* 人物：与 title 刚性绑定，top 为用户在 devtools 实调定稿值
   （12.82s = title top 5.2s + 7.62s，头顶落金字行中缝）；同舞台坐标系不随比例漂移 */
.heroImg {
    position: absolute;
    left: 50%;
    top: calc(var(--s) * 12.82);
    transform: translateX(-50%);
    height: calc(var(--s) * 34.5);
    width: auto;
}

/* ============ 国家分类内容卡：左右两组挟人物，顶沿低于丝带尾端最低点（图内 96.2%H）不相交 ============ */
.cardImg {
    position: absolute;
    bottom: calc(var(--s) * 12);
    width: calc(var(--s) * 34);
}

.cardLeft {
    left: calc(50% - var(--s) * 48.5);
    object-position: left bottom;
}

.cardRight {
    right: calc(50% - var(--s) * 48.5);
    object-position: right bottom;
}

/* ============ 底部整条：扫码入口 + 一键直达 + 双端下载（图内烤死） ============ */
.qrStrip {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

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

/* 二维码盖住条图内烤死的假码（白卡区约 x4.5% y4.1% w9.5% h76.8%） */
.qrBox {
    position: absolute;
    left: 4.5%;
    top: 4.1%;
    width: 9.5%;
    height: 76.8%;
    background: #fff;
    border-radius: 12%/14%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6%;
}

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