/* ============ 迷你花园 · 主页 ============ */
.page {
  padding-bottom: 40rpx;
  overflow: hidden;
}

/* ---- 顶栏 ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 28rpx 8rpx;
}
.topbar .coin { color: #b8860b; font-weight: 600; }
.topbar .clock { color: #fff; font-size: 26rpx; text-shadow: 0 1rpx 6rpx rgba(0,80,120,.35); }
.topbar .shop { color: #2f6f4f; font-weight: 600; }

/* ---- 花园舞台 ---- */
.stage {
  position: relative;
  height: 620rpx;
  margin: 6rpx 20rpx 0;
  border-radius: 30rpx;
  overflow: hidden;
  background: linear-gradient(180deg, #9fd9ff 0%, #c8ecff 55%, #d9f5c4 100%);
  box-shadow: inset 0 -10rpx 30rpx rgba(60,140,60,.15);
}
.stage.night {
  background: linear-gradient(180deg, #1d2b4d 0%, #2c3e63 55%, #31485f 100%);
}

.sun {
  position: absolute;
  top: 46rpx;
  right: 56rpx;
  width: 84rpx;
  height: 84rpx;
  border-radius: 50%;
  background: #ffd54f;
  box-shadow:
    0 -40rpx 0 0 #ffe57f, 0 40rpx 0 0 #ffe57f,
    40rpx 0 0 0 #ffe57f, -40rpx 0 0 0 #ffe57f,
    28rpx -28rpx 0 0 #ffe57f, -28rpx 28rpx 0 0 #ffe57f,
    28rpx 28rpx 0 0 #ffe57f, -28rpx -28rpx 0 0 #ffe57f;
  animation: spin 24s linear infinite;
}
.moon {
  position: absolute;
  top: 56rpx;
  right: 70rpx;
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: -22rpx 8rpx 0 2rpx #1d2b4d;
}
@keyframes spin { to { transform: rotate(360deg); } }

.cloud {
  position: absolute;
  width: 90rpx;
  height: 34rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 30rpx;
  opacity: 0.9;
}
.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}
.cloud::before { width: 44rpx; height: 44rpx; top: -22rpx; left: 14rpx; }
.cloud::after { width: 32rpx; height: 32rpx; top: -14rpx; right: 12rpx; }
.c1 { top: 90rpx; left: 40rpx; animation: drift 26s linear infinite; }
.c2 { top: 170rpx; left: 320rpx; transform: scale(0.7); animation: drift 34s linear infinite; }
.c3 { top: 40rpx; left: 300rpx; transform: scale(0.55); animation: drift 40s linear infinite; }
.stage.night .cloud { background: rgba(200,210,230,0.35); opacity: .6; }
.stage.night .cloud::before, .stage.night .cloud::after { background: rgba(200,210,230,0.35); }
@keyframes drift {
  from { transform: translateX(-60rpx); }
  to { transform: translateX(720rpx); }
}

/* ---- 花盆行 ---- */
.pots {
  position: absolute;
  bottom: 52rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.slot {
  width: 220rpx;
  text-align: center;
  padding-bottom: 8rpx;
  border-radius: 20rpx;
  transition: transform .2s;
}
.slot-active {
  transform: translateY(-16rpx);
  background: radial-gradient(ellipse at center bottom, rgba(255,255,255,.55), transparent 70%);
}
.pname {
  font-size: 24rpx;
  color: #3a5a3a;
  font-weight: 600;
  margin-top: 6rpx;
  text-shadow: 0 1rpx 0 #fff;
}
.stagelabel { font-size: 20rpx; color: #6b8f6b; margin-top: 2rpx; }
.sick-tag {
  display: inline-block;
  margin-top: 4rpx;
  padding: 2rpx 14rpx;
  font-size: 20rpx;
  color: #fff;
  background: #e57373;
  border-radius: 999rpx;
}

/* ---- 植物主体 ---- */
.plant {
  position: relative;
  width: 220rpx;
  height: 320rpx;
  margin: 0 auto;
  transform-origin: 50% 100%;
  animation: sway 3.4s ease-in-out infinite;
}
.plant.sick { animation: shake 0.4s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes shake { 0%,100% { transform: translateX(-3rpx); } 50% { transform: translateX(3rpx); } }

/* 种子 */
.seed {
  position: absolute;
  bottom: 92rpx;
  left: 50%;
  margin-left: -17rpx;
  width: 34rpx;
  height: 24rpx;
  border-radius: 50% 50% 62% 62%;
  background: linear-gradient(180deg, #a0743a, #6b4a2b);
  box-shadow: inset 3rpx 3rpx 4rpx rgba(255,255,255,.35);
  animation: breathe 2s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* 嫩芽 */
.sprout {
  position: absolute;
  bottom: 96rpx;
  left: 50%;
  width: 60rpx;
  height: 54rpx;
  margin-left: -30rpx;
}
.sprout::before, .sprout::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 32rpx;
  height: 52rpx;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(135deg, #7ed957, #3e9e4f);
}
.sprout::before { left: -2rpx; transform: rotate(28deg); }
.sprout::after { right: -2rpx; transform: rotate(-28deg); }

/* 茎叶 */
.foliage {
  position: absolute;
  bottom: 84rpx;
  left: 50%;
  width: 210rpx;
  height: 236rpx;
  margin-left: -105rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stem {
  width: 14rpx;
  height: 200rpx;
  border-radius: 8rpx;
  background: linear-gradient(180deg, #5cbf5c, #3e9e4f);
  margin-top: 20rpx;
}
.leaf {
  position: absolute;
  width: 62rpx;
  height: 40rpx;
  border-radius: 0 60% 0 60%;
  background: linear-gradient(135deg, #8ade6b, #3e9e4f);
  border: 3rpx solid #2f8f43;
  box-shadow: 0 4rpx 8rpx rgba(0,90,0,.12);
}
.leaf-l { left: 24rpx; top: 120rpx; transform: rotate(32deg); }
.leaf-r { right: 24rpx; top: 150rpx; transform: rotate(-32deg) scaleX(-1); }
.head-wrap { position: relative; margin-top: -6rpx; }

/* 花苞（阶段2默认） */
.head {
  width: 52rpx;
  height: 52rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #8ade6b, #4cb04f);
  box-shadow: inset -6rpx -8rpx 10rpx rgba(0,90,0,.25);
}
.fruit { display: none; }

/* ---------- 各物种开花形态 ---------- */
/* 向日葵 */
.plant.sunflower.stage3 .head,
.plant.sunflower.stage4 .head {
  width: 66rpx;
  height: 66rpx;
  background: #8a4b08;
  border-radius: 50%;
  box-shadow:
    0 -40rpx 0 0 #ffd23f, 0 40rpx 0 0 #ffd23f,
    40rpx 0 0 0 #ffd23f, -40rpx 0 0 0 #ffd23f,
    28rpx -28rpx 0 0 #ffd23f, -28rpx 28rpx 0 0 #ffd23f,
    28rpx 28rpx 0 0 #ffd23f, -28rpx -28rpx 0 0 #ffd23f;
}
.plant.sunflower.stage3 .head::after,
.plant.sunflower.stage4 .head::after {
  content: '';
  position: absolute;
  left: 14rpx; top: 14rpx;
  width: 38rpx; height: 38rpx;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center, #5c3306 0 4rpx, #8a4b08 5rpx 8rpx);
}
.plant.sunflower.stage4 .head { transform: scale(1.08); }

/* 小番茄 */
.plant.tomato.stage3 .head,
.plant.tomato.stage4 .head {
  width: 60rpx;
  height: 60rpx;
  background: #ff6b6b;
  border-radius: 50%;
  box-shadow:
    34rpx 12rpx 0 -6rpx #ff6b6b,
    -32rpx 20rpx 0 -8rpx #ff8a80,
    6rpx 34rpx 0 -10rpx #ff5252,
    20rpx -30rpx 0 -12rpx #ff9e94;
  border: 3rpx solid #e05252;
}
.plant.tomato.stage3 .head::after,
.plant.tomato.stage4 .head::after {
  content: '';
  position: absolute;
  left: 22rpx; top: -16rpx;
  width: 34rpx; height: 26rpx;
  border-radius: 60% 60% 0 0;
  background: linear-gradient(180deg, #57b84f, #3e9e4f);
  border: 3rpx solid #2f8f43;
}
.plant.tomato.stage4 .fruit {
  display: block;
  position: absolute;
  left: -20rpx; bottom: -26rpx;
  width: 34rpx; height: 34rpx;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ff9e94, #ff5252 70%);
  box-shadow: 56rpx 6rpx 0 -4rpx #ff6b6b;
}

/* 小蘑菇 */
.plant.mushroom .head-wrap { margin-top: -40rpx; }
.plant.mushroom .head {
  width: 120rpx;
  height: 76rpx;
  border-radius: 66rpx 66rpx 14rpx 14rpx;
  background: linear-gradient(180deg, #ff9db8, #ff7da5);
  box-shadow: inset -10rpx -12rpx 16rpx rgba(200,60,120,.25);
}
.plant.mushroom .head::before {
  content: '';
  position: absolute;
  top: 18rpx; left: 20rpx;
  width: 18rpx; height: 18rpx;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  box-shadow: 36rpx 10rpx 0 -4rpx rgba(255,255,255,.85), 66rpx 22rpx 0 -5rpx rgba(255,255,255,.85);
}
.plant.mushroom .head::after {
  content: '';
  position: absolute;
  top: 52rpx; left: 44rpx;
  width: 30rpx; height: 42rpx;
  border-radius: 0 0 10rpx 10rpx;
  background: linear-gradient(180deg, #fff4f0, #ffe0d6);
}
.plant.mushroom.stage4 .head { height: 92rpx; border-radius: 80rpx 80rpx 16rpx 16rpx; }

/* 四叶草 */
.plant.clover .head {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background-color: #51cf66;
  background-image:
    radial-gradient(circle at 31% 30%, #7ce08a 0 34%, transparent 35%),
    radial-gradient(circle at 69% 30%, #7ce08a 0 34%, transparent 35%),
    radial-gradient(circle at 31% 70%, #7ce08a 0 34%, transparent 35%),
    radial-gradient(circle at 69% 70%, #7ce08a 0 34%, transparent 35%);
}
.plant.clover .head::after {
  content: '';
  position: absolute;
  left: 36rpx; top: 36rpx;
  width: 24rpx; height: 24rpx;
  border-radius: 50%;
  background: #8fd98f;
}
.plant.clover.stage4 .fruit {
  display: block;
  position: absolute;
  left: 30rpx; top: 30rpx;
  width: 36rpx; height: 36rpx;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c9, #ffe066 70%);
  animation: twinkle 1.6s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }

/* ---- 花盆 ---- */
.pot {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -75rpx;
  width: 150rpx;
  text-align: center;
}
.soil {
  width: 150rpx;
  height: 34rpx;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #8a6a3a, #5f4426 75%);
}
.pot-lip {
  width: 150rpx;
  height: 22rpx;
  border-radius: 10rpx;
  background: linear-gradient(180deg, #e8b53c, #d1952c);
}
.pot-body {
  width: 132rpx;
  height: 66rpx;
  margin: 0 auto;
  border-radius: 6rpx 6rpx 30rpx 30rpx;
  background: linear-gradient(180deg, #e05a5a, #a12b2b);
  box-shadow: inset 10rpx 0 14rpx rgba(255,255,255,.18), inset -10rpx 0 14rpx rgba(0,0,0,.18);
}

/* 空盆 / 锁定盆 */
.pot-empty, .pot-locked {
  position: relative;
  width: 150rpx;
  margin: 128rpx auto 0;
  opacity: .85;
}
.pot-empty .plus {
  position: absolute;
  top: -64rpx;
  left: 50%;
  margin-left: -30rpx;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(120, 200, 120, 0.9);
  color: #fff;
  font-size: 44rpx;
  line-height: 58rpx;
  box-shadow: 0 4rpx 10rpx rgba(0,90,0,.2);
}
.pot-empty { animation: breathe 2.4s ease-in-out infinite; }
.pot-locked .lock-ico {
  position: absolute;
  top: -70rpx;
  left: 50%;
  margin-left: -30rpx;
  font-size: 52rpx;
}

/* ---- 地面 ---- */
.ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70rpx;
  background:
    radial-gradient(ellipse at 12% 0%, #a8e06a 0 14rpx, transparent 15rpx),
    radial-gradient(ellipse at 30% 0%, #a8e06a 0 12rpx, transparent 13rpx),
    radial-gradient(ellipse at 52% 0%, #a8e06a 0 14rpx, transparent 15rpx),
    radial-gradient(ellipse at 72% 0%, #a8e06a 0 12rpx, transparent 13rpx),
    radial-gradient(ellipse at 90% 0%, #a8e06a 0 14rpx, transparent 15rpx),
    linear-gradient(180deg, #86d35a, #6fbf48);
}

/* ---- 照料面板 ---- */
.panel-head {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.panel-head .pname { font-size: 34rpx; color: #2f6f4f; }
.stage-chip {
  background: #e7f7e7;
  color: #3e9e4f;
  border-radius: 999rpx;
  padding: 2rpx 18rpx;
  font-size: 22rpx;
}
.prog { margin-left: auto; font-size: 24rpx; color: #8a9a8a; }
.progbar {
  height: 16rpx;
  border-radius: 999rpx;
  background: #eef3ee;
  margin-top: 14rpx;
  overflow: hidden;
}
.prog-fill {
  height: 100%;
  border-radius: 999rpx;
  background: linear-gradient(90deg, #ffd54f, #ff9f43);
  transition: width .4s;
}
.need { font-size: 22rpx; color: #e07a3a; margin-top: 10rpx; }

.stats { margin-top: 16rpx; }
.stat {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.s-ico { width: 44rpx; font-size: 26rpx; }
.bar {
  flex: 1;
  height: 18rpx;
  border-radius: 999rpx;
  background: #eef3ee;
  margin: 0 14rpx;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 999rpx;
  background: linear-gradient(90deg, #4fc3f7, #29b6f6);
  transition: width .4s;
}
.bar-fill.low { background: linear-gradient(90deg, #ff8a80, #e53935); }
.s-val { width: 52rpx; text-align: right; font-size: 24rpx; color: #5a6a5a; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14rpx;
  margin-top: 20rpx;
}
.act {
  width: 150rpx;
  padding: 14rpx 0;
  border-radius: 18rpx;
  background: #f3faf3;
  border: 2rpx solid #d5ecd5;
  text-align: center;
  font-size: 22rpx;
  color: #3a5a3a;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rpx;
}
.act:active { background: #e2f3e2; }
.a-ico { font-size: 34rpx; }
.a-cd { font-size: 18rpx; color: #9ab09a; }
.act.item { background: #fff8e8; border-color: #f3e2b6; }

.bottom-actions {
  display: flex;
  gap: 20rpx;
  padding: 20rpx 24rpx 40rpx;
}
.bottom-actions .btn { flex: 1; }

/* ---- 特效 ---- */
.fx { position: fixed; left: 0; right: 0; top: 200rpx; pointer-events: none; z-index: 9; }
.drop {
  position: absolute;
  width: 26rpx;
  height: 34rpx;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #6ec6ff;
  opacity: 0.9;
  animation: fall 0.9s ease-in forwards;
}
.d1 { left: 30%; }
.d2 { left: 48%; animation-delay: 0.12s; }
.d3 { left: 66%; animation-delay: 0.24s; }
@keyframes fall { from { transform: translateY(0); opacity: .95; } to { transform: translateY(360rpx); opacity: 0; } }
.rays {
  position: absolute;
  left: 50%;
  margin-left: -150rpx;
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,214,79,.35) 0 8deg, transparent 8deg 16deg);
  animation: spin 3s linear infinite;
}
.heart {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  background: #ff8fab;
  transform: rotate(45deg);
  border-radius: 6rpx;
  animation: floatup 1.2s ease-in forwards;
}
.heart::before, .heart::after {
  content: '';
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background: #ff8fab;
}
.heart::before { top: -20rpx; left: 0; }
.heart::after { left: -20rpx; top: 0; }
.h1 { left: 35%; }
.h2 { left: 50%; animation-delay: 0.2s; }
.h3 { left: 63%; animation-delay: 0.4s; }
@keyframes floatup {
  from { transform: rotate(45deg) translateY(0) scale(0.6); opacity: 0; }
  30% { opacity: 1; }
  to { transform: rotate(45deg) translateY(-320rpx) scale(1.1); opacity: 0; }
}
.spark {
  position: absolute;
  width: 20rpx;
  height: 20rpx;
  background: #ffe066;
  border-radius: 50%;
  animation: sparkle 1s ease-in-out infinite;
}
.s1 { left: 40%; }
.s2 { left: 52%; animation-delay: 0.2s; }
.s3 { left: 62%; animation-delay: 0.4s; }
@keyframes sparkle {
  0%,100% { transform: scale(0.5); opacity: .4; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* ---- 弹窗 ---- */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(20, 40, 20, 0.5);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  width: 560rpx;
  background: #fff;
  border-radius: 28rpx;
  padding: 40rpx 36rpx 32rpx;
  text-align: center;
  box-shadow: 0 20rpx 60rpx rgba(0,0,0,.25);
}
.modal-title { font-size: 34rpx; font-weight: 700; color: #2f6f4f; margin-bottom: 20rpx; }
.modal-body { max-height: 420rpx; overflow-y: auto; text-align: left; }
.r-line { font-size: 26rpx; color: #5a6a5a; line-height: 1.9; }
.modal-btn { margin-top: 28rpx; }