:root{--ink:#1d2340;--cream:#fff7ea;--coral:#ff6b5e;--sun:#ffc94a;--teal:#25b3c4;--lav:#a99cf0;--pink:#ff9ec0;--him:#3d5bd0;--her:#e56fa0;
--bd:3px solid var(--ink);--sh:4px 4px 0 var(--ink);--ease:cubic-bezier(.2,.8,.2,1);
--font:"Trebuchet MS","Segoe UI","Arial Rounded MT Bold",system-ui,-apple-system,Roboto,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--font);color:var(--ink);background:var(--ink);line-height:1.35;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
img{display:block}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
#stage{position:fixed;inset:0;overflow:hidden}
#track{position:absolute;inset:0}
.stub{display:inline-block;font:700 10px/1 var(--font);text-transform:uppercase;letter-spacing:.06em;background:#fff2a8;color:#6a5200;border:2px dashed #b48a00;border-radius:6px;padding:3px 6px;vertical-align:middle}
.btn{background:var(--coral);color:#fff;border:var(--bd);box-shadow:var(--sh);border-radius:99px;padding:11px 20px;font-weight:700;font-size:16px;transition:transform .15s}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
/* ---------- сцены и «двери» ---------- */
.scene{position:absolute;inset:0;overflow:hidden;--h:min(60dvh,560px);transition:transform .9s var(--ease);will-change:transform;background:var(--ink);contain:layout paint}
.scene::before,.scene::after{content:"";position:absolute;top:0;bottom:0;width:12px;z-index:25;pointer-events:none;background:linear-gradient(90deg,#3a2415,#7a4a2a 60%,#3a2415)}
.scene::before{left:0;box-shadow:3px 0 12px rgba(0,0,0,.45)}.scene::after{right:0;box-shadow:-3px 0 12px rgba(0,0,0,.45)}
.scene:not(.active):not(.leaving) *{animation-play-state:paused!important}
.curtain{position:absolute;inset:0;z-index:40;pointer-events:none;display:grid;place-items:center;opacity:0;transition:opacity .35s}
.curtain b{background:var(--cream);border:var(--bd);box-shadow:var(--sh);border-radius:16px;padding:10px 18px;font-size:clamp(16px,3vw,22px)}
.curtain.show{opacity:1}
.topbar{position:absolute;z-index:30;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;max-width:96vw}
#dots{list-style:none;display:flex;gap:6px;background:#fffdf5;border:var(--bd);border-radius:99px;padding:5px 10px;pointer-events:auto}
#dots button{display:block;width:12px;height:12px;border-radius:50%;border:2.5px solid var(--ink);background:#fff;position:relative}
#dots button::after{content:"";position:absolute;inset:-9px}
#dots button[aria-current="true"]{background:var(--coral);transform:scale(1.3)}
#where{font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000;letter-spacing:.04em}
.nav{position:absolute;z-index:30;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;padding:0 18px;pointer-events:none}
.navb{pointer-events:auto;width:48px;height:48px;border-radius:50%;background:#fffdf5;border:var(--bd);box-shadow:3px 3px 0 var(--ink);font-size:22px;font-weight:700;display:grid;place-items:center}
.navb[disabled]{opacity:.3}
.tip{position:absolute;z-index:31;left:50%;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 62px);transform:translate(-50%,10px);background:#fffdf5;border:var(--bd);border-radius:14px;padding:6px 12px;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:.4s;max-width:88vw;text-align:center}
.tip.show{opacity:1;transform:translate(-50%,0)}
.plate{position:absolute;z-index:6;left:50%;top:48px;transform:translateX(-50%);background:var(--cream);border:var(--bd);box-shadow:var(--sh);border-radius:14px;padding:6px 16px;font-weight:700;font-size:clamp(15px,2.6vw,20px);white-space:nowrap;max-width:92vw}
/* ---------- персонаж-риг ---------- */
.slot{position:absolute;z-index:5;--u:calc(var(--h)*var(--k,1)/770);width:calc(var(--u)*400);height:calc(var(--u)*770);transform:translateX(-50%);pointer-events:none}
.kissslot{--u:calc(var(--h)*1.02/770)}
.slot.live{pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.slot.live::after{content:"";position:absolute;inset:0}
.pose{position:absolute;left:50%;bottom:0;transform:translateX(-50%);opacity:0;transition:opacity .28s;pointer-events:none}
.pose.on{opacity:1}
.pose .sw,.pose .hg,.pose .hd{position:absolute;inset:0}
.pose img{position:absolute;max-width:none;pointer-events:none;-webkit-user-drag:none}
.lid{position:absolute;border-radius:50%;transform:scaleY(0);transform-origin:50% 0;border-bottom:max(2px,.25em) solid #2a1a14;font-size:3px}
.pose.on .sw{transform-origin:50% 100%;animation:breathe 3.8s ease-in-out infinite}
.pose.on .hg{animation:headmove 5.2s ease-in-out infinite}
.pose.on .lid{animation:blink 4.8s infinite;animation-delay:var(--bd,0s)}
.p-wave.on .hd{animation:handwave .55s ease-in-out infinite alternate}
.p-desk.on .hd{animation:type .3s ease-in-out infinite alternate}
.p-desk.on .hg{animation:nodtype 2.6s ease-in-out infinite}
.p-cheer.on .sw{animation:hop .85s ease-in-out infinite}
.p-cheer.on .hg{animation:headmove 1.7s ease-in-out infinite}
.p-laugh.on .sw{animation:shake .42s ease-in-out infinite alternate}
.p-laugh.on .hg{animation:laughhead .42s ease-in-out infinite alternate}
.p-phone.on .hg{animation:nod 3.4s ease-in-out infinite}
.p-kiss.on .sw{animation:kiss 3.2s ease-in-out infinite}
.slot.bump{animation:bump .5s var(--ease)}
@keyframes breathe{0%,100%{transform:scaleY(1) rotate(-.4deg)}50%{transform:scaleY(1.012) rotate(.5deg)}}
@keyframes headmove{0%,100%{transform:rotate(-1.6deg) translateY(0)}50%{transform:rotate(1.8deg) translateY(-.4%)}}
@keyframes nod{0%,100%{transform:rotate(-1deg)}45%{transform:rotate(2.6deg) translateY(.5%)}}
@keyframes nodtype{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(2deg) translateY(.4%)}}
@keyframes blink{0%,93%,100%{transform:scaleY(0)}95.5%{transform:scaleY(1)}98%{transform:scaleY(.1)}}
@keyframes handwave{from{transform:rotate(-17deg)}to{transform:rotate(15deg)}}
@keyframes type{from{transform:rotate(-1.6deg) translateY(.2%)}to{transform:rotate(1.4deg) translateY(-.3%)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1.01,.985)}50%{transform:translateY(-3.2%) scale(.99,1.015)}}
@keyframes shake{from{transform:translateY(0) rotate(-1.4deg)}to{transform:translateY(-1.6%) rotate(1.4deg)}}
@keyframes laughhead{from{transform:rotate(-3.5deg) translateY(.6%)}to{transform:rotate(3.5deg) translateY(-.8%)}}
@keyframes kiss{0%,100%{transform:rotate(-.8deg) scale(1)}50%{transform:rotate(.9deg) scale(1.012)}}
@keyframes bump{40%{transform:translateX(-50%) scale(1.06,.95)}70%{transform:translateX(-50%) scale(.98,1.03)}}
.heart-fx{position:absolute;z-index:9;pointer-events:none;font-size:28px;color:#ff4f7b;text-shadow:2px 2px 0 var(--ink);animation:rise 1.7s ease-out forwards}
@keyframes rise{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-130px) scale(1.2) rotate(var(--r,0deg))}}
.say{position:absolute;z-index:9;pointer-events:none;background:#fff;border:var(--bd);border-radius:14px;padding:4px 10px;font-weight:700;font-size:14px;white-space:nowrap;transform:translateX(-50%);animation:say 1.9s var(--ease) forwards}
@keyframes say{0%{opacity:0;transform:translate(-50%,8px) scale(.6)}12%,80%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-6px)}}
/* ---------- 0 TikTok ---------- */
.s0{background:#0b0d1f}
.tt-bg{position:absolute;inset:0;background:radial-gradient(60% 50% at 30% 20%,#3a2d77,transparent),radial-gradient(60% 50% at 80% 90%,#7a2f66,transparent),#0b0d1f}
.tt{position:absolute;left:50%;top:50%;width:min(400px,100vw);height:min(840px,100dvh);transform:translate(-50%,-50%);overflow:hidden;background:linear-gradient(#232a63,#40306e 55%,#6c3b73);border-radius:28px;border:var(--bd);box-shadow:0 0 0 3px #fff3,0 20px 60px #000a;--h:min(40dvh,400px);touch-action:pan-x}
.tt-view{position:absolute;inset:0;transition:transform .6s var(--ease)}
.v-chat{background:#fff;transform:translateY(-102%);display:flex;flex-direction:column;color:var(--ink)}
.tt.chat .v-chat{transform:none}.tt.chat .v-send{transform:translateY(40%);opacity:.0;transition:transform .6s var(--ease),opacity .5s}
.tt-top{position:absolute;z-index:3;top:46px;left:0;right:0;display:flex;justify-content:center;gap:16px;color:#fffc;font-weight:700;font-size:15px}
.tt-top b{color:#fff;border-bottom:3px solid #fff;padding-bottom:2px}
.tt-stage{position:absolute;inset:0}
.tt-city{position:absolute;left:0;right:0;bottom:0;height:46%;display:flex;align-items:flex-end;gap:5px;padding:0 8px;opacity:.5}
.tt-city i{flex:1;background:#1a1f4d;border-radius:4px 4px 0 0;height:60%}.tt-city i:nth-child(2){height:90%}.tt-city i:nth-child(3){height:45%}.tt-city i:nth-child(4){height:75%}
.tt-tag{position:absolute;top:96px;font-size:12px;font-weight:700;background:#fffdf5;border:2.5px solid var(--ink);border-radius:99px;padding:2px 10px}
.tt-tag.l{left:12px}.tt-tag.r{right:58px}
.typing{position:absolute;left:25%;top:32%;transform:translateX(-50%) scale(0);background:#fff;border:var(--bd);border-radius:16px;padding:8px 12px;display:flex;gap:4px;z-index:7;transition:transform .25s var(--ease)}
.typing.on{transform:translateX(-50%) scale(1)}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink);animation:dot .9s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);opacity:.4}}
.fly{position:absolute;top:27%;left:25%;z-index:8;opacity:0;pointer-events:none}
.fly-y{transform:translateX(-50%)}
.fly span{display:block;background:#3d5bd0;color:#fff;border:var(--bd);border-radius:16px;padding:7px 12px;font-size:13px;font-weight:700;white-space:nowrap}
.fly.go{animation:flyx 1.3s linear forwards}.fly.go .fly-y{animation:flyy 1.3s ease-in-out forwards}
@keyframes flyx{0%{opacity:0;left:25%}8%{opacity:1}92%{opacity:1}100%{opacity:0;left:72%}}
@keyframes flyy{0%{transform:translate(-50%,0) scale(.6)}50%{transform:translate(-50%,-80px) scale(1.1)}100%{transform:translate(-50%,10px) scale(.7)}}
.reply{position:absolute;right:62px;top:27%;z-index:8;background:#fff;border:var(--bd);border-radius:16px;padding:7px 12px;font-size:13px;font-weight:700;transform:scale(0);transform-origin:80% 100%;transition:transform .3s var(--ease)}
.reply.on{transform:scale(1)}
.tt-side{position:absolute;right:8px;bottom:136px;display:flex;flex-direction:column;gap:14px;z-index:4;color:#fff;text-align:center}
.tt-side small{display:block;font-size:11px}
.ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#0006;font-size:22px;margin:0 auto}
.ico.heart.pop{animation:pop .5s var(--ease);color:#ff4f7b}
@keyframes pop{40%{transform:scale(1.5)}}
.tt-cap{position:absolute;left:14px;right:70px;bottom:78px;color:#fff;font-size:14px;z-index:4;text-shadow:0 1px 3px #000}.tt-cap small{opacity:.8}
.swipe{position:absolute;z-index:6;left:50%;bottom:14px;transform:translateX(-50%);background:#fffdf5;border:var(--bd);box-shadow:var(--sh);border-radius:99px;padding:8px 16px;font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.finger{display:inline-block;animation:swipe 1.6s ease-in-out infinite;font-size:20px}
@keyframes swipe{0%,100%{transform:translateY(-6px)}50%{transform:translateY(8px)}}
.chat-h{display:flex;align-items:center;gap:10px;padding:46px 14px 10px;border-bottom:1px solid #0001;flex:none}
.chat-h small{display:block;color:#2a9d62;font-size:12px}
.back{background:#fffdf5;border:var(--bd);border-radius:99px;padding:5px 12px;font-weight:700;font-size:14px;box-shadow:2px 2px 0 var(--ink)}
.av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pink);border:var(--bd);font-weight:700}
.chat{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth;background:#fafafa}
.chat-f{flex:none;padding:10px 14px 16px;text-align:center;background:#fff;border-top:1px solid #0001}
.cm{max-width:78%;padding:9px 14px;border-radius:20px;font-size:15px;background:#efefef;align-self:flex-start;animation:in .4s var(--ease)}
.cm.me{align-self:flex-end;background:linear-gradient(135deg,#3d5bd0,#6a4fe6);color:#fff}
.cm.emo{background:none;font-size:34px;padding:0;line-height:1}
.cm.reel{width:150px;height:200px;max-width:none;background:linear-gradient(160deg,#e9a526,#8a5a14);color:#fff;font-size:12px;font-weight:700;position:relative;padding:14px 10px;text-align:center;align-self:flex-end}
.cm.reel::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:34px;text-shadow:0 2px 6px #0008}
.cts{align-self:center;font-size:11px;color:#8a8a99;margin:6px 0 2px}
@keyframes in{from{opacity:0;transform:translateY(10px) scale(.95)}}
/* ---------- 1 Приглашение ---------- */
.halves{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.half{position:relative;overflow:hidden}.half svg{position:absolute;inset:0;width:100%;height:100%}
.halves::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,rgba(255,247,234,.55) 50%,transparent 70%)}
.s1-body{position:absolute;z-index:4;left:50%;transform:translateX(-50%);top:46px;width:min(560px,94vw);display:flex;flex-direction:column;gap:10px;align-items:stretch}
.route{display:flex;align-items:center;gap:6px}.route-line{flex:1;height:44px;overflow:visible}
.pin{background:#fff;border:var(--bd);box-shadow:3px 3px 0 var(--ink);border-radius:14px;padding:5px 10px;line-height:1.1;flex:none}.pin small{display:block;font-size:11px}
.invite{background:#fffdf5;border:var(--bd);box-shadow:var(--sh);border-radius:16px;padding:10px 14px;text-align:center;display:flex;flex-direction:column;gap:2px}
.invite small{text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--coral);font-weight:700}.invite b{font-size:clamp(18px,3.4vw,24px)}
.msgs{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:clamp(104px,22dvh,190px);overflow:hidden;background:rgba(255,253,245,.84);border:var(--bd);border-radius:18px;padding:10px 12px}
.msgs .m{max-width:84%;padding:6px 12px;border:var(--bd);border-radius:16px;font-size:14px;background:#fff;animation:in .4s var(--ease);flex:none}
.msgs .m.l{align-self:flex-start;border-bottom-left-radius:4px}.msgs .m.r{align-self:flex-end;border-bottom-right-radius:4px;background:#ffe0ec}
.s1 .slot{--k:1;--h:min(54dvh,540px)}
.waves{animation:wv 3.2s linear infinite}.cloud{animation:drift 14s ease-in-out infinite alternate}.cloud.slow{animation-duration:22s}
.sun{transform-origin:290px 120px;animation:pulse 3s ease-in-out infinite}.sway{animation:sw 3.6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
.boat{animation:bobs 3s ease-in-out infinite alternate}
@keyframes wv{to{transform:translateX(100px)}}@keyframes drift{to{transform:translateX(34px)}}@keyframes pulse{50%{transform:scale(1.08)}}@keyframes sw{to{transform:rotate(3deg)}}@keyframes bobs{to{transform:translateY(5px) rotate(2deg)}}
/* ---------- 2 Ночь ---------- */
.s2{background:#2b2160}
.night{position:absolute;inset:0;background:linear-gradient(#2d2263,#3a2a73 60%,#2a1f5c 60%,#2a1f5c)}
.night::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(#3b2d78,#1f1750)}
.win{position:absolute;top:19%;height:34%;width:42%;border:6px solid #f4e6c8;border-radius:12px;background:linear-gradient(#0b1740,#2b4fa8);overflow:hidden;z-index:1}
.win.l{left:5%}.win.r{right:5%;background:linear-gradient(#2a2358,#b57fa6)}
.win::before,.win::after{content:"";position:absolute;background:#f4e6c8;z-index:3}.win::before{left:50%;top:0;bottom:0;width:5px;margin-left:-2px}.win::after{top:50%;left:0;right:0;height:5px}
.moon{position:absolute;right:16%;top:16%;width:34px;height:34px;border-radius:50%;background:#fff5c9;box-shadow:0 0 22px #fff5c988;animation:glow 4s ease-in-out infinite}.moon.sm{left:14%;right:auto;width:26px;height:26px}
.stars{position:absolute;inset:0;background:radial-gradient(1.6px 1.6px at 20% 30%,#fff,transparent),radial-gradient(1.6px 1.6px at 70% 60%,#fff,transparent),radial-gradient(1.6px 1.6px at 45% 15%,#fff,transparent),radial-gradient(1.6px 1.6px at 85% 25%,#fff,transparent);animation:tw 3s ease-in-out infinite alternate}
@keyframes glow{50%{box-shadow:0 0 34px #fff5c9cc}}@keyframes tw{to{opacity:.35}}
.lamp{position:absolute;left:50%;bottom:9%;width:70px;transform:translateX(-50%);z-index:2}
.lamp i{position:absolute;bottom:0;width:16px;height:70px;background:#ffd96b;border-radius:3px;box-shadow:0 0 50px 24px #ffd96b66;animation:glow2 3.4s ease-in-out infinite}.lamp i:first-child{left:10px}.lamp i:last-child{right:10px}
@keyframes glow2{50%{box-shadow:0 0 70px 34px #ffd96b88}}
.s2-title{position:absolute;z-index:7;left:12px;top:54px;background:#fffdf5;border:var(--bd);box-shadow:var(--sh);border-radius:14px;padding:6px 14px}
.s2-title h2{font-size:clamp(16px,3.4vw,24px)}.s2-title p{font-size:12px;opacity:.7}
.s2 .slot{--h:min(46dvh,480px)}
.clock{position:absolute;z-index:6;top:55%;background:#fffdf5;border:var(--bd);border-radius:12px;padding:3px 10px;font-weight:700;font-size:clamp(12px,2.2vw,15px)}
.clock.l{left:5%}.clock.r{right:5%}
.enter{position:absolute;z-index:8;bottom:max(16px,env(safe-area-inset-bottom));background:var(--coral);color:#fff;border:var(--bd);border-radius:99px;padding:8px 16px;font-weight:700;font-size:15px;box-shadow:3px 3px 0 var(--ink);animation:wob 2.4s ease-in-out infinite}
.enter.l{left:20%;transform:translateX(-50%)}.enter.r{left:80%;transform:translateX(-50%)}
@keyframes wob{50%{box-shadow:3px 3px 0 var(--ink),0 0 0 6px #ff6b5e55}}
.roomview{position:absolute;inset:0;z-index:20;background:#161b46;clip-path:inset(0 100% 0 0);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s;--h:min(48dvh,480px)}
.roomview.open{clip-path:inset(0);visibility:visible;transition:clip-path .7s var(--ease)}
.rv-bg,.rv-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rv-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,#0007)}
.roomview .back{position:absolute;z-index:4;left:16px;top:54px}
.rv-card{position:absolute;z-index:4;left:16px;top:96px;max-width:min(330px,calc(100% - 32px));background:#fffdf5;border:var(--bd);box-shadow:var(--sh);border-radius:16px;padding:10px 14px;display:flex;flex-direction:column;gap:4px;font-size:14px}.rv-card b{font-size:17px}
.rv-desk{position:absolute;z-index:3;right:2%;bottom:0;width:min(58vw,520px);aspect-ratio:640/420}
.rv-desk .desk{position:absolute;left:0;bottom:0;width:100%}
.rv-desk .mon{position:absolute;left:12%;bottom:30%;width:66%}
.rv-ch{left:34%;bottom:2%;--k:1.05}
.rv-ch::before{content:"";position:absolute;left:50%;bottom:calc(var(--u)*150);width:calc(var(--u)*420);height:calc(var(--u)*70);transform:translateX(-45%);background:#6b3d2a;border:var(--bd);border-radius:14px;z-index:-1}
/* ---------- локации ---------- */
.bg{position:absolute;inset:0;background-size:cover;background-position:center bottom;animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.bg.rest{background-image:url(assets/bg/rest_p.webp)}.bg.manezh{background-image:url(assets/bg/manezh_p.webp)}
.bg.park{background-image:url(assets/bg/park_l.webp);background-position:60% 100%}
@media(min-aspect-ratio:1/1){.bg.rest{background-image:url(assets/bg/rest_l.webp)}.bg.manezh{background-image:url(assets/bg/manezh_l.webp)}}
.loc::before,.loc::after{z-index:25}
.loc .slot{--h:min(54dvh,520px)}
.sparks i{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffd96b;box-shadow:0 0 10px 3px #ffd96b;animation:tw 2s ease-in-out infinite alternate}
.sparks i:nth-child(1){left:18%;top:30%}.sparks i:nth-child(2){left:42%;top:22%;animation-delay:.4s}.sparks i:nth-child(3){left:60%;top:34%;animation-delay:.9s}.sparks i:nth-child(4){left:80%;top:26%;animation-delay:.2s}.sparks i:nth-child(5){left:30%;top:46%;animation-delay:1.2s}.sparks i:nth-child(6){left:72%;top:48%;animation-delay:.7s}
.bg.cinema{background:radial-gradient(70% 50% at 50% 30%,#3a3f8a,#12132e 70%);animation:none}
.cinema .screen{position:absolute;left:12%;right:12%;top:14%;height:34%;background:linear-gradient(135deg,#dfe8ff,#9fb1ff);border:6px solid #0b0c1d;border-radius:6px;box-shadow:0 0 90px 20px #8fa2ff66;overflow:hidden;animation:flick 3s infinite}
.cinema .screen i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 40px,#ffffff44 40px 80px);animation:scr 6s linear infinite}
.cinema .seats{position:absolute;left:0;right:0;bottom:0;height:42%;background:radial-gradient(circle at 20px 22px,#4a1530 0 15px,transparent 16px) 0 0/48px 44px,#0b0c1d}
@keyframes flick{50%{opacity:.88}}@keyframes scr{to{transform:translateX(80px)}}
.tickets{position:absolute;z-index:6;left:50%;top:22%;width:clamp(120px,22vw,220px);height:auto;transform:translateX(-50%) rotate(-6deg);animation:flt 3.4s ease-in-out infinite alternate}
@keyframes flt{to{transform:translateX(-50%) translateY(-12px) rotate(4deg)}}
.bg.street{background:linear-gradient(#171a4a,#4b2a6a 60%,#7a3a70);animation:none}
.street .glow{position:absolute;left:50%;top:38%;width:70vmin;height:70vmin;transform:translate(-50%,-50%);background:radial-gradient(#ff9ec066,transparent 65%);animation:tw 4s ease-in-out infinite alternate}
.bokeh{position:absolute;left:12%;top:18%;width:60px;height:60px;border-radius:50%;background:#ffd96b55;filter:blur(2px);animation:flt 5s ease-in-out infinite alternate}.bokeh.b2{left:76%;top:30%;width:90px;height:90px;background:#ff9ec044;animation-delay:1s}.bokeh.b3{left:60%;top:12%;width:40px;height:40px;animation-delay:2s}
.hearts-rise{position:absolute;inset:0;z-index:6;pointer-events:none}
.hearts-rise i{position:absolute;bottom:20%;left:50%;font-style:normal;color:#ff4f7b;font-size:26px;text-shadow:2px 2px 0 var(--ink);opacity:0;animation:hr 4.5s ease-in infinite}
.hearts-rise i:nth-child(1){margin-left:-60px}.hearts-rise i:nth-child(2){margin-left:10px;animation-delay:.9s}.hearts-rise i:nth-child(3){margin-left:60px;animation-delay:1.8s}.hearts-rise i:nth-child(4){margin-left:-20px;animation-delay:2.7s}.hearts-rise i:nth-child(5){margin-left:36px;animation-delay:3.5s}
@keyframes hr{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translateY(-52dvh) scale(1.3) rotate(14deg)}}
.rain{position:absolute;inset:-100px 0 0 0;z-index:4;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg stroke='%23cfe0ff' stroke-width='1.3' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M20 10l-6 22M70 60l-6 22M120 20l-6 22M40 100l-6 22M100 120l-6 22M145 90l-6 22'/%3E%3C/g%3E%3C/svg%3E");animation:rainfall .7s linear infinite}
.rain.r2{background-size:110px;opacity:.6;animation-duration:.5s}
@keyframes rainfall{to{background-position:-30px 160px}}
.cart{position:absolute;z-index:3;left:0;top:0;width:260px;height:auto;will-change:transform;transform-origin:50% 100%;filter:drop-shadow(0 8px 6px #0008)}
.s7 .slot{--h:min(52dvh,500px)}
.quote{position:absolute;z-index:12;left:50%;bottom:76px;transform:translateX(-50%);width:min(420px,92vw);display:flex;flex-direction:column;gap:6px;pointer-events:none}
.quote .cm{box-shadow:var(--sh);border:var(--bd)}
.quote small{align-self:center;background:#fffdf5;border:2px solid var(--ink);border-radius:99px;padding:2px 10px;font-size:11px;font-weight:700}
/* ---------- мобильные ---------- */
@media(max-width:600px){
 .scene{--h:min(44dvh,380px)}
 .loc .slot{--h:min(50dvh,430px)}
 .s1 .slot{--h:min(36dvh,340px)}
 .s2 .slot{--h:min(38dvh,360px)}
 .tt{width:100vw;height:100dvh;border:0;border-radius:0;--h:min(38dvh,340px)}
 .enter{bottom:76px}
 .tip{bottom:128px}
 .tt-side{bottom:140px}
 .s1-body{top:44px;gap:8px}
 .scene::before,.scene::after{width:6px}
 .s7 .slot{--h:min(40dvh,380px)}
 .rv-desk{width:84vw}.rv-ch{left:30%;--k:1.2}
}
@media(max-height:560px){.tt-top,.tt-cap{display:none}.plate{top:40px}.msgs{height:80px}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .rain{display:none}.fly{display:none}
}