/* ══════════════════════════════════════════════════════════════
   تنبيهات الموسم ٣ (‎#ntf‎) + شاشة «اشتراكك خلص» (‎.sbx‎) — js/nu-notify.js
   ما لها أثر قبل الموسم ٣: العناصر ما تنبني إلا لمّا NU.on()
   الحركة كلّها transform/opacity (ما تعيد رسم الصفحة)
   ══════════════════════════════════════════════════════════════ */
#ntf{position:fixed;z-index:9600;display:flex;pointer-events:none;direction:rtl;
  --night:#0a0f2e;--night2:#151c52;--ink:#eef2ff;--silver:#c9d6f2}
.ntf-i{--c:#9fb4ff;position:relative;pointer-events:auto;display:flex;align-items:center;gap:12px;box-sizing:border-box;
  max-width:min(560px,calc(100vw - 24px));color:var(--ink);font:800 15px/1.55 Cairo,Tajawal,sans-serif;cursor:pointer;
  background:linear-gradient(160deg,rgba(21,28,82,.96),rgba(10,15,46,.97));border:1px solid rgba(201,214,242,.2);
  box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent) inset;
  opacity:0;transition:transform .38s cubic-bezier(.2,1.1,.3,1),opacity .28s;will-change:transform,opacity}
.ntf-i.k-ok{--c:#3dff9a}.ntf-i.k-err{--c:#ff6b88}.ntf-i.k-warn{--c:#ffc04a}.ntf-i.k-info{--c:#9fb4ff}
.ntf-i.in{opacity:1}
.ntf-i.deep{opacity:0!important;pointer-events:none}
.ntf-tx{flex:1;min-width:0;overflow-wrap:anywhere}
.ntf-tx a{color:#ffd166;text-decoration:underline}
.ntf-tx b,.ntf-tx strong{color:#fff;font-weight:900}
.ntf-ic{position:relative;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--c);
  background:color-mix(in srgb,var(--c) 16%,transparent)}
.ntf-ic>svg:not(.ntf-ring){width:18px;height:18px}
.ntf-ring{display:none;position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg)}
.ntf-ring circle{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2.5}
.ntf-ring .t{stroke:var(--c);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:0}
.ntf-i.run .ntf-ring .t{animation:ntfRing var(--ms,4400ms) linear forwards}
.ntf-n{flex:none;padding:1px 9px;border-radius:999px;background:var(--c);color:#0a0f2e;font:900 13px/1.6 Oswald,Cairo,sans-serif;direction:ltr}
.ntf-n[hidden]{display:none}
.ntf-bar{position:absolute;inset-inline:22px;bottom:0;height:2px;border-radius:2px;background:var(--c);transform-origin:right center;opacity:.85}
.ntf-i.run .ntf-bar{animation:ntfBar var(--ms,4400ms) linear forwards}
.ntf-i.hold .ntf-bar,.ntf-i.hold .ntf-ring .t{animation-play-state:paused}
.ntf-fx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.ntf-i.bump{animation:ntfBump .3s ease}
@keyframes ntfBar{to{transform:scaleX(0)}}
@keyframes ntfRing{to{stroke-dashoffset:119.4}}
@keyframes ntfBump{40%{filter:brightness(1.35)}}

/* ── أ «شهاب»: كبسولة فوق بالنصّ، يمرّ عليها شهاب وقت الدخول ── */
#ntf[data-s="a"]{top:calc(env(safe-area-inset-top,0px) + 84px);left:0;right:0;flex-direction:column-reverse;align-items:center;gap:8px}
#ntf[data-s="a"] .ntf-i{padding:9px 22px 9px 12px;border-radius:999px;transform:translateY(-22px) scale(.92)}
#ntf[data-s="a"] .ntf-i.in{transform:translateY(0) scale(calc(1 - var(--d,0) * .045));opacity:calc(1 - var(--d,0) * .2)}
#ntf[data-s="a"] .ntf-i.out{transform:translateY(-14px) scale(.9);opacity:0}
#ntf[data-s="a"] .ntf-fx::before{content:"";position:absolute;top:0;bottom:0;right:-45%;width:42%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 45%,#fff 20%) 55%,#fff 62%,transparent 70%);opacity:0}
#ntf[data-s="a"] .ntf-i.in .ntf-fx::before{animation:ntfComet .95s .08s cubic-bezier(.3,.1,.2,1) 1}
@keyframes ntfComet{0%{transform:translateX(0) skewX(-22deg);opacity:0}15%{opacity:.75}100%{transform:translateX(-380%) skewX(-22deg);opacity:0}}

/* ── ب «مدار»: بطاقة بالزاوية، حول الأيقونة حلقة تخلص مع الوقت ── */
#ntf[data-s="b"]{bottom:calc(env(safe-area-inset-bottom,0px) + 22px);inset-inline-start:22px;flex-direction:column;align-items:flex-start;gap:9px;width:min(400px,calc(100vw - 24px))}
body.playing #ntf[data-s="b"]{inset-inline-start:calc(var(--rail-w,0px) + 22px)}
#ntf[data-s="b"] .ntf-i{width:100%;padding:13px 16px 13px 18px;border-radius:20px;gap:15px;transform:translateY(26px) scale(.95);
  background:linear-gradient(150deg,rgba(26,33,94,.97),rgba(9,13,40,.98))}
#ntf[data-s="b"] .ntf-i.in{transform:none;opacity:calc(1 - var(--d,0) * .16)}
#ntf[data-s="b"] .ntf-i.out{transform:translateX(40px);opacity:0}
#ntf[data-s="b"] .ntf-ic{width:40px;height:40px;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 34%,transparent),color-mix(in srgb,var(--c) 8%,transparent))}
#ntf[data-s="b"] .ntf-ring{display:block}
#ntf[data-s="b"] .ntf-bar{display:none}
#ntf[data-s="b"] .ntf-fx::before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;inset-inline-start:-60px;top:-70px;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 22%,transparent),transparent 68%)}

/* ── ج «هلال»: لسان يطلع من طرف الشاشة، وهلال بلون النوع ── */
#ntf[data-s="c"]{top:calc(env(safe-area-inset-top,0px) + 118px);left:0;flex-direction:column;align-items:flex-start;gap:10px;direction:ltr}
#ntf[data-s="c"] .ntf-i{direction:rtl;flex-direction:row-reverse;padding:12px 16px 12px 22px;border-radius:0 18px 18px 0;border-left:0;max-width:min(430px,calc(100vw - 20px));
  transform:translateX(-105%);box-shadow:0 14px 40px rgba(0,0,0,.55),5px 0 0 0 var(--c) inset}
