/* ================================================================
   DEFAULT: 笔记本 & 台式机 (1280px ~ 1920px)
   原始 CSS，px 定位，在此区间显示正确
   ================================================================ */

body {
    background-color: #D4D4D4;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.locker-container {
    position: relative;
    min-height: 100vh;
    padding-top: clamp(50px, 6.94vw, 100px);
    overflow: hidden;
}

.locker-left {
    position: fixed;
    top: clamp(60px, 5.49vw, 79px);
    left: clamp(10px, 1.67vw, 24px);
    bottom: clamp(80px, 7.99vw, 115px);
    z-index: 10;
}

.left-image {
    max-height: 100%;
    width: auto;
}

.locker-right {
    position: absolute;
    top: clamp(80px, 7.43vw, 107px);
    left: clamp(300px, 38.19vw, 550px);
    right: 0;
    bottom: clamp(80px, 7.43vw, 107px);
    min-height: clamp(400px, 48.61vw, 700px);
}

.image-stack {
    position: relative;
    width: min(100%, calc(100vw - clamp(200px, 34.72vw, 500px)));
    height: 100%;
}

.stack-item {
    position: absolute;
    z-index: 1;
}

.stack-item img {
    display: block;
}

/* Image positions — original px values (design reference: 1920×1080) */
.img-1 { top: 20px; left: 50px; transform: rotate(-10deg); }
.img-1 img { width: clamp(105px, 11.11vw, 160px); }

.img-2 { top: 50px; left: 200px; transform: rotate(15deg); }
.img-2 img { width: clamp(115px, 11.81vw, 170px); }

.img-3 { top: 30px; left: 380px; transform: rotate(-18deg); }
.img-3 img { width: clamp(100px, 10.42vw, 150px); }

.img-4 { top: 80px; left: 520px; transform: rotate(8deg); }
.img-4 img { width: clamp(110px, 11.46vw, 165px); }

.img-5 { top: 60px; left: 680px; transform: rotate(-22deg); }
.img-5 img { width: clamp(90px, 9.72vw, 140px); }

.img-6 { top: 120px; left: 800px; transform: rotate(12deg); }
.img-6 img { width: clamp(100px, 10.76vw, 155px); }

.img-7 { top: 150px; left: 80px; transform: rotate(20deg); }
.img-7 img { width: clamp(105px, 11.11vw, 160px); }

.img-8 { top: 180px; left: 250px; transform: rotate(-8deg); }
.img-8 img { width: clamp(115px, 12.15vw, 175px); }

.img-9 { top: 160px; left: 420px; transform: rotate(16deg); }
.img-9 img { width: clamp(95px, 10.07vw, 145px); }

.img-10 { top: 210px; left: 560px; transform: rotate(-14deg); }
.img-10 img { width: clamp(100px, 10.76vw, 155px); }

.img-11 { top: 190px; left: 720px; transform: rotate(22deg); }
.img-11 img { width: clamp(90px, 9.72vw, 140px); }

.img-12 { top: 240px; left: 850px; transform: rotate(-6deg); }
.img-12 img { width: clamp(110px, 11.46vw, 165px); }

.img-13 { top: 280px; left: 60px; transform: rotate(-15deg); }
.img-13 img { width: clamp(100px, 10.76vw, 155px); }

.img-14 { top: 310px; left: 220px; transform: rotate(18deg); }
.img-14 img { width: clamp(105px, 11.11vw, 160px); }

.img-15 { top: 290px; left: 390px; transform: rotate(-9deg); }
.img-15 img { width: clamp(115px, 11.81vw, 170px); }

.img-16 { top: 340px; left: 540px; transform: rotate(11deg); }
.img-16 img { width: clamp(100px, 10.42vw, 150px); }

.img-17 { top: 320px; left: 700px; transform: rotate(-20deg); }
.img-17 img { width: clamp(95px, 10.07vw, 145px); }

.img-18 { top: 370px; left: 830px; transform: rotate(7deg); }
.img-18 img { width: clamp(100px, 10.76vw, 155px); }

.img-19 { top: 400px; left: 40px; transform: rotate(24deg); }
.img-19 img { width: clamp(110px, 11.46vw, 165px); }

.img-20 { top: 430px; left: 190px; transform: rotate(-12deg); }
.img-20 img { width: clamp(100px, 10.42vw, 150px); }

