/* LETTERS → WORDS — Mama and Dada, The Magic Seeds, Pip's Picture.
   See assets/games-f.js. Every class is prefixed (md- mg- pw- lw-), all four
   checked unused against index.html and every games-*.css first. The header
   takes the top ~15% of the stage and the play-cast Mo stands over the bottom
   left, so nothing to tap goes there. */

/* ---- shared -------------------------------------------------------- */
.md-say,.mg-say,.pw-say{position:absolute;left:24%;right:6%;bottom:5%;z-index:6;pointer-events:none;
  background:#fff;border-radius:18px;padding:10px 16px;font-weight:800;font-size:clamp(14px,2.6vw,20px);
  color:#3A2A22;box-shadow:0 6px 18px rgba(0,0,0,.14);opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity .25s,transform .35s cubic-bezier(0.34,1.56,0.64,1)}
.md-say.on,.mg-say.on,.pw-say.on{opacity:1;transform:none}
.md-say.her,.mg-say.her,.pw-say.her{background:#FFF3C4;color:#6A4A10}
.md-say::after,.mg-say::after,.pw-say::after{content:'';position:absolute;left:14%;bottom:-10px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
.md-say.her::after,.mg-say.her::after,.pw-say.her::after{border-top-color:#FFF3C4}
@keyframes lwNo{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px) rotate(-3deg)}75%{transform:translateX(7px) rotate(3deg)}}
.lw-no{animation:lwNo .42s}
.lw-tile-face{display:block;width:100%;height:100%}

/* ==================================================== MAMA AND DADA == */
.md-scene{position:absolute;inset:0;overflow:hidden}
.md-wall{position:absolute;inset:0 0 28% 0;
  background-color:#FBE6CF;
  background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.55) 0 5px,transparent 6px),
                   radial-gradient(circle at 70% 70%,rgba(255,255,255,.5) 0 4px,transparent 5px),
                   linear-gradient(180deg,#FFF1DF,#F5D9BB);
  background-size:120px 120px,90px 90px,100% 100%}
.md-floor{position:absolute;left:0;right:0;bottom:0;height:28%;
  background-color:#C9A06A;
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,transparent 2px 60px),linear-gradient(180deg,#D9B380,#B98F58)}
.md-shelf{position:absolute;left:6%;right:6%;top:40%;height:2.6%;border-radius:4px;
  background:linear-gradient(180deg,#B47A45,#8C5A32);box-shadow:0 6px 10px rgba(0,0,0,.18)}
.md-frames{position:absolute;left:4%;right:4%;top:16%;height:24%;display:flex;justify-content:space-evenly;align-items:flex-end;gap:2%}
.md-frame{position:relative;width:20%;aspect-ratio:1/1.15;max-height:100%;
  background:#FFF8E8;border:0.55vw solid #C98A3A;border-radius:6px;
  box-shadow:inset 0 0 0 3px #F6C56B,0 6px 12px rgba(0,0,0,.14);
  transition:transform .4s cubic-bezier(0.34,1.56,0.64,1)}
.md-frame.md-small{width:10%;border-color:#F0A93B;align-self:flex-end;opacity:0;transform:scale(.4);transition:opacity .4s,transform .5s cubic-bezier(0.34,1.56,0.64,1)}
.md-frame.md-small.md-up{opacity:1;transform:none}
.md-frame.md-next{transform:scale(1.06);box-shadow:inset 0 0 0 3px #F6C56B,0 0 0 5px rgba(255,206,61,.55),0 6px 12px rgba(0,0,0,.14)}
.md-photo{position:absolute;inset:6%;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.04) 0 6px,transparent 6px 12px)}
.md-photo svg{width:96%;height:96%;opacity:0;transform:scale(.3);transition:opacity .35s,transform .6s cubic-bezier(0.34,1.56,0.64,1)}
.md-frame.md-up .md-photo svg{opacity:1;transform:none}
.md-plate{position:absolute;left:30%;right:30%;bottom:-9%;height:9%;background:#F6C56B;border-radius:3px}

.md-row{position:absolute;left:3%;right:3%;top:46%;height:21%;touch-action:none;cursor:grab}
.md-tiles{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8%;transition:gap .5s cubic-bezier(0.34,1.56,0.64,1)}
.md-tiles.md-joined{gap:0.6%}
.md-tile,.md-chunk,.md-echo{height:100%;width:min(24%,22vh);border-radius:14px;border:0;padding:0;flex:0 0 auto;
  background:#FFF8E8;box-shadow:inset 0 0 0 3px #D9C7A8,0 6px 0 #C9B48E,0 10px 16px rgba(0,0,0,.14);
  font-weight:900;font-size:clamp(28px,7vh,56px);color:#6A5A4A;display:flex;align-items:center;justify-content:center;
  transition:background .25s,color .25s,box-shadow .25s,transform .35s cubic-bezier(0.34,1.56,0.64,1);font-family:inherit}
.md-tile.lit{background:#FFE08A;color:#3A2A22;box-shadow:inset 0 0 0 3px #F0A93B,0 6px 0 #C98A3A,0 0 24px rgba(255,206,61,.6);transform:translateY(-4px)}
.md-tiles.md-joined .md-tile{border-radius:0}
.md-tiles.md-joined .md-tile:first-child{border-radius:14px 0 0 14px}
.md-tiles.md-joined .md-tile:nth-child(2){border-radius:0 14px 14px 0}
.md-chunk{width:min(40%,36vh);margin-left:4%;background:#FFE08A;color:#3A2A22;box-shadow:inset 0 0 0 3px #F0A93B,0 6px 0 #C98A3A,0 10px 16px rgba(0,0,0,.14);
  opacity:0;transform:scale(.5);cursor:pointer}
.md-chunk.in{opacity:1;transform:none;animation:mdBreathe 1.6s .4s infinite}
@keyframes mdBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.md-chunk.md-stamp{animation:none;transform:scale(.96)}
.md-echo{width:min(40%,36vh);background:#FFE08A;color:#3A2A22;box-shadow:inset 0 0 0 3px #F0A93B,0 6px 0 #C98A3A;
  animation:mdStamp .5s cubic-bezier(0.34,1.56,0.64,1) both;margin-left:2%}
@keyframes mdStamp{from{opacity:0;transform:scale(1.6) translateY(-20%)}to{opacity:1;transform:none}}
.md-tiles.md-doubled .md-chunk{margin-left:0}
.md-tiles.md-chunked .md-tile{width:0;min-width:0;overflow:hidden;box-shadow:none;transition:width .4s,box-shadow .2s}
.md-tiles.md-chunked .md-chunk{margin-left:0}
.md-dipper{position:absolute;left:96%;top:-40%;width:12%;aspect-ratio:60/90;pointer-events:none;
  transform:translateX(-50%) rotate(-18deg);transition:left .5s cubic-bezier(0.34,1.56,0.64,1),transform .3s;opacity:.85}
.md-dipper.held{opacity:1;transform:translateX(-50%) rotate(-32deg) scale(1.1);transition:transform .3s}
.md-dipper.md-auto{transition:left .8s ease-in-out,transform .3s}
.md-dipper .md-drip{transform-origin:30px 74px;animation:mdDrip 1.1s infinite}
@keyframes mdDrip{0%{transform:scaleY(.6)}60%{transform:scaleY(1.1)}100%{transform:scaleY(.6)}}
.md-scene.md-done .md-wall{background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.55) 0 5px,transparent 6px),
  radial-gradient(circle at 70% 70%,rgba(255,255,255,.5) 0 4px,transparent 5px),linear-gradient(180deg,#FFF6E4,#FFE2B8)}
.md-scene.md-done .md-frame{animation:mdSway 2.4s ease-in-out infinite}
.md-scene.md-done .md-frame:nth-child(2n){animation-delay:.6s}
@keyframes mdSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.md-scene.md-done .md-row{opacity:.35}

/* ==================================================== THE MAGIC SEEDS = */
.mg-scene{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#BFE7FA 0,#E8F6FD 55%,#E8F6FD 100%)}
.mg-sky{position:absolute;inset:0 0 40% 0}
.mg-sun{position:absolute;right:6%;top:15%;width:12%;aspect-ratio:1;border-radius:50%;background:#FFCE3D;box-shadow:0 0 0 10px rgba(255,206,61,.25),0 0 40px rgba(255,206,61,.6)}
.mg-cloud{position:absolute;top:19%;width:16%;height:6%;border-radius:50px;background:#fff;opacity:.9}
.mg-cloud::before,.mg-cloud::after{content:'';position:absolute;background:#fff;border-radius:50%;width:55%;aspect-ratio:1;bottom:20%;left:8%}
.mg-cloud::after{left:42%;width:65%;bottom:30%}
.mg-cloud.c1{left:6%}.mg-cloud.c2{left:52%;top:23%;width:12%}
.mg-fence{position:absolute;left:0;right:0;top:55%;height:7%;
  background:repeating-linear-gradient(90deg,#FFF3DF 0 14px,transparent 14px 34px);
  border-top:5px solid #FFF3DF;border-bottom:5px solid #FFF3DF;opacity:.9}
.mg-bed{position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,#8AD37F 0,#6BC46A 18%,#7A4E2A 18%,#5E3A1E 100%)}
.mg-bed{display:flex;align-items:flex-end;justify-content:space-evenly;padding:0 3% 5% 31%}
.mg-hole{position:relative;width:8%;height:7%;border-radius:50%;background:#3F2612;box-shadow:inset 0 3px 6px rgba(0,0,0,.4)}
.mg-flower{position:absolute;left:50%;bottom:30%;width:250%;transform:translateX(-50%) scaleY(0);transform-origin:50% 100%;
  transition:transform .9s cubic-bezier(0.34,1.56,0.64,1)}
.mg-flower.up{transform:translateX(-50%) scaleY(1)}
.mg-hole:nth-child(even) .mg-flower{bottom:110%}
.mg-fsvg{width:100%;height:auto;display:block;overflow:visible}
.mg-flower .mg-face{position:absolute;left:50%;top:0;width:64%;aspect-ratio:1;transform:translate(-50%,0);}
.mg-flower .mg-face svg{width:100%;height:100%}
.mg-flower.up .mg-bloom{animation:mgBob 2.6s ease-in-out infinite}
@keyframes mgBob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.mg-flower.up .mg-bloom{transform-origin:50px 100px}

.mg-sign{position:absolute;right:5%;top:16%;width:22%;aspect-ratio:1/1.35;pointer-events:none}
.mg-want{position:absolute;left:0;right:0;top:0;aspect-ratio:1;background:#fff;border-radius:16px;
  box-shadow:inset 0 0 0 4px #F6C56B,0 8px 16px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.6) rotate(-6deg);transition:opacity .3s,transform .5s cubic-bezier(0.34,1.56,0.64,1)}
.mg-want.in{opacity:1;transform:none}
.mg-want svg{width:84%;height:84%}
.mg-post{position:absolute;left:46%;top:88%;width:8%;height:40%;background:#8C5A32;border-radius:3px}

.mg-pot{position:absolute;left:6%;top:18%;width:56%;height:15%;display:flex;align-items:center;justify-content:center;gap:2%;
  background:#E07A5F;border-radius:10px 10px 26px 26px;box-shadow:inset 0 -14px 0 #C2553F,0 8px 16px rgba(0,0,0,.16)}
.mg-pot::before{content:'';position:absolute;left:-3%;right:-3%;top:-10%;height:22%;background:#E88C72;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.14)}
.mg-tile{position:relative;height:74%;aspect-ratio:1/1.1;border-radius:12px;background:#FFF8E8;color:#3A2A22;
  font-weight:900;font-size:clamp(26px,6vh,50px);display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 3px #D9C7A8,0 5px 0 #C9B48E}
.mg-slot{position:relative;height:74%;aspect-ratio:1/1.1;border-radius:12px;border:3px dashed #FFF3DF;display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;transition:border-color .3s}
.mg-slot.mg-filled{border-color:transparent}
.mg-slot .mg-tile{height:100%;background:#FFE08A;box-shadow:inset 0 0 0 3px #F0A93B,0 5px 0 #C98A3A;animation:mgDrop .45s cubic-bezier(0.34,1.56,0.64,1) both}
.mg-slot.mg-other .mg-tile{background:#E8E8E8;box-shadow:inset 0 0 0 3px #B0B0B0,0 5px 0 #9A9A9A;animation:mgWilt 2.4s .2s both}
@keyframes mgDrop{from{transform:translateY(-120%) scale(.7);opacity:0}to{transform:none;opacity:1}}
@keyframes mgWilt{0%{transform:none}70%{transform:none;opacity:1}100%{transform:translateY(40%) scale(.6);opacity:0}}
.mg-base{display:flex;gap:2%;height:100%;align-items:center}
.mg-base.in .mg-tile{animation:mgIn .5s cubic-bezier(0.34,1.56,0.64,1) both}
@keyframes mgIn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

.mg-packets{position:absolute;left:10%;right:6%;top:37%;height:15%;display:flex;align-items:center;justify-content:center;gap:6%}
.mg-packet{position:relative;height:100%;aspect-ratio:1/1.25;border:0;padding:0;border-radius:8px;background:#FFF8E8;font-family:inherit;
  box-shadow:inset 0 0 0 3px #6EC6F0,0 6px 0 #4A9FD0,0 10px 16px rgba(0,0,0,.14);cursor:pointer;
  opacity:0;transform:translateY(40%) scale(.7);transition:opacity .3s,transform .45s cubic-bezier(0.34,1.56,0.64,1),box-shadow .2s}
.mg-packet.in{opacity:1;transform:none}
.mg-packet i{position:absolute;left:12%;right:12%;top:8%;height:22%;border-radius:6px;background:#6BC46A}
.mg-packet i::after{content:'';position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;border-radius:50%;background:#FFCE3D;transform:translate(-50%,-50%)}
.mg-packet span{position:absolute;left:0;right:0;top:36%;bottom:0;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:clamp(26px,5.6vh,46px);color:#3A2A22}
.mg-packet.mg-fly{opacity:.25;transform:translateY(-30%) scale(.8)}
.mg-rainbow{position:absolute;left:10%;right:10%;top:28%;aspect-ratio:2/1;z-index:0;opacity:0;transition:opacity 1.2s;pointer-events:none;
  background:radial-gradient(circle at 50% 100%,transparent 60%,#FF8FA6 60.5% 66%,#FFCE3D 66.5% 72%,#8AD37F 72.5% 78%,#6EC6F0 78.5% 84%,#C9A0F0 84.5% 90%,transparent 90.5%)}
.mg-scene.mg-done .mg-rainbow{opacity:.8}
.mg-bee{position:absolute;left:30%;top:36%;width:5%;aspect-ratio:1;border-radius:50%;background:repeating-linear-gradient(90deg,#FFCE3D 0 4px,#3A2A22 4px 8px);
  opacity:0;box-shadow:-4px -6px 0 -1px rgba(255,255,255,.8),4px -6px 0 -1px rgba(255,255,255,.8)}
.mg-scene.mg-done .mg-bee{opacity:1;animation:mgBee 6s ease-in-out infinite}
@keyframes mgBee{0%{transform:translate(0,0)}25%{transform:translate(400%,-60%)}50%{transform:translate(900%,20%)}75%{transform:translate(400%,80%)}100%{transform:translate(0,0)}}
.mg-scene.mg-done .mg-pot,.mg-scene.mg-done .mg-packets,.mg-scene.mg-done .mg-sign{opacity:.3;transition:opacity .8s}
/* the flowers are the payoff, so Mo's words sit in the empty band above the fence, not over the bed */
.mg-say{bottom:auto;top:44%;left:8%;right:8%}
.mg-say::after{left:auto;right:18%}

/* ==================================================== PIP'S PICTURE == */
.pw-scene{position:absolute;inset:0;overflow:hidden}
.pw-wall{position:absolute;inset:0 0 30% 0;background:linear-gradient(180deg,#EAF6FF,#D4EBFA)}
.pw-floor{position:absolute;left:0;right:0;bottom:0;height:30%;
  background-color:#C9A06A;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,transparent 2px 60px),linear-gradient(180deg,#D9B380,#B98F58)}
.pw-easel{position:absolute;left:50%;top:15%;width:min(62%,38vh);aspect-ratio:1/1;transform:translateX(-50%)}
.pw-paper{position:absolute;inset:0;background:#fff;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.16);
  border:0.5vw solid #E8B86D;overflow:hidden}
.pw-legs{position:absolute;left:10%;right:10%;top:100%;height:40%;pointer-events:none;
  background:linear-gradient(115deg,transparent 47%,#8C5A32 47% 53%,transparent 53%),linear-gradient(65deg,transparent 47%,#8C5A32 47% 53%,transparent 53%)}
.pw-pic{position:absolute;inset:0}
.pw-pic>div{position:absolute;inset:0}
.pw-p{position:absolute}
.pw-p svg{width:100%;height:100%;filter:grayscale(1) brightness(.85) contrast(1.3);transition:filter .9s}   /* brightness 1.25 turned yellow Pip white on white */
.pw-paper.pw-colour .pw-p svg{filter:none}
.pw-mat{left:8%;right:8%;bottom:4%;height:60%}
.pw-mo{left:30%;width:40%;bottom:14%;height:70%}
.pw-sun{right:6%;top:4%;width:36%;height:40%}
.pw-pip{left:22%;bottom:6%;width:40%;height:60%}
.pw-dad{left:24%;bottom:2%;width:44%;height:84%}
.pw-hat{left:35%;top:1%;width:26%;height:24%}
.pw-paper.pw-live .pw-mo{animation:pwSit 1.4s ease-in-out}
@keyframes pwSit{0%{transform:translateY(-40%)}60%{transform:translateY(4%)}100%{transform:none}}
.pw-paper.pw-live .pw-sun{animation:pwSun 2.4s ease-in-out infinite}
@keyframes pwSun{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.pw-paper.pw-live .pw-pip{animation:pwHop .7s ease-in-out 3}
@keyframes pwHop{0%,100%{transform:none}50%{transform:translateY(-16%)}}
.pw-paper.pw-live .pw-hat{animation:pwHat 1.2s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes pwHat{from{transform:translateY(-120%) rotate(-20deg)}to{transform:none}}
.pw-line{position:absolute;left:22%;right:4%;top:58%;height:9%;display:flex;gap:2%;align-items:center;justify-content:center}
.pw-slot{position:relative;flex:1 1 0;max-width:22%;height:100%;border-radius:12px;border:3px dashed #B9C2CC;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center}
/* five words do not fit on one row on a phone, and with a fixed height the
   second row landed ON the first — half the words hidden. Auto height, real row gap. */
.pw-tray{position:absolute;left:22%;right:4%;top:69%;display:flex;column-gap:3%;row-gap:12px;align-items:center;align-content:flex-start;justify-content:center;flex-wrap:wrap}
.pw-word{position:relative;height:100%;min-width:14%;padding:0 4%;border:0;border-radius:12px;background:#FFF8E8;font-family:inherit;
  font-weight:900;font-size:clamp(18px,3.6vh,30px);color:#3A2A22;cursor:pointer;
  box-shadow:inset 0 0 0 3px #D9C7A8,0 5px 0 #C9B48E,0 8px 14px rgba(0,0,0,.14);
  transition:transform .55s cubic-bezier(0.34,1.56,0.64,1),background .25s,box-shadow .25s}
.pw-slot .pw-word{height:86%;min-width:80%}
.pw-word.lit{background:#FFE08A;box-shadow:inset 0 0 0 3px #F0A93B,0 5px 0 #C98A3A,0 0 20px rgba(255,206,61,.6)}
.pw-word.placed{z-index:3;background:#FFF3C4;box-shadow:inset 0 0 0 3px #F0A93B,0 5px 0 #C98A3A}
.pw-tray .pw-word{height:clamp(46px,6.2vh,62px);transform:rotate(calc((var(--j) - var(--n) / 2) * 3deg))}
.pw-crayons{position:absolute;right:6%;bottom:6%;width:14%;height:5%;display:flex;gap:6%;align-items:flex-end}
.pw-crayons i{flex:1;height:100%;border-radius:3px 3px 1px 1px}
.pw-crayons i:nth-child(1){background:#E45D7A}.pw-crayons i:nth-child(2){background:#6EC6F0}
.pw-crayons i:nth-child(3){background:#FFCE3D}.pw-crayons i:nth-child(4){background:#6BC46A}
.pw-scene.pw-done .pw-wall{background:linear-gradient(180deg,#FFF6E4,#FFE2B8)}
.pw-scene.pw-done .pw-easel{animation:pwDone 1.2s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes pwDone{0%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06) rotate(-2deg)}100%{transform:translateX(-50%) scale(1)}}