/* Mo & Pip — the rhyming clouds. Every class carries the rh- prefix:
   index.html is one stylesheet shared by sixty games. */
.rh-scene{position:absolute;inset:0;overflow:hidden}
.rh-sky{position:absolute;inset:0;background:linear-gradient(180deg,#6FBFF0 0%,#A9DDF7 45%,#E3F4FC 70%)}
.rh-hill{position:absolute;left:-12%;right:-12%;border-radius:50% 50% 0 0/100% 100% 0 0}
.rh-hill.far{bottom:0;height:34%;background:#9FD67C}
.rh-hill.near{bottom:0;height:calc(var(--cast-h) + 2vh);left:-20%;right:-20%;background:#7CC466}

/* the sun carries the letter — it is the thing the words rhyme with */
.rh-sun{position:absolute;left:3%;top:13%;width:clamp(72px,19vw,112px);z-index:3;
  transition:transform .35s var(--spring)}
.rh-ssvg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 4px 0 rgba(0,0,0,.08))}
.rh-rays{transform-origin:60px 60px;animation:rhRays 14s linear infinite}
.rh-sun.glow{transform:scale(1.14)}
.rh-sun.glow .rh-rays{animation-duration:3s}
.rh-sun.bop{animation:rhBop .5s var(--spring)}
@keyframes rhRays{to{transform:rotate(360deg)}}
@keyframes rhBop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* the flower bed: eight thirsty buds along the top of the near hill */
.rh-bed{position:absolute;left:4%;right:4%;bottom:calc(var(--cast-h) - 14px);height:clamp(80px,17vh,140px);
  display:flex;align-items:flex-end;justify-content:space-around;z-index:4}
.rh-flower{width:8%;max-width:56px;height:100%;position:relative}
.rh-fsvg{width:100%;height:100%;overflow:visible}
.rh-stem{transform-origin:30px 120px;transform:scaleY(.55);transition:transform .8s var(--spring)}
.rh-bloom{transform-origin:30px 48px;transform:scale(0);opacity:0;transition:transform .7s var(--spring) .35s,opacity .3s linear .35s}
.rh-bud{transform-origin:30px 62px;transform:translateY(30px);transition:transform .8s var(--spring),opacity .3s}
.rh-flower[data-stage="1"] .rh-stem{transform:scaleY(1)}
.rh-flower[data-stage="1"] .rh-bloom{transform:scale(1);opacity:1}
.rh-flower[data-stage="1"] .rh-bud{opacity:0;transform:translateY(0) scale(.2)}
.rh-flower.fed .rh-fsvg{filter:brightness(1.25)}
.rh-bloomed .rh-flower .rh-bloom{animation:rhSway 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.3s)}
@keyframes rhSway{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.04) rotate(4deg)}}

/* the clouds drift right to left across the top half */
.rh-field{position:absolute;left:0;right:0;top:11%;height:50%;z-index:5}
.rh-cloud{position:absolute;left:100%;width:clamp(104px,26vw,150px);padding:0;border:0;background:none;
  cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;
  animation:rhDrift var(--dur) linear forwards;filter:drop-shadow(0 6px 0 rgba(20,60,110,.10))}
.rh-csvg{width:100%;height:auto;display:block}
.rh-word{position:absolute;left:0;right:0;top:50%;text-align:center;font-weight:900;
  font-size:clamp(17px,4.6vw,24px);color:#2A2456;letter-spacing:.02em;pointer-events:none}
.rh-grey .rh-word{color:#3B3F47}
.rh-silly{display:block;font-size:10px;font-weight:700;font-style:normal;color:#9A6BD1;letter-spacing:.06em;margin-top:-2px}
@keyframes rhDrift{from{transform:translateX(0)}to{transform:translateX(calc(-100vw - 100%))}}
.rh-cloud.rh-held{z-index:8;animation:none}
.rh-cloud.rh-held .rh-csvg{animation:rhSwell .5s var(--spring)}
@keyframes rhSwell{0%{transform:scale(1)}50%{transform:scale(1.16)}100%{transform:scale(1.06)}}
.rh-cloud.rh-huff{animation-play-state:paused}
.rh-cloud.rh-huff .rh-csvg{animation:rhHuff .55s ease-in-out}
@keyframes rhHuff{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px) rotate(-4deg)}75%{transform:translateX(7px) rotate(4deg)}}
.rh-cloud.rh-off{transition:opacity .6s,transform .8s ease-in;opacity:0;transform:translateX(-40vw)}
.rh-cloud.rh-spent{transition:opacity .5s;opacity:0}

/* rain: three drops from the cloud's base, while it sits over the flower */
.rh-cloud.rh-raining::before,.rh-cloud.rh-raining::after,.rh-cloud.rh-raining .rh-word::after{
  content:"";position:absolute;top:84%;width:8px;height:14px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;
  background:#5FB1DD;animation:rhDrop .55s linear infinite}
.rh-cloud.rh-raining::before{left:30%}
.rh-cloud.rh-raining::after{left:62%;animation-delay:.2s}
.rh-cloud.rh-raining .rh-word::after{left:46%;top:60%;animation-delay:.36s}
@keyframes rhDrop{from{transform:translateY(0);opacity:1}to{transform:translateY(46px);opacity:0}}

/* the "your turn" face: a beat of quiet for the child to say the word */
.rh-turn{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:9;
  width:clamp(64px,16vw,96px);text-align:center;pointer-events:none;transition:transform .3s var(--spring),opacity .2s}
.rh-turn svg{width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.1))}
.rh-turn b{display:block;font-size:12px;color:#7A4A12;margin-top:2px}
.rh-turn.on{opacity:1;transform:translate(-50%,-50%) scale(1);animation:rhPulse .9s ease-in-out infinite .3s}
@keyframes rhPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}

