/* THE PRIZE COUNTER (shared/prizes.js): an original retro arcade prize counter. Colors: theme tokens only (--pz-* in
   theme.css for the wood, pegboard, paper tags and glass). Motion is slow and gentle, and all of it stops with reduced
   motion or the MOTION switch (html.no-motion ends every animation; .pz-still is set when the counter opens). */
.pz-ov{background:color-mix(in srgb,var(--deep) 88%,transparent)}
.pz-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,250px);grid-template-areas:"head head" "top clerk" "wall wall" "foot foot";
  gap:14px;width:min(1180px,100%);max-width:none;margin:0 auto;padding:14px clamp(12px,2vw,24px) 18px;text-align:left;
  border:2px solid var(--pz-wood-2);border-radius:20px;
  background:radial-gradient(120% 50% at 50% 0%,color-mix(in srgb,var(--pz-warm) 22%,transparent),transparent 70%),linear-gradient(var(--floor-2),var(--deep));
  box-shadow:0 0 0 4px var(--pz-peg-hole),0 20px 60px rgba(0,0,0,.6)}
.pz-panel h2,.pz-panel h3{margin:0}
.pz-panel .pz-small{font-size:14px;color:var(--text-lo)}

/* the header: neon PRIZES, the wallet, close */
.pz-head{grid-area:head;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pz-neon{flex:1 1 auto;font:400 clamp(30px,5.5vw,54px) var(--neon-font,var(--display));letter-spacing:.06em;text-transform:uppercase;color:var(--amber-hi);
  text-shadow:0 0 4px var(--amber-hi),0 0 14px var(--amber),0 0 30px var(--amber-ink)}
@media (prefers-reduced-motion:no-preference){ .pz-ov:not(.pz-still) .pz-neon{animation:pz-glow 5s ease-in-out infinite} }
@keyframes pz-glow{0%,100%{text-shadow:0 0 4px var(--amber-hi),0 0 14px var(--amber),0 0 30px var(--amber-ink)}50%{text-shadow:0 0 3px var(--amber-hi),0 0 9px var(--amber),0 0 20px var(--amber-ink)}}
.pz-panel .pz-wallet{display:flex;align-items:center;gap:8px;margin:0;padding:6px 14px;min-height:44px;border-radius:999px;background:var(--deep);border:2px solid var(--yellow);
  font-size:18px;color:var(--text-hi);box-shadow:var(--glow-yellow)}
.pz-wallet b{font:400 22px var(--display);color:var(--yellow);font-variant-numeric:tabular-nums}
.pz-x{width:48px;height:48px;border-radius:50%;border:2px solid var(--text-lo);background:var(--deep);color:var(--text-hi);font-size:22px;cursor:pointer}
.pz-x:hover{border-color:var(--text-hi)}
/* the token icon (Arcade.Tokens.iconHTML; its pictures: shared/tokens.css) */
.pz-ov .tk-ic{--tk-size:20px;vertical-align:-4px}

/* TICKET, the counter bot, + its line and the counter bell */
.pz-clerk{grid-area:clerk;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:start;gap:6px 10px;padding:10px;border-radius:16px;
  background:linear-gradient(var(--pz-wood-2),var(--pz-wood));border:2px solid var(--pz-wood-hi)}
.pz-bot{grid-row:1/3;width:clamp(64px,8vw,96px);height:auto}
.pz-bot-ant{stroke:var(--pz-bot-2);stroke-width:3}
.pz-bulb{fill:var(--pink);filter:drop-shadow(0 0 4px var(--pink))}
@media (prefers-reduced-motion:no-preference){ .pz-ov:not(.pz-still) .pz-bulb{animation:pz-bulb 3.5s ease-in-out infinite} }
@keyframes pz-bulb{0%,100%{opacity:1}50%{opacity:.55}}
.pz-bot-head,.pz-bot-body{fill:var(--pz-bot);stroke:var(--pz-bot-2);stroke-width:3}
.pz-bot-neck{fill:var(--pz-bot-2)}
.pz-bot-eye{fill:var(--deep)}.pz-bot-shine{fill:var(--cyan-hi)}
.pz-bot-mouth{fill:var(--deep)}.pz-bot-slot{fill:var(--yellow)}
.pz-bot-roll{fill:var(--pz-bot-2)}.pz-bot-ticket{fill:var(--pink-hi)}
.pz-panel .pz-say{position:relative;margin:0;padding:8px 12px;border-radius:12px;background:var(--pz-paper);color:var(--pz-paper-ink);font-weight:700;font-size:16px;line-height:1.3}
.pz-bell{justify-self:end;width:56px;height:48px;padding:4px;border:0;border-radius:12px;background:transparent;cursor:pointer}
.pz-bell svg{width:100%;height:100%}
.pz-bell-base{fill:var(--pz-peg-hole)}.pz-bell-dome{fill:var(--yellow);stroke:var(--amber-ink);stroke-width:2}.pz-bell-knob{fill:var(--amber-ink)}
.pz-bell.ding svg{animation:pz-ding .35s ease-out}
@keyframes pz-ding{0%{transform:rotate(0)}30%{transform:rotate(-8deg)}70%{transform:rotate(6deg)}100%{transform:rotate(0)}}

/* the TOKEN COUNTER machine and the PRIZE OF THE WEEK spotlight */
.pz-top{grid-area:top;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.pz-machine{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;background:linear-gradient(var(--cab-panel),var(--cab-face));border:2px solid var(--cab-metal)}
.pz-mtitle{font:400 18px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-hi)}
.pz-mbox{position:relative;border-radius:12px;background:var(--cab-side);padding:10px;border:2px solid var(--cab-metal)}
.pz-mwin{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:10px;background:var(--deep);box-shadow:inset 0 0 12px rgba(0,0,0,.8)}
.pz-mstars{display:flex;gap:2px;height:22px;color:var(--yellow);font-size:20px;line-height:1}
.pz-mstars i{font-style:normal;text-shadow:0 0 6px var(--yellow)}
.pz-panel .pz-mline{margin:0;text-align:center;color:var(--text-hi);font-size:16px}
.pz-mline b{color:var(--yellow)}
.pz-tray{position:relative;height:26px;margin:8px 8% 0;border-radius:0 0 12px 12px;background:var(--pz-peg-hole);border:2px solid var(--cab-metal);border-top:0;overflow:hidden}
.pz-turn{width:100%;min-height:48px}
.pz-src summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--text-lo)}
.pz-src table{width:100%;border-collapse:collapse;font-size:14px;color:var(--text-hi)}
.pz-src th,.pz-src td{padding:3px 6px;border-bottom:1px solid var(--floor-3);text-align:left}
.pz-src td+td,.pz-src th+th{text-align:right}
@media (prefers-reduced-motion:no-preference){
  .pz-ov:not(.pz-still) .pz-machine.go .pz-mstars i{animation:pz-drop .7s ease-in both;animation-delay:calc(var(--n,0) * 60ms)}
  .pz-ov:not(.pz-still) .pz-spill{position:absolute;left:calc(8% + var(--k) * 7%);bottom:2px;animation:pz-spill .8s ease-out both;animation-delay:calc(.25s + var(--k) * 50ms)}
  /* a seasonal token (candy corns, snowflake coins…) tumbles as it falls: the same timing, a turn on the way down */
  .pz-ov:not(.pz-still) .pz-spill:not(.tk-coin){animation-name:pz-tumble}
}
.pz-spill{position:absolute;left:calc(8% + var(--k) * 7%);bottom:2px}
@keyframes pz-drop{0%{transform:translateY(0);opacity:1}100%{transform:translateY(46px) scale(.4);opacity:0}}
@keyframes pz-spill{0%{transform:translateY(-30px);opacity:0}60%{opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes pz-tumble{0%{transform:translateY(-30px) rotate(-200deg);opacity:0}60%{opacity:1}100%{transform:translateY(0) rotate(calc((var(--k) - 5) * 9deg));opacity:1}}

.pz-spot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:16px;border:2px solid var(--amber);
  background:radial-gradient(60% 90% at 50% 0%,color-mix(in srgb,var(--yellow-hi) 28%,transparent),transparent 72%),var(--floor-2)}
.pz-spot:empty{display:none}
.pz-panel .pz-spot-sign{margin:0;padding:4px 12px;border-radius:8px;background:var(--deep);border:2px solid var(--pink);color:var(--pink-hi);font:400 15px var(--display);
  letter-spacing:.05em;text-transform:uppercase;text-align:center;box-shadow:var(--glow-pink,0 0 8px var(--pink))}
.pz-spot-sign b{color:var(--yellow);font-weight:400}
.pz-spot-btn{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:44px;padding:6px 10px;border:2px solid transparent;border-radius:14px;background:transparent;color:var(--text-hi);cursor:pointer}
.pz-spot-btn:hover{border-color:var(--yellow)}
.pz-spot-btn .pz-pic{width:clamp(88px,11vw,124px)}
.pz-price{font-size:16px}.pz-price s{color:var(--text-dim)}.pz-price b{color:var(--yellow);font-size:20px}
.pz-panel .pz-spot-when{margin:0;color:var(--text-lo);font-size:14px}

/* THE WALL: pegboard, shelves by price, prizes hanging up top, the glass case at the front */
.pz-wall{grid-area:wall;display:flex;flex-direction:column;gap:14px;padding:14px clamp(8px,1.5vw,18px) 0;border-radius:16px;overflow:hidden;
  background-color:var(--pz-peg);background-image:radial-gradient(circle,var(--pz-peg-hole) 22%,transparent 24%),linear-gradient(color-mix(in srgb,var(--pz-warm) 16%,transparent),transparent 40%);
  background-size:22px 22px,100% 100%;border:3px solid var(--pz-wood)}
.pz-shelf{position:relative;padding:0 6px 16px;border-bottom:12px solid var(--pz-wood-2);box-shadow:0 8px 10px -6px rgba(0,0,0,.7)}
.pz-shead{display:inline-block;margin:0 0 8px;padding:2px 10px;border-radius:6px;background:var(--deep);font:400 15px var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--amber-hi)}
.pz-shead small{font:600 13px var(--text);letter-spacing:0;text-transform:none;color:var(--text-lo);margin-left:6px}
.pz-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px}
.pz-s-hang{border-bottom:0;box-shadow:none;padding-top:14px;border-top:6px solid var(--cab-metal)}
.pz-s-hang .pz-shead{position:absolute;top:-2px;right:6px}
.pz-s-hang .pz-prize{margin-top:18px}
.pz-s-hang .pz-prize::before{content:"";position:absolute;left:50%;top:-24px;width:2px;height:24px;background:var(--text-dim)}
.pz-s-hang .pz-pic{width:clamp(92px,11vw,120px)}
.pz-s-case{margin:0 -18px;padding:12px 18px 18px;border-bottom:16px solid var(--pz-wood);
  background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--pz-glass) 14%,transparent) 36%,transparent 42%),color-mix(in srgb,var(--pz-glass) 8%,var(--deep));
  border-top:3px solid color-mix(in srgb,var(--pz-glass) 55%,transparent)}
