/* Pond owns its water and playfield; shared composition owns the presenter. */
.lg-app.lg-pond-activity .lg-play[data-activity="pop"] .play-stage {
  width:min(760px,100%); flex:1 1 0; min-height:0; max-height:min(540px,60vh);
  margin:8px auto 80px; border:8px solid #e5dcc8;
  border-radius:43% 38% 22% 26% / 10% 12% 8% 9%;
  background:linear-gradient(160deg,#ccfbef,hsl(184 52% 70%) 43%,hsl(190 52% 54%));
  box-shadow:0 6px 0 #a89478,0 11px 0 rgb(74 54 32 / .16),inset 0 5px 0 rgb(47 92 70 / .25);
  mask-image:none; -webkit-mask-image:none; overflow:hidden;
}
.lg-app.lg-pond-activity[data-garden-phase="night"] .lg-play[data-activity="pop"] .play-stage {
  background:linear-gradient(160deg,#6064a0,#4e9677 60%,#2f5c46);
  border-color:#e5dcc8; box-shadow:0 6px 0 #4a3620,0 11px 0 rgb(43 30 18 / .2),inset 0 5px 0 rgb(43 30 18 / .3);
}
.lg-app .lg-play[data-activity="pop"] .pop-sky { inset:5% 4% 9%; }
.lg-app .lg-play[data-activity="pop"] .pop-bubble {
  min-width:44px; max-width:min(148px,calc(var(--pond-height, 300px) * .42));
  isolation:isolate; border-radius:18px;
}
.lg-app .lg-play[data-activity="pop"] .pop-sky[data-rows="2"] .pop-bubble {
  max-width:min(132px,calc(var(--pond-height, 300px) * .32));
}
.lg-app .lg-play[data-activity="pop"] .pop-bubble > svg { position:relative; z-index:1; }
.pond-contact { position:absolute; z-index:0; width:124%; left:-12%; bottom:-12%; pointer-events:none; }
.pond-contact > svg { display:block; width:100%; height:auto; }
.lg-app .lg-play[data-activity="pop"] .pop-bubble:not(:disabled):active > svg {
  transform:translateY(3px) scale(.98);
}
.lg-app .lg-play[data-activity="pop"] .pop-bubble.is-found > svg {
  animation:pond-found 240ms var(--lg-out); opacity:1; filter:drop-shadow(0 4px 1px rgb(74 54 32 / .2));
}
.lg-app .lg-play[data-activity="pop"] .pop-bubble.is-found { transition:transform 240ms var(--lg-out); }
.lg-app .lg-play[data-activity="pop"] .has-found .pop-bubble:not(.is-found) { visibility:hidden; }
.lg-app .lg-play[data-activity="pop"] .pop-bubble.is-no { opacity:.55; }
.lg-app .lg-play[data-activity="pop"] .pop-bubble.is-no svg .tile-face { fill:#fffaf0; }
.lg-app .lg-play[data-activity="pop"] .pop-bubble:focus-visible { outline:4px solid var(--lg-focus); outline-offset:6px; }
.lg-app .lg-play[data-activity="pop"] .pond-touch-ring { z-index:2; }
.pond-finish {
  position:absolute; z-index:4; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; justify-content:center; align-items:center; gap:24px;
  width:220px; max-width:85%; min-height:68px; padding:6px 12px 10px;
  border-radius:14px 14px 20px 20px;
  background:linear-gradient(#e5dcc8 0 13%,#c9bda4 14% 84%,#a89478 85%);
  box-shadow:0 5px 0 #4a3620,0 8px 0 rgb(47 92 70 / .18),inset 0 3px 0 #fffaf0;
}
.pond-finish[hidden] { display:none; }
.lg-app .pond-finish .pond-replay { width:50px; height:50px; }
.lg-app .pond-finish .pond-next { width:88px; height:52px; min-height:48px; padding:5px 20px; }
@keyframes pond-found { from { transform:translateY(3px) scale(.98); } 55% { transform:translateY(-5px); } to { transform:none; } }
@media(max-height:650px) {
 .lg-app.lg-pond-activity .lg-play[data-activity="pop"] .play-stage { margin-bottom:48px; max-height:none; }
 .pond-finish { min-height:50px; bottom:9px; padding:4px 10px 6px; gap:18px; width:190px; }
 .lg-app .pond-finish .pond-replay { width:44px; height:44px; }
 .lg-app .pond-finish .pond-next { height:44px; min-height:44px; width:78px; }
}
@media(orientation:landscape) and (max-height:450px) {
 .lg-app.lg-pond-activity .lg-play[data-activity="pop"] .play-stage { margin:0 auto 8px; }
 .lg-app .lg-play[data-activity="pop"] .pop-sky { inset:6% 24% 8% 4%; }
 .lg-app .lg-play[data-activity="pop"] .pop-sky[data-rows="2"] .pop-bubble { max-width:min(104px,calc(var(--pond-height, 200px) * .3)); }
 .pond-finish { left:auto; right:12px; top:50%; bottom:auto; transform:translateY(-50%); width:86px; max-width:20%; min-height:136px; flex-direction:column; gap:14px; padding:8px 4px 10px; }
 .lg-app .pond-finish .pond-next { width:64px; padding:5px 12px; }
}
.lg-reduce-motion .lg-play[data-activity="pop"] .pop-bubble,
.lg-reduce-motion .lg-play[data-activity="pop"] .pop-bubble > svg { animation:none!important; transition:none!important; }
@media(prefers-reduced-motion:reduce) { .lg-app .lg-play[data-activity="pop"] .pop-bubble,.lg-app .lg-play[data-activity="pop"] .pop-bubble > svg { animation:none!important; transition:none!important; } }

/* Update 4: the jetty on the far shore. Each find sails here after Continue
   (or a second tap on the found packet); the dock is decoration, not a score. */
.pond-dock { position:absolute; z-index:2; top:2.5%; left:50%; transform:translateX(-50%); width:min(66%,300px); height:clamp(46px,13%,66px); pointer-events:none; }
.pond-dock-pier { position:absolute; inset:0; width:100%; height:100%; }
.pond-dock-slots { position:absolute; left:4%; right:4%; top:10%; height:62%; display:flex; justify-content:space-evenly; align-items:center; }
.pond-dock-slot { position:relative; display:grid; place-items:center; height:100%; aspect-ratio:1; max-width:calc(92% / var(--dock-count,4)); border-radius:10px; border:2px dashed #ffe49a; }
.pond-dock-slot.is-full { border-color:transparent; }
.pond-dock-slot > svg { width:100%; height:100%; filter:drop-shadow(0 2px 0 rgb(74 54 32 / .25)); }
.pond-dock-ghost { position:fixed; z-index:60; pointer-events:none; }
.pond-dock-ghost > svg { display:block; width:100%; height:100%; }
@media(orientation:landscape) and (max-height:450px) {
 .pond-dock { left:4%; transform:none; width:min(56%,280px); height:clamp(38px,15%,52px); top:2%; }
}
@media (prefers-reduced-motion:no-preference) {
  .lg-app:not(.lg-reduce-motion) .pond-dock-slot.is-new > svg { animation:pond-dock-land 360ms cubic-bezier(.2,.8,.2,1) both; }
  @keyframes pond-dock-land { from { transform:translateY(-6px) scale(1.12); } 60% { transform:translateY(2px) scale(.96); } to { transform:none; } }
}