.img-21 { top: 410px; left: 360px; transform: rotate(14deg); }
.img-21 img { width: clamp(105px, 11.11vw, 160px); }

.img-22 { top: 460px; left: 520px; transform: rotate(-17deg); }
.img-22 img { width: clamp(95px, 10.07vw, 145px); }

.img-23 { top: 440px; left: 680px; transform: rotate(19deg); }
.img-23 img { width: clamp(100px, 10.76vw, 155px); }

.img-24 { top: 490px; left: 820px; transform: rotate(-5deg); }
.img-24 img { width: clamp(105px, 11.11vw, 160px); }

.img-25 { top: 520px; left: 70px; transform: rotate(-25deg); }
.img-25 img { width: clamp(95px, 10.07vw, 145px); }

.img-26 { top: 550px; left: 230px; transform: rotate(13deg); }
.img-26 img { width: clamp(100px, 10.76vw, 155px); }

.img-27 { top: 530px; left: 400px; transform: rotate(-11deg); }
.img-27 img { width: clamp(110px, 11.46vw, 165px); }

.img-28 { top: 580px; left: 550px; transform: rotate(21deg); }
.img-28 img { width: clamp(100px, 10.42vw, 150px); }

.img-29 { top: 560px; left: 710px; transform: rotate(-8deg); }
.img-29 img { width: clamp(90px, 9.72vw, 140px); }

.img-30 { top: 610px; left: 840px; transform: rotate(16deg); }
.img-30 img { width: clamp(100px, 10.76vw, 155px); }
.img-31 { top: 280px; left: 750px; transform: rotate(-22deg); }
.img-31 img { width: clamp(95px, 10.07vw, 145px); }
.img-32 { top: 520px; left: 620px; transform: rotate(12deg); }
.img-32 img { width: clamp(115px, 11.81vw, 170px); }
.img-33 { top: 180px; left: 920px; transform: rotate(-18deg); }
.img-33 img { width: clamp(105px, 11.11vw, 160px); }
.img-34 { top: 550px; left: 150px; transform: rotate(20deg); }
.img-34 img { width: clamp(100px, 10.42vw, 150px); }
.img-35 { top: 380px; left: 480px; transform: rotate(-8deg); }
.img-35 img { width: clamp(110px, 11.46vw, 165px); }

/* Hover scale effect */
.stack-item:hover {
    z-index: 100;
}

.stack-item:hover img {
    transform: scale(2.5);
    transition: transform 0.3s ease;
}

/* Fullscreen canvas */
#fullscreenCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#fullscreenCanvas.active {
    display: flex;
}

#fullscreenCanvas img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* ================================================================
   大屏适配：> 1920px (2560×1440 / 3840×2160 等)
   - image-stack 填满 locker-right
   - 全部 35 张图片 top/left 从 px 转为 %（参考 1370×866）
   - 图片宽度上限等比放大（×1.5），适配大屏
   ================================================================ */