.pz-s-manor{padding:10px 8px 16px;border-radius:12px 12px 0 0;border:2px solid var(--purple);border-bottom:12px solid var(--pz-wood-2);
  background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--purple-hi) 14%,transparent) 36%,transparent 42%),color-mix(in srgb,var(--purple-ink) 22%,var(--deep))}
.pz-s-manor .pz-shead{color:var(--purple-hi)}
/* THE STAGE COLLECTION (Ticket Booth Tina's exclusives): the same glass case, in theater velvet */
.pz-s-stage{padding:10px 8px 16px;border-radius:12px 12px 0 0;border:2px solid var(--q-stage-velvet);border-bottom:12px solid var(--pz-wood-2);
  background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--q-stage-glow) 14%,transparent) 36%,transparent 42%),color-mix(in srgb,var(--q-stage-velvet-d) 22%,var(--deep))}
.pz-s-stage .pz-shead{color:var(--q-stage-glow)}

/* one prize: the Locker's thumbnail + a paper price tag on a string */
.pz-prize{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:clamp(104px,12vw,136px);min-height:44px;padding:8px 6px 6px;
  border:2px solid transparent;border-radius:14px;background:color-mix(in srgb,var(--deep) 55%,transparent);color:var(--text-hi);cursor:pointer;text-align:center}
