/* ============================================================
   DRAGON STORE — Discord Nitro Step Guide
   ملف واحد: HTML + CSS + JS | عربي RTL | Dark Dragon Theme
   ربط الواتساب في متغير WHATSAPP_NUMBER بأعلى الـ <script>
   ============================================================ */

:root{
  --bg-0:#080A0F;
  --bg-1:#0B0E14;
  --bg-2:#11141C;
  --bg-3:#171B25;
  --panel:#141823;
  --panel-2:#1B2030;
  --line:#262C3A;
  --line-strong:#36405A;

  --txt:#EEF1F8;
  --txt-dim:#A9B2C6;
  --txt-faint:#6B7488;

  --discord:#5865F2;
  --discord-2:#7048E8;
  --fire-1:#FF6A2B;   /* نار التنين */
  --fire-2:#FF3D3D;
  --fire-glow:rgba(255,106,43,.45);

  --ok:#27E07A;        /* أخضر نيون آمن (TRY) */
  --ok-soft:rgba(39,224,122,.12);
  --ok-line:rgba(39,224,122,.5);

  --danger:#FF4D4D;    /* خطر / USD */
  --danger-soft:rgba(255,77,77,.10);
  --danger-line:rgba(255,77,77,.55);

  --warn:#F0A000;
  --warn-soft:rgba(240,160,0,.10);

  --info:#4DA8FF;      /* أزرق هادئ — لا تخاف من Cancel */
  --info-soft:rgba(77,168,255,.10);
  --info-line:rgba(77,168,255,.5);

  --r-lg:22px;
  --r-md:16px;
  --r-sm:11px;

  --shadow-card:0 18px 50px -22px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.02) inset;
  --ff-display:"Cairo",system-ui,sans-serif;
  --ff-body:"Tajawal",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--ff-body);
  background:var(--bg-1);
  color:var(--txt);
  line-height:1.85;
  overflow-x:hidden;
  position:relative;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}

