*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#eee;
  background:radial-gradient(120% 80% at 50% -10%,#3a2a72,#1a1240 55%,#0a0720);
  display:flex;justify-content:center}
#app{width:100%;max-width:430px;min-height:100vh;display:flex;flex-direction:column;position:relative}

/* ── живое ночное небо (позади контента) ── */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sky .neb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.4;mix-blend-mode:screen}
.neb.n1{width:80vw;height:80vw;left:-24vw;top:-12vh;background:radial-gradient(circle,#6a3ab0,transparent 68%);animation:drift1 28s ease-in-out infinite}
.neb.n2{width:66vw;height:66vw;right:-28vw;top:16vh;background:radial-gradient(circle,#a03474,transparent 68%);animation:drift2 34s ease-in-out infinite}
.neb.n3{width:60vw;height:60vw;left:6vw;bottom:-16vh;background:radial-gradient(circle,#2a4aa0,transparent 68%);animation:drift1 31s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(6vw,4vh)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-5vw,5vh)}}

.stars-l{position:absolute;inset:-10%;background-repeat:repeat}
.stars-l.s1{background-image:radial-gradient(1.4px 1.4px at 12px 24px,#fff,transparent),radial-gradient(1.2px 1.2px at 88px 60px,#dfe4ff,transparent),radial-gradient(1px 1px at 140px 120px,#fff,transparent),radial-gradient(1.3px 1.3px at 40px 172px,#ffe9c0,transparent);background-size:190px 200px;animation:twk1 4s ease-in-out infinite,skyfall 140s linear infinite}
.stars-l.s2{background-image:radial-gradient(1px 1px at 60px 30px,#fff,transparent),radial-gradient(1px 1px at 10px 100px,#cfd6ff,transparent),radial-gradient(1.2px 1.2px at 120px 82px,#fff,transparent);background-size:150px 160px;opacity:.75;animation:twk2 6s ease-in-out infinite,skyfall 200s linear infinite}
.stars-l.s3{background-image:radial-gradient(2px 2px at 30px 50px,#fff,transparent),radial-gradient(1.7px 1.7px at 112px 140px,#ffe9c0,transparent);background-size:260px 280px;animation:twk1 5s ease-in-out infinite .6s,skyfall 260s linear infinite}
@keyframes twk1{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes twk2{0%,100%{opacity:.4}50%{opacity:.85}}
@keyframes skyfall{from{background-position:0 0}to{background-position:0 1000px}}

.moon{position:absolute;top:4.5%;right:9%;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff8de,#ffe9a8 52%,#e6c264);
  box-shadow:0 0 28px 8px rgba(255,224,138,.35),0 0 74px 22px rgba(255,224,138,.16)}
.moon:after{content:"";position:absolute;top:20%;left:44%;width:10px;height:10px;border-radius:50%;background:rgba(196,158,86,.32);
  box-shadow:14px 12px 0 -2px rgba(196,158,86,.26),4px 28px 0 -3px rgba(196,158,86,.22)}

.shoot{position:absolute;top:14%;left:-14%;width:130px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#fff);opacity:0;transform:rotate(18deg);
  filter:drop-shadow(0 0 4px rgba(255,255,255,.7));animation:shoot 11s ease-in infinite 4s}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(18deg)}
  3%{opacity:1}14%{opacity:1}20%{opacity:0}100%{opacity:0;transform:translate(128vw,42vh) rotate(18deg)}}

.range{position:absolute;left:0;right:0;bottom:0;height:20vh;opacity:.55}
.range svg{width:100%;height:100%;display:block}

@media (prefers-reduced-motion:reduce){
  .neb,.stars-l,.shoot{animation:none}
}
.gate{margin:auto;text-align:center;opacity:.8;padding:24px}
.room{display:flex;flex-direction:column;min-height:100vh;position:relative}
.stars{position:absolute;top:14px;right:18px;font-size:26px}
.progress{display:flex;gap:7px;justify-content:center;padding:16px 12px 6px}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;transition:.2s}
.dot.active{background:#ffe08a;transform:scale(1.35)}
.dot.done{background:#7a5fc2}
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px 22px}
.screen h1{font-size:23px;margin-bottom:8px}
.lead{font-size:14px;opacity:.75;line-height:1.5;max-width:320px;margin-bottom:16px}
.btn{background:linear-gradient(#4a2c84,#3a2168);color:#fff;border:1.5px solid #ffe08a;
  padding:11px 20px;border-radius:999px;font-size:14px;cursor:pointer;margin:4px}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.25);color:#cfc9e0}
.btn:disabled{opacity:.4;cursor:not-allowed}
[x-cloak]{display:none!important}
.linkbtn{background:none;border:none;color:#cfc9e0;opacity:.65;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin-top:14px}
.linkbtn:hover{opacity:1}
/* вход: обложка → разворот-поздравление */
.cover,.greet{display:flex;flex-direction:column;align-items:center}
.cover-title{font-size:19px;font-weight:600;color:#fff;letter-spacing:.02em;padding:9px 14px;
  border-top:1px solid rgba(255,224,138,.4);border-bottom:1px solid rgba(255,224,138,.4)}
.cover-hint{font-size:13px;opacity:.7;margin-top:10px}
.greet h1{font-size:26px;line-height:1.22;margin-bottom:10px}
.greet .lead{max-width:300px}
/* обводка сердца на входе (нативный SVG-путь) */
.trace{width:min(72vw,280px);aspect-ratio:1;margin:6px auto 0;touch-action:none}
.tracesvg{width:100%;height:100%;display:block;overflow:visible}
.hguide{fill:none;stroke:rgba(255,224,138,.3);stroke-width:2.5;stroke-dasharray:4 7;transition:opacity .4s}
.hglow2{fill:url(#hglow);opacity:0;pointer-events:none}
.hfill{fill:url(#hgrad);opacity:0;pointer-events:none}
.hshine{fill:#fff;opacity:0;pointer-events:none}
.hreveal{fill:none;stroke:url(#hstroke);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(255,224,138,.85))}
.sprk{fill:#ffe08a;filter:drop-shadow(0 0 3px rgba(255,224,138,.9))}
.hstart{fill:#ffe08a;animation:tpulse 1.1s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(255,224,138,.8))}
@keyframes tpulse{0%,100%{r:8}50%{r:11.5}}
.tracesvg.lit .hguide{opacity:0}
.tracesvg.lit .hstart{opacity:0;transition:opacity .3s}
.guide{display:flex;align-items:flex-end;gap:10px;padding:10px 16px}
.fox{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f0a86a,#c76a34);
  display:flex;align-items:center;justify-content:center;font-size:24px}
.bubble{flex:1;background:#fdf6e3;color:#3a2168;border-radius:14px;border-bottom-left-radius:3px;padding:10px 13px;font-size:13px;line-height:1.4}
.nav{display:flex;justify-content:flex-start;gap:10px;padding:6px 16px 18px}
.nav .btn:last-child{margin-left:auto}
.deck{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 4px}
.mini{flex:0 0 30%;max-width:120px;aspect-ratio:112/168;cursor:pointer;border-radius:10px;overflow:hidden;
  border:1.5px solid #ffe08a;background:radial-gradient(120% 90% at 50% 22%,#3a2168,#1c1138);
  box-shadow:0 6px 16px rgba(0,0,0,.35);position:relative}
.mini svg{width:100%;height:100%;display:block}
.mini.up{border-color:#d9c07a}
.float{width:100%;height:100%}
.mini{animation:flo 5s ease-in-out infinite}
.mini:nth-of-type(2n){animation-delay:-2.5s}.mini:nth-of-type(3n){animation-delay:-1.2s}
@keyframes flo{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.twg{animation:twk 2.6s ease-in-out infinite}@keyframes twk{0%,100%{opacity:.35}50%{opacity:1}}
.hidden{visibility:hidden}
.overlay{position:fixed;inset:0;background:rgba(10,7,26,0);transition:background .35s;
  display:none;align-items:center;justify-content:center;padding:22px;z-index:10}
.overlay.on{display:flex}.overlay.dim{background:rgba(10,7,26,.72);backdrop-filter:blur(3px)}
.big{width:74vw;max-width:300px;aspect-ratio:2/3;will-change:transform}
.binner{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:16px;overflow:hidden}
.face.back{border:2px solid #ffe08a;background:radial-gradient(120% 90% at 50% 22%,#3a2168,#1c1138);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.face.back svg{width:100%;height:100%}
.face.front{transform:rotateY(180deg)}
.cardface{width:100%;height:100%;border:2px solid #ffe08a;border-radius:16px;overflow:hidden;
  background:linear-gradient(#fdf6e3,#f4e9c8);color:#3a2168;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.cardface .art{flex:0 0 40%;min-height:0}.cardface .art svg{width:100%;height:100%;display:block}
.cardface .body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px 16px 14px;text-align:center;overflow-y:auto}
.cardface .cname{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#b58a2e;font-weight:600;margin-bottom:8px}
.cardface .wish{font-size:12.5px;line-height:1.5}.cardface .rom{margin-top:10px;font-size:10px;letter-spacing:3px;color:#b58a2e;opacity:.7}
.cscene,.lscene{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.cintro{font-size:14px;opacity:.8;line-height:1.5;max-width:320px}
.ticket{position:relative;display:flex;width:100%;max-width:320px;min-height:120px;cursor:pointer;
  border-radius:12px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.tstub{flex:0 0 64px;display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(#4a2c84,#3a2168);color:#ffe08a;font-size:9px;letter-spacing:1px;padding:6px;
  clip-path:polygon(0 0,100% 0,100% 6%,88% 12%,100% 18%,88% 24%,100% 30%,88% 36%,100% 42%,88% 48%,100% 54%,88% 60%,100% 66%,88% 72%,100% 78%,88% 84%,100% 90%,88% 96%,100% 100%,0 100%)}
.tstub span{writing-mode:vertical-rl;transform:rotate(180deg)}
.tbody{flex:1;background:linear-gradient(#fdf6e3,#f2e6c4);color:#3a2168;padding:14px 16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.tbody .cicon{font-size:38px;line-height:1}
.tbody .ctitle{font-size:12px;letter-spacing:1px;color:#b58a2e}
.tbody .chint{font-size:14px;line-height:1.4}
.cfound{margin-top:4px}
.allfound{text-align:center;padding:20px}.allfound .afico{font-size:46px}.allfound p{margin-top:8px;opacity:.85}
.env{position:relative;width:220px;height:150px;cursor:pointer;perspective:800px;
  border-radius:10px;background:linear-gradient(#fdf6e3,#efe1bc);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.env:before{content:"";position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(135deg,transparent 48%,rgba(58,33,104,.12) 50%),linear-gradient(-135deg,transparent 48%,rgba(58,33,104,.12) 50%)}
.envflap{position:absolute;top:0;left:0;width:100%;height:52%;transform-origin:top center;
  background:linear-gradient(#f4e7c4,#e8d7a8);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:10px 10px 0 0;z-index:3}
.envseal{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#b0446a,#7a2244);
  display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 3px 6px rgba(0,0,0,.4)}
.envcap{font-size:13px;color:#ffe08a;opacity:.85}
.lanim{position:relative;width:min(86vw,360px);display:flex;align-items:center;justify-content:center}
.lenv2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:210px;height:136px;border-radius:10px;
  background:linear-gradient(#fdf6e3,#efe1bc);box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:1;perspective:800px}
.lenv2:before{content:"";position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(135deg,transparent 48%,rgba(58,33,104,.12) 50%),linear-gradient(-135deg,transparent 48%,rgba(58,33,104,.12) 50%)}
.lenv2-flap{position:absolute;top:0;left:0;width:100%;height:52%;transform-origin:50% 0%;
  background:linear-gradient(#f4e7c4,#e8d7a8);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:10px 10px 0 0;z-index:3}
.lenv2-seal{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#b0446a,#7a2244);
  display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 3px 6px rgba(0,0,0,.4)}
.lsheet{position:relative;z-index:5;width:100%;max-height:66vh;overflow-y:auto;will-change:transform;
  border:2px solid #ffe08a;border-radius:16px;padding:22px 22px 26px;color:#2a1f54;
  background:linear-gradient(#fdf6e3,#f2e6c4);box-shadow:0 22px 55px rgba(0,0,0,.55)}
.lsheet h3{font-size:19px;margin-bottom:12px;text-align:center;color:#3a2168}
.lsheet .lbody{font-size:14px;line-height:1.7;text-align:left}
.lsheet .lsign{margin-top:16px;text-align:right;font-style:italic;font-size:13px;color:#7a5fc2}