/* игра «Пазлы» (puzzle): стили только этой игры. Все правила через #s-puzzle, анимации с префиксом pz-. */
#s-puzzle{background:#f3e3c3}
#s-puzzle .bg{object-position:50% 50%}
#s-puzzle .pz-table{position:absolute;inset:0;z-index:2}
/* the board: a wooden frame with the faint picture inside; everything inside is placed by layout() in px */
#s-puzzle .pz-board{position:absolute;z-index:3;border-radius:1.2vmin;background:rgba(255,250,240,.55);box-shadow:0 1.4vmin 3vmin rgba(60,30,0,.28),inset 0 0 0 .6vmin rgba(120,80,30,.35);transition:opacity .4s}
#s-puzzle .pz-board:before{content:"";position:absolute;inset:-5.5%;border:0 solid transparent;border-image:url(../../img/pz_frame.webp) 26% fill / 5.5% / 0 round;pointer-events:none;z-index:5}
#s-puzzle .pz-board.pz-round{border-radius:50%;box-shadow:0 1.4vmin 3vmin rgba(60,30,0,.28),0 0 0 2.6vmin #fff,0 0 0 3.6vmin #e9d7b8}
#s-puzzle .pz-board.pz-round:before{display:none}
#s-puzzle .pz-board.pz-round .pz-ghost,#s-puzzle .pz-board.pz-round .pz-hint{border-radius:50%}
#s-puzzle .pz-ghost,#s-puzzle .pz-hint{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#s-puzzle .pz-hint{opacity:0;z-index:2}
#s-puzzle .pz-hint.on{animation:pz-hintpulse 1s ease-in-out infinite}
@keyframes pz-hintpulse{0%,100%{opacity:.25}50%{opacity:1}}
#s-puzzle .pz-board.pz-off{opacity:0;pointer-events:none}
/* pieces: canvases moved in px; the one in the hand is lifted */
#s-puzzle .pz-pieces{position:absolute;inset:0;z-index:5;touch-action:none;pointer-events:none}
#s-puzzle .pz-piece{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform;touch-action:none;transition:scale .24s cubic-bezier(.3,1.4,.5,1),rotate .18s ease-out;pointer-events:auto;filter:drop-shadow(0 .5vmin .6vmin rgba(0,0,0,.35))}
#s-puzzle .pz-piece canvas{display:block;width:100%;height:100%;pointer-events:none}
#s-puzzle .pz-piece.pz-lift{transition:transform .2s cubic-bezier(.3,1.5,.5,1),scale .24s cubic-bezier(.3,1.4,.5,1),rotate .18s ease-out}
#s-puzzle .pz-piece.pz-held{scale:1.06;z-index:60;filter:drop-shadow(0 2.4vmin 1.6vmin rgba(0,0,0,.4))}
#s-puzzle .pz-piece.pz-hid{visibility:hidden;pointer-events:none}
#s-puzzle .pz-piece.pz-set{z-index:1;filter:none;pointer-events:none}
#s-puzzle .pz-piece.pz-glide{transition:translate .34s cubic-bezier(.25,.9,.35,1.12),transform .34s cubic-bezier(.25,.9,.35,1.12),scale .24s cubic-bezier(.3,1.4,.5,1),rotate .3s ease-out}
#s-puzzle .pz-piece.pz-snap{transition:translate .18s cubic-bezier(.2,.9,.3,1),transform .18s ease-out,scale .2s ease-out,rotate .2s ease-out}
#s-puzzle .pz-piece.pz-wig{animation:pz-pwig .45s}
@keyframes pz-pwig{20%,60%{left:-1.5vmin}40%,80%{left:1.5vmin}}
@keyframes pz-wig{20%,60%{translate:-1.5vmin 0}40%,80%{translate:1.5vmin 0}}
#s-puzzle .pz-piece.pz-hop{animation:pz-hop .7s ease-out}
@keyframes pz-hop{30%{top:-4vmin;scale:1.1}60%{top:0;scale:1}80%{top:-1.5vmin}}
#s-puzzle .pz-piece.pz-gold:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,240,150,0) 30%,rgba(255,250,200,.85) 48%,rgba(255,200,60,.5) 52%,rgba(255,240,150,0) 70%) no-repeat;background-size:250% 100%;animation:pz-shine 1.8s linear infinite;mix-blend-mode:screen;-webkit-mask:var(--pz-mask) center/100% 100% no-repeat;mask:var(--pz-mask) center/100% 100% no-repeat}
@keyframes pz-shine{from{background-position:130% 0}to{background-position:-50% 0}}
#s-puzzle .pz-wave-done .pz-piece{animation:pz-wave .5s ease-in-out}
@keyframes pz-wave{50%{scale:1.08}}
/* the tray: the open box with the pieces */
#s-puzzle .pz-tray{position:absolute;z-index:2;transition:opacity .4s}
#s-puzzle .pz-tray-img{position:absolute;left:-4%;top:-10%;width:108%;height:120%;object-fit:fill;pointer-events:none;filter:drop-shadow(0 .8vmin 1.2vmin rgba(0,0,0,.25))}
#s-puzzle .pz-tray.pz-off{opacity:0;pointer-events:none}
/* the puzzle box that "sneezes" the pieces out at the start of a round */
#s-puzzle .pz-box{position:absolute;z-index:40;pointer-events:none;display:none}
#s-puzzle .pz-box.show{display:block}
#s-puzzle .pz-box img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}
#s-puzzle .pz-box.shake{animation:pz-boxshake .9s ease-in-out}
@keyframes pz-boxshake{0%,100%{rotate:0deg;scale:1}20%{rotate:-4deg}40%{rotate:4deg}60%{rotate:-5deg;scale:1.05}80%{rotate:4deg}}
#s-puzzle .pz-box .pz-box-lid{transition:translate .5s cubic-bezier(.3,1.4,.5,1),rotate .5s,opacity .4s .3s}
#s-puzzle .pz-box.open .pz-box-lid{translate:30% -90%;rotate:18deg;opacity:0}
/* album button (top right) and the album overlay */
#s-puzzle .pz-album-btn{position:absolute;z-index:50;right:calc(2vmin + env(safe-area-inset-right));top:calc(2vmin + env(safe-area-inset-top));width:14vmin;height:14vmin;background:none;filter:drop-shadow(0 .6vmin .8vmin rgba(0,0,0,.3));animation:floaty 3.4s ease-in-out infinite;transition:transform .15s}
#s-puzzle .pz-album-btn img{width:100%;height:100%;object-fit:contain}
#s-puzzle .pz-album-btn{transition:scale .2s cubic-bezier(.3,1.6,.5,1)}
#s-puzzle .pz-album-btn:active{scale:.86}
#s-puzzle .pz-album-btn.pz-pulse{animation:pz-albumpulse .6s ease-in-out 3}
@keyframes pz-albumpulse{50%{scale:1.25;rotate:-6deg}}
#s-puzzle .pz-album{position:absolute;inset:0;z-index:70;display:none;overflow:hidden;background:#d8c4a0}
#s-puzzle .pz-album.show{display:block;animation:pz-fadein .35s}
@keyframes pz-fadein{from{opacity:0}}
#s-puzzle .pz-album-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#s-puzzle .pz-album-grid{position:absolute;left:calc(3vmin + env(safe-area-inset-left));right:calc(3vmin + env(safe-area-inset-right));top:calc(16vmin + env(safe-area-inset-top));bottom:calc(12vmin + env(safe-area-inset-bottom));overflow-y:auto;touch-action:pan-y;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:3.2vmin 3vmin;padding:1vmin 1vmin 4vmin}
#s-puzzle .pz-card{position:relative;width:22vmin;aspect-ratio:2/3;border-radius:1.4vmin;background:#fff;padding:1.1vmin 1.1vmin 2.6vmin;box-shadow:0 .6vmin 1.4vmin rgba(0,0,0,.25);rotate:var(--r);animation:pop-in .4s backwards;transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
#s-puzzle .pz-card:active{transform:scale(.94)}
#s-puzzle .pz-card img.pz-th{width:100%;height:100%;object-fit:cover;border-radius:.6vmin;display:block}
#s-puzzle .pz-card.pz-new img.pz-th{filter:grayscale(.9) brightness(1.15) contrast(.75);opacity:.75}
#s-puzzle .pz-card.pz-done{box-shadow:0 0 0 .9vmin #ffd23f,0 0 0 1.5vmin #e9a51c,0 .8vmin 1.8vmin rgba(0,0,0,.3)}
#s-puzzle .pz-card .pz-stk{position:absolute;right:-3vmin;top:-3vmin;width:9vmin;height:9vmin;object-fit:contain;filter:drop-shadow(0 .3vmin .4vmin rgba(0,0,0,.3));animation:pop-in .5s .25s backwards}
#s-puzzle .pz-card .pz-q{position:absolute;left:50%;top:50%;width:46%;height:auto;translate:-50% -50%;opacity:.9;filter:drop-shadow(0 .3vmin .4vmin rgba(0,0,0,.35))}
#s-puzzle .pz-card .pz-n{position:absolute;left:50%;bottom:-2.2vmin;translate:-50% 0;min-width:6vmin;height:6vmin;padding:0 1.4vmin;border-radius:3vmin;background:#ffd23f;border:.5vmin solid #fff;font-weight:900;font-size:3.4vmin;color:#5a3b1f;display:flex;align-items:center;justify-content:center;box-shadow:0 .4vmin .8vmin rgba(0,0,0,.25)}
#s-puzzle .pz-album-gold{position:absolute;left:50%;bottom:calc(2.5vmin + env(safe-area-inset-bottom));translate:-50% 0;height:8vmin;display:flex;align-items:center;gap:.6vmin;padding:0 2vmin;border-radius:4vmin;background:rgba(255,255,255,.85);box-shadow:0 .6vmin 1.2vmin rgba(0,0,0,.2)}
#s-puzzle .pz-album-gold:empty{display:none}
#s-puzzle .pz-album-gold img{height:6.4vmin;width:6.4vmin;object-fit:contain;animation:pop-in .4s backwards}
#s-puzzle .pz-album-x{right:calc(2vmin + env(safe-area-inset-right));top:calc(2vmin + env(safe-area-inset-top));left:auto}
#s-puzzle .pz-album-title{position:absolute;left:calc(17vmin + env(safe-area-inset-left));top:calc(3vmin + env(safe-area-inset-top));height:10vmin;display:flex;align-items:center;gap:1.5vmin;padding:0 2.4vmin;border-radius:5vmin;background:rgba(255,255,255,.9);box-shadow:0 .6vmin 0 #e9a51c,0 1vmin 1.6vmin rgba(0,0,0,.2);font-weight:900;font-size:4.2vmin;color:#5a3b1f}
#s-puzzle .pz-album-title img{height:7vmin;width:7vmin;object-fit:contain}
/* cubes: every cell is a cube with 4 faces, a tap turns it */
#s-puzzle .pz-cubes{position:absolute;inset:0;z-index:3;display:none;perspective:900px;perspective-origin:50% 50%}
#s-puzzle .pz-cubes.show{display:block}
#s-puzzle .pz-cube{position:absolute;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.3,.5,1);touch-action:none;cursor:pointer}
#s-puzzle .pz-cube.pz-ok{transition:transform .45s cubic-bezier(.3,1.3,.5,1),scale .3s}
#s-puzzle .pz-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6%;overflow:hidden;box-shadow:inset 0 0 0 .5vmin rgba(255,255,255,.55),inset 0 0 0 .8vmin rgba(80,50,20,.35)}
/* a filter on the cube itself flattens its 3D (the turned cube showed only an edge): the shadow sits on the faces */
#s-puzzle .pz-face{filter:drop-shadow(0 .6vmin .8vmin rgba(0,0,0,.35))}
#s-puzzle .pz-face canvas{display:block;width:100%;height:100%}
#s-puzzle .pz-cube.pz-wobble{animation:pz-wobble .5s}
@keyframes pz-wobble{25%{rotate:-4deg}75%{rotate:4deg}}
#s-puzzle .pz-cube.pz-done-c:after{content:"";position:absolute;inset:0;border-radius:4%;box-shadow:0 0 0 .6vmin #7ddf7a,0 0 2vmin #7ddf7a;animation:pz-fadein .3s;pointer-events:none}
/* the hidden-pieces scene over the board */
#s-puzzle .pz-hide{position:absolute;z-index:6;display:none;overflow:hidden;border-radius:1.6vmin;box-shadow:0 1.4vmin 3vmin rgba(0,0,0,.3);touch-action:none}
#s-puzzle .pz-hide.show{display:block}
#s-puzzle .pz-hide .pz-scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
#s-puzzle .pz-hide .pz-sand{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3}
#s-puzzle .pz-hide .pz-sunk{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 .3vmin .4vmin rgba(0,0,0,.3));transform-origin:50% 50%}
#s-puzzle .pz-hide .pz-sunk canvas{display:block;width:100%;height:100%}
#s-puzzle .pz-shovel{position:absolute;z-index:5;width:16vmin;height:16vmin;object-fit:contain;pointer-events:none;translate:-20% -85%;opacity:0;transition:opacity .2s;rotate:-20deg}
#s-puzzle .pz-shovel.on{opacity:1}
#s-puzzle .pz-bucket{position:absolute;z-index:4;right:2%;bottom:2%;width:22%;aspect-ratio:1;object-fit:contain;cursor:pointer}
#s-puzzle .pz-bucket.pz-wig{animation:pz-wig .45s}
#s-puzzle .pz-bub{position:absolute;z-index:4;aspect-ratio:1;cursor:pointer;animation:pz-float var(--d,5s) ease-in-out infinite alternate;translate:0 0}
#s-puzzle .pz-bub img.pz-bubimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2}
#s-puzzle .pz-bub .pz-in{position:absolute;left:50%;top:50%;translate:-50% -50%;scale:.55;pointer-events:none}
#s-puzzle .pz-bub .pz-in canvas{display:block}
#s-puzzle .pz-bub.pz-pop{animation:pz-pop .25s forwards}
@keyframes pz-float{from{transform:translate(0,0)}to{transform:translate(var(--dx,2vmin),var(--dy,-3vmin))}}
@keyframes pz-pop{to{scale:1.4;opacity:0}}
#s-puzzle .pz-bal{position:absolute;z-index:4;cursor:pointer;animation:pz-balfloat var(--d,4s) ease-in-out infinite alternate;transform-origin:50% 0}
#s-puzzle .pz-bal img.pz-balimg{display:block;width:100%;height:auto;pointer-events:none;filter:hue-rotate(var(--h,0deg)) drop-shadow(0 .4vmin .6vmin rgba(0,0,0,.25))}
#s-puzzle .pz-bal .pz-in{position:absolute;left:50%;top:68%;translate:-50% 0;transform-origin:50% 0;pointer-events:none;z-index:2}
#s-puzzle .pz-bal .pz-in canvas{display:block}
#s-puzzle .pz-bal.pz-pop img.pz-balimg{animation:pz-pop .18s forwards}
@keyframes pz-balfloat{from{transform:translate(0,0) rotate(-4deg)}to{transform:translate(var(--dx,1vmin),var(--dy,-4vmin)) rotate(4deg)}}
#s-puzzle .pz-wave{position:absolute;left:-10%;width:120%;height:22%;pointer-events:none;z-index:4;background:url(../../img/pz_wave.webp) repeat-x;background-size:auto 100%;opacity:.85;animation:pz-wavex var(--d,6s) linear infinite}
@keyframes pz-wavex{from{background-position:0 0}to{background-position:60vmin 0}}
#s-puzzle .pz-swim{position:absolute;z-index:3;cursor:pointer;animation:pz-bob var(--d,3s) ease-in-out infinite alternate}
#s-puzzle .pz-swim canvas{display:block;filter:drop-shadow(0 .3vmin .4vmin rgba(0,0,0,.25))}
@keyframes pz-bob{from{transform:translate(0,0) rotate(-5deg)}to{transform:translate(var(--dx,2vmin),var(--dy,1.5vmin)) rotate(5deg)}}
#s-puzzle .pz-net{position:absolute;z-index:6;width:22vmin;height:22vmin;object-fit:contain;pointer-events:none;translate:-60% -60%;opacity:0;transition:opacity .2s}
#s-puzzle .pz-net.on{opacity:1}
#s-puzzle .pz-net.pz-scoop{animation:pz-scoop .4s}
@keyframes pz-scoop{40%{scale:1.15;rotate:-20deg}}
#s-puzzle .pz-fish{position:absolute;z-index:3;width:18%;aspect-ratio:1;object-fit:contain;cursor:pointer;animation:pz-fishswim var(--d,9s) linear infinite}
@keyframes pz-fishswim{0%{transform:translateX(-120%) scaleX(1)}48%{transform:translateX(560%) scaleX(1)}50%{transform:translateX(560%) scaleX(-1)}98%{transform:translateX(-120%) scaleX(-1)}100%{transform:translateX(-120%) scaleX(1)}}
#s-puzzle .pz-fish.pz-wig{animation:pz-wig .45s}
/* the train */
#s-puzzle .pz-train{position:absolute;z-index:4;display:none;pointer-events:none}
#s-puzzle .pz-train.show{display:block}
#s-puzzle .pz-rail{position:absolute;left:0;right:0;bottom:4%;height:7%;background:repeating-linear-gradient(90deg,#8a6a45 0 4vmin,transparent 4vmin 7vmin) center/100% 55% no-repeat,linear-gradient(#6b4a2a,#6b4a2a) center 20%/100% 12% no-repeat,linear-gradient(#6b4a2a,#6b4a2a) center 80%/100% 12% no-repeat;opacity:.9}
#s-puzzle .pz-cars{position:absolute;left:0;bottom:8%;height:80%;display:flex;will-change:translate;align-items:flex-end;gap:.5vmin;transition:translate 1.5s cubic-bezier(.4,0,.3,1)}
#s-puzzle .pz-cars.pz-chug{animation:pz-chug .35s linear infinite}
@keyframes pz-chug{50%{transform:translateY(-2px)}}
#s-puzzle .pz-loco{flex:none;object-fit:contain;pointer-events:auto;cursor:pointer}
#s-puzzle .pz-wagon{position:relative;flex:none}
#s-puzzle .pz-wagon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
#s-puzzle .pz-smoke{position:absolute;width:5vmin;height:5vmin;border-radius:50%;background:radial-gradient(#fff,rgba(255,255,255,0) 70%);pointer-events:none;animation:pz-smoke 1.4s ease-out forwards}
@keyframes pz-smoke{from{translate:0 0;scale:.4;opacity:.9}to{translate:3vmin -10vmin;scale:1.6;opacity:0}}
/* the picture comes alive */
#s-puzzle .pz-alive{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;border-radius:1.2vmin}
#s-puzzle .pz-board.pz-done{animation:pz-sway 2.2s ease-in-out 2}
@keyframes pz-sway{25%{rotate:-2deg}75%{rotate:2deg}}
#s-puzzle .pz-alive.pz-shine:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%) no-repeat;background-size:250% 100%;animation:pz-shinex 1.5s ease-in-out 2}
@keyframes pz-shinex{from{background-position:120% 0}to{background-position:-60% 0}}
#s-puzzle .pz-alive .pz-cloud{position:absolute;width:30%;top:var(--t,5%);left:-35%;animation:pz-cloudx var(--d,16s) linear infinite;opacity:.9}
@keyframes pz-cloudx{to{left:105%}}
#s-puzzle .pz-alive .pz-bf{position:absolute;width:12%;animation:pz-bfly var(--d,7s) ease-in-out infinite alternate}
@keyframes pz-bfly{0%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(var(--mx,20vmin),var(--my,-8vmin)) rotate(10deg)}100%{transform:translate(var(--ex,40vmin),var(--ey,4vmin)) rotate(-6deg)}}
#s-puzzle .pz-alive i{position:absolute;width:6%;aspect-ratio:1;translate:-50% -50%;background:var(--c,#fff);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:twinkle 1.3s ease-in-out infinite;filter:drop-shadow(0 0 .6vmin #fff)}
#s-puzzle .pz-night{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity 1.6s;background:linear-gradient(rgba(10,20,70,.78),rgba(20,30,90,.6) 60%,rgba(40,30,60,.55));mix-blend-mode:multiply;border-radius:1.2vmin}
#s-puzzle .pz-board.pz-isnight .pz-night{opacity:1}
#s-puzzle .pz-nightfx{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity 1.6s;overflow:hidden;border-radius:1.2vmin}
#s-puzzle .pz-board.pz-isnight .pz-nightfx{opacity:1}
#s-puzzle .pz-nightfx .pz-moon{position:absolute;right:6%;top:4%;width:22%;animation:floaty 5s ease-in-out infinite}
#s-puzzle .pz-nightfx .pz-lantern{position:absolute;width:12%;animation:pz-lant 2.4s ease-in-out infinite alternate;filter:drop-shadow(0 0 2vmin rgba(255,180,60,.9))}
@keyframes pz-lant{from{rotate:-6deg;filter:drop-shadow(0 0 1.2vmin rgba(255,180,60,.6))}to{rotate:6deg;filter:drop-shadow(0 0 2.6vmin rgba(255,200,80,1))}}
#s-puzzle .pz-nightfx .pz-star{position:absolute;width:3%;aspect-ratio:1;background:#fff8c0;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:twinkle var(--d,1.6s) ease-in-out infinite;filter:drop-shadow(0 0 .5vmin #fff)}
/* find-the-piece: the candidates under the board */
#s-puzzle .pz-cands{position:absolute;z-index:6;display:none;align-items:center;justify-content:center;gap:4vmin}
#s-puzzle .pz-cands.show{display:flex}
#s-puzzle .pz-cand{position:relative;cursor:pointer;animation:pop-in .4s backwards;filter:drop-shadow(0 .6vmin .8vmin rgba(0,0,0,.35));transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
#s-puzzle .pz-cand:active{transform:scale(.94)}
#s-puzzle .pz-cand canvas{display:block}
#s-puzzle .pz-cand.pz-wig{animation:pz-wig .45s}
#s-puzzle .pz-hole{position:absolute;z-index:3;pointer-events:none;animation:pz-hintpulse 1.2s ease-in-out infinite}
/* помощник из семьи: размер и место на экране этой игры (их читает общий .helper.fam3d в core/core.css).
   --hp-h = высота фигуры (доля высоты экрана), --hp-x = отступ слева, --hp-y = где стоят ноги (от низа); точное место считает layout() в puzzle.js (helper.place) */
