* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #0b1220; font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; }
#stage { position: fixed; inset: 0; contain: strict; }
canvas#game { position: absolute; inset: 0; display: block; touch-action: none; }

#perf { position: absolute; left: 12px; top: 154px; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; color: #fff; background: rgba(10,25,45,.55); padding: 4px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; }

#hud { position: absolute; top: 12px; right: 16px; text-align: right; color: #fff; text-shadow: 0 1px 3px rgba(10,30,60,.55); pointer-events: none; }
#dist { font-size: 34px; font-weight: 700; letter-spacing: 1px; }
#sub { font-size: 13px; opacity: .92; display: flex; gap: 10px; justify-content: flex-end; }

/* 双人模式：两块 HUD 各贴自己半屏的外侧；单人时 hud2 隐藏 */
#hud2 { display: none; }
#stage.duo #hud { right: calc(50% + 18px); }
#stage.duo #hud2 { display: block; position: absolute; top: 12px; right: 16px; text-align: right; color: #fff; text-shadow: 0 1px 3px rgba(10,30,60,.55); pointer-events: none; }
#dist2 { font-size: 34px; font-weight: 700; letter-spacing: 1px; }
#sub2 { font-size: 13px; opacity: .92; display: flex; gap: 10px; justify-content: flex-end; }

/* 双人：先阵亡者的半屏成绩横幅（不挡另一半的游戏画面） */
.deadBanner { position: absolute; top: 0; width: 50%; height: 100%; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; color: #fff; pointer-events: none;
  background: rgba(8, 20, 38, .42); }
#deadBanner1 { left: 0; }
#deadBanner2 { left: 50%; }
.deadBanner .deadTitle { font-size: 30px; font-weight: 800; letter-spacing: 2px; text-shadow: 0 4px 16px rgba(6,18,36,.8); }
.deadBanner .deadNum { font-size: min(14vh, 96px); font-weight: 900; line-height: 1.05; color: #FFC857;
  text-shadow: 0 6px 20px rgba(0,0,0,.55); animation: numPop .55s cubic-bezier(.2, 1.6, .4, 1); }
.deadBanner .deadUnit { font-size: 16px; opacity: .95; letter-spacing: 6px; }
.deadBanner .deadWait { margin-top: 10px; font-size: 13px; opacity: .8; }

.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; background: rgba(8, 20, 38, .74); color: #fff; padding: 24px; }
.overlay h1 { font-size: 34px; font-weight: 800; letter-spacing: 2px; }
.overlay p { font-size: 14px; line-height: 1.7; max-width: 640px; opacity: .95; }
.overlay .controls { font-size: 13px; opacity: .8; }
.btns { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.overlay button { font-size: 16px; padding: 10px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); background: #EF9F27; color: #14213a; font-weight: 700; cursor: pointer; }
.overlay button + button { background: transparent; color: #fff; }
.overlay button.accent { background: #5DCAA5; box-shadow: 0 8px 26px rgba(93,202,165,.4); }
.overlay button:disabled { opacity: .6; }
#overOverlay button { background: #5DCAA5; }

/* 游戏结束：成绩数字必须醒目 */
#overOverlay { gap: 6px; }
#overOverlay h1 { font-size: 42px; }
#overDist .num {
  display: block;
  font-size: min(22vh, 150px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 3px;
  color: #FFC857;
  text-shadow: 0 8px 26px rgba(0,0,0,.55), 0 0 56px rgba(255,200,87,.5);
  animation: numPop .55s cubic-bezier(.2, 1.6, .4, 1);
}
#overDist .unit { display: block; font-size: 20px; opacity: .95; letter-spacing: 8px; margin-top: 2px; }
#overDist .best { display: block; margin-top: 8px; font-size: 15px; color: #7EE8CF; letter-spacing: 1px; }
#overOverlay button { margin-top: 14px; }
@keyframes numPop { from { transform: scale(.35); opacity: 0; } }

/* 双人结算：左右成绩并列对比 */
#overDist .duoScores { display: flex; align-items: baseline; gap: 18px; justify-content: center; }
#overDist .duoScore {
  font-size: min(16vh, 110px); font-weight: 900; line-height: 1.05; letter-spacing: 2px;
  animation: numPop .55s cubic-bezier(.2, 1.6, .4, 1);
}
#overDist .duoScore i { font-style: normal; font-size: 20px; font-weight: 700; letter-spacing: 4px; margin-left: 4px; opacity: .9; }
#overDist .duoScore.p1 { color: #7EE8CF; text-shadow: 0 8px 26px rgba(0,0,0,.55); }
#overDist .duoScore.p2 { color: #C9B4F5; text-shadow: 0 8px 26px rgba(0,0,0,.55); }
#overDist .duoVs { font-size: 22px; font-weight: 800; opacity: .75; }

.overlay .primary { font-size: 20px; padding: 14px 46px; box-shadow: 0 8px 26px rgba(239,159,39,.42); }
.overlay .primary:active { transform: translateY(1px); }
.overlay .hint-line { font-size: 12px; opacity: .62; margin-top: 2px; }

/* 倒计时层：数字压在场景上，不挡鼠标；整块上移，避让画面下方的主角 */
#cdOverlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 17vh; pointer-events: none; z-index: 4; color: #fff; text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(8,20,38,.34), rgba(8,20,38,0) 58%); }
#cdNum { position: relative; isolation: isolate; font-size: min(30vh, 210px); font-weight: 900; line-height: 1; letter-spacing: 4px;
  text-shadow: 0 6px 18px rgba(6,18,36,.85), 0 0 3px rgba(6,18,36,.6), 0 0 70px rgba(10,30,60,.5); }
#cdNum::before {              /* 数字后面的暗色光晕：白雪背景上也看得清 */
  content: ''; position: absolute; left: 50%; top: 50%; width: 2em; height: 2em;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(8,20,38,.46) 0%, rgba(8,20,38,.24) 44%, rgba(8,20,38,0) 72%); }
#cdNum.go { color: #5DCAA5; font-size: min(20vh, 148px); letter-spacing: 2px; }
#cdHint { margin-top: 10px; font-size: 15px; letter-spacing: 3px; padding: 4px 14px; border-radius: 999px;
  background: rgba(8,20,38,.42); opacity: .95; text-shadow: 0 2px 12px rgba(10,30,60,.65); }
#cdNum.pop { animation: cdPop .6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes cdPop {
  0% { transform: scale(1.6); opacity: 0; }
  32% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: .96; }
}

.hidden { display: none !important; }

#camWrap { position: absolute; left: 12px; top: 12px; width: 176px; height: 132px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 2px 10px rgba(0,0,0,.45); background: #0b1220; z-index: 3; }
#camWrap video { display: none; }
#camCanvas { width: 100%; height: 100%; display: block; }

#tip { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); background: rgba(10,25,45,.7); color: #fff; font-size: 13px; padding: 6px 14px; border-radius: 999px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90%; }
#tip.show { opacity: 1; }

#rotateHint { display: none; position: absolute; inset: 0; background: #0b1220; color: #fff; align-items: center; justify-content: center; font-size: 16px; z-index: 9; }
@media (orientation: portrait) and (max-width: 820px) { #rotateHint { display: flex; } }