/* 三地场景皮肤与种植种子图层：装饰不参与命中，也不改变格子规则。 */
body[data-destination="coast"] {
  --scene-paper: #F7EFE2;
  --scene-env: #F4EAD8;
  --scene-accent: #BBD6D0;
  --scene-decor: #D6A88D;
}
body[data-destination="forest"] {
  --scene-paper: #F3F5E9;
  --scene-env: #EAF0DF;
  --scene-accent: #B8C9A7;
  --scene-decor: #859C70;
}
body[data-destination="mountain"] {
  --scene-paper: #F4F1F5;
  --scene-env: #F0EDF3;
  --scene-accent: #C9C6D6;
  --scene-decor: #A99DB7;
}

#view-game .garden-area {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--scene-paper, #F2F0E2), var(--scene-env, #F2F0E2));
  border-color: var(--scene-accent, #E9E6D5);
  transition: background .5s ease, border-color .5s ease;
}

#view-game .garden-area > *:not(.scene-decor) {
  position: relative;
  z-index: 1;
}

.scene-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.scene-decor > * {
  position: absolute;
  pointer-events: none;
}

.scene-decor .scene-wave {
  left: -18%;
  width: 136%;
  height: 76px;
  border: 2px solid var(--scene-accent);
  border-radius: 50%;
  opacity: .34;
  animation: scene-drift 13s ease-in-out infinite alternate;
}
.scene-decor .scene-wave.wave-a { bottom: -40px; }
.scene-decor .scene-wave.wave-b { bottom: -20px; opacity: .2; animation-duration: 17s; animation-direction: alternate-reverse; }

.scene-decor .scene-shell {
  right: 22px;
  bottom: 20px;
  font-size: 24px;
  opacity: .26;
  transform: rotate(12deg);
  animation: scene-bob 11s ease-in-out infinite alternate;
}

.scene-decor .scene-leaf-shadow {
  width: 190px;
  height: 104px;
  border-radius: 60% 40% 55% 45%;
  background: radial-gradient(closest-side, var(--scene-accent), transparent 72%);
  filter: blur(6px);
  opacity: .38;
  animation: scene-sway 12s ease-in-out infinite alternate;
}
.scene-decor .scene-leaf-shadow.leaf-a { right: -52px; top: 6%; }
.scene-decor .scene-leaf-shadow.leaf-b { left: -58px; bottom: 4%; animation-delay: -4s; animation-duration: 15s; }

.scene-decor .scene-twine {
  right: 26px;
  bottom: 18px;
  font-size: 26px;
  color: var(--scene-decor);
  opacity: .3;
  animation: scene-bob 14s ease-in-out infinite alternate;
}

.scene-decor .scene-cloud {
  width: 118px;
  height: 44px;
  border-radius: 999px;
  background: #FFFDF8;
  opacity: .55;
  filter: blur(.3px);
  box-shadow: 30px 8px 0 -8px #FFFDF8, -32px 10px 0 -10px #FFFDF8;
  animation: scene-cloud 19s linear infinite;
}
.scene-decor .scene-cloud.cloud-a { top: 13%; left: -140px; }
.scene-decor .scene-cloud.cloud-b { top: 46%; left: -180px; animation-delay: -8s; animation-duration: 25s; opacity: .32; }

.scene-decor .scene-peak {
  left: 5%;
  bottom: -44px;
  width: 190px;
  height: 110px;
  background: linear-gradient(140deg, var(--scene-accent), transparent 78%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: .22;
}

@keyframes scene-drift {
  from { transform: translate3d(-2%, 0, 0) rotate(-1deg); }
  to { transform: translate3d(2%, -3px, 0) rotate(1deg); }
}
@keyframes scene-bob {
  from { transform: translateY(0) rotate(10deg); }
  to { transform: translateY(-5px) rotate(16deg); }
}
@keyframes scene-sway {
  from { transform: translate3d(-4px, 0, 0) scale(1); }
  to { transform: translate3d(6px, -4px, 0) scale(1.05); }
}
@keyframes scene-cloud {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 360px)); }
}

body.scene-paused .scene-decor > *,
body.scene-offscreen .scene-decor > *,
body.overlay-open .scene-decor > * {
  animation-play-state: paused !important;
}

/* 种植飞行种子：统一小种子，只带轻微种类色差 */
.plant-seed {
  position: fixed;
  z-index: 74;
  width: 24px;
  height: 28px;
  border-radius: 55% 55% 48% 42%;
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow: 0 5px 12px rgba(92, 74, 45, .22), inset -2px -3px 0 rgba(90, 66, 38, .14);
}
.plant-seed::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  width: 7px;
  height: 10px;
  border-radius: 50%;
  background: #FFF9EA99;
  transform: rotate(-18deg);
}
.plant-seed.seed-daisy,
.plant-seed.seed-sunflower { background: linear-gradient(145deg, #EBD3A2, #D5B276); }
.plant-seed.seed-sunflower { width: 22px; height: 32px; border-radius: 60% 60% 44% 44%; }
.plant-seed.seed-mushroom { background: linear-gradient(145deg, #D8B79B, #BC9578); border-radius: 50%; }
.plant-seed.seed-clover,
.plant-seed.seed-vine { background: linear-gradient(145deg, #C8D8A5, #9EB47C); }
.plant-seed.seed-cactus { background: linear-gradient(145deg, #B9C7B0, #8FA389); }

/* Keep the operation panel close to the board, with one clear action at a time. */
#view-game .care-area{gap:16px}
#view-game .care-box{padding:22px;border-color:#DFE4D2;box-shadow:0 8px 28px #73845808}
#view-game .care-heading{align-items:center;min-height:30px;color:#61734F;font-size:13px;letter-spacing:.4px}
#careStageIcon{width:29px;height:29px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#EDF2E1;color:#78935F}
#careStageIcon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#view-game[data-phase=water] #careStageIcon{background:#E8F1F1;color:#6099AD}
#view-game .hint{margin:13px 0 17px;font-size:13px;border:0}
#view-game .tray-actions{gap:10px;margin-top:20px}
#view-game .tray-actions .btn[data-act=confirm]{flex:1.55}
#view-game .tray-actions .btn[data-act=skip]{box-shadow:none;border-color:transparent;background:transparent;color:#82916F;flex:.8}
#view-game .tray-actions .btn[data-act=rotate]{box-shadow:none;background:#F5F6ED}
#view-game .seed-card{min-height:144px;border-radius:19px}
#view-game .care-foot{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
#view-game .care-footnote{font-size:10px;margin:0;color:#8D987F}
#view-game .water-note{color:#7E8E73;font-size:12px}
#view-game #waterTray{gap:14px}
#view-game #btn-end{min-height:50px}
@media(max-width:620px){#view-game .care-box{padding:18px}#view-game .care-heading{font-size:12px}#view-game .seed-card{min-height:139px}#view-game .care-footnote{font-size:9px}#view-game .tray-actions{gap:8px;margin-top:17px}}
