/* игра «Помой зверят» (bath): стили только этой игры. Все правила через #s-bath, анимации с префиксом bt-. */ /* ---------- bath v5: a real bath in layers — the tub's back, the water behind, the animal, the water and foam in front, the tub's front wall ---------- */ #s-bath .bg{object-position:50% 15%} #s-bath [hidden]{display:none!important} #s-bath .bt-wrap{position:absolute;z-index:3;left:0;top:0;width:0;height:0;pointer-events:none} /* the tub picture box (1000x565): everything inside is placed in % of it */ #s-bath .bt-tz{position:absolute;left:0;bottom:0;width:100%;aspect-ratio:1000/565} #s-bath .bt-back,#s-bath .bt-front{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} #s-bath .bt-back{z-index:1} #s-bath .bt-front{z-index:7} #s-bath .bt-water{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} #s-bath .bt-wback{z-index:2} #s-bath .bt-wfront{z-index:5} #s-bath .bt-lvl{transition:transform .3s cubic-bezier(.3,.6,.4,1)} #s-bath .bt-wave{animation:bt-wave 2.6s ease-in-out infinite alternate} #s-bath .bt-wfront .bt-wave{animation-duration:2.1s;animation-direction:alternate-reverse} @keyframes bt-wave{from{transform:translateX(-40px)}to{transform:translateX(40px)}} #s-bath .bt-wback .bt-wave{fill:url(#bt-wg)} #s-bath .bt-wfront .bt-wave{fill:rgba(110,200,250,.5);transition:fill .8s} #s-bath .bt-line{fill:none;stroke:rgba(255,255,255,.85);stroke-width:5;stroke-linecap:round} #s-bath .bt-wrap.hot .bt-wfront .bt-wave{fill:rgba(255,150,140,.45)} #s-bath .bt-wrap.cold .bt-wfront .bt-wave{fill:rgba(190,235,255,.62)} #s-bath .bt-foamb circle,#s-bath .bt-foamf circle{fill:#fff;stroke:#bfe0fb;stroke-width:3;transition:opacity .5s,transform .5s;transform-box:fill-box;transform-origin:50% 50%} #s-bath .bt-foamb circle.off,#s-bath .bt-foamf circle.off{opacity:0;transform:scale(.2)} #s-bath .bt-swirl{opacity:0;transition:opacity .5s} #s-bath .bt-swirl path{fill:none;stroke:rgba(255,255,255,.9);stroke-width:7;stroke-linecap:round;animation:bt-spin .7s linear infinite;transform-box:fill-box;transform-origin:50% 50%} #s-bath .bt-wrap.drain .bt-swirl{opacity:1} @keyframes bt-spin{to{rotate:360deg}} /* the spout and its stream: the stream's colour tells hot / cold / warm */ #s-bath .bt-spout{position:absolute;z-index:3;left:2%;top:-15%;width:17%;pointer-events:none} #s-bath .bt-stream{position:absolute;z-index:3;left:16.4%;top:1.2%;width:2.6%;height:0;border-radius:0 0 40% 40%;background:linear-gradient(90deg,rgba(120,200,255,.6),rgba(230,247,255,.95) 45%,rgba(120,200,255,.6));opacity:0;transition:opacity .25s,background .4s;pointer-events:none} #s-bath .bt-wrap.flow .bt-stream{opacity:1;animation:bt-flow .25s ease-in-out infinite} #s-bath .bt-wrap.hot .bt-stream{background:linear-gradient(90deg,rgba(255,150,130,.6),rgba(255,236,230,.95) 45%,rgba(255,150,130,.6))} #s-bath .bt-wrap.cold .bt-stream{background:linear-gradient(90deg,rgba(120,170,255,.7),rgba(220,240,255,1) 45%,rgba(120,170,255,.7))} @keyframes bt-flow{50%{scale:1.15 1}} /* steam over hot water */ #s-bath .bt-steam{position:absolute;z-index:6;left:10%;right:10%;top:-30%;height:45%;pointer-events:none;opacity:0;transition:opacity .6s} #s-bath .bt-wrap.hot .bt-steam{opacity:1} #s-bath .bt-puff{position:absolute;bottom:0;width:26%;aspect-ratio:1;border-radius:50%;background:radial-gradient(#fff 0 20%,rgba(255,255,255,.75) 42%,rgba(255,255,255,0) 70%);animation:bt-puff 2.4s ease-out infinite} @keyframes bt-puff{from{translate:0 30%;scale:.5;opacity:0}30%{opacity:1}to{translate:0 -120%;scale:1.4;opacity:0}} /* the animals */ #s-bath .bt-ans{position:absolute;inset:0;z-index:4;pointer-events:none} #s-bath .bt-an{position:absolute;translate:-50% 0;transform-origin:50% 100%;transition:bottom .6s cubic-bezier(.3,1.4,.5,1)} #s-bath .bt-an .bt-aimg{height:100%;display:block;pointer-events:none;transition:opacity .25s} #s-bath .bt-an .bt-pose{position:absolute;left:50%;bottom:0;height:100%;translate:-50% 0;opacity:0;pointer-events:none;transition:opacity .25s} #s-bath .bt-an.posed .bt-aimg{opacity:0} #s-bath .bt-an.posed .bt-pose{opacity:1} #s-bath .bt-an.shiver{animation:bt-shiver .12s linear infinite} @keyframes bt-shiver{0%,100%{translate:-50% 0}25%{translate:-51.5% 0}75%{translate:-48.5% 0}} #s-bath .bt-an.flinch{animation:bt-flinch .55s ease-out} @keyframes bt-flinch{30%{translate:-50% -16%;rotate:-4deg}60%{translate:-50% -4%;rotate:2deg}} #s-bath .bt-an.happy{animation:bt-happy .7s ease-in-out 2} @keyframes bt-happy{0%{scale:1.06 .94}50%{translate:-50% -7%;scale:.97 1.05}100%{scale:1 1}} #s-bath .bt-an.dive{animation:bt-dive 1.1s ease-in-out} @keyframes bt-dive{35%,55%{translate:-50% 42%}80%{translate:-50% -8%}} #s-bath .bt-an.shake{animation:bt-shake .5s ease-in-out 2} @keyframes bt-shake{0%,100%{rotate:0deg}25%{rotate:-7deg}75%{rotate:7deg}} #s-bath .bt-an.hug{animation:bt-hug 1.5s ease-in-out;z-index:9} @keyframes bt-hug{30%{scale:1.25;translate:-50% -14%}55%{scale:1.15;translate:-50% -8%}80%{scale:1.22;translate:-50% -12%}} #s-bath .bt-an.fluffy .bt-pose{filter:drop-shadow(0 0 .8vmin #fff)} /* dirt, foam, drops on an animal (in % of its picture) */ #s-bath .bt-spot,#s-bath .bt-zone,#s-bath .bt-foam,#s-bath .bt-drop,#s-bath .bt-damp,#s-bath .bt-calm{position:absolute;translate:-50% -50%;aspect-ratio:1;pointer-events:none} #s-bath .bt-spot{z-index:2;background:center/contain no-repeat;transition:opacity .15s;animation:btp-sin .45s cubic-bezier(.3,1.6,.5,1) backwards} #s-bath .bt-spot.now:after{content:"";position:absolute;inset:-22%;border:.6vmin dashed rgba(255,255,255,.95);border-radius:50%;box-shadow:0 0 0 .45vmin rgba(255,180,60,.6);animation:bt-ring 1.1s ease-in-out infinite} #s-bath .bt-zone{z-index:3;border-radius:50%;border:.9vmin dashed #fff;background:radial-gradient(rgba(255,150,210,.45),rgba(255,150,210,.16));box-shadow:0 0 0 .6vmin rgba(255,90,170,.75);animation:btp-zin .45s cubic-bezier(.3,1.6,.5,1) backwards,bt-ring 1.6s .45s ease-in-out infinite} #s-bath .bt-zone.now{box-shadow:0 0 0 .8vmin rgba(255,180,60,.8);animation-duration:.9s} #s-bath .bt-spot.count{scale:1.35;transition:scale .2s} @keyframes bt-ring{50%{scale:1.15}} #s-bath .bt-spot.gone{opacity:0!important;scale:1.6;transition:opacity .3s,scale .3s} #s-bath .bt-foam{border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 30%,#eef7ff 55%,#cfe6fb);box-shadow:inset 0 0 0 .25vmin rgba(150,200,240,.8);animation:bt-pop .3s backwards} #s-bath .bt-drop{width:5%;aspect-ratio:.7;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,#8fd2ff 30%,#3fa3ff);opacity:.9} #s-bath .bt-damp{border-radius:50%;background:radial-gradient(rgba(40,70,120,.35),rgba(40,70,120,0) 70%)} #s-bath .bt-calm{width:30%} #s-bath .gone{opacity:0!important;transition:opacity .3s} @keyframes bt-pop{from{scale:.2;opacity:0;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}} /* toys floating on the water */ #s-bath .bt-toys{display:contents} #s-bath .bt-toy{position:absolute;z-index:6;translate:-50% -78%;pointer-events:auto;animation:bt-bob 2.4s ease-in-out infinite;transition:top .25s linear,opacity .5s} #s-bath.bt-rub .bt-toy{pointer-events:none} #s-bath .bt-toy.in{animation:bt-bob 2.4s ease-in-out infinite,bt-pop .5s} #s-bath .bt-toy.sink{opacity:0} @keyframes bt-bob{0%,100%{rotate:-6deg}50%{rotate:6deg;margin-top:-1.2%}} /* the plug hangs over the front rim */ #s-bath .bt-plug{position:absolute;z-index:8;left:69%;top:19%;width:max(16%,50px);pointer-events:none;touch-action:none;transition:translate .6s cubic-bezier(.3,1.5,.5,1),opacity .4s} #s-bath .bt-plug img{width:100%;display:block;pointer-events:none} #s-bath .bt-plug:before{content:"";position:absolute;inset:-35%;border-radius:50%} #s-bath .bt-plug.on{pointer-events:auto;animation:pulse 1s infinite} #s-bath .bt-plug.on:not(.pull):after{content:"";position:absolute;left:50%;top:-100%;width:6.5vmin;height:6.5vmin;translate:-50% 0;pointer-events:none;background:url('data:image/svg+xml,') center/contain no-repeat;animation:bt-up .8s ease-in-out infinite} @keyframes bt-up{50%{translate:-50% -22%}} #s-bath .bt-plug.on.pull{animation:none;filter:drop-shadow(0 1.6vmin 1vmin rgba(0,0,0,.3));z-index:30} #s-bath .bt-plug.vp-away{visibility:visible!important;opacity:0} #s-bath .bt-plug.out{translate:30% -140%;rotate:25deg;opacity:0} /* the tray: taps / tools / answer cards */ #s-bath .bt-tray{position:absolute;z-index:20;display:flex;align-items:center;justify-content:center;gap:2.6vmin;pointer-events:none} #s-bath .bt-tool{position:relative;width:21vmin;height:21vmin;min-width:66px;min-height:66px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 .8vmin 0 #59b7ff,0 1vmin 2vmin rgba(0,0,0,.2);padding:2.6vmin;display:flex;align-items:center;justify-content:center;pointer-events:auto;touch-action:none;animation:bt-pop .35s backwards;flex:none} #s-bath .bt-tool img{max-width:100%;max-height:100%;pointer-events:none} #s-bath .bt-tool.vp-away{visibility:visible!important;opacity:0} /* shown big by the helper: a finger on its place still takes it */ #s-bath .bt-tool.held{opacity:.3;scale:.9;transition:opacity .15s,scale .15s} #s-bath .bt-tool.hint{animation:pulse 1s infinite} #s-bath .bt-tool.bt-tap{padding:1.6vmin;width:23vmin;height:23vmin} #s-bath .bt-tool.bt-tap img{transition:rotate .45s cubic-bezier(.3,1.5,.5,1)} #s-bath .bt-tool.bt-tap.open img{rotate:-90deg} #s-bath .bt-tap[data-t=cold]{box-shadow:0 0 0 1.2vmin #3fa3ff inset,0 .8vmin 0 #1f78d1,0 1vmin 2vmin rgba(0,0,0,.2);background:#e6f4ff} #s-bath .bt-tap[data-t=hot]{box-shadow:0 0 0 1.2vmin #ff5b5b inset,0 .8vmin 0 #c93636,0 1vmin 2vmin rgba(0,0,0,.2);background:#ffecec} #s-bath .bt-tap.open[data-t=cold]{background:#bfe4ff} #s-bath .bt-tap.open[data-t=hot]{background:#ffc9c9} #s-bath .bt-face{width:19vmin;height:19vmin;min-width:60px;min-height:60px;flex:none;pointer-events:none;animation:bt-pop .35s backwards} #s-bath .bt-face svg{width:100%;height:100%;display:block} #s-bath .bt-card{width:22vmin;height:22vmin;min-width:70px;min-height:70px;border-radius:4vmin;background:#fff;box-shadow:0 .8vmin 0 #ffb347,0 1vmin 2vmin rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;padding:2vmin;pointer-events:auto;flex:none;animation:bt-pop .35s backwards} #s-bath .bt-card img,#s-bath .bt-card svg{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;pointer-events:none} #s-bath .bt-card.hint{animation:pulse 1s infinite} #s-bath .bt-card.no{animation:bt-no .4s} @keyframes bt-no{25%{translate:-1.5vmin 0}75%{translate:1.5vmin 0}} /* steps of the bath, in order, at the top; done ones get a tick */ #s-bath .bt-steps{position:absolute;z-index:21;left:50%;translate:-50% 0;top:calc(2.2vmin + env(safe-area-inset-top));display:flex;gap:1.2vmin;padding:1vmin 1.4vmin;border-radius:6vmin;background:rgba(255,255,255,.6);pointer-events:none} #s-bath .bt-chip{position:relative;width:var(--chip,9vmin);height:var(--chip,9vmin);border-radius:50%;background:#fff;box-shadow:0 .5vmin 0 rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;padding:1.1vmin;transition:scale .4s cubic-bezier(.3,1.6,.5,1)} #s-bath .bt-chip img{max-width:100%;max-height:100%} #s-bath .bt-chip.now{scale:1.18;box-shadow:0 0 0 .6vmin #ffd23f,0 .5vmin 0 rgba(0,0,0,.12)} #s-bath .bt-chip.done img{opacity:.35} #s-bath .bt-chip.done:after{content:"";position:absolute;inset:14%;background:url('data:image/svg+xml,') center/contain no-repeat;animation:bt-pop .35s} /* bubbles to pop, the tool under the finger */ #s-bath .bt-bub{position:absolute;z-index:24;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff 0 12%,rgba(255,255,255,.25) 30%,rgba(140,200,255,.35) 70%,rgba(255,255,255,.85) 100%);box-shadow:inset 0 0 1vmin rgba(255,255,255,.9);touch-action:none;translate:-50% -50%} .bt-cur{position:fixed;z-index:60;width:19vmin;height:19vmin;translate:-50% -50%;pointer-events:none;display:none;object-fit:contain} .bt-cur.on{display:block} .bt-cur.lift{scale:1.14;filter:drop-shadow(0 2.2vmin 1.2vmin rgba(0,0,0,.3))} .bt-cur.t-washcloth,.bt-cur.t-towel{translate:-50% -66%} .bt-cur.t-shampoo{translate:-50% -125%;rotate:180deg} /* upside down over the animal: the cap is the nozzle, it lies 5 vmin above the finger */ .bt-cur.t-shampoo.lift{filter:drop-shadow(0 -2.2vmin 1.2vmin rgba(0,0,0,.3))} .bt-cur.sq{animation:bt-sq .22s ease-in-out infinite} @keyframes bt-sq{50%{translate:-50% -121%}} .bt-cur.t-shower{translate:-30% -85%} .bt-cur.t-hairdryer{translate:-90% -40%} .bt-cur.t-toothbrush{translate:-80% -25%} .bt-fall.pink{background:#ff9fd2;width:1.6vmin;height:2.4vmin} .bt-fall{position:fixed;z-index:59;width:1.3vmin;height:2.6vmin;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#59b7ff;pointer-events:none;animation:bt-fall .45s cubic-bezier(.45,0,.9,.6) forwards} @keyframes bt-fall{to{transform:translateY(12vmin);opacity:0}} #s-bath .helper{z-index:22} @media (orientation:landscape){ #s-bath .bt-tray{right:calc(2.5vw + env(safe-area-inset-right));top:15vmin;bottom:2vmin;flex-direction:column} } @media (orientation:portrait){ #s-bath .bt-tray{left:calc(2vw + env(safe-area-inset-left));right:calc(2vw + env(safe-area-inset-right));bottom:calc(3vmin + env(safe-area-inset-bottom));height:26vmin;flex-direction:row;gap:4vmin} #s-bath .bt-tool{width:22vmin;height:22vmin} #s-bath .bt-tool.bt-tap{width:24vmin;height:24vmin} #s-bath .bt-card{width:24vmin;height:24vmin} } /* помощник из семьи: размер и место на экране этой игры (их читает общий .helper.fam3d в core/core.css). --hp-h = высота фигуры (доля высоты экрана), --hp-x = отступ слева, --hp-y = где стоят ноги (от низа); точное место считает layout() в bath.js (helper.place) */ #s-bath .helper.fam3d{--hp-h:42%;--hp-x:2.5vmin;--hp-y:1%} @media (orientation:portrait){#s-bath .helper.fam3d{--hp-h:28%}} /* 04.10.2026, the customer: the helper's picture cloud covered the step icons on top — in the bath it is not needed (the step bar already shows the tool) */ #s-bath .helper .hp-bub{display:none!important} /* ---------- polish 14.10: отклик, живой фон, серия, вспышка (btp-*). Только transform/opacity; частицы ≤ 40 — в bath.js (BP) ---------- */ @keyframes btp-sin{from{transform:scale(0);opacity:0}} @keyframes btp-zin{from{transform:scale(0);opacity:0}} #s-bath .btp-amb,#s-bath .btp-glow,#s-bath .btp-rb,#s-bath .btp-flash{position:absolute;inset:0;pointer-events:none;overflow:hidden} #s-bath .btp-amb{z-index:2} #s-bath .btp-glow{z-index:2;opacity:0;background:radial-gradient(circle at 50% 55%,rgba(255,236,160,.75),rgba(255,236,160,0) 65%)} #s-bath .btp-rb{z-index:2;opacity:0;transition:opacity .9s} #s-bath .btp-rb:before{content:"";position:absolute;left:-50%;top:0;width:200%;height:100%;background:linear-gradient(100deg,#ff7b8a,#ffc65a,#fff27a,#7be08a,#6cc4ff,#b48cff,#ff7b8a,#ffc65a,#fff27a,#7be08a,#6cc4ff,#b48cff);mix-blend-mode:soft-light} #s-bath .btp-rb.on{opacity:.3} #s-bath .btp-rb.on:before{animation:btp-rb 4s ease-in-out infinite alternate} @keyframes btp-rb{to{transform:translateX(25%)}} #s-bath .btp-flash{z-index:19;opacity:0;background:radial-gradient(circle at 50% 50%,#fff,rgba(255,255,255,.7))} #s-bath .btp-mote{position:absolute;bottom:-4vmin;width:var(--s);aspect-ratio:1;border-radius:50%;background:radial-gradient(#fff 0 25%,rgba(255,255,255,0) 70%);opacity:0;animation:btp-mote var(--d) ease-in-out var(--dl) infinite} @keyframes btp-mote{0%{transform:translate(0,0);opacity:0}15%{opacity:.75}85%{opacity:.5}100%{transform:translate(var(--dx),-105vh);opacity:0}} #s-bath .btp-glint{position:absolute;width:30vmin;height:30vmin;border-radius:50%;background:radial-gradient(rgba(255,255,230,.5),rgba(255,255,230,0) 65%);opacity:.15;animation:btp-glint 5s ease-in-out var(--dl) infinite alternate} @keyframes btp-glint{to{opacity:.55;transform:scale(1.25)}} #s-bath .btp-ban{position:absolute;z-index:40;left:50%;top:14vmin;opacity:0;pointer-events:none;white-space:nowrap;font:900 8vmin/1 'Nunito','Arial Rounded MT Bold',system-ui,sans-serif;letter-spacing:.02em;color:#ffd23f;-webkit-text-stroke:.9vmin #7a3fb0;paint-order:stroke fill;text-shadow:0 .8vmin 0 rgba(122,63,176,.55),0 0 2vmin rgba(255,255,255,.8)} #s-bath .btp-ban[data-t="2"]{color:#7be08a;-webkit-text-stroke-color:#1d7a4a} #s-bath .btp-ban[data-t="3"]{color:#6cc4ff;-webkit-text-stroke-color:#1f5fa8} #s-bath .btp-ban[data-t="4"]{color:#ff8fc8;-webkit-text-stroke-color:#a8265f} #s-bath .btp-ban[data-t="rec"]{color:#fff27a;-webkit-text-stroke-color:#b3541a;font-size:9vmin} .btp-ring{position:fixed;z-index:975;pointer-events:none;border-radius:50%;border:.7vmin solid rgba(255,255,255,.95);box-shadow:0 0 1.4vmin rgba(255,255,255,.8)} .btp-plus{position:fixed;z-index:975;pointer-events:none;font:900 6vmin/1 'Nunito',system-ui,sans-serif;color:#ffd23f;-webkit-text-stroke:.6vmin #b3541a;paint-order:stroke fill;white-space:nowrap} /* hero: a soft halo behind the animals (opacity only) */ #s-bath .bt-an:before{content:"";position:absolute;inset:-4% -16% 8% -16%;z-index:-1;border-radius:50%;background:radial-gradient(rgba(255,244,190,.6),rgba(255,244,190,0) 68%);pointer-events:none;opacity:.3;animation:btp-aura 2.8s ease-in-out infinite alternate} @keyframes btp-aura{to{opacity:.85}} /* hit-stop (only the living background holds still; touches go through) and a hidden tab */ #s-bath.bt-freeze .btp-mote,#s-bath.bt-freeze .btp-glint,#s-bath.bt-freeze .bt-wave,#s-bath.bt-freeze .bt-puff,#s-bath.bt-freeze .bt-an:before,#s-bath.bt-paused *,#s-bath.bt-paused *:before{animation-play-state:paused!important} @media (prefers-reduced-motion:reduce){#s-bath .btp-amb,#s-bath .btp-rb,#s-bath .btp-flash,#s-bath .btp-glow{display:none}#s-bath .bt-an:before{animation:none;opacity:.5}}