/* M01 抱抱屋 · 模块私有样式（类名前缀 .m01-） */

.m01-stage {
  --module-color: var(--c-peach);
  --module-color-soft: var(--c-cream-100);
  --module-color-soft: color-mix(in srgb, var(--c-peach) 18%, var(--c-cream-50));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--page-pad) var(--sp-6);
  min-height: 62vh;
  background: var(--module-color-soft);
  overflow: hidden;
}

.m01-tip {
  margin: 0;
  color: var(--c-ink-500);
  font-size: var(--fs-14);
  text-align: center;
}

.m01-bubble-layer {
  position: absolute;
  top: var(--sp-4);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.m01-bubble {
  max-width: 76%;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--c-ink-700);
  font-size: var(--fs-14);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  will-change: opacity, transform;
}

.m01-bubble.is-on {
  opacity: 1;
  transform: translateY(-8px);
}

.m01-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border: 0;
  padding: 0;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle at 50% 38%, var(--surface-1), var(--module-color-soft));
  box-shadow: var(--shadow-md);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.m01-avatar:active { transform: scale(0.96); }
.m01-avatar.is-hug { transform: scale(1.08); }

.m01-avatar-glow {
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, var(--c-peach), transparent 68%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.m01-avatar.is-hug .m01-avatar-glow { opacity: 0.42; }

.m01-avatar-face {
  font-family: var(--font-emoji);
  font-size: var(--fs-34);
  line-height: 1;
}

.m01-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.m01-count {
  color: var(--c-ink-700);
  font-size: var(--fs-14);
}

.m01-count-num {
  display: inline-block;
  font-family: var(--font-num);
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  color: var(--module-color);
  transition: transform var(--dur-base) var(--ease-spring);
}

.m01-count-num.is-bump { transform: scale(1.25); }

.m01-dots {
  display: flex;
  gap: var(--sp-2);
}

.m01-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--c-line);
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}

.m01-dot.is-on {
  background: var(--module-color);
  transform: scale(1.15);
}

.m01-btn { margin-top: auto; }

/* 完成弹窗里的「抱抱券」 */
.m01-coupon {
  text-align: center;
}

.m01-coupon-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--c-rose-300), var(--c-rose-500));
  margin-bottom: var(--sp-3);
}

.m01-coupon-title {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-900);
}

.m01-coupon-no {
  margin-top: var(--sp-1);
  font-family: var(--font-num);
  font-size: var(--fs-12);
  color: var(--c-ink-500);
}

.m01-coupon-desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
}