/* the rainbow, drawn arc by arc when every flower is up */
.rh-rainbow{position:absolute;left:2%;right:2%;top:12%;height:46%;z-index:2;opacity:0;transition:opacity .4s}
.rh-rsvg{width:100%;height:100%}
.rh-arc{stroke-dasharray:600;stroke-dashoffset:600}
.rh-rainbow-on .rh-rainbow{opacity:1}
.rh-rainbow-on .rh-arc{animation:rhDraw 1.4s ease-out forwards;animation-delay:calc(var(--i) * .12s)}
@keyframes rhDraw{to{stroke-dashoffset:0}}

/* the chant row: the eight little clouds along the rainbow, bouncing on the beat */
.rh-chant{position:absolute;left:2%;right:2%;top:12%;height:46%;z-index:6;opacity:0;transition:opacity .4s;pointer-events:none}
.rh-chant.on{opacity:1}
.rh-mini{position:absolute;width:clamp(54px,12vw,84px);transform:translate(-50%,-60%)}
.rh-mini .rh-csvg{width:100%}
.rh-mini b{position:absolute;left:0;right:0;top:48%;text-align:center;font-size:clamp(11px,2.9vw,15px);color:#2A2456}
.rh-mini.bop{animation:rhMiniBop .6s var(--spring)}
@keyframes rhMiniBop{0%{transform:translate(-50%,-60%) scale(1)}35%{transform:translate(-50%,-60%) translateY(-16px) scale(1.2)}100%{transform:translate(-50%,-60%) scale(1)}}

.rh-say{position:absolute;left:31%;right:3%;bottom:2.5%;z-index:10;opacity:0;pointer-events:none;
  font-size:clamp(14px,3.8vw,18px);font-weight:700;color:#2A2456;line-height:1.35;
  background:#FFF9EE;border-radius:15px;padding:9px 13px;
  box-shadow:0 5px 14px rgba(0,10,40,.25);transform:translateY(8px) scale(.92);
  transition:opacity .25s,transform .3s var(--spring)}
.rh-say.on{opacity:1;transform:none}
.rh-say.her{background:#FFE6EF;color:#8E3B5E}

/* the fast version: a tap pops the cloud and a streak of water drops to the bed */
.rh-cloud.rh-popping{z-index:8;animation:none}
.rh-cloud.rh-popping .rh-csvg{animation:rhBurst .42s ease-out forwards}
@keyframes rhBurst{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1.5);opacity:0}}
.rh-cloud.rh-popping .rh-word{animation:rhWordUp .6s ease-out forwards;font-size:clamp(22px,6vw,32px)}
@keyframes rhWordUp{0%{transform:translateY(0)}100%{transform:translateY(-26px);opacity:0}}
.rh-streak{position:absolute;width:8px;transform:translateX(-50%);border-radius:4px;z-index:7;pointer-events:none;
  background:linear-gradient(180deg,rgba(95,177,221,0),#5FB1DD 40%,#8ED1FC);transform-origin:50% 0;animation:rhStreak .5s ease-in forwards}
@keyframes rhStreak{0%{transform:translateX(-50%) scaleY(0);opacity:1}70%{transform:translateX(-50%) scaleY(1);opacity:1}100%{transform:translateX(-50%) scaleY(1);opacity:0}}