/* Activity-family surfaces. The SVG is scenery; every learning mark remains a
   live MiniGames tile above it. */
.lg-activity-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.lg-activity-art > svg { position:absolute; inset:0; display:block; width:100%; height:100%; }
.lg-activity-art > .activity-prop { inset:auto; width:clamp(60px,18%,96px); height:auto; aspect-ratio:120 / 140; }
.lg-activity-art > .is-pencils { left:2%; bottom:6%; }
.lg-activity-art > .is-paper { right:2%; bottom:6%; width:clamp(54px,16%,86px); }
.lg-activity-art > .is-picnic-flowers { left:2%; bottom:24%; width:clamp(46px,13%,90px); }
.lg-activity-art > .is-pairs-leaves { top:3%; left:0; width:100%; aspect-ratio:720 / 90; }
.lg-activity-art > .is-orchard-fruit { top:5%; left:0; width:100%; aspect-ratio:680 / 110; }
.lg-activity-art > .is-parade-hangers { top:17%; left:7%; width:86%; aspect-ratio:625 / 78; }
.lg-play[data-activity="feed"] .feed-scene { z-index:1; }

.lg-play[data-activity="pairs"] .pairs-grid,
.lg-play[data-activity="catch"] .catch-field,
.lg-play[data-activity="catch"] .catch-basket,
.lg-play[data-activity="build"] .build-scene,
.lg-play:is([data-activity="blend"], [data-activity="fuse"], [data-activity="chain"]) .blend-scene,
.lg-play[data-activity="unfuse"] .unfuse-scene,
.lg-play[data-activity="parade"] .parade-scene {
  z-index: 1;
}

/* Matching beds: foliage stays at the outer rail and the six cards own the
   center. The surface still works in the compact two-column layout. */
