/* ядро: общие стили — основа, заставка, меню, награда, живой фон, помощник (.helper, .helper.fam3d), общие для букв и цифр плитки (.tile, .thing, .ask-btn),
   общие @keyframes. Стили игр — в games/<id>/<id>.css (грузятся после этого файла, в порядке games/GAMES). */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#7cc8f5;overscroll-behavior:none}
html{touch-action:none;-ms-touch-action:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:"Nunito","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}
button{border:0;background:none;font:inherit;cursor:pointer;touch-action:manipulation}
#app{position:fixed;inset:0;overflow:hidden}
.screen{position:absolute;inset:0;display:none;overflow:hidden}
.screen.active{display:block}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

.round-btn{position:absolute;width:13vmin;height:13vmin;max-width:84px;max-height:84px;border-radius:50%;background:linear-gradient(var(--b1,#ffb347),var(--b2,#ff8a00));box-shadow:0 .8vmin 0 var(--b3,#c96500),0 1.2vmin 2vmin rgba(0,0,0,.25);z-index:50;display:flex;align-items:center;justify-content:center;transition:transform .12s}
.round-btn svg{width:62%;height:62%}
.round-btn:active{transform:translateY(.6vmin) scale(.95);box-shadow:0 .2vmin 0 var(--b3,#c96500)}
.round-btn.rel{position:relative}
.round-btn.big{position:relative;width:20vmin;height:20vmin;max-width:130px;max-height:130px}
.home-btn{left:calc(2vmin + env(safe-area-inset-left));top:calc(2vmin + env(safe-area-inset-top));display:none}
.home-btn.show{display:flex}

/* start */
.start-title{position:absolute;left:0;right:0;top:7vh;text-align:center;font-size:12vmin;font-weight:900;color:#fff;-webkit-text-stroke:.6vmin #ff6fa8;text-shadow:0 1vmin 0 #ff6fa8,0 1.6vmin 2vmin rgba(0,0,0,.25);z-index:2;letter-spacing:.3vmin}
.big-play{position:absolute;left:50%;top:56%;width:30vmin;height:30vmin;margin:-15vmin 0 0 -15vmin;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7df07a,#22b14c);box-shadow:0 1.4vmin 0 #157a33,0 2vmin 4vmin rgba(0,0,0,.3);z-index:3;animation:pulse 1.4s infinite ease-in-out}
.big-play svg{width:70%;height:70%}
.start-child{position:absolute;right:4vw;bottom:0;height:62vh;z-index:2;animation:bob 2s infinite ease-in-out}
@media (orientation:portrait){.start-child{height:34vh;right:2vw}.big-play{top:48%}}
@keyframes pulse{50%{scale:1.08}}
@keyframes bob{50%{translate:0 -2vh}}

/* menu */
.menu-grid{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:3.5vmin;padding:4vmin 22vw 4vmin 6vw;z-index:2}
.game-btn{width:23vmin;height:23vmin;border-radius:6vmin;background:#fff;box-shadow:0 1.2vmin 0 var(--c),0 2vmin 3vmin rgba(0,0,0,.2);border:1vmin solid var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5vmin;transition:transform .15s;animation:pop-in .5s backwards,floaty 3.4s ease-in-out infinite}
.game-btn:nth-child(2){animation-delay:0.10s}
.game-btn:nth-child(3){animation-delay:0.15s}
.game-btn:nth-child(4){animation-delay:0.20s}
.game-btn:nth-child(5){animation-delay:0.25s}
.game-btn img{width:70%;height:65%;object-fit:contain}
.game-btn span{font-size:2.8vmin;font-weight:900;color:#5a3b1f;margin-top:.8vmin;text-align:center;line-height:1.05}
.game-btn:active{transform:scale(.92)}
.menu-child{position:absolute;right:1vw;bottom:0;height:70vh;z-index:3;animation:bob 2.4s infinite ease-in-out}
@keyframes pop-in{from{scale:0}70%{scale:1.1}}
@media (orientation:portrait){
  .menu-grid{padding:9vh 3vw 25vh;gap:2.4vmin}
  .game-btn{width:28vw;height:28vw;max-height:15vh;max-width:15vh}
  .game-btn span{font-size:3.2vmin}
  .menu-child{height:24vh;right:50%;transform:translateX(50%);animation:none}
}

/* drag ghost */
.dragging{position:fixed!important;z-index:1000!important;pointer-events:none!important;transform:translate(-50%,-50%) scale(1.15)!important;filter:drop-shadow(0 2vmin 2vmin rgba(0,0,0,.3));transition:none!important;animation:none!important}

/* reward */
.reward{position:fixed;inset:0;z-index:900;display:none;background:rgba(255,255,255,.35)}
.reward.show{display:block}
#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:950;pointer-events:none}
.reward-child{position:absolute;left:50%;bottom:0;height:78vh;transform:translateX(-50%);animation:jump-in .7s}
@keyframes jump-in{0%{transform:translate(-50%,100%)}60%{transform:translate(-50%,-6%)}100%{transform:translate(-50%,0)}}
.reward-btns{position:absolute;left:0;right:0;bottom:6vh;display:flex;justify-content:space-between;padding:0 8vw;pointer-events:none}
.reward-btns button{pointer-events:auto;animation:pop-in .5s .8s backwards}

.game-btn:nth-child(6){animation-delay:0.30s}
.game-btn:nth-child(7){animation-delay:0.35s}
.game-btn:nth-child(8){animation-delay:0.40s}
.game-btn:nth-child(9){animation-delay:0.45s}

/* ---------- v2: life ---------- */
#wipe{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:890}
#wipe.on{animation:wipe .4s}
@keyframes wipe{from{opacity:.85}}
/* @keyframes screen-in -> перенесён в games/dress/dress.css (им пользуется dress) */
@keyframes floaty{50%{translate:0 -1.2vmin}}
@keyframes breathe{50%{scale:1.02 .97}}
.pt{position:fixed;z-index:980;pointer-events:none;border-radius:50%}
.pt.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%)}
.pt.txt{background:none!important;font-weight:900;line-height:1;text-shadow:0 .3vmin .3vmin rgba(0,0,0,.2)}
.amb{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cloud{position:absolute;left:0;animation:drift 60s linear infinite}
.cloud svg{width:100%;display:block}
@keyframes drift{from{translate:-35vmin 0}to{translate:105vw 0}}
.fly{position:absolute;left:0;top:0;width:7vmin;transition:transform 3.6s ease-in-out}
.fly svg{width:100%;display:block;animation:bob 1.1s ease-in-out infinite}
.fly .wing{transform-box:fill-box;transform-origin:100% 50%;animation:flap .28s ease-in-out infinite alternate}
.fly .wing.r{transform-origin:0 50%}
@keyframes flap{to{transform:scaleX(.35)}}
.bird{position:absolute;left:0;width:7vmin;animation:drift 20s linear infinite}
.bird svg{width:100%;display:block;animation:flapb .5s ease-in-out infinite alternate}
@keyframes flapb{to{scale:1 .45}}
.bgm-btn{right:calc(2vmin + env(safe-area-inset-right));top:calc(2vmin + env(safe-area-inset-top));--b1:#b89cff;--b2:#8a63f0;--b3:#5d3fb8}
.bgm-btn .bgm-x{display:none}
.bgm-btn.off{filter:grayscale(.7)}
.bgm-btn.off .bgm-x{display:block}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:960}
#flash.on{animation:flash .4s}
@keyframes flash{15%{opacity:1}}

/* ---------- v3: levels, real outfits, letters, numbers ---------- */
.lvl-badge{position:fixed;left:calc(17vmin + env(safe-area-inset-left));top:calc(3vmin + env(safe-area-inset-top));height:10vmin;padding:0 2.6vmin 0 1.4vmin;border-radius:5vmin;background:#fff;box-shadow:0 .6vmin 0 #e0a800,0 1vmin 1.6vmin rgba(0,0,0,.2);z-index:50;display:none;align-items:center;gap:1vmin;font-weight:900;font-size:5.4vmin;color:#5a3b1f;pointer-events:none}
.lvl-badge.show{display:flex}
.lvl-badge svg,.stars-total svg{width:7vmin;height:7vmin}
.stars-total{position:absolute;left:calc(2vmin + env(safe-area-inset-left));top:calc(2vmin + env(safe-area-inset-top));height:11vmin;padding:0 3vmin 0 1.6vmin;border-radius:6vmin;background:#fff;box-shadow:0 .6vmin 0 #e0a800,0 1vmin 1.6vmin rgba(0,0,0,.2);z-index:5;display:flex;align-items:center;gap:1.2vmin;font-weight:900;font-size:6vmin;color:#5a3b1f}
.game-btn{position:relative;width:21vmin;height:21vmin}
.game-btn svg{width:86%;height:60%}
.game-btn i{position:absolute;right:-1.6vmin;top:-1.6vmin;min-width:7vmin;height:7vmin;padding:0 1.4vmin;border-radius:4vmin;background:#ffd23f;border:.6vmin solid #fff;box-shadow:0 .4vmin .8vmin rgba(0,0,0,.25);font-style:normal;font-weight:900;font-size:3.6vmin;color:#5a3b1f;display:flex;align-items:center;justify-content:center}
.game-btn:nth-child(10){animation-delay:.5s}
.game-btn:nth-child(11){animation-delay:.55s}
@media (orientation:portrait){
  .menu-grid{padding:11vh 3vw 19vh;gap:2.2vmin}
  .game-btn{width:28vw;height:28vw;max-height:13.4vh;max-width:13.4vh}
  .menu-child{height:18vh}
}
.tile{width:26vmin;height:26vmin;border-radius:6vmin;background:#fff;border:1.4vmin solid var(--c);box-shadow:0 1.4vmin 0 var(--c),0 2vmin 3vmin rgba(0,0,0,.22);color:var(--c);font-weight:900;font-size:19vmin;line-height:1;display:flex;align-items:center;justify-content:center;font-family:"Arial Black","Arial Rounded MT Bold","Nunito",Arial,sans-serif;animation:pop-in .45s backwards;touch-action:none;transition:opacity .3s}
.tile.big{width:44vmin;height:44vmin;font-size:33vmin;border-radius:9vmin}
.tile.good{animation:goodt .6s;box-shadow:0 0 0 1.4vmin #6be06b,0 2vmin 3vmin rgba(0,0,0,.22)}
@keyframes goodt{50%{scale:1.2}}
.tile.bad{animation:shake .45s}
.tile.fade{opacity:.25}
.tiles{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4vmin}
.ask-btn{position:absolute!important;left:50%;top:calc(2vmin + env(safe-area-inset-top));margin-left:-8vmin;width:16vmin;height:16vmin;max-width:none;max-height:none;--b1:#7cc8f5;--b2:#3fa3ff;--b3:#1f78d1}
.field{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2.4vmin;max-width:150vmin}
.thing{position:relative;width:20vmin;height:20vmin;animation:pop-in .4s backwards;touch-action:none}
.thing img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 .8vmin .6vmin rgba(0,0,0,.25))}
.thing b{position:absolute;right:-1vmin;top:-1vmin;width:9vmin;height:9vmin;border-radius:50%;background:#35b955;color:#fff;font-weight:900;font-size:6vmin;display:flex;align-items:center;justify-content:center;border:.7vmin solid #fff;animation:pop-in .3s}
@media (orientation:portrait){.field{max-width:96vw}
  .thing{width:21vmin;height:21vmin}
  .tile{width:27vmin;height:27vmin}
}
.field.many .thing{width:15vmin;height:15vmin}
@media (orientation:portrait){
  .lvl-badge{left:calc(2vmin + env(safe-area-inset-left));top:calc(17vmin + env(safe-area-inset-top))}
  }
@media (orientation:portrait){.ask-btn{top:calc(17vmin + env(safe-area-inset-top))}
}

/* ---------- title screen with the whole family ---------- */
#s-start{background:#f6d7a8;overflow:hidden}
.splash-back{position:absolute;inset:-10%;background:center/cover;filter:blur(24px) saturate(1.2);opacity:.9}
.splash{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:kenburns 22s ease-in-out infinite alternate;transform-origin:50% 0}
@media (orientation:portrait){.splash{object-fit:cover;object-position:50% 0}}
@keyframes kenburns{from{scale:1}to{scale:1.07}}
.splash-shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 55%,rgba(255,190,120,.35) 75%,rgba(120,60,20,.55));pointer-events:none}
#s-start .start-title{top:auto;bottom:calc(29vmin + 8vh + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;line-height:.9;font-size:inherit;text-shadow:none;-webkit-text-stroke:0;animation:titlein 1s cubic-bezier(.3,1.6,.5,1) backwards}
#s-start .start-title span,#s-start .start-title b{font-weight:900;color:#fff;paint-order:stroke fill}
#s-start .start-title span{font-size:15vmin;-webkit-text-stroke:2vmin #ff6a3d;text-shadow:0 1.4vmin 0 #d94a22,0 2.4vmin 3vmin rgba(0,0,0,.3);rotate:-4deg}
#s-start .start-title b{font-size:17vmin;-webkit-text-stroke:2vmin #3f8fe8;text-shadow:0 1.4vmin 0 #2a6cc0,0 2.4vmin 3vmin rgba(0,0,0,.3);rotate:3deg;margin-top:-1vmin}
@keyframes titlein{from{scale:.2;opacity:0}}
#s-start .big-play{top:auto;bottom:calc(5vh + env(safe-area-inset-bottom));margin:0 0 0 -13vmin;width:26vmin;height:26vmin;box-shadow:0 1.4vmin 0 #157a33,0 0 0 1.6vmin rgba(255,255,255,.55),0 2vmin 4vmin rgba(0,0,0,.35)}
@media (orientation:landscape){#s-start .big-play{width:20vmin;height:20vmin;margin-left:-10vmin;left:auto;right:6vw;bottom:8vh}#s-start .start-title{bottom:auto;top:8vh;left:4vw;right:auto}#s-start .start-title span{font-size:12vmin}#s-start .start-title b{font-size:13vmin}}
.sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sparkles i{position:absolute;width:3vmin;height:3vmin;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0;scale:.3}50%{opacity:1;scale:1}}

/* ---------- menu: every game is played with someone from the family ---------- */
#s-menu .bg{object-position:50% 0}
#s-menu .menu-grid{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:2.6vmin;padding:calc(15vmin + env(safe-area-inset-top)) 3vw calc(5vh + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;--cw:min(29vw,14.6vh)}
#s-menu .game-btn{width:var(--cw);flex:none;height:auto;max-width:none;max-height:none;aspect-ratio:auto;padding:1.4vmin 1vmin 1.6vmin;justify-content:flex-start;gap:.4vmin;border-radius:5vmin}
#s-menu .game-btn > img,#s-menu .game-btn > svg{width:78%;height:auto;aspect-ratio:1;margin:1vmin 0}
.gb-who{position:relative;display:block;width:82%;aspect-ratio:1;margin-top:.6vmin}
.gb-who .pic{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fff7e0,var(--c));border:max(2px,.6vmin) solid #fff;box-shadow:0 .6vmin 1.4vmin rgba(0,0,0,.2)}
.gb-who .pic img{width:100%;height:118%;object-fit:cover;object-position:50% 0}
.gb-who .ico{position:absolute;right:-9%;bottom:-6%;width:46%;aspect-ratio:1;border-radius:50%;background:#fff;border:max(2px,.5vmin) solid var(--c);display:flex;align-items:center;justify-content:center;box-shadow:0 .4vmin 1vmin rgba(0,0,0,.25)}
.gb-who .ico img,.gb-who .ico svg{width:78%;height:78%;object-fit:contain;margin:0}
.gb-who.all .pic{width:52%;height:52%;inset:auto}
.gb-who.all .pic.s1{left:0;top:4%}   /* «всей семьёй»: s3 — ребёнок в середине, s1 s2 s4 s5 — родные (core/menu.js, 1–4 лица) */
.gb-who.all .pic.s2{right:0;top:4%}
.gb-who.all .pic.s3{left:24%;top:0;z-index:2;width:56%;height:56%}
.gb-who.all .pic.s4{left:0;bottom:2%}
.gb-who.all .pic.s5{right:0;bottom:2%}
#s-menu .game-btn span{font-size:min(3.6vmin,2.1vh);margin-top:1vmin}
#s-menu .game-btn small{font-size:min(3vmin,1.75vh);font-weight:800;color:var(--c);filter:brightness(.8);line-height:1;white-space:nowrap}
@media (orientation:landscape){#s-menu .menu-grid{--cw:min(12.6vw,28vh);padding-left:calc(4vw + env(safe-area-inset-left));padding-right:calc(14vmin + env(safe-area-inset-right))}}
/* title screen: wide picture for computers, tablets and phones held sideways */
@media (orientation:landscape){.splash{object-fit:cover;object-position:50% 0}.splash-back{background-image:url(../img/splash_wide_tiny.jpg) !important}}
@media (orientation:landscape) and (min-aspect-ratio:17/10){.splash{object-position:50% 0}}

/* ---------- helper (shared: makeHelper in app.js; taken as is from the feed v4 draft raw8/feed_draft.css) ---------- */
/* helper: any family photo works — only the whole portrait moves */
.helper{position:absolute;z-index:6;left:calc(2.4vmin + env(safe-area-inset-left));bottom:calc(3vh + env(safe-area-inset-bottom));width:22vmin;height:22vmin;touch-action:none}
.hp-pic{width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fff7e0,#ffc9a0);border:.9vmin solid #fff;box-shadow:0 .8vmin 0 #e89a5c,0 1.2vmin 2.4vmin rgba(0,0,0,.25);animation:hp-idle 3.4s ease-in-out infinite;transform-origin:50% 90%;transition:box-shadow .3s}
.hp-pic img{width:100%;height:118%;object-fit:cover;object-position:50% 0;display:block}
@keyframes hp-idle{50%{translate:0 -.9vmin;rotate:-1.5deg}}
.helper.talk .hp-pic{animation:hp-talk .44s ease-in-out infinite alternate;box-shadow:0 .8vmin 0 #e89a5c,0 0 0 1.3vmin rgba(255,214,90,.75),0 1.2vmin 2.4vmin rgba(0,0,0,.25)}
@keyframes hp-talk{from{rotate:-5deg;scale:1}to{rotate:5deg;scale:1.07;translate:0 -1.2vmin}}
.hp-bub{position:absolute;left:50%;translate:-50% 0;bottom:calc(100% + 3.6vmin);display:none;flex-direction:column;align-items:center;gap:.8vmin;padding:1.6vmin;background:#fff;border-radius:5vmin;box-shadow:0 .8vmin 0 rgba(0,0,0,.1),0 1vmin 2.4vmin rgba(0,0,0,.22);transform-origin:50% 100%;pointer-events:none}
.helper.open .hp-bub{display:flex;animation:hp-pop .42s cubic-bezier(.3,1.6,.5,1)}
.hp-bub:before,.hp-bub:after{content:"";position:absolute;background:#fff;border-radius:50%}
.hp-bub:before{left:42%;bottom:-2.8vmin;width:4.2vmin;height:4.2vmin}
.hp-bub:after{left:34%;bottom:-5.2vmin;width:2.4vmin;height:2.4vmin}
.hp-it{width:12vmin;height:12vmin;display:flex;align-items:center;justify-content:center;animation:floaty 2.2s ease-in-out infinite}
.hp-it:nth-child(2){animation-delay:-.7s}
.hp-it:nth-child(3){animation-delay:-1.4s}
.hp-it.sm{width:6.5vmin;height:6.5vmin}
.hp-it img,.hp-it svg{width:100%;height:100%;object-fit:contain}
@keyframes hp-pop{from{scale:.2;opacity:0}}
@media (orientation:portrait){
  .helper{left:calc(4vw + env(safe-area-inset-left));bottom:calc(25vh + env(safe-area-inset-bottom));width:20vmin;height:20vmin}
  .hp-bub{left:calc(100% + 4.4vmin);translate:none;bottom:0;flex-direction:row;transform-origin:0 50%}
  .hp-bub:before{left:-2.8vmin;bottom:5vmin}
  .hp-bub:after{left:-5.2vmin;bottom:3vmin}
  .hp-it{width:13vmin;height:13vmin}
}
/* reward: one big "next" arrow in the middle (children tapped "home" on the right), small home in the corner */
.reward-btns{display:block;padding:0}
#reward-again{position:absolute;left:50%;bottom:0;margin-left:calc(min(30vmin,190px) / -2);width:min(30vmin,190px);height:min(30vmin,190px);max-width:none;max-height:none;animation:pop-in .5s .8s backwards,next-pulse 1.4s 1.4s ease-in-out infinite}
#reward-again svg{width:62%;height:62%}
#reward-home{position:absolute;left:calc(4vw + env(safe-area-inset-left));bottom:0;width:min(13vmin,80px);height:min(13vmin,80px);opacity:.9}
@keyframes next-pulse{0%,100%{scale:1}50%{scale:1.1}}
.reward{background:rgba(255,248,235,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#reward-again{width:min(34vmin,200px);height:min(34vmin,200px);margin-left:calc(min(34vmin,200px) / -2)}
/* title screen: a glossy 3D play button (no translucent white ring) */
#s-start .big-play{background:radial-gradient(circle at 50% 38%,#8cf58a 0%,#3fcf5a 45%,#1fa346 78%,#16843a 100%);box-shadow:inset 0 -1.6vmin 2.4vmin rgba(0,60,20,.45),inset 0 1.2vmin 2vmin rgba(255,255,255,.45),0 1.4vmin 0 #137033,0 2.6vmin 4vmin rgba(0,0,0,.35);overflow:hidden}
#s-start .big-play::before{content:"";position:absolute;left:16%;top:7%;width:68%;height:40%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none}
#s-start .big-play svg{position:relative;filter:drop-shadow(0 .5vmin .6vmin rgba(0,70,25,.45))}
/* live butterflies over the title picture */
.butterflies{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.bf{position:absolute;left:0;top:0;width:var(--s);height:var(--s);will-change:transform}
.bf svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 .6vmin .5vmin rgba(0,0,0,.18))}
.bf .wl,.bf .wr{transform-box:view-box;transform-origin:50px 50px;animation:bf-flap var(--f) ease-in-out infinite alternate}
.bf .wr{animation-name:bf-flap-r}
.bf.glide .wl,.bf.glide .wr{animation-duration:calc(var(--f) * 5)}
@keyframes bf-flap{from{transform:scaleX(1)}to{transform:scaleX(.18)}}
@keyframes bf-flap-r{from{transform:scaleX(1)}to{transform:scaleX(.18)}}
/* ---------- fam3d helpers: a 3D figure in full height instead of the round portrait (makeHelper, .helper.fam3d) ---------- */
/* size = % of the screen's height (not vh: Safari), the box is square like the 560x560 pictures; only the body (.hp-hit) takes taps */
#app .helper.fam3d{width:auto;height:var(--hp-h,30%);aspect-ratio:1;pointer-events:none;top:auto;right:auto;left:calc(var(--hp-x,2.5vmin) + env(safe-area-inset-left));bottom:calc(var(--hp-y,1%) + env(safe-area-inset-bottom));translate:var(--hp-tx,-15%) 0}
.helper.fam3d .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%}
.hp-hit{position:absolute;left:30%;right:30%;top:3%;bottom:2%;pointer-events:auto;border-radius:40% 40% 20% 20%}
.hp-sh{position:absolute;left:50%;bottom:.6%;width:46%;height:7%;translate:-50% 0;border-radius:50%;background:radial-gradient(rgba(30,40,20,.42),rgba(30,40,20,0) 70%);transition:scale .32s ease-out,opacity .32s}
.hp-sh.up{scale:.55;opacity:.6}
.hp-sway,.hp-mv,.hp-body{position:absolute;inset:0;transform-origin:50% 96%}
.hp-sway{animation:hp3-sway 4.8s ease-in-out infinite}
.hp-body{animation:hp3-breathe 2.6s ease-in-out infinite}
.hp-body img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .16s;pointer-events:none;-webkit-user-drag:none}
.hp-body img.on{opacity:1}
@keyframes hp3-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,.988)}}
@keyframes hp3-sway{0%,100%{transform:rotate(-.9deg)}50%{transform:rotate(.9deg)}}
.helper.fam3d.talk .hp-sway{animation:hp3-talk .5s ease-in-out infinite alternate}
@keyframes hp3-talk{from{transform:rotate(-2deg) translateY(0)}to{transform:rotate(2deg) translateY(-1.2%)}}
.hp-mv.pop{animation:hp3-pop .42s cubic-bezier(.3,1.7,.5,1)}
@keyframes hp3-pop{0%{transform:scale(1.08,.88)}55%{transform:scale(.95,1.07)}100%{transform:scale(1,1)}}
.hp-mv.jump{animation:hp3-jump .9s cubic-bezier(.3,.7,.4,1)}
@keyframes hp3-jump{0%{transform:translateY(0) scale(1.1,.85)}15%{transform:translateY(0) scale(.92,1.1)}50%{transform:translateY(-20%) scale(1,1)}82%{transform:translateY(0) scale(1.08,.9)}100%{transform:translateY(0) scale(1,1)}}
/* the bubble talks from beside the head */
#app .helper.fam3d .hp-bub{left:76%;right:auto;translate:none;top:2%;bottom:auto;flex-direction:row;transform-origin:0 30%}
#app .helper.fam3d .hp-bub:before{left:-2.6vmin;right:auto;top:4vmin;bottom:auto}
#app .helper.fam3d .hp-bub:after{left:-4.6vmin;right:auto;top:7.5vmin;bottom:auto}
#app .helper.fam3d.hp-r .hp-bub{left:auto;right:80%;transform-origin:100% 30%}
#app .helper.fam3d.hp-r .hp-bub:before{left:auto;right:-2.6vmin}
#app .helper.fam3d.hp-r .hp-bub:after{left:auto;right:-4.6vmin}
/* ---------- end fam3d helpers ---------- */

@keyframes happy{30%{scale:1 .85}55%{translate:0 -6vh;scale:1 1.05}80%{translate:0 0;scale:1 .95}}

@keyframes shake{20%,60%{rotate:-8deg}40%,80%{rotate:8deg}}

@keyframes chomp{50%{scale:1.12 .9}}

@keyframes dance{0%{rotate:-7deg;translate:-3% 0}50%{translate:0 -4%}100%{rotate:7deg;translate:3% 0}}

@keyframes pola-in{from{scale:1.8;opacity:0}}

@keyframes dance2{from{rotate:-5deg}to{rotate:5deg}}

@keyframes wob{0%,100%{rotate:-6deg;translate:0 0}50%{rotate:6deg;translate:0 -1vmin}}
/* for parents: install hint on the title screen */
#a2hs{position:absolute;left:50%;top:calc(2vmin + env(safe-area-inset-top));translate:-50% 0;width:min(92vw,460px);z-index:60;background:rgba(255,255,255,.96);border-radius:18px;padding:12px 40px 12px 14px;box-shadow:0 6px 20px rgba(0,0,0,.25);font:500 14px/1.35 system-ui,-apple-system,sans-serif;color:#333;display:flex;flex-direction:column;gap:6px;animation:a2in .5s cubic-bezier(.3,1.4,.5,1)}
#a2hs b{font-size:15px;color:#e0559c}
#a2hs .a2-ic{width:18px;height:18px;vertical-align:-4px}
#a2hs .a2-steps{color:#555}
#a2hs .a2-x{position:absolute;right:6px;top:4px;width:32px;height:32px;font-size:24px;line-height:1;color:#999}
#a2hs .a2-go{align-self:flex-start;background:linear-gradient(#7ddf7a,#35b955);color:#fff;font-weight:800;border-radius:12px;padding:8px 14px;box-shadow:0 3px 0 #1f8038}
@keyframes a2in{from{opacity:0;translate:-50% -20px}}

.splash-alt{transition:opacity 1.2s ease;pointer-events:none}

/* 05.10 menu cards: a big picture of the game, the relative small in the corner (core/menu.js) */
#s-menu .gb-art{display:block;width:86%;aspect-ratio:1;margin-top:.2vmin;flex:none}
#s-menu .gb-art img,#s-menu .gb-art svg{width:100%;height:100%;object-fit:contain;margin:0;filter:drop-shadow(0 .5vmin .6vmin rgba(0,0,0,.18))}
#s-menu .gb-who{position:absolute;left:-7%;top:-7%;width:32%;margin:0;z-index:2}
#s-menu .gb-who.all{width:42%}
#s-menu .gb-who .pic{border-width:max(2px,.45vmin)}
/* «Слушаем» (core/voice.js vListen): пока звучит инструкция — помощник «говорит», поле чуть приглушено, тап — ушко у пальца */
.vl-veil{position:absolute;inset:0;z-index:45;pointer-events:none;background:rgba(255,250,235,.12);opacity:0;transition:opacity .25s}
.screen.vlisten>.vl-veil{opacity:1}
#app .screen.vlisten .helper.fam3d .hp-sway{animation:hp3-talk .5s ease-in-out infinite alternate}
#app .screen.vlisten .helper:not(.fam3d) .hp-pic{animation:hp-talk .44s ease-in-out infinite alternate}
.vl-ear{position:fixed;z-index:1100;pointer-events:none;font-size:7vmin;line-height:1;translate:-50% -110%;width:11vmin;height:11vmin;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 .5vmin 1.5vmin rgba(0,0,0,.2);animation:vl-ear .9s ease-out forwards}
@keyframes vl-ear{0%{opacity:0;scale:.4}20%{opacity:1;scale:1.1}35%{scale:1}75%{opacity:1}100%{opacity:0;scale:.9;translate:-50% -150%}}
.vl-nod{animation:vl-nod .5s ease-in-out!important}
@keyframes vl-nod{0%,100%{scale:1}40%{scale:1.06 .96}70%{scale:.98 1.03}}
/* «Показ → в руки» (core/voice.js presentItem/vHint, 10.10): копия нужного предмета крупно у говорящего, место предмета пустое; подсказка — подскок со свечением */
.vp-away{visibility:hidden!important}
.vp-back{opacity:0!important}
.vp-clone{cursor:pointer;touch-action:none}
.vp-clone.vp-on{animation:vp-sway 1.2s ease-in-out 3!important;filter:drop-shadow(0 0 1.2vmin #fff6a8) drop-shadow(0 0 2.6vmin rgba(255,214,90,.85)) drop-shadow(0 .8vmin 1vmin rgba(0,0,0,.25))!important}
@keyframes vp-sway{0%,100%{rotate:0deg}25%{rotate:-6deg}75%{rotate:6deg}}
.vp-pad{position:fixed;z-index:1059;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,248,200,.75) 55%,rgba(255,236,150,0));animation:vp-pad .35s ease-out both,vp-padb 1.4s ease-in-out .35s infinite alternate}
.vp-pad.out{animation:vp-padout .3s ease-in forwards}
@keyframes vp-pad{from{opacity:0;scale:.3}}
@keyframes vp-padb{to{scale:1.06}}
@keyframes vp-padout{to{opacity:0;scale:.5}}
.vp-glow{filter:drop-shadow(0 0 1vmin #fff6a8) drop-shadow(0 0 2.2vmin rgba(255,206,70,.9))!important}
/* /«Слушаем» */

/* ---------- «Начать заново» (core/restart.js, 07.10.2026): круглая кнопка рядом с «домой» — альбомная: под ней, портрет: справа (значок уровня — на другом месте);
   подтверждение картинками ✗ / ✓ там, где пропадёт труд ребёнка; волна от кнопки при перезапуске. Своё место игры — #rs-btn[data-g="<id>"] ниже. ---------- */
.rs-btn{display:none;--b1:#6fe3d6;--b2:#1fb5a6;--b3:#12857a}
.rs-btn.show{display:flex}
.rs-btn svg{width:58%;height:58%}
.rs-btn.rs-spin svg{animation:rs-spin .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes rs-spin{from{rotate:-360deg}}
@media (orientation:landscape){.rs-btn{left:calc(2vmin + env(safe-area-inset-left));top:calc(17vmin + env(safe-area-inset-top))}}
@media (orientation:portrait){.rs-btn{left:calc(17vmin + env(safe-area-inset-left));top:calc(2vmin + env(safe-area-inset-top))}}
.rs-wipe{position:fixed;left:var(--x,0);top:var(--y,0);width:20vmin;height:20vmin;margin:-10vmin 0 0 -10vmin;border-radius:50%;z-index:880;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,0) 40%,rgba(255,255,255,.75) 62%,rgba(111,227,214,.5) 72%,rgba(255,255,255,0) 74%)}
.rs-wipe.go{animation:rs-wipe .65s ease-out}
@keyframes rs-wipe{0%{opacity:1;scale:.3}100%{opacity:0;scale:9}}
.rs-ask{position:fixed;inset:0;z-index:890;background:rgba(40,60,70,.45);display:flex;align-items:center;justify-content:center}
.rs-ask[hidden]{display:none}
.rs-ask-box{background:#fff;border-radius:6vmin;padding:4vmin 5vmin 5vmin;box-shadow:0 2vmin 5vmin rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;gap:3vmin}
.rs-ask-box.rs-pop{animation:pop-in .35s}
.rs-ask-ico{width:16vmin;height:16vmin;border-radius:50%;background:linear-gradient(#6fe3d6,#1fb5a6);box-shadow:0 .8vmin 0 #12857a;display:flex;align-items:center;justify-content:center}
.rs-ask-ico svg{width:62%;height:62%;animation:rs-spin 1.6s ease-in-out infinite}
.rs-ask-btns{display:flex;gap:9vmin}
.rs-ask .round-btn.big{width:22vmin;height:22vmin;max-width:150px;max-height:150px}
/* своё место кнопки в игре: «Наряди» — где была её «Снять всё» (справа вверху), «Раскраски» — в ряду своих кнопок, где была её «заново»;
   «Музыка» в портрете — под «домой» (справа от «домой» там значок уровня и кнопки режимов) */
#rs-btn[data-g="dress"]{left:auto;right:calc(2vmin + env(safe-area-inset-right));top:calc(2vmin + env(safe-area-inset-top))}
#rs-btn[data-g="color"]{left:auto;top:calc(1vmin + env(safe-area-inset-top));right:calc(2.5vmin + 3 * min(10.4vmin, 5.6vw) + 3 * 1.3vmin + env(safe-area-inset-right))}
@media (orientation:portrait){
  #rs-btn[data-g="color"]{top:calc(1.3vmin + env(safe-area-inset-top));right:calc(50.1vmin + env(safe-area-inset-right))}
  #rs-btn[data-g="music"]{left:calc(2vmin + env(safe-area-inset-left));top:calc(17vmin + env(safe-area-inset-top))}
}