.pz-prize:hover{border-color:var(--amber)}
.pz-prize:focus-visible,.pz-spot-btn:focus-visible{outline:4px solid var(--yellow-hi);outline-offset:2px}
.pz-pic{display:grid;place-items:center;width:clamp(72px,8vw,92px);aspect-ratio:1}
.pz-pic .pt-box{width:100%}
.pz-pic .lk-plate{display:grid;place-items:center;width:100%;aspect-ratio:1;font-weight:700;font-size:13px}
.pz-pic .lk-shoe{display:block;width:100%;aspect-ratio:1;border-radius:12%;background:var(--deep);overflow:hidden}
.pz-pic .lk-shoe img{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;transform:scale(1.35);transform-origin:50% 88%}
.pz-name{font-weight:700;font-size:14px;line-height:1.2;text-wrap:balance;overflow-wrap:break-word}
.pz-tag{position:relative;display:inline-flex;flex-direction:column;align-items:center;margin-top:10px;padding:2px 10px 2px 14px;min-width:48px;border-radius:3px 8px 8px 3px;
  background:var(--pz-paper);color:var(--pz-paper-ink);font:400 15px var(--display);transform:rotate(-4deg);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.pz-tag::before{content:"";position:absolute;left:4px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--pz-peg-hole)}
.pz-tag::after{content:"";position:absolute;left:6px;top:-11px;width:1.5px;height:12px;background:var(--pz-paper-ink);transform:rotate(-20deg)}
.pz-tag s{font-size:12px;opacity:.7}
.pz-lock{font-size:14px}.pz-lock small{display:block;font:700 11px/1.2 var(--text);max-width:112px}
.pz-owned{margin-top:8px;padding:2px 10px;border:2px solid var(--green);border-radius:6px;color:var(--green);font:400 13px var(--display);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-6deg)}
.pz-prize.owned .pz-pic{opacity:.8}
.pz-prize.weekly{border-color:var(--pink)}
.pz-wishmark{position:absolute;top:4px;right:6px;color:var(--yellow);font-size:20px;text-shadow:0 0 6px var(--yellow)}

