/* игра «Кафе» (cafe): стили этой игры. Все правила — через #s-cafe и с префиксом cf-; места и размеры в px считает layout() в cafe.js. */
#s-cafe .bg{object-position:50% 100%}
#s-cafe .cf-deco{position:absolute;inset:0;z-index:1;pointer-events:none}
#s-cafe .cf-dc{position:absolute;translate:-50% 0;pointer-events:none;animation:pop-in .6s backwards}
#s-cafe .cf-dc img{width:100%;height:auto;display:block;filter:drop-shadow(0 .6vmin .8vmin rgba(80,40,10,.25))}
#s-cafe .cf-dc-lamp{animation:pop-in .6s backwards,cf-swing 4s ease-in-out infinite;transform-origin:50% 0}
@keyframes cf-swing{0%,100%{rotate:-2deg}50%{rotate:2deg}}
#s-cafe .cf-dc-sign span{position:absolute;left:50%;top:68%;translate:-50% -50%;width:70%;text-align:center;font-weight:900;font-size:min(4.2vmin,2.2em);color:#7a4a22;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
#s-cafe .cf-dc-sign{z-index:2}
#s-cafe .cf-dc-lamp:before{content:"";position:absolute;left:50%;bottom:98%;width:.5vmin;height:60vmin;translate:-50% 0;background:#6b4a2b}
#s-cafe .cf-dc-lamp img{filter:drop-shadow(0 0 2.4vmin rgba(255,220,100,.9))}
/* top buttons: bell, coin jar, chef hat (free play), shop */
#s-cafe .cf-ui{position:absolute;inset:0;z-index:7;pointer-events:none}
#s-cafe .cf-top{position:absolute;pointer-events:auto;touch-action:none;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 .7vmin 0 #e3b26a,0 .9vmin 1.8vmin rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;animation:pop-in .5s backwards;cursor:pointer}
#s-cafe .cf-top img{width:72%;height:72%;object-fit:contain}
#s-cafe .cf-top.cf-bell.ring img{animation:cf-ring .9s ease-in-out;transform-origin:50% 10%}
@keyframes cf-ring{0%,100%{rotate:0deg}15%{rotate:-22deg}35%{rotate:18deg}55%{rotate:-12deg}75%{rotate:8deg}}
#s-cafe .cf-top.rattle{animation:cf-rattle .6s ease-in-out}
@keyframes cf-rattle{0%,100%{rotate:0deg;translate:0 0}20%{rotate:-8deg;translate:0 -8%}40%{rotate:8deg}60%{rotate:-6deg;translate:0 -4%}80%{rotate:4deg}}
#s-cafe .cf-jar b{position:absolute;right:-10%;bottom:-8%;min-width:52%;height:52%;padding:0 .8vmin;border-radius:3vmin;background:#ffd23f;border:.5vmin solid #fff;box-shadow:0 .4vmin .8vmin rgba(0,0,0,.25);font-weight:900;font-size:min(4vmin,1.4em);color:#5a3b1f;display:flex;align-items:center;justify-content:center;font-style:normal}
#s-cafe .cf-chef.on{box-shadow:0 .7vmin 0 #e3b26a,0 0 0 1vmin #ffd23f,0 1vmin 2vmin rgba(0,0,0,.25)}
/* the queue by the door: faces of the next guests */
#s-cafe .cf-queue{position:absolute;inset:0;z-index:4;pointer-events:none}
#s-cafe .cf-qa{position:absolute;border-radius:50%;overflow:hidden;border:.6vmin solid #fff;box-shadow:0 .5vmin 1vmin rgba(0,0,0,.25);background:#fff;animation:pop-in .5s backwards,floaty 2.6s ease-in-out infinite}
#s-cafe .cf-qa img{width:100%;height:118%;object-fit:cover;object-position:50% 0}
/* the guest: the figure of the family (classes of the core helper) behind the table; in and out through the door at the left */
#s-cafe .cf-guest{z-index:5;transition:translate .8s cubic-bezier(.3,1,.5,1),opacity .6s}
#s-cafe .cf-guest.cf-in{animation:cf-walkin .9s cubic-bezier(.3,1,.5,1)}
@keyframes cf-walkin{from{translate:-45vw 0;opacity:0}50%{opacity:1}to{translate:none}}
#s-cafe .cf-guest.cf-out{translate:-60vw 0!important;opacity:0;pointer-events:none}
#s-cafe .cf-guest.cf-out .hp-hit{pointer-events:none}
#s-cafe .cf-guest .hp-body img.cf-sitp{transform-origin:50% 100%}
/* behind the table: below the table top nothing of the guest shows (the legs and the chair are hidden by the table) */
#s-cafe .cf-guest:not(.cf-in):not(.cf-out) .hp-pic{clip-path:inset(-50% -50% var(--clipb,0%) -50%)}
#s-cafe .cf-guest.cf-young .hp-sway{animation:cf-fidget 1.6s ease-in-out infinite}
@keyframes cf-fidget{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg) translateY(-.6%)}}
#s-cafe .cf-guest.cf-animal .hp-pic{border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;animation:none!important;width:100%;height:100%;position:relative;transform-origin:50% 96%}
#s-cafe .cf-guest.cf-animal .hp-body img{position:absolute;inset:0;width:100%;height:100%;opacity:1;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 1vmin 1vmin rgba(90,45,10,.25))}
#s-cafe .cf-guest.cf-animal .hp-hit{pointer-events:auto}
/* 12.10: an animal walks in on the floor and hops up onto its chair */
#s-cafe .cf-guest.cf-animal.cf-in{animation:cf-hopin .9s ease-out}
@keyframes cf-hopin{from{translate:-45vw var(--cfup,0px);opacity:0}35%{opacity:1}55%{translate:0 var(--cfup,0px)}75%{translate:0 calc(var(--cfup,0px) * -.25)}to{translate:none}}
/* the order cloud: placed from cafe.js beside the head (never over the face), pictures wrap in rows */
#s-cafe .cf-guest .hp-bub{flex-wrap:wrap;justify-content:center;flex-direction:row;padding:1.4vmin}
#s-cafe .cf-guest .hp-it{width:11vmin;height:11vmin}
#s-cafe .cf-guest.mini .hp-bub{padding:.8vmin;gap:0;width:auto!important}
#s-cafe .cf-guest.mini .hp-it{display:none}
#s-cafe .cf-guest.mini .hp-it:first-child{display:flex;width:7vmin;height:7vmin;filter:grayscale(.3);opacity:.85}
/* the table: a round table with a gingham cloth down to the floor (it stands on the floor of the picture and hides the guest's legs) */
#s-cafe .cf-table{position:absolute;z-index:6;pointer-events:none}
#s-cafe .cf-table>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 .5vmin .6vmin rgba(80,40,10,.28))}
#s-cafe .cf-table:before{content:"";position:absolute;left:4%;right:4%;bottom:-2.5%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(70,35,10,.38),rgba(70,35,10,0));z-index:-1}
#s-cafe .cf-prop{position:absolute;inset:0}
#s-cafe .cf-served{display:none}
#s-cafe .cf-tobj{animation:pop-in .45s backwards}
#s-cafe .cf-tobj.cf-paper{rotate:-8deg}
#s-cafe .cf-steam{position:absolute;left:28%;top:-55%;width:22%;height:80%;border-radius:50%;background:radial-gradient(rgba(255,255,255,.8),rgba(255,255,255,0) 70%);animation:cf-steam 2.2s ease-out infinite;pointer-events:none;z-index:3}
#s-cafe .cf-steam.s2{left:44%;animation-delay:-1.1s}
@keyframes cf-steam{0%{opacity:0;translate:0 10%;scale:.6}30%{opacity:.9}100%{opacity:0;translate:20% -90%;scale:1.3}}
/* station tabs */
#s-cafe .cf-tabs{position:absolute;inset:0;z-index:7;pointer-events:none}
#s-cafe .cf-tab{position:absolute;pointer-events:auto;touch-action:none;border-radius:30%;background:rgba(255,255,255,.8);box-shadow:0 .6vmin 0 #e3b26a,0 .8vmin 1.6vmin rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;animation:pop-in .45s backwards;opacity:.75;transition:scale .2s,opacity .2s;cursor:pointer}
#s-cafe .cf-tab img{width:74%;height:74%;object-fit:contain}
#s-cafe .cf-tab.on{opacity:1;scale:1.12;box-shadow:0 .6vmin 0 #e3b26a,0 0 0 .8vmin #ffd23f,0 .8vmin 1.8vmin rgba(0,0,0,.25)}
#s-cafe .cf-tab.glow{opacity:1;animation:pop-in .45s backwards,cf-glow 1s ease-in-out infinite alternate}
#s-cafe .cf-tab.no{animation:shake .5s}
#s-cafe .cf-tabs.off{display:none}
#s-cafe .cf-tabs.pick .cf-tab{opacity:1;border-radius:26%;background:#fff;box-shadow:0 1vmin 0 #e3b26a,0 1.4vmin 2.4vmin rgba(0,0,0,.25);animation:pop-in .5s backwards,cf-pickbob 1.8s ease-in-out .5s infinite}
#s-cafe .cf-tabs.pick .cf-tab:nth-child(2n){animation-delay:0s,.9s}
#s-cafe .cf-tabs.pick .cf-tab img{width:82%;height:82%}
#s-cafe .cf-tabs.pick .cf-tab.glow{animation:cf-glow .9s ease-in-out infinite alternate;scale:1.1;box-shadow:0 1vmin 0 #e3b26a,0 0 0 1vmin #ffd23f,0 0 3vmin 1.4vmin rgba(255,210,60,.9)}
@keyframes cf-pickbob{0%,100%{translate:0 0}50%{translate:0 -1.2vmin}}
/* the work area on the counter: things stand on it (.cf-obj: bottom-centre at left/top, the picture keeps its proportions), parts inside them */
#s-cafe .cf-work{position:absolute;z-index:7}
#s-cafe .cf-station,#s-cafe .cf-dish{position:absolute;inset:0}
#s-cafe .cf-obj{position:absolute;translate:-50% -100%;pointer-events:none}
#s-cafe .cf-obj>img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 .4vmin .5vmin rgba(80,40,10,.25))}
#s-cafe .cf-obj:after{content:"";position:absolute;left:6%;right:6%;bottom:-3%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(80,40,10,.4),rgba(80,40,10,0));z-index:0}
#s-cafe .cf-part{position:absolute;translate:-50% -50%;pointer-events:none;z-index:2}
#s-cafe .cf-part>img{display:block;width:100%;height:auto}
#s-cafe .cf-part.cf-under{z-index:0}
#s-cafe .cf-obj.held,#s-cafe .cf-part.held{opacity:0}
#s-cafe .cf-tool,#s-cafe .cf-stove,#s-cafe .cf-knob,#s-cafe .cf-blbtn,#s-cafe .cf-dn,#s-cafe .cf-bowl,#s-cafe .cf-lid,#s-cafe .cf-jar{pointer-events:auto;touch-action:none;cursor:grab}
#s-cafe .cf-obj.glow>img,#s-cafe .cf-part.glow>img{filter:drop-shadow(0 0 1.6vmin rgba(255,215,60,1)) drop-shadow(0 0 .6vmin rgba(255,200,40,.9));animation:cf-gl 1s ease-in-out infinite alternate}
@keyframes cf-gl{to{scale:1.05}}
#s-cafe .cf-obj.hot>img{filter:drop-shadow(0 0 1.4vmin rgba(120,220,255,1))}
/* pancakes: the stove (the fire under the pan when the knob is turned), the pan, the batter that spreads, bubbles, golden edges */
/* the gas flame (05.10): an even ring of blue tongues round the burner, between the stove and the pan; a soft glow under the pan */
#s-cafe .cf-fire{z-index:2;opacity:0;transition:opacity .35s}
#s-cafe .cf-fire.on{opacity:1}
#s-cafe .cf-fire i{position:absolute;width:9%;height:58%;translate:-50% -100%;border-radius:50% 50% 45% 45%/70% 70% 30% 30%;background:radial-gradient(ellipse 50% 60% at 50% 78%,#f2fbff 0 22%,#5cc2ff 46%,#2b7dff 72%,rgba(43,125,255,0) 100%);transform-origin:50% 100%;animation:cf-gas .42s ease-in-out infinite alternate;filter:drop-shadow(0 0 .5vmin rgba(80,170,255,.8))}
#s-cafe .cf-fire b{position:absolute;left:-6%;right:-6%;top:5%;bottom:-25%;border-radius:50%;background:radial-gradient(closest-side,rgba(110,190,255,.55),rgba(110,190,255,0))}
#s-cafe .cf-fire.burst i{animation:cf-flburst .5s}
@keyframes cf-gas{from{transform:scaleY(.92)}to{transform:scaleY(1.1)}}
@keyframes cf-flburst{40%{transform:scale(1.25,1.7)}}
#s-cafe .cf-pan{z-index:3}
#s-cafe .cf-pan.bump{animation:cf-bump .4s}
@keyframes cf-bump{40%{translate:-50% -44%}}
#s-cafe .cf-knob{z-index:4;cursor:pointer;border-radius:50%}
#s-cafe .cf-knob>img{width:100%;height:100%;transition:rotate .4s cubic-bezier(.3,1.5,.5,1)}
#s-cafe .cf-knob.on>img{rotate:-90deg}
#s-cafe .cf-knob.glow{box-shadow:0 0 0 .8vmin rgba(255,215,60,.9),0 0 3vmin rgba(255,200,40,.9);animation:cf-knobg 1s ease-in-out infinite alternate}
@keyframes cf-knobg{to{box-shadow:0 0 0 1.2vmin rgba(255,215,60,.5),0 0 4vmin rgba(255,200,40,.9)}}
#s-cafe .cf-panin{z-index:2}
#s-cafe .cf-batter{transform-style:preserve-3d;transition:translate .2s}
#s-cafe .cf-batter img{width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 .2vmin .3vmin rgba(60,30,10,.35))}
#s-cafe .cf-batter.done img{object-fit:fill}
#s-cafe .cf-batter:before{content:"";position:absolute;inset:3%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,0) 64%,rgba(205,130,40,.8) 90%,rgba(0,0,0,0) 100%);opacity:0;transition:opacity 2.6s;pointer-events:none}
#s-cafe .cf-batter:after{content:"";position:absolute;inset:18% 16%;opacity:0;transition:opacity 2.4s;pointer-events:none;background:radial-gradient(circle at 22% 40%,rgba(150,110,50,.85) 0 4.5%,transparent 4.5%),radial-gradient(circle at 48% 30%,rgba(150,110,50,.8) 0 4%,transparent 4%),radial-gradient(circle at 70% 52%,rgba(150,110,50,.85) 0 5%,transparent 5%),radial-gradient(circle at 36% 66%,rgba(150,110,50,.8) 0 4%,transparent 4%),radial-gradient(circle at 60% 74%,rgba(150,110,50,.8) 0 4.5%,transparent 4.5%),radial-gradient(circle at 82% 30%,rgba(150,110,50,.75) 0 3.5%,transparent 3.5%)}
#s-cafe .cf-batter.cook:before{opacity:.55}#s-cafe .cf-batter.cook:after{opacity:1}
#s-cafe .cf-batter.ready:before{opacity:1}
#s-cafe .cf-batter.ready{animation:cf-ready 1.2s ease-in-out infinite}
@keyframes cf-ready{50%{scale:1.04}}
#s-cafe .cf-batter.lift{translate:-50% -58%}
#s-cafe .cf-batter.done:before,#s-cafe .cf-batter.done:after{display:none}
#s-cafe .cf-puff{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(rgba(255,255,255,.8),rgba(255,255,255,0) 70%);animation:cf-puff 2.2s ease-out infinite}
@keyframes cf-puff{0%{opacity:0;translate:0 30%;scale:.5}30%{opacity:.9}100%{opacity:0;translate:10% -120%;scale:1.6}}
#s-cafe .cf-puffbox{z-index:4}
#s-cafe .cf-spat{rotate:12deg;transform-origin:50% 100%}
#s-cafe .cf-stackp>img{filter:drop-shadow(0 .3vmin .3vmin rgba(80,40,10,.35))}
#s-cafe .cf-drz{z-index:3}
#s-cafe .cf-ontop{z-index:4}
/* donuts: the donut on the board, the glaze (the same donut glazed) over it, drips, sprinkles on the ring; a bowl takes the donut in */
#s-cafe .cf-dn .cf-glz{position:absolute;inset:0;width:100%;height:100%;animation:cf-dip .7s ease-out both}
@keyframes cf-dip{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
#s-cafe .cf-gdrip{position:absolute;top:48%;width:6%;height:0;border-radius:0 0 50% 50%;opacity:.95;animation:cf-gdrip 1.1s ease-in .2s both}
@keyframes cf-gdrip{0%{height:0;opacity:0}30%{opacity:1}100%{height:26%;opacity:0}}
#s-cafe .cf-sprs{position:absolute;inset:0;pointer-events:none}
#s-cafe .cf-spr{position:absolute;width:4.2%;height:1.9%;border-radius:1vmin;translate:-50% -50%;box-shadow:0 .1vmin .2vmin rgba(0,0,0,.25);animation:pop-in .25s}
#s-cafe .cf-spr-stars,#s-cafe .cf-spr-gold{width:4.5%;height:4.5%;border-radius:0;clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 96%,50% 74%,20% 96%,30% 60%,0 38%,38% 36%)}
#s-cafe .cf-spr-coconut{width:4.6%;height:1.6%;border-radius:40%}
#s-cafe .cf-bowl.hot>img{filter:drop-shadow(0 0 1.6vmin rgba(255,215,60,1))}
#s-cafe .cf-inbowl{z-index:0}
#s-cafe .cf-dn.cf-roll{animation:cf-roll 1.6s linear infinite;pointer-events:auto;cursor:pointer}
#s-cafe .cf-dn.cf-roll>img{animation:cf-spin .5s linear infinite}
@keyframes cf-roll{0%{translate:-50% -50%}25%{translate:-30% -56%}50%{translate:-50% -50%}75%{translate:-70% -56%}100%{translate:-50% -50%}}
@keyframes cf-spin{to{rotate:360deg}}
#s-cafe .cf-dn.cf-caught{animation:cf-wobble .6s}
@keyframes cf-wobble{20%{rotate:-8deg}40%{rotate:8deg}60%{rotate:-4deg}80%{rotate:4deg}}
/* ice cream: the cone in its stand or the cup; the scoop with a ball; the tower sways */
#s-cafe .cf-holder.wob{animation:cf-tower 1.4s ease-in-out;transform-origin:50% 100%}
@keyframes cf-tower{20%{rotate:var(--wob,4deg)}45%{rotate:calc(var(--wob,4deg) * -.7)}70%{rotate:calc(var(--wob,4deg) * .4)}85%{rotate:calc(var(--wob,4deg) * -.2)}}
#s-cafe .cf-tower{z-index:3}
#s-cafe .cf-tower .cf-part{z-index:auto}
#s-cafe .cf-cone{z-index:2}
#s-cafe .cf-sghost img{display:block;width:100%;height:auto}
#s-cafe .cf-sghost .cf-ball{position:absolute;left:20%;top:16%;width:40%;translate:-50% -50%}
#s-cafe .cf-melt img{animation:cf-meltdrop 1.6s ease-in infinite}
@keyframes cf-meltdrop{0%{translate:0 -20%;opacity:0}30%{opacity:1}100%{translate:0 60%;opacity:0}}
/* the blender (base, jar, lid) and the glass: the liquid is a coloured box behind the glass picture */
#s-cafe .cf-glin,#s-cafe .cf-jarin{overflow:hidden;border-radius:6% 6% 16% 16%/4% 4% 10% 10%}
#s-cafe .cf-liq{position:absolute;left:0;right:0;bottom:0;height:0;background:#fff;transition:height .25s linear,background .6s;opacity:.88;box-shadow:inset 0 0 1.2vmin rgba(150,110,80,.35);border-radius:0 0 22% 22%/0 0 12% 12%}
#s-cafe .cf-liq:before{content:"";position:absolute;left:-5%;right:-5%;top:-1.6vmin;height:3.2vmin;border-radius:50%;background:inherit;filter:brightness(1.07)}
#s-cafe .cf-liq.swirl:after{content:"";position:absolute;inset:10% 20%;border-radius:50%;border:.6vmin dashed rgba(255,255,255,.6);animation:cf-spin .4s linear infinite}
#s-cafe .cf-infruit{z-index:1}
#s-cafe .cf-glin,#s-cafe .cf-jarin{z-index:2}
#s-cafe .cf-jar{z-index:2}#s-cafe .cf-lid{z-index:3}#s-cafe .cf-blbase{z-index:1}
#s-cafe .cf-jar>img,#s-cafe .cf-glassbox>img{opacity:.97}
#s-cafe .cf-blbase.buzz,#s-cafe .cf-jar.buzz,#s-cafe .cf-lid.buzz{animation:cf-buzz .12s linear infinite}
@keyframes cf-buzz{0%,100%{translate:-50% -100%}25%{translate:-48.5% -100.6%}50%{translate:-50% -99.4%}75%{translate:-51.5% -100.6%}}
#s-cafe .cf-blbase.buzz1{animation:cf-buzz .1s linear 3}
#s-cafe .cf-blbtn{z-index:5;cursor:pointer;border-radius:50%}
#s-cafe .cf-blbtn.glow{box-shadow:0 0 0 .8vmin rgba(255,215,60,.9),0 0 3vmin rgba(255,200,40,.9);animation:cf-knobg 1s ease-in-out infinite alternate}
#s-cafe .cf-blbtn.push{animation:cf-push .3s}
@keyframes cf-push{50%{scale:.8}}
#s-cafe .cf-lidg{z-index:3}
#s-cafe .cf-straw{z-index:0}#s-cafe .cf-umb{z-index:4}#s-cafe .cf-foam{z-index:3}
#s-cafe .cf-mugin{z-index:2}
#s-cafe .cf-mugin .cf-liq{height:100%;opacity:0;border-radius:50%;background:#8a5a30}
#s-cafe .cf-mugin .cf-liq:before{display:none}
/* generic appearances */
#s-cafe .cf-pop{animation:pop-in .45s}
#s-cafe .cf-drop{animation:cf-drop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes cf-drop{from{translate:-50% -160%;scale:.6}to{translate:-50% -50%;scale:1}}
#s-cafe .cf-obj.cf-pop{animation:cf-objpop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes cf-objpop{from{scale:.4;opacity:0}}
#s-cafe .cf-fade{animation:cf-fade .6s}
@keyframes cf-fade{from{opacity:0;scale:.8}}
/* a thing in the hand: it follows the finger, turns (pours, shakes); streams of batter, milk, sauce */
#s-cafe .cf-ghost{position:absolute;z-index:30;pointer-events:none;translate:-50% -50%;transition:rotate .22s;filter:drop-shadow(0 1.6vmin 1.6vmin rgba(0,0,0,.3));touch-action:none}
#s-cafe .cf-ghost>img{display:block;width:100%;height:auto}
#s-cafe .cf-ghost.cf-shaking{animation:cf-shk .16s linear infinite}
@keyframes cf-shk{0%,100%{translate:-50% -50%}50%{translate:-50% -58%}}
#s-cafe .cf-flyer{z-index:31}
#s-cafe .cf-onsp{z-index:3}
#s-cafe .cf-beam{position:absolute;z-index:29;pointer-events:none;transform-origin:0 50%;border-radius:1vmin;box-shadow:inset -.3vmin 0 .4vmin rgba(255,255,255,.35),0 .2vmin .4vmin rgba(0,0,0,.15);display:none}
#s-cafe .cf-stream{position:absolute;z-index:29;pointer-events:none;transform-origin:0 50%;border-radius:1vmin;box-shadow:0 .2vmin .4vmin rgba(0,0,0,.2)}
/* the buttons beside the dish: the magic bin and «serve» */
#s-cafe .cf-btn{position:absolute;z-index:8;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 .7vmin 0 #e3b26a,0 .9vmin 1.8vmin rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;touch-action:none;cursor:pointer}
#s-cafe .cf-btn img{width:76%;height:76%;object-fit:contain}
#s-cafe .cf-btn.pop{animation:pop-in .6s}
#s-cafe .cf-serve{display:none;background:linear-gradient(#8cf58a,#35b955);box-shadow:0 .8vmin 0 #1f8038,0 1vmin 2vmin rgba(0,0,0,.25)}
#s-cafe .cf-serve.show{display:flex;animation:pop-in .5s,next-pulse 1.4s .5s ease-in-out infinite}
/* the tray of things */
#s-cafe .cf-tray{position:absolute;inset:0;z-index:7;pointer-events:none}
#s-cafe .cf-it{position:absolute;pointer-events:auto;touch-action:none;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 .8vmin 0 #e3b26a,0 1vmin 2vmin rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;animation:pop-in .45s backwards;cursor:grab}
#s-cafe .cf-it img{width:76%;height:76%;object-fit:contain;pointer-events:none}
#s-cafe .cf-it.held img{opacity:.3}
#s-cafe .cf-it.used{scale:0;opacity:0;pointer-events:none;transition:scale .25s,opacity .25s}
#s-cafe .cf-it.glow{animation:pop-in .45s backwards,cf-glow 1s ease-in-out infinite alternate}
@keyframes cf-glow{to{box-shadow:0 .8vmin 0 #e3b26a,0 0 0 1vmin #ffd23f,0 0 4vmin rgba(255,210,60,.9)}}
.cf-hand{position:fixed;left:0;top:0;width:13vmin;max-width:110px;z-index:1001;pointer-events:none;margin:-.5vmin 0 0 -5.6vmin;filter:drop-shadow(0 .8vmin 1.2vmin rgba(0,0,0,.45)) drop-shadow(0 0 1.2vmin rgba(255,230,90,.9))}
.cf-hand svg{display:block;width:100%;height:auto}
.cf-coin{position:fixed;left:0;top:0;z-index:1001;pointer-events:none;filter:drop-shadow(0 .6vmin .8vmin rgba(0,0,0,.35))}
.cf-coin svg{width:100%;height:auto;display:block}
#s-cafe .cf-nap{position:absolute;z-index:9;pointer-events:none;filter:drop-shadow(0 .4vmin .6vmin rgba(0,0,0,.3))}
/* the served dish on the table (a copy of the plate / board / glass / cone in its stand / mug with what is on it) */
#s-cafe .cf-dishcopy{position:absolute;z-index:6;pointer-events:none}
#s-cafe .cf-dishcopy>img{display:block;width:100%;height:auto;filter:drop-shadow(0 .4vmin .5vmin rgba(80,40,10,.3))}
#s-cafe .cf-dishcopy:after{content:"";position:absolute;left:-6%;right:-6%;bottom:-6%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(70,35,10,.6),rgba(70,35,10,0));z-index:0}
#s-cafe .cf-dishcopy.cf-flat:after{left:-4%;right:-4%;bottom:-2%;height:26%}
#s-cafe .cf-dishcopy>img{position:relative;z-index:1}
#s-cafe .cf-dishcopy.pop{animation:pop-in .5s}
#s-cafe .cf-dishcopy .cf-obj{translate:-50% -100%}
#s-cafe .cf-old .cf-lay{position:absolute;translate:-50% -50%;display:flex;align-items:flex-end;justify-content:center}
#s-cafe .cf-old .cf-lay img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
/* the cat on the counter */
#s-cafe .cf-cat{position:absolute;z-index:4;display:none;pointer-events:auto;touch-action:none;cursor:pointer}
#s-cafe .cf-cat.show{display:block;animation:cf-catin .5s cubic-bezier(.3,1.4,.5,1)}
#s-cafe .cf-cat.off{animation:cf-catout .5s ease-in forwards}
#s-cafe .cf-cat img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 .6vmin .8vmin rgba(80,40,10,.3));animation:floaty 2.4s ease-in-out infinite}
@keyframes cf-catin{from{translate:0 60%;opacity:0}}
@keyframes cf-catout{to{translate:-30% 80%;opacity:0}}
/* the shop / the showcase panel */
#s-cafe .cf-panel{position:absolute;inset:0;z-index:20;display:none;background:rgba(60,30,20,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#s-cafe .cf-panel.show{display:block;animation:cf-fade .3s}
#s-cafe .cf-close{position:absolute;right:calc(2vmin + env(safe-area-inset-right));top:calc(2vmin + env(safe-area-inset-top));width:12vmin;height:12vmin;max-width:80px;max-height:80px;border-radius:50%;background:linear-gradient(#ff8a8a,#e04848);box-shadow:0 .6vmin 0 #a02828,0 1vmin 2vmin rgba(0,0,0,.3);z-index:2;cursor:pointer}
#s-cafe .cf-close svg{width:100%;height:100%}
#s-cafe .cf-pgrid{position:absolute;left:4vmin;right:16vmin;top:16vmin;bottom:3vmin;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:2.4vmin;overflow:auto}
#s-cafe .cf-pc{position:relative;width:min(22vmin,22vw);height:min(22vmin,22vw);border-radius:22%;background:rgba(255,255,255,.92);box-shadow:0 .8vmin 0 #e3b26a,0 1vmin 2vmin rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;animation:pop-in .4s backwards;cursor:pointer;opacity:.75}
#s-cafe .cf-pc.can,#s-cafe .cf-pc.got,#s-cafe .cf-pc.dish,#s-cafe .cf-pc.empty{opacity:1}
#s-cafe .cf-pc.got{box-shadow:0 .8vmin 0 #4fc36b,0 1vmin 2vmin rgba(0,0,0,.2)}
#s-cafe .cf-pc.no{animation:shake .5s}
#s-cafe .cf-pc>img{width:74%;height:74%;object-fit:contain}
#s-cafe .cf-pc b{position:absolute;right:-6%;bottom:-8%;height:38%;padding:0 1.2vmin 0 .6vmin;border-radius:4vmin;background:#fff;border:.5vmin solid #ffd23f;box-shadow:0 .4vmin .8vmin rgba(0,0,0,.2);display:flex;align-items:center;gap:.4vmin;font-weight:900;font-size:min(4.4vmin,1.5em);color:#5a3b1f}
#s-cafe .cf-pc b svg{height:80%;width:auto}
#s-cafe .cf-pc i.ok{position:absolute;right:-6%;bottom:-6%;width:36%;height:36%}
#s-cafe .cf-pc i.ok svg{width:100%;height:100%}
#s-cafe .cf-pc.dish .cf-old{position:absolute;inset:8%;z-index:auto}
#s-cafe .cf-pc.dish[data-st="pancake"] .cf-old,#s-cafe .cf-pc.dish[data-st="shake"] .cf-old{inset:22% 4%}
#s-cafe .cf-vfood{position:relative;width:70%;margin-top:14%}
#s-cafe .cf-vfood[data-st="ice"],#s-cafe .cf-vfood[data-st="shake"]{width:34%;margin-top:30%}
#s-cafe .cf-vfood>img{display:block;width:100%;height:auto}
#s-cafe .cf-pc.empty{background:none;box-shadow:none;width:40vmin;height:40vmin}
/* ===== by hand (05.10): no buttons for serving, the bin, the coin — things are carried; a thing in the hand is lifted (bigger, a deeper shadow) ===== */
#s-cafe{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#s-cafe .cf-ghost:not(.cf-flyer){scale:1.07;filter:drop-shadow(0 2.2vmin 1.6vmin rgba(60,30,10,.33))}
#s-cafe .cf-ghost.cf-back{scale:1;transition:scale .3s}
#s-cafe .cf-obj.cf-food{pointer-events:auto;touch-action:none;cursor:grab}
#s-cafe .cf-ghost.cf-carry{translate:-50% -50%}
/* the guest and the table light up when the dish is near (the guest hops on the chair) */
#s-cafe .cf-guest.cf-want .hp-body{filter:drop-shadow(0 0 1.6vmin rgba(255,215,60,.95)) drop-shadow(0 0 .5vmin rgba(255,200,40,.9))}
#s-cafe .cf-table.cf-want>img{filter:drop-shadow(0 0 1.8vmin rgba(255,215,60,1)) drop-shadow(0 .5vmin .6vmin rgba(80,40,10,.28))}
#s-cafe .cf-bin{transition:scale .2s}
#s-cafe .cf-bin.hot{scale:1.25;box-shadow:0 .7vmin 0 #e3b26a,0 0 0 1vmin #b89cff,0 0 3vmin rgba(184,156,255,.9)}
/* the coin on the table and the jar that waits for it */
#s-cafe .cf-coin2{position:absolute;z-index:9;translate:-50% -100%;pointer-events:auto;touch-action:none;cursor:grab;filter:drop-shadow(0 .5vmin .6vmin rgba(80,40,10,.35));animation:cf-coinin .55s cubic-bezier(.3,1.6,.5,1),cf-coinsh 1.8s 1s ease-in-out infinite;transition:scale .2s,filter .2s}
#s-cafe .cf-coin2:before{content:"";position:absolute;inset:-70%}
#s-cafe .cf-coin2 svg{display:block;width:100%;height:100%}
#s-cafe .cf-coin2.up{scale:1.3;filter:drop-shadow(0 2vmin 1.4vmin rgba(60,30,10,.35));animation:none;z-index:31}
@keyframes cf-coinin{from{translate:-50% -260%;scale:.4;opacity:0}}
@keyframes cf-coinsh{0%,62%,100%{rotate:0deg;translate:-50% -100%}70%{translate:-50% -128%}78%{rotate:-12deg;translate:-50% -100%}86%{rotate:10deg}}
#s-cafe .cf-top.cf-jar.glow{animation:cf-jarglow .8s ease-in-out infinite alternate}
@keyframes cf-jarglow{to{scale:1.18;box-shadow:0 .7vmin 0 #e3b26a,0 0 0 1.2vmin #ffd23f,0 0 5vmin rgba(255,210,60,1)}}
#s-cafe .cf-top.cf-jar{transition:scale .2s}
#s-cafe .cf-top.cf-jar.hot{scale:1.3}
/* the glaze spoon (a wooden spoon with a blob of glaze) and the glaze that it leaves on the donut */
#s-cafe .cf-spoon{position:absolute}
#s-cafe .cf-spoon>img{display:block;width:100%;height:auto}
#s-cafe .cf-spoon i{position:absolute;left:12%;top:4%;width:76%;height:22%;border-radius:50% 50% 46% 46%;box-shadow:inset -.3vmin -.4vmin .5vmin rgba(0,0,0,.18),inset .3vmin .3vmin .4vmin rgba(255,255,255,.5)}
#s-cafe .cf-gsm{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* the sauce drawn by the stream on the top pancake (an oval: the top of the pancake) */
#s-cafe .cf-sauce{position:absolute;left:4%;top:3%;width:92%;height:50%;clip-path:ellipse(49% 47% at 50% 50%);pointer-events:none;overflow:hidden;filter:drop-shadow(0 .2vmin .2vmin rgba(80,40,10,.35))}
/* the blender button is pressed while held */
#s-cafe .cf-blbtn.down{scale:.82;box-shadow:0 0 0 .8vmin rgba(255,215,60,.7),0 0 3vmin rgba(255,200,40,.8)}
/* the hand of a hint carries a small copy of the thing */
#s-cafe .cf-hand{position:absolute}
#s-cafe .cf-hcarry{position:absolute;left:30%;top:-6%;translate:-50% -70%;pointer-events:none;filter:drop-shadow(0 1vmin 1vmin rgba(0,0,0,.3))}
#s-cafe .cf-hcarry>img,#s-cafe .cf-hcarry>svg{display:block;width:100%;height:auto}
/* the finished dish says «take me»: it hops a little now and then, glowing */
#s-cafe .cf-obj.cf-grab.glow{animation:cf-takeme 1.6s ease-in-out infinite}
@keyframes cf-takeme{0%,55%,100%{translate:-50% -100%}68%{translate:-50% -112%}80%{translate:-50% -100%}88%{translate:-50% -104%}}
#s-cafe .cf-obj.cf-grab.glow:after{animation:cf-takemesh 1.6s ease-in-out infinite}
@keyframes cf-takemesh{0%,55%,100%{scale:1;opacity:1}68%{scale:.8;opacity:.6}80%{scale:1;opacity:1}}
/* ===== логика и явные движения (06.10): инструмент в руку, картинка заказа = результат ===== */
/* the order picture: the dish as it should be (cone with its balls, stack of pancakes, berries on the plate) */
#s-cafe .hp-it .cf-op{position:relative;width:100%;height:100%}
#s-cafe .hp-it .cf-op img{position:absolute;translate:-50% -50%;height:auto;object-fit:initial}
#s-cafe .hp-it .cf-op i{position:absolute;width:6%;height:2.4%;border-radius:1vmin;translate:-50% -50%}
#s-cafe .hp-it .cf-op b{position:absolute;width:50%;height:9%;translate:-50% -50%;border-radius:50%;opacity:.92}
#s-cafe .hp-it .cf-op b.cf-op-liq{left:50%;top:62%;width:40%;height:52%;border-radius:0 0 18% 18%;opacity:.9;box-shadow:inset 0 0 .8vmin rgba(150,110,80,.4)}
#s-cafe .cf-guest .hp-bub.cf-nudge{animation:cf-nudge .6s ease-in-out}
@keyframes cf-nudge{30%{scale:1.14}60%{scale:.96}}
/* the spoon stands in each glaze bowl: it is what the child takes */
#s-cafe .cf-bspoon{pointer-events:auto;rotate:160deg;z-index:1;transform-origin:50% 50%}
#s-cafe .cf-bspoon img{display:block;width:100%;height:auto}
#s-cafe .cf-bspoon.held{opacity:0}
#s-cafe .cf-bowl.glow .cf-bspoon img{filter:drop-shadow(0 0 1.2vmin rgba(255,215,60,1))}
/* the scoop: the tub lights up under it, the ball grows into the scoop, the tub «gives» */
#s-cafe .cf-scooper.held>img{opacity:.25}
#s-cafe .cf-it.hot{scale:1.12;box-shadow:0 .8vmin 0 #e3b26a,0 0 0 .9vmin rgba(255,215,60,.95),0 0 3vmin rgba(255,200,40,.9);transition:scale .15s}
#s-cafe .cf-sghost .cf-ballin{animation:cf-ballin .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes cf-ballin{from{scale:.1;opacity:.4}to{scale:1;opacity:1}}
#s-cafe .cf-it.cf-dig img{animation:cf-dig .45s ease-out}
@keyframes cf-dig{35%{scale:.9 1.06}70%{scale:1.04 .97}}
#s-cafe .cf-holder.hot>img{filter:drop-shadow(0 0 1.6vmin rgba(255,215,60,1)) drop-shadow(0 0 .6vmin rgba(255,200,40,1))}
#s-cafe .cf-holder.cf-target:before{content:"";position:absolute;left:50%;top:var(--ty,-30%);width:110%;aspect-ratio:1;translate:-50% -50%;border:.7vmin dashed rgba(255,190,40,.95);border-radius:50%;animation:cf-target 1s ease-in-out infinite alternate;pointer-events:none}
@keyframes cf-target{from{scale:.9;opacity:.6}to{scale:1.05;opacity:1}}
#s-cafe .cf-hcarry .cf-hball{position:absolute;left:22%;top:20%;width:44%;translate:-50% -50%;height:auto}
/* the bottle is squeezed while the sauce runs */
#s-cafe .cf-ghost.cf-squeeze{animation:cf-squeeze .32s ease-in-out infinite}
@keyframes cf-squeeze{50%{scale:.84 1.04}}
#s-cafe .cf-guest .hp-it.cf-big{width:20vmin;height:20vmin}
#s-cafe .cf-guest.mini .hp-it.cf-big:first-child{width:13vmin;height:13vmin;filter:none;opacity:1}

#s-cafe .cf-onsp img{width:100%;height:100%;object-fit:fill}

/* the live middle of the counter: the guest big (coming / chewing / happy) and the big coin to pay */
#s-cafe .cf-lv{position:absolute;z-index:5;display:flex;align-items:center;justify-content:center;gap:5vmin;pointer-events:none;animation:pop-in .45s backwards;transition:opacity .3s,scale .3s}
#s-cafe .cf-lv.out{opacity:0;scale:.8;transition-duration:.12s}
#s-cafe .cf-lv-g{border-radius:50%;background:#fff;border:1.2vmin solid #fff;box-shadow:0 1.2vmin 0 #e3b26a,0 1.8vmin 3vmin rgba(0,0,0,.25);overflow:hidden;flex:none}
#s-cafe .cf-lv-g img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
#s-cafe .cf-lv.come .cf-lv-g{animation:cf-lvwalk .7s ease-in-out infinite alternate}
#s-cafe .cf-lv.eat .cf-lv-g{animation:cf-lvmunch .56s ease-in-out infinite;transform-origin:50% 100%}
#s-cafe .cf-lv.happy .cf-lv-g{animation:cf-lvhappy .8s ease-in-out infinite alternate}
#s-cafe .cf-lv-c{flex:none;pointer-events:auto;touch-action:none;cursor:pointer;filter:drop-shadow(0 1vmin .8vmin rgba(80,40,10,.4));animation:cf-lvcoin 1s ease-in-out infinite alternate}
#s-cafe .cf-lv-c svg{display:block;width:100%;height:100%}
@keyframes cf-lvwalk{from{translate:-2vmin 0;rotate:-4deg}to{translate:2vmin -1.2vmin;rotate:4deg}}
@keyframes cf-lvmunch{0%,100%{scale:1 1}30%{scale:1.05 .93}60%{scale:.97 1.04}}
@keyframes cf-lvhappy{from{translate:0 0;rotate:-3deg}to{translate:0 -1.6vmin;rotate:3deg}}
@keyframes cf-lvcoin{from{scale:1;rotate:-6deg}to{scale:1.12;rotate:6deg}}

/* 11.10: the only coin is on the table: big, glowing; the counter has no portrait and no second coin */
#s-cafe .cf-coin2{filter:drop-shadow(0 0 1.6vmin rgba(255,215,60,1)) drop-shadow(0 .5vmin .6vmin rgba(80,40,10,.4))}
/* 11.10 QA: bigger touch zones for thin tools (spatula, jug, bowls, lid) — the picture stays the same, the invisible frame around it takes the finger */
#s-cafe .cf-obj.cf-tool:before,#s-cafe .cf-obj.cf-bowl:before{content:"";position:absolute;inset:-1.6vmin;z-index:0}
/* while the child chooses a station the bin has nothing to hold (it would lie under the big pictures) */
#s-cafe .cf-tabs.pick~.cf-bin{display:none}

/* 11.10: station cards wait until the order has been said (cafe.js startOrder) */
#s-cafe .cf-wait{visibility:hidden;pointer-events:none}

/* ===== polish 14.10: juice (cafe.js → FX). Only transform/opacity; nothing here catches a touch ===== */
.cf-sp{position:fixed;left:0;top:0;z-index:980;pointer-events:none;border-radius:50%;will-change:transform,opacity}
.cf-sp.star{border-radius:0;clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 96%,50% 74%,20% 96%,30% 60%,0 38%,38% 36%)}
.cf-plus{position:fixed;z-index:981;pointer-events:none;font-weight:900;font-size:min(8vmin,44px);line-height:1;color:#ffd23f;-webkit-text-stroke:.9vmin #b36b00;paint-order:stroke fill;text-shadow:0 .6vmin 0 #b36b00;will-change:transform,opacity}
/* the plate with a word of the series: a picture, not a voice */
#s-cafe .cf-word{position:absolute;z-index:22;pointer-events:none;white-space:nowrap;font-weight:900;line-height:1;font-size:min(11vmin,64px);color:#fff;letter-spacing:.02em;padding:.9vmin 3vmin 1.2vmin;border-radius:5vmin;background:linear-gradient(180deg,#ffb347,#ff7a59);border:.7vmin solid #fff;box-shadow:0 1vmin 0 #c4532f,0 1.6vmin 2.6vmin rgba(0,0,0,.28);text-shadow:0 .5vmin 0 rgba(150,50,20,.55);will-change:transform,opacity}
#s-cafe .cf-word.k2{background:linear-gradient(180deg,#ff8fc8,#e0509a);box-shadow:0 1vmin 0 #a02468,0 1.6vmin 2.6vmin rgba(0,0,0,.28)}
#s-cafe .cf-word.k3{background:linear-gradient(180deg,#b89cff,#7a55e0);box-shadow:0 1vmin 0 #4d2fa8,0 1.6vmin 2.6vmin rgba(0,0,0,.28)}
#s-cafe .cf-word.k4{background:linear-gradient(180deg,#6fd98b,#2fa857);box-shadow:0 1vmin 0 #1b7a3a,0 1.6vmin 2.6vmin rgba(0,0,0,.28)}
#s-cafe .cf-word.rec{font-size:min(8.5vmin,50px);background:linear-gradient(180deg,#ffe36a,#ffb300);color:#7a3d00;text-shadow:0 .4vmin 0 rgba(255,255,255,.6);box-shadow:0 1vmin 0 #b87400,0 0 5vmin 1.5vmin rgba(255,210,60,.85)}
#s-cafe .cf-word.rec:before{content:"⭐ "}#s-cafe .cf-word.rec:after{content:" ⭐"}
/* soft layers of the room: a warm pulse (behind the guest), one white flash, the veil of a new round */
#s-cafe .cf-fx-pulse{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 55%,rgba(255,226,140,.7),rgba(255,226,140,0) 68%)}
#s-cafe .cf-fx-flash{position:absolute;inset:0;z-index:40;pointer-events:none;opacity:0;background:#fff}
#s-cafe .cf-fx-veil{position:absolute;inset:0;z-index:45;pointer-events:none;background:#fff6e6}
/* the living room: motes of light and two beams, slow (the cafe picture stays as it is) */
#s-cafe .cf-fx-amb{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#s-cafe .cf-mote{position:absolute;width:1.5vmin;height:1.5vmin;border-radius:50%;background:radial-gradient(#fff,rgba(255,244,200,0) 70%);opacity:0;animation:cf-mote 11s ease-in-out infinite;will-change:transform,opacity}
@keyframes cf-mote{0%{opacity:0;transform:translate(0,0) scale(.6)}25%{opacity:.85}60%{opacity:.7;transform:translate(3vmin,-6vmin) scale(1.1)}100%{opacity:0;transform:translate(-2vmin,-12vmin) scale(.7)}}
#s-cafe .cf-ray{position:absolute;left:30%;top:-20%;width:16vmin;height:120%;transform-origin:50% 0;rotate:14deg;background:linear-gradient(180deg,rgba(255,240,190,.5),rgba(255,240,190,0) 80%);opacity:.5;animation:cf-ray 7s ease-in-out infinite alternate;will-change:transform,opacity}
#s-cafe .cf-ray.r2{left:58%;width:11vmin;rotate:10deg;animation-duration:9s;animation-delay:-3s;opacity:.4}
@keyframes cf-ray{from{opacity:.18;transform:translateX(-2vmin)}to{opacity:.55;transform:translateX(3vmin)}}
/* buttons and cards go in and spring back */
#s-cafe .cf-top,#s-cafe .cf-it,#s-cafe .cf-btn{transition:transform .22s cubic-bezier(.3,1.7,.5,1)}
#s-cafe .cf-tab{transition:transform .22s cubic-bezier(.3,1.7,.5,1),scale .2s,opacity .2s}   /* keep the old scale/opacity of .on */
#s-cafe .cf-bin{transition:transform .22s cubic-bezier(.3,1.7,.5,1),scale .2s}   /* keep the old scale of .hot */
#s-cafe .cf-top:active,#s-cafe .cf-tab:active,#s-cafe .cf-it:active,#s-cafe .cf-bin:active{transform:scale(.9);transition-duration:.07s}
/* the reward: a rainbow that turns slowly behind the child and the buttons */
#reward.cf-rainbow{overflow:hidden}
#reward.cf-rainbow:before{content:"";position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;pointer-events:none;opacity:.42;background:conic-gradient(#ff5b6e,#ffc531,#4fc36b,#3fa3ff,#b26cff,#ff8fc8,#ff5b6e);animation:cf-rainbow 14s linear infinite;will-change:transform}
@keyframes cf-rainbow{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#s-cafe .cf-mote,#s-cafe .cf-ray,#reward.cf-rainbow:before{animation:none}#s-cafe .cf-mote{opacity:0}}
/* the main hero stays in the eye: a warm halo breathes behind the guest at the table */
#s-cafe .cf-guest:not(.cf-out):before{content:"";position:absolute;left:6%;right:6%;top:0;height:62%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,238,170,.8),rgba(255,238,170,0));opacity:.3;pointer-events:none;z-index:-1;animation:cf-halo 3.6s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes cf-halo{to{opacity:.65;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){#s-cafe .cf-guest:before{animation:none}}
/* the shop / showcase: the cards jump in one after another */
#s-cafe .cf-panel.show .cf-pc:not(.no){animation:pop-in .42s cubic-bezier(.3,1.5,.5,1) backwards}
#s-cafe .cf-panel.show .cf-pc:nth-child(2){animation-delay:0.08s}
#s-cafe .cf-panel.show .cf-pc:nth-child(3){animation-delay:0.12s}
#s-cafe .cf-panel.show .cf-pc:nth-child(4){animation-delay:0.16s}
#s-cafe .cf-panel.show .cf-pc:nth-child(5){animation-delay:0.20s}
#s-cafe .cf-panel.show .cf-pc:nth-child(6){animation-delay:0.24s}
#s-cafe .cf-panel.show .cf-pc:nth-child(7){animation-delay:0.28s}
#s-cafe .cf-panel.show .cf-pc:nth-child(8){animation-delay:0.32s}
#s-cafe .cf-panel.show .cf-pc:nth-child(9){animation-delay:0.36s}