/* A quiet landscape behind the garden menu and the single-player board. */
.garden-scenery {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  pointer-events: none;
  background: #c8edf1;
}
.garden-scenery *,
.garden-scenery *::before,
.garden-scenery *::after { pointer-events: none; }
body.garden-view { background: #c8edf1; }
body.garden-view::after { display: none; }
body.garden-view .garden-scenery { display: block; }
body.garden-view #app { position: relative; z-index: 1; }

.garden-sky,
.garden-scenery-veil,
.garden-clouds { position: absolute; inset: 0; }
.garden-sky {
  z-index: 0;
  background: linear-gradient(180deg, #c8edf1 0%, #d9f1ec 38%, #eff6df 65%, #bdd696 100%);
}
.garden-landscape {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 49vh;
  height: 49dvh;
  background: url('assets/garden-scenery.png') center 62% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #0008 12%, #000 26%);
  mask-image: linear-gradient(180deg, transparent 0%, #0008 12%, #000 26%);
}
.garden-scenery-veil {
  z-index: 2;
  background: radial-gradient(ellipse at 50% 31%, #fffdf126 0%, #fffdf100 65%),
    linear-gradient(180deg, #fffdf10a 0%, #fffdf100 43%, #fffdf11f 100%);
}
.garden-clouds { z-index: 3; overflow: hidden; }
.garden-cloud {
  position: absolute;
  display: block;
  width: clamp(180px, 26vw, 340px);
  height: clamp(72px, 10.4vw, 130px);
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22360%22%20height%3D%22144%22%20viewBox%3D%220%200%20360%20144%22%20fill%3D%22none%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22cloud-paper%22%20x1%3D%22176%22%20y1%3D%2212%22%20x2%3D%22176%22%20y2%3D%22136%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23fffef8%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%23fffefa%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e4f2f1%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22cloud-rim%22%20x1%3D%2269%22%20y1%3D%2231%22%20x2%3D%22261%22%20y2%3D%22138%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23f5eddb%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23dbe8df%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20d%3D%22M48%20119C30%20121%2017%20110%2018%2096C18%2081%2028%2070%2043%2069C46%2049%2064%2035%2084%2038C92%2020%20110%2011%20129%2014C153%207%20178%2020%20186%2043C198%2030%20222%2029%20238%2039C250%2047%20256%2057%20258%2069C276%2062%20295%2072%20300%2088C318%2085%20337%2096%20340%20111C343%20126%20330%20134%20312%20134H70C60%20134%2052%20130%2048%20119Z%22%20fill%3D%22url%28%23cloud-paper%29%22%20stroke%3D%22url%28%23cloud-rim%29%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M48%2073C52%2059%2063%2049%2077%2049M95%2040C103%2025%20118%2022%20131%2024C148%2020%20164%2027%20173%2041M202%2045C215%2039%20234%2044%20241%2056%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.8%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M32%20104C42%20118%2060%20116%2077%20115C94%20130%20116%20128%20133%20123C155%20132%20177%20132%20194%20123C216%20131%20239%20129%20255%20122C271%20127%20289%20123%20300%20119C313%20122%20327%20118%20333%20112%22%20stroke%3D%22%23d8eceb%22%20stroke-opacity%3D%22.54%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M75%2086C84%2081%2091%2083%2097%2088M157%2078C165%2071%20178%2072%20185%2079M265%2098C273%2092%20283%2094%20288%2099%22%20stroke%3D%22%23fffefa%22%20stroke-opacity%3D%22.92%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E%0A') center / contain no-repeat;
  opacity: .7;
  --cloud-from: -40px;
  --cloud-to: 45px;
  --cloud-duration: 38s;
  --cloud-delay: -11s;
  transform: translate3d(var(--cloud-from), 0, 0);
  animation: garden-cloud-drift var(--cloud-duration) ease-in-out var(--cloud-delay) infinite alternate;
  will-change: transform;
}
.garden-cloud.cloud-1 {
  left: 3%;
  top: 6%;
  --cloud-duration: 36s;
  --cloud-delay: -13s;
}
.garden-cloud.cloud-2 {
  right: 5%;
  top: 17%;
  width: clamp(200px, 29vw, 340px);
  height: clamp(80px, 11.6vw, 130px);
  opacity: .62;
  --cloud-from: 45px;
  --cloud-to: -45px;
  --cloud-duration: 48s;
  --cloud-delay: -31s;
}
.garden-cloud.cloud-3 {
  left: -4%;
  top: 31%;
  width: clamp(180px, 23vw, 285px);
  height: clamp(72px, 9.2vw, 114px);
  opacity: .54;
  --cloud-from: -40px;
  --cloud-to: 40px;
  --cloud-duration: 44s;
  --cloud-delay: -21s;
}
.garden-cloud.cloud-4 {
  right: -3%;
  top: 43%;
  width: clamp(190px, 25vw, 310px);
  height: clamp(76px, 10vw, 124px);
  opacity: .57;
  --cloud-from: 40px;
  --cloud-to: -40px;
  --cloud-duration: 32s;
  --cloud-delay: -9s;
}
@keyframes garden-cloud-drift {
  from { transform: translate3d(var(--cloud-from), 0, 0); }
  to { transform: translate3d(var(--cloud-to), 0, 0); }
}
body.garden-paused .garden-cloud { animation-play-state: paused; }

/* Opaque chapter pages keep scenery away from level names and progress. */
body.garden-view .level-shell .chapter {
  background: #fffdf3;
  border-color: #fffef8;
  box-shadow: 0 5px 0 #879f7021, 0 14px 30px #5473510c;
}
body.garden-view .level-shell .topbar { background: #fffdf5f5; }
body.garden-view .level-shell > .footnote {
  background: #fffdf1eb;
  border-radius: 18px;
  box-shadow: 0 0 0 10px #fffdf1eb;
}
body.garden-view .game-shell .game-top {
  background: #fffdf3eb;
  border-radius: 22px;
  box-shadow: 0 0 0 7px #fffdf3eb;
}
body.garden-view .game-shell .together-note {
  background: #fffdf1eb;
  border-radius: 12px;
  box-shadow: 0 0 0 5px #fffdf1eb;
}
body.garden-view .game-shell .tip {
  background: #fffdf1eb;
  border-radius: 18px;
}
body.garden-view .game-shell .move-info,
body.garden-view .game-shell .rest-info {
  background: #fffdf1e6;
  border-radius: 14px;
  box-shadow: 0 0 0 5px #fffdf1e6;
}

@media (orientation: landscape) {
  .garden-landscape { height: 58vh; height: 58dvh; background-position: center 56%; }
  .garden-cloud.cloud-1 { top: 4%; }
  .garden-cloud.cloud-2 { top: 14%; }
  .garden-cloud.cloud-3 { top: 29%; }
  .garden-cloud.cloud-4 { top: 37%; }
}
@media (prefers-reduced-motion: reduce) {
  .garden-cloud { animation: none; transform: none; will-change: auto; }
}