.cinematic{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 30%,#324337,#0b100d 72%);color:#f4f4e9;font-family:Manrope,system-ui,sans-serif}.cinematic[hidden]{display:none}.cinematic-inner{width:min(980px,100%)}.cinematic-top,.cinematic-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.cinematic-top{padding:0 2px 10px;color:#c5f477;font:11px 'Space Mono',monospace;letter-spacing:.12em}.cinematic-stage{position:relative;aspect-ratio:16/9;min-height:290px;max-height: 66vh;max-height: 66svh;overflow:hidden;border:1px solid #738d77;border-radius:16px;background:#18251e;box-shadow:0 24px 70px #0009}.cinematic-caption{min-height:100px;padding:16px 4px 8px}.cinematic-caption h2{font-size:clamp(22px,3vw,35px);line-height:1.1;margin:0 0 6px}.cinematic-caption p{font-size:13px;line-height:1.5;color:#c7d5c7;margin:0}.cinematic-actions{padding:7px 0 0}.cinematic-actions button{border:1px solid #6a866f;border-radius:9px;background:#27382c;color:#f1f7eb;padding:11px 16px;font:700 12px Manrope;cursor:pointer}.cinematic-actions #cinematicNext{background:#c5f477;color:#182216;border-color:#c5f477}.cinematic-actions button:hover{filter:brightness(1.12)}
.intro-bike{position:absolute;inset:0;background:linear-gradient(#9ab2af 0 52%,#707d72 52% 57%,#323d37 57%)}.intro-bike:before{content:"";position:absolute;left:-10%;right:-10%;top:27%;height:32%;background:repeating-linear-gradient(90deg,#657971 0 4%,#d5d9c9 4% 4.5%,#77877b 4.5% 13%,#cad0c2 13% 13.5%);opacity:.7;animation:city-pass 10s linear infinite}.bike-road{position:absolute;left:0;right:0;bottom:0;height:43%;background:repeating-linear-gradient(90deg,#303b36 0 15%,#415046 15% 16%)}.bike-road:after{content:"";position:absolute;top:48%;left:0;right:0;border-top:4px dashed #e1d6a6}.bike-rig{position:absolute;left:16%;bottom:11%;width:47%;height:64%;animation:ride-across 5s ease-in-out infinite alternate;filter:drop-shadow(0 10px 7px #15201788)}.bike-wheel{position:absolute;bottom:0;width:24%;aspect-ratio:1;border:8px solid #17211c;border-radius:50%;background:repeating-conic-gradient(from 0deg,#9bad9c 0deg 2deg,transparent 2deg 30deg);animation:wheel-turn .7s linear infinite}.bike-wheel.front{right:3%}.bike-wheel.back{left:6%}.bike-frame{position:absolute;left:18%;right:17%;bottom:12%;height:34%;border-left:8px solid #c8dcab;border-bottom:8px solid #c8dcab;transform:skew(-12deg)}.bike-frame:before{content:"";position:absolute;left:26%;top:-9%;width:43%;height:85%;border-left:7px solid #c8dcab;border-top:7px solid #c8dcab;transform:skew(31deg) rotate(-10deg)}.bike-handle{position:absolute;right:16%;bottom:43%;height:24%;width:5px;background:#d1dbb7;transform:rotate(17deg)}.bike-handle:after{content:"";position:absolute;top:-2px;left:-2px;width:35px;border-top:6px solid #151c18;border-radius:6px}.bike-seat{position:absolute;left:40%;bottom:45%;width:16%;border-top:8px solid #1b231c;border-radius:50%}.bike-body{position:absolute;left:43%;bottom:44%;width:20%;height:32%;border-radius:20px 20px 7px 7px;background:#eee9db;transform:rotate(24deg);box-shadow:inset -10px 0 #c9c4b7}.bike-body:after{content:"";position:absolute;right:-39%;top:35%;width:55%;height:10%;border-radius:10px;background:#d2a07e;transform:rotate(23deg)}.bike-leg{position:absolute;left:51%;bottom:21%;width:5%;height:26%;border-radius:12px;background:#242826;transform-origin:top;animation:pedal .7s ease-in-out infinite alternate}.bike-leg.two{animation-direction:alternate-reverse;left:55%}.bike-head{position:absolute;left:39%;bottom:66%;width:26%;height:30%;object-fit:contain;filter:drop-shadow(0 3px 2px #0005)}.bike-sign{position:absolute;right:7%;top:14%;padding:8px 12px;background:#dfe9d5;color:#203025;border-radius:5px;font:700 clamp(12px,2vw,22px) Manrope;transform:rotate(2deg)}
.intro-transfer,.intro-tolya,.birthday-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}.intro-transfer{background:radial-gradient(circle at 50% 40%,#446552,#132019 70%)}.transfer-phone{width:min(360px,72%);padding:26px;border:8px solid #18211d;border-radius:28px;background:#e7eee5;color:#18231c;box-shadow:0 22px 55px #0009;animation:phone-enter .6s ease-out both}.transfer-phone small{display:block;color:#668070;font:11px 'Space Mono',monospace}.transfer-phone h3{font-size:23px;margin:22px 0 8px}.transfer-phone strong{display:block;font-size:clamp(30px,5vw,54px);letter-spacing:-.05em;color:#9e3d32}.transfer-phone p{color:#3d5a43;margin:24px 0 0}.transfer-sent{position:absolute;right:8%;bottom:10%;padding:10px 17px;border-radius:12px;background:#c5f477;color:#1c2a1e;font:700 12px 'Space Mono',monospace;transform:rotate(6deg);animation:pop-in .7s .5s both}
.intro-tolya{background:linear-gradient(145deg,#263647,#131e27)}.chat-window{width:min(480px,82%);display:grid;gap:12px}.chat-contact{color:#b7d7f0;font:12px 'Space Mono',monospace}.chat-bubble{max-width:82%;padding:13px 16px;border-radius:17px;background:#344e68;font-size:clamp(14px,2vw,21px);animation:pop-in .5s both}.chat-bubble.mine{justify-self:end;background:#b9ed84;color:#172516;animation-delay:.35s}.chat-bubble.hearts{font-size:clamp(27px,5vw,57px);letter-spacing:.1em;animation-delay:.7s}.floating-heart{position:absolute;bottom:-15%;font-size:25px;opacity:0;animation:heart-rise 3s linear infinite;animation-delay:calc(var(--i)*.45s);left:calc(12% + var(--i)*13%)}
.birthday-stage{background:radial-gradient(circle at 50% 35%,#576446,#1a2520 72%)}.greeting-group{display:flex;align-items:center;justify-content:center;gap:20px;width:90%;height:78%}.greeting-card{width:min(33%,190px);min-width:105px;aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px solid #d8e5cb77;border-radius:16px;background:#26372cbf;box-shadow:0 12px 25px #0005;animation:pop-in .55s both}.greeting-card:nth-child(2){animation-delay:.25s}.greeting-card:nth-child(3){animation-delay:.5s}.greeting-portrait{width:72%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#5d735e;display:grid;place-items:center}.greeting-portrait img{width:100%;height:100%;object-fit:cover}.greeting-portrait span{font-size:clamp(35px,6vw,70px);font-weight:800;color:#dce8d8}.greeting-card b{font-size:clamp(11px,1.5vw,17px);text-align:center}.greeting-card small{font-size:10px;color:#c6d7c6;text-align:center}.birthday-title{position:relative;z-index:2;font-size:clamp(42px,8vw,104px);line-height:.98;text-align:center;color:#efffcf;text-shadow:0 7px 0 #394d34,0 13px 24px #0008;transform:rotate(-3deg);animation:pop-in .7s both}.birthday-confetti{position:absolute;top:-15%;left:calc(var(--i)*4%);width:10px;height:24px;background:hsl(calc(var(--i)*31),85%,67%);transform:rotate(calc(var(--i)*35deg));animation:confetti-fall calc(3s + var(--i)*.1s) linear infinite;animation-delay:calc(var(--i)*-.2s)}
.save-slots{display:grid;gap:9px}.save-slot{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:46px;padding:11px;border:1px solid #4d654f;border-radius:9px;background:#202c23}.save-slot b{display:block;color:#e5f4d8;font-size:12px}.save-slot small{color:#a9bea7;font-size:10px}.save-slot-actions{display:flex;gap:8px;flex-wrap:wrap}.save-slot-actions button,.save-transfer button{min-height:48px;border:1px solid #68826a;border-radius:6px;background:#324638;color:#edfae8;padding:7px 9px;font:10px 'Space Mono',monospace;cursor:pointer}.save-slot-actions button:disabled{opacity:.45;cursor:default}.save-transfer{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.save-hint{margin:13px 0 0;color:#b9cbb8;font-size:11px;line-height:1.5}
.phone-fiction:empty{display:none}
.dog-message-photo{max-width:320px;margin:14px auto 10px;border:7px solid #f4f0e8;border-bottom-width:23px;border-radius:7px;background:#f4f0e8;box-shadow:0 9px 25px #171b1c30;transform:rotate(-2deg)}
.dog-message-photo img{display:block;width:100%;aspect-ratio:8/5;object-fit:cover}
@keyframes city-pass{to{transform:translateX(-15%)}}@keyframes ride-across{from{transform:translateX(-5%)}to{transform:translateX(52%)}}@keyframes wheel-turn{to{transform:rotate(360deg)}}@keyframes pedal{to{transform:rotate(33deg)}}@keyframes phone-enter{from{opacity:0;transform:translateY(50px) rotate(-5deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes pop-in{from{opacity:0;transform:scale(.65) rotate(-7deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes heart-rise{15%{opacity:1}to{opacity:0;transform: translateY(-120vh) rotate(30deg);transform: translateY(-120svh) rotate(30deg)}}@keyframes confetti-fall{to{transform: translateY(120vh) rotate(740deg);transform: translateY(120svh) rotate(740deg)}}
@media(max-width:600px){.cinematic-stage{aspect-ratio:4/5;min-height:360px}.cinematic-caption{min-height:122px}.bike-rig{width:78%;left:0;bottom:18%;height:45%}.bike-sign{right:3%;top:9%}.transfer-phone{width:83%;padding:20px}.greeting-group{gap:7px}.greeting-card{min-width:0;width:32%;height:65%;aspect-ratio:auto;padding:7px}.greeting-card small{font-size:8px}.save-slot{align-items:flex-start;flex-direction:column}.save-slot-actions{width:100%}}
@media(prefers-reduced-motion:reduce){.cinematic *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Astra artwork: illustrated Neva embankment and a single coherent cyclist. */
.cinematic{background:radial-gradient(ellipse at 50% 10%,#263f48,#0d171d 75%);padding:clamp(12px,3vw,28px)}
.cinematic-inner{width:min(1060px,100%)}
.cinematic-stage{border-color:#8db4b04d;border-radius:22px;background:#243d46;box-shadow:0 24px 90px #0008}
.cinematic-top{color:#cee1c7;padding:0 5px 13px;letter-spacing:.17em}
.cinematic-caption{padding:20px 5px 8px}.cinematic-caption h2{letter-spacing:-.04em}.cinematic-caption p{max-width:770px;color:#b7c9c8;line-height:1.65}
.intro-bike{background:#a8c8c8 url('assets/intro-city-v2.svg') center/cover no-repeat}
.intro-bike:before{top:0;left:0;right:0;height:100%;background:linear-gradient(110deg,#e8edc31a,transparent 55%);opacity:1;animation:none}
.bike-road{height:24%;background:transparent}
.bike-road:after{top:61%;border-top:3px dashed #ebdfb788;animation:road-dash 1s linear infinite}
.bike-rig{width:54%;height:76%;left:14%;bottom:5%;background:url('assets/intro-cyclist-v2.svg?v=20260925face') center bottom/contain no-repeat;filter:drop-shadow(0 10px 5px #14333c30);animation:cyclist-cruise 3.4s ease-in-out infinite}
.bike-rig>*{display:none}
.bike-sign{right:6%;top:9%;padding:13px 18px;border:1px solid #f3ecd7;border-radius:4px;background:#254f5cef;color:#f6efd4;box-shadow:0 6px 0 #193c45,0 10px 22px #193b4530;font-size:clamp(12px,2vw,20px);letter-spacing:.06em;transform:none}
.bike-sign:before{content:'МАЛЕНЬКОЕ ПРИКЛЮЧЕНИЕ';display:block;margin-bottom:6px;font:8px 'Space Mono',monospace;letter-spacing:.15em;color:#b6d5cf}
.intro-transfer{background:linear-gradient(110deg,#152e3ced,#193b48dd),url('assets/intro-city-v2.svg') center/cover}
.intro-transfer:before{content:'₽';position:absolute;left:10%;top:-20%;color:#bdd9c00b;font:800 430px Manrope;transform:rotate(-15deg)}
.transfer-phone{position:relative;width:min(360px,68%);padding:38px 28px 30px;border:7px solid #0c202c;border-radius:33px;background:linear-gradient(150deg,#f5f3df,#d9e8da);box-shadow:0 0 0 1px #799397,15px 26px 50px #0006;transform:rotate(-3deg)}
.transfer-phone:before{content:'';position:absolute;width:70px;height:7px;border-radius:8px;background:#15303b;top:10px;left:calc(50% - 35px)}
.transfer-phone small{font-size:9px;letter-spacing:.14em;color:#527669}.transfer-phone h3{margin-top:23px;font-size:21px;letter-spacing:-.03em}.transfer-phone strong{color:#284e4a;font-size:clamp(28px,5vw,49px);margin:12px 0}.transfer-phone p{font-size:12px;line-height:1.5;padding-top:15px;border-top:1px solid #9aae9b6e;margin-top:15px;color:#537061}
.transfer-sent{right:13%;bottom:11%;border:1px solid #ebf2cf;background:#d9efac;box-shadow:0 9px 25px #0004;padding:13px 19px;transform:rotate(4deg);font-size:10px}
.intro-tolya{background:radial-gradient(ellipse at 10% 20%,#3b5f63,#142c3a 80%)}
.chat-window{position:relative;width:min(520px,85%);padding:24px;background:#142c3add;border:1px solid #83a2a54d;border-radius:22px;box-shadow:0 20px 65px #00101670;gap:15px}
.chat-contact{padding:3px 0 16px 49px;position:relative;color:#e4eedf;border-bottom:1px solid #78969b30;font:11px 'Space Mono',monospace;letter-spacing:.06em}
.chat-contact:before{content:'Т';position:absolute;left:0;top:-8px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#769e96;color:#122f3a;font:800 18px Manrope}
.chat-bubble{background:#345864;color:#e8efdf;font-size:clamp(13px,2vw,18px);line-height:1.5;border-radius:15px 15px 15px 4px;padding:11px 15px}
.chat-bubble.mine{background:#c9dfa2;border-radius:15px 15px 4px 15px;color:#234039}.chat-bubble.hearts{background:#dce7bc;font-size:clamp(28px,5vw,45px);letter-spacing:.1em;line-height:1.2}.floating-heart{color:#ddaf9c;opacity:.2;filter:blur(.3px)}
.birthday-stage{background:radial-gradient(ellipse at 50% 25%,#547b72,#193340 80%)}.birthday-title{font-size:clamp(40px,8vw,98px);letter-spacing:-.055em;color:#efe6c9;text-shadow:0 5px 0 #426266,0 15px 35px #071b2499;transform:rotate(-2deg)}
.cinematic-actions button{border-color:#779b9559;border-radius:10px;background:#243f47;color:#d6e5dc;padding:12px 18px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}.cinematic-actions #cinematicNext{background:#d6e5ad;color:#193930;border-color:#d6e5ad}
@keyframes cyclist-cruise{0%,100%{transform:translate(0,0) rotate(-.3deg)}50%{transform:translate(3%,2px) rotate(.3deg)}}
@keyframes road-dash{to{transform:translateX(-80px)}}
@media(max-width:600px){.cinematic-stage{aspect-ratio:4/5;min-height:320px;max-height: 61vh;max-height: 61svh}.intro-bike{background-position:59% center}.bike-rig{width:100%;height:61%;left:-7%;bottom:5%}.bike-sign{top:8%;right:6%}.bike-sign:before{font-size:7px}.transfer-phone{width:82%;padding:36px 23px 24px}.transfer-sent{right:5%;bottom:9%;font-size:9px}.chat-window{width:89%;padding:19px;gap:13px}.cinematic-caption{padding-top:16px;min-height:117px}.cinematic-caption h2{font-size:23px}.cinematic-caption p{font-size:12px}.cinematic-actions button{padding:10px 13px}}
@media(prefers-reduced-motion:reduce){.bike-rig,.bike-road:after{animation:none}}
/* The prologue stays on one moving bicycle scene; messages descend over it. */
.cinematic-intro #cinematicCount{display:none}
.cinematic-sound-control{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-left:auto;max-width:min(56vw,340px)}
.cinematic-sound-control button{min-height:38px;padding:7px 14px;border:1px solid #d6e5ad;border-radius:9px;background:#203b42;color:#f3f5df;font:800 clamp(12px,1.5vw,16px) Manrope,system-ui,sans-serif;box-shadow:0 4px 14px #04151d88;cursor:pointer}
.cinematic-sound-control button:hover,.cinematic-sound-control button:focus-visible{background:#345861;outline:2px solid #e8f4c9;outline-offset:2px}
.cinematic-sound-control small{color:#e9d9a0;font:800 clamp(9px,1vw,11px)/1.2 Manrope,system-ui,sans-serif;letter-spacing:.035em;text-align:right}
@media(max-width:600px){.cinematic-sound-control{max-width:59vw}.cinematic-sound-control button{min-height:40px;padding:7px 10px;font-size:13px}.cinematic-sound-control small{max-width:185px;font-size:11px;line-height:1.25}}
.intro-sequence{position:absolute;inset:0;overflow:hidden}
.intro-bike-scene{transition:transform .95s cubic-bezier(.2,.75,.25,1),filter .95s ease}
.intro-sequence .bike-sign{transition:opacity .35s ease}
.intro-sequence[data-phase="1"] .bike-sign,.intro-sequence[data-phase="2"] .bike-sign,.intro-sequence[data-phase="3"] .bike-sign{opacity:0}
.intro-fly-message{position:absolute;z-index:4;top:8%;right:7%;width:min(360px,43%);padding:16px 18px;border:1px solid #e7edda;border-radius:16px;background:linear-gradient(145deg,#f6f2e2,#e2ecdf);color:#16333c;box-shadow:0 16px 0 #132c3488,0 22px 38px #091b2470;opacity:0;transform:translateY(-180%);transition:transform .85s cubic-bezier(.17,.9,.3,1),opacity .4s ease;pointer-events:none}
.intro-message-head{display:flex;align-items:center;gap:10px;text-align:left}
.intro-message-head>span:last-child{display:grid;gap:2px}
.intro-message-head b{font-size:clamp(13px,1.7vw,17px);line-height:1.2}
.intro-message-head small{font:10px 'Space Mono',monospace;color:#55757a}
.intro-message-avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#3e6870;color:#f6efdc;font:800 13px Manrope}
.intro-fly-tolya .intro-message-avatar{background:#a17a5a}
.intro-fly-message p{margin:12px 0 11px;font-size:clamp(14px,1.8vw,19px);font-weight:800;line-height:1.35}
.intro-message-foot{padding-top:9px;border-top:1px solid #91a9a5;font-size:clamp(11px,1.35vw,14px);line-height:1.4;color:#3b5c60}
.intro-message-foot b{color:#965748}
.intro-sequence[data-phase="1"] .intro-fly-transfer,.intro-sequence[data-phase="2"] .intro-fly-tolya{opacity:1;transform:translateY(0)}
.intro-sequence[data-phase="2"] .intro-fly-transfer,.intro-sequence[data-phase="3"] .intro-fly-transfer,.intro-sequence[data-phase="3"] .intro-fly-tolya{opacity:0;transform:translateY(140%)}
.intro-title-panel{position:absolute;z-index:5;inset:0 0 auto;height:61%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:20px;background:linear-gradient(180deg,#102c37f5,#204451f0);border-bottom:4px solid #e5c993;box-shadow:0 15px 24px #0d252e99;color:#f5e9ca;text-align:center;transform:translateY(-110%);transition:transform 1s cubic-bezier(.19,.82,.2,1)}
.intro-title-kicker{font:700 clamp(9px,1.3vw,12px) 'Space Mono',monospace;letter-spacing:.2em;color:#bbd8d1}
.intro-title-panel strong{font:900 clamp(52px,8vw,104px)/.9 Manrope,system-ui,sans-serif;letter-spacing:-.09em;text-shadow:0 5px 0 #0a222c,0 11px 20px #07191e80}
.intro-title-rule{height:4px;width:min(55%,370px);background:linear-gradient(90deg,transparent,#e7c884 18% 82%,transparent)}
.intro-title-panel>b{font:900 clamp(22px,3.8vw,42px)/1 Manrope,system-ui,sans-serif;letter-spacing:.06em;color:#e4ce99}
.intro-title-panel>small{font:9px 'Space Mono',monospace;letter-spacing:.14em;color:#bcd6d0}
.intro-sequence[data-phase="3"] .intro-title-panel{transform:translateY(0)}
.intro-sequence[data-phase="3"] .intro-bike-scene{transform:translateY(24%) scale(.93);filter:brightness(.76) saturate(.8)}
@media(max-width:600px){.intro-fly-message{top:6%;right:6%;width:88%;padding:13px 14px}.intro-message-head b{font-size:14px}.intro-fly-message p{font-size:15px}.intro-title-panel{height:57%;gap:7px;padding:12px}.intro-title-panel strong{font-size:clamp(46px,13vw,64px)}.intro-title-panel>b{font-size:clamp(21px,5.5vw,28px)}.intro-title-panel>small{font-size:7px;letter-spacing:.07em}}
@media(prefers-reduced-motion:reduce){.intro-bike-scene,.intro-sequence .bike-sign,.intro-fly-message,.intro-title-panel{transition-duration:.01ms!important}}
/* P.39 (B5): tap active feedback for classes without :active */
.save-slot:active,.save-slot-actions button:active,.save-transfer button:active{transform:scale(.97);filter:brightness(.92)}