/* درون — «نونو» (a/ketab/mod-nunu.js): برگه‌ی سلامِ اول و جعبه‌ی هدیه، گوشه‌ی سلامِ خانه با حباب، کنارِ ساعتِ تمرکز و روی تپه‌ها.
   فقط با data-nunu (app.php). شکل‌ها <img> اند (a/app/nunu/*.svg، ۲۶۰×۲۸۰)؛ پلک، نفس و نقطه‌ی طلایی در خودِ SVG تکان می‌خورند. */
.dapp{--nn-coral:#ee6a55;--nn-coral2:#cf4540;--nn-gold:#ffd58a;--nn-tip:#fffaf3;--nn-tip-ink:#3a2a20}
.dapp .nn-img{display:block;width:100%;height:auto;aspect-ratio:260/280;pointer-events:none;-webkit-user-select:none;user-select:none}

/* ═══════════════════ برگه (مثلِ برگه‌های ریشه: از پایین؛ لپ‌تاپ وسط) ═══════════════════ */
.dapp .nn-lay{position:fixed;inset:0;z-index:262;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(6,5,4,0);transition:background .28s ease;-webkit-tap-highlight-color:transparent}
.dapp .nn-lay.in{background:rgba(6,5,4,.55)}
.dapp .nn-card{position:relative;width:100%;max-width:400px;margin:0 10px calc(10px + var(--d-safe-b,0px));border-radius:30px;overflow:hidden;
  background:var(--d-surf);border:1px solid var(--d-line2);box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
  transform:translateY(112%);transition:transform .42s var(--d-ease,cubic-bezier(.2,.8,.2,1))}
.dapp .nn-lay.in .nn-card{transform:none}
.dapp .nn-lay.out{background:rgba(6,5,4,0)}
.dapp .nn-lay.out .nn-card{transform:translateY(112%);transition-duration:.26s}
@media (min-width:700px){
  .dapp .nn-lay{align-items:center}
  .dapp .nn-card{margin:0;transform:translateY(18px) scale(.97);opacity:0;transition:transform .34s var(--d-ease,ease),opacity .24s}
  .dapp .nn-lay.in .nn-card{transform:none;opacity:1}
  .dapp .nn-lay.out .nn-card{transform:translateY(10px) scale(.98);opacity:0}
}
.dapp .nn-card-art{position:relative;background:radial-gradient(90% 70% at 50% 30%,rgba(238,106,85,.2),transparent 70%)}
.dapp .nn-card-art::after{content:'';position:absolute;left:0;right:0;bottom:0;height:36px;background:linear-gradient(rgba(0,0,0,0),var(--d-surf));pointer-events:none}
.dapp .nn-grip{position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:rgba(255,255,255,.22)}
:root[data-theme="paper"] .dapp .nn-grip{background:rgba(60,40,20,.18)}
@media (min-width:700px){ .dapp .nn-grip{display:none} }
.dapp .nn-x{position:absolute;top:12px;inset-inline-end:12px;z-index:3;width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(0,0,0,.28);color:#fff}
:root[data-theme="paper"] .dapp .nn-x{background:rgba(255,255,255,.7);color:#3a2a1a}
.dapp .nn-x .ic{width:16px;height:16px}
.dapp .nn-stage{position:relative;height:214px;display:flex;align-items:flex-end;justify-content:center;gap:4px;padding-bottom:10px}
.dapp .nn-glow{position:absolute;left:50%;top:46%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,213,138,.28),rgba(255,213,138,0) 66%)}
.dapp .nn-stage .nn-img{position:relative;z-index:1}
.dapp .nn-big{width:168px}
.dapp .nn-mid{width:122px}
.dapp .nn-stage .nn-side{margin-inline-start:-8px}
.dapp .nn-card-b{padding:4px 22px 20px;text-align:center}
.dapp .nn-h{margin:6px 0 6px;font-size:19.5px;font-weight:600;line-height:1.6;color:var(--d-ink)}
.dapp .nn-p{margin:0 auto;max-width:320px;font-size:14.5px;line-height:1.95;color:var(--d-sub)}
.dapp .nn-go{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.dapp .nn-go .dbtn{width:100%}
.dapp .nn-go .dbtn.ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--d-sub);min-height:40px}
.dapp .nn-tag{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:99px;font-size:12.5px;font-weight:600;
  color:var(--nn-coral);background:rgba(238,106,85,.13)}
