* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}

/* ===== 下面是新增的加载页样式 ===== */

/* 加载页全屏覆盖，层级最高 */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;          /* 数字越大越靠上，盖住 canvas */
  background: #000;       /* 防止底图没铺满时露黑边 */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; /* 🌟 新增：鼠标移上去变成小手，提示用户可以点击 */
}

/* 底图铺满全屏 */
#loading-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 保持比例铺满，可改成 contain */
  z-index: 0;             /* 最底层 */
}

/* 三个视频都铺满全屏，初始隐藏，由 JS 控制显示 */
.loading-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;             /* 盖在底图上面 */
  display: none;          /* 一开始都不显示 */
  background: transparent;
}

/* 圆形按钮，先放在左上角 */
.circle-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); /* 半透明白，后续可改透明 */
  border: 2px solid white;
  z-index: 10;            /* 按钮在最上层 */
  cursor: pointer;
}

/* 黑屏遮罩，初始透明，不挡点击 */
#black-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  opacity: 0;
  pointer-events: none;   /* 不挡住鼠标事件 */
  transition: opacity 0.5s ease; /* 0.5 秒淡入淡出 */
  z-index: 2000;          /* 比加载页还高 */
}

/* ===== 点击模型后弹出的图片层 ===== */
#image-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  display: none;              /* 默认隐藏 */
  justify-content: center;
  align-items: center;
  z-index: 3000;              /* 比黑屏遮罩还高 */
  cursor: pointer;            /* 点击任意位置关闭 */
}

/* 显示弹窗时用 flex 居中 */
#image-popup.show {
  display: flex;
}

#popup-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

/* ===== 🌟 新增：掉落失败弹窗 ===== */
#lose-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;              /* 默认隐藏 */
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.75);
  z-index: 4000;              /* 比图片弹窗更高 */
  pointer-events: none;       /* 让点击穿透到 canvas，便于点击左键消失 */
}

#lose-popup.show {
  display: flex;
}

#lose-popup img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: none;
}

/* ===== 🌟 任务提示图片（右下角放大版） ===== */
#hint-popup {
  position: fixed;
  bottom: 40px;           /* 🌟 改为 bottom：贴近底部 */
  right: 40px;            /* 保持贴近右侧 */
  display: none;          /* 默认隐藏 */
  z-index: 2500;
  pointer-events: none;   /* 不挡鼠标 */
}

#hint-popup.show {
  display: block;
}

#hint-popup img {
  max-width: 1500px;       /* 🌟 放大：从 260px 改为 500px */
  max-height: 1500px;      /* 🌟 放大：从 260px 改为 500px */
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.8)); /* 阴影稍微加重一点，让放大的图片更有立体感 */
}

/* ===== 🌟 收集图（与 8_提示.png 位置/大小相同，显示在其上） ===== */
#collection-popup {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 2600;              /* 高于 #hint-popup 的 2500 */
  pointer-events: none;       /* 不挡鼠标 */
}

#collection-popup img {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 1500px;           /* 与 #hint-popup img 一致 */
  max-height: 1500px;
  object-fit: contain;
  filter: none;
}

/* ===== 🌟 成功提示（收集全部道具后弹出，点击左键关闭） ===== */
#success-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;              /* 默认隐藏 */
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.75);
  z-index: 3500;              /* 高于 image-popup(3000) 和 collection-popup(2600) */
  cursor: pointer;            /* 提示可点击关闭 */
}

#success-popup.show {
  display: flex;
}

#success-popup img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

/* ===== 🌟 全屏白色遮罩（靠近目标渐白） ===== */
#white-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  opacity: 0;                /* 由 JS 控制 */
  pointer-events: none;      /* 不挡鼠标 */
  z-index: 3200;             /* 高于 collection-popup(2600) / image-popup(3000) */
  transition: opacity 0.08s linear; /* 平滑，避免数值跳变产生闪烁 */
}

/* ===== 🌟 完全变白后弹出的 10_成功.png ===== */
#final-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 3300;             /* 高于 white-overlay(3200) */
  pointer-events: none;      /* 让鼠标穿透，不影响后续交互 */
}

#final-popup.show {
  display: flex;
}

#final-popup img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: none;
}