:root{--plum:#370A28;--coral:#FF7663;--pink:#FFE9EE;--beige:#FFF0E6;--lilac:#F0EBFF;--blue:#E1F0FF;
 --flow:'Flowfont','CoFo Sans',Georgia,serif;--sans:'CoFo Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:linear-gradient(160deg,#6A1A52,#370A28);font-family:var(--sans);color:var(--plum);overscroll-behavior:none}
.app{position:fixed;inset:0;display:flex;justify-content:center;background:linear-gradient(160deg,#6A1A52,#370A28)}
.frame{position:relative;width:100%;max-width:440px;height:100%;overflow:hidden;background:#FFD9BE;user-select:none;-webkit-user-select:none;touch-action:manipulation}
@media (min-width:520px){.frame{box-shadow:0 18px 60px rgba(0,0,0,.45)}}
.stage{position:absolute;inset:0;color:var(--plum);font-family:var(--sans);--panel:calc(clamp(232px,34vh,252px) + env(safe-area-inset-bottom,0px));--top:max(env(safe-area-inset-top,0px),var(--tg-top,0px))}
/* мир занимает всё над панелью и никогда не двигается */
.world{position:absolute;inset:0;overflow:hidden;background:#E2B9A6}
.world .bg{position:absolute;left:0;top:0;max-width:none;display:block;pointer-events:none;-webkit-user-drag:none;image-rendering:auto}
.world svg.scene{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.grain{position:absolute;inset:0;pointer-events:none;background:url(../assets/grain.webp?v=20261101p) 0 0/160px 160px;opacity:.10}
body:not([data-scr="game"]) #hud,body:not([data-scr="game"]) #panel,body:not([data-scr="game"]) #world{visibility:hidden}
/* ворота: зоны тапа (позицию и размер задаёт MF.fit) */
.hits{position:absolute;z-index:25}
.hit{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hit:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.hits.off{pointer-events:none}
/* печать «Гол!» / «Взял» — появляется и тает, ничего не закрывает */
.big{position:absolute;left:0;right:0;top:50%;z-index:35;text-align:center;pointer-events:none;font-family:var(--sans);font-weight:700;font-size:76px;line-height:1;letter-spacing:.01em;color:#fff;-webkit-text-stroke:11px var(--plum);paint-order:stroke fill;text-shadow:0 7px 0 rgba(55,10,40,.35);animation:stamp 1.5s ease both;will-change:transform}
.big.miss{color:var(--pink)}
@keyframes stamp{0%{transform:scale(.2) rotate(-14deg);opacity:0}14%{transform:scale(1.22) rotate(-3deg);opacity:1}24%{transform:scale(.95) rotate(-6deg)}34%{transform:scale(1) rotate(-5deg)}76%{transform:scale(1) rotate(-5deg);opacity:1}100%{transform:scale(1.08) rotate(-5deg) translateY(-14px);opacity:0}}
/* нижняя панель: три строки фиксированной высоты */
.panel{position:absolute;left:0;right:0;bottom:0;height:var(--panel);z-index:30;display:grid;grid-template-rows:64px minmax(0,1fr) 58px;gap:8px;padding:16px max(18px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));background:linear-gradient(180deg,#FFFBF7,#FFF0E6);border-radius:28px 28px 0 0;box-shadow:0 -10px 30px rgba(55,10,40,.22)}
.panel>*{min-height:0}
.pn-a{display:flex;gap:12px;align-items:center;transition:opacity .22s}
.pn-a.off,.pn-b.off{opacity:0}
.pn-b{display:flex;align-items:center;justify-content:center;text-align:center;transition:opacity .22s}
.panel .av{flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--lilac);box-shadow:0 0 0 3px #fff,0 4px 10px rgba(55,10,40,.25)}
.panel .av svg{display:block}
.say{min-width:0;font:500 16px/1.3 var(--sans);overflow-wrap:anywhere;background:var(--pink);border-radius:18px 18px 18px 6px;padding:10px 14px;animation:fade .25s ease both}
.say.rx{font:600 17px/1.28 var(--sans);background:none;padding:0}
.cap{font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#8a6478;animation:fade .25s ease both}
.story{font:400 13.5px/1.38 var(--sans);color:#5a3a4c;text-align:left;overflow-wrap:anywhere;animation:fade .25s ease both}
.pn-c{display:flex;align-items:stretch;min-width:0}
.pn-c>*{flex:1;min-width:0;animation:fade .25s ease both}
.chs{display:flex;gap:12px}
.chs .btn{flex:1}
.pn-c .btn{height:58px}
.pill{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:999px}
.pill.hint{position:relative;overflow:hidden;background:linear-gradient(135deg,#5A1648,#370A28);color:#FFE9EE;padding:0 18px;font:600 13px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 16px rgba(55,10,40,.3),inset 0 0 0 1.5px rgba(255,255,255,.25)}
.pill.hint span{position:relative}
.pill.hint.gz i{position:absolute;inset:0;background:linear-gradient(90deg,#FF7663,#FFD84A);opacity:.55;transform-origin:left}
.pill.hint.late{background:linear-gradient(135deg,#8a3a2a,#5a1c14)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.btn.white{background:#fff;color:var(--plum);box-shadow:0 5px 0 #E6C9D0,0 12px 24px rgba(55,10,40,.28)}
/* HUD */
.hud{position:absolute;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));top:calc(var(--top) + 12px);height:38px;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:20}
.chip{display:flex;align-items:center;gap:7px;min-width:0;flex:0 1 auto;height:38px;padding:0 11px 0 9px;border-radius:999px;background:linear-gradient(180deg,#FFF9F4,#FFE9EE);color:var(--plum);font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;box-shadow:0 4px 14px rgba(55,10,40,.22),inset 0 0 0 1.5px rgba(255,255,255,.9)}
.chip span{overflow:hidden;text-overflow:ellipsis}
.balls{display:flex;gap:4px;align-items:center;height:38px;padding:0 9px;flex:none;border-radius:999px;background:linear-gradient(180deg,#FFF9F4,#FFE9EE);box-shadow:0 4px 14px rgba(55,10,40,.22),inset 0 0 0 1.5px rgba(255,255,255,.9)}
.bl{width:19px;height:19px;position:relative;flex:none}
.bl svg{width:19px;height:19px;display:block}
.bl.fut{opacity:.38;filter:grayscale(1)}
.bl.cur::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2.5px solid var(--coral);animation:ring 1.4s ease-in-out infinite}
.bl.miss{opacity:.9}.bl.miss svg{filter:grayscale(1) opacity(.5)}
.bl.miss::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:3px;margin-top:-1.5px;background:var(--coral);transform:rotate(-45deg);border-radius:2px}
@keyframes ring{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.6}}
.btn{font:700 16px var(--sans);height:58px;border-radius:999px;border:0;padding:0 12px;cursor:pointer;color:var(--plum);background:linear-gradient(180deg,#FFFBF7,#FFE9EE);box-shadow:0 5px 0 #D9A5B4,0 10px 20px rgba(55,10,40,.28);min-width:0;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #D9A5B4,0 3px 8px rgba(55,10,40,.28)}
.btn.coral{background:linear-gradient(180deg,#FF8E7C,#FF6A55);color:#fff;box-shadow:0 5px 0 #C23F2F,0 10px 20px rgba(194,63,47,.4)}
.btn.coral:active{box-shadow:0 1px 0 #C23F2F,0 3px 8px rgba(194,63,47,.4)}
.btn.plum{background:linear-gradient(180deg,#5A1648,#370A28);color:#FFE9EE;box-shadow:0 5px 0 #1D0415,0 10px 20px rgba(55,10,40,.35)}
.btn.plum:active{box-shadow:0 1px 0 #1D0415,0 3px 8px rgba(55,10,40,.35)}
.chs .btn{flex:1}
.btn span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
.wl{animation:wl 5s ease-in-out infinite}@keyframes wl{50%{opacity:.78}}
.tv{animation:tv 2.6s steps(1) infinite;opacity:0}@keyframes tv{0%{opacity:.55}12%{opacity:.25}27%{opacity:.6}41%{opacity:.35}58%{opacity:.7}73%{opacity:.22}89%{opacity:.5}}
.curt{animation:curt 4.5s ease-in-out infinite}@keyframes curt{50%{transform:scaleX(.72) skewX(-5deg)}}
.line{transform-box:fill-box;transform-origin:50% 0;animation:line 3.4s ease-in-out infinite}@keyframes line{50%{transform:rotate(2.2deg)}}
.drift{animation:drift 40s ease-in-out infinite alternate}@keyframes drift{to{transform:translateX(34px)}}
.bird{animation:bird 16s linear infinite;opacity:.8}@keyframes bird{0%{transform:translate(-30px,130px)}100%{transform:translate(430px,80px)}}
.smoke{animation:smoke 5s ease-out infinite}.smoke.s2{animation-delay:-2.4s}@keyframes smoke{0%{transform:translate(0,0) scale(.6);opacity:.7}100%{transform:translate(18px,-34px) scale(1.5);opacity:0}}
.steam{animation:steam 2.6s ease-in-out infinite}@keyframes steam{50%{transform:translateY(-6px)}}
}
/* экраны */
.scr{position:absolute;inset:0;z-index:80;display:none;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--top) + 44px) 22px calc(26px + env(safe-area-inset-bottom,0px));animation:scrin .35s ease both}
.scr.on{display:flex}
@keyframes scrin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bob{50%{transform:translateY(-8px) rotate(6deg)}}
.st-sub.dark{color:var(--plum)}
#sc-err{justify-content:center;gap:10px}
.fin-in{width:100%;padding:calc(var(--top) + 44px) 18px calc(30px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:12px}
.fin-in.fr{padding-top:calc(var(--top) + 58px);gap:18px}
.btn span{white-space:normal;line-height:1.1}
.finger{position:absolute;z-index:26;margin:-2px 0 0 -8px;pointer-events:none;animation:fingermove 2.6s ease-in-out infinite;transform-origin:8px 2px;filter:drop-shadow(0 4px 6px rgba(55,10,40,.35))}
@keyframes fingermove{0%,34%{transform:translateY(0)}46%,80%{transform:translateY(var(--finger-dy,46px))}100%{transform:translateY(0)}}
.toast{position:absolute;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:200;transform:translate(-50%,16px);opacity:0;background:var(--plum);color:#fff;font:600 15px var(--sans);padding:12px 20px;border-radius:999px;pointer-events:none;transition:.28s;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.bobble{animation:bobl 2s ease-in-out infinite}@keyframes bobl{50%{transform:translateY(-4px)}}
.rotate{display:none;position:fixed;inset:0;z-index:999;background:var(--plum);color:#fff;place-items:center;text-align:center;font:500 16px var(--sans)}
.rotate b{display:block;font:400 34px var(--flow);margin-bottom:6px}
@media (orientation:landscape) and (max-height:480px){.rotate{display:grid}}
.dbg{position:fixed;left:0;right:0;top:0;z-index:1000;display:flex;gap:2px;justify-content:center;pointer-events:none}
.dbg button{pointer-events:auto;font:600 9px var(--sans);padding:3px 5px;border-radius:6px;border:1px solid #fff;background:rgba(0,0,0,.5);color:#fff;cursor:pointer}
@media (prefers-reduced-motion:reduce){.st-ball,.finger,.bobble,.scr{animation:none}}

.story.long{font-size:12.5px;line-height:1.32}

/* живой фон: слои-картинки анимируются только transform/opacity */
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:34}
.fx i,.fx svg{position:absolute;left:0;top:0;display:block;will-change:transform,opacity}
.fx .flash{inset:0;width:auto;height:auto;background:radial-gradient(circle at 50% 55%,rgba(255,244,200,.75),rgba(255,244,200,0) 70%)}
.a{will-change:transform,opacity}
.a-sway{animation:sway ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(calc(var(--a)*-1deg))}to{transform:rotate(calc(var(--a)*1deg))}}
.a-flag{animation:flag ease-in-out infinite alternate}
@keyframes flag{from{transform:skewY(calc(var(--a)*-1deg)) scaleX(1)}to{transform:skewY(calc(var(--a)*1deg)) scaleX(.94)}}
.a-glow{animation:glow linear infinite}
@keyframes glow{0%,10%{opacity:0}16%,66%{opacity:1}74%,100%{opacity:0}}
.a-tv{animation:tv linear infinite}
@keyframes tv{0%{opacity:.9}8%{opacity:.35}16%{opacity:1}30%{opacity:.5}44%{opacity:.95}58%{opacity:.4}72%{opacity:1}86%{opacity:.6}100%{opacity:.9}}
.a-twink{animation:twink ease-in-out infinite alternate}
@keyframes twink{from{opacity:.2}to{opacity:1}}
.a-drift{animation:drift ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(calc(var(--a)*-1px))}to{transform:translateX(calc(var(--a)*1px))}}
.a-fly{animation:fly linear infinite}
@keyframes fly{0%{transform:translate(0,0)}100%{transform:translate(740px,-34px)}}
.a-flap{animation:flap .34s ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.3)}}
.a-puff{animation:puff ease-out infinite}
@keyframes puff{0%{transform:translateY(0) scale(.6);opacity:0}25%{opacity:.85}100%{transform:translateY(-30px) scale(1.5);opacity:0}}
.a-bob{animation:bob ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(-1.5px) rotate(calc(var(--a)*-1deg))}to{transform:translateY(2px) rotate(calc(var(--a)*1deg))}}
.a-cable{animation:cable linear infinite}
@keyframes cable{from{transform:translate(0,0)}to{transform:translate(662px,-165px)}}
@media (prefers-reduced-motion:reduce){.a{animation:none!important}}

/* ===== v4: макет без нижней плашки ===== */
:root{--brush:'Brush','Caveat','Segoe Script','Bradley Hand','Marker Felt','Comic Sans MS',cursive;--coral2:#F0644F;--paper:#FFF6EC}
.panel{display:none}
.hud{top:calc(var(--top) + 10px);height:44px}
.chip{height:44px;border-radius:22px;padding:0 14px 0 10px;background:var(--paper);box-shadow:0 3px 0 rgba(55,10,40,.1),0 8px 18px rgba(55,10,40,.14);font-size:14px;line-height:1.1}
.balls{height:44px;border-radius:22px;background:var(--paper);gap:6px;padding:0 12px;box-shadow:0 3px 0 rgba(55,10,40,.1),0 8px 18px rgba(55,10,40,.14)}
.capt{position:absolute;left:0;right:0;top:calc(var(--top) + 64px);z-index:21;text-align:center;pointer-events:none}
.capt .cap{display:inline-block;background:rgba(255,246,236,.92);border-radius:999px;padding:6px 14px;font:600 11.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#4A2036}
.bub{position:absolute;z-index:22;max-width:min(62vw,232px);transform:translateY(-100%);background:var(--paper);border-radius:22px;padding:11px 15px;font:500 15px/1.28 var(--sans);color:var(--plum);box-shadow:0 3px 0 rgba(55,10,40,.1),0 10px 22px rgba(55,10,40,.16);animation:fade .25s ease both;pointer-events:none}
.bub::after{content:"";position:absolute;right:38px;bottom:-9px;width:18px;height:18px;background:var(--paper);transform:rotate(45deg);border-radius:0 0 5px 0}
.bub.off{display:none}
.bub span{position:relative}
.act{position:absolute;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;justify-content:center;pointer-events:none}
.act>*{pointer-events:auto;animation:fade .25s ease both}
.act .chs{display:flex;gap:10px;width:100%;max-width:360px}
.act .chs .btn{flex:1;height:54px;font-size:15px}
.act .pill.hint{min-height:46px;padding:0 20px;background:var(--paper);color:var(--plum);font:700 15px/1.2 var(--sans);letter-spacing:0;text-transform:none;box-shadow:0 3px 0 rgba(55,10,40,.1),0 10px 22px rgba(55,10,40,.18);max-width:340px}
.act .pill.hint.gz i{background:linear-gradient(90deg,#FFB8A6,#FFD66B);opacity:.8}
.act .pill.hint.late{background:#FFD9D0}
.btn.coral{background:linear-gradient(180deg,#FF8A74,var(--coral2));color:#fff;box-shadow:0 4px 0 #C94A38,0 10px 20px rgba(201,74,56,.35)}
.btn.coral:active{transform:translateY(3px);box-shadow:0 1px 0 #C94A38}
.big{font-family:var(--brush);font-weight:700;font-size:104px;top:56%;color:#FFF6EC;-webkit-text-stroke:0;paint-order:normal;text-shadow:0 4px 0 #C94A38,0 0 0 #fff,0 10px 24px rgba(201,74,56,.5);letter-spacing:0}
.big.miss{color:#FFF6EC;text-shadow:0 4px 0 #7A5A80,0 10px 24px rgba(55,10,40,.4)}
/* карточка исхода */
.out{position:absolute;inset:0;z-index:60;display:none;pointer-events:none}
.out.on{display:block}
.out-in{position:absolute;left:0;right:0;bottom:0;padding:0 max(16px,env(safe-area-inset-left,0px)) calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:auto;background:linear-gradient(180deg,rgba(255,226,212,0),rgba(255,226,212,.72) 34%);padding-top:44px;animation:fade .3s ease both}
.out-h{font:700 108px/.9 var(--brush);color:#E4556A;text-shadow:0 3px 0 rgba(255,255,255,.9);transform:rotate(-4deg);margin-top:-16px;margin-bottom:8px}
.out-h.miss{color:#7A5A80}
.out-mom{display:flex;align-items:flex-start;gap:10px;width:100%;max-width:360px}
.out-mom .av{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;background:#FFD9D0;box-shadow:0 0 0 3px #fff,0 4px 10px rgba(55,10,40,.2)}
.out-mom .av svg{display:block;width:100%;height:100%}
.out-say{flex:1;min-width:0;background:var(--paper);border-radius:20px 20px 20px 6px;padding:10px 14px;font:600 15px/1.28 var(--sans);box-shadow:0 3px 0 rgba(55,10,40,.08)}
.out-card{width:100%;max-width:360px;background:rgba(255,232,216,.86);border-radius:30px 30px 34px 34px / 34px 34px 40px 40px;padding:16px 18px 22px;box-shadow:0 2px 0 rgba(255,255,255,.55) inset,0 10px 24px rgba(190,95,60,.18)}
.out-yr{font:700 26px/1.1 var(--brush);color:#E4556A;margin-bottom:6px}
.out-st{font:500 17px/1.35 var(--sans);color:#4A2036}
.out .big-btn{max-width:360px;height:56px}
/* ===== v4: старт/онбординг/финал в духе макета ===== */
.btn.plum{background:linear-gradient(180deg,#FF8A74,var(--coral2));color:#fff;box-shadow:0 4px 0 #C94A38,0 10px 20px rgba(201,74,56,.35)}

/* звук: в игре кнопка внутри плашки со счётом, на остальных экранах отдельный кружок справа вверху */
.hudr{display:flex;align-items:center;flex:none;height:44px;border-radius:22px;background:var(--paper);box-shadow:0 3px 0 rgba(55,10,40,.1),0 8px 18px rgba(55,10,40,.14)}
.hudr .balls{height:44px;gap:4px;padding:0 0 0 12px;background:none;box-shadow:none;border-radius:0}
.hudr .bl,.hudr .bl svg{width:16px;height:16px}
.snd{margin:0;padding:0;border:0;cursor:pointer;display:grid;place-items:center;color:var(--plum);font:inherit;-webkit-appearance:none;appearance:none}
.snd svg{width:22px;height:22px;display:block}
.snd .w,.snd .x{stroke:var(--coral)}
.snd .x{display:none}.snd.off .w{display:none}.snd.off .x{display:block}
.snd.in{position:relative;width:44px;height:44px;margin-left:6px;background:none;border-radius:0 22px 22px 0}
.snd.in::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1.5px;border-radius:1px;background:rgba(55,10,40,.14)}
.snd.in:active svg{transform:translateY(1px) scale(.92)}
.snd.solo{position:absolute;z-index:90;right:max(12px,env(safe-area-inset-right,0px));top:calc(var(--top) + 10px);width:44px;height:44px;border-radius:22px;background:var(--paper);box-shadow:0 3px 0 rgba(55,10,40,.1),0 8px 18px rgba(55,10,40,.14)}
.snd.solo:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(55,10,40,.1),0 4px 10px rgba(55,10,40,.12)}
body[data-scr="game"] .snd.solo{display:none}
.fin-in{padding-top:calc(var(--top) + 62px)}/* под кнопкой звука */

/* ===== v5: старт, правила и шапка двора в духе референса ===== */
.big-btn{width:100%;max-width:330px;height:64px;font-size:19px}
.btn.plum{background:linear-gradient(180deg,#FF8A74,var(--coral2));color:#fff;box-shadow:0 4px 0 #C94A38,0 10px 20px rgba(201,74,56,.35)}
#sc-err{background:linear-gradient(180deg,#FFF9F4,#FFE9EE);justify-content:center;gap:10px}
.ttl{font:400 38px/1.05 var(--flow);margin:18px 0 20px}
.st-sub{font:500 16px/1.32 var(--sans);margin:0;color:#4A2036}.st-sub.dark{color:var(--plum)}
/* общая «небесная» сцена: небо, дальний двор из картинки, облака */
.scr.sky{--sky1:#FFCDB8;--sky2:#FFE4D2;--sky3:#FFD3C0;--sky4:#F6B6A4;justify-content:flex-start;overflow:hidden;color:var(--plum);padding-top:calc(var(--top) + 118px);background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 36%,var(--sky3) 64%,var(--sky4) 100%)}
.scr.sky.blue{--sky1:#BCD0F2;--sky2:#E6DCEB;--sky3:#FFD9C6;--sky4:#F6B9A6}
.scr.sky>*{position:relative;z-index:2}
.sky-bg{position:absolute!important;z-index:0!important;left:0;right:0;bottom:0;aspect-ratio:1830/3000;background:url(../assets/bg/skybg.webp?v=20261031x) center bottom/100% 100% no-repeat;opacity:.95}
.scr.sky.blue .sky-bg{opacity:.7}
.scr.sky::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%)}
.cloud{position:absolute!important;z-index:1!important;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.55) 55%,rgba(255,255,255,0));pointer-events:none}
.cloud.c1{width:230px;height:84px;left:-60px;top:calc(var(--top) + 150px)}
.cloud.c2{width:190px;height:70px;right:-50px;top:calc(var(--top) + 250px);opacity:.8}
.scr.sky.blue .cloud.c1{top:calc(var(--top) + 40px)}.scr.sky.blue .cloud.c2{top:calc(var(--top) + 96px)}
/* логотипы-заглушки в стиле референса (мяч × тюльпан Флаувау), настоящие логотипы клиента подставить сюда */
.logos{display:flex;align-items:center;gap:10px;position:absolute!important;top:calc(var(--top) + 46px);left:0;right:0;justify-content:center;color:var(--plum)}
.lg-ball{width:34px;height:34px;display:block;filter:drop-shadow(0 3px 4px rgba(55,10,40,.25))}.lg-ball svg{width:100%;height:100%;display:block}
.lg-x{font:500 18px var(--sans);opacity:.75}
.lg-fw{display:flex;align-items:center;gap:6px;font:700 19px/1 var(--sans);letter-spacing:-.01em}
.lg-fw svg{width:20px;height:20px;fill:var(--coral)}
.logos.dark{position:static!important;margin-bottom:6px}
/* старт */
.st-title{font:400 62px/.98 var(--flow);margin:0 0 16px;color:var(--plum);text-shadow:0 2px 0 rgba(255,255,255,.5)}
.st-title em{font-style:normal;position:relative;display:inline-block;padding-bottom:10px}
.st-title em::after{content:"";position:absolute;left:-2%;right:-2%;bottom:0;height:7px;border-radius:7px;background:linear-gradient(90deg,#FF8A74,var(--coral));transform:rotate(-1.2deg)}
.st-ball{position:absolute!important;left:50%;bottom:calc(120px + env(safe-area-inset-bottom,0px));margin:0 0 0 -43px;width:86px;height:86px}
.st-ball svg{position:relative;display:block;z-index:1}
.st-ball::after{content:"";position:absolute;left:2px;right:-14px;bottom:-5px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(55,10,40,.42),rgba(55,10,40,0))}
@keyframes bob{50%{transform:translateY(-8px) rotate(6deg)}}
.scr.sky>.big-btn{position:absolute;z-index:4;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:calc(100% - 44px)}
.scr.sky>.big-btn:active{transform:translateX(-50%) translateY(4px)}
.chev{display:inline-block;width:9px;height:9px;margin-left:8px;border:solid #fff;border-width:2.5px 2.5px 0 0;transform:rotate(45deg) translateY(-1px)}
.fol{position:absolute!important;bottom:0;width:84px;height:104px;z-index:1!important;pointer-events:none}
.fol.fl{left:-8px}.fol.fr{right:-8px}
/* правила: бумажные карточки с номерами и картинками */
.onb-cap{font:700 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#4A2036;margin-bottom:22px;margin-top:-52px}
.cards{display:flex;flex-direction:column;gap:14px;width:100%;max-width:360px;margin-bottom:auto;padding:10px 6px 0 8px}
.card{position:relative;display:flex;gap:6px;align-items:center;text-align:left;min-height:118px;padding:14px 104px 14px 28px;border-radius:22px 26px 20px 18px;background:#FFE4D0;box-shadow:0 10px 18px rgba(90,40,30,.16),inset 0 1px 0 rgba(255,255,255,.7)}
.card:nth-child(1){transform:rotate(-.4deg);border-radius:20px 24px 18px 22px}
.card:nth-child(2){transform:rotate(.35deg);border-radius:24px 18px 22px 20px}
.card:nth-child(3){transform:rotate(-.25deg);border-radius:18px 22px 24px 20px}
.card p{margin:0;flex:1;min-width:0;font:500 15.5px/1.28 var(--sans);color:#4A2036}
.card .num{position:absolute;left:-8px;top:-10px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 16px/1 var(--sans);color:#fff;background:#F27868;box-shadow:0 3px 0 #D45A4C,0 6px 10px rgba(180,70,55,.28)}
.card .pic{position:absolute;right:8px;top:8px;bottom:8px;width:86px;margin:0;background:none;pointer-events:none}
.card .pic img{display:block;max-width:none}
.p-kid{border-radius:12px;background:linear-gradient(180deg,#F7C7B4,#E8A898);overflow:hidden}
.p-kid img{width:100%;height:108%;object-fit:contain;object-position:center bottom;margin-top:-4%}
.netbox{position:absolute;inset:0;overflow:hidden;border-radius:12px;background:#E7A394}
.netbox img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.85;mix-blend-mode:multiply}
.p-kp .who{position:absolute;left:50%;bottom:-2px;height:96%;width:auto;transform:translateX(-50%);object-fit:contain}
.p-tap .hand{position:absolute;right:-6px;bottom:-10px;width:42px;filter:drop-shadow(0 3px 4px rgba(55,10,40,.28))}
.p-tap .hand svg{width:100%;height:auto;display:block}
/* шапка двора: плашка места (две строки) и мячи */
.hud{top:calc(var(--top) + 10px);height:50px}
.chip{height:50px;gap:8px;padding:0 16px 0 12px;border-radius:25px;background:linear-gradient(180deg,rgba(255,250,244,.96),rgba(255,236,228,.92));box-shadow:0 8px 20px rgba(55,10,40,.2),inset 0 0 0 1.5px rgba(255,255,255,.95);font:700 13.5px/1.15 var(--sans);letter-spacing:0;white-space:normal;color:var(--plum)}
.chip svg{flex:none;width:15px;height:20px}
.chip span{overflow:visible;text-overflow:clip}
.balls{height:50px;border-radius:25px;gap:7px;padding:0 14px;background:linear-gradient(180deg,rgba(255,250,244,.96),rgba(255,236,228,.92));box-shadow:0 8px 20px rgba(55,10,40,.2),inset 0 0 0 1.5px rgba(255,255,255,.95)}
.bl,.bl svg{width:23px;height:23px}
.bl.fut{opacity:.55;filter:none}.bl.cur::after{inset:-3px}

/* ===== v6: финал в духе референса ===== */
.scr.fin{--sky1:#FFD0BC;--sky2:#FFE6D6;--sky3:#FFD6C4;--sky4:#F7BBA9;padding:0;overflow-y:auto;overflow-x:hidden;justify-content:flex-start;display:none}
.scr.fin.on{display:flex}
.scr.fin .sky-bg{opacity:.55;position:fixed!important}
.fin-in{position:relative;z-index:2;width:100%;max-width:440px;padding:calc(var(--top) + 62px) 18px calc(30px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:14px}
.fin-in.fr{padding-top:calc(var(--top) + 90px);gap:18px}
.moms{display:flex;justify-content:center;width:100%;gap:0}
.mom-i{position:relative;width:58px;flex:none;margin:0 -1px;filter:drop-shadow(0 4px 5px rgba(120,60,40,.18))}
.mom-i svg{width:100%;height:auto;display:block;overflow:visible}
.mom-i.miss{opacity:.55;filter:grayscale(.75) drop-shadow(0 4px 5px rgba(120,60,40,.12))}
.mom-i.empty{opacity:.8}
.fin-t{font:400 31px/1.08 var(--flow);margin:2px 0 0;text-wrap:balance;color:var(--plum)}
.fin-t .sc{position:relative;display:inline-block;white-space:nowrap}
.fin-t .sc::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-3px;height:5px;border-radius:5px;background:linear-gradient(90deg,#FF8A74,var(--coral));transform:rotate(-1deg)}
.fin-s{margin:0;font:500 16px/1.4 var(--sans);color:var(--plum);text-align:center}
.fin-s .heart{width:15px;height:14px;vertical-align:-1px;margin-left:2px}
.fw-box{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}
.bq{display:contents}
.bq-c{height:100%;border:0;padding:0;background:linear-gradient(180deg,#FFF8EE,#FFEEDD);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;box-shadow:0 8px 16px rgba(120,60,40,.18),inset 0 0 0 1.5px rgba(255,255,255,.9);font-family:var(--sans);color:var(--plum);display:flex;flex-direction:column}
.bq-c .im{height:66px;display:grid;place-items:center;overflow:hidden}
.bq-c .im svg{width:52px;height:60px}
.bq-c b{display:block;font:700 10.5px/1.12 var(--sans);padding:5px 6px 1px;min-height:26px}
.bq-c span{display:block;font:500 10.5px var(--sans);padding:0 6px 7px;color:#4A2036}
.promo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px dashed #F2928A;border-radius:16px;background:rgba(255,246,240,.6);padding:6px 4px;cursor:pointer;font-family:var(--sans);color:var(--plum);text-align:center}
.promo .pl{font:700 9px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#4A2036}
.promo .pc{font:700 17px/1.1 var(--sans);letter-spacing:.04em;margin-top:3px}
.promo i{font:500 9px/1.15 var(--sans);font-style:normal;color:#4A2036}
.promo:active{transform:scale(.97)}
.row3{display:flex;gap:10px;width:100%}
.row3 .btn{flex:1}
.btn.small{height:52px;font-size:13.5px;font-weight:600;line-height:1.1;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;background:linear-gradient(180deg,#FFE8E6,#FFD2CD);box-shadow:0 4px 0 #E7A39D,0 8px 16px rgba(120,60,40,.18)}
.btn.small svg{flex:none;width:22px;height:22px}
.btn.small span{text-align:left;max-width:96px}
.btn.ghost{background:none;box-shadow:none;border:0;height:38px;font-weight:500;font-size:16px;width:auto;min-width:0;padding:0 18px}
.btn.ghost:active{transform:none;opacity:.6}
/* лого Мяч × Флаувау (assets/logo.svg, инлайн) */
.logo-svg{display:block;width:min(240px,64vw);height:auto;color:var(--plum)}
/* на первом экране звук не показываем */
body[data-scr="start"] .snd.solo{display:none}
/* v7: финал — мамы из игры, без двора на фоне */
.scr.fin{background:linear-gradient(180deg,#FFE7DA 0%,#FFDCCD 50%,#FBC8BB 100%)}
.scr.fin::after{display:none}
#sc-final .sky-bg{display:none}
.moms{align-items:flex-end}
.mom-i{width:66px;margin:0 -4px;filter:none;-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 74%,transparent 100%)}
.mom-i img,.mom-i svg{width:100%;height:auto;display:block;pointer-events:none}
.mom-i.miss{opacity:.5;filter:grayscale(.9)}
.mom-i.empty{opacity:1}
/* v8: финал — заголовок сверху, мамы, под ними полукруглое затемнение с текстом; без кнопки звука */
body[data-scr="final"] .snd.solo{display:none}
#sc-final .fin-in{padding-top:calc(var(--top) + 26px);gap:6px}
#sc-final .fin-t{margin:0 0 8px}
.fin-stage{position:relative;width:calc(100% + 36px);margin:-16px -18px -4px}
.fin-stage .moms{position:relative;z-index:1;padding:0 18px}
.fin-stage .fin-s{position:relative;z-index:2;margin:-92px 0 0;padding:92px 22px 8px;border-radius:50% 50% 0 0 / 74px 74px 0 0;background:linear-gradient(180deg,rgba(120,50,95,0) 0,rgba(150,70,110,.34) 30%,rgba(255,226,214,.94) 72%,rgba(255,226,214,.0) 100%);font-size:17px}
.fin-stage .moms+.fin-s .heart{vertical-align:-1px}
.mom-i{-webkit-mask-image:none;mask-image:none}
.mom-i.empty{margin-left:-2px}
/* v9: мягкое полукруглое затемнение под мамами, компактнее текст, силуэт в масштаб */
.fin-stage .fin-s{margin:-60px 0 0;padding:64px 22px 10px;border-radius:0;font-size:16px;line-height:1.38;background:linear-gradient(180deg,rgba(150,70,110,0) 0,rgba(150,70,110,.32) 26%,rgba(255,229,218,.93) 58%,rgba(255,229,218,.55) 100%);-webkit-mask-image:radial-gradient(ellipse 78% 100% at 50% 100%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 78% 100% at 50% 100%,#000 62%,transparent 100%)}
#sc-final .fin-t{font-size:29px}
.mom-i.empty{transform:scale(.93);transform-origin:50% 100%}
/* v10: композиция финала — заголовок, мамы на полукруглой плашке с текстом и промокодом, слайдер букетов */
#sc-final .fin-in{gap:8px;padding-top:calc(var(--top) + 22px)}
#sc-final .fin-t{font-size:26px;line-height:1.02;margin:0 0 4px}
.fin-stage{position:relative;width:calc(100% + 36px);margin:0 -18px;overflow:hidden;padding-top:0}
.fin-stage .moms{position:relative;z-index:2;padding:0 18px;margin-bottom:-58px;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.mom-i{width:58px;margin:0 -4px}
.fin-stage .fin-plate{position:relative;z-index:1;margin:0 -7%;padding:92px 24px 26px;border-radius:50% 50% 0 0 / 100% 100% 0 0;background:linear-gradient(180deg,rgba(170,86,124,.5) 0,rgba(214,140,160,.42) 26%,rgba(255,228,218,.96) 58%,rgba(255,228,218,.9) 80%,rgba(255,228,218,0) 100%);display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.fin-stage .fin-s{margin:0;padding:0;background:none;-webkit-mask-image:none;mask-image:none;border-radius:0;font-size:15.5px;line-height:1.36;position:static}
.fin-stage .promo{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 10px;width:auto;min-width:200px;padding:7px 18px 6px;border-radius:999px;background:rgba(255,248,242,.85)}
.fin-stage .promo .pl{font-size:10px}
.fin-stage .promo .pc{font-size:20px;margin:0}
.fin-stage .promo i{flex-basis:100%;text-align:center;font-size:10px}
.fw-box{display:block;margin:2px 0 0}
.bq{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;width:calc(100% + 36px);margin:0 -18px;padding:4px 18px 8px}
.bq::-webkit-scrollbar{display:none}
.bq-c{flex:none;width:132px;scroll-snap-align:start;height:auto}
.bq-c .im{height:96px}.bq-c .im svg{width:64px;height:74px}
.bq-c b{font-size:12px;padding:6px 8px 1px;min-height:0}.bq-c span{font-size:12px;padding:0 8px 8px}
.bq-dots{display:flex;gap:6px;justify-content:center;margin-top:2px}
.bq-dots i{width:6px;height:6px;border-radius:50%;background:rgba(55,10,40,.22);transition:.2s}
.bq-dots i.on{width:16px;border-radius:3px;background:var(--coral)}

/* ===== переходы ===== */
.wipe{position:absolute;inset:0;z-index:300;pointer-events:none;transform:translateX(-105%)}
.wipe svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.wipe.in{transform:none;transition:transform .3s cubic-bezier(.6,.05,.3,1)}
.wipe.out{transform:translateX(105%);transition:transform .4s cubic-bezier(.5,0,.3,1)}
.pcard{position:absolute;inset:0;z-index:290;display:grid;place-items:center;text-align:center;background:linear-gradient(180deg,#FFD9C8,#FFE6D6 50%,#FFC9B8);color:var(--plum);visibility:hidden;opacity:0;pointer-events:none}
.pcard.in{visibility:visible;opacity:1;animation:pcin .28s ease both;pointer-events:auto}
.pcard.out{visibility:visible;opacity:1;transform:translateX(-102%);transition:transform .5s cubic-bezier(.6,.05,.3,1)}
@keyframes pcin{from{opacity:0;transform:translateX(14%)}to{opacity:1;transform:none}}
.pc-in{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 24px}
.pc-n{font:700 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#8a6478}
.pc-t{font:700 54px/1 var(--brush);text-wrap:balance}
.pc-y{font:700 84px/.9 var(--brush);color:var(--coral2);position:relative;padding-bottom:10px;transform:rotate(-3deg)}
.pc-y::after{content:"";position:absolute;left:6%;right:6%;bottom:0;height:6px;border-radius:5px;background:var(--coral)}
@media (prefers-reduced-motion:reduce){.pcard.out{transition:opacity .3s;transform:none;opacity:0}}
/* v11: плавнее переходы: слой для открытки, без лишних fade у экранов под «кистью» */
.pcard{will-change:transform,opacity}
.pcard.in.nofx{animation:none}
.wipe{will-change:transform}
.scr{animation:none}
/* v12: фон вокруг колонки на широком экране — тот же, что на экране игры, без фиолетового; края колонки плавно растворяются */
html,body{background:#FFE0D0}
.app{background:linear-gradient(180deg,#FFCDB8 0%,#FFE4D2 36%,#FFD3C0 64%,#F6B6A4 100%)}
body[data-scr="onb"] .app{background:linear-gradient(180deg,#BCD0F2 0%,#E6DCEB 36%,#FFD9C6 64%,#F6B9A6 100%)}
body[data-scr="final"] .app,body[data-scr="friend"] .app{background:linear-gradient(180deg,#FFE7DA 0%,#FFDCCD 50%,#FBC8BB 100%)}
body[data-scr="err"] .app{background:linear-gradient(180deg,#FFF9F4,#FFE9EE)}
/* двор: размытая копия фасада этого двора (assets/bg/sN.webp, 40×64 px), растянутая на весь экран */
body[data-scr="game"] .app{background:#D9A08C url(../assets/bg/s0.webp?v=20261031x) center/100% 100% no-repeat}
body[data-scr="game"][data-yard="1"] .app{background-image:url(../assets/bg/s1.webp?v=20261031x)}
body[data-scr="game"][data-yard="2"] .app{background-image:url(../assets/bg/s2.webp?v=20261031x)}
body[data-scr="game"][data-yard="3"] .app{background-image:url(../assets/bg/s3.webp?v=20261031x)}
body[data-scr="game"][data-yard="4"] .app{background-image:url(../assets/bg/s4.webp?v=20261031x)}
@media (min-width:520px){
  .frame{box-shadow:none;background:transparent;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
  .hud{left:max(32px,env(safe-area-inset-left,0px));right:max(32px,env(safe-area-inset-right,0px))}
  .snd.solo{right:max(32px,env(safe-area-inset-right,0px))}
}
/* v13: финал по референсу — крупные мамы, мягкая дымка вместо арки, спокойные розовые кнопки, зерно */
#sc-final .fin-in{padding-top:calc(var(--top) + 18px);gap:6px;position:relative;z-index:2}
#sc-final .fin-t{font-size:27px;line-height:1.02;max-width:310px;margin:0 auto 2px}
#sc-final .fin-stage{width:calc(100% + 36px);margin:0 -18px;overflow:visible;padding-top:0}
#sc-final .moms{position:relative;z-index:2;padding:0 14px;margin-bottom:-22px;gap:0;-webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,#000 76%,transparent 100%)}
#sc-final .mom-i{width:70px;margin:0 -8px}
#sc-final .mom-i.empty{transform:none}
#sc-final .fin-plate{position:relative;z-index:1;margin:0;padding:34px 24px 0;border-radius:0;box-shadow:none;background:none;display:flex;flex-direction:column;align-items:center;gap:12px}
#sc-final .fin-plate::before{content:"";position:absolute;left:-10%;right:-10%;top:-60px;height:230px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 62% 55% at 50% 38%,rgba(176,110,170,.30),rgba(176,110,170,.14) 55%,rgba(176,110,170,0) 100%)}
#sc-final .fin-s{font-size:18px;line-height:1.34;font-weight:500;color:var(--plum)}
#sc-final .promo{flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:150px;width:auto;padding:8px 22px 7px;border:2px dashed #E88E96;border-radius:18px;background:rgba(255,244,238,.55)}
#sc-final .promo .pl{font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#4A2036}
#sc-final .promo .pc{font:700 26px/1.1 var(--sans);letter-spacing:.06em;margin:2px 0 0}
#sc-final .promo i{font:500 10px/1.1 var(--sans);font-style:normal;color:#4A2036;flex-basis:auto}
#sc-final .btn.coral{height:58px;background:linear-gradient(180deg,#F39399,#E5707C);box-shadow:0 8px 16px rgba(204,86,106,.30),inset 0 1px 0 rgba(255,255,255,.45);font-size:18px;font-weight:600}
#sc-final .btn.coral:active{transform:translateY(2px);box-shadow:0 3px 8px rgba(204,86,106,.30),inset 0 1px 0 rgba(255,255,255,.45)}
#sc-final .btn.small{height:50px;border-radius:26px;background:linear-gradient(180deg,rgba(255,240,236,.9),rgba(255,222,218,.85));box-shadow:0 5px 12px rgba(150,70,90,.18),inset 0 0 0 1.5px rgba(255,255,255,.7);font-weight:600;font-size:13.5px}
#sc-final .btn.small:active{transform:translateY(2px)}
#sc-final .btn.ghost{background:none;box-shadow:none;height:34px;font-size:16px;font-weight:500}
#sc-final .bq-c{border-radius:14px}
#sc-final .bq-c .im{height:84px}
#sc-final .bq{padding-bottom:4px}
/* бумага: лёгкое зерно и виньетка */
#sc-final::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,rgba(255,255,255,0) 58%,rgba(196,110,130,.16) 100%)}
#sc-final::after{content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:url(../assets/grain.webp?v=20261101p) 0 0/160px 160px;opacity:.10}
/* v14: финал по картинке — небо и город по краям, кисть-заголовок с короной, бумажная плашка, стеклянный слайдер */
#sc-final .sky-bg{display:none}
.fin-bg{position:absolute;inset:0;z-index:0;background:url(../assets/bg/fin.webp?v=20261031x) center bottom/cover no-repeat}
.petals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.petals i{position:absolute;top:-24px;width:11px;height:15px;border-radius:70% 0 70% 0;background:#F6A0B2;opacity:.8;animation:petal 9s linear infinite;will-change:transform}
.petals i:nth-child(1){left:8%;animation-delay:-1s}.petals i:nth-child(2){left:22%;animation-delay:-5s;background:#FFC1CC;animation-duration:11s}.petals i:nth-child(3){left:38%;animation-delay:-3s}
.petals i:nth-child(4){left:55%;animation-delay:-7s;background:#FFC1CC}.petals i:nth-child(5){left:70%;animation-delay:-2s;animation-duration:12s}.petals i:nth-child(6){left:84%;animation-delay:-6s}.petals i:nth-child(7){left:94%;animation-delay:-4s;background:#FFC1CC}
@keyframes petal{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(18px,420px) rotate(180deg)}100%{transform:translate(-8px,880px) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.petals{display:none}}
#sc-final::before{display:none}
#sc-final::after{opacity:.14}
#sc-final .fin-in{padding-top:calc(var(--top) + 14px);padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.crown{display:block;width:44px;height:30px;margin:0 auto -2px;transform:rotate(-4deg)}
#sc-final .fin-t{font:700 34px/1.0 var(--brush);color:#4A2036;max-width:330px;margin:0 auto 6px;text-shadow:0 1px 0 rgba(255,255,255,.4)}
#sc-final .fin-t .sc{font-size:56px;line-height:.8;color:#E4556A;vertical-align:-6px;margin:0 2px}
#sc-final .fin-t .sc::after{display:none}
#sc-final .moms{-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%);margin-bottom:-6px}
#sc-final .fin-stage{overflow:visible}
#sc-final .fin-plate{margin:0 2px;padding:16px 16px 12px;border-radius:30px 30px 34px 34px / 34px 34px 40px 40px;gap:8px;background:#FFF3E8;background-image:radial-gradient(rgba(190,120,90,.10) 1px,transparent 1.6px);background-size:6px 6px;box-shadow:0 2px 0 rgba(255,255,255,.8) inset,0 8px 22px rgba(150,80,60,.18);align-items:stretch}
#sc-final .fin-plate::before{display:none}
#sc-final .pl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
#sc-final .fin-s{font:700 21px/1.12 var(--brush);color:#4A2036;text-align:left;flex:1}
#sc-final .promo{flex:none;min-width:0;width:auto;padding:7px 14px 6px;border:2px dashed #EE8A98;border-radius:14px;background:#FFE3E4;transform:rotate(1.5deg)}
#sc-final .promo .pc{font-size:24px}
#sc-final .pl-d{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font:500 15px var(--sans);color:#4A2036}
#sc-final .pl-d .cal{width:20px;height:20px}
#sc-final .pl-d .heart{width:18px;height:17px;margin:0}
.fw-box{margin-top:2px}
.bq-glass{position:relative;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,235,225,.38));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75),0 8px 20px rgba(150,80,60,.12);padding:8px 0}
.bq-glass .bq{width:100%;margin:0;padding:6px 40px 8px;scroll-padding-left:40px;gap:8px}
.bq-glass .bq-c{width:104px;border-radius:16px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8);transition:transform .2s,box-shadow .2s}
.bq-glass .bq-c.sel{transform:scale(1.05);background:#FFF4F2;box-shadow:inset 0 0 0 2px #F4A0AE,0 6px 14px rgba(200,90,110,.22)}
.bq-glass .bq-c .im{height:84px}
.bq-ar{position:absolute;top:50%;margin-top:-20px;z-index:3;width:36px;height:36px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:#FFF6F0;color:#4A2036;box-shadow:0 3px 8px rgba(150,80,60,.22);cursor:pointer}
.bq-ar svg{width:18px;height:18px}.bq-ar.l{left:6px}.bq-ar.r{right:6px}
#sc-final .btn.coral{position:relative;background:linear-gradient(180deg,#F4949B,#E8707C);font:600 20px var(--brush);font-weight:700;font-size:26px;letter-spacing:.01em;color:#fff}
#sc-final .btn.coral .chev{position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px}
#sc-final .btn.small{font:700 18px/1.0 var(--brush);background:rgba(255,238,232,.85)}
#sc-final .btn.small svg{color:#4A2036}
#sc-final .btn.ghost{font:700 22px var(--brush);color:#4A2036;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;height:36px}
#sc-final .fin-bg{position:absolute!important;z-index:0!important;left:0;right:0;top:0;height:100%;min-height:844px}
#sc-final .fin-t{font-size:31px;max-width:350px;margin-top:2px}
#sc-final .fin-t .sc{font-size:50px}
#sc-final .petals{position:absolute!important}
/* v15: финал заполняет всю высоту экрана (на высоких телефонах не остаётся пустоты), крупнее заголовок и мамы */
#sc-final{display:none;overflow-y:auto}#sc-final.on{display:block}
#sc-final .fin-in{min-height:100%;justify-content:space-between;gap:clamp(8px,1.7vh,22px);padding-top:calc(var(--top) + clamp(10px,2.2vh,30px));padding-bottom:calc(clamp(14px,2.4vh,34px) + env(safe-area-inset-bottom,0px))}
#sc-final .fin-t{font-size:clamp(31px,4.4vh,42px);max-width:310px;line-height:1.02}
#sc-final .fin-t .sc{font-size:clamp(52px,7.4vh,70px)}
#sc-final .crown{width:clamp(44px,6vh,58px);height:auto}
#sc-final .mom-i{width:clamp(66px,19vw,86px);margin:0 -8px}
#sc-final .fin-plate{padding:clamp(14px,2vh,22px) 16px clamp(10px,1.6vh,16px)}
#sc-final .fin-s{font-size:clamp(21px,2.9vh,26px)}
#sc-final .pl-d{font-size:clamp(15px,1.9vh,17px)}
.bq-glass .bq-c{width:clamp(104px,28vw,124px)}
.bq-glass .bq-c .im{height:clamp(84px,11vh,112px)}
#sc-final .btn.coral{height:clamp(58px,7.2vh,68px)}
#sc-final .fin-t{font-size:clamp(28px,3.8vh,38px)}
#sc-final .fin-t .sc{font-size:clamp(46px,6.2vh,60px)}
#sc-final .crown{width:clamp(38px,5vh,50px)}
#sc-final .mom-i{width:clamp(62px,17.5vw,78px);margin:0 -8px}
#sc-final .fin-plate{padding:clamp(12px,1.7vh,18px) 16px clamp(8px,1.3vh,12px);gap:6px}
#sc-final .fin-s{font-size:clamp(20px,2.6vh,24px)}
.bq-glass .bq-c{width:clamp(100px,26vw,116px)}
.bq-glass .bq-c .im{height:clamp(68px,9vh,96px)}
.bq-glass{padding:6px 0}
#sc-final .btn.coral{height:clamp(52px,6.2vh,62px)}
#sc-final .btn.small{height:clamp(44px,5.4vh,50px)}
#sc-final .btn.ghost{height:30px}
#sc-final .fin-t{max-width:350px}
#sc-final .moms{margin-bottom:-10px}
#sc-final .fin-in{gap:clamp(6px,1.2vh,18px);padding-top:calc(var(--top) + clamp(8px,1.4vh,26px))}
#sc-final .fin-t{font-size:clamp(27px,3.5vh,36px)}
#sc-final .fin-t .sc{font-size:clamp(44px,5.8vh,58px)}
.bq-glass .bq-c .im{height:clamp(60px,7.8vh,92px)}
#sc-final .btn.coral{height:clamp(50px,5.9vh,60px)}
#sc-final .btn.small{height:clamp(42px,5vh,48px)}
/* v16: финал по референсу — гуашевый фон (Grok, fin2.webp), заголовок в три строки с лучами, аккуратный шеврон, «Еще раз» без плашки и обрезки */
.fin-bg{background:url(../assets/bg/fin2.webp?v=20261031y) center bottom/cover no-repeat}
#sc-final .fin-t{position:relative;max-width:286px;font-size:clamp(30px,4.3vh,38px);line-height:1}
#sc-final .fin-t::before,#sc-final .fin-t::after{content:"";position:absolute;top:22%;width:30px;height:38px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 40'%3E%3Cpath d='M27 8L9 2M29 20H6M27 32L11 39' fill='none' stroke='%23F0788A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
#sc-final .fin-t::before{left:-40px}
#sc-final .fin-t::after{right:-40px;transform:scaleX(-1)}
#sc-final .btn.coral .chev{border:0;transform:none;margin-left:0;color:#fff}
#sc-final .btn.small.ghost{background:none;box-shadow:none;padding:0 28px;overflow:visible;line-height:1.2;height:38px}
#sc-final .btn.ghost span{overflow:visible;padding:0 6px}
#sc-final .fin-t{max-width:300px}
/* v17: персиковая палитра, дома за мамами (fin3.webp), воздух по краям, чистый низ под слайдером */
.fin-bg{background:url(../assets/bg/fin3.webp?v=20261101x) center bottom/cover no-repeat}
#sc-final .fin-t .sc{color:#EA5F6B}
#sc-final .fin-plate{margin:0 24px;background-color:#FFEEDF;background-image:radial-gradient(rgba(205,125,80,.10) 1px,transparent 1.6px);box-shadow:0 2px 0 rgba(255,255,255,.85) inset,0 10px 24px rgba(190,100,60,.16)}
#sc-final .promo{background:#FFDDD0;border-color:#F08E7C}
#sc-final .fw-box{margin-left:6px;margin-right:6px}
#sc-final .bq-glass{background:linear-gradient(180deg,rgba(255,246,236,.62),rgba(255,226,208,.42));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8),0 8px 20px rgba(190,100,60,.14)}
#sc-final .bq-glass .bq-c{background:rgba(255,248,240,.72)}
#sc-final .bq-glass .bq-c .im{background:#FFEBDD!important}
#sc-final .bq-glass .bq-c.sel{background:#FFF3EA;box-shadow:inset 0 0 0 2px #F29A88,0 6px 14px rgba(220,110,80,.22)}
#sc-final .btn.coral{margin-left:22px;margin-right:22px;width:calc(100% - 44px);background:linear-gradient(180deg,#F7A08F,#EC7A70);box-shadow:0 8px 16px rgba(214,100,80,.30),inset 0 1px 0 rgba(255,255,255,.5)}
#sc-final .row3{padding:0 26px}
#sc-final .btn.small{background:linear-gradient(180deg,rgba(255,240,229,.92),rgba(255,224,208,.88));box-shadow:0 5px 12px rgba(190,100,60,.18),inset 0 0 0 1.5px rgba(255,255,255,.75)}
#sc-final .btn.small.ghost{background:none;box-shadow:none}
#sc-final .fw-box{width:calc(100% - 8px);margin-left:auto;margin-right:auto}
/* v18: фото букетов на карточках слайдера */
.bq-c .im img{display:block;width:100%;height:100%;object-fit:contain;padding:5px 4px 2px;box-sizing:border-box;filter:drop-shadow(0 4px 5px rgba(150,70,50,.22))}
#sc-final .bq-glass .bq-c .im{background:linear-gradient(180deg,#FFF8F1,#FFEEE2)!important}
.bq-c .im{position:relative}
.bq-c .im img{position:absolute;left:0;top:0;width:100%;height:100%;padding:4px 6px 3px}
/* v19: фон финала — street-bg-phone-tall (fin4.webp) */
.fin-bg,#sc-final .fin-bg{background-image:url(../assets/bg/fin4.webp?v=20261101x)}
/* v20: палитра плашек, карточек и кнопок снята с референса (персиковая, глубже кремовой) */
#sc-final .fin-plate{background-color:#FDD9C2;background-image:radial-gradient(rgba(190,105,70,.10) 1px,transparent 1.6px);box-shadow:0 2px 0 rgba(255,255,255,.55) inset,0 10px 24px rgba(190,95,60,.18)}
#sc-final .promo{background:#FFD6CA;border-color:#EE8A86}
#sc-final .bq-glass{background:linear-gradient(180deg,rgba(255,236,222,.5),rgba(255,214,192,.38))}
#sc-final .bq-glass .bq-c{background:rgba(249,208,187,.85)}
#sc-final .bq-glass .bq-c .im{background:linear-gradient(180deg,#FBD6C0,#F8CBB4)!important}
#sc-final .bq-glass .bq-c.sel{background:#FDD9C3;box-shadow:inset 0 0 0 2px #EE8A86,0 6px 14px rgba(220,100,80,.24)}
#sc-final .bq-glass .bq-c.sel .im{background:linear-gradient(180deg,#FEE0CD,#FDD6BF)!important}
#sc-final .btn.coral{background:linear-gradient(180deg,#F6948F,#EA767A);box-shadow:0 8px 16px rgba(214,90,90,.30),inset 0 1px 0 rgba(255,255,255,.5)}
#sc-final .btn.small{background:linear-gradient(180deg,rgba(254,220,205,.95),rgba(251,201,182,.92));box-shadow:0 5px 12px rgba(190,95,60,.20),inset 0 0 0 1.5px rgba(255,255,255,.6)}
#sc-final .btn.small.ghost{background:none;box-shadow:none}
#sc-final .fw-box{width:100%;margin-left:0;margin-right:0}
/* v21: три букета в ряд, без слайдера (статичная сетка, без скролла, фильтров и слушателей) */
#sc-final .bq-glass{padding:10px 10px 12px;border-radius:26px}
#sc-final .bq-glass .bq{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:8px;align-items:end;overflow:visible;width:100%;margin:0;padding:0;scroll-snap-type:none}
#sc-final .bq-glass .bq-c{width:auto;min-width:0;height:auto;transform:none;scroll-snap-align:none;transition:none}
#sc-final .bq-glass .bq-c:active{transform:translateY(2px)}
#sc-final .bq-glass .bq-c .im{height:clamp(104px,13vh,128px)}
#sc-final .bq-glass .bq-c .im img{padding:2px 2px 4px;filter:none;z-index:1}
#sc-final .bq-glass .bq-c .im::after{content:"";position:absolute;left:20%;right:20%;bottom:2px;height:9px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(150,70,50,.30),rgba(150,70,50,0) 70%)}
#sc-final .bq-glass .bq-c b{font-size:12px;line-height:1.12;min-height:2.3em;padding:6px 8px 1px}
#sc-final .bq-glass .bq-c span{font-size:12px;padding:0 8px 8px}
#sc-final .bq-glass .bq-c:nth-child(2){background:#FDD9C3;box-shadow:inset 0 0 0 2px #EE8A86,0 8px 16px rgba(220,100,80,.24);margin-bottom:6px}
#sc-final .bq-glass .bq-c:nth-child(2) .im{background:linear-gradient(180deg,#FEE0CD,#FDD6BF)!important;height:clamp(114px,14vh,138px)}
/* v22: чтобы финал с тремя букетами помещался на экран 844 без прокрутки */
#sc-final .bq-glass{padding:8px 9px 9px}
#sc-final .bq-glass .bq-c .im{height:clamp(92px,11.2vh,116px)}
#sc-final .bq-glass .bq-c:nth-child(2) .im{height:clamp(100px,12.2vh,126px)}
#sc-final .bq-glass .bq-c b{padding:4px 8px 0}
#sc-final .bq-glass .bq-c span{padding:0 8px 6px}
#sc-final .mom-i{width:clamp(58px,16.4vw,76px)}
#sc-final .btn.ghost{height:30px}
#sc-final .fin-in{padding-bottom:calc(clamp(8px,1.4vh,22px) + env(safe-area-inset-bottom,0px))}
/* v23: букеты без внешней плашки и карточек, плашка без сетки, кнопки шрифтом CoFo Sans, мамы лёгкой пирамидкой */
#sc-final .fin-plate{background-image:none}
#sc-final .bq-glass{background:none;box-shadow:none;border-radius:0;padding:0}
#sc-final .bq-glass .bq{grid-template-columns:1fr 1.14fr 1fr;gap:4px;align-items:end}
#sc-final .bq-glass .bq-c,#sc-final .bq-glass .bq-c:nth-child(2){background:none!important;box-shadow:none!important;border-radius:0;overflow:visible;text-align:center;margin-bottom:0}
#sc-final .bq-glass .bq-c .im,#sc-final .bq-glass .bq-c:nth-child(2) .im{background:none!important;overflow:visible}
#sc-final .bq-glass .bq-c .im{height:clamp(108px,13.4vh,134px)}
#sc-final .bq-glass .bq-c:nth-child(2) .im{height:clamp(122px,15vh,150px)}
#sc-final .bq-glass .bq-c .im::after{left:14%;right:14%;bottom:0;height:10px}
#sc-final .bq-glass .bq-c b{font:700 13px/1.12 var(--sans);min-height:2.3em;padding:6px 2px 4px;color:var(--plum);text-align:center}
#sc-final .bq-glass .bq-c span{display:inline-block;font:700 12px/1 var(--sans);padding:5px 11px;border-radius:999px;background:rgba(255,240,230,.82);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7),0 3px 8px rgba(190,95,60,.16);color:var(--plum)}
#sc-final .bq-glass .bq-c:active{transform:translateY(2px)}
#sc-final .btn.coral{font:700 19px/1 var(--sans);letter-spacing:.01em}
#sc-final .btn.small{font:700 13.5px/1.15 var(--sans);letter-spacing:.005em}
#sc-final .btn.ghost{font:600 16px/1 var(--sans);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
#sc-final .moms .mom-i:nth-child(1),#sc-final .moms .mom-i:nth-child(6){transform:translateY(8px)}
#sc-final .moms .mom-i:nth-child(2),#sc-final .moms .mom-i:nth-child(5){transform:translateY(4px)}
/* v24: фон старта и правил — картинка fin4 вместо домов skybg; цены букетов компактно */
#sc-start .sky-bg,#sc-onb .sky-bg{top:0;aspect-ratio:auto;height:100%;background:url(../assets/bg/fin4.webp?v=20261101x) center bottom/cover no-repeat;opacity:1}
#sc-start .cloud,#sc-onb .cloud,#sc-start .fol{display:none}
#sc-final .bq-glass .bq-c span{display:block;width:fit-content;margin:0 auto}
/* v25: плавный уход плашек. «Кисть» получала класс out и попадала под .out{display:none} карточки исхода (исчезала мгновенно);
   открытка после pcin(both) уходила без перехода, теперь уход — собственная анимация */
.wipe.out{display:block}
@keyframes pcout{from{transform:none}to{transform:translateX(-102%)}}
.pcard.out{animation:pcout .5s cubic-bezier(.6,.05,.3,1) both;transition:none}
@media (prefers-reduced-motion:reduce){.pcard.out{animation:none;transition:opacity .3s;transform:none;opacity:0}}
/* v26: финал без прокрутки. Заголовок -10%, мамы выше и просторнее, плашка -10% и текст по центру, всё поднято, остаток места внизу */
#sc-final{overflow:hidden}
#sc-final .fin-in{justify-content:flex-start;gap:clamp(6px,1.1vh,12px);min-height:100%;padding-top:calc(var(--top) + clamp(6px,1vh,16px))}
#sc-final .crown{width:clamp(34px,4.5vh,45px)}
#sc-final .fin-t{font-size:clamp(24px,3.15vh,32px);max-width:272px;margin:0 auto 2px}
#sc-final .fin-t .sc{font-size:clamp(40px,5.2vh,52px)}
#sc-final .fin-t::before,#sc-final .fin-t::after{width:27px;height:34px}
#sc-final .fin-t::before{left:-36px}#sc-final .fin-t::after{right:-36px}
#sc-final .mom-i{width:clamp(58px,16.4vw,76px);margin:0 -3px}
#sc-final .moms{margin-bottom:-10px}
#sc-final .fin-plate{margin:0 34px;padding:clamp(10px,1.5vh,15px) 14px clamp(7px,1.1vh,11px);gap:5px}
#sc-final .fin-s{font-size:clamp(18px,2.35vh,22px);text-align:center}
#sc-final .promo{padding:6px 12px 5px}
#sc-final .promo .pc{font-size:22px}
#sc-final .promo .pl,#sc-final .promo i{font-size:9px}
#sc-final .pl-d{font-size:clamp(13.5px,1.75vh,15.5px)}
#sc-final .pl-d .cal{width:18px;height:18px}#sc-final .pl-d .heart{width:16px;height:15px}
/* v27: мамы на 15% меньше и выше, текст плашки крупнее */
#sc-final .mom-i{width:clamp(50px,13.9vw,65px);margin:0 1px}
#sc-final .moms{margin-top:-12px;margin-bottom:-6px}
#sc-final .moms .mom-i:nth-child(1),#sc-final .moms .mom-i:nth-child(6){transform:translateY(7px)}
#sc-final .moms .mom-i:nth-child(2),#sc-final .moms .mom-i:nth-child(5){transform:translateY(3px)}
#sc-final .fin-s{font-size:clamp(20px,2.65vh,24px)}

/* v28: коралловая «кисть» с тайлом из цветочков (тон в тон, чуть светлее коралла) */
.wipe::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='%23FF9686'%3E%3Cpath transform='translate(8 7) rotate(-12 11 13) scale(.165)' d='M123.754 94.1057C99.253 94.1057 79.2504 116.325 68.0046 146.778V131.047C68.0046 104.337 57.7584 94.1057 31.7582 94.1057H0C4.99814 133.293 31.7482 162 68.7543 162C103.501 162 134 132.295 134 104.337C134 97.1002 131.001 94.1057 123.754 94.1057ZM123.254 29.4555C123.254 14.9723 120.005 3.49353 113.758 3.49353C107.51 3.49353 98.7532 13.9741 91.256 28.7068C85.2482 11.2292 78.0009 0 70.5037 0C63.0065 0 53.2501 11.2292 44.2535 28.7068C37.0062 12.976 28.4994 4.99076 23.0014 4.99076C18.2532 4.99076 15.5042 9.98152 13.505 17.7172C11.5057 25.4529 10.756 35.1948 10.756 43.4296C10.756 71.8869 39.7552 87.6177 68.7543 87.6177C93.755 87.6177 110.259 79.6325 117.256 66.6466C122.754 56.6651 123.254 44.6773 123.254 29.4555Z'/%3E%3Cpath transform='translate(52 50) rotate(16 8 9.5) scale(.12)' d='M123.754 94.1057C99.253 94.1057 79.2504 116.325 68.0046 146.778V131.047C68.0046 104.337 57.7584 94.1057 31.7582 94.1057H0C4.99814 133.293 31.7482 162 68.7543 162C103.501 162 134 132.295 134 104.337C134 97.1002 131.001 94.1057 123.754 94.1057ZM123.254 29.4555C123.254 14.9723 120.005 3.49353 113.758 3.49353C107.51 3.49353 98.7532 13.9741 91.256 28.7068C85.2482 11.2292 78.0009 0 70.5037 0C63.0065 0 53.2501 11.2292 44.2535 28.7068C37.0062 12.976 28.4994 4.99076 23.0014 4.99076C18.2532 4.99076 15.5042 9.98152 13.505 17.7172C11.5057 25.4529 10.756 35.1948 10.756 43.4296C10.756 71.8869 39.7552 87.6177 68.7543 87.6177C93.755 87.6177 110.259 79.6325 117.256 66.6466C122.754 56.6651 123.254 44.6773 123.254 29.4555Z'/%3E%3Ccircle cx='58' cy='14' r='2.1'/%3E%3Ccircle cx='16' cy='62' r='2.1'/%3E%3Ccircle cx='80' cy='34' r='1.5'/%3E%3Ccircle cx='36' cy='44' r='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 0/88px 88px repeat}

/* v29: открытка двора с тайлом из мячей (прозрачнее, чем цветочки на «кисти») */
.pcard{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cg opacity='.07' fill='%23370A28'%3E%3CclipPath id='c1'%3E%3Ccircle cx='28' cy='28' r='16'/%3E%3C/clipPath%3E%3Ccircle cx='28' cy='28' r='16' fill='none' stroke='%23370A28' stroke-width='1.5'/%3E%3Cpolygon points='28.00,22.24 33.48,26.22 31.39,32.66 24.61,32.66 22.52,26.22'/%3E%3Cg fill='none' stroke='%23370A28' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M28.00 22.24L28.00 17.76'/%3E%3Cpath d='M33.48 26.22L37.74 24.84'/%3E%3Cpath d='M31.39 32.66L34.02 36.28'/%3E%3Cpath d='M24.61 32.66L21.98 36.28'/%3E%3Cpath d='M22.52 26.22L18.26 24.84'/%3E%3C/g%3E%3Cg clip-path='url%28%23c1%29'%3E%3Cpolygon points='28.00,17.76 22.52,13.78 24.61,7.34 31.39,7.34 33.48,13.78'/%3E%3Cpolygon points='37.74,24.84 39.83,18.40 46.60,18.40 48.69,24.84 43.22,28.82'/%3E%3Cpolygon points='34.02,36.28 40.79,36.28 42.88,42.72 37.40,46.70 31.93,42.72'/%3E%3Cpolygon points='21.98,36.28 24.07,42.72 18.60,46.70 13.12,42.72 15.21,36.28'/%3E%3Cpolygon points='18.26,24.84 12.78,28.82 7.31,24.84 9.40,18.40 16.17,18.40'/%3E%3C/g%3E%3CclipPath id='c2'%3E%3Ccircle cx='84' cy='84' r='16'/%3E%3C/clipPath%3E%3Ccircle cx='84' cy='84' r='16' fill='none' stroke='%23370A28' stroke-width='1.5'/%3E%3Cpolygon points='87.39,79.34 89.48,85.78 84.00,89.76 78.52,85.78 80.61,79.34'/%3E%3Cg fill='none' stroke='%23370A28' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M87.39 79.34L90.02 75.72'/%3E%3Cpath d='M89.48 85.78L93.74 87.16'/%3E%3Cpath d='M84.00 89.76L84.00 94.24'/%3E%3Cpath d='M78.52 85.78L74.26 87.16'/%3E%3Cpath d='M80.61 79.34L77.98 75.72'/%3E%3C/g%3E%3Cg clip-path='url%28%23c2%29'%3E%3Cpolygon points='90.02,75.72 87.93,69.28 93.40,65.30 98.88,69.28 96.79,75.72'/%3E%3Cpolygon points='93.74,87.16 99.22,83.18 104.69,87.16 102.60,93.60 95.83,93.60'/%3E%3Cpolygon points='84.00,94.24 89.48,98.22 87.39,104.66 80.61,104.66 78.52,98.22'/%3E%3Cpolygon points='74.26,87.16 72.17,93.60 65.40,93.60 63.31,87.16 68.78,83.18'/%3E%3Cpolygon points='77.98,75.72 71.21,75.72 69.12,69.28 74.60,65.30 80.07,69.28'/%3E%3C/g%3E%3Ccircle cx='84' cy='28' r='2.4'/%3E%3Ccircle cx='28' cy='84' r='2.4'/%3E%3C/g%3E%3C/svg%3E") 0 0/112px 112px repeat,linear-gradient(180deg,#FFD9C8,#FFE6D6 50%,#FFC9B8)}
/* v30: букет + нижняя плашка с названием и ценой (цвет как у плашки «Все мамы помогли»), наезжает на низ букета; кнопки на всю ширину */
#sc-final .bq-glass .bq{gap:7px;align-items:end}
#sc-final .bq-glass .bq-c{position:relative;display:block}
#sc-final .bq-glass .bq-c .im{height:clamp(116px,14.2vh,142px);z-index:0}
#sc-final .bq-glass .bq-c:nth-child(2) .im{height:clamp(130px,16vh,160px)}
#sc-final .bq-glass .bq-c .im::after{display:none}
#sc-final .bq-glass .bq-c .im img{padding:0 2px}
#sc-final .bq-glass .bq-c .inf{position:relative;z-index:2;margin-top:-26px;padding:8px 6px 8px;background:#FDD9C2;border-radius:18px;box-shadow:0 2px 0 rgba(255,255,255,.55) inset,0 8px 16px rgba(190,95,60,.22);display:flex;flex-direction:column;align-items:center;gap:2px}
#sc-final .bq-glass .bq-c b{font:700 12.5px/1.12 var(--sans);min-height:2.25em;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--plum)}
#sc-final .bq-glass .bq-c span{display:block;width:auto;margin:0;padding:0;background:none;box-shadow:none;border-radius:0;font:800 13px/1.1 var(--sans);color:var(--plum)}
#sc-final .btn.coral{margin-left:0;margin-right:0;width:100%}
#sc-final .row3{padding:0}
/* v30b: фото букетов крупнее за счёт сэкономленной высоты */
#sc-final .bq-glass .bq-c .im{height:clamp(128px,15.8vh,156px)}
#sc-final .bq-glass .bq-c:nth-child(2) .im{height:clamp(146px,17.8vh,176px)}
#sc-final .bq-glass .bq-c .im img{left:-6%;width:112%;padding:0}
/* v31: подложка финала = высота экрана, прижата к низу (раньше min-height:844px обрезал нижние цветы на невысоких экранах) */
#sc-final .fin-bg{top:0;bottom:0;height:100%;min-height:0;background-position:center bottom}
/* v32: печать «Гол!/Взял» выше (над воротами, а не у мяча); на старте картинка прижата к верху, чтобы было видно небо */
.big{top:21%}
#sc-start .sky-bg{background-position:center top}
/* v33: старт — больше неба, общий высокий фон (небо → двор), который прокручивается на «Бить»; новый мяч; тексты ниже и крупнее */
.bgwrap{position:absolute;inset:0;z-index:70;overflow:hidden;display:none;pointer-events:none}
body[data-scr="start"] .bgwrap,body[data-scr="onb"] .bgwrap{display:block}
.bgscroll{position:absolute;left:0;top:0;width:100%;height:var(--bgH,1207px);background:url(../assets/bg/startbg.webp?v=20261101ae) center top/cover no-repeat;will-change:transform;transform:translateY(0);transition:transform 1s cubic-bezier(.55,0,.2,1)}
body[data-scr="onb"] .bgscroll{transform:translateY(calc(-1 * var(--bgD,0px)))}
#sc-start,#sc-onb{background:none}
#sc-start .sky-bg,#sc-onb .sky-bg{display:none}
#sc-start .st-title{margin-top:16px;margin-bottom:38px}
#sc-start .st-sub{font:600 21px/1.28 var(--sans);color:#4A2036}
#sc-start .st-ball{width:100px;height:100px;margin-left:-50px;bottom:calc(108px + env(safe-area-inset-bottom,0px))}
#sc-start .st-ball img{display:block;width:100%;height:100%;position:relative;z-index:1;pointer-events:none}
#sc-start .logos,#sc-start .st-title,#sc-start .st-sub,#sc-start .st-ball{transition:opacity .3s ease,transform .3s ease}
#sc-start .big-btn{transition:transform .08s,box-shadow .08s,opacity .3s ease}
#sc-start.leaving .logos,#sc-start.leaving .st-title,#sc-start.leaving .st-sub,#sc-start.leaving .st-ball{opacity:0;transform:translateY(-14px)}
#sc-start.leaving .big-btn{opacity:0;transform:translateX(-50%) translateY(14px);pointer-events:none}
@keyframes onbin{from{opacity:0;transform:translateY(34px) scale(.97)}}
@keyframes onbinb{from{opacity:0;transform:translateX(-50%) translateY(26px)}}
#sc-onb.intro .onb-cap{animation:onbin .5s ease .45s backwards}
#sc-onb.intro .card:nth-child(1){animation:onbin .55s cubic-bezier(.2,.8,.2,1) .6s backwards}
#sc-onb.intro .card:nth-child(2){animation:onbin .55s cubic-bezier(.2,.8,.2,1) .82s backwards}
#sc-onb.intro .card:nth-child(3){animation:onbin .55s cubic-bezier(.2,.8,.2,1) 1.04s backwards}
#sc-onb.intro .big-btn{animation:onbinb .5s ease 1.3s backwards}
/* v33b: компактный старт и правила на очень маленьких экранах (320x568 и т.п.) */
@media (max-width:350px),(max-height:620px){
  #sc-start .st-title{font-size:50px;margin-bottom:26px}
  #sc-start .st-sub{font-size:18px}
  #sc-start .st-ball{width:74px;height:74px;margin-left:-37px;bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  #sc-onb .cards{gap:8px;padding-top:6px}
  #sc-onb .card{min-height:104px;padding:10px 92px 10px 22px}
  #sc-onb .card p{font-size:13.5px}
  #sc-onb .card .pic{width:74px;right:6px;top:6px;bottom:6px}
}
@media (prefers-reduced-motion:reduce){.bgscroll{transition:none}#sc-onb.intro .onb-cap,#sc-onb.intro .card,#sc-onb.intro .big-btn{animation:none}}

/* v30 (31.10 вечер): финал. Блок с короной и заголовком опущен (~5% высоты экрана), мамы ещё ниже, чтобы не касались заголовка
   (~8% всего), кнопки внизу чуть ниже. «из 5» теперь обычным текстом заголовка, красной и крупной остаётся только цифра, которая
   добегает от 0 до N после ухода плашки перехода (js/screens.js: countUp). Если контент выше экрана, fitFinal() его сожмёт. */
#sc-final .fin-in{padding-top:calc(var(--top) + clamp(6px,1vh,16px) + 5vh)}
#sc-final .fin-stage{margin-top:3.2vh}
#sc-final .fin-stage{margin-top:1.4vh}
#sc-final .bq-glass .bq-c .im{height:clamp(98px,11.2vh,120px)}
#sc-final .bq-glass .bq-c:nth-child(2) .im{height:clamp(110px,12.6vh,136px)}
#sc-final #f-order,#sc-final .row3{width:calc(100% - 12px);max-width:none;margin-left:6px;margin-right:6px}
#sc-final #f-order{margin-top:5.8vh;height:clamp(60px,7.4vh,68px);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 22px}
#sc-final #f-order .chev{position:static;width:18px;height:18px;margin:0;flex:none}
#sc-final #f-order span{overflow:visible}
#sc-final .row3 .btn.small{height:clamp(54px,6.6vh,60px);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px}
#sc-final .row3 .btn.small svg{width:26px;height:26px;flex:none;overflow:visible}
#sc-final .row3 .btn.small span{max-width:none;text-align:left;white-space:normal;overflow:visible}
#sc-final .fin-in{padding-top:calc(var(--top) + clamp(6px,1vh,16px) + 3.6vh)}
#sc-final .fin-stage{margin-top:2.8vh}
#sc-final .crown{width:clamp(36px,4.8vh,48px)}
#sc-final .fin-t{font-size:clamp(26px,3.37vh,34px);max-width:292px}
#sc-final .fin-t .sc{font-size:clamp(43px,5.56vh,56px)}
#sc-final .fin-t::before,#sc-final .fin-t::after{width:29px;height:36px}
#sc-final .fin-t::before{left:-39px}#sc-final .fin-t::after{right:-39px}
#sc-final .moms{margin-top:2px;margin-bottom:-20px;z-index:1}
#sc-final .fin-plate{z-index:2}
#sc-final .fin-t .sc{display:inline-block;min-width:.62em;text-align:center;transform-origin:50% 72%}
#sc-final .fin-t .sc.pop{animation:scpop .34s cubic-bezier(.2,1.6,.4,1)}
@keyframes scpop{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#sc-final .fin-t .sc.pop{animation:none}}
/* v30: нижняя подсказка полупрозрачная */
.act .pill.hint{background:rgba(255,246,236,.48);box-shadow:0 4px 14px rgba(55,10,40,.1),inset 0 0 0 1.5px rgba(255,255,255,.5)}
.act .pill.hint.late{background:rgba(255,217,208,.55)}

/* плашка-подсказка внизу: прозрачнее на 25%, без обводки, меньше скругление */
.act .pill.hint{background:rgba(255,246,236,.36);box-shadow:0 4px 14px rgba(55,10,40,.1);border-radius:22px}
.act .pill.hint.late{background:rgba(255,217,208,.41)}

/* шапка по концепту: две мягкие полупрозрачные плашки; счёт — пять кружков вместо мячей, звук внутри правой плашки */
.hud .chip{height:46px;border-radius:23px;padding:0 15px 0 12px;background:rgba(255,248,240,.72);box-shadow:0 2px 10px rgba(55,10,40,.08);color:#4A2038;font:700 13px/1.15 var(--sans)}
.hud .chip svg{width:13px;height:17px}
.hudr{height:46px;border-radius:23px;background:rgba(255,248,240,.72);box-shadow:0 2px 10px rgba(55,10,40,.08)}
.hudr .balls{height:46px;gap:7px;padding:0 4px 0 15px}
.hudr .bl{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.6px rgba(232,150,150,.55)}
.hudr .bl svg{display:none}
.hudr .bl.fut{opacity:1;filter:none}
.hudr .bl.cur{background:#FF6B5E;box-shadow:0 0 0 3px rgba(255,107,94,.28)}
.hudr .bl.cur::after{display:none}
.hudr .bl:not(.fut):not(.cur):not(.miss){background:#FF6B5E;box-shadow:none}
.hudr .bl.miss{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.6px rgba(232,150,150,.55);opacity:1}
.hudr .bl.miss::after{left:2px;right:2px;height:2px;margin-top:-1px;background:#E58A8A}
.hudr .snd.in{width:42px;height:46px;margin-left:4px;border-radius:0 23px 23px 0}
.hudr .snd.in::before{top:13px;bottom:13px;background:rgba(55,10,40,.12)}

/* v34 (04.11, чат «онбординг»): плашки по образцу. Бумажная карточка слева, картинка-плитка справа
   выглядывает из-под бумаги (уже, на всю высоту), число внутри карточки, текст крупнее. Откат: shots/style.before-v34.css */
#sc-onb .cards{gap:16px;max-width:362px;padding:8px 8px 0 8px}
#sc-onb .card{background:none;box-shadow:none;border-radius:0;min-height:112px;padding:0;gap:0;align-items:stretch}
#sc-onb .card::before{content:"";position:absolute;left:0;top:0;bottom:0;right:64px;z-index:1;border-radius:14px 12px 12px 14px;background:linear-gradient(180deg,#FFF2E6,#FDE3D0);box-shadow:0 8px 16px rgba(90,40,30,.16),inset 0 1px 0 rgba(255,255,255,.8)}
#sc-onb .card p{position:relative;z-index:2;margin:0;padding:16px 74px 16px 54px;align-self:center;font:500 17px/1.22 var(--sans);color:#4A2036;text-wrap:balance}
#sc-onb .card .num{z-index:3;left:14px;top:14px;width:26px;height:26px;font-size:14px;background:#EE7B76;box-shadow:0 2px 4px rgba(180,70,55,.28)}
#sc-onb .card .pic{z-index:0;right:0;top:0;bottom:0;width:76px}
#sc-onb .p-kid{border-radius:0 16px 16px 0;background:linear-gradient(180deg,#C9D6F3 0%,#F1DADF 68%,#F8D3C0 100%)}
#sc-onb .p-kid img{height:104%;margin-top:0}
#sc-onb .netbox{border-radius:0 16px 16px 0;background:linear-gradient(180deg,#EDA394 0%,#E3887B 100%)}
#sc-onb .netbox img{mix-blend-mode:normal;opacity:.95;object-fit:cover}
#sc-onb .p-kp .who{height:80%;bottom:4px}
#sc-onb .p-tap .hand{right:14px;bottom:-12px;width:34px}
#sc-onb .p-tap::after{content:"";position:absolute;left:33px;top:calc(100% - 29px);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#F25C54 0 45%,rgba(242,92,84,.38) 47% 100%);box-shadow:0 0 0 3px rgba(255,255,255,.55)}
@media (max-width:350px),(max-height:620px){
  #sc-onb .cards{gap:8px}
  #sc-onb .card{min-height:92px}
  #sc-onb .card p{font-size:14.5px;padding:10px 64px 10px 48px}
  #sc-onb .card::before{right:54px}
  #sc-onb .card .pic{width:66px;right:0;top:0;bottom:0}
}

/* v35: картинки онбординга — кадры из самой игры (мальчик со спины с мячом, вратарь крупно, ячейка с рукой) */
#sc-onb .p-kid,#sc-onb .p-kp,#sc-onb .p-tap{border-radius:0 16px 16px 0;background:#EBB7A4;overflow:hidden}
#sc-onb .pic .shot{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;margin:0;transform:none}
#sc-onb .p-tap::after{display:none}

/* v36: онбординг — картинки шире, плашки выше */
#sc-onb .cards{gap:14px}
#sc-onb .card{min-height:134px}
#sc-onb .card .pic{width:106px}
#sc-onb .card::before{right:90px}
#sc-onb .card p{padding:16px 112px 16px 54px;font-size:17px}
@media (max-width:350px),(max-height:620px){
  #sc-onb .cards{gap:8px}
  #sc-onb .card{min-height:100px}
  #sc-onb .card .pic{width:80px}
  #sc-onb .card::before{right:66px}
  #sc-onb .card p{padding:10px 84px 10px 48px;font-size:14.5px}
}

/* v40-gen friend-comp: дубли правил #sc-final для #sc-friend (экран друга) */
#sc-friend .sky-bg{display:none}
#sc-friend .fin-in{padding-top:calc(var(--top) + 26px);gap:6px}
#sc-friend .fin-t{margin:0 0 8px}
#sc-friend .fin-t{font-size:29px}
/* v10: композиция финала — заголовок, мамы на полукруглой плашке с текстом и промокодом, слайдер букетов */
#sc-friend .fin-in{gap:8px;padding-top:calc(var(--top) + 22px)}
#sc-friend .fin-t{font-size:26px;line-height:1.02;margin:0 0 4px}
/* v13: финал по референсу — крупные мамы, мягкая дымка вместо арки, спокойные розовые кнопки, зерно */
#sc-friend .fin-in{padding-top:calc(var(--top) + 18px);gap:6px;position:relative;z-index:2}
#sc-friend .fin-t{font-size:27px;line-height:1.02;max-width:310px;margin:0 auto 2px}
#sc-friend .fin-stage{width:calc(100% + 36px);margin:0 -18px;overflow:visible;padding-top:0}
#sc-friend .moms{position:relative;z-index:2;padding:0 14px;margin-bottom:-22px;gap:0;-webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,#000 76%,transparent 100%)}
#sc-friend .mom-i{width:70px;margin:0 -8px}
#sc-friend .mom-i.empty{transform:none}
#sc-friend .fin-plate{position:relative;z-index:1;margin:0;padding:34px 24px 0;border-radius:0;box-shadow:none;background:none;display:flex;flex-direction:column;align-items:center;gap:12px}
#sc-friend .fin-plate::before{content:"";position:absolute;left:-10%;right:-10%;top:-60px;height:230px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 62% 55% at 50% 38%,rgba(176,110,170,.30),rgba(176,110,170,.14) 55%,rgba(176,110,170,0) 100%)}
#sc-friend .fin-s{font-size:18px;line-height:1.34;font-weight:500;color:var(--plum)}
#sc-friend .btn.coral{height:58px;background:linear-gradient(180deg,#F39399,#E5707C);box-shadow:0 8px 16px rgba(204,86,106,.30),inset 0 1px 0 rgba(255,255,255,.45);font-size:18px;font-weight:600}
#sc-friend .btn.coral:active{transform:translateY(2px);box-shadow:0 3px 8px rgba(204,86,106,.30),inset 0 1px 0 rgba(255,255,255,.45)}
#sc-friend .btn.small{height:50px;border-radius:26px;background:linear-gradient(180deg,rgba(255,240,236,.9),rgba(255,222,218,.85));box-shadow:0 5px 12px rgba(150,70,90,.18),inset 0 0 0 1.5px rgba(255,255,255,.7);font-weight:600;font-size:13.5px}
#sc-friend .btn.small:active{transform:translateY(2px)}
#sc-friend .btn.ghost{background:none;box-shadow:none;height:34px;font-size:16px;font-weight:500}
/* бумага: лёгкое зерно и виньетка */
#sc-friend::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,rgba(255,255,255,0) 58%,rgba(196,110,130,.16) 100%)}
#sc-friend::after{content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:url(../assets/grain.webp?v=20261101p) 0 0/160px 160px;opacity:.10}
/* v14: финал по картинке — небо и город по краям, кисть-заголовок с короной, бумажная плашка, стеклянный слайдер */
#sc-friend .sky-bg{display:none}
#sc-friend::before{display:none}
#sc-friend::after{opacity:.14}
#sc-friend .fin-in{padding-top:calc(var(--top) + 14px);padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
#sc-friend .fin-t{font:700 34px/1.0 var(--brush);color:#4A2036;max-width:330px;margin:0 auto 6px;text-shadow:0 1px 0 rgba(255,255,255,.4)}
#sc-friend .fin-t .sc{font-size:56px;line-height:.8;color:#E4556A;vertical-align:-6px;margin:0 2px}
#sc-friend .fin-t .sc::after{display:none}
#sc-friend .moms{-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%);margin-bottom:-6px}
#sc-friend .fin-stage{overflow:visible}
#sc-friend .fin-plate{margin:0 2px;padding:16px 16px 12px;border-radius:30px 30px 34px 34px / 34px 34px 40px 40px;gap:8px;background:#FFF3E8;background-image:radial-gradient(rgba(190,120,90,.10) 1px,transparent 1.6px);background-size:6px 6px;box-shadow:0 2px 0 rgba(255,255,255,.8) inset,0 8px 22px rgba(150,80,60,.18);align-items:stretch}
#sc-friend .fin-plate::before{display:none}
#sc-friend .pl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
#sc-friend .fin-s{font:700 21px/1.12 var(--brush);color:#4A2036;text-align:left;flex:1}
#sc-friend .pl-d{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font:500 15px var(--sans);color:#4A2036}
#sc-friend .pl-d .cal{width:20px;height:20px}
#sc-friend .pl-d .heart{width:18px;height:17px;margin:0}
#sc-friend .btn.coral{position:relative;background:linear-gradient(180deg,#F4949B,#E8707C);font:600 20px var(--brush);font-weight:700;font-size:26px;letter-spacing:.01em;color:#fff}
#sc-friend .btn.coral .chev{position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px}
#sc-friend .btn.small{font:700 18px/1.0 var(--brush);background:rgba(255,238,232,.85)}
#sc-friend .btn.small svg{color:#4A2036}
#sc-friend .btn.ghost{font:700 22px var(--brush);color:#4A2036;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;height:36px}
#sc-friend .fin-bg{position:absolute!important;z-index:0!important;left:0;right:0;top:0;height:100%;min-height:844px}
#sc-friend .fin-t{font-size:31px;max-width:350px;margin-top:2px}
#sc-friend .fin-t .sc{font-size:50px}
#sc-friend .petals{position:absolute!important}
/* v15: финал заполняет всю высоту экрана (на высоких телефонах не остаётся пустоты), крупнее заголовок и мамы */
#sc-friend{display:none;overflow-y:auto}
#sc-friend.on{display:block}
#sc-friend .fin-in{min-height:100%;justify-content:space-between;gap:clamp(8px,1.7vh,22px);padding-top:calc(var(--top) + clamp(10px,2.2vh,30px));padding-bottom:calc(clamp(14px,2.4vh,34px) + env(safe-area-inset-bottom,0px))}
#sc-friend .fin-t{font-size:clamp(31px,4.4vh,42px);max-width:310px;line-height:1.02}
#sc-friend .fin-t .sc{font-size:clamp(52px,7.4vh,70px)}
#sc-friend .crown{width:clamp(44px,6vh,58px);height:auto}
#sc-friend .mom-i{width:clamp(66px,19vw,86px);margin:0 -8px}
#sc-friend .fin-plate{padding:clamp(14px,2vh,22px) 16px clamp(10px,1.6vh,16px)}
#sc-friend .fin-s{font-size:clamp(21px,2.9vh,26px)}
#sc-friend .pl-d{font-size:clamp(15px,1.9vh,17px)}
#sc-friend .btn.coral{height:clamp(58px,7.2vh,68px)}
#sc-friend .fin-t{font-size:clamp(28px,3.8vh,38px)}
#sc-friend .fin-t .sc{font-size:clamp(46px,6.2vh,60px)}
#sc-friend .crown{width:clamp(38px,5vh,50px)}
#sc-friend .mom-i{width:clamp(62px,17.5vw,78px);margin:0 -8px}
#sc-friend .fin-plate{padding:clamp(12px,1.7vh,18px) 16px clamp(8px,1.3vh,12px);gap:6px}
#sc-friend .fin-s{font-size:clamp(20px,2.6vh,24px)}
#sc-friend .btn.coral{height:clamp(52px,6.2vh,62px)}
#sc-friend .btn.small{height:clamp(44px,5.4vh,50px)}
#sc-friend .btn.ghost{height:30px}
#sc-friend .fin-t{max-width:350px}
#sc-friend .moms{margin-bottom:-10px}
#sc-friend .fin-in{gap:clamp(6px,1.2vh,18px);padding-top:calc(var(--top) + clamp(8px,1.4vh,26px))}
#sc-friend .fin-t{font-size:clamp(27px,3.5vh,36px)}
#sc-friend .fin-t .sc{font-size:clamp(44px,5.8vh,58px)}
#sc-friend .btn.coral{height:clamp(50px,5.9vh,60px)}
#sc-friend .btn.small{height:clamp(42px,5vh,48px)}
#sc-friend .fin-t{position:relative;max-width:286px;font-size:clamp(30px,4.3vh,38px);line-height:1}
#sc-friend .fin-t::before,#sc-friend .fin-t::after{content:"";position:absolute;top:22%;width:30px;height:38px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 40'%3E%3Cpath d='M27 8L9 2M29 20H6M27 32L11 39' fill='none' stroke='%23F0788A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
#sc-friend .fin-t::before{left:-40px}
#sc-friend .fin-t::after{right:-40px;transform:scaleX(-1)}
#sc-friend .btn.coral .chev{border:0;transform:none;margin-left:0;color:#fff}
#sc-friend .btn.small.ghost{background:none;box-shadow:none;padding:0 28px;overflow:visible;line-height:1.2;height:38px}
#sc-friend .btn.ghost span{overflow:visible;padding:0 6px}
#sc-friend .fin-t{max-width:300px}
#sc-friend .fin-t .sc{color:#EA5F6B}
#sc-friend .fin-plate{margin:0 24px;background-color:#FFEEDF;background-image:radial-gradient(rgba(205,125,80,.10) 1px,transparent 1.6px);box-shadow:0 2px 0 rgba(255,255,255,.85) inset,0 10px 24px rgba(190,100,60,.16)}
#sc-friend .btn.coral{margin-left:22px;margin-right:22px;width:calc(100% - 44px);background:linear-gradient(180deg,#F7A08F,#EC7A70);box-shadow:0 8px 16px rgba(214,100,80,.30),inset 0 1px 0 rgba(255,255,255,.5)}
#sc-friend .btn.small{background:linear-gradient(180deg,rgba(255,240,229,.92),rgba(255,224,208,.88));box-shadow:0 5px 12px rgba(190,100,60,.18),inset 0 0 0 1.5px rgba(255,255,255,.75)}
#sc-friend .btn.small.ghost{background:none;box-shadow:none}
/* v19: фон финала — street-bg-phone-tall (fin4.webp) */
.fin-bg,#sc-friend .fin-bg{background-image:url(../assets/bg/fin4.webp?v=20261101x)}
/* v20: палитра плашек, карточек и кнопок снята с референса (персиковая, глубже кремовой) */
#sc-friend .fin-plate{background-color:#FDD9C2;background-image:radial-gradient(rgba(190,105,70,.10) 1px,transparent 1.6px);box-shadow:0 2px 0 rgba(255,255,255,.55) inset,0 10px 24px rgba(190,95,60,.18)}
#sc-friend .btn.coral{background:linear-gradient(180deg,#F6948F,#EA767A);box-shadow:0 8px 16px rgba(214,90,90,.30),inset 0 1px 0 rgba(255,255,255,.5)}
#sc-friend .btn.small{background:linear-gradient(180deg,rgba(254,220,205,.95),rgba(251,201,182,.92));box-shadow:0 5px 12px rgba(190,95,60,.20),inset 0 0 0 1.5px rgba(255,255,255,.6)}
#sc-friend .btn.small.ghost{background:none;box-shadow:none}
#sc-friend .mom-i{width:clamp(58px,16.4vw,76px)}
#sc-friend .btn.ghost{height:30px}
#sc-friend .fin-in{padding-bottom:calc(clamp(8px,1.4vh,22px) + env(safe-area-inset-bottom,0px))}
/* v23: букеты без внешней плашки и карточек, плашка без сетки, кнопки шрифтом CoFo Sans, мамы лёгкой пирамидкой */
#sc-friend .fin-plate{background-image:none}
#sc-friend .btn.coral{font:700 19px/1 var(--sans);letter-spacing:.01em}
#sc-friend .btn.small{font:700 13.5px/1.15 var(--sans);letter-spacing:.005em}
#sc-friend .btn.ghost{font:600 16px/1 var(--sans);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
#sc-friend .moms .mom-i:nth-child(1),#sc-friend .moms .mom-i:nth-child(6){transform:translateY(8px)}
#sc-friend .moms .mom-i:nth-child(2),#sc-friend .moms .mom-i:nth-child(5){transform:translateY(4px)}
/* v26: финал без прокрутки. Заголовок -10%, мамы выше и просторнее, плашка -10% и текст по центру, всё поднято, остаток места внизу */
#sc-friend{overflow:hidden}
#sc-friend .fin-in{justify-content:flex-start;gap:clamp(6px,1.1vh,12px);min-height:100%;padding-top:calc(var(--top) + clamp(6px,1vh,16px))}
#sc-friend .crown{width:clamp(34px,4.5vh,45px)}
#sc-friend .fin-t{font-size:clamp(24px,3.15vh,32px);max-width:272px;margin:0 auto 2px}
#sc-friend .fin-t .sc{font-size:clamp(40px,5.2vh,52px)}
#sc-friend .fin-t::before,#sc-friend .fin-t::after{width:27px;height:34px}
#sc-friend .fin-t::before{left:-36px}
#sc-friend .fin-t::after{right:-36px}
#sc-friend .mom-i{width:clamp(58px,16.4vw,76px);margin:0 -3px}
#sc-friend .moms{margin-bottom:-10px}
#sc-friend .fin-plate{margin:0 34px;padding:clamp(10px,1.5vh,15px) 14px clamp(7px,1.1vh,11px);gap:5px}
#sc-friend .fin-s{font-size:clamp(18px,2.35vh,22px);text-align:center}
#sc-friend .pl-d{font-size:clamp(13.5px,1.75vh,15.5px)}
#sc-friend .pl-d .cal{width:18px;height:18px}
#sc-friend .pl-d .heart{width:16px;height:15px}
/* v27: мамы на 15% меньше и выше, текст плашки крупнее */
#sc-friend .mom-i{width:clamp(50px,13.9vw,65px);margin:0 1px}
#sc-friend .moms{margin-top:-12px;margin-bottom:-6px}
#sc-friend .moms .mom-i:nth-child(1),#sc-friend .moms .mom-i:nth-child(6){transform:translateY(7px)}
#sc-friend .moms .mom-i:nth-child(2),#sc-friend .moms .mom-i:nth-child(5){transform:translateY(3px)}
#sc-friend .fin-s{font-size:clamp(20px,2.65vh,24px)}
#sc-friend .btn.coral{margin-left:0;margin-right:0;width:100%}
/* v31: подложка финала = высота экрана, прижата к низу (раньше min-height:844px обрезал нижние цветы на невысоких экранах) */
#sc-friend .fin-bg{top:0;bottom:0;height:100%;min-height:0;background-position:center bottom}
/* v30 (31.10 вечер): финал. Блок с короной и заголовком опущен (~5% высоты экрана), мамы ещё ниже, чтобы не касались заголовка
   (~8% всего), кнопки внизу чуть ниже. «из 5» теперь обычным текстом заголовка, красной и крупной остаётся только цифра, которая
   добегает от 0 до N после ухода плашки перехода (js/screens.js: countUp). Если контент выше экрана, fitFinal() его сожмёт. */
#sc-friend .fin-in{padding-top:calc(var(--top) + clamp(6px,1vh,16px) + 5vh)}
#sc-friend .fin-stage{margin-top:3.2vh}
#sc-friend .fin-stage{margin-top:1.4vh}
#sc-friend #fr-try{margin-top:5.8vh;height:clamp(60px,7.4vh,68px);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 22px}
#sc-friend #fr-try .chev{position:static;width:18px;height:18px;margin:0;flex:none}
#sc-friend #fr-try span{overflow:visible}
#sc-friend .fin-in{padding-top:calc(var(--top) + clamp(6px,1vh,16px) + 3.6vh)}
#sc-friend .fin-stage{margin-top:2.8vh}
#sc-friend .crown{width:clamp(36px,4.8vh,48px)}
#sc-friend .fin-t{font-size:clamp(26px,3.37vh,34px);max-width:292px}
#sc-friend .fin-t .sc{font-size:clamp(43px,5.56vh,56px)}
#sc-friend .fin-t::before,#sc-friend .fin-t::after{width:29px;height:36px}
#sc-friend .fin-t::before{left:-39px}
#sc-friend .fin-t::after{right:-39px}
#sc-friend .moms{margin-top:2px;margin-bottom:-20px;z-index:1}
#sc-friend .fin-plate{z-index:2}
#sc-friend .fin-t .sc{display:inline-block;min-width:.62em;text-align:center;transform-origin:50% 72%}
#sc-friend .fin-t .sc.pop{animation:scpop .34s cubic-bezier(.2,1.6,.4,1)}
@media (prefers-reduced-motion:reduce){#sc-friend .fin-t .sc.pop{animation:none}}
#sc-friend .mom-i{width:clamp(58px,17vw,78px);margin:0 -5px}
#sc-friend .mom-i img{width:100%;height:auto;display:block}
#sc-friend .mom-i.empty{transform:none;opacity:.9}
#sc-friend .moms{align-items:flex-end;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
#sc-friend .moms .mom-i:nth-child(n){transform:none}
/* нижняя группа кнопок прижата к низу экрана */
#sc-friend .fin-in{justify-content:flex-start}
#sc-friend #fr-try{margin-top:auto}
/* компактнее, чтобы финал помещался на экран без сжатия (fitFinal в screens.js) */
#sc-friend .fin-t{font-size:clamp(24px,3.05vh,30px)}
#sc-friend .fin-t .sc{font-size:clamp(40px,5vh,50px)}
#sc-friend .moms{margin-bottom:-4px;-webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 86%,transparent 100%)}
#sc-friend .fin-t::before,#sc-friend .fin-t::after{display:none}
#sc-friend .mom-i.empty img{filter:saturate(1.25) brightness(.92)}
#sc-friend #fr-try{margin-top:auto;height:clamp(48px,6vh,54px);font-weight:600;font-size:18px}

/* v40 friend-comp: экран друга на композиции финала; вместо букетов мяч, кнопка «Попробуй сам» */
#sc-friend .fin-in{justify-content:flex-start}
#sc-friend .pl-top{justify-content:center;text-align:center}
#sc-friend .fin-s{text-align:center}
#sc-friend .fr-ball{flex:1 1 auto;min-height:96px;width:100%;position:relative;display:flex;align-items:center;justify-content:center}
#sc-friend .fr-ball img{position:relative;z-index:1;display:block;width:clamp(96px,18vh,156px);height:auto;pointer-events:none}
#sc-friend .fr-ball::after{content:"";position:absolute;left:50%;top:50%;width:clamp(96px,18vh,156px);height:20px;margin:calc(clamp(96px,18vh,156px)/2 - 10px) 0 0 calc(clamp(96px,18vh,156px)/-2 + 6px);border-radius:50%;background:radial-gradient(closest-side,rgba(55,10,40,.38),rgba(55,10,40,0))}
#sc-friend #fr-try{margin-top:0;width:calc(100% - 12px);max-width:none;margin-left:6px;margin-right:6px}

/* v41 friend-comp: экран друга: фон и мяч как на старте, логотипы сверху, заголовок крупнее */
#sc-friend{background:none}
#sc-friend .fr-bg{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;background:url(../assets/bg/startbg.webp?v=20261101ae) center top/cover no-repeat}
#sc-friend .logos.dark{position:static!important;margin:0 0 clamp(6px,1.6vh,16px)}
#sc-friend .fin-in{padding-top:calc(var(--top) + clamp(24px,5.4vh,46px))}
#sc-friend .fin-t{font-size:clamp(33px,4.7vh,42px);line-height:1.12;margin:0 0 clamp(6px,1.4vh,14px)}
#sc-friend .fin-t .sc{font-size:clamp(50px,7vh,64px)}
#sc-friend .fr-ball{align-items:flex-end;padding-bottom:clamp(10px,2.2vh,22px)}
#sc-friend .fr-ball img{width:100px;height:100px}
#sc-friend .fr-ball::after{top:auto;bottom:calc(clamp(10px,2.2vh,22px) - 4px);width:100px;height:16px;margin:0 0 0 -46px}
@media (max-height:700px){#sc-friend .fr-ball img{width:74px;height:74px}#sc-friend .fr-ball::after{width:74px;margin-left:-33px}}
body[data-scr="friend"] .app{background:linear-gradient(180deg,#C9D3E8 0%,#F7D9CC 55%,#F2B79B 100%)}

/* v37: экран ошибки: мяч улетел за забор (тюльпаны, забор, мяч с пунктирной дугой), стиль старта */
#sc-err{justify-content:flex-start;padding-top:calc(var(--top) + 70px);gap:0}
#sc-err .sky-bg{background-position:center top}
#sc-err .err-art{width:min(100%,330px);height:auto;display:block;margin:0 auto;overflow:visible}
#sc-err .err-t{font:400 44px/1.04 var(--flow);color:var(--plum);margin:22px 0 0;text-wrap:balance}
#sc-err .err-s{font:600 19px/1.3 var(--sans);color:#4A2036;margin:16px 0 0;max-width:290px;text-wrap:balance}
#sc-err .e-ball{animation:errBall 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
#sc-err .e-t{transform-box:fill-box;transform-origin:50% 100%;animation:errSway 3.6s ease-in-out infinite}
#sc-err .e-t.t2{animation-delay:-1.2s}#sc-err .e-t.t3{animation-delay:-2.2s}
#sc-err .e-arc{animation:errDash 2.4s linear infinite}
@keyframes errBall{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(8deg)}}
@keyframes errSway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes errDash{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion:reduce){#sc-err .e-ball,#sc-err .e-t,#sc-err .e-arc{animation:none}}
@media (max-height:700px){#sc-err{padding-top:calc(var(--top) + 36px)}#sc-err .err-art{width:min(100%,270px)}#sc-err .err-t{font-size:38px;margin-top:14px}#sc-err .err-s{font-size:16.5px;margin-top:10px}}

/* v37b: ошибка без городской подложки (мешала тексту), чистое небо; кнопки звука на ошибке нет */
#sc-err .sky-bg{display:none}
#sc-err{background:linear-gradient(180deg,#FFC9B3 0%,#FFE3D3 38%,#FFF2E8 70%,#FFE9DF 100%)}
body[data-scr="err"] .snd{display:none!important}

/* v37c: ошибка = картинка Grok в гуаши (забор, тюльпаны, мяч в дуге) на весь экран, текст на спокойной нижней части */
#sc-err{background:#FBE6CF;padding:0;justify-content:flex-start;overflow:hidden}
#sc-err .err-bg{position:absolute;inset:0;z-index:0;background:url(../assets/bg/err.webp?v=1) center top/cover no-repeat}
#sc-err .err-txt{position:absolute;left:0;right:0;top:55%;z-index:2;padding:0 26px;display:flex;flex-direction:column;align-items:center}
#sc-err .err-t{margin:0}
#sc-err .fol{z-index:3!important}
#sc-err .big-btn{position:absolute;z-index:4;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:calc(100% - 44px)}
@media (max-height:700px){#sc-err .err-txt{top:52%}}

/* v38: ошибка: открытка-карточка с картинкой (не на всю ширину), небо как на старте, заголовок и текст фирменных цветов, без листьев */
#sc-err{background:linear-gradient(180deg,#FFC9B3 0%,#FFE3D3 42%,#FFF2E8 100%);padding:calc(var(--top) + 20px) 22px calc(112px + env(safe-area-inset-bottom,0px));justify-content:center;overflow:hidden}
#sc-err::before{content:"";position:absolute;left:-12%;right:-12%;top:calc(var(--top) + 36px);height:120px;z-index:0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none}
#sc-err .err-card{position:relative;z-index:1;width:min(72%,290px);margin:0 auto;padding:7px 7px 0;border-radius:22px;background:#FFF9F3;box-shadow:0 14px 26px rgba(120,50,50,.22),0 2px 0 rgba(255,255,255,.9) inset;transform:rotate(-2.4deg)}
#sc-err .err-card img{display:block;width:100%;height:auto;border-radius:16px;margin-bottom:7px}
#sc-err .err-t{margin:30px 0 0;font:400 42px/1.04 var(--flow);color:#B2315C;text-wrap:balance;text-shadow:0 2px 0 rgba(255,255,255,.55)}
#sc-err .err-s{margin:14px 0 0;max-width:280px;font:600 18px/1.32 var(--sans);color:#8E4E68;text-wrap:balance}
#sc-err .big-btn{position:absolute;z-index:4;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:calc(100% - 44px)}
#sc-err .big-btn:active{transform:translateX(-50%) translateY(4px)}
@media (max-height:700px){#sc-err{padding-top:calc(var(--top) + 10px);padding-bottom:104px}#sc-err .err-card{width:min(62%,230px)}#sc-err .err-t{font-size:36px;margin-top:20px}#sc-err .err-s{font-size:16px;margin-top:10px}}

/* v39: ошибка: заголовок и подпись цвета бренда (тёмная слива), ровные отступы */
#sc-err .err-t{color:var(--plum);text-shadow:0 2px 0 rgba(255,255,255,.5);margin:26px 0 0}
#sc-err .err-s{color:var(--plum);margin:12px 0 0;font-weight:600}
@media (max-height:700px){#sc-err .err-t{margin-top:20px}#sc-err .err-s{margin-top:10px}}

/* v40: ошибка: плоский фон без градиента и свечения, подпись светлее заголовка, отступы */
#sc-err{background:#FEE2DA;padding:calc(var(--top) + 16px) 24px calc(150px + env(safe-area-inset-bottom,0px))}
#sc-err::before{display:none}
#sc-err .err-t{margin:24px 0 0}
#sc-err .err-s{color:#7A5368;font-weight:500;margin:10px 0 0}
@media (max-height:700px){#sc-err{padding-bottom:112px}#sc-err .err-t{margin-top:18px}#sc-err .err-s{margin-top:8px}}

/* v42 friend-comp: заголовок как у финала (корона, искры по бокам), текст на 15% меньше, блок ниже */
#sc-friend .fin-in{padding-top:calc(var(--top) + clamp(34px,7vh,60px))}
#sc-friend .logos.dark{margin-bottom:clamp(10px,2.6vh,26px)}
#sc-friend .fin-t{font-size:clamp(28px,4vh,36px);line-height:1.1;position:relative;margin:0 0 clamp(10px,1.8vh,18px)}
#sc-friend .fin-t .sc{font-size:clamp(42px,6vh,54px)}
#sc-friend .fin-t::before,#sc-friend .fin-t::after{display:block}

.a-rain{animation:rainfall linear infinite;pointer-events:none}/* дождь идёт вниз и влево вдоль наклона капель; узор rain2.webp бесшовный по вектору (-39,240), tools/make_rain.py */@keyframes rainfall{from{transform:translate(0,0)}to{transform:translate(-39px,240px)}}

.a-cflow{animation:cflow linear infinite;pointer-events:none}@keyframes cflow{from{transform:translateX(0)}to{transform:translateX(780px)}}

.a-smoke{animation:smk ease-out infinite;pointer-events:none}@keyframes smk{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.8}100%{transform:translate(16px,-46px) scale(1.7);opacity:0}}
.a-peek{animation:peek ease-in-out infinite}@keyframes peek{0%,16%{transform:translateX(-31px) rotate(0)}30%{transform:translateX(0) rotate(0)}38%{transform:translateX(0) rotate(-4deg)}46%{transform:translateX(0) rotate(0)}54%{transform:translateX(0) rotate(-4deg)}62%{transform:translateX(0) rotate(0)}76%,100%{transform:translateX(-31px) rotate(0)}}

.a-peekl{animation:peekl ease-in-out infinite}@keyframes peekl{0%,16%{transform:translateX(34px) rotate(0)}30%{transform:translateX(0) rotate(0)}38%{transform:translateX(0) rotate(4deg)}46%{transform:translateX(0) rotate(0)}54%{transform:translateX(0) rotate(4deg)}62%{transform:translateX(0) rotate(0)}76%,100%{transform:translateX(34px) rotate(0)}}
.a-wave{animation:wave ease-in-out infinite;pointer-events:none}@keyframes wave{0%,100%{transform:skewY(-4deg) scaleX(1)}50%{transform:skewY(4deg) scaleX(.93)}}
.a-sail{animation:sail linear infinite;pointer-events:none}@keyframes sail{0%{transform:translateX(0) translateY(0)}12.5%{transform:translateX(60px) translateY(1.2px)}25%{transform:translateX(125px) translateY(-.4px)}37.5%{transform:translateX(190px) translateY(1.2px)}50%{transform:translateX(250px) translateY(0)}62.5%{transform:translateX(315px) translateY(1.2px)}75%{transform:translateX(375px) translateY(-.4px)}100%{transform:translateX(480px) translateY(0)}}
.a-sail2{animation:sail2 linear infinite;pointer-events:none}@keyframes sail2{0%{transform:translateX(0)}100%{transform:translateX(480px)}}