@media (min-width: 1921px) {
    /* --- 容器等比放大，移除 max 限制 --- */
    .locker-left {
        left: 2.5vw;
    }

    .left-image {
        max-width: 30vw;
    }

    .locker-right {
        left: 35vw;
        right: 5vw;
    }

    .image-stack {
        width: 100%;
    }

    /* --- 图片位置：px → % --- */
    .img-1 { top: 2.31%; left: 3.65%; }
    .img-2 { top: 5.77%; left: 14.60%; }
    .img-3 { top: 3.46%; left: 27.74%; }
    .img-4 { top: 9.24%; left: 37.96%; }
    .img-5 { top: 6.93%; left: 49.64%; }
    .img-6 { top: 13.86%; left: 58.39%; }
    .img-7 { top: 17.32%; left: 5.84%; }
    .img-8 { top: 20.79%; left: 18.25%; }
    .img-9 { top: 18.48%; left: 30.66%; }
    .img-10 { top: 24.25%; left: 40.88%; }
    .img-11 { top: 21.94%; left: 52.55%; }
    .img-12 { top: 27.71%; left: 62.04%; }
    .img-13 { top: 32.33%; left: 4.38%; }
    .img-14 { top: 35.80%; left: 16.06%; }
    .img-15 { top: 33.49%; left: 28.47%; }
    .img-16 { top: 39.26%; left: 39.42%; }
    .img-17 { top: 36.95%; left: 51.09%; }
    .img-18 { top: 42.73%; left: 60.58%; }
    .img-19 { top: 46.19%; left: 2.92%; }
    .img-20 { top: 49.65%; left: 13.87%; }
    .img-21 { top: 47.34%; left: 26.28%; }
    .img-22 { top: 53.12%; left: 37.96%; }
    .img-23 { top: 50.81%; left: 49.64%; }
    .img-24 { top: 56.58%; left: 59.85%; }
    .img-25 { top: 60.05%; left: 5.11%; }
    .img-26 { top: 63.51%; left: 16.79%; }
    .img-27 { top: 61.20%; left: 29.20%; }
    .img-28 { top: 66.97%; left: 40.15%; }
    .img-29 { top: 64.67%; left: 51.82%; }
    .img-30 { top: 70.44%; left: 61.31%; }
    .img-31 { top: 32.33%; left: 54.74%; }
    .img-32 { top: 60.05%; left: 45.26%; }
    .img-33 { top: 20.79%; left: 67.15%; }
    .img-34 { top: 63.51%; left: 10.95%; }
    .img-35 { top: 43.88%; left: 35.04%; }

    /* --- 图片宽度上限等比放大（×2.5，适配大屏） --- */
    .img-1 img  { width: clamp(105px, 11.11vw, 400px); }
    .img-2 img  { width: clamp(115px, 11.81vw, 425px); }
    .img-3 img  { width: clamp(100px, 10.42vw, 375px); }
    .img-4 img  { width: clamp(110px, 11.46vw, 412px); }
    .img-5 img  { width: clamp(90px,  9.72vw,  350px); }
    .img-6 img  { width: clamp(100px, 10.76vw, 387px); }
    .img-7 img  { width: clamp(105px, 11.11vw, 400px); }
    .img-8 img  { width: clamp(115px, 12.15vw, 437px); }
    .img-9 img  { width: clamp(95px,  10.07vw, 362px); }
    .img-10 img { width: clamp(100px, 10.76vw, 387px); }
    .img-11 img { width: clamp(90px,  9.72vw,  350px); }
    .img-12 img { width: clamp(110px, 11.46vw, 412px); }
    .img-13 img { width: clamp(100px, 10.76vw, 387px); }
    .img-14 img { width: clamp(105px, 11.11vw, 400px); }
    .img-15 img { width: clamp(115px, 11.81vw, 425px); }
    .img-16 img { width: clamp(100px, 10.42vw, 375px); }
    .img-17 img { width: clamp(95px,  10.07vw, 362px); }
    .img-18 img { width: clamp(100px, 10.76vw, 387px); }
    .img-19 img { width: clamp(110px, 11.46vw, 412px); }
    .img-20 img { width: clamp(100px, 10.42vw, 375px); }
    .img-21 img { width: clamp(105px, 11.11vw, 400px); }
    .img-22 img { width: clamp(95px,  10.07vw, 362px); }
    .img-23 img { width: clamp(100px, 10.76vw, 387px); }
    .img-24 img { width: clamp(105px, 11.11vw, 400px); }
    .img-25 img { width: clamp(95px,  10.07vw, 362px); }
    .img-26 img { width: clamp(100px, 10.76vw, 387px); }
    .img-27 img { width: clamp(110px, 11.46vw, 412px); }
    .img-28 img { width: clamp(100px, 10.42vw, 375px); }
    .img-29 img { width: clamp(90px,  9.72vw,  350px); }
    .img-30 img { width: clamp(100px, 10.76vw, 387px); }
    .img-31 img { width: clamp(95px,  10.07vw, 362px); }
    .img-32 img { width: clamp(115px, 11.81vw, 425px); }
    .img-33 img { width: clamp(105px, 11.11vw, 400px); }
    .img-34 img { width: clamp(100px, 10.42vw, 375px); }
    .img-35 img { width: clamp(110px, 11.46vw, 412px); }
}


/* ================================================================
   Tablet 适配：≤ 1024px
   - 缩减左侧图片占宽、调窄 locker-right left
   - image-stack 改为 100% 填满 locker-right
   - 35 张图位置和宽度都从 px → 容器相对 %（参考 1370×866）
   ================================================================ */
