/* Play page: joyful colour, draggable word, floating hearts and mobile-friendly interaction. */
body.play-page{background:#fde7fa}
.playroom{--play-colour:#fbe4f0;position:relative;overflow:hidden;isolation:isolate;
  background:var(--play-colour);min-height:calc(100svh - 140px);padding:45px 6% 125px;
  transition:background-color .5s ease}
.playroom::before{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 15% 25%,#fff8 0 6%,transparent 29%),
  radial-gradient(circle at 87% 67%,#fff8 0 5%,transparent 28%)}
.playroom-intro{position:relative;z-index:2;text-align:center;max-width:800px;margin:0 auto 25px}
.playroom-kicker{display:block;font-size:10px;letter-spacing:2px;font-weight:800;color:#703458;margin-bottom:15px}
.playroom h1{font-size:clamp(37px,6.2vw,70px);line-height:1.05}
.playroom-intro p{max-width:560px;margin:17px auto 0;font-size:14px;color:#694c64}
.play-surface{position:relative;max-width:1160px;height:clamp(410px,55vw,570px);margin:0 auto;
  border:3px dashed #8a5389;border-radius:38px;background:#ffffff47;overflow:hidden;
  cursor:crosshair;touch-action:manipulation;box-shadow:inset 0 0 80px #fff8,0 18px 45px #5d2b4c18}
.play-surface:before{content:"♡";position:absolute;left:6%;top:8%;
  font:italic clamp(110px,20vw,280px)/1 Georgia,serif;color:#fff9;pointer-events:none}
.play-letter-row{position:absolute;z-index:4;left:50%;top:53%;transform:translate(-50%,-50%);
  width:min(95%,1040px);display:flex;align-items:center;justify-content:center;gap:clamp(0px,1.35vw,17px);
  pointer-events:none}
.play-letter{--dx:0px;--dy:0px;--twist:0deg;appearance:none;display:inline-block;position:relative;
  flex:0 0 auto;border:0;background:transparent;padding:0 .015em;pointer-events:auto;
  color:#873f79;font:900 clamp(42px,10.5vw,135px)/1 Georgia,"Times New Roman",serif;
  text-shadow:3px 3px 0 #fff9,7px 10px 0 #8d447023;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  transform:translate(var(--dx),var(--dy)) rotate(var(--twist));
  transition:filter .2s;will-change:transform}
.play-letter:nth-child(even){color:#b34e81}
.play-letter:nth-child(3n){color:#6d4db0}
.play-letter.dragging{cursor:grabbing;filter:drop-shadow(0 10px 10px #782a7577);z-index:9}
.play-letter:focus-visible{outline:3px dashed #5a3266;outline-offset:5px;border-radius:8px}
.play-surface-hint{position:absolute;bottom:19px;left:0;right:0;text-align:center;pointer-events:none;
  font-size:11px;letter-spacing:2px;font-weight:700;color:#744369}
.play-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.play-bubble{position:absolute;bottom:-80px;color:#e34d91bb;animation:play-rise var(--duration,10s) linear infinite;
  animation-delay:var(--delay,0s);filter:drop-shadow(0 0 8px #fff9);opacity:0}
@keyframes play-rise{
  0%{transform:translate(0,0) scale(.6) rotate(-15deg);opacity:0}
  12%{opacity:.8}
  88%{opacity:.8}
  100%{transform:translate(var(--sway,55px),-750px) scale(1.25) rotate(30deg);opacity:0}}
.play-heart-pop{position:absolute;z-index:6;pointer-events:none;animation:pop-love 1.7s ease-out forwards;
  font-size:24px;filter:drop-shadow(0 2px 4px #fff)}
@keyframes pop-love{to{transform:translate(var(--pop-x,0px),-125px) rotate(35deg) scale(1.6);opacity:0}}
.surprise-word{position:absolute;z-index:10;pointer-events:none;max-width:min(80vw,320px);
  white-space:nowrap;padding:12px 19px;border:2px solid #6b3865;background:#fff9d9;color:#76345b;
  border-radius:18px;box-shadow:5px 7px 0 #994c9a55;transform:rotate(-5deg);
  font:900 clamp(18px,3.5vw,31px)/1.2 Arial,sans-serif;animation:word-surprise 3.2s ease-out forwards}
@keyframes word-surprise{0%{opacity:0;transform:translateY(24px) scale(.6) rotate(-12deg)}
  15%,72%{opacity:1;transform:translateY(0) scale(1) rotate(-5deg)}
  100%{opacity:0;transform:translateY(-55px) scale(1.15) rotate(5deg)}}
.play-mascot{position:fixed;z-index:100;top:0;left:0;font-size:58px;line-height:1;
  pointer-events:none;opacity:0;transform:translate(-50%,-105%) rotate(8deg);
  filter:drop-shadow(1px 8px 5px #67476055);transition:top .09s linear,left .09s linear,opacity .2s}
.play-mascot.is-visible{opacity:1}
.playroom-outro{text-align:center;max-width:700px;margin:22px auto 0;color:#6e486a;font-size:13px}
@media(max-width:650px){
 .playroom{padding:32px 4% 130px}
 .playroom-intro p{font-size:13px}
 .play-surface{height:clamp(430px,70vh,600px);border-radius:25px}
 .play-letter-row{width:98%;gap:0}
 .play-letter{font-size:clamp(37px,11vw,70px)}
 .play-surface-hint{font-size:9px;letter-spacing:1px}
 .play-mascot{font-size:46px}
 .surprise-word{white-space:normal;font-size:20px}
}
@media(max-width:350px){.play-letter{font-size:36px}}
@media(prefers-reduced-motion:reduce){.play-bubble{animation:none;opacity:.4;bottom:20%}
 .play-heart-pop,.surprise-word{animation:none;opacity:1}
 .play-mascot{transition:none}}


/* Wanjiku After Dark — a second, independent time waster below the pastel playground. */
.moonroom{
  padding:70px 6% 120px;position:relative;overflow:hidden;
  color:#fcebf8;background:linear-gradient(155deg,#130b25,#281430 56%,#401b38);
  border-top:6px solid #ffaddb;
}
.moon-heading{text-align:center;max-width:750px;margin:0 auto 30px}
.moon-eyebrow{display:block;font-size:11px;letter-spacing:2px;color:#ffb2da;font-weight:800;margin-bottom:18px}
.moon-heading h2{font-size:clamp(36px,5.5vw,68px);color:#fff6fc}
.moon-heading h2 em{color:#ff9bc5}
.moon-heading p{max-width:580px;margin:18px auto 0;color:#ebc7e2;font-size:14px;line-height:1.75}
.moon-stage{
  position:relative;isolation:isolate;width:min(100%,1140px);height:clamp(410px,60vh,625px);
  margin:0 auto;overflow:hidden;border:2px solid #ff8cbaaa;border-radius:32px;
  background:linear-gradient(160deg,#1a0b2e,#3b154c);
  box-shadow:0 22px 60px #05000c99,inset 0 0 90px #ff93d015;
  cursor:crosshair;touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
.moon-stage:focus-visible{outline:3px solid #ffdbed;outline-offset:5px}
.moon-stars{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,#fff9 1px,transparent 2px),
    radial-gradient(circle,#ffa3d9a0 1px,transparent 2px);
  background-size:58px 63px,107px 119px;background-position:11px 3px,30px 40px;
}
.moon-big-heart{
  pointer-events:none;position:absolute;left:50%;top:43%;transform:translate(-50%,-50%) rotate(-8deg);
  font:normal clamp(250px,38vw,510px)/1 Georgia,serif;color:#ff9fc114;
}
.moon-stage-copy{
  position:absolute;left:12px;right:12px;top:48%;transform:translateY(-50%);
  text-align:center;pointer-events:none;text-shadow:0 3px 20px #14001b;
  display:flex;align-items:center;flex-direction:column;gap:15px;
}
.moon-stage-copy span{color:#ffd8e9;font-weight:800;letter-spacing:3px;font-size:12px}
.moon-stage-copy strong{font:italic clamp(28px,5vw,64px)/1.1 Georgia,serif;color:#fff5fc}
.moon-stage-copy small{color:#ffd7e9;font:13px/1.6 Arial,sans-serif}
.moon-particle-layer{position:absolute;inset:0;pointer-events:none;z-index:3}
.moon-trail{
  position:absolute;pointer-events:none;transform:translate(-50%,-50%);
  animation:moon-trail-out 1s ease-out forwards;
  filter:drop-shadow(0 2px 5px #0008);
}
@keyframes moon-trail-out {
  0%{opacity:1;transform:translate(-50%,-50%) scale(.65)}
  100%{opacity:0;transform:translate(calc(-50% + var(--trail-drift,0px)),-160%) scale(1.3)}
}
.moon-after{text-align:center;color:#ebc7e2;max-width:700px;margin:27px auto 0;font-size:13px}
.moon-surprise{
  padding:0;margin:0;position:fixed;inset:0;width:100vw;height:100dvh;
  max-width:100vw;max-height:100dvh;border:0;background:#09040fed;
  color:#fff;overflow-y:auto;
}
.moon-surprise::backdrop{background:#07010ee9}
.moon-surprise[open]{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:moon-modal-in .3s ease both;z-index:200;
}
@keyframes moon-modal-in{from{opacity:0}to{opacity:1}}
.moon-surprise-content{
  width:100%;max-width:680px;padding:25px 20px 38px;display:flex;flex-direction:column;align-items:center;
}
.moon-gift{font-size:13px;letter-spacing:2.4px;font-weight:800;color:#ffc2de;margin-bottom:16px;text-align:center}
.moon-photo-frame{
  display:grid;place-items:center;width:min(100%,520px);height:min(62dvh,580px);
  overflow:hidden;background:#331b36;border:3px solid #ff758f;border-radius:18px;
  box-shadow:0 0 33px #ff758f77;
}
.moon-photo-frame img{max-width:100%;width:100%;height:100%;object-fit:contain}
.moon-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:15px;padding:25px;text-align:center;color:#ffc9e2}
.moon-fallback[hidden],.moon-photo-frame img[hidden]{display:none!important}
.moon-fallback span{font-size:75px}
.moon-fallback strong{font:italic 31px Georgia,serif}
.moon-fallback small{font-size:12px}
.moon-image-dismiss{
  appearance:none;padding:0;cursor:pointer;touch-action:manipulation;
  font:inherit;color:inherit;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease;
}
.moon-image-dismiss:hover{
  transform:scale(1.015);
  box-shadow:0 0 48px #ff758fab;
}
.moon-image-dismiss:focus-visible{outline:4px solid #fff6c7;outline-offset:5px}
.moon-tap-hint{
  margin:19px auto 0;color:#ffd3e3;font-size:14px;
  font-weight:700;letter-spacing:.15px;text-align:center;
}
@media(max-width:650px){
 .moonroom{padding:55px 4% 110px}
 .moon-stage{height:min(68dvh,565px);min-height:400px;border-radius:23px}
 .moon-heading p{font-size:13px}
 .moon-stage-copy strong{font-size:clamp(30px,8vw,43px)}
 .moon-surprise-content{padding:20px 14px 30px}
 .moon-photo-frame{height:58dvh}
 .moon-tap-hint{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.moon-trail{animation:none;opacity:1}.moon-surprise[open]{animation:none}}


/* Five-tap meme machine: the transitions, not extra tap effects, are the game. */
.moonroom .moon-heading p{max-width:650px}
.moon-stage{cursor:pointer}
.moon-stage-copy small{display:block;max-width:90%;font-weight:800;letter-spacing:1.4px}
.moon-stage-copy strong{margin-top:2px}
.moon-photo-stage{position:relative;width:min(100%,520px);height:min(62dvh,580px);min-height:280px;margin:0 auto;isolation:isolate}
.moon-photo-frame{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:0;overflow:hidden;background:#241326;border:3px solid #ff758f;border-radius:18px;box-shadow:0 0 33px #ff758f77;cursor:pointer;touch-action:manipulation;transform-origin:center;will-change:transform,opacity,clip-path}
.moon-photo-frame::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2}
.moon-photo-frame img{display:block;max-width:100%;width:100%;height:100%;object-fit:contain}
.moon-photo-frame:disabled{cursor:wait}
.moon-photo-frame:focus-visible{outline:4px solid #fff6c7;outline-offset:5px}
.moon-photo-stage.is-crumpling .moon-photo-frame{animation:meme-paper-crumple .7s cubic-bezier(.45,.02,.75,.25) forwards}
.moon-photo-stage.is-crumpling .moon-photo-frame::after{opacity:.8;background:repeating-linear-gradient(37deg,#fff9 0 1px,transparent 1px 22px),repeating-linear-gradient(143deg,#100b1d55 0 2px,transparent 2px 25px);animation:meme-paper-wrinkles .7s ease-in forwards}
.moon-photo-stage.is-burning .moon-photo-frame{animation:meme-burn-away 1.15s ease-in forwards}
.moon-photo-stage.is-burning .moon-photo-frame::after{opacity:1;background:linear-gradient(0deg,#fff8a9 0%,#ffb12e 5%,#ff5a1f 14%,#e51f35 23%,transparent 54%);mix-blend-mode:screen;animation:meme-flames 1.15s ease-in forwards}
.moon-photo-stage.is-jumpscare{z-index:1000}
.moon-photo-stage.is-jumpscare .moon-photo-frame{position:fixed;left:50%;top:50%;z-index:1001;width:100vw;height:100dvh;max-width:none;border:0;border-radius:0;box-shadow:none;transform:translate(-50%,-50%);animation:meme-jumpscare-out .56s cubic-bezier(.14,.8,.25,1) forwards}
.moon-photo-stage.is-jumpscare .moon-photo-frame img{object-fit:contain;background:#09040f}
.moon-photo-stage.is-pulling{animation:meme-stage-pulled 1.52s cubic-bezier(.5,.02,.8,.35) forwards}
.meme-puller{position:absolute;z-index:5;right:-30px;bottom:9%;width:40px;height:86px;opacity:0;pointer-events:none;filter:drop-shadow(0 4px 3px #0007)}
.meme-person-head{position:absolute;top:0;left:12px;width:19px;height:19px;border-radius:50%;background:#ffd0a0;border:2px solid #2a1830}
.meme-person-body{position:absolute;top:19px;left:17px;width:11px;height:31px;border-radius:7px;background:#ffb6d2;border:2px solid #2a1830}
.meme-person-arm{position:absolute;top:24px;width:24px;height:6px;border:2px solid #2a1830;border-radius:6px;background:#ffd0a0;transform-origin:4px 50%}
.meme-person-arm-left{left:1px;transform:rotate(35deg)}
.meme-person-arm-right{left:20px;transform:rotate(-35deg)}
.meme-person-leg{position:absolute;top:47px;width:7px;height:30px;border:2px solid #2a1830;border-radius:5px;background:#8b7de0;transform-origin:50% 0}
.meme-person-leg-left{left:12px}
.meme-person-leg-right{left:24px}
.moon-photo-stage.is-pulling .meme-puller{animation:meme-person-pull-walk 1.52s ease-in-out forwards}
.moon-photo-stage.is-pulling .meme-person-leg-left{animation:meme-leg-run .22s ease-in-out infinite alternate}
.moon-photo-stage.is-pulling .meme-person-leg-right{animation:meme-leg-run .22s ease-in-out .11s infinite alternate-reverse}
.moon-photo-stage.enter-crumpling .moon-photo-frame{animation:meme-paper-uncrumple .5s cubic-bezier(.18,.85,.25,1.25) both}
.moon-photo-stage.enter-burning .moon-photo-frame{animation:meme-burn-in .55s ease-out both}
.moon-photo-stage.enter-jumpscare .moon-photo-frame{animation:meme-pop-in .42s cubic-bezier(.1,1.35,.3,1) both}
.moon-photo-stage.enter-pulling .moon-photo-frame{animation:meme-slide-in .43s cubic-bezier(.15,.9,.2,1) both}
@keyframes meme-paper-crumple{0%{transform:scale(1) rotate(0);filter:none;border-radius:18px}25%{transform:scale(1.04,.88) rotate(-4deg);filter:contrast(1.3)}48%{transform:scale(.72,.68) rotate(9deg);border-radius:38% 20% 44% 28%;filter:contrast(1.5) saturate(.7)}75%{transform:scale(.38,.42) rotate(-16deg);border-radius:50%;filter:brightness(1.35)}100%{transform:scale(.02) rotate(40deg);opacity:0;border-radius:50%}}
@keyframes meme-paper-wrinkles{0%{opacity:0}25%{opacity:.95}100%{opacity:0}}
@keyframes meme-paper-uncrumple{0%{transform:scale(.04) rotate(44deg);opacity:0;border-radius:50%}55%{transform:scale(.78) rotate(-7deg);opacity:1;border-radius:28%}100%{transform:scale(1) rotate(0);opacity:1;border-radius:18px}}
@keyframes meme-burn-away{0%{clip-path:polygon(0 0,100% 0,100% 100%,90% 97%,80% 100%,70% 96%,60% 100%,50% 96%,40% 100%,30% 97%,20% 100%,10% 96%,0 100%);opacity:1}35%{clip-path:polygon(0 0,100% 0,100% 60%,90% 65%,80% 58%,70% 67%,60% 59%,50% 65%,40% 57%,30% 66%,20% 59%,10% 64%,0 58%);filter:brightness(1.2)}70%{clip-path:polygon(0 0,100% 0,100% 22%,90% 16%,80% 25%,70% 17%,60% 24%,50% 16%,40% 25%,30% 18%,20% 23%,10% 15%,0 22%);filter:brightness(1.8) saturate(1.5)}100%{clip-path:polygon(0 0,100% 0,100% 1%,90% 0,80% 1%,70% 0,60% 1%,50% 0,40% 1%,30% 0,20% 1%,10% 0,0 1%);opacity:0;filter:brightness(2.2) saturate(1.8)}}
@keyframes meme-flames{0%{opacity:0;transform:translateY(65%)}22%{opacity:1}65%{opacity:.95;transform:translateY(-10%)}100%{opacity:0;transform:translateY(-75%)}}
@keyframes meme-jumpscare-out{0%{opacity:1;transform:translate(-50%,-50%) scale(.18) rotate(-8deg)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(2deg)}62%{opacity:1;transform:translate(-50%,-50%) scale(1.34) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.52)}}
@keyframes meme-stage-pulled{0%{transform:translateX(0) rotate(0);opacity:1}28%{transform:translateX(0) rotate(0);opacity:1}100%{transform:translateX(-125vw) rotate(-9deg);opacity:0}}
@keyframes meme-person-pull-walk{0%{opacity:0;transform:translate(100px,0) scale(.8)}18%{opacity:1;transform:translate(20px,-3px) scale(1)}35%{opacity:1;transform:translate(0,0) scale(1)}52%{opacity:1;transform:translate(-35px,-4px) scale(1)}76%{opacity:1;transform:translate(-80px,0) scale(1)}100%{opacity:0;transform:translate(-135px,-2px) scale(.9)}}
@keyframes meme-leg-run{from{transform:rotate(-24deg)}to{transform:rotate(27deg)}}
@keyframes meme-burn-in{0%{clip-path:polygon(0 0,100% 0,100% 0,90% 0,80% 0,70% 0,60% 0,50% 0,40% 0,30% 0,20% 0,10% 0,0 0);opacity:.4}100%{clip-path:polygon(0 0,100% 0,100% 100%,90% 96%,80% 100%,70% 96%,60% 100%,50% 96%,40% 100%,30% 96%,20% 100%,10% 96%,0 100%);opacity:1}}
@keyframes meme-pop-in{0%{transform:scale(.18) rotate(-8deg);opacity:0}35%{transform:scale(1.08) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes meme-slide-in{0%{transform:translateX(45vw) rotate(8deg);opacity:0}100%{transform:translateX(0) rotate(0);opacity:1}}
.moon-close-button{margin-top:17px;min-height:40px;padding:10px 16px;border:1px solid #ff9fc966;border-radius:999px;background:#ffffff0d;color:#ffe8f4;font-size:11px;font-weight:800;letter-spacing:.3px;cursor:pointer;transition:background .2s,transform .2s}
.moon-close-button:hover{background:#ff9fc922;transform:translateY(-2px)}
.moon-close-button:disabled{opacity:.45;cursor:wait}
.moon-tap-hint{margin:15px auto 0;color:#ffd3e3;font-size:13px;font-weight:700;text-align:center}
@media(max-width:650px){.moon-photo-stage{height:58dvh;min-height:280px}.meme-puller{right:-20px;transform:scale(.85);transform-origin:bottom right}.moon-photo-frame{border-radius:14px}.moon-close-button{margin-top:13px}}
@media(prefers-reduced-motion:reduce){.moon-photo-stage.is-crumpling .moon-photo-frame,.moon-photo-stage.is-burning .moon-photo-frame,.moon-photo-stage.is-jumpscare .moon-photo-frame,.moon-photo-stage.is-pulling,.moon-photo-stage.is-pulling .meme-puller,.moon-photo-stage.enter-crumpling .moon-photo-frame,.moon-photo-stage.enter-burning .moon-photo-frame,.moon-photo-stage.enter-jumpscare .moon-photo-frame,.moon-photo-stage.enter-pulling .moon-photo-frame{animation-duration:.01ms;animation-iteration-count:1}.moon-photo-stage.is-pulling .meme-person-leg-left,.moon-photo-stage.is-pulling .meme-person-leg-right{animation:none}}


/* Thirty-six meme exits: the gallery is a tiny transition laboratory. */
.moon-photo-stage.is-spin .moon-photo-frame{animation:meme-spin-out .76s cubic-bezier(.4,0,.8,1) forwards}
.moon-photo-stage.is-glitch .moon-photo-frame{animation:meme-glitch-out .65s steps(6,end) forwards}
.moon-photo-stage.is-glitch .moon-photo-frame::after{opacity:.8;background:repeating-linear-gradient(0deg,#ff4d9a66 0 2px,transparent 2px 7px);mix-blend-mode:screen;animation:meme-glitch-lines .65s steps(5,end) forwards}
.moon-photo-stage.is-zipper .moon-photo-frame{animation:meme-zipper-out .68s ease-in forwards}
.moon-photo-stage.is-portal .moon-photo-frame{animation:meme-portal-out .8s cubic-bezier(.4,0,.2,1) forwards;box-shadow:0 0 70px #bf7bff}
.moon-photo-stage.is-blackhole .moon-photo-frame{animation:meme-blackhole-out .76s ease-in forwards}
.moon-photo-stage.is-confetti .moon-photo-frame{animation:meme-confetti-out .76s ease-in forwards}
.moon-photo-stage.is-confetti .moon-photo-frame::after{opacity:.9;background:radial-gradient(circle,#ffe66d 0 3px,transparent 4px),radial-gradient(circle,#ff69b4 0 4px,transparent 5px),radial-gradient(circle,#73e7ff 0 3px,transparent 4px),radial-gradient(circle,#baff7a 0 4px,transparent 5px);background-size:45px 38px,61px 57px,37px 49px,52px 43px;animation:meme-confetti-rain .76s ease-in forwards}
.moon-photo-stage.is-bounce .moon-photo-frame{animation:meme-bounce-out .76s cubic-bezier(.35,.05,.8,.45) forwards}
.moon-photo-stage.is-flip .moon-photo-frame{animation:meme-flip-out .62s ease-in forwards;transform-style:preserve-3d}
.moon-photo-stage.is-slideleft .moon-photo-frame{animation:meme-slide-left-out .56s ease-in forwards}
.moon-photo-stage.is-slideright .moon-photo-frame{animation:meme-slide-right-out .56s ease-in forwards}
.moon-photo-stage.is-slideup .moon-photo-frame{animation:meme-slide-up-out .56s ease-in forwards}
.moon-photo-stage.is-slidedown .moon-photo-frame{animation:meme-slide-down-out .56s ease-in forwards}
.moon-photo-stage.is-curtain .moon-photo-frame{animation:meme-curtain-out .65s ease-in forwards}
.moon-photo-stage.is-shrink .moon-photo-frame{animation:meme-shrink-out .62s cubic-bezier(.6,0,.9,.3) forwards}
.moon-photo-stage.is-squish .moon-photo-frame{animation:meme-squish-out .6s ease-in forwards}
.moon-photo-stage.is-swing .moon-photo-frame{transform-origin:50% 0;animation:meme-swing-out .75s ease-in forwards}
.moon-photo-stage.is-blur .moon-photo-frame{animation:meme-blur-out .7s ease-in forwards}
.moon-photo-stage.is-static .moon-photo-frame{animation:meme-static-out .68s steps(7,end) forwards}
.moon-photo-stage.is-bubble .moon-photo-frame{animation:meme-bubble-out .8s ease-in forwards}
.moon-photo-stage.is-vortex .moon-photo-frame{animation:meme-vortex-out .8s cubic-bezier(.6,0,.9,.4) forwards}
.moon-photo-stage.is-wave .moon-photo-frame{animation:meme-wave-out .76s ease-in forwards}
.moon-photo-stage.is-explosion .moon-photo-frame{animation:meme-explosion-out .65s cubic-bezier(.2,.7,.4,1) forwards}
.moon-photo-stage.is-fold .moon-photo-frame{transform-origin:top center;animation:meme-fold-out .7s ease-in forwards}
.moon-photo-stage.is-laser .moon-photo-frame{animation:meme-laser-out .55s ease-in forwards}
.moon-photo-stage.is-rainbow .moon-photo-frame{animation:meme-rainbow-out .76s ease-in forwards}
.moon-photo-stage.is-spiral .moon-photo-frame{animation:meme-spiral-out .78s cubic-bezier(.5,0,.9,.3) forwards}
.moon-photo-stage.is-stamp .moon-photo-frame{animation:meme-stamp-out .62s cubic-bezier(.2,.8,.2,1) forwards}
.moon-photo-stage.is-smoke .moon-photo-frame{animation:meme-smoke-out .9s ease-out forwards}
.moon-photo-stage.is-implode .moon-photo-frame{animation:meme-implode-out .72s cubic-bezier(.6,0,.9,.3) forwards}
.moon-photo-stage.is-slingshot .moon-photo-frame{animation:meme-slingshot-out .65s cubic-bezier(.2,.8,.4,1) forwards}
.moon-photo-stage.is-pixelate .moon-photo-frame{animation:meme-pixelate-out .7s steps(5,end) forwards;image-rendering:pixelated}
.moon-photo-stage.is-spotlight .moon-photo-frame{animation:meme-spotlight-out .78s ease-in forwards}
@keyframes meme-spin-out{to{transform:scale(.03) rotate(820deg);opacity:0;filter:blur(8px)}}
@keyframes meme-glitch-out{0%,100%{transform:translate(0);opacity:1}15%{transform:translate(-12px,2px) skewX(8deg)}30%{transform:translate(10px,-4px) skewX(-10deg);filter:hue-rotate(130deg)}48%{transform:translate(-7px,0);clip-path:inset(30% 0 35% 0)}68%{transform:translate(14px,5px);opacity:.6}100%{transform:translate(-100px,0) skewX(20deg);opacity:0;filter:hue-rotate(300deg)}}
@keyframes meme-glitch-lines{0%,100%{opacity:0}20%,65%{opacity:.9;transform:translateX(8px)}45%{transform:translateX(-9px)}}
@keyframes meme-zipper-out{0%{clip-path:inset(0);transform:scale(1)}65%{clip-path:inset(0 48%);transform:scale(1.04)}100%{clip-path:inset(0 50%);transform:scale(.96);opacity:0}}
@keyframes meme-portal-out{0%{transform:scale(1) rotate(0);border-radius:18px;opacity:1}70%{transform:scale(.3) rotate(250deg);border-radius:50%;opacity:1}100%{transform:scale(0) rotate(520deg);border-radius:50%;opacity:0}}
@keyframes meme-blackhole-out{0%{transform:scale(1);opacity:1}60%{transform:scale(.28) rotate(140deg);filter:brightness(1.8)}100%{transform:scale(.015) rotate(850deg);opacity:0;filter:brightness(3)}}
@keyframes meme-confetti-out{0%{transform:scale(1) rotate(0);opacity:1}55%{transform:scale(1.08) rotate(10deg)}100%{transform:scale(.65) rotate(-22deg) translateY(100px);opacity:0}}
@keyframes meme-confetti-rain{0%{opacity:0;background-position:0 -30px,20px -80px,30px -40px,10px -100px}35%{opacity:1}100%{opacity:0;background-position:20px 180px,80px 240px,0 210px,100px 200px}}
@keyframes meme-bounce-out{0%{transform:translateY(0) scale(1);opacity:1}28%{transform:translateY(-70px) scale(.9,1.1)}55%{transform:translateY(12px) scale(1.08,.8)}75%{transform:translateY(-12px) scale(.92,1.04)}100%{transform:translateY(160vh) scale(.65,.7);opacity:0}}
@keyframes meme-flip-out{0%{transform:perspective(700px) rotateY(0);opacity:1}55%{transform:perspective(700px) rotateY(100deg);opacity:.8}100%{transform:perspective(700px) rotateY(95deg) translateX(80px);opacity:0}}
@keyframes meme-slide-left-out{to{transform:translateX(-125vw) rotate(-12deg);opacity:0}}
@keyframes meme-slide-right-out{to{transform:translateX(125vw) rotate(12deg);opacity:0}}
@keyframes meme-slide-up-out{to{transform:translateY(-125vh) rotate(8deg);opacity:0}}
@keyframes meme-slide-down-out{to{transform:translateY(125vh) rotate(-8deg);opacity:0}}
@keyframes meme-curtain-out{0%{clip-path:inset(0);opacity:1}100%{clip-path:inset(0 50%);opacity:0}}
@keyframes meme-shrink-out{0%{transform:scale(1);opacity:1}70%{transform:scale(.16);opacity:.7}100%{transform:scale(0);opacity:0}}
@keyframes meme-squish-out{0%{transform:scale(1)}35%{transform:scaleX(1.45) scaleY(.18)}65%{transform:scaleX(.65) scaleY(.55)}100%{transform:scaleX(1.8) scaleY(.01);opacity:0}}
@keyframes meme-swing-out{0%{transform:rotate(0) translateY(0);opacity:1}45%{transform:rotate(22deg) translateY(20px)}75%{transform:rotate(-28deg) translateY(65px)}100%{transform:rotate(65deg) translateY(110vh);opacity:0}}
@keyframes meme-blur-out{0%{filter:blur(0);transform:scale(1);opacity:1}65%{filter:blur(15px);transform:scale(1.12);opacity:.75}100%{filter:blur(30px);transform:scale(1.3);opacity:0}}
@keyframes meme-static-out{0%,100%{transform:translateX(0);filter:grayscale(0);opacity:1}15%{transform:translateX(-9px);filter:grayscale(1) contrast(2)}30%{transform:translateX(10px);clip-path:inset(10% 0 65% 0)}50%{transform:translateX(-12px);filter:invert(1)}70%{transform:translateX(8px);clip-path:inset(55% 0 10% 0)}100%{transform:scale(1.1);opacity:0;filter:grayscale(1)}}
@keyframes meme-bubble-out{0%{transform:scale(1);border-radius:18px;filter:blur(0);opacity:1}55%{transform:scale(1.2);border-radius:45%;filter:blur(2px)}100%{transform:scale(.05);border-radius:50%;filter:blur(12px);opacity:0}}
@keyframes meme-vortex-out{0%{transform:rotate(0) scale(1);opacity:1}100%{transform:rotate(1080deg) scale(.02);opacity:0;filter:blur(8px)}}
@keyframes meme-wave-out{0%{transform:skewY(0) translateX(0);opacity:1}35%{transform:skewY(13deg) translateX(30px)}70%{transform:skewY(-18deg) translateX(-30px)}100%{transform:skewY(24deg) translateX(120vw);opacity:0}}
@keyframes meme-explosion-out{0%{transform:scale(1);opacity:1;filter:brightness(1)}25%{transform:scale(1.18);filter:brightness(2)}100%{transform:scale(2.8) rotate(15deg);opacity:0;filter:brightness(3) blur(8px)}}
@keyframes meme-fold-out{0%{transform:perspective(800px) rotateX(0) scaleY(1);opacity:1}100%{transform:perspective(800px) rotateX(-90deg) scaleY(.05);opacity:0}}
@keyframes meme-laser-out{0%{clip-path:inset(0);opacity:1;filter:brightness(1)}60%{clip-path:inset(48% 0);opacity:1;filter:brightness(2)}100%{clip-path:inset(49% 0);opacity:0;filter:brightness(3)}}
@keyframes meme-rainbow-out{0%{filter:hue-rotate(0);transform:rotate(0) scale(1);opacity:1}100%{filter:hue-rotate(720deg);transform:rotate(20deg) scale(.1);opacity:0}}
@keyframes meme-spiral-out{0%{transform:rotate(0) scale(1);opacity:1}100%{transform:rotate(-1080deg) scale(.02);opacity:0;filter:blur(5px)}}
@keyframes meme-stamp-out{0%{transform:scale(1);opacity:1}30%{transform:scale(1.25) rotate(-3deg)}55%{transform:scale(.82) rotate(4deg)}100%{transform:scale(1.5) rotate(-12deg) translateY(100vh);opacity:0}}
@keyframes meme-smoke-out{0%{transform:scale(1);opacity:1;filter:blur(0)}40%{transform:scale(1.06);filter:blur(4px);opacity:.8}100%{transform:scale(1.4) translateY(-25px);filter:blur(24px);opacity:0}}
@keyframes meme-implode-out{0%{transform:scale(1);opacity:1}55%{transform:scale(1.08,.92);filter:brightness(1.5)}100%{transform:scale(.015,.02);opacity:0;filter:brightness(3)}}
@keyframes meme-slingshot-out{0%{transform:translateX(0) rotate(0);opacity:1}25%{transform:translateX(-35px) rotate(-8deg)}100%{transform:translateX(150vw) rotate(32deg);opacity:0}}
@keyframes meme-pixelate-out{0%{transform:scale(1);opacity:1;filter:none}45%{transform:scale(1.05);filter:blur(1px) contrast(2)}100%{transform:scale(.9);opacity:0;filter:blur(5px) contrast(4)}}
@keyframes meme-spotlight-out{0%{clip-path:circle(75% at 50% 50%);opacity:1}60%{clip-path:circle(22% at 50% 50%);opacity:1}100%{clip-path:circle(0% at 50% 50%);opacity:0}}
.moon-photo-stage:is(.enter-spin,.enter-glitch,.enter-zipper,.enter-portal,.enter-blackhole,.enter-confetti,.enter-bounce,.enter-flip,.enter-slideleft,.enter-slideright,.enter-slideup,.enter-slidedown,.enter-curtain,.enter-shrink,.enter-squish,.enter-swing,.enter-blur,.enter-static,.enter-bubble,.enter-vortex,.enter-wave,.enter-explosion,.enter-fold,.enter-laser,.enter-rainbow,.enter-spiral,.enter-stamp,.enter-smoke,.enter-implode,.enter-slingshot,.enter-pixelate,.enter-spotlight) .moon-photo-frame{animation:meme-enter-pop .42s cubic-bezier(.1,1.35,.3,1) both}
.moon-photo-stage.enter-slideleft .moon-photo-frame{animation:meme-enter-from-left .42s cubic-bezier(.15,.9,.2,1) both}
.moon-photo-stage.enter-slideright .moon-photo-frame{animation:meme-enter-from-right .42s cubic-bezier(.15,.9,.2,1) both}
.moon-photo-stage.enter-slideup .moon-photo-frame{animation:meme-enter-from-bottom .42s cubic-bezier(.15,.9,.2,1) both}
.moon-photo-stage.enter-slidedown .moon-photo-frame{animation:meme-enter-from-top .42s cubic-bezier(.15,.9,.2,1) both}
@keyframes meme-enter-pop{0%{transform:scale(.06) rotate(18deg);opacity:0;filter:blur(8px)}75%{transform:scale(1.06) rotate(-2deg);opacity:1;filter:blur(0)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes meme-enter-from-left{from{transform:translateX(-70vw) rotate(-9deg);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes meme-enter-from-right{from{transform:translateX(70vw) rotate(9deg);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes meme-enter-from-bottom{from{transform:translateY(70vh) scale(.85);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes meme-enter-from-top{from{transform:translateY(-70vh) scale(.85);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){
 .moon-photo-stage.is-spin .moon-photo-frame,.moon-photo-stage.is-glitch .moon-photo-frame,.moon-photo-stage.is-zipper .moon-photo-frame,.moon-photo-stage.is-portal .moon-photo-frame,.moon-photo-stage.is-blackhole .moon-photo-frame,.moon-photo-stage.is-confetti .moon-photo-frame,.moon-photo-stage.is-bounce .moon-photo-frame,.moon-photo-stage.is-flip .moon-photo-frame,.moon-photo-stage.is-slideleft .moon-photo-frame,.moon-photo-stage.is-slideright .moon-photo-frame,.moon-photo-stage.is-slideup .moon-photo-frame,.moon-photo-stage.is-slidedown .moon-photo-frame,.moon-photo-stage.is-curtain .moon-photo-frame,.moon-photo-stage.is-shrink .moon-photo-frame,.moon-photo-stage.is-squish .moon-photo-frame,.moon-photo-stage.is-swing .moon-photo-frame,.moon-photo-stage.is-blur .moon-photo-frame,.moon-photo-stage.is-static .moon-photo-frame,.moon-photo-stage.is-bubble .moon-photo-frame,.moon-photo-stage.is-vortex .moon-photo-frame,.moon-photo-stage.is-wave .moon-photo-frame,.moon-photo-stage.is-explosion .moon-photo-frame,.moon-photo-stage.is-fold .moon-photo-frame,.moon-photo-stage.is-laser .moon-photo-frame,.moon-photo-stage.is-rainbow .moon-photo-frame,.moon-photo-stage.is-spiral .moon-photo-frame,.moon-photo-stage.is-stamp .moon-photo-frame,.moon-photo-stage.is-smoke .moon-photo-frame,.moon-photo-stage.is-implode .moon-photo-frame,.moon-photo-stage.is-slingshot .moon-photo-frame,.moon-photo-stage.is-pixelate .moon-photo-frame,.moon-photo-stage.is-spotlight .moon-photo-frame{animation-duration:.01ms;animation-iteration-count:1}
}

/* Five-tap meme gallery: preserve every meme's complete original aspect ratio. */
.moon-photo-stage .moon-photo-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}