/* игра «Прятки» (peek): стили только этой игры. Селекторы без #s-peek действуют на всю страницу — новые правила пишите через #s-peek.
   v5: сетка укрытий через --cols/--rows (JS, по ориентации), ходоки .pk-walker, портрет-вопрос .pk-ask + ряд найденных в .pk-top,
   корзинки .pk-cup, сцена «Кто спрятался?» (.pk-stage, занавес .pk-curtain, выбор .pk-opts), ночь .peek-dark, финал .peek-party, «Ты прячешься». */
#s-peek{--top:calc(env(safe-area-inset-top) + 3vmin + min(13vmin,84px))}
#s-peek .bg{object-position:50% 20%}
/* the stage: hiding places in a grid that fits (JS sets --cols/--rows); the last row is centered */
#s-peek .peek-area{--cols:3;--rows:2;--gap:2vmin;position:absolute;left:4vw;right:4vw;top:var(--top);bottom:2vh;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:var(--gap)}
@media (orientation:portrait){#s-peek .peek-area{left:3vw;right:3vw;top:calc(env(safe-area-inset-top) + 31vmin)}}
#s-peek[data-kind="B"] .peek-area{bottom:calc(var(--os) + 5vh + env(safe-area-inset-bottom))}
#s-peek .spot{position:relative;flex:none;width:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));height:calc((100% - (var(--rows) - 1) * var(--gap)) / var(--rows));min-width:0;min-height:0;display:flex;align-items:flex-end;justify-content:center;animation:pop-in .5s backwards;touch-action:none}
#s-peek .spot::before{content:'';position:absolute;left:14%;right:14%;bottom:-1%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,25,0,.28),rgba(40,25,0,0));z-index:0}
#s-peek .spot .obj{--sd:0s;position:relative;max-height:72%;max-width:92%;z-index:2;transition:transform .45s;transform-origin:50% 100%;animation:sway 5s var(--sd) ease-in-out infinite}
@keyframes sway{0%,100%{scale:1 1}50%{scale:1.015 .985}}
#s-peek .spot.wiggle .obj{animation:shake .45s}
#s-peek .spot.rustle .obj{animation:rustle .9s}
@keyframes rustle{0%,100%{rotate:0deg;translate:0 0}15%{rotate:-4deg}30%{rotate:4deg;translate:0 -1.2vmin}45%{rotate:-3deg}60%{rotate:3deg;translate:0 0}80%{rotate:-1deg}}
#s-peek .spot.settle .obj{animation:settle .5s}
@keyframes settle{0%{scale:1 1}40%{scale:1.06 .92}75%{scale:.97 1.04}100%{scale:1 1}}
/* a hider behind the thing: hidden by default, .run — standing behind it (head above), .peep — a corner for a moment, .pk-out — out in full and stays, .found — out with joy */
#s-peek .spot .who{position:absolute;bottom:22%;left:50%;max-height:78%;max-width:108%;transform:translate(-50%,12%) scale(.55);opacity:0;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.3,1.4,.5,1),opacity .2s .12s;z-index:1}
#s-peek .spot .who.pet{max-height:60%}
#s-peek .spot .who.run,#s-peek .spot .who.peep,#s-peek .spot .who.pk-out,#s-peek .spot.found .who{opacity:1;transition:transform .55s cubic-bezier(.3,1.4,.5,1),opacity .15s}
#s-peek .spot .who.run{transform:translate(-50%,-18%) scale(1);transition:transform .45s ease-in-out,opacity .1s}
#s-peek .spot .who.peep{transform:translate(-50%,26%) scale(.9)}
#s-peek .spot .who.peep.side{transform:translate(-18%,14%) rotate(12deg) scale(.86)}
#s-peek .spot .who.pk-out{transform:translate(-50%,-18%) scale(1);filter:drop-shadow(0 0 1.4vmin #fff6a0);animation:wave 1.3s ease-in-out infinite alternate}
#s-peek .spot.found .who{transform:translate(-50%,-18%) scale(1);pointer-events:none;animation:none}
/* layers (see twin() in peek.js): the twin of the figure is above all things, cut at the top edge of its own thing; out in the open — whole */
#s-peek .spot .pk-twin{position:absolute;inset:0;z-index:3;pointer-events:none;clip-path:inset(-100vh -100vw var(--cut,0px) -100vw)}
#s-peek .spot .pk-twin .who{pointer-events:none}
#s-peek .spot.lift .pk-twin{clip-path:inset(-100vh -100vw calc(var(--cut,0px) * 1.14) -100vw)}
#s-peek .spot.found .pk-twin{clip-path:none}
#s-peek .spot.found .who:not(.twin){visibility:hidden}
#s-peek .spot.found .obj{transform:translateX(var(--fx,34%)) scale(.88)}
#s-peek .spot.lift .obj{transform:translateY(-14%) rotate(-6deg)}
@keyframes wave{from{rotate:-3deg}to{rotate:3deg}}
#s-peek .found .who.r-jump{animation:r-jump .55s .35s 3 ease-out}
#s-peek .found .who.r-spin{animation:r-spin .9s .35s ease-in-out}
#s-peek .found .who.r-dance{animation:r-dance .4s .35s 5 alternate ease-in-out}
#s-peek .found .who.r-wave{animation:wave .5s .35s 5 alternate ease-in-out}
#s-peek .found .who.r-squish{animation:r-squish .6s .35s 3}
@keyframes r-jump{0%,100%{translate:0 0}45%{translate:0 -7vmin}}
@keyframes r-spin{from{rotate:0deg}to{rotate:360deg}}
@keyframes r-dance{from{rotate:-9deg;translate:-1.5vmin 0}to{rotate:9deg;translate:1.5vmin -1.5vmin}}
@keyframes r-squish{0%,100%{scale:1 1}30%{scale:1.12 .86}60%{scale:.92 1.1}}
#s-peek .spot.gone .obj{opacity:.92}
/* a walker: comes in from the edge of the stage and walks to its hiding place in full view */
#s-peek .pk-walker{position:absolute;z-index:20;pointer-events:none;filter:drop-shadow(0 1vmin 1.6vmin rgba(0,0,0,.3))}
#s-peek .pk-walker img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;animation:pk-walk .28s infinite alternate ease-in-out;transform-origin:50% 100%}
#s-peek .pk-walker{transform-origin:50% 100%}
#s-peek .pk-walker.wait img{animation:pk-wait 1.1s infinite alternate ease-in-out}
#s-peek .pk-walker.hopper img{animation:pk-hop .24s infinite alternate ease-out}
@keyframes pk-wait{from{rotate:-2deg;translate:0 0}to{rotate:2deg;translate:0 -.8vmin}}
@keyframes pk-hop{from{translate:0 0}to{translate:0 -4vmin}}
@keyframes pk-walk{from{translate:0 0;rotate:-3deg}to{translate:0 -1.6vmin;rotate:3deg}}
/* the top: the portrait of the one we are looking for and the row of the found ones */
#s-peek .pk-top{position:absolute;top:calc(env(safe-area-inset-top) + 2vmin);left:50%;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:2vmin;pointer-events:none}
@media (orientation:portrait){#s-peek .pk-top{flex-direction:column;gap:1.2vmin;top:calc(env(safe-area-inset-top) + 2.5vmin)}}
#s-peek .pk-ask{--as:min(18vmin,110px);display:none;position:relative;width:var(--as);height:var(--as);border-radius:50%;background:#fff;border:max(3px,.7vmin) solid #ffd23f;box-shadow:0 .6vmin 0 #e0a800,0 1vmin 2vmin rgba(0,0,0,.25);align-items:center;justify-content:center;pointer-events:auto;touch-action:none;animation:pk-bounce 1.5s .6s ease-in-out infinite}
#s-peek .pk-ask.show{display:flex}
#s-peek .pk-ask.pop{animation:pop-in .5s,pk-bounce 1.5s .6s ease-in-out infinite}
#s-peek .pk-ask img{width:92%;height:92%;border-radius:50%;object-fit:cover;object-position:50% 0;pointer-events:none}
#s-peek .pk-ask .pk-note{display:none;font-size:calc(var(--as) * .62);font-weight:900;color:#3fa3ff;line-height:1}
#s-peek .pk-ask.snd img{display:none}
#s-peek .pk-ask.snd .pk-note{display:block;animation:pk-notes .6s infinite alternate}
@keyframes pk-notes{from{rotate:-10deg;scale:.95}to{rotate:10deg;scale:1.08}}
#s-peek .pk-ask b{position:absolute;right:-10%;top:-12%;width:42%;height:42%;border-radius:50%;background:#ff5b6e;color:#fff;font-weight:900;font-size:calc(var(--as) * .3);display:flex;align-items:center;justify-content:center;border:max(2px,.5vmin) solid #fff;box-shadow:0 .4vmin 1vmin rgba(0,0,0,.25)}
@keyframes pk-bounce{0%,100%{translate:0 0}50%{translate:0 -1.2vmin}}
.peek-row{--k:3;--sz:min(11vmin,72px,calc((100vw - 64vmin) / var(--k) - 1.4vmin));display:flex;gap:1.4vmin;pointer-events:none}
@media (orientation:portrait){.peek-row{--sz:min(9vmin,calc((100vw - 26vmin) / var(--k) - 1.4vmin))}}
.pr-slot{width:var(--sz);height:var(--sz);border-radius:50%;background:rgba(255,255,255,.75);border:max(2px,.5vmin) dashed #4fd1c5;box-shadow:0 .5vmin 1.2vmin rgba(0,0,0,.18);overflow:hidden;display:flex;align-items:center;justify-content:center;pointer-events:auto;position:relative}
.pr-slot::after{content:'?';font-weight:900;font-size:calc(var(--sz) * .55);color:rgba(90,59,31,.45)}
.pr-slot img{display:none;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.pr-slot.full{background:radial-gradient(circle at 50% 35%,#fff7e0,#4fd1c5);border-style:solid;border-color:#fff}
.pr-slot.full::after{display:none}
.pr-slot.full img{display:block}
.pr-slot.pet img{object-fit:contain;padding:8%;box-sizing:border-box}
.peek-fly{position:fixed;z-index:46;object-fit:contain;pointer-events:none;transform-origin:0 0}
.peek-flutter{position:fixed;z-index:46;width:8vmin;pointer-events:none}
/* baskets (C): a row in the lower half of the stage, each ≥ 20vmin; .up — lifted for somebody to get under, .peek — a look: empty, .open — up, the found one is out */
#s-peek .pk-cup{position:absolute;width:var(--cw);height:var(--cw);z-index:5;touch-action:none;animation:pop-in .5s backwards}
#s-peek .pk-cup::before{content:'';position:absolute;left:8%;right:8%;bottom:-3%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,25,0,.3),rgba(40,25,0,0));z-index:0}
#s-peek .pk-cup .cup-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;z-index:2;transition:transform .35s cubic-bezier(.3,1.4,.5,1);transform-origin:50% 100%;filter:drop-shadow(0 .6vmin 1vmin rgba(0,0,0,.2))}
#s-peek .pk-cup .who{position:absolute;left:50%;bottom:7%;height:72%;width:auto;max-width:96%;transform:translateX(-50%);z-index:1;opacity:0;transform-origin:50% 100%}
#s-peek .pk-cup .who.in,#s-peek .pk-cup.found .who{opacity:1}
#s-peek .pk-cup.open,#s-peek .pk-cup.found{z-index:8}
#s-peek .pk-cup.up .cup-img{transform:translateY(-58%)}
#s-peek .pk-cup.peek .cup-img{transform:translateY(-34%) rotate(5deg)}
#s-peek .pk-cup.hint .cup-img{transform:translateY(-46%) rotate(-4deg)}
#s-peek .pk-cup.open .cup-img{transform:translateX(var(--fx,66%))}
#s-peek .pk-cup.found .who{z-index:3}
#s-peek .pk-cup.wiggle .cup-img{animation:shake .45s}
#s-peek .pk-cup.rustle .cup-img{animation:rustle .9s}
#s-peek .pk-cup.gone .cup-img{opacity:.92}
/* who hid? (B): everybody stands in a row, the big thing at the end; a curtain comes down for the count; the choice of portraits below */
#s-peek .peek-area.pk-stage .spot.pk-stand .who{bottom:3%;max-height:94%;max-width:100%;z-index:3;transform:none;translate:-50% 0;opacity:1;transition:none;animation:pk-sway 1.8s var(--wd,0s) ease-in-out infinite alternate}
#s-peek .pk-stage .spot.pk-stand .who.pet{max-height:76%}
#s-peek .pk-stage .spot.pk-empty .who{visibility:hidden}
#s-peek .pk-stage .spot.pk-here .who{animation:pk-here .35s 4 alternate ease-in-out}
@keyframes pk-sway{from{rotate:-2.5deg;translate:-50% 0}to{rotate:2.5deg;translate:-50% -.8vmin}}
@keyframes pk-here{from{rotate:-8deg;translate:-50% 0;scale:1}to{rotate:8deg;translate:-50% -3vmin;scale:1.06}}
#s-peek .pk-stage .spot.pk-big .obj{max-height:84%;max-width:96%}
#s-peek .pk-curtain{--c:#f7a9c4;position:absolute;left:-2%;right:-2%;top:-3%;bottom:-2%;z-index:9;visibility:hidden;transform:translateY(-125%);transition:transform .6s ease-in,visibility 0s .6s;border-radius:0 0 7vmin 7vmin;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.35) 0 2.2vmin,transparent 2.4vmin),radial-gradient(circle at 70% 60%,rgba(255,255,255,.3) 0 1.6vmin,transparent 1.8vmin),radial-gradient(circle at 45% 85%,rgba(255,255,255,.3) 0 1.9vmin,transparent 2.1vmin),repeating-linear-gradient(90deg,var(--c) 0 8vmin,color-mix(in srgb,var(--c) 82%,#000) 8vmin 9vmin);box-shadow:0 1vmin 2vmin rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vmin;pointer-events:none}
#s-peek .pk-curtain.down{visibility:visible;transform:none;transition:transform .7s cubic-bezier(.3,1.3,.5,1),visibility 0s}
#s-peek .pk-curtain .pc-eyes{width:26vmin}
#s-peek .pk-curtain .pc-num{min-height:18vmin;font-size:18vmin}
#s-peek{--os:min(24vmin,calc((100vw - 8vmin) / 4 - 3vmin),140px)}
#s-peek .pk-opts{position:absolute;left:0;right:0;bottom:calc(2vh + env(safe-area-inset-bottom));z-index:12;display:none;justify-content:center;align-items:center;gap:3vmin}
#s-peek .pk-opts[data-k="3"]{--os:min(26vmin,calc((100vw - 8vmin) / 3 - 3vmin),150px)}
#s-peek .pk-opts.show{display:flex}
#s-peek .pk-opt{width:var(--os);height:var(--os);border-radius:50%;background:#fff;border:max(3px,.8vmin) solid #fff;box-shadow:0 .8vmin 0 #4fd1c5,0 1.2vmin 2vmin rgba(0,0,0,.25);overflow:hidden;animation:pop-in .45s backwards;touch-action:none;transition:opacity .4s,transform .3s}
#s-peek .pk-opt img{width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none}
#s-peek .pk-opt.pet img{object-fit:contain;padding:8%;box-sizing:border-box}
#s-peek .pk-opt.pk-ok{transform:scale(1.15);border-color:#ffd23f;box-shadow:0 .8vmin 0 #e0a800,0 0 3vmin #ffd23f}
#s-peek .pk-opt.pk-dim{opacity:.35}
#s-peek .pk-opt.pk-pulse{animation:pk-pulse .4s 3 alternate}
#s-peek .pk-opt.pk-glow{animation:pk-pulse .6s infinite alternate;border-color:#ffd23f;box-shadow:0 .8vmin 0 #e0a800,0 0 3vmin #ffd23f}
@keyframes pk-pulse{from{scale:1}to{scale:1.14}}
/* counting to three with closed eyes (the child hides) */
.peek-count{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vmin;background:rgba(40,30,90,.82);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;pointer-events:none}
.peek-count.light{background:rgba(40,30,90,.45)}
.peek-count.show{opacity:1;visibility:visible}
.pc-eyes{width:30vmin;background:#ffe2c4;border-radius:12vmin;padding:2vmin 3vmin;box-shadow:0 1vmin 2vmin rgba(0,0,0,.25)}
.pc-who:empty{display:none}
.pc-who img{height:30vmin;filter:drop-shadow(0 1vmin 1.6vmin rgba(0,0,0,.3));animation:bob 1.2s ease-in-out infinite}
.pc-num{font-size:24vmin;line-height:1;font-weight:900;color:#ffd23f;-webkit-text-stroke:max(2px,.6vmin) #fff;text-shadow:0 1.2vmin 0 rgba(0,0,0,.25);min-height:24vmin}
.pc-num.pop{animation:pop-in .5s}
/* night: a torch light in the dark */
.peek-dark{--x:50%;--y:60%;--r:17vmin;position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 1s,visibility 1s;background:radial-gradient(circle at var(--x) var(--y),rgba(255,244,190,.14) 0,rgba(255,244,190,.08) var(--r),rgba(6,8,34,.9) calc(var(--r) * 1.6))}
.peek-dark.show{opacity:1;visibility:visible}
#s-peek.torch{cursor:crosshair}
/* everybody comes out and dances */
/* v6: the final is one scene — the party is in <body> over the reward screen (z 905 > 900), sizes and the line over the buttons are set in JS;
   while it is on (body.pk-final) the reward shows only its buttons: no second picture of the child, no veil */
.peek-party{position:fixed;inset:0;z-index:905;display:none;align-items:flex-end;justify-content:center;gap:0;pointer-events:none}
.peek-party.show{display:flex}
.peek-party .pp{flex:none;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%;animation:pp-in .6s backwards cubic-bezier(.3,1.5,.5,1),pp-dance .45s infinite alternate ease-in-out;filter:drop-shadow(0 1vmin 1.4vmin rgba(0,0,0,.25))}
.peek-party .pp{position:relative;z-index:1}
.peek-party .pp.back{z-index:0}
.peek-party .pp.kid{z-index:2}
body.pk-final .reward-child{display:none}
body.pk-final .reward{background:rgba(255,248,235,.12);-webkit-backdrop-filter:none;backdrop-filter:none}
@keyframes pp-in{from{translate:0 60vh}}
@keyframes pp-dance{from{rotate:-7deg;translate:0 0}to{rotate:7deg;translate:0 -3vmin}}
/* the other way round: the child hides, the family looks for the child */
.peek-me{position:absolute;left:50%;bottom:calc(1vh + env(safe-area-inset-bottom));height:40vh;transform:translateX(-50%);z-index:6;pointer-events:auto}
@media (orientation:portrait){.peek-me{height:30vh}}
.peek-me img{height:100%;filter:drop-shadow(0 1vmin 1.6vmin rgba(0,0,0,.3));animation:bob 1.4s ease-in-out infinite}
.peek-seeker{position:absolute;left:50%;top:60%;height:30vh;transform:translateX(-50%);z-index:6;transition:left 1s ease-in-out,top 1s ease-in-out,height 1s;pointer-events:none}
.peek-seeker img{height:100%;filter:drop-shadow(0 1vmin 1.6vmin rgba(0,0,0,.3))}
.peek-seeker.walk img{animation:sk-walk .25s 4 alternate ease-in-out}
.peek-seeker.look img{animation:sk-look .8s ease-in-out}
.peek-seeker.hug img{animation:r-squish .6s 3}
@keyframes sk-walk{from{translate:0 0;rotate:-4deg}to{translate:0 -2.4vmin;rotate:4deg}}
@keyframes sk-look{0%,100%{rotate:0deg}30%{rotate:-12deg}70%{rotate:12deg}}
.peek-fx .petal.leaf{background:#8cc84b;border-radius:0 100% 0 100%}
/* the child hides (D): room for the child's figure under the stage */
@media (orientation:portrait){#s-peek[data-kind="D"] .peek-area{bottom:31vh}.peek-me{height:29vh}}
@media (orientation:landscape){#s-peek[data-kind="D"] .peek-area{bottom:33vh}.peek-me{height:31vh}}
/* a basket: the found one grows out of it */
#s-peek .pk-cup .who{transition:height .5s cubic-bezier(.3,1.4,.5,1),bottom .5s}
#s-peek .pk-cup.found .who{height:150%;bottom:4%}
@media (prefers-reduced-motion:reduce){#s-peek .spot .obj{animation:none}}
/* v6: whole figures (.f3 — img/fam3d square, the body fills its height; animals are whole anyway). Behind a thing only the twin is drawn,
   cut at the top edge of the thing (--cut); --fh is the height of the figure. hidden — its top is under the edge; .run — stands on the ground
   (what is above the edge is seen); .peep — the head over the edge; .pk-out — head and shoulders; found — out, whole, in front of the thing */
#s-peek .spot .who.f3{bottom:4%;height:var(--fh,80%);width:var(--fh,80%);max-height:none;max-width:none;object-fit:contain;object-position:50% 100%;transform:translate(-50%,calc(var(--fh,0px) * 1.06 - var(--cut,0px)))}
#s-peek .spot .who.f3:not(.twin):not(.stand){visibility:hidden}
/* the final: the found ones have run into the party (body) — the stage has no doubles of them */
#s-peek.pk-over .who,#s-peek.pk-over .pk-walker,#s-peek.pk-over .peek-seeker,#s-peek.pk-over .peek-me{visibility:hidden}
#s-peek .spot .who.f3.run{transform:translate(-50%,0)}
#s-peek .spot .who.f3.peep,#s-peek .spot .who.f3.peep.side{transform:translate(-50%,calc(var(--fh,0px) * .8 - var(--cut,0px)))}
#s-peek .spot .who.f3.pk-out{transform:translate(-50%,calc(var(--fh,0px) * .56 - var(--cut,0px)))}
#s-peek .spot.found .who.f3{transform:translate(-50%,0)}
/* the little animal of the start: peeks over the edge of a thing (the same cut), then runs away as a walker */
#s-peek .spot .pk-crit{position:absolute;inset:0;z-index:3;pointer-events:none;clip-path:inset(-100vh -100vw var(--cut,0px) -100vw)}
#s-peek .spot .pk-crit img{position:absolute;left:50%;bottom:var(--cut,0px);transform:translate(-50%,105%);transition:transform .32s cubic-bezier(.3,1.5,.5,1)}
#s-peek .spot .pk-crit img.up{transform:translate(-50%,10%)}
/* who hid? (B): whole figures stand on the ground; a half figure stands behind a small bush of the place */
#s-peek .peek-area.pk-stage .spot.pk-stand .who.f3{bottom:0;height:calc(100% * var(--depth,1));width:auto;max-height:none;max-width:none}
#s-peek .peek-area.pk-stage .spot.pk-stand .who.f3.pet{height:62%}
#s-peek .pk-stage .spot.pk-stand .pk-prop{position:absolute;left:50%;bottom:0;translate:-50% 0;width:84%;height:44%;object-fit:contain;object-position:50% 100%;z-index:4;pointer-events:none}
/* baskets (C): a whole figure under its basket, out whole when found */
#s-peek .pk-cup .who.f3{height:84%;bottom:3%}
#s-peek .pk-cup.found .who.f3{height:170%;bottom:2%}
/* the child hides (D): the child and the seeker are whole */
.peek-me.f3 img,.peek-seeker.f3 img{object-fit:contain;object-position:50% 100%}
/* v7 (12.10, растущая сложность): второй пузырь «Найди двоих!», вопрос только голосом (большой «?»), картинка места в пузыре (P),
   подсветка места (P, нижние ступени), раунд P — выбор портретов внизу, как в B; 2 и 5 портретов */
#s-peek .pk-ask .pk-qm{display:none;font-style:normal;font-weight:900;font-size:calc(var(--as) * .66);color:#ff8a3d;line-height:1;animation:pk-notes .8s infinite alternate}
#s-peek .pk-ask.blind img,#s-peek .pk-ask.blind .pk-note{display:none}
#s-peek .pk-ask.blind .pk-qm{display:block}
#s-peek .pk-ask.blind b{display:none}
#s-peek .pk-ask.place img{object-fit:contain;border-radius:0;width:80%;height:80%}
#s-peek .pk-ask2{--as:min(14vmin,86px)}
#s-peek .spot.pk-lit .obj{filter:drop-shadow(0 0 1.2vmin #fff6a0) drop-shadow(0 0 2.4vmin #ffd23f)}
#s-peek[data-kind="P"] .peek-area{bottom:calc(var(--os) + 5vh + env(safe-area-inset-bottom))}
#s-peek .pk-opts[data-k="2"]{--os:min(28vmin,150px)}
#s-peek .pk-opts[data-k="5"]{--os:min(22vmin,calc((100vw - 6vmin) / 5 - 2.4vmin),130px);gap:2.4vmin}
@media (orientation:portrait){#s-peek .pk-ask2{position:absolute;top:calc(min(18vmin,110px) - var(--as));left:calc(50% + min(18vmin,110px) / 2 + 3vmin)}}

/* ---------- polish 14.10: feel — landing, pulses, flash, curtain veil, rainbow, words, +1, rings, living background (plan: agents/polish/peek_plan.md) ---------- */
/* things and baskets drop in, squash on landing and spring up (scale/translate/opacity only) */
#s-peek .spot,#s-peek .pk-cup{animation-name:pk-land;animation-duration:.62s;animation-timing-function:cubic-bezier(.3,1.2,.5,1)}
@keyframes pk-land{0%{translate:0 -12vmin;scale:.8 1.2;opacity:0}45%{translate:0 0;scale:1 1;opacity:1}62%{scale:1.1 .88}82%{scale:.97 1.04}100%{translate:0 0;scale:1 1;opacity:1}}
/* a freeze frame: ≤ 90 ms, the scene's CSS animations stand still (taps still work) */
#s-peek.pk-hold *{animation-play-state:paused!important}
#s-peek .pk-fxl{position:absolute;inset:0;pointer-events:none}
#s-peek .pk-flash,#s-peek .pk-bgp,#s-peek .pk-veil{position:absolute;inset:0;opacity:0}
#s-peek .pk-flash{z-index:50}
#s-peek .pk-veil{z-index:48;background:linear-gradient(#fffaf0,#fff)}
#s-peek .pk-bgp{z-index:2;background:radial-gradient(circle at 50% 55%,transparent 20%,var(--pc,#fff) 120%)}
/* rainbow under the final: a wide soft band drifts slowly (translate + opacity only) */
#s-peek .pk-rainbow{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .7s ease-out;z-index:1;pointer-events:none}
#s-peek .pk-rainbow i{position:absolute;left:-100%;top:0;width:300%;height:100%;background:linear-gradient(100deg,#ff5b6e,#ff9f1c,#ffd23f,#5fd068,#3fa3ff,#b26cff,#ff5b6e,#ff9f1c,#ffd23f,#5fd068,#3fa3ff);animation:pk-rb 5s ease-in-out infinite alternate paused}
#s-peek.pk-rb .pk-rainbow{opacity:.32}
#s-peek.pk-rb .pk-rainbow i{animation-play-state:running}
@keyframes pk-rb{to{translate:33% 0}}
/* living background: the picture breathes (a slow parallax), twinkles in the air, clouds where there is sky */
#s-peek .bg{animation:pk-drift 38s ease-in-out infinite alternate}
@keyframes pk-drift{from{scale:1.03;translate:-.8% 0}to{scale:1.07;translate:.8% -.7%}}
#s-peek .pk-glints{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#s-peek .pk-glints i{position:absolute;width:3vmin;height:3vmin;opacity:0;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:pk-glint 3.2s ease-in-out infinite}
@keyframes pk-glint{0%,100%{opacity:0;scale:.3}50%{opacity:.8;scale:1}}
#s-peek .peek-fx .cloud{opacity:.8}
/* the one we look for: a soft ring breathes round the portrait */
#s-peek .pk-ask::after{content:'';position:absolute;inset:-6%;border-radius:50%;border:max(2px,.6vmin) solid #ffd23f;opacity:0;pointer-events:none;animation:pk-ring 2s 1s ease-out infinite}
@keyframes pk-ring{0%{scale:.92;opacity:.8}100%{scale:1.38;opacity:0}}
/* words of the chain, +1, rings (picture, no voice) */
#s-peek .pk-say{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 31vmin);z-index:46;translate:-50% 0;white-space:nowrap;font:900 9vmin/1 'Arial Rounded MT Bold',sans-serif;color:#fff;-webkit-text-stroke:1vmin #f0528c;paint-order:stroke fill;text-shadow:0 1vmin 0 #b8306a,0 0 1.2vmin rgba(90,10,45,.45),0 1.6vmin 2.4vmin rgba(0,0,0,.3);pointer-events:none}
@media (orientation:landscape){#s-peek .pk-say{top:calc(env(safe-area-inset-top) + 20vmin);font-size:8vmin}}
#s-peek .pk-say.rec{-webkit-text-stroke-color:#ffb300;color:#fff8d0;font-size:7.4vmin;text-shadow:0 1vmin 0 #c98a00,0 0 3vmin #ffe680}
#s-peek .pk-plus{position:fixed;z-index:44;font:900 7vmin/1 sans-serif;-webkit-text-stroke:.7vmin #fff;paint-order:stroke fill;pointer-events:none}
#s-peek .pk-ringfx{position:fixed;z-index:44;width:18vmin;height:18vmin;margin:-9vmin 0 0 -9vmin;border:1vmin solid #fff;border-radius:50%;pointer-events:none}
/* buttons and cards spring: a press squeezes them (JS press()), the portraits of the answer overshoot when they appear */
#s-peek .pk-opt{animation-name:pk-card;animation-duration:.5s;animation-timing-function:cubic-bezier(.3,1.5,.5,1)}
@keyframes pk-card{from{scale:0;translate:0 6vmin}60%{scale:1.12}}
@media (prefers-reduced-motion:reduce){#s-peek .bg,#s-peek .pk-glints i,#s-peek .pk-ask::after{animation:none}#s-peek .pk-glints{display:none}#s-peek .spot,#s-peek .pk-cup{animation-name:none}}