#s-puzzle .helper.fam3d{--hp-h:42%;--hp-x:2.5vmin;--hp-y:1%}
@media (orientation:portrait){#s-puzzle .helper.fam3d{--hp-h:28%}}
#s-puzzle .helper{z-index:30}
#s-puzzle.pz-in-album .helper,#s-puzzle.pz-in-album .pz-album-btn{display:none}
#s-puzzle .pz-handhint{position:absolute;z-index:80;width:17vmin;height:17vmin;translate:-30% -8%;pointer-events:none;opacity:0;filter:drop-shadow(0 .6vmin .6vmin rgba(0,0,0,.35))}
#s-puzzle .pz-handhint svg{width:100%;height:100%;display:block}
/* ---------- v2 (12.10): progress beads, the eye, the peek, the cubes' sample ---------- */
#s-puzzle .pz-prog{position:absolute;z-index:7;translate:-50% -50%;display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--pd,3vmin)*.22);pointer-events:none}
#s-puzzle .pz-prog i{width:var(--pd,3vmin);height:var(--pd,3vmin);border-radius:50%;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 .35vmin rgba(90,59,31,.45),0 .2vmin .4vmin rgba(0,0,0,.25);transition:background .3s,scale .3s}
#s-puzzle .pz-prog i.pz-got{background:#ffd23f}
#s-puzzle .pz-prog i.pz-ok{background:#52c75a;box-shadow:inset 0 0 0 .35vmin #2c8a34,0 0 1vmin rgba(82,199,90,.8);animation:pz-bead .4s}
@keyframes pz-bead{50%{scale:1.5}}
#s-puzzle .pz-eye{position:absolute;z-index:45;border-radius:50%;padding:1.4vmin;background:radial-gradient(#fff,#ffe9b0);box-shadow:0 .6vmin 0 #e9a51c,0 1vmin 1.6vmin rgba(0,0,0,.3);touch-action:none}
#s-puzzle .pz-eye svg{width:100%;height:100%;display:block;pointer-events:none}
#s-puzzle .pz-eye{transition:scale .2s cubic-bezier(.3,1.6,.5,1)}
#s-puzzle .pz-eye:active{scale:.86}
#s-puzzle .pz-eye.pz-eyepulse{animation:pz-eyepulse .6s ease-in-out 3}
@keyframes pz-eyepulse{50%{scale:1.3;box-shadow:0 .6vmin 0 #e9a51c,0 0 3vmin 1vmin #ffd23f}}
#s-puzzle .pz-peek{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:2;opacity:0;transition:opacity .7s}
#s-puzzle .pz-peek.on{opacity:.95;transition:opacity .25s}
#s-puzzle .pz-sample{position:absolute;z-index:6;border-radius:1.2vmin;background:#fff;box-shadow:0 0 0 1vmin #fff,0 0 0 1.5vmin #ffb648,0 1.2vmin 2.4vmin rgba(60,30,0,.35);touch-action:none}
#s-puzzle .pz-sample canvas{display:block;width:100%;height:100%;border-radius:1vmin;pointer-events:none}
#s-puzzle .pz-sample.pz-shop{animation:pz-shop .6s ease-out}
@keyframes pz-shop{35%{translate:0 -3vmin;scale:1.06}70%{translate:0 0;scale:1}85%{translate:0 -1vmin}}
#s-puzzle .pz-sample.pz-sdone{box-shadow:0 0 0 1vmin #fff,0 0 0 1.6vmin #52c75a,0 0 3vmin #52c75a}
#s-puzzle .pz-scell{position:absolute;pointer-events:none;box-sizing:border-box;border:.9vmin solid #ffd23f;border-radius:.8vmin;box-shadow:0 0 1.6vmin #ffd23f,inset 0 0 1.2vmin rgba(255,210,63,.7)}
#s-puzzle .pz-scell.pz-ok{border-color:#52c75a;box-shadow:0 0 1.6vmin #52c75a}
#s-puzzle .pz-scell.pz-spulse{animation:pz-spulse .6s ease-in-out 4}
@keyframes pz-spulse{50%{scale:1.15;opacity:.5}}
#s-puzzle .pz-cube.pz-done-c .pz-face{box-shadow:inset 0 0 0 .9vmin #52c75a,inset 0 0 2.4vmin rgba(82,199,90,.6)}
#s-puzzle .pz-cube.pz-click{animation:pz-click .4s ease-out}
@keyframes pz-click{40%{scale:1.08}}
#s-puzzle .pz-cands.pz-two{flex-wrap:wrap;gap:2.4vmin;align-content:center}
/* ---------- end puzzle v2 ---------- */
/* ---------- v2b: the cubes' badges ---------- */
#s-puzzle .pz-cbadge{position:absolute;z-index:4;pointer-events:none;filter:drop-shadow(0 .4vmin .5vmin rgba(0,0,0,.35));animation:pz-bturn 2.4s ease-in-out infinite}
#s-puzzle .pz-cbadge svg{width:100%;height:100%;display:block}
#s-puzzle .pz-cbadge.pz-ok{animation:none}
#s-puzzle .pz-cbadge.pz-bpop{animation:pz-bpop .5s ease-out}
@keyframes pz-bturn{0%,70%,100%{rotate:0deg}85%{rotate:40deg}}
@keyframes pz-bpop{40%{scale:1.5}}
/* ---------- end puzzle v2b ---------- */

/* ---------- polish 14.10: game feel (plan agents/polish/puzzle_plan.md) ---------- */
#s-puzzle .pz-fx{position:absolute;inset:0;z-index:65;pointer-events:none;overflow:hidden}
#s-puzzle .pz-p{position:absolute;display:block;will-change:transform,opacity;pointer-events:none}
#s-puzzle .pz-p.star{clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
#s-puzzle .pz-p.dot{border-radius:50%}
#s-puzzle .pz-ring{position:absolute;display:block;box-sizing:border-box;border:.9vmin solid #ffe36b;border-radius:50%;box-shadow:0 0 1.6vmin rgba(255,230,120,.8);will-change:transform,opacity;pointer-events:none}
#s-puzzle .pz-plus{position:absolute;font-weight:900;font-size:6.4vmin;line-height:1;color:#ffd23f;-webkit-text-stroke:.5vmin #8a4b00;paint-order:stroke fill;text-shadow:0 .5vmin 0 #8a4b00,0 0 1.6vmin rgba(255,255,255,.7);will-change:transform,opacity;pointer-events:none;white-space:nowrap}
#s-puzzle .pz-banner{position:absolute;left:50%;font-weight:900;font-size:8.4vmin;line-height:1;white-space:nowrap;color:#fff;padding:1vmin 3.4vmin 1.4vmin;border-radius:5vmin;background:linear-gradient(#ffb648,#ff7a1a);box-shadow:0 .7vmin 0 #b8501a,0 1.2vmin 2vmin rgba(0,0,0,.28),inset 0 .5vmin 0 rgba(255,255,255,.45);text-shadow:0 .4vmin 0 rgba(140,60,0,.55);will-change:transform,opacity;pointer-events:none}
#s-puzzle .pz-banner.pz-big{font-size:10.4vmin;background:linear-gradient(#ff8fc8,#b26cff);box-shadow:0 .7vmin 0 #6a3aa8,0 1.2vmin 2vmin rgba(0,0,0,.28),inset 0 .5vmin 0 rgba(255,255,255,.45)}
#s-puzzle .pz-flash{position:absolute;inset:0;z-index:66;opacity:0;pointer-events:none}
#s-puzzle .pz-glow{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;background:radial-gradient(circle at 50% 40%,rgba(255,244,190,.95),rgba(255,214,235,.5) 45%,rgba(255,255,255,0) 75%)}
#s-puzzle .pz-rbw{position:absolute;inset:0 -60%;display:block;opacity:0;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(100deg,#ff5b6e,#ffc531,#4fc36b,#3fa3ff,#b26cff,#ff8fc8,#ff5b6e);will-change:transform,opacity}
/* the living background: soft motes of light drift up (opacity/transform only) */
#s-puzzle .pz-motes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#s-puzzle .pz-motes i{position:absolute;bottom:-4vmin;width:var(--s,2vmin);height:var(--s,2vmin);border-radius:50%;background:radial-gradient(#fffbe0,rgba(255,240,170,0) 70%);opacity:0;animation:pz-mote var(--d,10s) ease-in-out infinite;will-change:transform,opacity}
@keyframes pz-mote{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.85}60%{opacity:.6}100%{transform:translate(4vmin,-70vmin) scale(1.2);opacity:0}}
#s-puzzle.pz-in-album .pz-motes{display:none}
/* a stop-frame: the living things hold for a moment (the effects layer and touches are not affected) */
#s-puzzle.pz-freeze .pz-motes i,#s-puzzle.pz-freeze .pz-album-btn,#s-puzzle.pz-freeze .pz-wave,#s-puzzle.pz-freeze .pz-bub,#s-puzzle.pz-freeze .pz-bal,#s-puzzle.pz-freeze .pz-swim,#s-puzzle.pz-freeze .pz-fish,#s-puzzle.pz-freeze .pz-alive *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){#s-puzzle .pz-motes{display:none}}