.pz-foot{grid-area:foot;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.pz-panel .pz-charms{margin:0;color:var(--text-lo);font-size:14px}
.pz-codebtn{min-height:44px}

/* TRY-ON: the card over the counter */
.pz-card{width:min(440px,100%);text-align:center}
.pz-card-pic{width:min(220px,60vw);margin:0 auto 6px}
.pz-card-pic .pt-box{width:100%}
.pz-card-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
.pz-card .pz-card-price{margin:6px 0;font-size:18px;color:var(--text-hi)}.pz-card-price b{color:var(--yellow)}.pz-card-price s{color:var(--text-dim)}
.pz-card-price .tk-ic{margin-right:6px}
.pz-card .pz-card-msg{margin:4px 0;color:var(--text-lo)}
.pz-card .pz-card-note{margin:4px 0;color:var(--cyan-hi);font-size:14px}
.pz-card-acts .btn{min-height:48px}
.pz-card-acts .btn[disabled]{opacity:.75;cursor:not-allowed}
.pz-code{width:min(420px,100%)}
.pz-codein{width:100%;min-height:48px;margin:8px 0;padding:6px 12px;border-radius:10px;border:2px solid var(--cyan);background:var(--deep);color:var(--text-hi);font:400 22px var(--display);letter-spacing:.1em;text-transform:uppercase;text-align:center}
.pz-code .pz-codemsg{min-height:1.3em;margin:4px 0}.pz-codemsg.good{color:var(--green)}.pz-codemsg.bad{color:var(--red)}

/* phones (≤ 760 px): one column; the machine and the spotlight stay on top (sticky) while the shelves scroll */
@media (max-width:760px){
  .pz-panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "clerk" "top" "wall" "foot";gap:10px;padding:10px 10px 14px;border-radius:14px}
  .pz-head{flex-wrap:nowrap;gap:8px}.pz-neon{font-size:clamp(22px,7vw,30px)}.pz-x{flex:none}
  .pz-panel .pz-wallet{padding:4px 10px;font-size:14px}.pz-wallet b{font-size:18px}
  .pz-clerk{grid-template-columns:auto 1fr auto;grid-template-rows:auto;align-items:center;padding:6px 8px}
  .pz-bot{grid-row:auto;width:48px}
  .pz-panel .pz-say{font-size:14px;padding:6px 10px}
  .pz-top{position:sticky;top:0;z-index:3;gap:8px;padding:6px;margin:0 -6px;border-radius:12px;background:var(--floor);box-shadow:0 6px 10px -4px rgba(0,0,0,.8)}
  .pz-machine,.pz-spot{padding:8px;gap:4px}
  .pz-mtitle{font-size:14px}
  .pz-mbox{padding:4px}.pz-mwin{padding:4px}.pz-mstars{display:none}.pz-panel .pz-mline{font-size:14px}
  .pz-tray,.pz-src{display:none}
  .pz-turn{min-height:44px;padding:6px 8px;font-size:15px}
  .pz-panel .pz-spot-sign{font-size:12px;padding:2px 6px}
  .pz-spot-btn{padding:2px 4px}.pz-spot-btn .pz-pic{width:56px}
  .pz-spot-btn .pz-name{font-size:13px}
  .pz-price{font-size:13px}.pz-price b{font-size:16px}
  .pz-panel .pz-spot-when{font-size:12px}
  .pz-prize{width:calc(50% - 8px);max-width:150px}
  .pz-s-case{margin:0 -10px;padding:10px 10px 16px}
}

