/* THE PRIZE ROOM — see prizes.js */

/* the prize shelf: right wall, between the toy shelf and the wellies. Empty
   from the first second, with faint rings where the things will go. */
.room-prizeshelf{position:absolute;right:3%;top:43%;width:41%;height:1.8%;border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,#E7C79B,#C79E6E);box-shadow:0 8px 16px rgba(120,86,50,.24);z-index:2}
.room-prizeshelf::before,.room-prizeshelf::after{content:'';position:absolute;top:100%;width:9%;height:260%;
  background:#B98F5F;clip-path:polygon(0 0,100% 0,0 100%)}
.room-prizeshelf::before{left:7%}
.room-prizeshelf::after{right:7%;transform:scaleX(-1)}
.pz-ghost{position:absolute;bottom:130%;width:15%;aspect-ratio:1;border-radius:50%;
  border:2px dashed rgba(120,86,50,.28);transition:opacity .4s}
.pz-ghost.taken{opacity:0}
.pz{border:0;background:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.prize-svg{width:100%;height:auto;display:block;overflow:visible;
  filter:drop-shadow(3px 5px 5px rgba(120,86,50,.28))}
.pz-shelf{position:absolute;bottom:100%;width:19%;transform-origin:50% 100%;
  transition:transform .2s var(--spring)}
.pz-shelf:active{transform:scale(1.1) translateY(-4px)}
.pz-shelf.poked{animation:pzJig .55s ease-in-out 2}
@keyframes pzJig{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg) translateY(-6px)}75%{transform:rotate(8deg) translateY(-3px)}}
.pz-rocket.poked{animation:pzLaunch 1.6s var(--spring)}
@keyframes pzLaunch{0%{transform:translateY(0)}35%{transform:translateY(-90px) rotate(-4deg)}70%{transform:translateY(-70px) rotate(3deg)}100%{transform:translateY(0)}}
.pz-rocket .pz-flame{opacity:0}
.pz-rocket.poked .pz-flame{opacity:1;animation:pzFlame .12s ease-in-out 12 alternate}
@keyframes pzFlame{from{transform:scaleY(1)}to{transform:scaleY(1.6)}}
.pz-robot .pz-eye{animation:pzBlink 3.6s ease-in-out infinite}
@keyframes pzBlink{0%,92%,100%{opacity:1}96%{opacity:.15}}
.pz-globe.poked .pz-snow circle{animation:pzSnow 1.4s ease-in-out 2}
@keyframes pzSnow{0%{transform:translateY(0)}50%{transform:translateY(-14px)}100%{transform:translateY(6px)}}
.pz-new .prize-svg{animation:pzNew 1.2s var(--spring) 3}
@keyframes pzNew{0%,100%{transform:scale(1)}40%{transform:scale(1.22) rotate(-5deg)}}

/* the tank: every earned creature swims in its own lane at its own pace */
.pz-tank{position:absolute;pointer-events:auto;cursor:pointer;
  width:24%;left:8%;top:calc(18% + var(--n) * 12%);
  animation:pzSwim calc(5s + var(--n) * 1.3s) ease-in-out infinite alternate;
  animation-delay:calc(var(--n) * -1.7s)}
@keyframes pzSwim{from{transform:translateX(0)}to{transform:translateX(200%) scaleX(1)}}
.pz-seahorse{width:14%;left:auto;right:12%;top:auto;bottom:24%;
  animation:pzBob 3s ease-in-out infinite alternate}
@keyframes pzBob{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-8px) rotate(4deg)}}
.pz-starfish{width:16%;left:58%;top:auto;bottom:20%;animation:none}
.pz-crab{width:24%;left:34%;top:auto;bottom:16%;
  animation:pzScuttle 4.5s ease-in-out infinite alternate}
@keyframes pzScuttle{from{transform:translateX(-40%)}to{transform:translateX(40%)}}
.pz-tank.poked{animation:pzLeap .9s var(--spring)}
@keyframes pzLeap{0%,100%{transform:translateY(0)}45%{transform:translateY(-18px) rotate(-14deg)}}

/* the window: visitors cross the glass now and then, each on its own timer */
.win-visitors{position:absolute;inset:7px;border-radius:9px;overflow:hidden;pointer-events:none}
.pz-window{position:absolute;pointer-events:auto;cursor:pointer;width:34%;
  top:calc(12% + var(--n) * 14%);left:-40%;
  animation:pzCross calc(14s + var(--n) * 3s) linear infinite;
  animation-delay:calc(var(--n) * 2.6s)}
@keyframes pzCross{0%{left:-40%}18%{left:105%}100%{left:105%}}
.pz-balloon{animation-name:pzRise;width:20%;left:calc(20% + var(--n) * 10%);top:auto}
@keyframes pzRise{0%{top:110%}22%{top:-60%}100%{top:-60%}}
.pz-kite{animation-name:pzKite;width:26%;top:auto}
@keyframes pzKite{0%{left:-40%;top:60%}12%{left:40%;top:14%}24%{left:105%;top:44%}100%{left:105%;top:44%}}
.pz-window.poked .prize-svg{animation:pzFlutter .18s ease-in-out 8 alternate}
@keyframes pzFlutter{from{transform:scaleY(1)}to{transform:scaleY(.6)}}
.pz-bird .pz-wing,.pz-bee .pz-wing{transform-origin:40% 60%;animation:pzFlap .22s ease-in-out infinite alternate}
.pz-butterfly .pz-wing{transform-origin:50% 50%;animation:pzFlap .5s ease-in-out infinite alternate}
@keyframes pzFlap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}

/* the prize pop on the prize screen, for a thing that is not worn */
#prizePop .pz-pop{display:block;width:clamp(90px,24vw,130px);margin:0 auto}
#prizePop .pz-pop .prize-svg{width:100%;height:auto}

/* a star on the door to Mo's room while something new is waiting in it */
[data-door="room"].door-new::after{content:'';position:absolute;right:6%;top:6%;width:26%;aspect-ratio:1;
  background:#FFCE3D;clip-path:polygon(50% 0,63% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,37% 36%);
  filter:drop-shadow(0 2px 3px rgba(120,86,50,.4));animation:pzTwinkle 1.4s ease-in-out infinite alternate;z-index:3}
@keyframes pzTwinkle{from{transform:scale(.9) rotate(-8deg)}to{transform:scale(1.15) rotate(8deg)}}

@media (prefers-reduced-motion:reduce){
  .pz-tank,.pz-window,.pz-new .prize-svg,.pz-robot .pz-eye,.pz-wing{animation:none}
  .pz-window{left:20%}
}