/* ================= 全局重置 ================= */
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; }

body, html {
  width: 100%;
  min-height: 100vh; /* 确保背景至少占满一屏 */
  
  /* 背景设置 */
  background-image: url('bg.png'); 
  background-repeat: repeat;       
  background-position: center;
  background-size: cover; /* 建议改为 cover 或 keep auto 视你背景图而定 */
  
  /* 布局核心 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: flex-start; /* 垂直方向从顶部开始，防止内容过长时无法滚动到顶部 */
  
  /* 滚动条设置 */
  overflow-y: auto;  /* 允许垂直滚动 */
  overflow-x: hidden; /* 禁止水平滚动 */
  
  padding: 0;
  margin: 0;
}

/* ================= 核心容器 ================= */
#poster-container {
  position: relative;
  
  /* --- 响应式核心设置 --- */
  width: 100%;          /* 默认占满宽度 (手机端生效) */
  max-width: 5550px;     /* 电脑端最大宽度限制 (类似于手机模拟器大小) */
  
  /* 保持 9:16 比例，高度自动根据宽度计算 */
  height: auto;
  aspect-ratio: 9 / 16;
  
  /* 视觉优化 */
  background: none;
  overflow: hidden;
  margin: 0 auto;       /* 确保在父容器中居中 */
}


/* ================= 内部元素 ================= */

/* 1. 顶部 GIF */
.scene-gif {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: 69%;
  height: auto;
  z-index: 1;
  background: #000; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* 2. 底部答题卡 */
.bottom-card {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  z-index: 2;
  display: block;
}

/* 3. 装饰文字 */
.collage-24 {
  position: absolute;
  top: 24%;
  left: 11%;
  width: 10%;
  transform: rotate(-8deg);
  z-index: 10;
}
.collage-2026 {
  position: absolute;
  top: 4%;
  right: 9%;
  width: 21%;
  transform: rotate(6deg);
  z-index: 10;
}

/* 4. 音乐图标 */
.music-btn {
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  z-index: 99;
  cursor: pointer;
  background: none;
  border: none;
}
.music-btn img { width: 80%; }

/* 5. 作答按钮 (左侧红点) */
.sticker-trigger {
    position: absolute;
    top: 62%;
    left: 2%;
    width: 21%;
    z-index: 20;
    cursor: pointer;
}
.sticker-trigger img { width: 100%; }

/* 🆕 6. 谜题按钮 (放在作答按钮右侧) */
.collage-riddle {
    position: absolute;
    top: 60%;   /* 比作答按钮稍微低一点，形成错落感 */
    left: 82%;  /* 紧挨着作答按钮 (2% + 21% + 间隙) */
    width: 13%; /* 大小适中 */
    z-index: 20;
    cursor: pointer;
}
.collage-riddle img {
    width: 100%;
    display: block;
    border-radius: 50%; /* 圆形 */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    transition: opacity 0.3s;
}

/* 🆕 7. 谜题文字 (悬浮显示) */
.riddle-text {
  display: none;
  position: absolute;
  top: 61%;   
  left: clamp(80%, 2.5vw, 80%);
  
  /* --- 核心修改：响应式字体 --- */
  /* 解释：最小11px(手机)，最大14px(电脑)，中间根据屏幕宽度自动缩放 */
  font-size: clamp(5px, 2.5vw, 19px);
  
  /* 建议改为 em 单位，这样内边距会随字体大小自动缩放 */
  padding: 0.1em 0em; 

  color: red;
  text-align: center;
  font-weight: bold;
  z-index: 21;
  cursor: pointer;
  white-space: nowrap;
}

/* 8. 橡皮擦 */
.eraser-btn {
    position: absolute;
    bottom: 2%;
    right: 2%;
    width: 15%;
    z-index: 100;
    cursor: pointer;
    transition: transform 0.2s;
}
.eraser-btn img {
    width: 100%;
    display: block;
}
.eraser-btn.on {
    transform: scale(1.1); 
    filter: drop-shadow(0 0 5px red); 
}

/* 9. 贴纸层 */
#stickerLayer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 50;
  pointer-events: none;
}
.mini-dot {
  position: absolute;
  width: 3%;
  aspect-ratio: 1/1;
  background-image: url('sticker-dot.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

/* 跟随鼠标的小红点（贴纸预览） */
/* 新的光标样式：光标跟随的小红点 */
#cursorDot {
  position: fixed;
  width: 32px;    /* 设定素材图的尺寸 */
  height: 32px;
  background-image: url('sticke1.png');  /* 使用你自己的素材 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  pointer-events: none; /* 确保不干扰点击 */
  display: none;        /* 默认不显示，只有在进入贴纸模式时才显示 */
  z-index: 10000;       /* 保证在最上层 */
  transform: translate(-50%, -50%); /* 以素材中心对准光标 */
}

/* 底部文字 */
.footer-text {
  position: absolute;
  bottom: 0.5%;
  width: 100%;
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-size: 10px;
  z-index: 99;
}