/* THE PARK — see park.js. Prefix ppk-, checked unused across index.html and
   every stylesheet before it was written. */
#scPark{justify-content:flex-start;padding:0;overflow:hidden}
.ppk-scene{position:absolute;inset:0;z-index:0}
.ppk-scene svg.ppk-svg{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
.ppk-tap{cursor:pointer}

/* Mo and Pip: the real rigs, laid over the scene and placed by park.js */
.ppk-rigs{position:absolute;inset:0;z-index:3;pointer-events:none}
#scPark .ppk-rig{position:absolute;left:0;top:0;width:100px;pointer-events:auto;cursor:pointer}
#scPark .ppk-rig .char-svg{filter:drop-shadow(2px 4px 4px rgba(40,86,84,.18))}
#scPark .ppk-rig.ppk-statue .char-svg{filter:grayscale(1) brightness(1.08) drop-shadow(2px 4px 4px rgba(40,40,40,.2));transition:filter .3s}

/* the words, for whoever can read them */
.ppk-say{position:absolute;left:50%;top:calc(var(--pad-top) + 12px);transform:translate(-50%,-6px) scale(.96);z-index:5;
  margin:0;max-width:min(calc(100% - 150px),460px);padding:9px 16px;border-radius:18px;background:#fff;color:var(--ink);
  font-weight:700;font-size:clamp(13px,3.5vw,17px);line-height:1.25;text-align:center;opacity:0;pointer-events:none;
  box-shadow:0 4px 14px rgba(59,42,30,.14);transition:opacity .25s,transform .35s var(--spring)}
.ppk-say.on{opacity:1;transform:translate(-50%,0) scale(1)}
.ppk-say[data-who=pip]{background:#FFF7D6}
.ppk-say[data-who=bella]{background:#FFEAF0}
.ppk-say[data-who=sam]{background:#FFEBD9}
.ppk-say[data-who=rosie]{background:#F6EAD8}

/* the two choices — big drawn cards with a gradient outline */
.ppk-cards{position:absolute;left:0;right:0;top:calc(var(--pad-top) + 100px);z-index:6;display:flex;justify-content:center;
  gap:clamp(12px,4vw,30px);pointer-events:none}
.ppk-card{--a1:#FFCE3D;--a2:#FF7BA0;position:relative;width:min(37vw,26vh,190px);aspect-ratio:1/1.12;border:0;padding:8px 8px 4px;
  border-radius:26px;background:linear-gradient(180deg,#fff,#FFF8EC);cursor:pointer;font:inherit;display:flex;flex-direction:column;
  align-items:center;pointer-events:auto;box-shadow:0 8px 0 rgba(59,42,30,.08),0 12px 24px rgba(59,42,30,.16);
  transform:scale(.2);opacity:0;animation:ppkCardIn .55s var(--spring) forwards}
.ppk-card:nth-child(2){animation-delay:.12s}
.ppk-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:4px;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.ppk-card svg{width:100%;flex:1;min-height:0;display:block;pointer-events:none}
.ppk-card i{font-style:normal;font-weight:800;font-size:clamp(11px,2.9vw,14px);color:var(--ink-soft);padding:2px 0 4px;pointer-events:none}
.ppk-card.lit{animation:ppkCardIn .55s var(--spring) forwards,ppkLit 1.1s ease-in-out .55s infinite}
.ppk-cards.ready .ppk-card:not(.lit){animation:ppkCardIn .55s var(--spring) forwards,ppkBreathe 2.6s ease-in-out .6s infinite}
.ppk-card.picked{animation:ppkPicked .5s var(--spring) forwards !important}
.ppk-card.gone{animation:ppkGone .35s ease-in forwards !important}
@keyframes ppkCardIn{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ppkLit{0%,100%{transform:scale(1.04);box-shadow:0 0 0 6px rgba(255,231,122,.9),0 12px 24px rgba(59,42,30,.18)}
  50%{transform:scale(1.1);box-shadow:0 0 0 12px rgba(255,231,122,.55),0 14px 28px rgba(59,42,30,.2)}}
@keyframes ppkBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes ppkPicked{0%{transform:scale(1.1);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes ppkGone{to{transform:scale(.6);opacity:0}}

/* the friends */
.ppk-friend .ppk-halo{opacity:0;transition:opacity .3s}
.ppk-friend.ppk-asked .ppk-halo{animation:ppkHalo 1.2s ease-in-out infinite}
@keyframes ppkHalo{0%,100%{opacity:.35}50%{opacity:.85}}
.ppk-friend .ppk-mopen{opacity:0;transform-box:fill-box;transform-origin:50% 0}
.ppk-friend.ppk-talk .ppk-mopen{opacity:1;animation:ppkTalk .17s ease-in-out infinite alternate}
.ppk-friend.ppk-talk .ppk-smile{opacity:0}
@keyframes ppkTalk{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}}
.ppk-friend .ppk-bob{transform-box:fill-box;transform-origin:50% 100%}
.ppk-friend.ppk-hop .ppk-bob{animation:ppkHop .6s var(--spring)}
@keyframes ppkHop{0%{transform:translateY(0)}35%{transform:translateY(-5px) scaleY(1.06)}70%{transform:translateY(0) scaleY(.94)}100%{transform:none}}
.ppk-friend .ppk-arm{transform-box:fill-box;transform-origin:20% 90%}
.ppk-friend.ppk-wave .ppk-arm{animation:ppkWave .32s ease-in-out infinite alternate}
@keyframes ppkWave{from{transform:rotate(-150deg)}to{transform:rotate(-105deg)}}
.ppk-friend.ppk-shy .ppk-eyes{transform:translateY(.7px)}
.ppk-friend.ppk-shy .ppk-bob{transform:rotate(-6deg)}
.ppk-friend.ppk-happy .ppk-cheek{opacity:1}
.ppk-friend.ppk-fright .ppk-bob{animation:ppkFright .9s var(--spring)}
@keyframes ppkFright{0%{transform:translateY(0)}25%{transform:translateY(-9px) rotate(-8deg)}60%{transform:translateY(-2px) rotate(5deg)}100%{transform:none}}

/* the park answering back */
.ppk-glow{opacity:0;transition:opacity .3s}
.ppk-asked .ppk-glow{animation:ppkHalo 1.2s ease-in-out infinite}
.ppk-sun{transform-box:fill-box;transform-origin:50% 50%}
.ppk-sun .ppk-rays{transform-box:fill-box;transform-origin:50% 50%;animation:ppkRays 3s ease-in-out infinite}
@keyframes ppkRays{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.ppk-sun.spin{animation:ppkSpin 1s var(--spring)}
@keyframes ppkSpin{from{transform:rotate(0) scale(1.2)}to{transform:rotate(360deg) scale(1)}}
.ppk-drift{animation:ppkDrift linear infinite alternate}
@keyframes ppkDrift{from{transform:translateX(-14px)}to{transform:translateX(22px)}}
.ppk-cloud{transform-box:fill-box;transform-origin:50% 50%}
.ppk-cloud.puff{animation:ppkPuff .7s var(--spring)}
@keyframes ppkPuff{0%{transform:scale(1)}30%{transform:scale(1.3,.8)}65%{transform:scale(.9,1.15)}100%{transform:scale(1)}}
.ppk-tree .ppk-canopy{transform-box:fill-box;transform-origin:50% 100%}
.ppk-tree.shake .ppk-canopy{animation:ppkShake .7s ease-in-out}
@keyframes ppkShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}45%{transform:rotate(5deg)}70%{transform:rotate(-3deg)}}
.ppk-bird{animation:ppkBird 1.8s ease-out forwards}
@keyframes ppkBird{from{transform:translate(0,-26px);opacity:1}to{transform:translate(34px,-70px);opacity:0}}
.ppk-ball{opacity:0}
.ppk-ball.roll{animation:ppkRoll 1.2s ease-in forwards}
@keyframes ppkRoll{0%{opacity:1;transform:translate(0,0)}15%{transform:translate(-2px,4px)}45%{transform:translate(-12px,15px)}
  80%{transform:translate(-20px,30px)}100%{opacity:0;transform:translate(-30px,38px)}}
.ppk-castle g{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scale(.3);transition:transform .45s var(--spring),opacity .2s}
.ppk-castle g.on{opacity:1;transform:scale(1)}
.ppk-grain{animation:ppkGrain .8s ease-out forwards}
@keyframes ppkGrain{from{transform:translate(0,0);opacity:1}to{transform:translate(var(--dx),-9px);opacity:0}}
.ppk-flowers{transform-box:fill-box;transform-origin:50% 100%}
.ppk-flowers.bob{animation:ppkBob .6s var(--spring)}
@keyframes ppkBob{0%{transform:scale(1)}40%{transform:scale(1.2,.85)}100%{transform:scale(1)}}
.ppk-heart{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:ppkHeart 1.9s ease-out forwards}
@keyframes ppkHeart{0%{opacity:0;transform:translateY(0) scale(.3)}20%{opacity:1;transform:translateY(-3px) scale(1.2)}100%{opacity:0;transform:translateY(-16px) scale(1)}}
#scPark .corner-btn{z-index:9}

/* the grown-ups page: a pending change of pace carries its own approve */
.set-breath-row{display:flex;gap:8px;align-items:stretch}
.set-breath-row .set-breath{flex:1}
.set-breath-ok{border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:800;padding:7px 12px;border-radius:14px;background:#EEF1F4;color:var(--ink-soft)}
.set-breath-ok.on{background:#DFF5DB;color:#2E7D32}