/* ---------- خلفية: قشور تنين + دخان ---------- */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bg-fx::before{
  content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(60% 50% at 80% -5%, rgba(112,72,232,.20), transparent 60%),
    radial-gradient(55% 45% at 10% 8%, rgba(255,106,43,.13), transparent 60%),
    radial-gradient(70% 60% at 50% 110%, rgba(88,101,242,.12), transparent 60%);
  filter:blur(8px);
}
.bg-fx .scales{
  position:absolute;inset:0;opacity:.05;
  background-image:radial-gradient(circle at 50% 0, var(--line-strong) 0 1px, transparent 1.6px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.bg-fx .grain{
  position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- إطار التطبيق ---------- */
.app{
  position:relative;z-index:1;
  max-width:560px;margin:0 auto;
  min-height:100dvh;
  display:flex;flex-direction:column;
  padding:0 16px calc(140px + env(safe-area-inset-bottom));
}

/* ---------- الهيدر ---------- */
.brandbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:11px;
  padding:14px 4px 12px;
  background:linear-gradient(180deg,var(--bg-1) 60%,transparent);
  backdrop-filter:blur(4px);
}
.crest{
  width:42px;height:42px;flex:none;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#20140e,#2a0f12);
  border:1px solid rgba(255,106,43,.4);
  box-shadow:0 0 22px -6px var(--fire-glow), inset 0 0 12px -6px var(--fire-1);
  font-size:22px;
}
.brand-txt{display:flex;flex-direction:column;line-height:1.25;}
.brand-txt b{font-family:var(--ff-display);font-weight:900;font-size:16px;letter-spacing:.3px;}
.brand-txt span{font-size:11.5px;color:var(--txt-faint);font-weight:500;}
.brand-spacer{flex:1;}
.brand-help{
  font-size:12px;color:var(--txt-dim);background:var(--panel-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 12px;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-weight:700;
}
.brand-help:active{transform:scale(.96);}

/* ---------- لافتة العملة الثابتة ---------- */
.currency-bar{
  position:sticky;top:62px;z-index:25;
  margin:2px 0 14px;
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:14px;
  background:linear-gradient(100deg,rgba(39,224,122,.14),rgba(112,72,232,.10));
  border:1px solid var(--ok-line);
  box-shadow:0 0 0 1px rgba(39,224,122,.08), 0 10px 30px -18px rgba(39,224,122,.5);
}
.currency-bar .shield{font-size:20px;flex:none;filter:drop-shadow(0 0 6px var(--ok));}
.currency-bar p{font-size:12.5px;font-weight:700;color:var(--txt);}
.currency-bar b{color:var(--ok);font-family:var(--ff-display);font-weight:900;
  text-shadow:0 0 10px rgba(39,224,122,.7);letter-spacing:.5px;}
.currency-bar .x{color:var(--danger);text-decoration:line-through;font-weight:800;}

/* ---------- شاشات ---------- */
.screen{display:none;animation:rise .42s cubic-bezier(.2,.8,.2,1);}
.screen.active{display:block;}
@keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

/* ---------- بطاقة عامة ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px 18px;
  box-shadow:var(--shadow-card);
}
.card+.card{margin-top:14px;}

/* ============ شاشة المقدمة ============ */
.hero{text-align:center;padding-top:8px;}
.hero .kicker{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:800;color:var(--fire-1);
  background:rgba(255,106,43,.10);border:1px solid rgba(255,106,43,.3);
  padding:6px 14px;border-radius:999px;margin-bottom:18px;letter-spacing:.4px;
}
.hero h1{
  font-family:var(--ff-display);font-weight:900;font-size:30px;line-height:1.35;
  margin-bottom:10px;
  background:linear-gradient(120deg,#fff 30%,#cdb6ff 70%,var(--fire-1));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .sub{color:var(--txt-dim);font-size:14.5px;max-width:430px;margin:0 auto 4px;}

/* بانر التهديد العلوي */
.threat{
  margin-top:20px;border-radius:var(--r-md);overflow:hidden;
  border:2px solid var(--danger);
  background:
    linear-gradient(180deg,rgba(255,77,77,.14),rgba(255,77,77,.04));
  box-shadow:0 0 36px -12px var(--danger), 0 0 0 1px rgba(255,77,77,.2) inset;
  position:relative;
}
.threat::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,transparent,transparent 16px,rgba(255,77,77,.05) 16px,rgba(255,77,77,.05) 32px);
}
.threat-head{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(90deg,var(--danger),#C92A2A);
  padding:12px 15px;position:relative;
}
.threat-head .sk{font-size:21px;filter:drop-shadow(0 0 4px rgba(0,0,0,.4));}
.threat-head h3{font-family:var(--ff-display);font-weight:900;font-size:15.5px;color:#fff;line-height:1.4;}
.threat-body{padding:14px 15px 16px;position:relative;}
.threat-body .line{
  display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--txt);
  line-height:1.7;padding:8px 0;border-bottom:1px dashed rgba(255,77,77,.18);
}
.threat-body .line:last-child{border-bottom:none;}
.threat-body .line .x{color:var(--danger);font-size:16px;flex:none;margin-top:1px;font-weight:900;}
.threat-body .line b{color:#FF8585;font-weight:800;}
.threat-foot{
  background:rgba(255,77,77,.12);border-top:1px solid rgba(255,77,77,.25);
  padding:11px 15px;font-size:13px;font-weight:800;color:#FFB3B3;text-align:center;
  position:relative;
}

.step0-title{
  font-family:var(--ff-display);font-weight:800;font-size:18px;margin:26px 4px 4px;
  display:flex;align-items:center;gap:9px;
}
.step0-title .n{
  width:26px;height:26px;border-radius:8px;background:var(--discord);
  display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;flex:none;
}

/* ============ بطاقات اختيار الحالة ============ */
.state-grid{display:grid;gap:12px;margin-top:14px;}
.state-card{
  position:relative;text-align:right;cursor:pointer;
  background:var(--panel);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:15px 15px 15px 14px;
  display:flex;gap:13px;align-items:flex-start;
  transition:transform .15s, border-color .2s, box-shadow .25s;
  overflow:hidden;
}
.state-card::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;
  background:var(--sc,#666);
}
.state-card:active{transform:scale(.985);}
.state-card:hover{border-color:var(--sc);box-shadow:0 0 0 1px var(--sc), 0 12px 30px -18px var(--sc);}
.state-emoji{
  width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;
  font-size:24px;background:var(--bg-3);border:1px solid var(--line);
}
.state-body{flex:1;min-width:0;}
.state-body h3{font-family:var(--ff-display);font-weight:800;font-size:15.5px;margin-bottom:3px;}
.state-key{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.4px;
  color:var(--sc);background:color-mix(in srgb,var(--sc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--sc) 40%,transparent);
  padding:2px 8px;border-radius:6px;margin-bottom:7px;direction:ltr;
}
.state-body p{font-size:12.5px;color:var(--txt-dim);line-height:1.6;}
.state-card .go{align-self:center;color:var(--txt-faint);font-size:20px;flex:none;}

.unsure{
  margin-top:16px;display:flex;flex-direction:column;gap:10px;align-items:center;
  text-align:center;
}
.unsure p{font-size:13px;color:var(--txt-dim);}

/* ============ شاشة الخطوات ============ */
.flow-head{
  display:flex;align-items:center;gap:11px;margin-bottom:4px;padding:2px;
}
.flow-badge{
  width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;
  font-size:21px;background:var(--bg-3);border:1px solid var(--line);
}
.flow-head h2{font-family:var(--ff-display);font-weight:800;font-size:16px;line-height:1.4;}
.flow-head .leave{
  margin-inline-start:auto;font-size:12px;color:var(--txt-faint);
  background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
  padding:6px 11px;cursor:pointer;font-weight:700;
}

/* مؤشر التقدّم — سلسلة قشور */
.progress{display:flex;align-items:center;gap:6px;margin:14px 2px 4px;flex-wrap:wrap;}
.scale-dot{
  flex:1;min-width:8px;height:7px;border-radius:6px;background:var(--line);
  transition:background .3s, box-shadow .3s;
}
.scale-dot.done{background:linear-gradient(90deg,var(--fire-2),var(--fire-1));}
.scale-dot.cur{background:var(--discord);box-shadow:0 0 10px var(--discord);}
.progress-txt{font-size:12px;color:var(--txt-faint);margin:6px 2px 14px;font-weight:700;}
.progress-txt b{color:var(--txt-dim);}

/* بطاقة الخطوة */
.step-card{min-height:200px;}
.step-num{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;color:var(--discord-2);margin-bottom:11px;
}
.step-num .dot{width:7px;height:7px;border-radius:50%;background:var(--discord-2);box-shadow:0 0 8px var(--discord-2);}
.step-card h3{font-family:var(--ff-display);font-weight:800;font-size:20px;line-height:1.45;margin-bottom:13px;}
.step-body{font-size:15px;color:var(--txt-dim);white-space:pre-line;line-height:1.95;}
.step-body strong, .step-body b{color:var(--txt);font-weight:800;}

/* صناديق دلالية */
.note{
  margin-top:16px;border-radius:var(--r-md);padding:14px 14px;
  display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.8;
  white-space:pre-line;
}
.note .ic{font-size:20px;flex:none;margin-top:1px;}
.note.crit{background:var(--danger-soft);border:1.5px solid var(--danger-line);
  box-shadow:0 0 24px -12px var(--danger);}
.note.crit b{color:var(--danger);}
.note.info{background:var(--info-soft);border:1.5px solid var(--info-line);}
.note.info b{color:var(--info);}
.note .ntxt{flex:1;color:var(--txt);}
.note .ntxt b{font-weight:800;}

/* placeholder للصور */
.img-slot{
  margin-top:16px;border:2px dashed var(--line-strong);border-radius:var(--r-md);
  background:repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 12px,var(--bg-3) 12px,var(--bg-3) 24px);
  padding:22px 16px;text-align:center;color:var(--txt-faint);
}
.img-slot .ph-ic{font-size:26px;opacity:.7;}
.img-slot p{font-size:12.5px;margin-top:6px;line-height:1.6;}
.img-slot img{max-width:100%;border-radius:10px;display:block;}

/* ============ شاشة العملة الحاجزة ============ */
.gate{text-align:center;}
.gate .stopsign{
  font-size:48px;margin-bottom:4px;
  animation:pulseRed 1.6s ease-in-out infinite;
}
@keyframes pulseRed{0%,100%{filter:drop-shadow(0 0 0 rgba(255,77,77,0));}50%{filter:drop-shadow(0 0 16px rgba(255,77,77,.8));}}
.gate h3{font-family:var(--ff-display);font-weight:900;font-size:21px;margin-bottom:8px;}
.gate .lead{font-size:14px;color:var(--txt-dim);margin-bottom:18px;}

.cur-display{
  display:flex;gap:12px;margin:18px 0;
}
.cur-chip{
  flex:1;border-radius:var(--r-md);padding:18px 10px;border:1.5px solid var(--line);
  background:var(--bg-2);
}
.cur-chip .lbl{font-size:11px;color:var(--txt-faint);font-weight:700;margin-bottom:8px;}
.cur-chip .big{font-family:var(--ff-display);font-weight:900;font-size:34px;direction:ltr;line-height:1;}
.cur-chip.good{border-color:var(--ok-line);background:var(--ok-soft);}
.cur-chip.good .big{color:var(--ok);text-shadow:0 0 18px rgba(39,224,122,.7);}
.cur-chip.good .lbl{color:var(--ok);}
.cur-chip.bad{border-color:var(--danger-line);background:var(--danger-soft);}
.cur-chip.bad .big{color:var(--danger);text-decoration:line-through;}
.cur-chip.bad .lbl{color:var(--danger);}

.gate-q{font-size:15px;font-weight:800;color:var(--txt);margin:8px 0 14px;}
.gate-choices{display:grid;gap:11px;}
.gate-btn{
  border:1.5px solid var(--line);border-radius:var(--r-md);padding:15px;
  font-family:var(--ff-body);font-size:15px;font-weight:800;cursor:pointer;
  background:var(--panel-2);color:var(--txt);text-align:right;
  display:flex;align-items:center;gap:11px;transition:transform .12s,border-color .2s;
}
.gate-btn .gic{font-size:22px;flex:none;}
.gate-btn:active{transform:scale(.98);}
.gate-btn.yes:hover{border-color:var(--ok-line);background:var(--ok-soft);}
.gate-btn.no:hover{border-color:var(--danger-line);background:var(--danger-soft);}

.gate-alarm{
  display:none;margin-top:18px;border-radius:var(--r-md);
  border:2px solid var(--danger);background:var(--danger-soft);
  padding:18px 16px;text-align:right;
  box-shadow:0 0 40px -12px var(--danger);
  animation:shake .5s;
}
.gate-alarm.show{display:block;}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(7px);}60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}
.gate-alarm h4{font-family:var(--ff-display);font-weight:900;font-size:18px;color:var(--danger);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.gate-alarm ol{margin:10px 14px 0 0;padding:0;font-size:14px;color:var(--txt);line-height:2;}
.gate-alarm ol li{margin-bottom:2px;}
.gate-alarm .fixbox{
  margin-top:14px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:12px;font-size:13.5px;color:var(--txt-dim);
}
.gate-alarm .fixbox b{color:var(--ok);}

.gate-pass{
  display:none;margin-top:18px;border-radius:var(--r-md);
  border:2px solid var(--ok-line);background:var(--ok-soft);
  padding:18px 16px;text-align:center;
}
.gate-pass.show{display:block;animation:rise .4s;}
.gate-pass .chk{font-size:42px;}
.gate-pass h4{font-family:var(--ff-display);font-weight:900;font-size:18px;color:var(--ok);margin:6px 0 4px;}
.gate-pass p{font-size:13.5px;color:var(--txt-dim);}

/* ============ شاشة النهاية ============ */
.done{text-align:center;padding:14px 4px;}
.done .burst{font-size:64px;animation:pop .6s cubic-bezier(.2,1.4,.4,1);}
@keyframes pop{from{transform:scale(0) rotate(-20deg);opacity:0;}to{transform:none;opacity:1;}}
.done h2{font-family:var(--ff-display);font-weight:900;font-size:26px;margin:10px 0 8px;
  background:linear-gradient(120deg,var(--ok),#7CFFB0);-webkit-background-clip:text;background-clip:text;color:transparent;}
.done .dsub{color:var(--txt-dim);font-size:14.5px;margin-bottom:8px;}
.done .recap{text-align:right;margin-top:18px;display:grid;gap:9px;}
.recap-item{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--txt-dim);
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:11px 13px;}
.recap-item .ck{color:var(--ok);font-size:17px;flex:none;}

/* ============ شريط التنقّل السفلي ============ */
.navbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:linear-gradient(0deg,var(--bg-0) 70%,transparent);
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  display:none;
}
.navbar.show{display:block;}
.navbar-inner{max-width:560px;margin:0 auto;display:flex;gap:11px;}
.btn{
  font-family:var(--ff-display);font-weight:800;font-size:16px;cursor:pointer;
  border-radius:14px;padding:15px 18px;border:none;display:flex;align-items:center;
  justify-content:center;gap:9px;transition:transform .12s,opacity .2s,box-shadow .2s;
}
.btn:active{transform:scale(.97);}
.btn-prev{flex:none;background:var(--panel-2);color:var(--txt-dim);border:1px solid var(--line);min-width:58px;}
.btn-next{flex:1;background:linear-gradient(120deg,var(--discord),var(--discord-2));color:#fff;
  box-shadow:0 12px 30px -12px var(--discord);}
.btn-next.fire{background:linear-gradient(120deg,var(--fire-1),var(--fire-2));box-shadow:0 12px 30px -12px var(--fire-1);}
.btn-next.ok{background:linear-gradient(120deg,#1FB866,var(--ok));box-shadow:0 12px 30px -12px var(--ok);}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4);box-shadow:none;}
.btn-lock{position:relative;}

/* زر واتساب */
.wa-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-top:16px;text-decoration:none;
  background:linear-gradient(120deg,#1FAF55,#25D366);color:#04210f;
  font-family:var(--ff-display);font-weight:900;font-size:15.5px;
  padding:15px;border-radius:14px;box-shadow:0 12px 30px -14px #25D366;
}
.wa-btn:active{transform:scale(.98);}
.wa-btn svg{width:21px;height:21px;flex:none;}
.wa-inline{margin-top:14px;}

/* مودال المساعدة */
.modal-bg{
  position:fixed;inset:0;z-index:90;background:rgba(4,6,10,.78);backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-bg.show{display:flex;animation:rise .25s;}
.modal{
  max-width:420px;width:100%;background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-card);
}
.modal h3{font-family:var(--ff-display);font-weight:900;font-size:18px;margin-bottom:12px;display:flex;align-items:center;gap:9px;}
.modal p{font-size:13.5px;color:var(--txt-dim);line-height:1.8;margin-bottom:8px;}
.modal .x{float:left;cursor:pointer;color:var(--txt-faint);font-size:22px;line-height:1;}

/* تنبيه إكمال خطوة حرجة */
.ack{
  margin-top:14px;display:flex;gap:11px;align-items:center;cursor:pointer;
  background:var(--bg-2);border:1.5px solid var(--line-strong);border-radius:var(--r-md);
  padding:13px 14px;user-select:none;transition:border-color .2s,background .2s;
}
.ack:active{transform:scale(.99);}
.ack.checked{border-color:var(--ok-line);background:var(--ok-soft);}
.ack .box{
  width:24px;height:24px;border-radius:7px;border:2px solid var(--line-strong);flex:none;
  display:grid;place-items:center;font-size:15px;color:transparent;transition:.2s;
}
.ack.checked .box{background:var(--ok);border-color:var(--ok);color:#04210f;}
.ack span{font-size:13.5px;font-weight:700;color:var(--txt-dim);}
.ack.checked span{color:var(--txt);}

.tiny{font-size:11px;color:var(--txt-faint);text-align:center;margin:22px 0 4px;line-height:1.7;}