.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #9fd9ff, #d9f5c4);
}
.hud {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 24rpx 10rpx;
}
.pill {
  background: rgba(255,255,255,0.9);
  border-radius: 999rpx;
  padding: 8rpx 28rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #2f6f4f;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.pill.miss { color: #e53935; }
.canvas-wrap {
  flex: 1;
  margin: 10rpx 20rpx;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(30,90,130,.25);
}
.game-canvas { width: 100%; height: 100%; }
.howto {
  text-align: center;
  font-size: 24rpx;
  color: #4a6a4a;
  padding: 14rpx 20rpx 30rpx;
}

.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(20,40,20,.55);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  width: 580rpx;
  background: #fff;
  border-radius: 28rpx;
  padding: 44rpx 36rpx 34rpx;
  text-align: center;
  box-shadow: 0 20rpx 60rpx rgba(0,0,0,.25);
}
.modal-title { font-size: 36rpx; font-weight: 700; color: #2f6f4f; }
.modal-body { font-size: 26rpx; color: #5a6a5a; line-height: 2; margin-top: 16rpx; }
.big-score { font-size: 88rpx; font-weight: 800; color: #4fc3f7; margin: 10rpx 0; }
.r-line { font-size: 26rpx; color: #b8860b; }
.modal-btns { display: flex; gap: 20rpx; margin-top: 30rpx; }
.modal-btns .btn { flex: 1; }