/* ---------- the piano: the polaroid by the slingshot, which plays right there ---------- */
/* the polaroid taped onto the headline's pink sticker (piano.js works out where), under the game canvas (which lets taps through to it). It is a loose piece (loose.js): it drags, and Matt can blow it up */
.pn-snap{position:absolute;left:var(--pn-x,calc(var(--g) + clamp(400px,40vw,560px)));top:var(--pn-y,auto);bottom:var(--pn-b,calc(var(--ss-floor) + 10%));width:var(--pn-w,clamp(120px,10vw,160px));padding:9px 9px 11px;border:0;background:#fff;color:var(--ink);text-align:left;cursor:pointer;--r:-6deg;
  box-shadow:0 0 0 1px rgba(14,14,14,.13),0 14px 24px -12px rgba(14,14,14,.55);transition:translate .7s cubic-bezier(.3,1.5,.5,1),rotate .4s cubic-bezier(.3,1.6,.5,1),scale .4s cubic-bezier(.3,1.6,.5,1)}
.pn-snap img,.pn-v{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
/* the video sits over the still and shows once it plays; the polaroid grows a little to watch it */
.pn-v{position:absolute;left:9px;top:9px;width:calc(100% - 18px);opacity:0;transition:opacity .25s;pointer-events:none;background:#1b1a17}
.pn-snap.on .pn-v{opacity:1}
.pn-snap.on{--r:-2deg;scale:1.3;transform-origin:50% 100%}
/* playing, it comes up over the sling to be watched */
.pn-snap.on:not(.dragging){z-index:2!important}
/* a strip of tape holds it to the headline's sticker */
.pn-snap::before{content:"";position:absolute;left:50%;top:-11px;width:44%;height:22px;translate:-50% 0;rotate:-4deg;background:rgba(255,225,77,.85);z-index:2;pointer-events:none}
.pn-play{transition:opacity .2s,scale .3s cubic-bezier(.3,1.6,.5,1)}
.pn-snap.on .pn-play{opacity:0;scale:.6}
.pn-play{position:absolute;left:50%;top:44%;translate:-50% -50%;width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 3px #fff;
  background:var(--lemon) no-repeat 58% 50%/34% 40% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%230E0E0E'/%3E%3C/svg%3E")}
.pn-snap .pn-cap{display:block;margin-top:8px;font:400 clamp(14px,1.2vw,18px)/1.1 var(--marker)}
/* taped on top of the headline's sticker, and under the game's canvas, which sits over the copy so Matt and the sling are
   always in front (wall.js raises a dropped piece, hence the !important). Held in a drag, it rides over everything */
.pn-snap:not(.dragging){z-index:1!important}
#steam canvas{z-index:1;pointer-events:none}
@media (hover:hover){.pn-snap:not(.on,.dragging):hover{--r:1deg;scale:1.04}}
.pn-snap:focus-visible{outline:3px dashed var(--cobalt);outline-offset:6px}
@media (max-width:700px){
  .pn-snap{padding:5px 5px 7px}
  /* the line under the sticker wraps short of the polaroid */
  .ss-sub{padding-right:118px}
  .pn-snap.on{transform-origin:100% 0}
  .pn-snap::before{top:-8px;height:16px}
  .pn-v{left:5px;top:5px;width:calc(100% - 10px)}
  .pn-snap.on{scale:2.4}
  .pn-play{width:30px;height:30px}
  .pn-snap .pn-cap{font-size:10px;margin-top:5px}
}
@media (prefers-reduced-motion:reduce){.pn-snap,.pn-play{transition:none}}