@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Nunito:wght@600;800&family=Caveat:wght@500;700&display=swap');
:root{--ink:#0b0820;--amber:#ffb86b;--rose:#ff7a9c;--cream:#ffe3c4;--paper:#fbf1e4;--plum:#3a2748;--px:'Press Start 2P',ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font:600 16px/1.5 Nunito,'Segoe UI',system-ui,sans-serif;color:#fff4ea;background:var(--ink);overflow:hidden;transition:opacity .32s}
body.out{opacity:0}
#sky{position:fixed;inset:0;background:linear-gradient(var(--s1,#0b0820),var(--s2,#2b1744) 70%,var(--s3,#7a3b5a))}
#stars{position:fixed;inset:0;width:100%;height:100%}
#city{position:fixed;left:0;bottom:0;pointer-events:none;display:block}
#city .fl{animation:fl 3.2s steps(1) infinite}
@keyframes fl{50%{opacity:.12}}
.wrap{position:relative;z-index:2;height:100%;max-width:420px;margin:0 auto;padding:22px;overflow-y:auto;display:flex;flex-direction:column;text-align:center;animation:in .8s cubic-bezier(.2,.7,.2,1) both}
.stage{margin:auto 0;width:100%;padding-bottom:6px}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
.h{font:400 1rem/1.7 var(--px);color:var(--cream);text-shadow:3px 3px 0 #b03a60;margin-bottom:16px}
.sub{font-size:.92rem;color:#d9c3d8;margin-bottom:28px;min-height:1.5em}
.hrt{display:flex;justify-content:center;margin-bottom:22px}
.hrt svg{filter:drop-shadow(0 0 16px #ff7a9ca0);animation:beat 1.5s infinite}
@keyframes beat{0%,40%,100%{scale:1}15%{scale:1.13}28%{scale:1}}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:15px 18px;font:800 1.02rem Nunito,sans-serif;color:#3a1230;background:linear-gradient(#ffd3a1,#ff8fa8);box-shadow:0 4px 0 #b84a6c,0 10px 28px #ff7a9c55;cursor:pointer;text-decoration:none;text-align:center;position:relative;overflow:hidden;transition:transform .12s,box-shadow .12s,opacity .5s}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 #b84a6c,0 4px 14px #ff7a9c55}
.btn::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,#fff0,#ffffff8c,#fff0);transform:skewX(-20deg);animation:shine 3.6s infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:140%}}
.btn.off{opacity:.38;pointer-events:none;filter:grayscale(.5)}
.btn.hide{opacity:0;pointer-events:none}
.late{opacity:0;animation:ink .8s 4.9s both}
@keyframes ink{from{opacity:0;translate:0 6px}to{opacity:1}}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
/* пин-код */
.dots{display:flex;gap:14px;justify-content:center;margin-bottom:34px}
.dot{width:16px;height:16px;background:#ffffff1c;box-shadow:0 0 0 2px #ffffff44;transition:.15s}
.dot.f{background:var(--amber);box-shadow:0 0 0 2px var(--cream),0 0 16px var(--amber);scale:1.15}
.bad .dot.f{background:#ff4d6d;box-shadow:0 0 0 2px #ffb3c0,0 0 16px #ff4d6d}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{translate:-9px}40%,80%{translate:9px}}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(100%,270px);margin:0 auto}
.k{aspect-ratio:1;border:0;border-radius:14px;background:#ffffff14;color:var(--cream);font:400 1.1rem var(--px);box-shadow:inset 0 -4px 0 #0006,0 0 0 2px #ffffff26;cursor:pointer;transition:transform .08s,background .08s}
.k:active{transform:translateY(3px);background:#ffffff30;box-shadow:inset 0 0 0 #0006,0 0 0 2px #ffffff26}
.k.v{visibility:hidden}
/* письмо */
.paper{position:relative;background:var(--paper);color:var(--plum);padding:30px 22px 24px;border-radius:3px;box-shadow:0 22px 50px #000a;rotate:-1.2deg;text-align:left;margin-bottom:26px}
.paper::before{content:'';position:absolute;top:-12px;left:50%;width:86px;height:24px;margin-left:-43px;background:#ffb86b99;rotate:3deg}
.paper h2{font:700 2.7rem/1 Caveat,cursive;color:#c4476a;text-align:center;margin-bottom:14px}
.lines{background:repeating-linear-gradient(#0000 0 31px,#d9b9ae80 31px 32px)}
.lines p{font:500 1.5rem/32px Caveat,cursive;margin-bottom:32px;animation:ink 1s calc(.5s + var(--i)*1.05s) both}
.lines p:last-child{margin-bottom:0}
/* меню в духе RPG */
.steps{display:flex;gap:8px;justify-content:center;margin-bottom:18px}
.steps i{width:26px;height:8px;background:#ffffff22}
.steps .on{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.menu{display:flex;flex-direction:column;gap:12px;text-align:left;margin-bottom:22px}
.opt{position:relative;display:flex;gap:14px;align-items:center;padding:13px 44px 13px 13px;background:#140f33d9;border-radius:6px;box-shadow:0 0 0 2px #ffffff2b;cursor:pointer;transition:.18s}
.opt:active{scale:.985}
.opt.on{background:#3b1c52;box-shadow:0 0 0 3px var(--amber),0 0 26px #ffb86b4d}
.opt::after{content:'♥';position:absolute;right:18px;color:var(--rose);font-size:1.3rem;opacity:0;scale:.3;transition:.28s cubic-bezier(.3,1.6,.5,1)}
.opt.on::after{opacity:1;scale:1}
.ic{flex:none;width:50px;height:50px;border-radius:8px;display:grid;place-items:center;font-size:1.55rem;background:linear-gradient(145deg,#ffffff26,#ffffff0a);box-shadow:inset 0 -3px 0 #0005}
.ic.n{font:400 1rem var(--px);color:var(--amber)}
.opt h3{font-size:1.03rem;font-weight:800;color:#fff}
.opt p{font-size:.84rem;color:#cdb8d3;line-height:1.35}
/* время и небо */
.clock{font:400 2.2rem var(--px);color:#fff;text-shadow:4px 4px 0 #0006;margin-bottom:22px}
.clock b{font-weight:400;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.panel{background:#0b082070;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:6px;padding:22px 18px 14px;box-shadow:0 0 0 2px #ffffff30;margin-bottom:22px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:14px;background:linear-gradient(90deg,#ffd27a,#ff9a6c 45%,#7b3f8f 75%,#1b1550);border-radius:2px;box-shadow:0 0 0 2px #fff5;outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;background:#fff;border-radius:4px;box-shadow:0 0 0 3px var(--ink),0 0 18px #fffa;cursor:grab}
input[type=range]::-moz-range-thumb{width:24px;height:24px;background:#fff;border:3px solid var(--ink);border-radius:4px}
.lbl{display:flex;justify-content:space-between;margin-top:14px;font-size:.82rem;color:#eadff2}
.orb{position:fixed;left:0;top:0;pointer-events:none;will-change:transform}
#sun{width:70px;height:70px;margin:-35px;border-radius:50%;background:radial-gradient(#fff6c8 25%,#ffd24d 62%);box-shadow:0 0 0 6px #ffd24d55,0 0 60px 20px #ffb347aa}
#moon{width:56px;height:56px;margin:-28px;border-radius:50%;box-shadow:inset -15px -5px 0 0 #fff1d6,0 0 34px #fff1d655}
.cl{position:fixed;left:0;width:10px;height:10px;background:#fff;opacity:var(--cl,1);animation:drift 70s linear infinite;pointer-events:none;box-shadow:10px 0 #fff,-10px 10px #fff,0 10px #fff,10px 10px #fff,20px 10px #fff,30px 10px #fff,-20px 20px #fff,-10px 20px #fff,0 20px #fff,10px 20px #fff,20px 20px #fff,30px 20px #fff,40px 20px #fff}
@keyframes drift{from{translate:-120px}to{translate:calc(100vw + 60px)}}
/* билет */
#tk{filter:drop-shadow(0 20px 28px #000a);transition:transform .9s cubic-bezier(.5,0,.8,.4),opacity .9s}
#tk.fly{transform:translateY(-120vh) rotate(14deg) scale(.2);opacity:0}
.tk{background:var(--paper);color:var(--plum);text-align:left;padding:22px 22px 18px;position:relative}
.tk-a{border-radius:12px 12px 0 0;-webkit-mask:radial-gradient(circle 12px at 0 100%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 100%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 12px at 0 100%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 100%,#0000 97%,#000) right/51% 100% no-repeat}
.tk-b{border-radius:0 0 12px 12px;padding-top:20px;-webkit-mask:radial-gradient(circle 12px at 0 0,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 0,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 12px at 0 0,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 0,#0000 97%,#000) right/51% 100% no-repeat}
.tk-b::before{content:'';position:absolute;top:0;left:16px;right:16px;border-top:2px dashed #d8b9b0}
.tk h2{font:400 1.05rem/1.5 var(--px);color:#c4476a;margin-bottom:8px}
.r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0}
.r span{font-size:.84rem;color:#9a7a8c}
.r b{font-weight:800;text-align:right}
.r .big{font:400 1.4rem var(--px);color:#c4476a}
.note{font:500 1.55rem/1.1 Caveat,cursive;text-align:center;margin:6px 0 16px}
/* экраны ошибки */
.scr{position:fixed;inset:0;z-index:20;background:#000;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px;text-align:center;opacity:0;pointer-events:none;transition:opacity .6s}
.scr.on{opacity:1;pointer-events:auto}
.scr::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(#0000 0 2px,#0000003a 2px 4px);pointer-events:none}
.scr .btn{max-width:270px;z-index:1}
.err{font:400 1.05rem/1.6 var(--px);color:#ff4d6d;margin-bottom:20px;animation:gl 1.2s steps(1) infinite}
@keyframes gl{0%,100%{text-shadow:2px 0 #0ff,-2px 0 #f0f}30%{text-shadow:-3px 0 #0ff,3px 0 #f0f;translate:2px}60%{text-shadow:3px 1px #0ff,-3px -1px #f0f;translate:-2px}}
.mono{font:500 .95rem/1.6 ui-monospace,Menlo,monospace;color:#8fb8a8;margin-bottom:28px;min-height:7em;max-width:340px}
.rot{font-size:3.4rem;margin-bottom:18px;animation:rot 2.2s infinite ease-in-out}
@keyframes rot{0%,60%,100%{rotate:0deg}25%{rotate:-90deg}}
/* персонаж */
.mover{aspect-ratio:262/426;position:relative}
.mover::before{content:'';position:absolute;left:8%;right:8%;bottom:-6px;height:16px;border-radius:50%;background:#000a;filter:blur(6px)}
.spr{position:relative;width:100%;height:100%;transform-origin:50% 100%}
.spr img{width:100%;height:100%;display:block;transform:scaleX(var(--f,1))}
.spr img.walking{animation:bob .34s infinite}
@keyframes bob{50%{translate:0 -6px;rotate:calc(2deg*var(--f,1))}}
.hop{animation:hop .65s cubic-bezier(.3,.7,.4,1)}
@keyframes hop{0%{scale:1.06 .9}18%{scale:.95 1.07}50%{translate:0 -76px;scale:1}100%{translate:0 0;scale:1.04 .94}}
/* диалог */
.box{position:relative;background:#140f33;border-radius:6px;padding:18px 16px;box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--cream),0 18px 40px #0008}
.say{min-height:104px;display:flex;align-items:center;justify-content:center;font:400 .85rem/1.9 var(--px);color:#ffe27a;opacity:0;scale:.9;transition:.5s cubic-bezier(.3,1.5,.5,1)}
.say.on{opacity:1;scale:1}
.say::after{content:'';position:absolute;left:50%;bottom:-27px;margin-left:-10px;border:10px solid #0000;border-top-color:var(--cream)}
.hero{flex:1;display:flex;justify-content:center;align-items:flex-end;padding:34px 0 16px;min-height:0}
.hero .mover{width:min(56vw,32vh);cursor:pointer}
/* игра */
#area{position:fixed;inset:0;z-index:4;touch-action:none}
.hud{position:fixed;top:16px;left:50%;translate:-50% 0;z-index:6;display:flex;gap:4px;padding:8px 12px;background:#0b082080;border-radius:6px;box-shadow:0 0 0 2px #ffffff30}
.hud span{display:block;line-height:0}
.hud .bump{animation:bump .4s}
@keyframes bump{50%{scale:1.6}}
.it{position:absolute;left:0;top:0;line-height:0;will-change:transform;filter:drop-shadow(0 0 8px #ff7a9c99)}
.pop{position:absolute;font:800 1.05rem Nunito;color:#ffd0dc;text-shadow:0 2px 0 #0009;pointer-events:none;animation:up .9s forwards;white-space:nowrap}
@keyframes up{to{translate:0 -64px;opacity:0}}
.win{position:fixed;inset:0;z-index:30;background:#0b0820d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;text-align:center;opacity:0;pointer-events:none;transition:opacity .6s}
.win.on{opacity:1;pointer-events:auto}
.win .box{max-width:330px;width:100%}
.win .spr{width:96px;height:auto;margin:0 auto 26px;animation:hop 1.1s infinite}.win .spr img{height:auto}
.win h2{font:400 1.05rem/1.6 var(--px);color:var(--cream);text-shadow:3px 3px 0 #b03a60;margin-bottom:14px}
.win p{font-size:.98rem;line-height:1.55;margin-bottom:22px;color:#f0e2f2}
.cf{position:fixed;top:-30px;z-index:50;pointer-events:none;line-height:0;animation:fall linear forwards}
@keyframes fall{to{translate:var(--dx) 112vh;rotate:var(--r)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important}}