body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* 防止出现滚动条 */
    background-color: #fcfcfc; /* 设置一个更清新的浅色背景，配合阳光氛围 */
}

#canvas-container {
    width: 100vw;
    height: 100vh;
    display: block;
    position: absolute; /* 相对于 body 定位 */
    top: 0;
    left: 0;
    z-index: 1; /* 3D 画布在下层 */
}

canvas {
    display: block;
    outline: none;
}

/* 页面上方自适应透明覆盖层样式 */
#overlay-ui {
    position: fixed; /* 始终相对于屏幕定位 */
    top: 0;
    left: 15vw; /* 居中：(100vw - 70vw) / 2 = 15vw */
    width: 70vw;  /* 自适应：页面宽度的 70% */
    height: 45vh; /* 自适应：页面高度的 30% */
    background: transparent; /* 完全无颜色，透明 */
    z-index: 10; /* UI 层在上层 */
    
    /* 辅助定位内部内容 (示例) */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    pointer-events: none; /* 重要：允许点击穿透该 div，仍然可以操作下方的 3D 模型 */
}

/* 恢复所有 a 标签的点击和跳转功能 */
#overlay-ui a {
    pointer-events: auto; /* 允许鼠标点击交互 */
    text-decoration: none; /* 移除超链接默认的下划线 */
    cursor: pointer; /* 鼠标悬浮时显示小手图标 */
    display: inline-block; /* 确保图片和文字能正常排版 */
}

/* 如果你的图片或文字在点击时有边框，可以加上这句清除 */
#overlay-ui a img {
    border: none;
}


.group6 {
    position: absolute;
    top: 25%; 
    left: 8%;
    width: 9.1%; 
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-35deg); 
    z-index: 10; 
    /* 新增：去除链接下划线，确保点击区域正常 */
    text-decoration: none;
    cursor: pointer;
}

.group6 img {
    top: 0;
    width: 64%;
    height: auto;
    display: block;
}

.shop-text {
    margin-top: 15px; 
    left: 77%;
    font-family: 'Abril Display', cursive;
    font-size: 45px;
    color: #563114;
    white-space: nowrap;
    filter: drop-shadow(10px 10px 10px rgb(255, 255, 255));
}

.group3 {
    position: absolute;
    top: 15%; 
    left: 93%;
    width: 8.4%; 
    transform: translateX(-50%);
    display: flex;
    transform: rotate(-10deg); 
    flex-direction: column;
    align-items: center;
    z-index: 10; 
    /* 新增：去除链接下划线，确保点击区域正常 */
    text-decoration: none;
    cursor: pointer;
}

.group3 img {
    top: 0;
    width: 63%;
    height: auto;
    display: block;
}

.about-text {
    margin-top: 15px; 
    left: 60%;
    font-family: 'Abril Display', cursive;
    font-size: 41px;
    color: #4b4734;
    white-space: nowrap;
    filter: drop-shadow(10px 10px 10px rgb(255, 255, 255));
}

.group2 {
    position: absolute;
    top: 48%; 
    left: 74%;
    width: 9.6%; 
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10; 
    transform: rotate(15deg); 
    /* 新增：去除链接下划线，确保点击区域正常 */
    text-decoration: none;
    cursor: pointer;
}

.group2 img {
    top: 0;
    width: 60%;
    height: auto;
    display: block;
}

.cart-text {
    margin-top: 15px; 
    left: 75%;
    font-family: 'Abril Display', cursive;
    font-size: 47px;
    color: #5b3f3c;
    white-space: nowrap;
    filter: drop-shadow(10px 10px 10px rgb(255, 255, 255));
}