/* ===== 照顾小宝宝 ===== */

/* 舞台 */
.stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-bottom: 16px;
  padding: 18px 10px 8px;
  border-radius: 28px;
  background: linear-gradient(180deg, #eaf6ff 0%, #fff4e8 100%);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .03), 0 10px 28px rgba(120, 90, 150, .12);
  overflow: hidden;
  transition: background .5s;
}

/* 脏的时候舞台变灰一点 */
.stage.dirty { background: linear-gradient(180deg, #e2e6e8 0%, #efeee9 100%); }

.baby {
  width: min(60vw, 230px);
  margin: 0 auto;
  transition: transform .18s;
}

.baby-svg { width: 100%; height: auto; display: block; }

/* 眼睛 & 眨眼 */
.eye, .glint, .brow, .cheek {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .12s ease;
}

.baby.blink .eye { transform: scaleY(.12); }
.baby.blink .glint { opacity: 0; }

/* 哭泣时的眉毛（八字眉） */
.baby.sad .brow { transform: rotate(0deg) translateY(2px) scaleX(.9); }

/* 眼泪 */
.tear { opacity: 0; }
.baby.sad .tear-1 { animation: tearFall 1.3s ease-in infinite; animation-delay: 0s; }
.baby.sad .tear-2 { animation: tearFall 1.3s ease-in infinite; animation-delay: .45s; }

@keyframes tearFall {
  0% { opacity: 0; transform: translateY(-6px) scale(.6); }
  25% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(26px) scale(.85); }
}

/* 宝宝小动作：开心时轻轻晃 */
.baby.happy { animation: sway 2.4s ease-in-out infinite; }

@keyframes sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(-1.5deg); }
  75% { transform: translateY(-4px) rotate(1.5deg); }
}

/* 被照顾时跳一下 */
.baby.bounce { animation: bounce .45s cubic-bezier(.2, 1.6, .5, 1); }

@keyframes bounce {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-18px) scale(1.04); }
  70% { transform: translateY(0) scale(.97); }
  100% { transform: translateY(0) scale(1); }
}

/* 洗澡泡泡 */
.stage .bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 8px rgba(120, 200, 255, .6);
  pointer-events: none;
  animation: bubbleUp 1.1s ease-out forwards;
}

@keyframes bubbleUp {
  0% { opacity: 0; transform: translateY(0) scale(.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-70px) scale(1.1); }
}

/* 冒出的小表情（食物 / 爱心） */
.stage .pop-emoji {
  position: absolute;
  bottom: 32%;
  font-size: 30px;
  pointer-events: none;
  animation: popFloat .9s ease-out forwards;
}

@keyframes popFloat {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  25% { opacity: 1; transform: translateY(-10px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-80px) scale(1); }
}

.stage-tip {
  text-align: center;
  font-size: 14px;
  color: var(--gray);
  margin-top: 4px;
  min-height: 22px;
}

/* 状态条 */
.bars {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.bar-item {
  background: #fff;
  border-radius: 14px;
  padding: 8px 14px 10px;
  box-shadow: 0 4px 14px rgba(120, 90, 150, .09);
}

.bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray);
  margin-bottom: 5px;
}

.bar-track {
  height: 12px;
  border-radius: 999px;
  background: #f1eef6;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 80%;
  border-radius: 999px;
  transition: width .25s ease, background .3s;
}

.bar-fill.full { background: linear-gradient(90deg, #ffc46b, #ff9b3d); }
.bar-fill.mood { background: linear-gradient(90deg, #ffa3c7, #ff6fa5); }
.bar-fill.clean { background: linear-gradient(90deg, #8fd8ff, #4aa8e8); }

/* 低于 30 变红闪烁 */
.bar-fill.low {
  background: linear-gradient(90deg, #ff8a8a, #e74c3c) !important;
  animation: lowPulse .8s infinite;
}

@keyframes lowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* 操作按钮 */
.actions {
  width: 100%;
  max-width: 420px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.act-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 4px;
  border: 3px solid transparent;
  border-radius: 18px;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(120, 90, 150, .12);
  transition: .16s;
}

.act-btn:hover:not(:disabled) { transform: translateY(-4px); }

.act-btn:active:not(:disabled) { transform: scale(.94); }

.act-btn:disabled { opacity: .45; cursor: not-allowed; }

.act-emoji { font-size: 26px; line-height: 1.1; }

.act-name { font-size: 12px; font-weight: 800; color: var(--ink); }

.act-feed:hover:not(:disabled) { border-color: #ffcf8a; }
.act-drink:hover:not(:disabled) { border-color: #9fd9ff; }
.act-play:hover:not(:disabled) { border-color: #ffb0d0; }
.act-bath:hover:not(:disabled) { border-color: #a8e6c8; }

/* 需要照顾时按钮闪烁提醒 */
.act-btn.need {
  animation: needPulse 1s infinite;
}

@keyframes needPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(120, 90, 150, .12); }
  50% { box-shadow: 0 6px 22px rgba(231, 76, 60, .55); }
}

@media (max-width: 420px) {
  .act-emoji { font-size: 22px; }
  .act-name { font-size: 11px; }
  .actions { gap: 7px; }
  .act-btn { padding: 11px 2px; border-radius: 14px; }
  .stage { border-radius: 22px; }
}