.lg-play[data-activity="pairs"] .play-stage {
  background: linear-gradient(155deg, #fffdf7, #fffaf0 48%, #e5dcc8);
  border-color: #4e9677;
  box-shadow: 0 6px 0 #c9bda4;
}

.lg-play[data-activity="pairs"] .pairs-grid { inset: 4% 10%; }

/* Orchard Catch: keep the full fall corridor clear and use the basket's own
   contact shadow at the bottom of the field. */
.lg-play[data-activity="catch"] .play-stage {
  background: linear-gradient(#ccfbef, #fffdf7 63%, #fffaf0);
  border-color: #4e9677;
  box-shadow: 0 6px 0 #c9bda4;
}

.lg-play[data-activity="catch"] .catch-canopy { opacity: .28; }
.lg-play[data-activity="catch"] .catch-basket { bottom: 1%; }

/* One joining workbench serves Build, Blend, Fuse, Unfuse and Chain so the
   child recognizes the same physical idea as it becomes more complex. */
.lg-play:is([data-activity="build"], [data-activity="blend"], [data-activity="fuse"], [data-activity="unfuse"], [data-activity="chain"]) .play-stage {
  background: linear-gradient(145deg, #fffdf7, #fffaf0 42%, #e5dcc8);
  border-color: #a89478;
  box-shadow: 0 6px 0 #c9bda4;
}

.lg-app .lg-play[data-activity="build"] .build-scene { inset:10% 7% 19%; justify-content:center; gap:clamp(24px,6vh,54px); padding:8px; }
.lg-app .lg-play[data-activity="build"] .build-slots {
  width:100%; box-sizing:border-box; justify-content:center; gap:8px; padding:12px 8px; min-height:100px;
  background:linear-gradient(#e5dcc8,#fffaf0); border:2px solid #c9bda4; border-radius:22px;
  box-shadow:inset 0 3px 0 #c9bda4,0 2px 0 #fffdf7;
}
.lg-app .lg-play[data-activity="build"] .build-slot { width:clamp(58px,21vw,105px); min-width:0; flex-shrink:1; border:2px dashed #a89478; border-radius:16px; background:#fffaf0; box-shadow:inset 0 2px 0 #e5dcc8; }
.lg-app .lg-play[data-activity="build"] .build-slot.is-filled { border-style:solid; border-color:#4e9677; }
.lg-app .lg-play[data-activity="build"] .build-tile { width:clamp(64px,23vw,100px); }
.lg-app .lg-play[data-activity="build"] .build-tray {
  width:100%; box-sizing:border-box; gap:8px; padding:12px 4px;
  background:linear-gradient(#fffdf7,#fffaf0); border:2px solid #a89478; border-radius:22px;
  box-shadow:0 5px 0 #c9bda4,inset 0 3px 0 #fffdf7;
}

.lg-play:is([data-activity="blend"], [data-activity="fuse"]) .blend-glow {
  background: radial-gradient(circle, #ffe49a 0, #f3c955 22%, transparent 68%);
  opacity: .38;
  border-color: #c69434;
}

.lg-play[data-activity="chain"] .blend-glow {
  background: linear-gradient(90deg, #e5dcc8, #fffdf7 48%, #e5dcc8);
  border: 3px dashed #a89478;
  opacity: .74;
}

.lg-play[data-activity="unfuse"] .unfuse-scene {
  background: linear-gradient(90deg, transparent 49.7%, #a89478 49.7% 50.3%, transparent 50.3%);
}

@media (max-width: 600px) {
  .lg-play[data-activity="pairs"] .pairs-grid { inset: 2% 12%; }
  .lg-app .lg-play[data-activity="build"] .build-scene { inset:10% 5% 20%; padding:4px; gap:36px; }
  .lg-app .lg-play[data-activity="build"] .build-tray { box-sizing: border-box; }
  .lg-app .lg-play[data-activity="build"] .build-tile { width:calc((100% - 16px) / 3); max-width:100px; }
}

@media (max-height: 650px) {
  .lg-play[data-activity="pairs"] .pairs-grid { inset-block: 1%; }
  .lg-app .lg-play[data-activity="build"] .build-scene { inset:8% 6% 23%; padding:0; gap:16px; }
  .lg-app .lg-play[data-activity="build"] .build-slots { min-height:80px; padding:6px; }
  .lg-app .lg-play[data-activity="build"] .build-slot { width:58px; }
  .lg-app .lg-play[data-activity="build"] .build-tray { padding:6px; }
  .lg-app .lg-play[data-activity="build"] .build-tile { width:64px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-activity-art * { animation: none !important; }
}

/* A short phone has room for one horizontal tray, not three stacked rows. */
@media (orientation: landscape) and (max-height: 450px) {
  .lg-screen.lg-play[data-activity="build"] { padding: 6px 12px; }
  .lg-play[data-activity="build"] > .lg-topbar { position: absolute; inset: 6px 12px auto; height: 44px; min-height: 44px; margin: 0; }
  .lg-play[data-activity="build"] .lg-topbar .lg-round-btn { width: 44px; height: 44px; }



  .lg-app .lg-play[data-activity="build"] .play-stage { width: 100%; margin: 0 auto; max-height: none; min-height: 210px; flex: 1; }
  .lg-app .lg-play[data-activity="build"] .build-scene { inset:3px 12% 18%; padding: 3px; gap: 6px; }
  .lg-app .lg-play[data-activity="build"] .build-slots { min-height: 72px; padding: 4px; gap: 6px; }
  .lg-app .lg-play[data-activity="build"] .build-slot { width: 60px; }
  .lg-app .lg-play[data-activity="build"] .build-tray { padding: 5px; flex-wrap: nowrap; gap: 6px; }
  .lg-app .lg-play[data-activity="build"] .build-tile { width: 64px; flex: 0 1 64px; min-width: 44px; }
}

.pond-water{position:absolute;inset:0;width:100%;height:100%}
.pond-lily{position:absolute;pointer-events:none;width:clamp(36px,12%,70px);height:auto}
.pond-lily.is-near{left:1%;bottom:3%}.pond-lily.is-far{right:1%;top:7%;width:clamp(28px,9%,54px);opacity:.7}

@media(orientation:landscape) and (max-height:450px){.lg-activity-art.is-workbench>.activity-prop{width:42px;bottom:1%}}

@media(min-width:601px) and (min-height:451px){
 .lg-activity-art.is-workbench>.activity-prop{width:72px;bottom:5%}
 .lg-app .lg-play[data-activity="build"] :is(.build-slots,.build-tray){width:auto;min-width:340px;max-width:100%}
}