/* THE SEASONAL SHELF (during an event: its colors --ev1/--ev2 from shared/seasons.js, its decorations; still) and the
   "Coming soon" card between events (the next event's items as silhouettes) */
.pz-s-season{padding-top:6px;border-radius:12px 12px 0 0;border:2px solid var(--ev1,var(--amber));border-bottom:12px solid var(--pz-wood-2);
  background:linear-gradient(color-mix(in srgb,var(--ev1,var(--amber)) 24%,transparent),color-mix(in srgb,var(--ev2,var(--amber)) 10%,var(--deep)))}
.pz-s-season .pz-shead{color:var(--text-hi);border:2px solid var(--ev1,var(--amber))}
.pz-season-sign b{color:var(--yellow);font-weight:400}
.pz-deco{display:flex;justify-content:space-between;margin:0 0 4px;font-size:20px;line-height:1}
.pz-soon{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:8px 12px;border-radius:12px;border:2px dashed var(--ev1,var(--text-dim));background:var(--deep)}
.pz-panel .pz-soon-t{margin:0;color:var(--text-lo);font-size:15px}.pz-soon-t b{color:var(--text-hi)}
.pz-soon-row{display:flex;gap:8px}
.pz-sil{display:block;width:56px}
.pz-sil .pt-box,.pz-sil .lk-plate,.pz-sil .lk-shoe{width:100%;filter:brightness(0) drop-shadow(0 0 1px var(--text-dim))}
/* a light seasonal touch on the glass case: a garland of dots in the event's two colors along its top */
.pz-touch .pz-s-case{border-top:6px solid transparent;border-image:repeating-linear-gradient(90deg,var(--ev1) 0 10px,var(--ev2) 10px 20px) 6}