/* 手机H5：设计稿画布 2160x3840，整体等比缩放居中（PC/手机/横竖屏均自适应） */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { background: linear-gradient(180deg, #bfe3f7 0%, #d8f0fb 60%, #eaf7ff 100%);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; }

#stage { position: absolute; width: 2160px; height: 3840px; transform-origin: 0 0; }
.page { position: absolute; left: 0; top: 0; width: 2160px; height: 3840px; }
.full { position: absolute; left: 0; top: 0; width: 2160px; height: 3840px; display: block; }
.card { position: absolute; left: 117px; top: 371px; width: 1926px; height: 2626px; display: block; }

/* —— 页1 信息填写（背景图 + 独立切图，坐标由切图匹配得到，像素级对齐设计稿） —— */
.join-title { position: absolute; left: 452px; top: 776px; width: 1269px; height: 483px; }
.join-input-img { position: absolute; left: 251px; top: 1503px; width: 1620px; height: 294px; }
#nickname {
  position: absolute; left: 300px; top: 1525px; width: 1560px; height: 256px;
  border: none; outline: none; background: transparent; text-align: center;
  font-size: 110px; font-family: inherit; color: #6b4a1e; font-weight: 700;
  line-height: 256px; padding: 0; border-radius: 130px;
}
#nickname::placeholder { color: #cfa96e; opacity: 1; font-weight: 700; }
.join-btn {
  position: absolute; left: 226px; top: 1892px; width: 1708px; height: 373px;
  cursor: pointer; transition: transform .08s, filter .08s;
}
.join-btn:active { transform: scale(.97); filter: brightness(.93); }
.join-tip {
  position: absolute; left: 0; right: 0; top: 2280px; text-align: center;
  font-size: 54px; color: #d05428; font-weight: 700;
}

/* —— 页2 摇一摇（背景图 + 中间框 + 二级标题切图 + 晃动手机动画图标） ——
   标题切图实测坐标 (379,686) 1403x459；图标 (626,1358) 959x1271 */
.race-title { position: absolute; left: 379px; top: 686px; width: 1403px; height: 459px; }
.race-status {
  position: absolute; left: 0; right: 0; top: 1170px; text-align: center;
  font-size: 86px; font-weight: 800; color: #b08a54; letter-spacing: 3px;
  transition: transform .12s, color .12s;
}
.race-status.hit { transform: scale(1.12); color: #e07800; }
/* 比赛剩余时间（卡片顶部空白区，居中） */
.race-timer {
  position: absolute; left: 0; right: 0; top: 480px; text-align: center;
  font-size: 76px; font-weight: 800; color: #c98f3f; letter-spacing: 2px;
}
.race-icon-wrap {
  position: absolute; left: 626px; top: 1358px; width: 959px; height: 1271px;
  transform-origin: 50% 85%;
  animation: rock 1.1s ease-in-out infinite;
}
.race-icon { width: 100%; height: 100%; display: block; }
.race-icon-wrap.fast { animation: rockFast .32s ease-in-out infinite; }
@keyframes rock {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(7deg) translateY(-42px); }
}
@keyframes rockFast {
  0%, 100% { transform: rotate(-17deg) translate(-20px, 0) scale(1.03); }
  50%      { transform: rotate(17deg) translate(20px, -75px) scale(1.03); }
}

/* —— 页3 结果 —— */
.res-box {
  position: absolute; left: 117px; top: 371px; width: 1926px; height: 2626px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: 300px;
}
.res-medal { width: 300px; animation: pop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { 0%{transform:scale(.3);opacity:0} 100%{transform:scale(1);opacity:1} }
.res-line1 { margin-top: 40px; font-size: 96px; font-weight: 900; color: #b06f1c; text-align: center; }
.res-gift { margin-top: 50px; font-size: 88px; font-weight: 900; color: #ff5f2e; animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: .5; } }
.res-note { margin-top: 40px; font-size: 56px; color: #a07f52; text-align: center; }
.res-line2 { margin-top: 200px; font-size: 120px; font-weight: 900; color: #b06f1c; text-align: center; }
.res-rank { margin-top: 60px; font-size: 80px; color: #6b4a1e; font-weight: 700; text-align: center; }
.res-rank span { font-size: 150px; color: #e07800; }
.res-prize {
  margin-top: 110px; width: 1400px; padding: 60px 50px; border-radius: 60px;
  background: rgba(255,255,255,.7); border: 4px dashed #e0b96a; text-align: center;
}
.res-prize-title { font-size: 78px; font-weight: 900; color: #e07800; }
.res-prize-body { margin-top: 30px; font-size: 56px; color: #8a6c3e; line-height: 1.8; }
.res-next { margin-top: auto; margin-bottom: 220px; font-size: 58px; color: #b39a74; text-align: center; }