@media (max-width: 1024px) {
    /* --- 容器调整 --- */
    .left-image {
        max-width: clamp(100px, 15vw, 200px);
    }

    .locker-right {
        left: clamp(140px, 20vw, 300px);
        overflow: hidden;
    }

    .image-stack {
        width: 100%;
    }

    /* --- 图片位置 + 宽度：px → 容器相对 % --- */
    .img-1  { top: 2.31%;  left: 3.65%;  }
    .img-1  img { width: 11.68%; }
    .img-2  { top: 5.77%;  left: 14.60%; }
    .img-2  img { width: 12.41%; }
    .img-3  { top: 3.46%;  left: 27.74%; }
    .img-3  img { width: 10.95%; }
    .img-4  { top: 9.24%;  left: 37.96%; }
    .img-4  img { width: 12.04%; }
    .img-5  { top: 6.93%;  left: 49.64%; }
    .img-5  img { width: 10.22%; }
    .img-6  { top: 13.86%; left: 58.39%; }
    .img-6  img { width: 11.31%; }
    .img-7  { top: 17.32%; left: 5.84%;  }
    .img-7  img { width: 11.68%; }
    .img-8  { top: 20.79%; left: 18.25%; }
    .img-8  img { width: 12.77%; }
    .img-9  { top: 18.48%; left: 30.66%; }
    .img-9  img { width: 10.58%; }
    .img-10 { top: 24.25%; left: 40.88%; }
    .img-10 img { width: 11.31%; }
    .img-11 { top: 21.94%; left: 52.55%; }
    .img-11 img { width: 10.22%; }
    .img-12 { top: 27.71%; left: 62.04%; }
    .img-12 img { width: 12.04%; }
    .img-13 { top: 32.33%; left: 4.38%;  }
    .img-13 img { width: 11.31%; }
    .img-14 { top: 35.80%; left: 16.06%; }
    .img-14 img { width: 11.68%; }
    .img-15 { top: 33.49%; left: 28.47%; }
    .img-15 img { width: 12.41%; }
    .img-16 { top: 39.26%; left: 39.42%; }
    .img-16 img { width: 10.95%; }
    .img-17 { top: 36.95%; left: 51.09%; }
    .img-17 img { width: 10.58%; }
    .img-18 { top: 42.73%; left: 60.58%; }
    .img-18 img { width: 11.31%; }
    .img-19 { top: 46.19%; left: 2.92%;  }
    .img-19 img { width: 12.04%; }
    .img-20 { top: 49.65%; left: 13.87%; }
    .img-20 img { width: 10.95%; }
    .img-21 { top: 47.34%; left: 26.28%; }
    .img-21 img { width: 11.68%; }
    .img-22 { top: 53.12%; left: 37.96%; }
    .img-22 img { width: 10.58%; }
    .img-23 { top: 50.81%; left: 49.64%; }
    .img-23 img { width: 11.31%; }
    .img-24 { top: 56.58%; left: 59.85%; }
    .img-24 img { width: 11.68%; }
    .img-25 { top: 60.05%; left: 5.11%;  }
    .img-25 img { width: 10.58%; }
    .img-26 { top: 63.51%; left: 16.79%; }
    .img-26 img { width: 11.31%; }
    .img-27 { top: 61.20%; left: 29.20%; }
    .img-27 img { width: 12.04%; }
    .img-28 { top: 66.97%; left: 40.15%; }
    .img-28 img { width: 10.95%; }
    .img-29 { top: 64.67%; left: 51.82%; }
    .img-29 img { width: 10.22%; }
    .img-30 { top: 70.44%; left: 61.31%; }
    .img-30 img { width: 11.31%; }
    .img-31 { top: 32.33%; left: 54.74%; }
    .img-31 img { width: 10.58%; }
    .img-32 { top: 60.05%; left: 45.26%; }
    .img-32 img { width: 12.41%; }
    .img-33 { top: 20.79%; left: 67.15%; }
    .img-33 img { width: 11.68%; }
    .img-34 { top: 63.51%; left: 10.95%; }
    .img-34 img { width: 10.95%; }
    .img-35 { top: 43.88%; left: 35.04%; }
    .img-35 img { width: 12.04%; }
}