/* UI v2 — экраны дворов по макету Figma (кадры «Дефолт двор», «Гол двор», «Взял двор», 2026-11-07).
   Грузится последним: переопределяет старые правила шапки, баблов, подсказки и шторки исхода. */
:root{--ink:#4A2036;--cream:#FFF8F3;--coral:#FF7864}

/* ---- шапка: плашка места + плашка счёта ---- */
.hud{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));top:calc(var(--top) + 32px);height:50px;gap:10px;align-items:flex-start}
.hud .chip{height:50px;box-sizing:border-box;gap:12px;padding:8px 24px 10px 16px;border-radius:26px;background:var(--cream);box-shadow:0 2.25px 11.3px rgba(55,10,40,.08);color:var(--ink);font:400 13px/1.2 var(--sans);letter-spacing:.015em;text-align:left}
.hud .chip svg{flex:none;width:18px;height:24px}
.hud .chip span{overflow:visible;text-overflow:clip;white-space:nowrap}
.hudr{height:50px;box-sizing:border-box;gap:0;padding:0 12px 0 16px;border-radius:26px;background:var(--cream);box-shadow:0 2.25px 11.5px rgba(55,10,40,.08)}
.hud .hudr .balls{height:auto;gap:6px;padding:0 2px 0 0;background:none;box-shadow:none;border-radius:0}
.hud .hudr .bl{width:13.6px;height:13.6px;border-radius:50%;background:var(--coral)!important;box-shadow:inset 0 0 0 1px #D7877C!important;opacity:1;filter:none}
.hud .hudr .bl svg{display:none}
.hud .hudr .bl::after{display:none!important}
.hud .hudr .bl.cur{background:var(--coral)!important;box-shadow:inset 0 0 0 1px #D7877C!important}
.hud .hudr .bl.fut{opacity:1;filter:none;background:#fff!important;box-shadow:inset 0 0 0 1px #EFEAE6!important}
.hud .hudr .bl.miss{opacity:1;background:var(--ink)!important;box-shadow:inset 0 0 0 1px #370A28!important}
.hud .hudr .snd.in{width:29px;height:29px;margin:0 0 0 17.5px;color:var(--ink);border-radius:0}
.hud .hudr .snd.in::before{left:-9.5px;top:4.5px;bottom:4.5px;width:1.5px;background:#E6DDD8}
.hud .hudr .snd.in svg{width:23px;height:23px}
.hud .hudr .snd .w,.hud .hudr .snd .x{stroke:var(--coral)}
.capt{display:none}

/* ---- бабл мамы в сцене ---- */
.bub{max-width:228px;min-height:46px;box-sizing:border-box;padding:12px 16px;border-radius:22px;background:#fff;box-shadow:none;color:var(--ink);font:400 15px/1.28 var(--sans);letter-spacing:.015em;text-align:left}
.bub::after{right:24px;bottom:-5px;width:18px;height:18px;background:#fff;border-radius:0 0 3px 0;transform:rotate(45deg)}

/* ---- подсказка внизу ---- */
.act{bottom:calc(32px + env(safe-area-inset-bottom,0px))}
.act .pill.hint{min-height:52px;padding:14px 24px;box-sizing:border-box;border-radius:34px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:none;color:var(--ink);font:400 15px/1.1 var(--sans);letter-spacing:0;text-transform:none;text-align:center;max-width:340px}
.act .pill.hint.late{background:rgba(255,217,208,.7)}
.act .chs{gap:8px;max-width:none;width:100%;padding:0 12px;box-sizing:border-box}
.act .chs .btn{flex:1 1 auto;height:52px;font:400 18px/1.1 var(--sans);border-radius:999px;box-shadow:none;background:#fff5f3;color:var(--ink);filter:drop-shadow(0 2px 10px rgba(55,10,40,.08))}
.act .chs .btn.coral{background:var(--coral);color:#fff;filter:none}
.act .chs .btn:active{transform:none;opacity:.85}

/* ---- штамп «Гол!/Взял» в сцене убран: он теперь в шторке ---- */
.big{display:none!important}

/* ---- шторка исхода ---- */
.out{background:none}
.out.on{pointer-events:auto}
.out-in{left:50%;right:auto;bottom:calc(32px + env(safe-area-inset-bottom,0px));width:min(358px,calc(100% - 32px));transform:translateX(-50%);padding:0;gap:0;background:none;align-items:stretch}
.out-h{margin:0 0 35px;font:500 70px/97.2px var(--sans);color:var(--coral);text-align:center;text-shadow:none;transform:none;letter-spacing:0}
.out-h.miss{color:var(--ink)}
.out-mom{position:relative;display:block;width:100%;max-width:none;height:126px;z-index:1}
.out-mom .av{position:absolute;left:-12px;top:-7px;width:141px;height:140px;transform-origin:50% 50%;border-radius:0;background:none;box-shadow:none;overflow:visible;transform:scaleX(-1)}
.out-mom .av{clip-path:inset(-200px -200px 0 -200px)}
.out-mom .av svg{display:block;width:100%;height:100%;overflow:visible}
.out-say{position:absolute;left:133px;top:13px;flex:none;width:max-content;max-width:176px;box-sizing:border-box;background:#fff;border-radius:20px 20px 20px 0;padding:10px 16px 12px;font:400 15px/1.2 var(--sans);color:var(--ink);letter-spacing:0;box-shadow:none}
.out-say::after{content:"";position:absolute;left:14px;bottom:-8px;width:16px;height:9px;background:#fff;clip-path:polygon(0 0,100% 0,22% 100%)}
.out-card{position:relative;z-index:2;width:100%;max-width:none;box-sizing:border-box;margin:0;background:#FFF6F0;border-radius:30px;padding:16px 24px 24px;box-shadow:none}
.out-yr{display:none}
.out-st{font:400 17px/1.35 var(--sans);color:var(--ink);text-align:left}
.out .big-btn.btn.coral{width:100%;max-width:none;height:52px;margin-top:32px;background:var(--coral);box-shadow:none;border-radius:999px;color:#fff;font:400 18px/1.1 var(--sans)}
.out .big-btn.btn.coral:active{transform:none;opacity:.85}

/* ===== v2 экраны: старт, правила, финал, шэр, друг, переход, открытка двора (по макету Figma) ===== */
body:not([data-scr="game"]) .snd.solo{display:none!important}
.scr.u-scr{padding:0;display:none;animation:none;overflow:hidden;text-align:center;background:#FEE4DE;color:#4A2036;font-family:var(--sans)}
.scr.u-scr.on{display:block}
.scr.u-scr::after{display:none}
.u-scr *{box-sizing:border-box}
.ulogo{display:block;width:100%;height:auto;color:#FF7864}
.ub{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border:0;border-radius:999px;background:#FF7864;color:#fff;font:400 18px/1 var(--sans);padding:0 10px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s ease;box-shadow:none}
.ub:active{transform:scale(.98)}
.ub.light{background:#FFF5F3;color:#4A2036}
.ub .ic{width:22px;height:22px;flex:none}
.ub .chev{width:18px;height:18px;flex:none}
.u-foot{position:absolute;left:0;right:0;bottom:0;padding:24px 24px calc(32px + env(safe-area-inset-bottom,0px))}
/* старт */
#sc-start{background:#DCEDFD}
.u-sky{position:absolute;inset:0;background:linear-gradient(180deg,#DCEDFD 0,#DCEDFD calc(100% - 200px),#FEE4DE calc(100% - 200px))}
.u-sky::before{content:"";position:absolute;left:0;right:0;bottom:108px;height:512px;background:url(../assets/ui/startbg.webp?v=1) center/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 80px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 80px),transparent 100%)}
.u-logo{position:absolute;top:46px;left:50%;width:240px;margin-left:-120px}
.u-h1{position:absolute;left:0;right:0;top:149px;margin:0;font:400 62px/60.76px var(--flow);color:#4A2036}
.u-ul{position:absolute;left:48px;top:222px;width:295px;height:7px;border-radius:7px;background:linear-gradient(90deg,#FF8A74,#FF7663);transform:rotate(-1deg)}
.u-sub{position:absolute;left:20px;top:262px;width:365px;margin:0;font:400 21px/26.88px var(--sans);color:#4A2036}
.u-ball{position:absolute;left:50%;bottom:146px;width:100px;height:100px;margin-left:-50px;pointer-events:none}

/* правила */
.ob-t{position:absolute;left:0;right:0;top:32px;margin:0;font:400 32px/1.05 var(--sans);color:#4A2036}
.ob-list{position:absolute;left:30px;top:119px;width:330px;display:flex;flex-direction:column;gap:16px}
.ob-c{position:relative;height:135px;border-radius:24px;background:#fff;text-align:left;overflow:visible;display:flex;align-items:center}
.ob-c p{margin:0;padding:0 0 0 40px;width:215px;font:400 17px/1.2 var(--sans);color:#4A2036}
.ob-pic{position:absolute;right:0;top:0;width:107px;height:135px;border-radius:0 24px 24px 0;overflow:hidden;background:#FFF0E6}
.ob-pic img{display:block;width:107px;height:135px}
.ob-n{position:absolute;left:-8px;top:-8px;width:35px;height:35px;border-radius:50%;background:#FF7864;color:#fff;font:500 18px/35px var(--sans);text-align:center;z-index:2}

/* финал */
.fin2 .fin-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:0 24px;background:none;max-width:none;min-height:0;transform:none}
.fn-t{margin:32px 0 0;font:400 32px/1.1 var(--sans);color:#4A2036;text-align:center}
.fn-t b{font-weight:500;color:#FF7864}
.fn-moms{margin-top:26px;width:266px;height:92px;position:relative;z-index:1}
.fn-moms img{display:block;width:100%;height:100%}
.fn-plate{position:relative;z-index:2;margin-top:-5px;width:342px;background:#fff;border-radius:20px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:14px}
.fn-txt{margin:0;padding:0 18px;font:400 18px/1.2 var(--sans);color:#4A2036;min-height:69px;display:flex;align-items:center;justify-content:center}
.fn-txt b{font-weight:500}
.fn-pl{margin:0 0 -6px;font:400 18px/1 var(--sans);color:#4A2036;height:18px}
.fn-code{display:flex;align-items:center;justify-content:center;width:100%;height:51px;margin-top:0;border:0;border-radius:12px;background:#4A2036;color:#fff;font:700 16px/1 var(--sans);text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fn-bt{margin:16px 0 0;font:400 18px/22px var(--sans);color:#4A2036}
.fn-bq{margin:20px -24px 0;width:390px;height:137px;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 calc(50% - 60px);-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.fn-bq::-webkit-scrollbar{display:none}
.fn-bq .bq-c{flex:none;width:120px;height:137px;padding:0;border:0;background:none;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;cursor:pointer;transform:scale(.8);transition:transform .25s ease;-webkit-tap-highlight-color:transparent}
.fn-bq .bq-c.sel{transform:none}
.fn-bq .bq-c img{max-width:100%;max-height:100%;display:block;object-fit:contain}
.fn-price{margin-top:20px;height:24px;font:700 24px/1.1 var(--sans);color:#4A2036;display:flex;gap:14px;justify-content:center;align-items:baseline}
.fn-price s{position:relative;text-decoration:none;color:rgba(74,32,54,.5)}
.fn-price s::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:#FF7864}
.fn-price b{font-weight:700}
.fn-dots{margin-top:20px;display:flex;gap:6px;height:8px}
.fn-dots i{width:8px;height:8px;border-radius:4px;background:rgba(55,10,40,.1);transition:width .2s,background .2s}
.fn-dots i.on{width:22px;background:rgba(55,10,40,.25)}
.fn-bot{margin-top:auto;width:342px;display:flex;flex-direction:column;align-items:center;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.fn-row{display:flex;gap:8px;width:100%;margin-top:8px}
.fn-row .ub{flex:1;min-width:0;gap:6px;padding:0 8px;border-radius:26px}
.fn-again{margin-top:8px;height:32px;padding:0 12px;border:0;background:none;font:400 16px/32px var(--sans);letter-spacing:.08px;color:#4A2036;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fn-note{margin:12px 0 0;width:250px;font:400 12px/1.1 var(--sans);color:#B6655B}
/* шэр и экран друга */
.rs{background:#FEE2DF}
.rs-logo{position:absolute;top:32px;left:50%;width:159px;margin-left:-79.5px}
.rs-h{position:absolute;left:0;right:0;top:77px;margin:0;font:400 32px/1 var(--sans);color:#4A2036}
.rs-cap{position:absolute;left:50%;top:125px;width:181px;margin:0 0 0 -90.5px;font:400 15px/20.25px var(--sans);color:#6C3A58}
.rs-card{position:absolute;left:34px;top:206px;width:322px;height:384px;border-radius:31px;background:linear-gradient(180deg,#FFF6EF 0,#FFE3D8 55%,#FEE4DF 100%);box-shadow:inset 0 0 0 5px #fff;overflow:hidden}
.rs-card::before{content:"";position:absolute;left:0;top:0;right:0;height:206px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.rs-top{position:absolute;top:20px;left:50%;width:110px;margin-left:-55px}
.rs-top .ulogo{color:#4A2036}
.rs-t{position:absolute;left:0;right:0;top:50px;margin:0;font:400 38px/42px var(--flow);color:#4A2036}
.rs-t b{font-weight:400;color:#FF7864;font-size:46px}
.rs-t b i{font-style:normal}
.rs-t i{font-style:normal}
.rs-s{position:absolute;left:36px;right:36px;top:116px;margin:0;font:400 14px/18px var(--sans);color:#4A2036}
.rs-moms{position:absolute;left:13px;top:170px;width:296px;height:107px}
.rs-moms img{display:block;width:100%;height:100%}
.rs-line{position:absolute;left:0;top:112px;width:295px;height:7px;border-radius:7px;background:linear-gradient(90deg,#FF8A74,#FF7663);transform:rotate(-1.2deg)}
.rs-date{position:absolute;left:17px;top:329px;text-align:left;font:700 12.5px/16px var(--sans);letter-spacing:1px;color:#4A2036}
.rs-date span{color:#E4455F}
.rs-pill{position:absolute;left:180px;top:329px;width:125px;height:35px;border-radius:17.3px;background:#FF7864;color:#fff;font:700 13px/35px var(--sans)}
.rs-bot{position:absolute;left:24px;right:24px;bottom:calc(32px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:8px}
.rs-bot .fn-again{margin-top:0}
@media (max-height:799px){.rs-h{top:60px}.rs-cap{top:104px}.rs-card{top:170px}}
/* переход-«кисть» */
.wipe{background:#FF7864 url(../assets/ui/brush.webp?v=1) center/cover no-repeat;transform:translate3d(-105%,0,0);will-change:transform}
.wipe svg,.wipe::after{display:none!important}
.wipe.in{transform:none;transition:transform .32s cubic-bezier(.55,.05,.3,1)}
.wipe.out{transform:translate3d(105%,0,0);transition:transform .42s cubic-bezier(.5,0,.3,1)}
/* открытка двора */
#pcard.pcard{background:#DCEDFD url(../assets/ui/balls.webp?v=1) center/cover no-repeat}
#pcard .pc-n{display:none}
#pcard .pc-in{gap:0;padding:0}
#pcard .pc-t{font:400 54px/54px var(--flow);color:#4A2036;text-wrap:normal}
#pcard .pc-y{margin-top:11px;height:76px;padding:0;font:700 48px/76px var(--sans);color:#F0644F;transform:none;position:relative}
#pcard .pc-y:empty{display:none}
#pcard .pc-y::after{content:"";position:absolute;left:50%;right:auto;width:138px;margin-left:-69px;top:69px;bottom:auto;height:6px;border-radius:5px;background:#FF7663}
/* фиксы v2: перебиваем старые id-правила */
#sc-start.u-scr{background:#DCEDFD}
#sc-onb.u-scr{background:#FEE4DE}
#sc-final.u-scr,#sc-share.u-scr,#sc-friend.u-scr{background:#FEE2DF}
.fn-txt{display:block;min-height:0;padding:0 18px;margin:0}
.fn-bq .bq-c img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
#sc-final #f-order,#sc-friend #fr-try,#sc-share #s-send,#sc-share #s-copy{font:400 18px/1 var(--sans);height:52px;margin:0;max-width:none;width:100%;background:#FF7864;color:#fff;box-shadow:none;border-radius:999px}
#sc-final .fn-row .ub.light,#sc-share #s-copy{background:#FFF5F3;color:#4A2036;font:400 18px/1 var(--sans)}
#sc-final .fn-row .ub{height:52px;font:400 18px/1 var(--sans);box-shadow:none;justify-content:center}
.rs-t{font-size:32px;line-height:42px;top:50px}
.rs-t b{font-size:39px}
#sc-friend .rs-t{font-size:26px;line-height:42px}
#sc-friend .rs-t b{font-size:32px}
.ub .chv{width:20px;height:20px;flex:none}
#sc-final #f-bq.fn-bq{padding:0 calc(50% - 60px);gap:0}
#sc-final #f-bq.fn-bq .bq-c,#sc-final #f-bq.fn-bq .bq-c:nth-child(n){flex:none;width:120px;height:137px;min-width:0;padding:0;margin:0;border:0;border-radius:0;background:none!important;box-shadow:none!important;overflow:visible;display:flex;align-items:center;justify-content:center;transform:scale(.8);opacity:1}
#sc-final #f-bq.fn-bq .bq-c.sel,#sc-final #f-bq.fn-bq .bq-c.sel:nth-child(n){transform:none}
#sc-final #f-bq.fn-bq .bq-c img{width:100%;height:100%;object-fit:contain;filter:none}
#sc-final.fin2 .fin-in{padding:0 24px!important;gap:0!important;justify-content:flex-start!important}
#sc-onb .ob-t{left:30px;right:18px}
#sc-onb .u-foot{padding-left:30px;padding-right:18px}
/* хвосты баблов: точная геометрия из макета (квадрат 18×18, повёрнут, скруглён один угол) */
.bub::after{content:"";position:absolute;left:auto;right:23px;top:calc(100% - 13.2px);bottom:auto;width:18px;height:18px;background:#fff;border-radius:0 0 5px 0;transform-origin:0 0;transform:rotate(45deg);clip-path:none}

.ob-list{transform:scale(var(--obk,1));transform-origin:50% 0}
.rs-card{transform:scale(var(--rsk,1));transform-origin:50% 0}

/* центрирование: контент экранов собран в колонке 390px по центру, на узких экранах масштабируется */
.u-in{position:absolute;top:0;left:50%;width:390px;height:calc(100% / var(--uk,1));margin-left:-195px;transform:scale(var(--uk,1));transform-origin:50% 0}
/* хвост бабла-ответа: гладкий, продолжает левый край, не торчит за нижнюю кромку */
.out-say::after{content:"";position:absolute;left:-7px;right:auto;top:auto;bottom:0;width:16px;height:14px;border-radius:0;clip-path:none;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath fill='%23fff' d='M16 0V14H2.6C.9 14 .1 12.7 1.2 11.6 5.6 7.4 7 3.8 7 0Z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
/* анимация экранов «Гол!» / «Взял» */
@keyframes outBlur{from{-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
@keyframes outFade{from{opacity:0}to{opacity:1}}
@keyframes outPop{0%{opacity:0;transform:translateY(22px) scale(.78)}55%{opacity:1}75%{transform:translateY(-3px) scale(1.05)}100%{opacity:1;transform:none}}
@keyframes outRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes outSay{0%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:scale(1)}}
@keyframes momJump{0%,50%,100%{transform:translateY(0) scale(1,1)}12%{transform:translateY(0) scale(1.03,.96)}28%{transform:translateY(-5px) scale(.99,1.03)}75%{transform:translateY(-5px) scale(.99,1.03)}62%{transform:translateY(0) scale(1.03,.96)}}
@keyframes momHeadWin{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes momArm{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes momBreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.01,1.02)}}
@keyframes momSad{0%,100%{transform:rotate(0)}30%{transform:rotate(-2deg) translateY(1px)}70%{transform:rotate(1.5deg) translateY(1px)}}
.out.on{background:none}
.out.on::before{content:"";position:absolute;inset:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);will-change:opacity;background:linear-gradient(180deg,rgba(255,226,212,0) 0%,rgba(255,226,212,.43) 34%,rgba(255,226,212,.43) 100%);animation:outFade .7s ease both}
.out.on .out-h{animation:outPop .7s cubic-bezier(.2,.8,.25,1) .08s both}
.out.on .out-mom{animation:outRise .5s cubic-bezier(.2,.8,.2,1) .95s both}
.out.on .out-say{transform-origin:0 100%;animation:outSay .45s cubic-bezier(.2,.9,.3,1) 1.5s both}
.out.on .out-card{animation:outRise .55s cubic-bezier(.2,.8,.2,1) .3s both}
.out.on .big-btn{animation:outRise .5s cubic-bezier(.2,.8,.2,1) .5s both}
.out-mom .av svg{transform-origin:50% 100%}
.out .av-head,.out .av-arml,.out .av-armr{transform-box:fill-box;transform-origin:50% 100%}
.out.win.on .av svg{animation:momJump 1.1s ease-in-out .95s infinite}
.out.win.on .av-head{animation:momHeadWin .55s ease-in-out .95s infinite alternate}
.out.win.on .av-arml{animation:momArm .55s ease-in-out .95s infinite alternate}
.out.win.on .av-armr{animation:momArm .55s ease-in-out .95s infinite alternate-reverse}
.out:not(.win).on .av svg{animation:momBreath 3.4s ease-in-out .95s infinite}
.out:not(.win).on .av-head{animation:momSad 4.2s ease-in-out .95s infinite}
@media (prefers-reduced-motion:reduce){.out.on,.out.on::before,.out.on .out-h,.out.on .out-mom,.out.on .out-say,.out.on .out-card,.out.on .big-btn,.out .av svg,.out .av-head,.out .av-arml,.out .av-armr{animation:none!important}}
/* финал: отступ пагинации от кнопки, дымка слайдера, анимация появления; шэр: линия поверх низа мам */
.fn-dots{margin-bottom:16px}
.fn-bq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%,#000 68%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 32%,#000 68%,transparent 100%)}
#sc-final #f-bq.fn-bq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%,#000 68%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 32%,#000 68%,transparent 100%)}
/* 10.11: низ картинки мам обрезан по наклону оранжевой линии (она поднимается вправо на 1.2°, середина линии от 99px слева до 93px справа): раньше срез был ровный, и справа из-под линии выглядывал кусочек последней мамы */
.rs-moms img{clip-path:polygon(0 0,100% 0,100% 93px,0 99px)}
.rs-line{top:93px;z-index:2}
@keyframes finIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes finMoms{0%{opacity:0;transform:translateY(30px) scale(.88)}70%{transform:translateY(-4px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes finBg{from{opacity:0}to{opacity:1}}
.fin2.on .fin-in{animation:finBg .4s ease both}
.fin2.on .fn-t{animation:finIn .6s cubic-bezier(.2,.8,.2,1) .05s both}
.fin2.on .fn-moms{animation:finMoms .75s cubic-bezier(.2,.8,.25,1) .18s both}
.fin2.on .fn-plate{animation:finIn .6s cubic-bezier(.2,.8,.2,1) .4s both}
.fin2.on .fn-bt{animation:finIn .55s cubic-bezier(.2,.8,.2,1) .55s both}
.fin2.on .fn-bq{animation:finIn .6s cubic-bezier(.2,.8,.2,1) .62s both}
.fin2.on .fn-price{animation:finIn .55s cubic-bezier(.2,.8,.2,1) .74s both}
.fin2.on .fn-dots{animation:finIn .55s cubic-bezier(.2,.8,.2,1) .8s both}
.fin2.on .fn-bot{animation:finIn .6s cubic-bezier(.2,.8,.2,1) .88s both}
@media (prefers-reduced-motion:reduce){.fin2.on .fin-in,.fin2.on .fn-t,.fin2.on .fn-moms,.fin2.on .fn-plate,.fin2.on .fn-bt,.fin2.on .fn-bq,.fin2.on .fn-price,.fin2.on .fn-dots,.fin2.on .fn-bot{animation:none}}

/* переход старт → правила: всё «опускается» вниз, как прокрутка */
.scr.u-scr.u-enter{transform:translate3d(0,100%,0)}
.scr.u-scr.u-go{transition:transform .75s cubic-bezier(.65,0,.25,1);transform:none}
.scr.u-scr.u-leave{transition:transform .75s cubic-bezier(.65,0,.25,1);transform:translate3d(0,-100%,0)}
/* старт → правила: кнопка «Бить» уходит в прозрачность, пока экран уезжает вверх */
#sc-start .u-foot{transition:opacity .4s ease}
#sc-start.u-leave .u-foot{opacity:0}
@media (prefers-reduced-motion:reduce){#sc-start .u-foot{transition:none}}
.scr.u-scr{will-change:auto}
/* правила: поэтапное появление */
.scr#sc-onb.on .ob-t{animation:finIn .55s cubic-bezier(.2,.8,.2,1) .3s both}
.scr#sc-onb.on .ob-c:nth-child(1){animation:finIn .6s cubic-bezier(.2,.8,.2,1) .45s both}
.scr#sc-onb.on .ob-c:nth-child(2){animation:finIn .6s cubic-bezier(.2,.8,.2,1) .62s both}
.scr#sc-onb.on .ob-c:nth-child(3){animation:finIn .6s cubic-bezier(.2,.8,.2,1) .79s both}
.scr#sc-onb.on .ob-c:nth-child(4){animation:finIn .6s cubic-bezier(.2,.8,.2,1) .96s both}
.scr#sc-onb.on .u-foot{animation:finIn .6s cubic-bezier(.2,.8,.2,1) 1.15s both}
@media (prefers-reduced-motion:reduce){.scr#sc-onb.on .ob-t,.scr#sc-onb.on .ob-c,.scr#sc-onb.on .u-foot{animation:none}.scr.u-scr.u-go,.scr.u-scr.u-leave{transition:none}}

/* правила: появление без блюра (блюр был виден уже при въезде экрана) */
@keyframes obUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.scr#sc-onb.on .ob-t{animation:obUp .5s cubic-bezier(.2,.8,.2,1) .5s both}
.scr#sc-onb.on .ob-c:nth-child(1){animation:obUp .5s cubic-bezier(.2,.8,.2,1) .6s both}
.scr#sc-onb.on .ob-c:nth-child(2){animation:obUp .5s cubic-bezier(.2,.8,.2,1) .75s both}
.scr#sc-onb.on .ob-c:nth-child(3){animation:obUp .5s cubic-bezier(.2,.8,.2,1) .9s both}
.scr#sc-onb.on .ob-c:nth-child(4){animation:obUp .5s cubic-bezier(.2,.8,.2,1) 1.05s both}
.scr#sc-onb.on .u-foot{animation:obUp .5s cubic-bezier(.2,.8,.2,1) 1.25s both}

#sc-final .u-in{height:calc(100% / var(--ukf,1));transform:scale(var(--ukf,1))}

/* ---- шапка и нижние кнопки: колонка 366px по центру, на узких экранах масштабируется целиком (--hk) ---- */
.hud{left:50%!important;right:auto!important;width:366px;margin-left:-183px;transform:scale(var(--hk,1));transform-origin:50% 0;justify-content:space-between}
.hud .chip,.hud .hudr{flex:none;max-width:none}
.act{left:50%!important;right:auto!important;width:366px;margin-left:-183px;transform:scale(var(--hk,1));transform-origin:50% 100%}
.act .chs{gap:10px;width:366px;max-width:none;padding:0}
.act .chs .btn{flex:1 1 0;min-width:0;padding:0 16px;white-space:nowrap}
.bub{width:auto}

/* ---- анимация экранов «Поделиться» и «Результат друга» ---- */
@keyframes rsIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes rsCard{from{opacity:0;transform:translateY(34px) scale(calc(var(--rsk,1)*.92))}to{opacity:1;transform:scale(var(--rsk,1))}}
@keyframes rsPop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes rsMoms{0%{opacity:0;transform:translateY(26px) scale(.9)}70%{transform:translateY(-3px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes rsLine{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
#sc-share.on .rs-logo,#sc-friend.on .rs-logo{animation:rsIn .55s cubic-bezier(.2,.8,.2,1) .02s both}
#sc-share.on .rs-h,#sc-friend.on .rs-h{animation:rsIn .6s cubic-bezier(.2,.8,.2,1) .12s both}
#sc-share.on .rs-cap,#sc-friend.on .rs-cap{animation:rsIn .6s cubic-bezier(.2,.8,.2,1) .22s both}
#sc-share.on .rs-card,#sc-friend.on .rs-card{animation:rsCard .85s cubic-bezier(.2,.8,.25,1) .3s both}
#sc-share.on .rs-bot>*:nth-child(1),#sc-friend.on .rs-bot>*:nth-child(1){animation:rsIn .55s cubic-bezier(.2,.8,.2,1) .95s both}
#sc-share.on .rs-bot>*:nth-child(2){animation:rsIn .55s cubic-bezier(.2,.8,.2,1) 1.08s both}
#sc-share.on .rs-bot>*:nth-child(3){animation:rsIn .55s ease 1.2s both}
@media (prefers-reduced-motion:reduce){#sc-share.on *,#sc-friend.on *{animation:none!important}}

/* фон под всем: светло-розовый как на финальном экране, чтобы до загрузки стилей и картинок не мелькал персиковый */
html,body{background:#FEE2DF!important}
.app,body .app,body[data-scr] .app{background:#FEE2DF!important}
.frame{background:#FEE2DF!important}
.world{background:#FEE2DF}
.scr.u-scr#sc-onb,.scr.u-scr#sc-share,.scr.u-scr#sc-friend,.scr.u-scr#sc-final{background:#FEE2DF!important}
.u-sky{background:linear-gradient(180deg,#DCEDFD 0,#DCEDFD calc(100% - 200px),#FEE2DF calc(100% - 200px))}
/* «Поверни телефон»: розовый фон, сливовый текст как у заголовков */
.rotate{background:#FEE2DF;color:#4A2036}
.rotate b{color:#4A2036}
.rotate span{color:#4A2036}

/* главная: мяч поджимается, иногда чуть подпрыгивает; без вращения */
@keyframes ballBounce{0%,22%{transform:translateY(0) scale(1,1)}30%{transform:translateY(0) scale(1.07,.92)}38%{transform:translateY(0) scale(1,1)}50%{transform:translateY(0) scale(1.1,.88)}58%{transform:translateY(-15px) scale(.96,1.05)}68%{transform:translateY(0) scale(1.09,.9)}76%{transform:translateY(-4px) scale(.99,1.01)}84%{transform:translateY(0) scale(1.03,.97)}92%,100%{transform:translateY(0) scale(1,1)}}
#sc-start .u-ball{transform-origin:50% 100%;animation:ballBounce 3.6s ease-in-out infinite;will-change:transform}
/* мягкая тень под мячом: остаётся на земле, сжимается и бледнеет, когда мяч в воздухе */
.u-ball-sh{position:absolute;left:50%;bottom:133px;width:104px;height:20px;margin-left:-52px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(74,32,54,.36) 0,rgba(74,32,54,.2) 48%,rgba(74,32,54,0) 72%);pointer-events:none}
@keyframes ballShadow{0%,22%{transform:scale(1,1);opacity:1}30%{transform:scale(1.06,1);opacity:1}38%{transform:scale(1,1);opacity:1}50%{transform:scale(1.1,1);opacity:1}58%{transform:scale(.8,.8);opacity:.55}68%{transform:scale(1.1,1);opacity:1}76%{transform:scale(.96,.96);opacity:.85}84%{transform:scale(1.03,1);opacity:1}92%,100%{transform:scale(1,1);opacity:1}}
#sc-start .u-ball-sh{animation:ballShadow 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#sc-start .u-ball,#sc-start .u-ball-sh{animation:none}}

/* финал: блок «Какие букеты подойдут» (заголовок, слайдер, цена, точки) по центру свободного места между плашкой и кнопками */
.fn-mid{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fn-mid .fn-bt{margin-top:0}
.fn-mid{padding-top:16px}

/* результат: пока над сценой блюр, её CSS-анимации стоят (меньше перерисовок под размытием) */
body.out-open .world *,body.out-open .world *::before,body.out-open .world *::after{animation-play-state:paused!important}

/* 09.11: экран ошибки: кнопка как на остальных экранах (.ub в .u-foot), заголовок без Flowfont */
#sc-err .u-foot{z-index:4}
#sc-err .err-t{font:500 38px/1.1 var(--sans);text-shadow:none;letter-spacing:-.2px}
@media (max-height:700px){#sc-err .err-t{font-size:32px}}

/* 09.11: картинки нельзя выделить, зажать и переслать/сохранить (iOS, Android, десктоп) */
html,body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,svg image,picture,video,canvas{-webkit-user-drag:none;user-drag:none;pointer-events:none}

/* 09.11: шрифт Caveat с Google Fonts убран (внешний запрос, в части сетей не грузился); штамп «Гол!» и подписи идут шрифтом CoFo Sans */
:root{--brush:'CoFo Sans',system-ui,-apple-system,'Segoe UI',sans-serif}

/* 09.11: год на открытке двора «набегает» (js/game.js, yearRoll): ширина каждой цифры задана в js по финальному году (число не дёргается и в конце не сдвигается);
   подчёркивание дорисовывается слева направо, без масштабирования самого года. Цифры в конце НЕ перерисовываются (никакой opacity и замены текста: иначе меняются цвет и толщина), у линии слой заранее (will-change) */
#pcard .pc-y .d{display:inline-block;text-align:center}
#pcard .pc-y::after{transform:scaleX(1);transform-origin:0 50%;transition:transform .36s cubic-bezier(.3,.7,.25,1);will-change:transform}
#pcard .pc-y.roll::after{transform:scaleX(0);transition:none}
@media (prefers-reduced-motion:reduce){#pcard .pc-y::after{transition:none}}

/* 09.11: мама на экране исхода чуть выше (было низковато и перекрывалась карточкой): фигура +14px вверх, блок выше на столько же, низ по-прежнему под карточкой */
.out-mom .av{top:-21px;height:154px}

/* промокод: подпись внутри плашки, как в макете */
.fn-pl{display:none}
.fn-code{letter-spacing:.08em}
.fn-code .fn-cl{color:rgba(255,255,255,.55)}
.fn-plate{gap:14px}/* 10.11: отступ после «29 ноября — День матери.» внутри самого текста (fn-d), а не между текстом и кнопкой промокода */
.fn-txt .fn-d{display:block;margin-bottom:9px}

/* 09.11: эффект на мяче после «Сначала пирог» (js/game.js, #bglow, лежит поверх мяча): тёплый ободок с лёгкой пульсацией и блик, который периодически пробегает по мячу слева направо; без фильтров */
#bglow{transition:opacity .35s ease}
#bglow[opacity="0"]{display:none}
#bglow .bfx-fill{animation:bfxFill 1.8s ease-in-out infinite}
@keyframes bfxFill{0%,100%{opacity:.7}50%{opacity:1}}
#bglow .bfx-rim{animation:bfxRim 1.8s ease-in-out infinite}
@keyframes bfxRim{0%,100%{opacity:.72}50%{opacity:1}}
#bglow .bfx-sh{animation:bfxSh 2.4s cubic-bezier(.45,0,.25,1) infinite}
#bglow .bfx-sh2{animation-delay:.06s}
@keyframes bfxSh{0%,50%{transform:translateX(-36px)}100%{transform:translateX(36px)}}
@media (prefers-reduced-motion:reduce){#bglow .bfx-rim,#bglow .bfx-fill{animation:none}#bglow .bfx-sh{display:none}}

/* 09.11: дата на карточке шэра и страницы друга обычным начертанием (CoFo Sans Book, 400), не жирным */
.rs-date{font-weight:400}

/* 09.11: слайдер букетов листается и мышью: курсор «рука», во время перетаскивания отключаем притягивание к центру */
@media (hover:hover) and (pointer:fine){#f-bq{cursor:grab}}
#f-bq.drag{scroll-snap-type:none!important;scroll-behavior:auto!important}
#f-bq.drag,#f-bq.drag *{cursor:grabbing!important}

/* 09.11: «Поверни телефон»: телефон на боку поворачивается в вертикальное положение, изогнутые стрелки подсказывают направление */
.rot-i{display:block;width:142px;height:99px;margin:0 auto 10px;overflow:visible}
.rot-ph{transform-box:view-box;transform-origin:80px 60px;animation:rotPh 3.2s cubic-bezier(.55,.1,.25,1) infinite}
.rot-arr{animation:rotArr 3.2s ease-in-out infinite}
@keyframes rotPh{
  0%{transform:rotate(-90deg);opacity:0}
  8%,24%{transform:rotate(-90deg);opacity:1}
  58%,88%{transform:rotate(0deg);opacity:1}
  96%,100%{transform:rotate(0deg);opacity:0}
}
@keyframes rotArr{0%,16%{opacity:0}28%,50%{opacity:1}62%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.rot-ph{animation:none;transform:rotate(0)}.rot-arr{animation:none;opacity:1}}

/* 09.11: экран телефона: сначала розовый, после поворота показывает стартовый экран игры */
.rot-scr{animation:rotScr 3.2s ease-in-out infinite}
@keyframes rotScr{0%,46%{opacity:0}62%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.rot-scr{animation:none;opacity:1}}

/* 09.11: «Поверни телефон»: заголовок CoFo Sans (не Flowfont) и поменьше, подзаголовок поменьше */
.rotate b{font:700 24px/1.2 var(--sans);margin-bottom:4px}
.rotate span{font:400 14px/1.35 var(--sans)}

/* 09.11: реплика мамы на экране исхода шире (до 200 px), чтобы «Ну, ладно. / Потом в АПЛ забьешь!» укладывалась в две строки; на узких экранах остаётся прежняя ширина */
.out-say{max-width:max(176px,min(200px,calc(100% - 137px)))}
@media (max-width:340px){.out-say{font-size:14px}}

/* 10.11: слайдер букетов растёт по свободному месту между плашкой и кнопками (от 137 до 200 px высотой), ширина карточки и боковые поля следуют за высотой */
#sc-final #f-bq.fn-bq{container-type:size;flex:1 1 137px;height:auto;min-height:137px;max-height:200px;padding:0}
#sc-final #f-bq.fn-bq::before,#sc-final #f-bq.fn-bq::after{content:"";flex:none;width:calc(50cqw - 50cqh*120/137)}
#sc-final #f-bq.fn-bq .bq-c,#sc-final #f-bq.fn-bq .bq-c:nth-child(n){width:calc(100cqh*120/137);height:100cqh}
/* 10.11: зачёркивание старой цены по диагонали, от левого нижнего угла к правому верхнему */
.fn-price s::after{left:-2px;right:-2px;top:16%;bottom:12%;height:auto;background:linear-gradient(to bottom right,transparent calc(50% - 1.2px),#FF7864 calc(50% - 1.2px),#FF7864 calc(50% + 1.2px),transparent calc(50% + 1.2px))}