.dapp .nn-tag i{width:7px;height:7px;border-radius:50%;background:var(--nn-coral);box-shadow:0 0 8px var(--nn-coral)}
.dapp .nn-tag.gold{color:#e8b54e;background:rgba(232,181,78,.14)}
.dapp .nn-tag.gold i{background:#f3c96b;box-shadow:0 0 8px #f3c96b}
.dapp .nn-promise{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;padding:12px 14px;border-radius:18px;text-align:start;
  font-size:14px;line-height:1.85;color:var(--d-ink2);background:var(--d-acc-soft);border:1px solid rgba(227,176,98,.28)}
.dapp .nn-promise b{color:var(--d-ink);font-weight:600}
.dapp .nn-promise-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--d-acc);background:rgba(227,176,98,.16);margin-top:1px}
.dapp .nn-promise-ic .ic{width:16px;height:16px}

/* جعبه‌ی هدیه: آرام می‌لرزد؛ open = درِ جعبه می‌پرد و نور بیرون می‌زند */
.dapp .nn-box{position:relative;z-index:2;width:112px;height:112px;margin-bottom:6px;padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;animation:nn-wiggle 2.6s ease-in-out infinite;transform-origin:50% 100%}
.dapp .nn-box-body{position:absolute;left:10px;right:10px;bottom:0;height:66px;border-radius:10px 10px 14px 14px;
  background:linear-gradient(180deg,#ff9c86,var(--nn-coral) 55%,var(--nn-coral2));box-shadow:inset 0 -8px 14px rgba(120,20,20,.22),0 10px 22px -10px rgba(0,0,0,.6)}
.dapp .nn-box-rib{position:absolute;left:50%;top:0;bottom:0;width:16px;margin-left:-8px;background:linear-gradient(180deg,#ffe7a8,var(--nn-gold) 60%,#e8b54e)}
.dapp .nn-box-lid{position:absolute;left:2px;right:2px;bottom:62px;height:26px;border-radius:9px;z-index:1;
  background:linear-gradient(180deg,#ffb4a2,#f07a63);box-shadow:0 4px 10px -4px rgba(90,10,10,.5);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.dapp .nn-box-lid::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:18px;margin-left:-9px;background:linear-gradient(180deg,#ffe7a8,var(--nn-gold))}
.dapp .nn-box-bow{position:absolute;left:50%;top:-20px;width:44px;height:22px;margin-left:-22px}
.dapp .nn-box-bow::before,.dapp .nn-box-bow::after{content:'';position:absolute;top:2px;width:22px;height:18px;border:5px solid var(--nn-gold);border-radius:50% 50% 40% 40%;box-sizing:border-box}
.dapp .nn-box-bow::before{left:0;transform:rotate(-18deg)}
.dapp .nn-box-bow::after{right:0;transform:rotate(18deg)}
.dapp .nn-box-light{position:absolute;left:50%;bottom:60px;width:10px;height:10px;margin-left:-5px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff6d6,rgba(255,213,138,0) 70%);transition:transform .5s ease,opacity .4s}
.dapp .nn-box.open{animation:none}
.dapp .nn-box.open .nn-box-lid{transform:translate(-26px,-46px) rotate(-28deg)}
.dapp .nn-box.open .nn-box-light{opacity:1;transform:scale(16)}
@keyframes nn-wiggle{0%,62%,100%{transform:rotate(0)}68%{transform:rotate(-6deg)}74%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}86%{transform:rotate(2deg)}}

/* ═══════════════════ خانه: گوشه‌ی سلام و حباب ═══════════════════ */
.dapp .nn-hero{position:absolute;inset-inline-end:12px;bottom:2px;z-index:2;width:88px;padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transform-origin:50% 100%}
.dapp .w-hello.z-t .nn-hero{width:56px;bottom:0;inset-inline-end:8px}
.dapp .w-hello.z-l .nn-hero{width:104px}
.dapp .w-hello.z-t.has-nn .w-hello-d{margin-inline-end:56px}
.dapp .nn-hero.hop{animation:nn-hop .5s cubic-bezier(.3,1.5,.5,1)}
.dapp .nn-hero.arrive{animation:nn-arrive .9s cubic-bezier(.3,1.4,.5,1) both}
.dapp .nn-tip{position:absolute;z-index:3;inset-inline-end:98px;bottom:14px;max-width:min(280px,calc(100% - 112px));padding:8px 12px;border-radius:16px 16px 4px 16px;
  font-size:13px;line-height:1.7;text-align:start;color:var(--nn-tip-ink);background:var(--nn-tip);box-shadow:0 10px 26px -12px rgba(0,0,0,.55);
  display:flex;align-items:center;gap:6px;opacity:0;transform:translateY(6px) scale(.94);transform-origin:100% 100%;transition:opacity .22s,transform .26s cubic-bezier(.3,1.4,.5,1)}
[dir="rtl"] .dapp .nn-tip,.dapp[dir="rtl"] .nn-tip{border-radius:16px 16px 16px 4px;transform-origin:0 100%}
.dapp .nn-tip.in{opacity:1;transform:none}
.dapp .nn-tip.go{cursor:pointer}
.dapp .nn-tip .ic{flex:none;width:14px;height:14px;opacity:.6}
.dapp .w-hello.z-t .nn-tip{bottom:6px;inset-inline-end:66px;max-width:min(240px,70%)}
.dapp .w-hello.z-l .nn-tip{inset-inline-end:114px;bottom:18px}
@keyframes nn-hop{0%{transform:none}35%{transform:translateY(-9px) scale(1.03,.97)}70%{transform:translateY(0) scale(.98,1.02)}100%{transform:none}}
@keyframes nn-arrive{0%{transform:translateY(-120px) scale(.6);opacity:0}55%{transform:translateY(6px) scale(1.04,.94);opacity:1}100%{transform:none;opacity:1}}

/* صفحه‌ی «ریشه» (mod-root.js buyBlock): قولِ نونو بالای مدت‌ها */
.dapp .rsh-nunu{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:8px 14px 8px 10px;border-radius:18px;font-size:13.5px;line-height:1.8;color:var(--d-ink2);
  background:rgba(238,106,85,.1);border:1px solid rgba(238,106,85,.26)}
.dapp .rsh-nunu-art{flex:none;width:44px}

/* ═══════════════════ تمرکز ═══════════════════ */
.dapp .nn-fq{position:absolute;inset-inline-start:2px;bottom:-6px;z-index:2;width:58px;pointer-events:none;transform-origin:50% 100%}
.dapp .nn-fq.hop{animation:nn-hop .5s cubic-bezier(.3,1.5,.5,1)}
.dapp .nn-hill{position:absolute;inset-inline-start:11%;bottom:10px;z-index:2;width:58px;pointer-events:none}
.dapp .fqt-hp{position:relative}
.dapp .fqt-hp .nn-hill{inset-inline-start:-12px;bottom:-6px;width:42px}
.dapp .fqe-sky .nn-hill{inset-inline-start:auto;inset-inline-end:12%;bottom:8px;width:64px}
.dapp .nn-pop{animation:nn-pop .7s .15s cubic-bezier(.3,1.6,.5,1) both}
@keyframes nn-pop{0%{transform:scale(.4) translateY(30px);opacity:0}60%{transform:scale(1.06,.95);opacity:1}100%{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  .dapp .nn-box,.dapp .nn-hero.hop,.dapp .nn-hero.arrive,.dapp .nn-fq.hop,.dapp .nn-pop{animation:none}
  .dapp .nn-box-lid,.dapp .nn-box-light,.dapp .nn-tip{transition:none}
}

/* ═══════════════════ بارگذاری: اسکلتِ هر صفحه و نونوی پرنده (a/cinema/ketab/mod-nunu-load.js) ═══════════════════
   .nl = جایِ «در حال آمدن»؛ nl-pg صفحه، nl-sm کارت و برگه‌ی کوچک. هر بلوکِ [data-s] یک ایستگاه است که نونو روی لبه‌اش می‌ایستد. */
.dapp .nl{position:relative;display:block;padding:2px 0 22px;color:var(--d-sub);animation:nl-in .4s .12s ease both}
@keyframes nl-in{from{opacity:0}}
.dapp .nl-pg{padding-top:40px}   /* جا برای نونو که روی ردیفِ اول می‌ایستد */
.dapp .nl-body>*{margin-bottom:14px}
.dapp .nl-body>*:last-child{margin-bottom:0}
.dapp .nl-b{display:block;border-radius:16px;background:linear-gradient(90deg,var(--d-surf) 0%,var(--d-surf2) 40%,var(--d-surf) 80%) 0 0/200% 100%;animation:d-shimmer 1.6s linear infinite}
.dapp .nl-ln{display:block;height:11px;border-radius:6px;background:var(--d-line2);margin:8px 0}
.dapp .nl-lab{height:12px;margin:4px 0 12px}
.dapp .nl-tx{display:block;flex:1 1 0;min-width:0}
.dapp .nl-card{display:flex;align-items:center;padding:16px 18px;border-radius:var(--d-r)}
.dapp .nl-card>.nl-tx{padding-top:1px}
.dapp .nl-card:not(.nl-hero):not(.nl-sum):not(.nl-hab) .nl-tx{flex:1 1 100%}
.dapp .nl-ent,.dapp .nl-h96.nl-card{display:block}
.dapp .nl-ent .nl-ln:first-child{height:10px}
.dapp .nl-row{display:flex;align-items:center}
.dapp .nl-row .nl-av{margin-inline-end:12px}
.dapp .nl-av{flex:none;display:block;width:48px;height:48px;border-radius:50%}
.dapp .nl-av.nl-sq{border-radius:14px}
.dapp .nl-in{background:var(--d-line2);margin-inline-end:14px;animation:none}
.dapp .nl-hero{min-height:112px}
.dapp .nl-hero .nl-av{width:60px;height:60px}
.dapp .nl-sum{min-height:116px}
.dapp .nl-ring-s{flex:none;display:block;width:68px;height:68px;margin-inline-end:16px;border-radius:50%;border:8px solid var(--d-line2)}
.dapp .nl-hab{min-height:64px;padding-top:12px;padding-bottom:12px}
.dapp .nl-chk{flex:none;display:block;width:30px;height:30px;margin-inline-end:14px;border-radius:50%;border:2px solid var(--d-line2)}
.dapp .nl-days{display:flex;justify-content:space-between}
.dapp .nl-dot{flex:none;width:40px;height:40px;border-radius:50%}
.dapp .nl-g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dapp .nl-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.dapp .nl-h56{height:56px}.dapp .nl-h96{height:96px}.dapp .nl-h120{height:120px}
.dapp .nl-pill-s{height:36px;width:42%;border-radius:99px}
.dapp .nl-seg{display:flex}
.dapp .nl-seg>.nl-pill-s{flex:1 1 0;width:auto;margin-inline-end:8px}
.dapp .nl-seg>.nl-pill-s:last-child{margin-inline-end:0}
.dapp .nl-goal{display:block;padding:18px}
.dapp .nl-r0{margin-bottom:16px}
.dapp .nl-bar{display:block;height:9px;border-radius:9px;background:var(--d-line)}
.dapp .nl-bar i{display:block;height:100%;border-radius:9px;background:var(--d-line2)}
.dapp .nl-chart{display:flex;align-items:flex-end;justify-content:space-between;height:200px;padding:20px 22px 18px}
.dapp .nl-vb{display:block;width:10%;border-radius:8px 8px 4px 4px;background:var(--d-line2)}
.dapp .nl-ring{width:196px;height:196px;margin:10px auto 22px;border-radius:50%}
.dapp .nl-body>.nl-pill{height:52px;width:62%;margin-left:auto;margin-right:auto;border-radius:99px}
.dapp .nl-hero16{height:0;padding-bottom:52%;border-radius:20px}
.dapp .nl-cov{height:0;padding-bottom:150%;border-radius:12px}
.dapp .nl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (min-width:700px){.dapp .nl-grid{grid-template-columns:repeat(5,1fr)}}
.dapp .nl-strip{display:flex;overflow:hidden;margin-bottom:6px}
.dapp .nl-strip>.nl-cov{flex:0 0 94px;width:94px;height:141px;padding:0;margin-inline-end:12px}
.dapp .nl-chips{display:flex;margin-bottom:16px}
.dapp .nl-chip{flex:none;width:68px;height:34px;margin-inline-end:8px;border-radius:99px}
.dapp .nl-pav{width:92px;height:92px;margin:6px auto 14px;border-radius:50%}
.dapp .nl-nm{width:40%;margin:0 auto 18px}
.dapp .nl-search{height:46px;border-radius:14px}
.dapp .nl-grp{display:block;padding:8px 18px}
.dapp .nl-grp .nl-row{padding:10px 0}
.dapp .nl-ico{width:34px;height:34px;border-radius:10px;background:var(--d-line2)}

/* کوچک: سه قرص، نونوی کوچک روی‌شان می‌پرد */
.dapp .nl-sm{padding:56px 8px 12px}
.dapp .nl-pills{display:flex;justify-content:center}
.dapp .nl-pl{flex:none;width:58px;height:14px;margin:0 9px;border-radius:99px;background:var(--d-surf3);animation:none}   /* روی کارت و برگه هم دیده شود */

/* نونو */
.dapp .nl-nn{position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;transform-origin:50% 100%;transition:opacity .35s;will-change:transform}
.dapp .nl-nn.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .dapp .nl-b{animation:none}
}
