:root{
  --purple:#7c3aed; --blue:#3b82f6; --pink:#ff4fa3; --orange:#ffa24c; --gold:#ffd86f;
  --ink:#fff;
  --love:"Aref Ruqaa","Vazirmatn",serif;   /* فونت عاشقانه‌ی فارسی (خط رقعه) */
  --soft:"Noto Naskh Arabic","Vazirmatn",serif; /* فونت خوانای نرم برای متن‌های بلندتر */
  --latin:"Great Vibes","Aref Ruqaa",cursive; /* فونت دست‌نویس برای اسم‌های انگلیسی */
  font-family:"Vazirmatn",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#0b0620;color:var(--ink);overscroll-behavior:none;touch-action:manipulation}
[hidden]{display:none!important}

/* ---------- پس‌زمینه‌ی مشترک ---------- */
#bg{position:fixed;inset:0;z-index:0;background:#0b0620}
.layer{position:absolute;inset:0;opacity:0;transition:opacity 2s ease}
.layer.on{opacity:1}
.l0{background:radial-gradient(circle at 50% 20%,#4c1d95 0%,#1a0b3d 50%,#0b0620 100%)}
.l1{background:radial-gradient(circle at 20% 80%,#2563eb55 0%,transparent 55%),radial-gradient(circle at 80% 10%,#7c3aed 0%,#1e1b4b 55%,#0b0620 100%)}
.l2{background:radial-gradient(circle at 50% 50%,#be185d 0%,#4c1d95 45%,#0b0620 100%)}
.l3{background:radial-gradient(circle at 50% 90%,#ffa24c 0%,#db2777 30%,#4c1d95 65%,#0b0620 100%)}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ---------- لودینگ ---------- */
#loading{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(circle at 50% 40%,#3b1a7a,#0b0620 75%);transition:opacity 1s,transform 1s,filter 1s}
#loading.out{opacity:0;transform:scale(1.2);filter:blur(14px);pointer-events:none}
#bigHeart{width:min(72vw,300px);overflow:visible;filter:drop-shadow(0 0 22px #ff4fa3aa) drop-shadow(0 0 60px #7c3aed99);animation:beat 1.6s ease-in-out infinite;position:relative;z-index:2}
.nm{font-family:var(--latin);font-size:30px;text-anchor:middle}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.1)}30%{transform:scale(.97)}45%{transform:scale(1.07)}70%{transform:scale(1)}}
#bigHeart.sync{animation:none}   /* وقتی صدای قلب پخشه، اندازه‌ی قلب با خود صدا تنظیم می‌شه (JS) */
.loadHint{position:relative;z-index:2;max-width:80vw;text-align:center;font-size:14px;line-height:1.9;color:#ffd1e8;opacity:0;transition:opacity .6s;margin-top:-6px}
.loadHint.show{opacity:1;animation:fade 1.8s ease-in-out infinite}
.loadText{font-size:15px;color:#f5d0fe;position:relative;z-index:2;animation:fade 2.4s ease-in-out infinite}
@keyframes fade{50%{opacity:.45}}
.bar{width:min(60vw,240px);height:4px;border-radius:4px;background:#ffffff22;overflow:hidden;position:relative;z-index:2}
#barFill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--pink),var(--orange));transition:width .3s}

.floaters{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fl{position:absolute;bottom:-40px;opacity:0;animation:rise linear forwards}
@keyframes rise{10%{opacity:.9}100%{opacity:0;transform:translateY(-110vh) rotate(40deg)}}

/* ---------- قفل ---------- */
#lock{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:22px;background:radial-gradient(circle at 50% 0%,#4c1d95,#120a30 55%,#05030f);transition:opacity 1.2s,transform 1.2s,filter 1.2s;overflow:hidden}
#lock[hidden]{display:none}
#lock.out{opacity:0;transform:scale(1.12);filter:blur(16px);pointer-events:none}
.card{position:relative;z-index:2;width:100%;max-width:400px;padding:34px 24px;border-radius:30px;text-align:center;background:linear-gradient(160deg,#ffffff1f,#ffffff0a);border:1px solid #ffffff2b;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 24px 70px #0008,0 0 50px #ff4fa322}
.lockIcon{font-size:42px;margin-bottom:8px;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.card h1{font-family:var(--love);font-size:26px;font-weight:700;line-height:1.9;color:var(--gold);text-shadow:0 0 18px #ff4fa388}
.card p{margin:10px 0 18px;line-height:2;color:#e9d5ff;font-size:15px}
#pw{width:100%;padding:15px;border-radius:18px;border:1px solid #ffffff30;background:#ffffff14;color:#fff;font-size:22px;letter-spacing:6px;text-align:center;outline:none;font-family:inherit;transition:.3s}
#pw::placeholder{color:#ffffff55}
#pw:focus{border-color:var(--pink);box-shadow:0 0 26px #ff4fa366}
#pw.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
#enter{width:100%;margin-top:14px;padding:15px;border:0;border-radius:18px;font:900 18px "Vazirmatn",sans-serif;color:#fff;background:linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange));box-shadow:0 10px 30px #7c3aed66;transition:transform .2s}
#enter:active{transform:scale(.96)}
#msg{min-height:56px;margin:14px 0 0!important;font-weight:500;font-size:15px!important;transition:color .3s}
.wrongEmoji{position:absolute;opacity:0;pointer-events:none;z-index:1;animation:wrongFly 2.4s ease-out forwards}
@keyframes wrongFly{10%{opacity:1}100%{opacity:0;transform:translate(var(--mx),var(--my)) rotate(var(--r)) scale(1.3)}}

/* ---------- صحنه‌ها: ترنزیشن نرم (محو + بلور + زوم) ---------- */
#story{position:fixed;inset:0;z-index:10}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(30px + env(safe-area-inset-top)) 28px calc(110px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transform:scale(1.08) translateY(30px);filter:blur(12px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.7,.2,1),filter 1.1s ease,visibility 0s 1.3s}
.scene.active{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:.35s,.35s,.35s,0s}
.scene.past{transform:scale(.92) translateY(-30px)}
.scene small{color:var(--orange);font-size:15px;margin-bottom:10px}
.scene h2{font-family:var(--love);font-size:36px;font-weight:700;line-height:1.7;
  background:linear-gradient(100deg,#fff 0%,var(--gold) 30%,#ffb3d9 55%,#fff 80%,var(--gold) 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px #ff4fa3aa) drop-shadow(0 0 32px #7c3aed99);animation:shine 7s linear infinite}
@keyframes shine{from{background-position:100% 0}to{background-position:-100% 0}}
/* محتوای هر صحنه یکی‌یکی و نرم ظاهر می‌شه */
.scene>*{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.scene.active>*{opacity:1;transform:none}
.scene.active>*:nth-child(1){transition-delay:.7s}
.scene.active>*:nth-child(2){transition-delay:.95s}
.scene.active>*:nth-child(3){transition-delay:1.2s}
.scene.active>*:nth-child(4){transition-delay:1.45s}
.scene.active>*:nth-child(5){transition-delay:1.7s}
.scene.active>*:nth-child(6){transition-delay:1.95s}
.miniHeart{width:74px;height:66px;margin-bottom:18px;overflow:visible;filter:drop-shadow(0 0 16px #ff4fa3) drop-shadow(0 0 34px #7c3aed);animation:beat 1.8s ease-in-out infinite}
#storyFloaters{z-index:0}
.scene p{margin-top:16px;font-family:var(--soft);font-weight:400;line-height:2.2;font-size:19px;color:#f3e8ff}
.scene .big{font-family:var(--soft);font-weight:500;font-size:22px;color:var(--gold)}

#next{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);width:70px;height:64px;border:0;background:none;padding:0;z-index:20;
  filter:drop-shadow(0 0 12px #ff4fa3cc) drop-shadow(0 0 28px #7c3aed99);animation:nudge 2s ease-in-out infinite}
#next svg{width:100%;height:100%;overflow:visible;animation:beat 1.6s ease-in-out infinite;transition:transform .15s}
#next:active svg{animation:none;transform:scale(.82)}
.nextArrow{animation:arrowDown 1.2s ease-in-out infinite}
@keyframes arrowDown{50%{transform:translateY(9px)}}
.burstHeart{position:fixed;z-index:25;pointer-events:none;line-height:1;transform:translate(-50%,-50%)}
@keyframes nudge{50%{transform:translate(-50%,8px)}}
#next[disabled]{opacity:0;pointer-events:none}
#dots{position:fixed;top:calc(16px + env(safe-area-inset-top));left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:20}
#dots i{width:22px;height:4px;border-radius:4px;background:#ffffff33;transition:.6s}
#dots i.on{background:linear-gradient(90deg,var(--pink),var(--orange))}


/* ---------- نامه (چک‌پوینت ۴) ---------- */
.scene[data-bg="1"] h2{font-size:25px;margin-bottom:6px}
#letter{position:relative;width:100%;max-width:360px;height:min(54dvh,430px);margin-top:14px}

/* پاکت صورتی با مهر موم رز: لایه‌ها از عقب به جلو → پشت پاکت ، کاغذ ، جلوی پاکت (۳ مثلث) ، درِ پاکت ، مهر */
#envelope{position:absolute;left:0;right:0;top:60%;display:block;aspect-ratio:3/2;translate:0 -50%;border:0;background:none;padding:0;isolation:isolate;
  color:#7a1a4a;font-family:inherit;filter:drop-shadow(0 16px 24px #0008) drop-shadow(0 0 30px #ff4fa355);transition:opacity .7s,transform .7s}
#envelope .eBack,#envelope .eFront,#envelope .flap{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible}
#envelope .eBack{z-index:0}
#envelope .eFront{z-index:3}
#envelope .flap{z-index:5;transform-origin:50% 0;transform:perspective(900px) rotateX(0deg);filter:drop-shadow(0 4px 4px #0003);
  transition:transform .9s ease,filter .6s,z-index 0s .4s}
#envelope.open .flap{transform:perspective(900px) rotateX(180deg);z-index:1;filter:brightness(.86)}

/* کاغذی که آروم از توی پاکت میاد بالا */
#envelope .eSheet{position:absolute;left:9%;right:9%;top:5%;height:92.5%;z-index:2;padding:14px 12px;overflow:hidden;border-radius:6px;text-align:center;
  background:linear-gradient(#fffdf8,#fff0f6);color:#5b1a3a;font-family:var(--soft);box-shadow:0 -4px 14px #0003;
  transition:transform 1.7s cubic-bezier(.3,.8,.3,1) .75s}
#envelope.open .eSheet{transform:translateY(-47%)}
#envelope .eSheet b{display:block;font-family:var(--love);font-size:16px;line-height:1.8;color:#9d174d}
#envelope .eSheet em{display:block;font-style:normal;font-size:12.5px;line-height:2}
#envelope .eSheet i{display:block;width:85%;height:5px;margin:8px auto 0;border-radius:3px;background:#f0cbdc}
#envelope .eSheet i:nth-of-type(2){width:68%}

/* مهر موم */
#envelope .seal{position:absolute;left:50%;top:52%;z-index:6;width:19%;aspect-ratio:1;translate:-50% -50%;
  filter:drop-shadow(0 4px 6px #0006);animation:sealP 1.8s ease-in-out infinite;transition:opacity .5s,scale .5s,rotate .5s}
#envelope .seal svg{display:block;width:100%;height:100%}
@keyframes sealP{50%{scale:1.08}}
#envelope.open .seal{opacity:0;scale:1.5;rotate:25deg;animation:none}
#envelope .tapHand{position:absolute;left:56%;top:60%;z-index:7;font-size:26px;line-height:1;pointer-events:none;animation:tapH 1.4s ease-in-out infinite;transition:opacity .4s}
@keyframes tapH{50%{translate:-5px -8px;scale:.88}}
#envelope.open .tapHand{opacity:0;animation:none}
#envelope .to{position:absolute;left:0;right:0;bottom:6%;z-index:4;font-family:var(--love);font-size:22px;color:#8a2c5c;transition:opacity .5s}
#envelope .hint{position:absolute;left:0;right:0;top:calc(100% + 22px);font-size:14px;color:#ffd1e8;animation:fade 2.2s ease-in-out infinite;transition:opacity .4s}
#envelope.open .hint,#envelope.open .to{opacity:0}
#envelope.gone{opacity:0;transform:translateY(40px) scale(.9);pointer-events:none}

#paper{position:absolute;inset:0;overflow-y:auto;padding:24px 22px;border-radius:18px;text-align:right;
  background:linear-gradient(#fff8f0,#ffeaf3);color:#4a1535;box-shadow:0 18px 60px #0008,0 0 50px #ffa24c55;
  opacity:0;transform:translateY(40px) scale(.94);transition:opacity .9s,transform .9s;-webkit-overflow-scrolling:touch}
#paper.show{opacity:1;transform:none}
#letterText{font-family:var(--soft);font-size:19px;line-height:2.3;white-space:pre-wrap;color:#4a1535}
.sign{margin-top:18px;font-family:var(--love);font-size:20px;color:#9d174d;opacity:0;transition:opacity 1.2s}
.sign.show{opacity:1}
.sign b{font-size:26px}

/* ---------- قلب و عکس‌ها (چک‌پوینت ۵) ---------- */
.scene[data-bg="2"] h2{font-size:30px}
#heartStage{--s:min(90vw,44dvh,360px);position:relative;width:var(--s);height:var(--s);margin-top:12px}
#heartStage::before{content:"";position:absolute;inset:-10%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#ff4fa344 0%,#7c3aed22 45%,transparent 70%);animation:glowBeat 3.2s ease-in-out infinite}
@keyframes glowBeat{50%{transform:scale(1.12);opacity:.7}}
#orbit{position:absolute;inset:0}
.ph{position:absolute;width:calc(var(--s)*.11);height:calc(var(--s)*.11);min-width:34px;min-height:34px;margin:calc(var(--s)*-.055) 0 0 calc(var(--s)*-.055);
  border-radius:50%;border:2px solid #ffffff66;padding:0;overflow:hidden;background:#2b1860;color:#fff;font:700 13px "Vazirmatn",sans-serif;
  display:grid;place-items:center;transition:transform .4s,filter .6s,border-color .6s,box-shadow .6s;
  --T:6s;animation:wave var(--T) ease-in-out var(--d,0s) infinite}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph.noimg::before{content:attr(data-num)}
.ph.locked{background:radial-gradient(circle at 30% 30%,#5b32b8,#1e0f4d)}
.ph.locked img{visibility:hidden}
.ph.locked.noimg::before{content:""}
.ph.locked::after{content:"🔒";position:absolute;inset:0;display:grid;place-items:center;font-size:15px;background:#0006}
.ph.open{border-color:var(--gold);box-shadow:0 0 14px #ffd86faa,0 0 28px #ff4fa366}
.ph.pop{animation:wave var(--T) ease-in-out var(--d) infinite,pop .8s ease 0s 1}
@keyframes pop{30%{transform:scale(1.7)}100%{transform:scale(1)}}
.ph.nope{animation:wave var(--T) ease-in-out var(--d) infinite,shake .4s 0s 1}

/* هاله‌ی چرخان دور عکس‌های باز شده (از GlowEffect) */
.phg{position:absolute;width:calc(var(--s)*.11);height:calc(var(--s)*.11);min-width:34px;min-height:34px;margin:calc(var(--s)*-.055) 0 0 calc(var(--s)*-.055);
  border-radius:50%;pointer-events:none;opacity:0;transition:opacity 1s;--T:6s;animation:wave var(--T) ease-in-out var(--d,0s) infinite}
.phg.on{opacity:1}
.phg::before{content:"";position:absolute;inset:-5px;border-radius:50%;
  background:conic-gradient(#3b82f6,#7c3aed,#ff4fa3,#ffa24c,#fff,#3b82f6);
  filter:blur(5px);animation:phgSpin 4s linear infinite;will-change:transform}
@keyframes phgSpin{to{rotate:360deg}}

#coreHeart{position:absolute;left:50%;top:52%;width:calc(var(--s)*.32);height:calc(var(--s)*.30);transform:translate(-50%,-50%);border:0;background:none;
  display:grid;place-items:center;filter:drop-shadow(0 0 18px #ff4fa3) drop-shadow(0 0 40px #7c3aed);animation:coreBeat 1.6s ease-in-out infinite}
@keyframes coreBeat{0%,100%{transform:translate(-50%,-50%) scale(1)}15%{transform:translate(-50%,-50%) scale(1.12)}30%{transform:translate(-50%,-50%) scale(.97)}45%{transform:translate(-50%,-50%) scale(1.07)}}
#coreHeart svg{position:absolute;inset:0;width:100%;height:100%}
#coreText{position:relative;font:700 14px/1.6 "Vazirmatn",sans-serif;color:#fff;text-shadow:0 1px 6px #0008;margin-top:-6px;text-align:center}
#heartHint{font-size:16px!important;margin-top:8px!important}

#viewer{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;background:#080418e6;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .4s}
#viewer.show{opacity:1}
#viewer figure{max-width:100%;text-align:center;transform:scale(.9);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
#viewer.show figure{transform:none}
#vImg{max-width:100%;max-height:62dvh;border-radius:22px;border:1px solid #ffffff40;box-shadow:0 0 50px #ff4fa366,0 0 90px #7c3aed55;display:block;margin:0 auto}
#vImg.miss{width:min(70vw,280px);height:min(70vw,280px);background:linear-gradient(135deg,#7c3aed,#ff4fa3,#ffa24c);visibility:visible}
#vCap{margin-top:20px;font-family:var(--love);font-size:26px;line-height:1.9;color:var(--gold);text-shadow:0 0 18px #ff4fa388}
@keyframes vIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
#viewer figure.swap #vImg{animation:vIn .6s cubic-bezier(.2,.8,.2,1)}
#viewer figure.swap #vCap{animation:vIn .8s .15s cubic-bezier(.2,.8,.2,1) both}
#vClose{position:absolute;top:calc(16px + env(safe-area-inset-top));left:16px;width:44px;height:44px;border-radius:50%;border:0;background:#ffffff22;color:#fff;font-size:20px}

#vNext{position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:13px 26px;border:0;border-radius:30px;
  font:700 16px "Vazirmatn",sans-serif;color:#fff;background:linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange));
  box-shadow:0 8px 26px #7c3aed77;transition:transform .2s}
#vNext:active{transform:translateX(-50%) scale(.94)}

/* موج دور قلب: هر دایره یه بار بالا میاد و برمی‌گرده، با تأخیر نسبت به قبلی
   --T = طول یک دور کامل،  --d = تأخیر هر دایره (از JS) */
@keyframes wave{
  0%{translate:0 0;scale:1}
  10%{translate:0 calc(var(--s)*-.045);scale:1.18}
  22%{translate:0 0;scale:1}
  100%{translate:0 0;scale:1}
}

/* ---------- ورود سینمایی: پرواز دوربین بین عکس‌ها و فیلم‌ها ---------- */
#intro{position:fixed;inset:0;z-index:35;overflow:hidden;background:radial-gradient(circle at 50% 50%,transparent 40%,#05020fa8 100%);transition:opacity 1.2s,filter 1.2s}
#intro.out{opacity:0;filter:blur(10px);pointer-events:none}

/* صحنه‌ی سه‌بعدی: perspective همون «عمق دید» دوربینه */
#introPhotos{position:absolute;inset:0;perspective:800px;perspective-origin:50% 45%;overflow:hidden;
  --w:min(64vw,290px);--h:min(46dvh,390px);--tt:2s}
#world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}

/* هر عکس/فیلم یه قاب پولاروید سه‌بعدیه.
   دور: سایه‌ی تیره و تار  |  بعدی: نیمه‌روشن  |  وقتی دوربین می‌رسه (focus): روشن و واضح */
.fi{position:absolute;left:0;top:0;box-sizing:border-box;width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);
  padding:10px 10px 38px;background:linear-gradient(160deg,#fff,#e4def5);border-radius:5px;
  box-shadow:0 0 34px #ff4fa355;
  --ry:22deg;--rz:0deg;
  transform:translate3d(var(--x),var(--y),var(--z)) rotateY(var(--ry)) rotateZ(var(--rz));
  filter:brightness(.14);
  transition:transform var(--tt) ease,opacity var(--tt) ease,filter var(--tt) ease}
.fi.next{filter:brightness(.45) blur(2px)}
.fi.far{visibility:hidden}   /* قاب‌های خیلی دور تا نزدیک نشدن اصلاً رسم نمی‌شن (سبک‌تر) */
.fi.focus{--ry:var(--ryf,0deg);filter:none}
.fi.gone{opacity:0;transition-duration:.9s}
.fi img,.fi video,.fi canvas{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px;background:#1b0f3d}

/* هاله‌ی رنگی دور هر قاب: دو نور دنباله‌دار (آبی ← بنفش ← صورتی ← نارنجی ← سفید) که خودکار دور قاب می‌چرخن.
   ::before = خط نورانی روی لبه   |   ::after = هاله‌ی بلورشده‌ی بیرونش
   هر دو فقط یه «حلقه» دور قاب هستن (mask)، پس روی خود عکس یا حاشیه‌ی سفید نمی‌افتن.
   فقط برای قابی که روشنه یا نوبت بعدیه می‌چرخه، بقیه متوقف می‌شن (سبک‌تر برای گوشی). */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes glowSpin{to{--ang:360deg}}
.fi::before,.fi::after,.sweep.pic::before,.sweep.pic::after{content:"";position:absolute;pointer-events:none;box-sizing:border-box;
  background:
    repeating-conic-gradient(from var(--ang),transparent 0deg,transparent 70deg,#3b82f6 100deg,#7c3aed 122deg,#ff4fa3 142deg,#ffa24c 157deg,#fff 169deg,transparent 180deg),
    linear-gradient(#b99cff55,#b99cff55);
  background-origin:border-box;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:none}
.fi::before,.sweep.pic::before{inset:-4px;padding:4px;border-radius:9px}
.fi::after,.sweep.pic::after{inset:-16px;padding:16px;border-radius:20px;filter:blur(12px);opacity:.95}
.fi:not(.focus)::before,.fi:not(.focus)::after{display:none}
.fi.focus::before,.sweep.pic::before{animation:glowSpin 3.4s linear infinite}
.sp{position:absolute;left:0;top:0;border-radius:50%;background:#fff;opacity:.7;box-shadow:0 0 8px #fff}

.introGlow{position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(circle at 30% 70%,#ffa24c44,transparent 45%),radial-gradient(circle at 70% 30%,#ff4fa355,transparent 45%);
  animation:glowDrift 8s ease-in-out infinite alternate}
@keyframes glowDrift{to{transform:translate(8%,-6%) scale(1.15)}}
#introFloat{z-index:3}

.cbar{position:absolute;left:0;right:0;height:9dvh;background:#000;z-index:5;transition:transform .9s ease}
.cbar.top{top:0;transform:translateY(-100%)}
.cbar.bot{bottom:0;transform:translateY(100%)}
#intro.go .cbar{transform:none}
#intro.end .cbar.top{transform:translateY(-100%)}
#intro.end .cbar.bot{transform:translateY(100%)}
#intro.end::before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;
  background:radial-gradient(circle,#fff,#ffb3d9 40%,transparent 72%);opacity:0;animation:introFlash .9s ease forwards}
@keyframes introFlash{45%{opacity:.85}100%{opacity:0}}

#introSkip{position:absolute;top:calc(env(safe-area-inset-top) + 4px);left:10px;z-index:6;min-width:44px;min-height:44px;padding:0 18px;border:1px solid #ffffff44;border-radius:22px;
  background:#000a;color:#ffffffdd;font:500 14px "Vazirmatn",sans-serif}
#introSkip:active{background:#ffffff33}

/* پایان: یه قاب تیره‌ی بزرگ از جلوی دوربین رد می‌شه و اسم ظاهر می‌شه */
.sweep{position:absolute;left:50%;top:50%;width:min(86vw,360px);height:min(60dvh,480px);margin:calc(min(60dvh,480px)/-2) 0 0 calc(min(86vw,360px)/-2);
  background:#08030f;border-radius:6px;z-index:4;box-shadow:0 0 80px #000;transform:translateX(130%)}
.introEnd{position:absolute;inset:0;display:grid;place-items:center;z-index:3;font-family:var(--love);font-size:46px;color:var(--gold);
  text-shadow:0 0 22px #ff4fa3,0 0 50px #7c3aed;opacity:0;pointer-events:none}


/* ---------- ضربان قلب + آسمون ستاره‌ای ---------- */
#skyStage{--s:min(88vw,42dvh,350px);position:relative;width:var(--s);height:var(--s);margin-top:10px;touch-action:none}
#skyStage::before{content:"";position:absolute;inset:-8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#7c3aed33 0%,#3b82f622 45%,transparent 70%)}
#holdHeart{position:absolute;left:50%;top:50%;width:calc(var(--s)*.5);height:calc(var(--s)*.45);transform:translate(-50%,-50%);border:0;background:none;
  display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  filter:drop-shadow(0 0 18px #ff4fa3) drop-shadow(0 0 40px #7c3aed);transition:opacity .8s,transform .8s ease-in}
#holdHeart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:beat var(--bt,1.6s) ease-in-out infinite}
#holdRing{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
#holdText{position:relative;font:700 15px/1.6 "Vazirmatn",sans-serif;color:#fff;text-shadow:0 1px 6px #0008;margin-top:-6px;pointer-events:none}
#holdHeart.holding svg{filter:brightness(1.25)}
#holdHeart.burst{transform:translate(-50%,-50%) scale(1.9);opacity:0;pointer-events:none}

#skyStars{position:absolute;inset:0;pointer-events:none}
.skyStar{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;background:none;pointer-events:none;
  transform:scale(0);transition:transform .8s cubic-bezier(.2,1.4,.3,1) calc(var(--i)*.15s)}
#skyStars.show .skyStar{transform:scale(1);pointer-events:auto}
.skyStar::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#fff;
  box-shadow:0 0 12px #fff,0 0 28px #ff4fa3;animation:twinkle 2s ease-in-out infinite;animation-delay:calc(var(--i)*-.3s)}
.skyStar::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;border-radius:50%;border:1px solid #ffd86f;opacity:0;transform:scale(.4);transition:.6s}
.skyStar.lit::before{width:20px;height:20px;margin:-10px;background:var(--gold);box-shadow:0 0 16px var(--gold),0 0 38px var(--orange);animation:none}
.skyStar.lit::after{opacity:.9;transform:scale(1)}
@keyframes twinkle{50%{transform:scale(.55);opacity:.55}}

#skyLines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#skyOutline{fill:none;stroke:var(--gold);stroke-width:.7;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 2px #ff4fa3)}
#skyFill{fill:#ff4fa3;opacity:0;transition:opacity 2s 1.8s}
#skyLines.on #skyOutline{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s ease-in-out}
#skyLines.on #skyFill{opacity:.18}

#skyPhrase{position:absolute;left:50%;top:46%;width:46%;transform:translate(-50%,-50%);text-align:center;font-family:var(--soft);font-size:16px;line-height:1.9;
  color:#fff;text-shadow:0 0 12px #000b;pointer-events:none;opacity:0}
#skyPhrase.in{animation:phraseIn .9s ease forwards}
@keyframes phraseIn{from{opacity:0;transform:translate(-50%,-42%)}to{opacity:1;transform:translate(-50%,-50%)}}
#skyHint{font-size:16px;margin-top:10px}

/* قاب پایانی با عکس final.jpg: پولارویدِ سفید مثل بقیه‌ی قاب‌ها */
.sweep.pic{width:min(74vw,320px);height:min(54dvh,440px);margin:calc(min(54dvh,440px)/-2) 0 0 calc(min(74vw,320px)/-2);
  padding:10px 10px 38px;background:linear-gradient(160deg,#fff,#e4def5);border-radius:5px;box-sizing:border-box;box-shadow:0 0 40px #ff4fa388,0 0 90px #7c3aed77}
.sweep.pic img,.sweep.pic canvas{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px}


/* ---------- فصل آخر: سوپرایز حلقه‌ها ---------- */
#meteors{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#meteors i{position:absolute;top:-14%;left:var(--l);width:2px;height:110px;border-radius:2px;background:linear-gradient(#fff,#ffd86f88,transparent);
  rotate:38deg;opacity:0;animation:meteor 4.4s linear var(--d) infinite}
#meteors i:nth-child(1){--l:68%;--d:1s}
#meteors i:nth-child(2){--l:92%;--d:2.7s}
#meteors i:nth-child(3){--l:44%;--d:4.3s}
#meteors i:nth-child(4){--l:100%;--d:6.2s}
@keyframes meteor{0%{opacity:0;translate:0 0}5%{opacity:1}28%{opacity:0;translate:-62vw 72vh}100%{opacity:0;translate:-62vw 72vh}}

#ringWrap{width:100%;display:flex;flex-direction:column;align-items:center}
#ringStage{position:relative;width:100%;height:min(32dvh,280px)}
#ringStage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,#ffd86f33 0%,#ff4fa31f 34%,transparent 62%)}
.rgSvg{position:absolute;left:50%;top:50%;width:min(36vw,150px);height:min(36vw,150px);opacity:0;
  transform:translate(calc(-50% + var(--fx)),-50%) rotate(var(--fr));filter:drop-shadow(0 0 10px #ffd86f)}
#ringL{--fx:-34%;--fr:12deg}
#ringR{--fx:34%;--fr:-12deg}
.rgSvg.merged{animation:ringGlow 2.4s ease-in-out infinite}
@keyframes ringGlow{50%{filter:drop-shadow(0 0 22px #ffd86f) drop-shadow(0 0 46px #ff4fa3)}}
#goldFlash{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 38%,#fff 0%,#ffe9a0 25%,transparent 70%)}
.shock{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid #ffd86f;box-shadow:0 0 20px #ffd86f;pointer-events:none}
.spark{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff3b0;box-shadow:0 0 8px #ffd86f,0 0 14px #ff9ccb;pointer-events:none}
#ringNames{margin-top:10px;font-family:var(--latin);font-size:clamp(36px,11.5vw,50px);line-height:1.5;color:var(--gold);
  text-shadow:0 0 16px #ffa24c,0 0 34px #ff4fa3;opacity:0;transform:scale(.8);filter:blur(10px);transition:opacity 1.2s,transform 1.2s,filter 1.2s}
#ringNames.in{opacity:1;transform:none;filter:none}
#ringNames span{font:700 .55em "Vazirmatn",sans-serif}
#ringText{margin-top:8px;max-width:340px;text-align:center}
.ringLine{font-family:var(--soft);font-size:17px;line-height:2.1;color:#fff4e0;text-shadow:0 0 10px #0009;opacity:0;transform:translateY(12px);transition:opacity 1.1s,transform 1.1s}
.ringLine.in{opacity:1;transform:none}
.ringLine.big{font-family:var(--love);font-size:22px;color:var(--gold)}

/* ---------- «ادامه بدی یا خارج می‌شی؟» (فقط با لمس) ---------- */
#ask{position:fixed;inset:0;z-index:45;text-align:center;overflow:hidden;touch-action:manipulation;opacity:0;transition:opacity .9s;
  background:radial-gradient(circle at 50% 28%,#2a0f55f2,#05030ff5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#ask.show{opacity:1}
#askQ{position:relative;padding:calc(64px + env(safe-area-inset-top)) 26px 0;font-family:var(--love);font-size:30px;line-height:1.8;color:var(--gold);text-shadow:0 0 18px #ff4fa3aa}
#askMsg{position:relative;min-height:60px;padding:8px 28px 0;font-family:var(--soft);font-size:16px;line-height:1.9;color:#ffd1e8}
#askYes{position:absolute;max-width:min(62vw,250px);padding:9px 15px;border:0;border-radius:18px;color:#fff;font-family:"Vazirmatn",sans-serif;
  background:linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange));box-shadow:0 10px 30px #7c3aed88,0 0 30px #ff4fa355;
  transition:left .45s cubic-bezier(.3,1.5,.4,1),top .45s cubic-bezier(.3,1.5,.4,1);animation:askBob 1.8s ease-in-out infinite}
#askYes.first{transition:none}
#askYes.pop{animation:askBob 1.8s ease-in-out infinite,askPop .5s ease}
#askYes b{display:block;font-size:13.5px;font-weight:600;line-height:1.65}
#askYes small{display:block;margin-top:2px;font-size:10.5px;font-weight:500;opacity:.88}
@keyframes askBob{50%{translate:0 -5px}}
@keyframes askPop{0%{scale:.7}60%{scale:1.12}100%{scale:1}}
#askNo{--s:1;position:absolute;left:0;top:0;translate:none;min-height:0;
  padding:calc(12px*var(--s)) calc(24px*var(--s));border-radius:22px;white-space:nowrap;
  border:1px solid #ffffff44;background:#ffffff14;color:#ffffffcc;
  font-family:"Vazirmatn",sans-serif;font-weight:500;font-size:calc(14px*var(--s));
  transition:left .45s cubic-bezier(.3,1.5,.4,1),top .45s cubic-bezier(.3,1.5,.4,1),padding .4s,font-size .4s,opacity .6s}
#askNo.first{transition:none}
#askEnd{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:30px;opacity:0;pointer-events:none;transition:opacity 1.4s}
#askEnd.show{opacity:1;pointer-events:auto}
#askEnd h3{font-family:var(--love);font-size:32px;line-height:1.8;color:var(--gold);text-shadow:0 0 20px #ff4fa3,0 0 44px #7c3aed}
#askEnd p{font-family:var(--soft);font-size:18px;line-height:2.2;color:#fff4e0;white-space:pre-line}
#askAgain{min-height:44px;margin-top:8px;padding:0 24px;border-radius:22px;border:1px solid #ffffff44;background:#ffffff14;color:#fff;font:500 14px "Vazirmatn",sans-serif}
#ask.fin #askQ,#ask.fin #askMsg,#ask.fin #askYes,#ask.fin #askNo{opacity:0;pointer-events:none;transition:opacity .6s}


/* ---------- صحنه‌ی اول: سلام زنده ---------- */
#helloHeart{position:relative;width:74px;height:66px;margin-bottom:18px;padding:0;border:0;background:none;overflow:visible}
#helloHeart .miniHeart{display:block;width:100%;height:100%;margin:0;transition:scale .15s}
#helloHeart:active .miniHeart{scale:.84}
#helloHeart.fast .miniHeart{animation-duration:.45s}
#helloDate{margin-bottom:2px;font-size:15px;color:var(--orange)}
#helloBig .w{display:inline-block;opacity:0;transform:translateY(10px);filter:blur(6px);transition:opacity .8s,transform .8s,filter .8s}
.scene.active #helloBig .w{opacity:1;transform:none;filter:none;transition-delay:calc(1.5s + var(--i)*.22s)}
#helloPhrase{min-height:66px;max-width:300px;margin-top:20px;font-family:var(--soft);font-size:17px;line-height:2;color:#ffd1e8}
#helloPhrase.in{animation:helloIn .7s ease}
@keyframes helloIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
#helloCount{max-width:320px;margin-top:6px;font-size:14px;line-height:1.9;color:#ffe9a0;text-shadow:0 0 12px #ffa24c88}


/* ---------- مرحله‌ی «یه بوس بفرست» ---------- */
#ask.kiss #askQ,#ask.kiss #askMsg,#ask.kiss #askNo{opacity:0;pointer-events:none;transition:opacity .6s}
#ask.kiss #askYes b{font-size:16px}
#ask.kiss #askYes small{font-size:11.5px}
#askKiss{position:absolute;left:50%;top:58%;translate:-50% -50%;padding:10px;border:0;background:none;font-size:96px;line-height:1;
  filter:drop-shadow(0 0 22px #ff4fa3) drop-shadow(0 0 48px #ff4fa388);opacity:0;scale:.2}
#askKiss.in{animation:kissPop .7s cubic-bezier(.2,1.6,.3,1) forwards,kissBeat 1.3s ease-in-out .7s infinite}
#askKiss.wig{animation:kissWig .5s ease,kissBeat 1.3s ease-in-out .5s infinite}
@keyframes kissPop{to{opacity:1;scale:1}}
@keyframes kissBeat{0%,100%{opacity:1;scale:1}50%{opacity:1;scale:1.14}}
@keyframes kissWig{25%{rotate:-14deg}75%{rotate:14deg}}
#ask.sent #askYes,#ask.sent #askKiss{opacity:0;pointer-events:none;transition:opacity .5s}
#ask.sent #askKiss{animation:none}

#kissFx{position:absolute;inset:0;pointer-events:none;transition:opacity .9s}
#ask.fin #kissFx{opacity:0}
#kissLayer{position:absolute;inset:0;overflow:hidden}
.kissMark{position:absolute;line-height:1;opacity:0;will-change:transform,opacity}
/* استیکر بوس: وسط صفحه، با لبه‌ی سفید مثل استیکر */
#kissSticker{position:absolute;left:50%;top:36%;translate:-50% -50%;font-size:min(60vw,230px);line-height:1;opacity:0;scale:.1;rotate:-8deg;
  filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 14px 26px #000b)}
#kissSticker.show{animation:stickerIn .9s cubic-bezier(.2,1.5,.3,1) forwards,stickerFloat 2.4s ease-in-out .9s infinite}
@keyframes stickerIn{to{opacity:1;scale:1;rotate:-6deg}}
@keyframes stickerFloat{50%{translate:-50% -53%}}
#kissThanks{position:absolute;left:0;right:0;top:60%;padding:0 20px;text-align:center;font-family:var(--love);font-size:20px;line-height:2.05;color:var(--gold);
  text-shadow:0 0 16px #ff4fa3,0 0 36px #7c3aed,0 2px 8px #000;white-space:pre-line;opacity:0;transform:translateY(14px);transition:opacity 1.2s,transform 1.2s}
#kissThanks.show{opacity:1;transform:none}

/* تونل پایانی ورود سینمایی */
#tunnel{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.tc{position:absolute;left:50%;top:50%;aspect-ratio:4/5;opacity:0;border-radius:16px;overflow:hidden;background:#1b0f3d;
  border:1px solid #ffffff40;box-shadow:0 0 30px #ff4fa366,0 20px 50px #000a;will-change:transform,opacity}
.tc img,.tc video,.tc canvas{width:100%;height:100%;object-fit:cover;display:block}

/* اولین فریم فیلم (جای دکمه‌ی پلی خاکستری) */
.fi canvas.vp{position:absolute;left:10px;top:10px;width:calc(100% - 20px);height:calc(100% - 48px);z-index:1;pointer-events:none;transition:opacity .25s}
.tc canvas.vp{position:absolute;inset:0;z-index:1}
.vp.hide{opacity:0}


/* ==========================================================================
   نسخه‌ی ۳: دلیل‌ها · آرزوها · نامه‌های مخفی · تولد · کیک
========================================================================== */
#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:24;pointer-events:none}
#bg::after{content:"";position:absolute;inset:0;background:#05020f;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
#bg.dim::after{opacity:.74}

/* ---------- دلیل‌های دوستت داشتن ---------- */
#rsCard{position:relative;width:min(84vw,330px);min-height:min(40dvh,300px);margin-top:16px;padding:26px 22px;border:1px solid #ffffff33;border-radius:30px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;font-family:inherit;
  background:linear-gradient(160deg,#ffffff26,#ffffff0a);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 60px #0007,0 0 50px #ff4fa333}
#rsCard:active{scale:.97}
#rsNum{font-family:var(--love);font-size:46px;line-height:1.3;color:var(--gold);text-shadow:0 0 18px #ff4fa3}
#rsText{font-family:var(--soft);font-size:21px;line-height:2.1;color:#fff4fb}
#rsCard.flip #rsNum,#rsCard.flip #rsText{animation:rsIn .7s cubic-bezier(.2,.9,.3,1)}
@keyframes rsIn{from{opacity:0;transform:translateY(16px) scale(.92);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
#rsHint{margin-top:16px;max-width:320px;font-family:var(--soft);font-size:15px;line-height:1.9;color:#ffd1e8}

/* ---------- آرزوهای ما دو تا ---------- */
#wlList{width:100%;max-width:350px;max-height:min(50dvh,420px);margin-top:12px;padding:4px 2px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:9px;touch-action:pan-y}
.wlRow{flex:none;display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid #ffffff26;border-radius:18px;background:#ffffff12;color:#fff;
  font-family:var(--soft);font-size:16px;line-height:1.9;text-align:right;transition:background .5s,border-color .5s,box-shadow .5s}
.wlBox{flex:none;width:30px;font-size:26px;line-height:1;color:#ffffff88;text-align:center}
.wlBox::before{content:"♡"}
.wlRow.on{background:linear-gradient(135deg,#ff4fa333,#7c3aed33);border-color:#ffd86f88;box-shadow:0 0 22px #ff4fa344}
.wlRow.on .wlBox{color:var(--pink);animation:wlPop .6s ease}
.wlRow.on .wlBox::before{content:"♥"}
@keyframes wlPop{40%{transform:scale(1.7)}}
#wlHint{margin-top:12px;max-width:330px;font-family:var(--soft);font-size:15px;line-height:1.9;color:#ffd1e8}

/* ---------- نامه‌های مخفی ---------- */
#slGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:340px;margin-top:14px}
.slCard{position:relative;min-height:106px;padding:12px 8px;border:1px solid #ffffff2b;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:#fff;font-family:var(--soft);font-size:14px;line-height:1.7;background:linear-gradient(160deg,#ffffff24,#ffffff0a);box-shadow:0 10px 30px #0005;
  transition:transform .2s,opacity .5s,border-color .5s}
.slCard:active{transform:scale(.95)}
.slIc{font-size:32px;line-height:1}
.slCard.read{border-color:#ffd86f88}
.slCard.read::after{content:"✓";position:absolute;top:6px;left:10px;color:var(--gold);font-size:15px}
.slCard.locked{opacity:.55}
.slCard.locked::after{content:"🔒";position:absolute;top:6px;left:8px;font-size:15px}
.slCard.new{border-color:var(--gold);animation:slGlow 1.6s ease-in-out infinite}
.slCard.nope{animation:shake .4s}
@keyframes slGlow{50%{box-shadow:0 0 30px #ffd86faa}}
#slHint{margin-top:14px;max-width:320px;font-family:var(--soft);font-size:15px;line-height:1.9;color:#ffd1e8}

#slView{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;background:#080418ee;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .4s}
#slView.show{opacity:1}
#slPaper{width:min(100%,380px);max-height:78dvh;overflow-y:auto;padding:26px 22px;border-radius:20px;text-align:right;
  background:linear-gradient(#fff8f0,#ffeaf3);color:#4a1535;box-shadow:0 18px 60px #0008,0 0 50px #ffa24c55;
  transform:translateY(30px) scale(.94);transition:transform .6s cubic-bezier(.2,.8,.2,1);-webkit-overflow-scrolling:touch}
#slView.show #slPaper{transform:none}
#slTitle{margin-bottom:10px;font-family:var(--love);font-size:26px;line-height:1.8;color:#9d174d}
#slBody{font-family:var(--soft);font-size:18px;line-height:2.25}
.slLn{opacity:0;transform:translateY(8px);animation:slLn .7s ease forwards;animation-delay:calc(.5s + var(--i)*.14s)}
@keyframes slLn{to{opacity:1;transform:none}}
#slSign{margin-top:16px;font-family:var(--love);font-size:20px;color:#9d174d}
#slSign b{font-size:26px}
#slClose{position:absolute;top:calc(16px + env(safe-area-inset-top));left:16px;width:44px;height:44px;border-radius:50%;border:0;background:#ffffff22;color:#fff;font-size:20px;z-index:2}

/* ---------- تولد: عکس تیکه‌تیکه ---------- */
#bdBunting{position:absolute;left:0;right:0;top:calc(34px + env(safe-area-inset-top));height:80px;pointer-events:none}
#bdBunting svg{position:absolute;left:0;top:0}
.bdFlag{position:absolute;width:18px;height:24px;margin-left:-9px;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0}
#bdFx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#bdFrame{position:relative;margin-top:10px;border-radius:4px;background:#ffffff0d;box-shadow:0 0 0 0 #fff,0 0 30px #ff4fa322;transition:box-shadow 1.2s,opacity .9s ease,transform .9s ease}
#bdFrame.done{box-shadow:0 0 0 10px #fff,0 0 0 12px #ffffff55,0 0 50px #ff4fa3aa,0 0 100px #7c3aed77}
#bdFrame.sway{animation:bdSway 5s ease-in-out infinite}
@keyframes bdSway{0%,100%{rotate:-1.2deg}50%{rotate:1.2deg}}
#bdPic{display:block;width:100%;height:100%;border-radius:2px;opacity:0;transition:opacity 1s}
#bdPic.show{opacity:1}
#bdTitle{margin-top:26px;font-size:30px;transition-delay:0s}
#bdTitle.wait,#bdPhrase.wait{opacity:0}
#bdPhrase{min-height:56px;max-width:300px;margin-top:6px;font-family:var(--soft);font-size:17px;line-height:2;color:#ffe9f4;transition-delay:0s}
#bdPhrase.in{animation:helloIn .7s ease}
#bdBal{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bdBal{position:absolute;bottom:-90px;width:46px;height:58px;padding:0;border:0;border-radius:50% 50% 47% 47%;pointer-events:auto;
  background:radial-gradient(circle at 32% 26%,#ffffffaa 0,transparent 30%),var(--c);box-shadow:inset -7px -9px 16px #0003,0 0 18px #ffffff22;
  animation:balUp linear forwards;will-change:transform}
.bdBal::before{content:"";position:absolute;left:50%;top:100%;width:1px;height:42px;background:#ffffff77}
.bdBal::after{content:"";position:absolute;left:50%;top:calc(100% - 3px);width:10px;height:8px;margin-left:-5px;background:var(--c);clip-path:polygon(50% 0,100% 100%,0 100%)}
@keyframes balUp{0%{transform:translate(0,0)}50%{transform:translate(18px,-60dvh)}100%{transform:translate(-14px,-125dvh)}}

/* ---------- کیک و شمع ---------- */
#ckStage{width:min(66vw,270px);margin-top:12px}
#ckStage svg{display:block;width:100%;height:auto;overflow:visible}
.flame{opacity:0;transform-box:fill-box;transform-origin:50% 100%;filter:drop-shadow(0 0 5px #ffd86f);transition:opacity .8s calc(var(--i)*.35s + 1.5s)}
.flame.lit{opacity:1;animation:flick 1.1s ease-in-out infinite;animation-delay:calc(var(--i)*-.23s)}
.flame.out{opacity:0;transition:opacity .25s 0s}
@keyframes flick{0%,100%{transform:scale(1,1) rotate(-2deg)}50%{transform:scale(.9,1.1) rotate(2deg)}}
.smk{fill:none;stroke:#ffffffcc;stroke-width:2;stroke-linecap:round;stroke-dasharray:30;opacity:0;animation:smoke 2.2s ease-out forwards}
@keyframes smoke{0%{opacity:.85;stroke-dashoffset:30;transform:translateY(0)}100%{opacity:0;stroke-dashoffset:0;transform:translateY(-22px)}}
#ckMsg{max-width:320px;min-height:60px;margin-top:14px;font-family:var(--soft);font-size:16px;line-height:2;color:#ffd1e8}
.ckLine{opacity:0;transform:translateY(12px);transition:opacity 1.1s,transform 1.1s;font-family:var(--soft);font-size:17px;line-height:2.1;color:#fff4e0}
.ckLine.in{opacity:1;transform:none}
.ckLine.big{font-family:var(--love);font-size:22px;color:var(--gold)}
#ckBtn{margin-top:16px;padding:14px 26px;border:0;border-radius:22px;font:900 17px "Vazirmatn",sans-serif;color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange));box-shadow:0 10px 30px #7c3aed66}
#ckBtn:active{scale:.96}
#ckBtn.gone{opacity:0;pointer-events:none;transition-delay:0s}


/* ==========================================================================
   نسخه‌ی ۴: راهنمای متحرک (دانیال)
   #guide از لبه‌ی صفحه می‌لغزه تو (data-pos: br / bl / mr / ml)، حرف می‌زنه و برمی‌گرده.
========================================================================== */
#guide{--gw:min(34vw,150px);position:fixed;z-index:26;width:var(--gw);pointer-events:none;opacity:0;
  transform:translate(var(--ex,0),0);transition:transform .8s cubic-bezier(.2,1.25,.3,1),opacity .5s}
#guide.in{opacity:1;transform:none}
#guide[data-pos="br"]{right:6px;bottom:calc(10px + env(safe-area-inset-bottom));--ex:130%}
#guide[data-pos="bl"]{left:6px;bottom:calc(10px + env(safe-area-inset-bottom));--ex:-130%}
#guide[data-pos="mr"]{right:0;top:46%;--ex:130%}
#guide[data-pos="ml"]{left:0;top:46%;--ex:-130%}

.gBody{animation:gBob 2.2s ease-in-out infinite}
@keyframes gBob{50%{translate:0 -4px}}
#guide svg{display:block;width:100%;height:auto;overflow:hidden;filter:drop-shadow(0 8px 14px #0008) drop-shadow(0 0 16px #ff4fa355)}

/* چشمک زدن و دهن (--m از JS میاد: ۰ = بسته ، ۱ = کاملاً باز) */
.gEye{transform-box:fill-box;transform-origin:center;animation:gBlink 3.6s infinite}
@keyframes gBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.gMouth{transform-box:fill-box;transform-origin:50% 20%;transform:scaleY(calc(.2 + var(--m,0) * .8));opacity:calc(var(--m,0) * 6)}
.gSmile{opacity:calc(1 - var(--m,0) * 5)}

/* دست‌ها (زاویه‌ها از JS): فقط دستی که برای اون حرکت لازمه تاب می‌خوره */
.gArmR{transform-origin:128px 158px}
.gArmL{transform-origin:32px 158px}
.gArm.sw{animation:gSwing var(--sp,.6s) ease-in-out infinite alternate}
@keyframes gSwing{from{transform:rotate(var(--r1))}to{transform:rotate(var(--r2))}}

/* اگه به‌جای کارتون، عکس خودت (closed.png / open.png) گذاشته شده باشه */
.gImgs{position:relative;transform-origin:50% 100%;transform:scaleY(calc(1 + var(--m,0) * .025));filter:drop-shadow(0 8px 14px #0008) drop-shadow(0 0 16px #ff4fa355)}
.gImgs img{display:block;width:100%;height:auto}
.gImgs .gOpen{position:absolute;inset:0;opacity:0}
#guide.talk .gOpen{opacity:1}
#guide.talk .gShut{opacity:0}
#guide.gPhoto .gBody{transform-origin:50% 100%}
#guide.gPhoto.act-wave .gBody{animation:gTilt .6s ease-in-out infinite alternate}
#guide.gPhoto.act-cheer .gBody{animation:gJump .55s ease-in-out infinite}
#guide.gPhoto.act-pointL .gBody{animation:gLeanL .7s ease-in-out infinite alternate}
#guide.gPhoto.act-pointR .gBody{animation:gLeanR .7s ease-in-out infinite alternate}
#guide.gPhoto.act-heart .gBody{animation:gThrob .9s ease-in-out infinite}
#guide.gPhoto.act-kiss .gBody{animation:gKiss 1s ease-in-out infinite alternate}
@keyframes gTilt{from{rotate:-6deg}to{rotate:6deg}}
@keyframes gJump{50%{translate:0 -14px}}
@keyframes gLeanL{from{rotate:0deg}to{rotate:-8deg}}
@keyframes gLeanR{from{rotate:0deg}to{rotate:8deg}}
@keyframes gThrob{50%{scale:1.06}}
@keyframes gKiss{from{rotate:2deg}to{rotate:-7deg;translate:0 -4px}}

/* حباب متن (فقط با GUIDE.captions = true) */
.gBub{position:absolute;bottom:calc(100% + 6px);width:max-content;max-width:min(64vw,250px);padding:9px 13px;border-radius:16px;
  background:#fffffff0;color:#4a1535;font:500 13.5px/1.9 var(--soft);text-align:center;box-shadow:0 8px 24px #0006;
  opacity:0;transform:translateY(8px);transition:opacity .5s .3s,transform .5s .3s}
#guide.in .gBub{opacity:1;transform:none}
#guide[data-pos$="r"] .gBub{right:0}
#guide[data-pos$="l"] .gBub{left:0}
#guide:not(.cap) .gBub{display:none}

/* قلبِ «ادامه» وسط ویس پنهانه و بعد از تموم شدنش آروم برمی‌گرده */
#next{transition:opacity .8s}
#next.hold{opacity:0;pointer-events:none}


/* ==========================================================================
   نسخه‌ی ۴.۲: قفل قلب وسط (تا تموم شدن ویس راهنما) + دکمه‌ی شمع تا پایان حرف راهنما
========================================================================== */
#coreHeart.glock{animation:none}
#coreHeart.glock svg{filter:grayscale(1) brightness(.5);transition:filter .6s}
#coreHeart.glock #coreText{font-size:30px}
#coreHeart.glock.wob{animation:gWob .4s}
#coreHeart.unl{animation:coreBeat 1.6s ease-in-out infinite,gUnlock 1s ease 0s 1}
@keyframes gWob{25%{rotate:-8deg}75%{rotate:8deg}}
@keyframes gUnlock{30%{scale:1.35}100%{scale:1}}
#ckBtn:disabled:not(.gone){opacity:.4;pointer-events:none}
/* وقتی به‌جای کارتون، عکس خودت (closed.png / open.png) رو گذاشتی، کمی بزرگ‌تر دیده بشه (عدد رو هرچی خواستی عوض کن) */
#guide.gPhoto{--gw:min(44vw,200px)}


/* ==========================================================================
   نسخه‌ی ۴.۳: دست متحرک (لایه‌ی arm.png دور آرنج می‌چرخه)
   --ax / --ay = جای آرنج روی عکس (درصد). اگه عکس خودت رو عوض کردی، این دو عدد رو هم عوض کن.
   --w = زاویه‌ی تکون خوردن دست (درجه) ، --wp = سرعت هر رفت‌وبرگشت
========================================================================== */
#guide{--ax:10.2%;--ay:73.8%;--w:8;--wp:.8s}
.gImgs .gArmImg{position:absolute;inset:0;width:100%;height:100%;transform-origin:var(--ax) var(--ay);rotate:-32deg}
#guide.in .gArmImg{animation:gArmUp 1.1s cubic-bezier(.3,1.4,.4,1) .45s both,gArmWave var(--wp) ease-in-out 1.55s infinite alternate}
@keyframes gArmUp{from{rotate:-32deg}to{rotate:0deg}}
@keyframes gArmWave{from{rotate:0deg}to{rotate:calc(var(--w) * 1deg)}}
#guide.act-wave{--w:15;--wp:.5s}
#guide.act-cheer{--w:20;--wp:.38s}
#guide.act-pointL{--w:-9;--wp:.9s}
#guide.act-pointR{--w:9;--wp:.9s}
#guide.act-heart{--w:6;--wp:1s}
#guide.act-kiss{--w:9;--wp:.9s}
/* وقتی دست جدا داریم، کل بدن دیگه کج نمی‌شه؛ فقط دست تکون می‌خوره */
#guide.gPhoto.gHasArm[class*="act-"] .gBody{animation:gBob 2.2s ease-in-out infinite}

/* ==========================================================================
   نسخه‌ی ۴.۴: جای ثابت راهنما
   همیشه پایینِ صفحه، گوشه‌ی راست یا چپ، و ارتفاعش از فاصله‌ی خالیِ پایین‌ِ صحنه‌ها (۱۱۰ پیکسل) کمتره،
   پس روی متن و دکمه‌ها نمی‌افته. قلبِ «ادامه» هم وسطه و گوشه‌ها رو پر نمی‌کنه.
   (اگه خواستی بزرگ‌تر یا کوچیک‌تر باشه فقط عدد 128px رو عوض کن؛ برای عدد بزرگ‌تر از ~130 ممکنه روی محتوا بیفته)
========================================================================== */
#guide.gPhoto{--gw:min(34vw,128px)}
#guide[data-pos]{top:auto;bottom:env(safe-area-inset-bottom)}
#guide[data-pos="mr"]{right:6px;left:auto;--ex:130%}
#guide[data-pos="ml"]{left:6px;right:auto;--ex:-130%}
@media (max-height:700px){#guide.gPhoto{--gw:min(28vw,104px)}}


/* ==========================================================================
   نسخه‌ی ۵: گربه‌ها · شمارنده‌ی با هم بودن · موج و گلبرگ لودینگ · صفحه‌ی رمز جدید
========================================================================== */
/* حالت‌های گربه: n عادی ، x ذوق‌زده ، s ناراحت (با data-m روی svg عوض می‌شه) */
svg[data-m] .eH,svg[data-m] .mO,svg[data-m] .mS,svg[data-m] .tear{display:none}
svg[data-m="x"] .eN,svg[data-m="x"] .mW,svg[data-m="s"] .mW{display:none}
svg[data-m="x"] .eH,svg[data-m="x"] .mO,svg[data-m="s"] .mS,svg[data-m="s"] .tear{display:inline}

/* ---------- لودینگ: موج صورتی + گلبرگ ---------- */
#loading{overflow:hidden}
#loadWaves{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.lw{position:absolute;border-radius:50%;border:6px solid #ff4fa3;box-shadow:0 0 30px #ff4fa388,inset 0 0 30px #ff4fa344;opacity:0;will-change:transform,opacity}
#loadPetals{z-index:3}
.petal{position:absolute;top:-8%;pointer-events:none;animation:petalFall linear forwards;will-change:transform}
.petal i{display:block;width:100%;height:100%;border-radius:85% 15% 85% 15%/65% 35% 65% 35%;
  background:radial-gradient(ellipse at 28% 28%,#ffffffaa 0,transparent 38%),var(--c);box-shadow:inset -3px -4px 8px #0004;
  animation:petalTumble ease-in-out infinite alternate;will-change:transform}
@keyframes petalFall{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx),118dvh,0)}}
@keyframes petalTumble{from{transform:perspective(260px) rotateX(10deg) rotateY(0deg) rotateZ(-30deg)}to{transform:perspective(260px) rotateX(150deg) rotateY(70deg) rotateZ(50deg)}}

/* ---------- صفحه‌ی رمز: قلب + دو گربه + صفحه‌کلید گرد ---------- */
#lock{overflow-y:auto;overflow-x:hidden}
#lock .card{margin:auto;padding:14px 16px 16px}
#lockCats{width:min(50vw,190px);margin:0 auto 2px}
#lockCats svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 8px 16px #0009) drop-shadow(0 0 20px #ff4fa366)}
.lkBeat,.lkCat,.lkBow{transform-box:fill-box}
.lkBeat{transform-origin:50% 55%;animation:beat 1.8s ease-in-out infinite}
.lkCat{transform-origin:50% 90%;animation:lkBob 3.2s ease-in-out infinite}
.lkG{animation-delay:-1.6s}
.lkBow{transform-origin:50% 50%;animation:lkBow 2.6s ease-in-out infinite}
.lkSp path{transform-box:fill-box;transform-origin:center;animation:twinkle 1.8s ease-in-out infinite}
.lkSp path+path{animation-delay:-.9s}
@keyframes lkBob{50%{rotate:-3deg;translate:0 -2px}}
@keyframes lkBow{50%{rotate:8deg}}
.lkHeartTxt{fill:#ff4f8a}
svg.boop .lkBeat{animation:lkBoop .35s ease}
@keyframes lkBoop{40%{scale:1.09}}
svg[data-m="s"] .lkBeat{animation:lkShake .5s ease 2}
@keyframes lkShake{20%{translate:-9px 0}40%{translate:9px 0}60%{translate:-6px 0}80%{translate:6px 0}}
svg[data-m="x"] .lkCat{animation-duration:.7s}
#lock .card h1{font-size:20px;line-height:1.8}
#lock .card p{margin:2px 0 10px;font-size:14px;line-height:1.8}
#lock #pw{padding:10px;font-size:20px;letter-spacing:5px}
#lock #msg{min-height:44px;margin:10px 0 0!important}
#pad{direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 10px;justify-items:center;margin-top:10px}
#pad button{width:min(15.5vw,56px);aspect-ratio:1;border-radius:50%;border:1px solid #ffffff40;color:#fff;font:700 21px "Vazirmatn",sans-serif;
  background:radial-gradient(circle at 32% 26%,#ffffff55,#ffffff14 55%,#ffffff0a);box-shadow:0 6px 16px #0006,inset 0 0 0 1px #ffffff12;transition:transform .12s,background .2s}
#pad button:active{transform:scale(.86);background:radial-gradient(circle at 32% 26%,#ff9ccb99,#ff4fa355)}
#pad #enter{width:min(15.5vw,56px);margin:0;padding:0;font:900 14px "Vazirmatn",sans-serif;border-color:#ffffff55;
  background:linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange));box-shadow:0 8px 20px #ff4fa366}

/* ---------- صفحه‌ی اول: شمارنده‌ی روزهای با هم بودن ---------- */
#sceneHello .big{font-size:19px;line-height:2;margin-top:8px}
#helloPhrase{min-height:40px;margin-top:10px}
#helloUs{width:100%;max-width:360px;margin-top:12px}
#usLabel{font-family:var(--soft);font-size:15px;line-height:1.8;color:#ffe9a0;text-shadow:0 0 12px #ffa24c88}
#usCats{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;height:64px;padding:0 12px;margin-bottom:-9px}
.usCat{width:70px;padding:0;border:0;background:none;transform-origin:50% 100%;animation:usBob 2.6s ease-in-out infinite}
.usCat.r{animation-delay:-1.3s}
.usCat svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 4px 8px #0008)}
.usCat.jump{animation:usJump .6s ease}
.usHeart{align-self:center;font-size:26px;animation:beat 1.4s ease-in-out infinite;filter:drop-shadow(0 0 10px #ff4fa3)}
@keyframes usBob{50%{translate:0 -3px;rotate:-2deg}}
@keyframes usJump{30%{translate:0 -22px;scale:1.12}60%{translate:0 0;scale:.95}100%{scale:1}}
#usGrid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.usCell{padding:10px 2px 8px;border:1px solid #ffffff2e;border-radius:18px;text-align:center;
  background:linear-gradient(165deg,#3a1b73,#1d0d44);box-shadow:0 10px 24px #0006,0 0 24px #ff4fa322}
.usCell i{display:block;font-style:normal;font-size:16px;line-height:1}
.usCell b{display:block;margin-top:4px;font:900 25px/1.3 "Vazirmatn",sans-serif;color:var(--gold);text-shadow:0 0 14px #ff4fa3aa}
.usCell b.tk{animation:usTick .45s ease}
.usCell small{display:block;margin:0;font-size:12px;color:#ffd1e8}
@keyframes usTick{30%{transform:scale(1.22)}}
#usFoot{margin-top:10px;font-family:var(--soft);font-size:15px;line-height:1.8;color:#ffd1e8}
@media (max-height:740px){
  #lockCats{width:min(40vw,150px)}
  #sceneHello .big{font-size:17px;line-height:1.8}
  #usCats{height:56px}.usCat{width:62px}
  .usCell b{font-size:22px}
}
#usLabel{margin-bottom:8px}


/* ==========================================================================
   نسخه‌ی ۶: استیکرهای سلام · پاکت جدید (بالا جایگزین شد) · گربه‌های صفحه‌ی آخر
========================================================================== */
/* استیکر کنار جمله‌های صفحه‌ی اول (لبه‌ی سفید مثل استیکر واقعی) */
#helloBig .stk i{display:inline-block;font-style:normal;font-size:28px;line-height:1;vertical-align:middle;margin:0 2px;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 5px 8px #0008);
  animation:stkF 2.8s ease-in-out infinite}
#helloBig .stk.s1 i{rotate:-10deg}
#helloBig .stk.s2 i{rotate:9deg;animation-delay:-1.4s}
@keyframes stkF{50%{translate:0 -4px}}

/* گربه‌ی هر جمله (صفحه‌ی آخر) */
#askCat{position:relative;width:min(54vw,26dvh,230px);aspect-ratio:1;margin:6px auto 0;pointer-events:none;transition:opacity .5s}
#askCat>*{display:block;width:100%;height:100%;object-fit:contain;border-radius:14px;
  filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 18px #000a);
  animation:catPop .6s cubic-bezier(.2,1.5,.3,1) both,catBob 2.6s ease-in-out .6s infinite}
@keyframes catPop{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes catBob{50%{translate:0 -6px}}
.catTr{animation:catTr 1.1s ease-in infinite}
@keyframes catTr{0%{translate:0 -3px;opacity:.2}30%{opacity:1}100%{translate:0 8px;opacity:.1}}
#ask.kiss #askCat,#ask.sent #askCat,#ask.fin #askCat{opacity:0}

/* ==========================================================================
   نسخه‌ی ۶.۱: فشرده‌تر کردن صفحه‌ی اول و کیک، پیام صفحه‌ی قلب
========================================================================== */
#sceneHello,#sceneCake{justify-content:safe center}
#sceneHello{padding-top:calc(34px + env(safe-area-inset-top))}
#helloHeart{width:58px;height:52px;margin-bottom:6px}
#helloDate{margin-bottom:0;font-size:14px;line-height:1.5}
#helloTitle{font-size:30px;line-height:1.5}
#sceneHello .big{font-size:17px;line-height:1.7;margin-top:2px}
#helloBig .stk i{font-size:22px;margin:-6px 1px}
#helloUs{margin-top:6px}
#usLabel{font-size:14px;line-height:1.6;margin-bottom:4px}
.usCell{padding:7px 2px 6px}
.usCell b{font-size:22px;margin-top:2px}
#usFoot{font-size:14px;line-height:1.6;margin-top:6px}
#helloPhrase{min-height:54px;margin-top:6px;max-width:320px;font-size:16px;line-height:1.7}
@media (max-height:660px){
  #helloHeart{width:44px;height:40px;margin-bottom:2px}
  #helloTitle{font-size:26px}
  #usCats{height:44px}.usCat{width:52px}
  .usCell b{font-size:19px}
  #helloPhrase{min-height:46px;font-size:15px}
}
#heartHint{font-size:15px!important;line-height:1.8;margin-top:6px!important;max-width:330px}

/* کیک: از بالا شروع می‌شه تا متن‌ها زیر قلبِ «ادامه» نرن */
#sceneCake{justify-content:flex-start;padding-top:calc(52px + env(safe-area-inset-top))}
#sceneCake small{margin-bottom:2px}
#sceneCake h2{font-size:28px;line-height:1.5}
#ckStage{width:min(52vw,210px);margin-top:6px}
#ckMsg{min-height:48px;margin-top:8px;font-size:15px;line-height:1.6}
.ckLine{font-size:16px;line-height:1.65}
.ckLine.big{font-size:19px}
#ckBtn{margin-top:10px}


/* ---------- دکمه‌های زیر متن حلقه‌ها: «از اول ببینم» و «ادامه» ---------- */
#ringBtns{display:flex;gap:10px;justify-content:center;margin-top:16px;opacity:0;pointer-events:none;transition:opacity 1.2s}
#ringBtns.show{opacity:1;pointer-events:auto}
#ringAgain,#ringGo{min-height:44px;padding:0 18px;border-radius:22px;font:500 14px "Vazirmatn",sans-serif;color:#fff}
#ringAgain{border:1px solid #ffffff55;background:#ffffff1a}
#ringGo{border:0;font-weight:700;background:linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange));box-shadow:0 8px 24px #7c3aed77}
#ringAgain:active,#ringGo:active{scale:.95}

/* ==========================================================================
   نسخه‌ی ۷: روون‌تر شدن · قلبِ وسطِ صفحه‌ی عکس‌ها بیشتر به چشم بیاد · جا برای دکمه‌های صفحه‌ی حلقه‌ها
========================================================================== */
/* ---------- روون‌تر: درخشش تیترها فقط برای صفحه‌ی فعاله و سبک‌تره ---------- */
.scene:not(.active) h2{animation:none;filter:none}
.scene h2{filter:drop-shadow(0 0 16px #ff4fa3aa)}
.miniHeart{will-change:transform}
.usCat{will-change:translate,rotate}

/* ---------- صفحه‌ی حلقه‌ها: با وجود دکمه‌ها هیچ‌چیز بیرون نزنه ---------- */
#sceneRings{justify-content:safe center}
@media (max-height:700px){#ringStage{height:26dvh}}

/* ---------- قلبِ وسطِ صفحه‌ی عکس‌ها: بزرگ‌تر ، با موج صورتی و دستِ اشاره‌گر ---------- */
#coreHeart{width:calc(var(--s)*.4);height:calc(var(--s)*.375)}
#coreHeart::before,#coreHeart::after{content:"";position:absolute;inset:-8%;border-radius:50%;border:3px solid #ff4fa3;opacity:0;pointer-events:none;
  animation:coreRing 2s ease-out infinite}
#coreHeart::after{animation-delay:1s}
@keyframes coreRing{0%{transform:scale(.75);opacity:.85}100%{transform:scale(1.7);opacity:0}}
#coreHand{position:absolute;left:50%;top:90%;font-size:30px;line-height:1;font-style:normal;translate:-50% 0;pointer-events:none;
  filter:drop-shadow(0 3px 6px #000a);animation:handTap 1.1s ease-in-out infinite}
@keyframes handTap{50%{translate:-50% -9px}}
#coreHeart.tapped #coreHand,#coreHeart.glock #coreHand,
#coreHeart.tapped::before,#coreHeart.tapped::after,#coreHeart.glock::before,#coreHeart.glock::after{display:none}
#coreText{font-size:15px}


/* ==========================================================================
   نسخه‌ی ۸: راهنمای لمس قلب صفحه‌ی اول + گوی عروس و دوماد
========================================================================== */
/* قلب صفحه‌ی اول: موج صورتی و دستِ اشاره‌گر تا وقتی هنوز لمس نشده */
#helloHeart::before,#helloHeart::after{content:"";position:absolute;inset:-12%;border-radius:50%;border:3px solid #ff4fa3;opacity:0;pointer-events:none;animation:coreRing 2s ease-out infinite}
#helloHeart::after{animation-delay:1s}
#helloHand{position:absolute;left:50%;bottom:calc(100% + 2px);font-size:30px;line-height:1;font-style:normal;translate:-50% 0;pointer-events:none;
  filter:drop-shadow(0 3px 6px #000a);animation:helloHandTap 1.1s ease-in-out infinite}
@keyframes helloHandTap{50%{translate:-50% 9px}}
#helloHeart.tapped::before,#helloHeart.tapped::after,#helloHeart.tapped #helloHand{display:none}
#helloPhrase.cue{color:#fff;text-shadow:0 0 14px #ff4fa3;animation:cuePulse 1.6s ease-in-out infinite}
@keyframes cuePulse{50%{opacity:.55}}

/* گوی شیشه‌ای پایانی */
#askEnd{gap:10px;padding:20px}
#askEnd h3{font-size:28px;line-height:1.6}
#askEnd p{font-size:17px;line-height:2}
#askGlobe{flex:none;width:min(60vw,31dvh,240px);aspect-ratio:240/296;opacity:0;transform:translateY(20px) scale(.8);transition:opacity 1.2s,transform 1.2s cubic-bezier(.2,1.3,.3,1)}
#askEnd.show #askGlobe{opacity:1;transform:none}
#askGlobe svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 22px #ff4fa388) drop-shadow(0 0 50px #7c3aed99)}
.gbSn{fill:#fff;transform-box:fill-box;opacity:0;animation:gbSn var(--t,6s) linear var(--d,0s) infinite}
@keyframes gbSn{0%{transform:translate(0,-8px);opacity:0}15%{opacity:.9}100%{transform:translate(var(--dx,0),64px);opacity:0}}
.gbHt{fill:#ff6fa3;transform-box:fill-box;opacity:0;animation:gbHt var(--t,5s) ease-out var(--d,0s) infinite}
@keyframes gbHt{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translateY(-85px);opacity:0}}


/* ==========================================================================
   نسخه‌ی ۸.۱: صفحه‌ی کیک (فقط همین صفحه): کیک بزرگ‌تر ، متن‌های قشنگ‌تر
========================================================================== */
#sceneCake{padding-top:calc(46px + env(safe-area-inset-top))}
#sceneCake small{font-size:15px;margin-bottom:0}
#sceneCake h2{font-size:32px;line-height:1.5}
#ckStage{position:relative;width:min(78vw,38dvh,310px);margin-top:10px}
#ckStage::before{content:"";position:absolute;left:-18%;right:-18%;top:6%;bottom:-6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#ff4fa338 0%,#ffa24c1f 40%,transparent 68%)}
#ckStage svg{position:relative}
#ckMsg{width:min(86vw,340px);max-width:none;min-height:0;margin-top:14px;padding:12px 18px;border:1px solid #ffffff2a;border-radius:24px;
  background:linear-gradient(160deg,#ffffff1f,#ffffff0a);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px #0006,0 0 30px #ff4fa322;white-space:pre-line;font-size:17px;line-height:2;color:#ffe6f2;text-shadow:0 0 12px #ff4fa355}
.ckLine{font-size:17px;line-height:1.95;color:#fff4e0}
.ckLine.big{font-family:var(--love);font-size:23px;line-height:1.8;color:var(--gold);text-shadow:0 0 16px #ff4fa3,0 0 30px #7c3aed}
#ckBtn{margin-top:14px;padding:14px 30px;font-size:18px;border-radius:26px;box-shadow:0 10px 30px #7c3aed77,0 0 28px #ff4fa355}
#ckBtn:not(:disabled):not(.gone){animation:ckBtnGlow 1.8s ease-in-out infinite}
@keyframes ckBtnGlow{50%{box-shadow:0 10px 36px #ff4fa3aa,0 0 44px #ffa24c77}}


/* ==========================================================================
   نسخه‌ی ۸.۲: سبک‌تر کردن صفحه‌ی لودینگ (لگ نکنه)
   فیلترهای سنگین و سایه‌ها برداشته شد؛ درخشش قلب یه گرادیان ثابت شد؛ گلبرگ‌ها دو‌بعدی و کم‌تر شدن.
========================================================================== */
#bigHeart{filter:none;will-change:transform}
#loading::after{content:"";position:absolute;left:50%;top:40%;width:min(110vw,520px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,#ff4fa355 0%,#7c3aed33 40%,transparent 70%);animation:ldGlow 1.6s ease-in-out infinite}
@keyframes ldGlow{50%{opacity:.55}}
.lw{box-shadow:none}
.petal i{box-shadow:none;animation:petalTumble2 ease-in-out infinite alternate}
@keyframes petalTumble2{from{transform:rotate(-30deg) scaleX(1)}to{transform:rotate(50deg) scaleX(.35)}}
#loading.out{opacity:0;transform:scale(1.2);filter:none;pointer-events:none}


/* ==========================================================================
   نسخه‌ی ۸.۳: دکمه‌ی بازگشت صفحه‌ی پایانی (بعد از چند ثانیه آروم ظاهر می‌شه)
========================================================================== */
#askAgain{display:inline-flex;align-items:center;gap:8px;min-height:50px;margin-top:10px;padding:0 30px;border:1px solid #ffffff55;border-radius:28px;
  font:700 17px "Vazirmatn",sans-serif;color:#fff;opacity:0;
  background:linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange));box-shadow:0 10px 30px #7c3aed77,0 0 26px #ff4fa355;transition:scale .15s}
#askAgain:active{scale:.94}
#askAgain .agH{display:inline-block;font-size:21px;line-height:1;animation:beat 1.5s ease-in-out infinite}
#askEnd.show #askAgain{animation:againIn 1s ease 2.6s both,againGlow 2s ease-in-out 3.6s infinite}
@keyframes againIn{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes againGlow{50%{box-shadow:0 10px 36px #ff4fa3aa,0 0 44px #ffa24c77}}


/* ==========================================================================
   نسخه‌ی ۸.۴: صفحه‌ی رمز: خانه‌های قلبی + دکمه‌های گربه‌ایِ آب‌نباتی
========================================================================== */
#lock .card{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%23ffffff' fill-opacity='.08'%3E%3Cpath d='M16 22c-3-5-10-2-7 4l7 7 7-7c3-6-4-9-7-4z'/%3E%3Ccircle cx='40' cy='14' r='2.5'/%3E%3Ccircle cx='46' cy='10' r='2.5'/%3E%3Ccircle cx='52' cy='14' r='2.5'/%3E%3Cellipse cx='46' cy='21' rx='5' ry='4'/%3E%3Cpath transform='translate%2830 38%29 scale%28.8%29' d='M16 22c-3-5-10-2-7 4l7 7 7-7c3-6-4-9-7-4z'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,#ffffff1f,#ffffff0a)}
#lock #pw{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
#pwSlots{display:flex;justify-content:center;gap:6px;margin:6px auto 0;padding:10px;border-radius:24px;
  background:linear-gradient(160deg,#ffffff22,#ffffff0a);border:2px dashed #ffffff55;box-shadow:inset 0 0 18px #ff4fa322,0 8px 22px #0004}
#pwSlots i{flex:1 1 0;max-width:34px;height:44px;border-radius:14px;background:#ffffff14;border:2px solid #ffffff22;display:grid;place-items:center;
  transition:background .25s,border-color .25s,box-shadow .25s}
#pwSlots i::before{content:"";width:6px;height:6px;border-radius:50%;background:#ffffff66}
#pwSlots i.on{background:linear-gradient(160deg,#ff9ccb,#ff4fa3);border-color:#fff;box-shadow:0 0 14px #ff4fa3aa;animation:slotPop .35s cubic-bezier(.2,1.6,.3,1)}
#pwSlots i.on::before{content:"♥";width:auto;height:auto;background:none;border-radius:0;color:#fff;font-size:20px;line-height:1;text-shadow:0 1px 4px #0005}
#pwSlots.ok i.on{background:linear-gradient(160deg,#ffe9a0,#ffa24c);box-shadow:0 0 18px #ffd86f}
#pwSlots.shake{animation:shake .45s}
@keyframes slotPop{from{transform:scale(.5)}to{transform:none}}

#lock #pad{gap:18px 12px;margin-top:20px;padding-top:6px}
#lock #pad button{--k:#ffc2dc;--k2:#ff8ec0;--k3:#e0629f;position:relative;isolation:isolate;width:min(16vw,58px);aspect-ratio:1;border:0;border-radius:50%;
  color:#6b1d5e;font:800 23px "Vazirmatn",sans-serif;text-shadow:0 1px 0 #fff9;
  background:radial-gradient(circle at 32% 24%,#ffffffcc 0,#fff0 38%),linear-gradient(160deg,var(--k),var(--k2));
  box-shadow:0 5px 0 var(--k3),0 10px 18px #0006;transition:transform .1s,box-shadow .1s}
/* گوش گربه */
#lock #pad button::before{content:"";position:absolute;left:3%;right:3%;top:-20%;height:44%;z-index:-1;background:var(--k2);
  clip-path:polygon(4% 100%,12% 8%,46% 100%,54% 100%,88% 8%,96% 100%)}
/* دوخت نقطه‌چین دور دکمه */
#lock #pad button::after{content:"";position:absolute;inset:4px;border-radius:50%;border:2px dashed #ffffffaa;pointer-events:none}
#lock #pad button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--k3),0 4px 10px #0006;background:radial-gradient(circle at 32% 24%,#ffffffcc 0,#fff0 38%),linear-gradient(160deg,var(--k),var(--k2))}
#lock #pad button:nth-child(5n+2){--k:#e0d0ff;--k2:#b79cff;--k3:#8b6fd6}
#lock #pad button:nth-child(5n+3){--k:#ffdcb8;--k2:#ffb27a;--k3:#e0894a}
#lock #pad button:nth-child(5n+4){--k:#c4e4ff;--k2:#8fc3ff;--k3:#5d96d6}
#lock #pad button:nth-child(5n){--k:#c6f3e0;--k2:#8fe0bf;--k3:#55b894}
#lock #pad button[data-k="del"]{--k:#fff;--k2:#e6dcff;--k3:#b8a8e8;color:#8b3a8e;font-size:22px}
#lock #pad #enter{--k2:#ff4fa3;--k3:#b81f72;width:min(16vw,58px);margin:0;padding:0;color:#fff;font:900 15px "Vazirmatn",sans-serif;text-shadow:0 1px 3px #0006;
  background:radial-gradient(circle at 32% 24%,#ffffff88 0,#fff0 38%),linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange));
  box-shadow:0 5px 0 var(--k3),0 0 22px #ff4fa388,0 10px 18px #0006}
#lock #pad #enter:active{background:radial-gradient(circle at 32% 24%,#ffffff88 0,#fff0 38%),linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange));box-shadow:0 1px 0 var(--k3),0 0 16px #ff4fa388}


/* ==========================================================================
   نسخه‌ی ۹: عکس‌های صفحه‌ی «تپش قلبم» توی حباب‌های صابونی
   پوسته‌ی حباب = عنصر i.bub روی هر عکس. لمس عکس باز شده = ترکیدن (JS: Hearts.pop / Pop.burst) و بعد از ۲٫۶ ثانیه دوباره باد شدن.
========================================================================== */
.ph{width:calc(var(--s)*.125);height:calc(var(--s)*.125);min-width:38px;min-height:38px;margin:calc(var(--s)*-.0625) 0 0 calc(var(--s)*-.0625);border:0;overflow:visible;background:none}
.ph img{inset:11%;width:78%;height:78%;border-radius:50%}
.ph.locked{background:radial-gradient(circle at 30% 30%,#5b32b8cc,#1e0f4dcc)}
.ph.locked::after{border-radius:50%}
.ph.open{border:0;box-shadow:0 0 16px #ff9ccb55}
.phg{display:none}
.ph .bub{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3;
  box-shadow:0 0 12px #c4b5fd55,inset 0 0 0 1px #ffffff66;
  animation:bubWob 3.4s ease-in-out infinite;animation-delay:calc(var(--d,0s)*-1);
  transition:scale .7s cubic-bezier(.2,1.9,.3,1),opacity .35s}
.ph .bub::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:.85;
  background:conic-gradient(from 20deg,#ff9ccb99,#7dd3fc99,#a78bfa99,#fde68a99,#6ee7b799,#ff9ccb99);
  -webkit-mask:radial-gradient(circle,#0000 60%,#000 73%);mask:radial-gradient(circle,#0000 60%,#000 73%)}
.ph .bub::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 6px #ffffff77;
  background:radial-gradient(circle at 30% 24%,#fff 0,#fffd 7%,#fff0 20%),radial-gradient(circle at 72% 80%,#ffffff66 0,#fff0 18%)}
.ph.popped .bub{scale:.3;opacity:0;transition:none}
@keyframes bubWob{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.96)}}


/* ==========================================================================
   نسخه‌ی ۹.۲: هاله‌های نورانیِ دور حباب‌ها برگشت (قشنگ‌تر) + قلب وسط براق‌تر
========================================================================== */
.phg{display:block;width:calc(var(--s)*.125);height:calc(var(--s)*.125);min-width:38px;min-height:38px;margin:calc(var(--s)*-.0625) 0 0 calc(var(--s)*-.0625)}
.phg::before{inset:-7px;filter:blur(6px);background:conic-gradient(#3b82f6,#7c3aed,#ff4fa3,#ffa24c,#ffe27a,#fff,#3b82f6)}
.phg::after{content:"";position:absolute;inset:-14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#ff9ccb66 0%,#a78bfa33 55%,transparent 72%);animation:phgPulse 2.6s ease-in-out infinite}
@keyframes phgPulse{50%{opacity:.35}}
.ph.open .bub{box-shadow:0 0 12px #ffd86f99,0 0 26px #ff4fa366,inset 0 0 0 1.5px #ffffffbb}

/* قلب وسط: قلب براق با لبه‌ی توری، برق متحرک و ستاره‌های چشمک‌زن */
#coreHeart svg{overflow:visible}
.hgSh{animation:hgSweep 4.2s ease-in-out infinite}
@keyframes hgSweep{0%{transform:translateX(0)}55%,100%{transform:translateX(330px)}}
.hgSp path{transform-box:fill-box;transform-origin:center;animation:twinkle 1.8s ease-in-out infinite}
.hgSp path+path{animation-delay:-.9s}
#coreText{font-family:var(--love);font-size:19px;line-height:1.55;text-shadow:0 2px 8px #7a0f3f,0 0 14px #ff4fa3aa}


/* ==========================================================================
   نسخه‌ی ۹.۳: صفحه‌ی کیک بعد از فوت شمع‌ها: سه جمله داخل کادر ، جمله‌ی آخر (فونت عنوان) زیر کادر
   مشکل قبلی: آیتم‌های صحنه کوچیک می‌شدن (flex-shrink) و متن از کادر بیرون می‌زد؛ الان هیچ‌کدوم کوچیک نمی‌شن.
========================================================================== */
#sceneCake>*{flex:none}
#ckStage{transition:opacity .9s ease,transform .9s ease,width .9s ease}
#sceneCake.fin #ckStage{width:min(60vw,28dvh,230px);transition-delay:0s}
#sceneCake.fin #ckBtn{display:none}
#ckEnd{width:min(92vw,360px);margin-top:12px}
#ckEnd .ckLine.big{font-size:24px;line-height:1.8}

/* ==========================================================================
   نسخه‌ی ۹.۴: زوم خیلی آروم و نرم روی عکسی که توی پنجره‌ی بزرگ نشون داده می‌شه
   (از scale جدا استفاده شده تا با انیمیشن ورود vIn که transform رو عوض می‌کنه قاطی نشه)
========================================================================== */
#vImg{will-change:scale}
#viewer figure.swap #vImg{animation:vIn .6s cubic-bezier(.2,.8,.2,1),vZoom 12s cubic-bezier(.22,.61,.36,1) .2s forwards}
@keyframes vZoom{from{scale:1}to{scale:1.07}}


/* ==========================================================================
   نسخه‌ی ۱۰: دفترچه‌ی مشترک (صحنه‌ی #sceneDiary) و فرم نوشتن/ویرایش (#drSheet)
========================================================================== */
#sceneDiary{justify-content:flex-start;padding-top:calc(46px + env(safe-area-inset-top))}
#sceneDiary>*{flex:none}
#sceneDiary>#drList{flex:1 1 0}
#drTabs{display:flex;gap:6px;width:100%;max-width:350px;margin-top:8px}
#drTabs button{flex:1;min-height:40px;padding:0 3px;border:1px solid #ffffff2b;border-radius:16px;background:#ffffff12;color:#ffffffcc;font:500 13px "Vazirmatn",sans-serif;white-space:nowrap;transition:background .3s,border-color .3s}
#drTabs button.on{background:linear-gradient(135deg,var(--purple),var(--pink));border-color:#ffffff66;color:#fff}
#drList{min-height:0;width:100%;max-width:350px;margin-top:10px;padding:2px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;display:flex;flex-direction:column;gap:9px}
.drMsg{margin:auto;padding:14px;font-family:var(--soft);font-size:16px;line-height:2;color:#ffd1e8;text-align:center;white-space:pre-line}
.drRetry{display:block;margin:10px auto 0;min-height:44px;padding:0 20px;border:1px solid #ffffff55;border-radius:22px;background:#ffffff1a;color:#fff;font:500 14px "Vazirmatn",sans-serif}
.drCard{flex:none;display:flex;align-items:stretch;border:1px solid #ffffff26;border-right-width:4px;border-radius:18px;background:#ffffff12;transition:background .5s,border-color .5s,box-shadow .5s}
.drCard.wd{border-right-color:#60a5fa}
.drCard.wz{border-right-color:var(--pink)}
.drCard.on{background:linear-gradient(135deg,#ff4fa333,#7c3aed33);box-shadow:0 0 18px #ff4fa333}
.drChk{flex:none;width:52px;border:0;background:none;color:#ffffff88;font-size:26px;line-height:1}
.drChk::before{content:"♡"}
.drCard.on .drChk{color:var(--pink)}
.drCard.on .drChk::before{content:"♥"}
.drBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:11px 4px 11px 12px;border:0;background:none;color:#fff;font-family:var(--soft);text-align:right}
.drText{font-size:16px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
.drCard.on .drText{opacity:.72;text-decoration:line-through;text-decoration-color:#ffffff66}
.drMeta{font:500 11.5px/1.7 "Vazirmatn",sans-serif;color:#ffd1e8}
#drAdd{margin-top:10px;min-height:48px;padding:0 26px;border:0;border-radius:24px;font:800 16px "Vazirmatn",sans-serif;color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange));box-shadow:0 10px 30px #7c3aed66,0 0 24px #ff4fa355}
#drAdd:active{scale:.96}
#drHint{margin-top:8px;max-width:330px;font-family:var(--soft);font-size:13.5px;line-height:1.8;color:#ffd1e8}

#drSheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:calc(56px + env(safe-area-inset-top)) 16px 24px;background:#080418ee;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .35s}
#drSheet.show{opacity:1}
#drForm{width:min(100%,380px);padding:20px 18px;border-radius:24px;border:1px solid #ffffff2b;background:linear-gradient(160deg,#ffffff24,#ffffff0d);
  box-shadow:0 18px 60px #0008,0 0 40px #ff4fa322;transform:translateY(24px) scale(.96);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
#drSheet.show #drForm{transform:none}
#drFormT{margin-bottom:6px;font-family:var(--love);font-size:24px;line-height:1.8;text-align:center;color:var(--gold);text-shadow:0 0 16px #ff4fa388}
.drLbl{margin:10px 0 6px;font:500 13px "Vazirmatn",sans-serif;color:#ffd1e8}
.drChips{display:flex;gap:6px}
.drChips button{flex:1;min-height:42px;padding:0 2px;border:1px solid #ffffff2b;border-radius:14px;background:#ffffff12;color:#ffffffcc;font:500 14px "Vazirmatn",sans-serif;transition:background .3s,border-color .3s}
.drChips button.on{background:linear-gradient(135deg,var(--purple),var(--pink));border-color:#ffffff77;color:#fff}
.drChips.shake{animation:shake .45s}
#drText{display:block;width:100%;min-height:110px;margin-top:10px;padding:12px;border:1px solid #ffffff30;border-radius:16px;background:#ffffff14;color:#fff;
  font:400 17px/1.9 var(--soft);resize:none;outline:none}
#drText:focus{border-color:var(--pink);box-shadow:0 0 22px #ff4fa355}
#drErr{min-height:24px;margin-top:8px;font:500 13.5px/1.7 "Vazirmatn",sans-serif;text-align:center;color:#ff9ccb}
.drBtns{display:flex;gap:8px;margin-top:6px}
#drSave,#drCancel,#drDel{min-height:46px;border-radius:23px;font:700 15px "Vazirmatn",sans-serif;color:#fff}
#drSave{flex:2;border:0;background:linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange));box-shadow:0 8px 24px #7c3aed66}
#drSave:disabled{opacity:.55}
#drCancel{flex:1;border:1px solid #ffffff44;background:#ffffff14}
#drDel{width:100%;margin-top:10px;border:1px solid #ff6b8a66;background:#ff6b8a1f;color:#ffb3c4}
#drDel.sure{background:#e11d48;border-color:#fff;color:#fff}
#drSave:active,#drCancel:active,#drDel:active{scale:.96}