/* Jigsaw Puzzles: tabla na filcu (bledo slika gde idu delovi), delovi u obliku slagalice oko nje. Raspored i položaje
   računa client/jigsaw/game.ts (--cell, --bw, --bh, --img, transform po delu). Kutija dela je 1 + 2 × 0,3 dela
   (ispupčenja); oblik je clip-path na unutrašnjem elementu, senka ide preko omotača. */
.is-game .felt.jigsaw{-webkit-user-select:none;user-select:none}
.jgboard{position:absolute;border-radius:3px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),inset 0 4px 14px rgba(0,0,0,.45);cursor:help}
.jgghost{position:absolute;inset:0;background-size:100% 100%;opacity:.2;filter:grayscale(.35);border-radius:3px}
.jgghost[hidden]{display:none}
.jgpieces{position:absolute;inset:0;pointer-events:none}
.felt.jgwait .jgpieces{visibility:hidden}
.jgp{position:absolute;left:0;top:0;width:calc(var(--cell)*1.6);height:calc(var(--cell)*1.6);margin:0;padding:0;border:0;background:none;
  pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.6));will-change:transform}
.jgi{display:block;width:100%;height:100%;background-image:var(--img);background-size:var(--bw) var(--bh);background-repeat:no-repeat;
  pointer-events:auto;cursor:grab;touch-action:pinch-zoom}
.jgp.lift{filter:drop-shadow(0 10px 10px rgba(0,0,0,.5)) drop-shadow(0 0 1px rgba(0,0,0,.6))}
.jgp.lift .jgi{cursor:grabbing}
.jgp.placed{filter:none;z-index:1 !important}
.jgp.placed .jgi{pointer-events:none;cursor:default}
.jgp.fly{transition:transform .18s ease-out}
.jgp.told{filter:drop-shadow(0 0 6px #f2c964) drop-shadow(0 0 3px #f2c964)}
.jgp.told.fly{transition:transform .5s ease-in-out}
.jgp:focus-visible{outline:none;filter:drop-shadow(0 0 3px #f2c964) drop-shadow(0 0 3px #f2c964) drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.jgpieces.deal .jgp{transition:transform .5s cubic-bezier(.2,.8,.3,1);transition-delay:calc(min(var(--i),60)*12ms)}
.jgpieces.instant .jgp{transition:none}
.felt.jgwon .jgboard{box-shadow:0 0 0 3px #f2c964,0 0 30px rgba(242,201,100,.6)}
/* poklopac kutije (Picture) */
.jgbox{text-align:center}
.jgbox img{display:block;width:100%;max-width:760px;height:auto;margin:0 auto 10px;border-radius:4px;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.jgbox p{margin:6px 0;color:var(--cream)}
.jgcredit{font-size:14px;color:var(--cream-3)}
@media (prefers-reduced-motion:reduce){.jgp.fly,.jgpieces.deal .jgp{transition:none}}