/* Maya's Lollipop Stand — "Boardwalk Sticker" direction (design canvas A, 2026-09-02).
   Chunky ink outlines, hard offset shadows, red/white awning. Palette is deliberately NOT the lab's
   dark-purple default; pink/cyan/yellow borrowed from direction C. */
:root{
  --ink:#1b1b2f; --paper:#fff; --sky1:#7fd3ff; --sky2:#b9ecff; --sand1:#fff1cf; --sand2:#ffe6b0;
  --red:#ff3b3b; --yellow:#ffd23f; --pink:#ff3d8a; --cyan:#35c9f5; --lime:#7bd94a; --orange:#ff8a1f; --purple:#8a5cc4;
  --road:#4a4a5c; --walk1:#f3d9a6; --walk2:#e6c78d;
  --sh:5px 5px 0 var(--ink);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{font-family:'Baloo 2','Trebuchet MS',sans-serif;font-weight:800;color:var(--ink);background:var(--sky1);
  touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.f,.h1,.lbl,.sticker,#coins b,#sign{font-family:'Lilita One','Arial Black',sans-serif;font-weight:400}
.hide{display:none!important}

#stage{position:fixed;inset:0;overflow:hidden;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 44%,var(--sand1) 44.2%,var(--sand2) 100%)}
.cloud{position:absolute;background:#fff;border-radius:60px;border:4px solid var(--ink);box-shadow:4px 4px 0 rgba(27,27,47,.18)}
.cloud:before{content:'';position:absolute;left:22%;top:-45%;width:38%;height:120%;background:#fff;border-radius:50%;border:4px solid var(--ink);border-bottom:0}
.cloud:after{content:'';position:absolute;left:0;right:0;bottom:0;height:60%;background:#fff;border-radius:60px}
#sun{position:absolute;right:11%;top:64px;width:96px;height:96px;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 0 14px rgba(255,210,63,.35),0 0 0 30px rgba(255,210,63,.15)}
#awning{position:absolute;left:0;right:0;top:0;height:52px;background:repeating-linear-gradient(90deg,var(--red) 0 48px,#fff 48px 96px)}
#awning2{position:absolute;left:0;right:0;top:52px;height:18px;background:repeating-linear-gradient(90deg,var(--red) 0 48px,#fff 48px 96px);
  -webkit-mask:radial-gradient(circle at 24px 0,#000 22px,transparent 23px) 0 0/48px 18px repeat-x;
  mask:radial-gradient(circle at 24px 0,#000 22px,transparent 23px) 0 0/48px 18px repeat-x}
#sign{position:absolute;left:50%;top:30px;transform:translateX(-50%) rotate(-2deg);background:var(--yellow);border:5px solid var(--ink);
  border-radius:18px;padding:6px 22px;box-shadow:6px 6px 0 var(--ink);font-size:clamp(20px,4vw,36px);line-height:1;letter-spacing:1px;
  text-shadow:2px 2px 0 var(--pink);white-space:nowrap;z-index:4;max-width:calc(100% - 150px)}
#coins{position:absolute;right:76px;top:88px;display:flex;align-items:center;gap:8px;background:#fff;border:4px solid var(--ink);
  border-radius:999px;padding:5px 14px 5px 8px;box-shadow:4px 4px 0 var(--ink);z-index:5;font-size:24px}
#coins.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.18)}}

/* ---- decorations bought in the shop (each is a fixed piece on the stand) ---- */
#decor{position:absolute;inset:0;pointer-events:none;z-index:3}
.dec{position:absolute}
.dec.bunting{left:0;right:0;top:70px;height:26px;
  background:radial-gradient(circle at 20px 0,transparent 18px,transparent 19px) 0 0/40px 26px repeat-x;
  -webkit-mask:linear-gradient(#000,#000);
}
.dec.bunting i{position:absolute;top:0;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid var(--pink)}
.dec.lights{left:0;right:0;top:0;height:100px}
.dec.lights i{position:absolute;top:66px;width:14px;height:18px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;border:3px solid var(--ink);animation:twinkle 1.2s infinite alternate}
@keyframes twinkle{from{filter:brightness(.7)}to{filter:brightness(1.3);box-shadow:0 0 12px currentColor}}
.dec.balloons{left:4%;top:96px;font-size:0}
.dec.balloons i{display:inline-block;width:40px;height:50px;border-radius:50% 50% 50% 50%/45% 45% 55% 55%;border:4px solid var(--ink);margin-right:-14px;animation:sway 3s ease-in-out infinite alternate;transform-origin:50% 120%}
.dec.balloons i:nth-child(2){animation-delay:-1s;margin-top:10px}.dec.balloons i:nth-child(3){animation-delay:-2s}
@keyframes sway{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.dec.giant{right:3%;top:22%;animation:sway 4s ease-in-out infinite alternate}
.dec.umbrella{left:50%;bottom:calc(var(--benchH) - 4px);transform:translateX(-50%)}
.dec.umbrella:after{content:'';position:absolute;left:50%;top:60px;width:8px;height:70px;margin-left:-4px;background:#fff;border:3px solid var(--ink);border-radius:4px;z-index:-1}
.dec.cat{right:16%;bottom:calc(var(--benchH) + 8px);animation:tail 2s ease-in-out infinite alternate}
@keyframes tail{to{transform:translateY(-3px)}}
.dec.notes{left:54%;top:110px;font-family:'Lilita One';font-size:28px;color:var(--purple)}
.dec.notes i{position:absolute;animation:note 2.4s linear infinite;font-style:normal;text-shadow:2px 2px 0 var(--ink)}
.dec.notes i:nth-child(2){left:26px;animation-delay:-.8s}.dec.notes i:nth-child(3){left:52px;animation-delay:-1.6s}
@keyframes note{from{transform:translateY(0);opacity:1}to{transform:translateY(-70px) rotate(20deg);opacity:0}}

/* ---- scene ---- */
:root{--benchH:196px}
#scene{position:absolute;left:0;right:0;top:44%;bottom:var(--benchH)}
#road,#walk,.lane{overflow:hidden}
#road{position:absolute;left:0;top:0;bottom:0;width:48%;background:var(--road);border-top:12px solid var(--yellow)}
#dash{position:absolute;left:50%;top:14px;bottom:0;width:10px;margin-left:-5px;background:repeating-linear-gradient(180deg,#fff 0 34px,transparent 34px 60px)}
#walk{position:absolute;right:0;top:0;bottom:0;width:52%;background:repeating-linear-gradient(90deg,var(--walk1) 0 96px,var(--walk2) 96px 102px);border-top:12px solid var(--orange)}
.lanetag{position:absolute;left:12px;top:18px;background:var(--ink);color:var(--yellow);font-family:'Lilita One';font-size:14px;padding:4px 10px;border-radius:8px;letter-spacing:1px}
.lanetag.green{left:auto;right:12px;color:var(--lime)}
.lane{position:absolute;top:0;bottom:0;pointer-events:none}
#laneCar{left:0;width:48%}#laneWalk{right:0;width:52%}

/* a customer: SVG sits at the bottom of its lane; slides in from its outer edge */
.cust{position:absolute;bottom:8px;top:22px;left:50%;width:min(64%,320px);transform:translateX(-50%);transition:transform .9s cubic-bezier(.3,.9,.3,1.05),opacity .5s;pointer-events:auto}
.cust svg{width:100%;height:100%;display:block;filter:drop-shadow(4px 4px 0 rgba(27,27,47,.25))}
.cust.off-l{transform:translateX(-220%)}
.cust.off-r{transform:translateX(120%)}
.cust.waiting{transform:translateX(-50%) scale(.8);opacity:.85;transform-origin:50% 100%}
.cust.talking svg{animation:bob .9s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-5px)}}
.cust .honk{position:absolute;right:-6px;top:0;background:#fff;border:4px solid var(--ink);padding:2px 12px;font-family:'Lilita One';font-size:22px;transform:rotate(-8deg);opacity:0;transition:opacity .2s;letter-spacing:1px}
.cust .honk.on{opacity:1}

/* speech bubble */
#bubble{position:absolute;left:50%;bottom:calc(100% + 26px);transform:translateX(-50%);width:min(92%,560px);background:#fff;border:5px solid var(--ink);border-radius:22px;
  padding:14px 16px;box-shadow:6px 6px 0 var(--ink);z-index:6;animation:pop .28s cubic-bezier(.3,1.4,.5,1)}
#bubble:after{content:'';position:absolute;bottom:-24px;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:24px solid var(--ink)}
#bubble.l:after{left:18%}#bubble.r:after{right:18%}
@keyframes pop{from{transform:translateX(-50%) scale(.6);opacity:0}}
#bubTxt{font-size:clamp(17px,2.6vw,23px);line-height:1.25;margin-bottom:10px}
#bubBtns{display:flex;flex-direction:column;gap:8px}
#bubBtns:empty{display:none}
.reply{min-height:48px;display:flex;align-items:center;padding:6px 14px;border-radius:14px;border:4px solid var(--ink);font:inherit;font-size:clamp(15px,2.3vw,19px);
  text-align:left;color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.reply:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.reply.a{background:var(--yellow)}.reply.b{background:var(--sky2)}

/* ---- bench ---- */
#bench{position:absolute;left:0;right:0;bottom:0;height:var(--benchH);background:#fff;border-top:7px solid var(--ink);z-index:5}
#benchStripe{height:16px;background:repeating-linear-gradient(90deg,var(--red) 0 34px,#fff 34px 68px);border-bottom:5px solid var(--ink)}
#benchBody{position:absolute;left:0;right:0;top:21px;bottom:0;display:flex;align-items:center;justify-content:center;padding:0 12px 8px 68px}
#benchIdle{font-size:clamp(18px,3vw,26px);color:#8a8a9a}
#benchMake{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;width:100%}
#popHolder{width:118px;height:132px;flex:0 0 auto}
.grp{display:flex;flex-direction:column;gap:5px}
.lbl{font-size:15px;letter-spacing:1px}
#pots,#shapes{display:flex;gap:9px}
.pot{width:50px;height:50px;border-radius:50%;border:4px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:0;cursor:pointer}
.pot:active,.shape:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.shape{width:50px;height:50px;border-radius:12px;border:4px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.shape.on{background:var(--yellow);outline:3px solid var(--ink);outline-offset:3px}

/* ---- sticker buttons ---- */
.sticker{font-family:'Lilita One';font-size:22px;letter-spacing:1px;border:4px solid var(--ink);border-radius:16px;padding:10px 20px;
  box-shadow:var(--sh);cursor:pointer;color:var(--ink);min-height:50px;transform:rotate(-2deg)}
.sticker:active{transform:rotate(-2deg) translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.sticker.red{background:var(--red);color:#fff}.sticker.yellow{background:var(--yellow)}.sticker.white{background:#fff}
.sticker.big{font-size:28px;padding:14px 28px;min-height:60px}
.sticker[disabled]{opacity:.4}
#undoBtn{min-width:50px;padding:6px 12px;font-size:24px}
#shopBtn{position:absolute;right:14px;bottom:calc(var(--benchH) + 14px);z-index:7;transform:rotate(3deg)}
#shopBtn:active{transform:rotate(3deg) translate(3px,3px)}

/* ---- lollipop art (shared by bench, bubbles, shop) ---- */
.lolli{position:relative;display:inline-block}
.lolli .stick{position:absolute;left:50%;top:78%;width:11%;height:34%;transform:translateX(-50%);background:#fff;border:3px solid var(--ink);border-radius:6px}
.lolli .outline,.lolli .fill,.lolli .swirl{position:absolute;left:0;top:0;width:100%;height:100%}
.lolli .outline{width:108%;height:108%;left:-4%;top:-4%}
.lolli .fill{-webkit-clip-path:var(--cp);clip-path:var(--cp)}
.lolli.spin .fill,.lolli.spin .swirl{animation:spin .45s cubic-bezier(.3,1.3,.5,1)}
@keyframes spin{from{transform:rotate(-180deg) scale(.6)}}

/* ---- fx + overlays ---- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:900}
.float{position:fixed;pointer-events:none;font-family:'Lilita One';font-size:30px;color:var(--yellow);-webkit-text-stroke:2px var(--ink);
  text-shadow:3px 3px 0 var(--ink);z-index:901;animation:fl 1.2s ease-out forwards}
@keyframes fl{to{transform:translateY(-90px);opacity:0}}
.ov{position:fixed;inset:0;background:rgba(27,27,47,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
.panel{background:#fff;border:6px solid var(--ink);border-radius:26px;padding:26px 22px;max-width:460px;width:100%;text-align:center;box-shadow:10px 10px 0 var(--ink)}
.panel.wide{max-width:560px}
.panel .h1{font-size:clamp(30px,6vw,44px);line-height:1;color:var(--ink);text-shadow:3px 3px 0 var(--pink);margin-bottom:10px;letter-spacing:1px}
.panel p{font-size:18px;line-height:1.4;margin:6px 0 18px}
#shopItems{display:flex;flex-direction:column;gap:10px;margin:12px 0 18px;text-align:left}
.item{display:flex;align-items:center;gap:12px;border:4px solid var(--ink);border-radius:16px;padding:8px 10px;background:var(--sand1);box-shadow:4px 4px 0 var(--ink)}
.item .ic{width:60px;height:60px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--sky2);border:3px solid var(--ink);border-radius:12px;overflow:hidden}
.item .tx{flex:1;font-size:15px;line-height:1.3}
.item .tx b{display:block;font-family:'Lilita One';font-size:19px;font-weight:400;letter-spacing:.5px}
.item button{min-height:46px;min-width:86px;transform:none}
.item button:active{transform:translate(3px,3px)}
.item.owned{background:#e9ffd9}

@media (max-width:560px){ :root{--benchH:228px} #popHolder{width:90px;height:100px} .pot,.shape{width:44px;height:44px} #benchMake{gap:10px} .sticker{font-size:18px;padding:8px 14px} #coins{font-size:20px;top:80px} #sun{display:none} }
@media (max-height:600px){ :root{--benchH:170px} #scene{top:38%} }

/* ---- juice ---- */
.fly{position:fixed;z-index:950;pointer-events:none;transition:transform .5s cubic-bezier(.3,.6,.4,1.2)}
#stage.bump{animation:stagebump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes stagebump{20%{transform:scale(1.02) translateY(-6px)}45%{transform:scale(.995) translateY(3px)}}
.cust.jump svg{animation:jump .6s cubic-bezier(.3,1.5,.5,1) 1}
@keyframes jump{30%{transform:translateY(-30px) scaleX(.94) scaleY(1.08)}60%{transform:translateY(0) scaleX(1.06) scaleY(.94)}}
.pot.squish{animation:squish .3s}
@keyframes squish{40%{transform:scale(1.25,.8)}70%{transform:scale(.9,1.1)}}