/* ---------- Lily Pad Hop ---------- */
.lp-area { display: flex; flex-direction: column; background: linear-gradient(180deg, #8fe0ff 0%, #c9f1ff 17%, #bff0d0 21%, #2fb7c9 24%, #1d8fb8 65%, #146e9c 100%); box-shadow: inset 0 0 0 4px #ffffff33; }
.lp-sun { position: absolute; right: 7%; top: 4%; width: clamp(54px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 40%, #fffbe0, #ffe36a 55%, #ffb627); box-shadow: 0 0 0 12px #ffe36a33, 0 0 60px 20px #ffe36a88; animation: pz-sun 4s ease-in-out infinite; }
.lp-cloud { position: absolute; top: 5%; left: 0; width: 120px; height: 34px; border-radius: 40px; background: #fff; opacity: .9; pointer-events: none; animation: pz-cloud 38s linear infinite; }
.lp-cloud::before, .lp-cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.lp-cloud::before { width: 50px; height: 50px; left: 18px; top: -24px; } .lp-cloud::after { width: 38px; height: 38px; left: 58px; top: -14px; }
.lp-cloud.two { top: 13%; scale: .7; animation-duration: 52s; animation-delay: -24s; }
/* the far bank: soft green hills */
.lp-shore { position: absolute; left: 0; right: 0; top: 13%; height: 11%; pointer-events: none;
  background: radial-gradient(ellipse 40% 100% at 20% 100%, #6fd65a 60%, transparent 61%), radial-gradient(ellipse 45% 100% at 75% 100%, #59c24c 60%, transparent 61%), radial-gradient(ellipse 30% 80% at 50% 100%, #8ee06e 60%, transparent 61%); }
.lp-water { position: absolute; left: 0; right: 0; top: 23.5%; bottom: 0; pointer-events: none; overflow: hidden;
  background: repeating-linear-gradient(180deg, transparent 0 34px, #ffffff14 34px 37px); animation: lp-drift 6s linear infinite; }
.lp-ripple { position: absolute; left: 16%; top: 30%; width: 110px; height: 30px; border-radius: 50%; border: 3px solid #ffffff55; animation: lp-ripple 3.6s ease-out infinite; }
.lp-ripple.two { left: 70%; top: 58%; animation-delay: -1.2s; } .lp-ripple.three { left: 40%; top: 85%; animation-delay: -2.4s; }
.lp-reeds { position: absolute; bottom: 0; width: clamp(60px, 10vw, 110px); height: 46%; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent 10%, #3a8f2c 10% 16%, transparent 16% 38%, #2f7a24 38% 44%, transparent 44% 66%, #4aa83a 66% 72%, transparent 72%); }
.lp-reeds::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 7% 9% at 13% 8%, #8a4a1c 90%, transparent), radial-gradient(ellipse 7% 9% at 41% 22%, #7a3f16 90%, transparent), radial-gradient(ellipse 7% 9% at 69% 3%, #8a4a1c 90%, transparent); }
.lp-reeds-l { left: 0; transform-origin: 50% 100%; animation: lp-sway 4s ease-in-out infinite; }
.lp-reeds-r { right: 0; scale: -1 1; transform-origin: 50% 100%; animation: lp-sway 5s ease-in-out infinite reverse; }
.lp-fly { position: absolute; top: calc(12% + var(--i) * 9%); left: 0; width: clamp(56px, 8vw, 84px); pointer-events: none; z-index: 2; animation: lp-fly calc(14s + var(--i) * 5s) ease-in-out calc(var(--i) * -6s) infinite; }
.lp-fly svg { display: block; width: 100%; }
.lp-wing { stroke: #7fd0ff; stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 100%; animation: lp-flap .09s linear infinite alternate; }
.lp-trail { position: relative; z-index: 1; display: flex; justify-content: center; gap: clamp(4px, 1.5vw, 14px); padding: 8px 12px 0; pointer-events: none; }
.lp-step { position: relative; width: clamp(40px, 7vw, 64px); aspect-ratio: 5 / 3; opacity: .5; filter: saturate(.5); transition: opacity .3s, filter .3s; }
.lp-step > svg { width: 100%; height: 100%; display: block; }
.lp-step.got { opacity: 1; filter: none; animation: pop-in .5s cubic-bezier(.2, 1.6, .4, 1); }
.lp-step .lp-flower { width: 70%; left: 15%; top: -40%; }

.lp-play { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; align-items: center; gap: 8px; padding: 6px 14px 12px; }
.lp-ahead { margin-top: 3%; display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 2.6vw, 34px); width: 100%; }
.lp-pad { position: relative; width: clamp(108px, min(27vw, 30vh), 240px); aspect-ratio: 5 / 3.4; display: grid; place-items: center; translate: 0 calc(var(--i) % 2 * 18px);
  animation: lp-pad-in .55s cubic-bezier(.2, 1.5, .4, 1) calc(var(--i) * .1s) backwards, lp-float 3s ease-in-out calc(var(--i) * -1s) infinite; transition: opacity .4s; }
.lp-pad > .lp-leaf, .lp-home > .lp-leaf { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; }
.lp-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px 4px; margin-bottom: 26%; border-radius: 20px; background: #fffdf3; box-shadow: 0 6px 0 #c9b98a, 0 10px 16px #0003; }
.lp-card b { font-size: clamp(22px, 3.6vw, 36px); line-height: 1; color: #2a3a2a; font-weight: 700; }
.lp-pic { font-size: clamp(38px, 6.6vw, 66px); line-height: 1.1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.lp-pad:active .lp-card { translate: 0 4px; box-shadow: 0 2px 0 #c9b98a; }
.lp-pad.hint { animation: pulse 1s ease-in-out infinite; box-shadow: none !important; }
.lp-pad.hint .lp-card { box-shadow: 0 0 0 6px var(--gold), 0 6px 0 #c9b98a; }
.lp-pad.lp-sunk { opacity: .55; filter: saturate(.4); }
.lp-pad.lp-fade { opacity: .25; }
.lp-pad.lp-right .lp-card { box-shadow: 0 0 0 6px #2fcf7a, 0 6px 0 #c9b98a; }
.lp-flower { position: absolute; z-index: 3; width: 30%; right: 2%; bottom: 4%; animation: lp-bloom .7s cubic-bezier(.2, 1.8, .4, 1) both; pointer-events: none; }
.lp-flower svg { display: block; width: 100%; }

.lp-home-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 30px); }
.lp-home { position: relative; width: clamp(140px, min(30vw, 32vh), 260px); aspect-ratio: 5 / 3.4; display: grid; place-items: center; }
.lp-home .lp-card { margin-bottom: 26%; translate: 55% 0; }
.lp-pad .lp-card { transition: translate .35s cubic-bezier(.2, 1.5, .4, 1), scale .35s; }
.lp-pad.lp-landing .lp-card { translate: 50% -6%; scale: .9; }
.lp-home.lp-bob { animation: lp-bob .4s; }
.lp-ear { z-index: 1; }

.lp-frog { position: absolute; z-index: 4; left: -200px; top: 0; width: clamp(84px, 13vw, 130px); pointer-events: none; transform-origin: 50% 100%; filter: drop-shadow(0 6px 4px #0003); }
.lp-frog svg { display: block; width: 100%; animation: lp-breathe 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
.lp-frog .lp-eyes { animation: d-blink 3.8s infinite; transform-origin: 60px 33px; }
.lp-frog.lp-no svg { animation: pig-no .6s; }
.lp-frog.lp-party svg { animation: jp-dance .5s ease-in-out infinite; }
.lp-ring { position: absolute; z-index: 1; border-radius: 50%; border: 4px solid #fff; pointer-events: none; }
.splash-word.lp-pow { color: #b9ff6a; -webkit-text-stroke-color: #1d6a2a; }

@keyframes lp-drift { to { background-position: 0 37px; } }
@keyframes lp-ripple { 0% { scale: .3; opacity: 0; } 30% { opacity: 1; } 100% { scale: 1.6; opacity: 0; } }
@keyframes lp-sway { 50% { rotate: 3deg; } }
@keyframes lp-fly { 0% { translate: -80px 0; } 25% { translate: 30vw 30px; } 50% { translate: 55vw -10px; } 75% { translate: 80vw 40px; } 100% { translate: calc(100vw + 80px) 0; } }
@keyframes lp-flap { to { scale: 1 .3; } }
@keyframes lp-pad-in { from { scale: 0; opacity: 0; } }
@keyframes lp-float { 50% { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes lp-bloom { from { scale: 0; rotate: -90deg; } }
@keyframes lp-bob { 40% { translate: 0 8px; } }
@keyframes lp-breathe { 50% { scale: 1.04 .96; } }

@media (max-width: 600px) {
  .lp-card { padding: 4px 8px 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-water, .lp-ripple, .lp-reeds, .lp-fly, .lp-pad, .lp-frog svg, .lp-cloud { animation: none; }
}