#ntf[data-s="c"] .ntf-i.in{transform:none}
#ntf[data-s="c"] .ntf-i.out{transform:translateX(-105%);opacity:0}
#ntf[data-s="c"] .ntf-ic{width:38px;height:38px;background:transparent;box-shadow:inset -6px 3px 0 0 var(--c);color:var(--c)}
#ntf[data-s="c"] .ntf-ic>svg:not(.ntf-ring){width:16px;height:16px;transform:translate(3px,-1px)}
#ntf[data-s="c"] .ntf-bar{inset-inline:0 18px;transform-origin:left center}
#ntf[data-s="c"] .ntf-tx{text-align:right}

@media (max-width:640px){
  .ntf-i{font-size:14px}
  #ntf[data-s="a"]{top:calc(env(safe-area-inset-top,0px) + 66px)}
  #ntf[data-s="b"]{inset-inline-start:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 78px)}
  #ntf[data-s="c"]{top:calc(env(safe-area-inset-top,0px) + 76px)}
}
html.perf-lite .ntf-fx{display:none}
@media (prefers-reduced-motion:reduce){.ntf-i{transition:opacity .2s}.ntf-fx{display:none}}

/* شريط التجربة — محلّي بس */
.ntf-demo{position:fixed;z-index:9700;bottom:14px;left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;direction:rtl;
  max-width:calc(100vw - 20px);padding:8px 12px;border-radius:16px;background:rgba(5,8,23,.94);border:1px solid rgba(201,214,242,.25);font:800 13px Cairo,sans-serif;color:#c9d6f2}
.ntf-demo b{margin-inline-end:4px;color:#ffd166}
.ntf-demo i{width:1px;height:20px;background:rgba(201,214,242,.25);margin:0 4px}
.ntf-demo button{padding:5px 11px;border-radius:10px;border:1px solid rgba(201,214,242,.25);background:rgba(201,214,242,.08);color:#eef2ff;font:inherit;cursor:pointer}
.ntf-demo button:hover{background:rgba(201,214,242,.18)}
.ntf-demo button.on{background:#ffd166;color:#0a0f2e;border-color:#ffd166}

/* ══════════ شاشة «اشتراكك خلص» ══════════ */
.sbx{position:fixed;inset:0;z-index:9300;display:grid;place-items:center;padding:20px;direction:rtl;overflow:auto;
  background:radial-gradient(120% 90% at 50% 0%,rgba(30,38,110,.9),rgba(5,8,23,.97) 62%);opacity:0;transition:opacity .3s;
  font-family:Cairo,Tajawal,sans-serif;color:#eef2ff}
.sbx.in{opacity:1}
.sbx-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sbx-sky i{position:absolute;inset:-10%;background-repeat:repeat;opacity:.7;
  background-image:radial-gradient(1.4px 1.4px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 110px 80px,#cfe0ff,transparent),radial-gradient(1.6px 1.6px at 170px 140px,#fff,transparent),radial-gradient(1px 1px at 60px 170px,#ffe9b0,transparent);
  background-size:220px 220px}
.sbx-sky i:nth-child(2){background-size:340px 340px;opacity:.5;transform:rotate(18deg)}
.sbx-sky i:nth-child(3){background-size:520px 520px;opacity:.35;transform:rotate(-12deg)}
.sbx-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:44px;width:min(980px,100%);padding:44px 48px;border-radius:32px;
  background:linear-gradient(155deg,rgba(24,31,90,.92),rgba(8,12,38,.96));border:1px solid rgba(201,214,242,.2);
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,209,102,.08) inset;transform:translateY(22px) scale(.97);transition:transform .45s cubic-bezier(.2,1.1,.3,1)}
.sbx.in .sbx-card{transform:none}
/* قمر مخسوف: القرص فضّي والظلّ يغطّيه */
.sbx-moon{position:relative;width:230px;height:230px;border-radius:50%;flex:none}
.sbx-disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 28%,rgba(120,130,170,.55) 0 9%,transparent 10%),radial-gradient(circle at 62% 60%,rgba(120,130,170,.45) 0 12%,transparent 13%),radial-gradient(circle at 70% 26%,rgba(120,130,170,.4) 0 6%,transparent 7%),radial-gradient(circle at 36% 72%,rgba(120,130,170,.4) 0 7%,transparent 8%),radial-gradient(circle at 35% 30%,#f4f7ff,#aab6dc 70%,#7d89b6);
  box-shadow:0 0 70px rgba(170,190,255,.35)}
.sbx-shade{position:absolute;inset:-2px;border-radius:50%;background:radial-gradient(circle at 60% 45%,rgba(60,18,30,.96),rgba(8,10,30,.97) 70%);transform:translateX(105%);transition:transform 1.3s .25s cubic-bezier(.4,0,.2,1);box-shadow:0 0 40px rgba(255,90,90,.25) inset}
.sbx-moon{overflow:hidden;box-shadow:0 0 0 2px rgba(201,214,242,.18),0 0 80px rgba(120,140,255,.25)}
.sbx.in .sbx-shade{transform:translateX(12%)}
.sbx-lock{position:absolute;inset:0;display:grid;place-items:center;color:#ffd166;opacity:0;transform:scale(.6);transition:opacity .4s 1.2s,transform .5s 1.2s cubic-bezier(.2,1.4,.4,1)}
.sbx-lock svg{width:64px;height:64px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.sbx.in .sbx-lock{opacity:1;transform:translateX(6%) scale(1)}
.sbx-k{display:inline-block;padding:3px 14px;border-radius:999px;background:rgba(255,209,102,.14);border:1px solid rgba(255,209,102,.4);color:#ffd166;font-weight:900;font-size:14px}
.sbx-body h2{margin:12px 0 6px;font-size:clamp(30px,4.4vw,50px);font-weight:900;line-height:1.25;color:#fff}
.sbx-body p{margin:0 0 14px;font-size:18px;font-weight:700;color:#c9d6f2}
.sbx-keep{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 20px;padding:0;list-style:none;font-size:15px;font-weight:800;color:#dfe6ff}
.sbx-keep li{display:flex;align-items:center;gap:6px}
.sbx-keep svg{width:17px;height:17px;color:#3dff9a}
.sbx-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:20px}
.sbx-p{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px 16px 13px;border-radius:18px;border:1.5px solid rgba(201,214,242,.22);background:rgba(201,214,242,.06);
  color:#eef2ff;font:inherit;text-align:right;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.sbx-p:hover{transform:translateY(-2px);border-color:rgba(201,214,242,.5)}
.sbx-p.on{border-color:#ffd166;background:rgba(255,209,102,.1);box-shadow:0 0 0 3px rgba(255,209,102,.14)}
.sbx-p b{font-size:17px;font-weight:900}
.sbx-p .pr{font-size:14px;font-weight:800;color:#c9d6f2}
.sbx-p .pr strong{font:900 30px/1.2 Oswald,Cairo,sans-serif;color:#fff;margin-inline-end:6px}
.sbx-p small{font-size:12.5px;font-weight:800;color:#3dff9a}
.sbx-p em{position:absolute;top:-11px;inset-inline-end:12px;padding:1px 10px;border-radius:999px;background:#ffd166;color:#0a0f2e;font-style:normal;font-size:12px;font-weight:900}
.sbx-p em.g{background:#3dff9a}
.sbx-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.sbx-wa{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:16px;background:linear-gradient(180deg,#3be37a,#1fb85a);color:#04210f;font-size:19px;font-weight:900;text-decoration:none;
  box-shadow:0 10px 30px rgba(37,211,102,.35);transition:transform .2s,filter .2s}
.sbx-wa:hover{transform:translateY(-2px);filter:brightness(1.07)}
.sbx-wa svg{width:26px;height:26px}
.sbx-later{padding:13px 22px;border-radius:16px;border:1px solid rgba(201,214,242,.3);background:transparent;color:#c9d6f2;font:800 16px Cairo,sans-serif;cursor:pointer}
.sbx-later:hover{background:rgba(201,214,242,.1);color:#fff}
.sbx-foot{display:block;margin-top:14px;font-size:13.5px;font-weight:700;color:#9aa6cf}
@media (max-width:820px){
  .sbx{padding:12px;place-items:start center}
  .sbx-card{grid-template-columns:1fr;justify-items:center;gap:18px;padding:26px 20px;border-radius:24px;text-align:center}
  .sbx-moon{width:130px;height:130px}.sbx-lock svg{width:40px;height:40px}
  .sbx-keep,.sbx-act{justify-content:center}
  .sbx-plans{grid-template-columns:1fr}
  .sbx-p{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;text-align:right}
  .sbx-p small{flex-basis:100%}
  .sbx-wa{width:100%;justify-content:center}
  .sbx-later{width:100%}
}
@media (prefers-reduced-motion:reduce){.sbx-shade,.sbx-lock,.sbx-card{transition:none}}