/* توكّل — الأوسمة والشارات. يعتمد على متغيرات style.css (يعمل في الوضعين الفاتح والداكن) */
.nb-id{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;vertical-align:middle}
.nb-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nb-av{width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;background:var(--soft);display:inline-grid;place-items:center;font-weight:800}
.nb-av img{width:100%;height:100%;object-fit:cover}
.nb-b{flex:none;display:inline-block;vertical-align:middle;line-height:0}
.nb-b img{display:block;width:100%;height:100%}
.nb-founder{filter:drop-shadow(0 0 3px rgba(240,192,74,.55))}
.nb-founder{cursor:pointer;border-radius:50%}.nb-founder:focus-visible{outline:2px solid #e8b93c;outline-offset:2px}
/* هوية المؤسس في الشريط العلوي */
.nb-hdr{display:flex;justify-content:center;margin-top:2px}
.nb-hid{display:inline-flex;align-items:center;gap:5px;max-width:100%;cursor:pointer;line-height:1.2}
.nb-hn{font-size:11.5px;font-weight:800;color:var(--gold2,#d6b76b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:44vw}
body:not(.dark) .nb-hn{color:#8a5a0a}
.nb-hid:focus-visible{outline:2px solid #e8b93c;outline-offset:2px;border-radius:8px}
body.nb-has-founder .topbar{height:86px}
.nb-hid .nb-b{width:16px;height:16px}
/* بطاقة المؤسس */
.nb-fc{padding:2px 0}
.nb-fbig{width:150px;height:150px}
.nb-fc h2{font-size:21px;margin:6px 0 2px;color:#ffe9a0}
.nb-ft{font-weight:800;color:#e8b93c;margin:2px 0}
.nb-from{margin:0 0 6px;font-size:12.5px;opacity:.9}
.nb-sm img.nb-thumb{width:18px;height:18px}

/* صفحة مجموعتي من الأوسمة */
.nb-hero{position:relative;overflow:hidden;border-radius:24px;padding:20px 18px;margin-bottom:14px;color:#fff6dc;
  background:radial-gradient(120% 140% at 85% 0%,#3a2a0a 0%,#150f03 60%),#150f03;border:1px solid rgba(232,185,60,.35);box-shadow:var(--shadow)}
.nb-hero h1{margin:2px 0 4px;font-size:24px;color:#ffe9a0}
.nb-hero p{margin:0;font-size:13px;opacity:.85}
.nb-sum{display:flex;gap:10px;margin-top:14px}
.nb-sum div{flex:1;background:rgba(255,230,160,.08);border:1px solid rgba(232,185,60,.25);border-radius:14px;padding:8px 10px;text-align:center}
.nb-sum b{display:block;font-size:20px;color:#ffe9a0}
.nb-sum small{font-size:11px;opacity:.8}
.nb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nb-cell{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:18px;padding:12px 6px 10px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:transform .15s ease,border-color .2s;min-width:0}
.nb-cell:active{transform:scale(.96)}
.nb-cell img{width:64px;height:64px}
.nb-cell b{font-size:12.5px;line-height:1.3;overflow-wrap:anywhere}
.nb-cell small{font-size:10.5px;color:var(--muted)}
.nb-cell.nb-lock img{filter:grayscale(1);opacity:.4}
.nb-cell.nb-lock b{color:var(--muted)}
.nb-r-uncommon{border-color:#35b98a66}.nb-r-rare{border-color:#4a98e666}.nb-r-epic{border-color:#a26be366}
.nb-r-legendary{border-color:#f0a53c88}.nb-r-exclusive{border-color:#e8b93caa;box-shadow:0 0 14px rgba(232,185,60,.25)}
.nb-sec{margin:16px 2px 8px;font-size:13px;font-weight:800;color:var(--muted)}
.nb-note{margin:16px 4px 0;font-size:11.5px;color:var(--muted);line-height:1.7}
.nb-snd{display:flex;align-items:center;gap:8px;margin:12px 2px 0;font-size:12.5px;color:var(--muted)}

/* النوافذ: التفاصيل + الاكتساب */
.nb-ov{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(4,8,6,.72);animation:nbf .25s ease both}
.nb-box{position:relative;width:min(340px,100%);border-radius:26px;padding:24px 18px 18px;text-align:center;background:var(--card);color:var(--text);
  border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.45);animation:nbp .35s cubic-bezier(.2,.9,.3,1.2) both;max-height:88vh;overflow:auto}
.nb-box.nb-win{background:radial-gradient(120% 90% at 50% 0%,#2f220a,#120c02);color:#fff6dc;border-color:rgba(232,185,60,.45)}
.nb-box h2{margin:8px 0 4px;font-size:19px}
.nb-box p{margin:6px 0;font-size:13.5px;line-height:1.8;opacity:.92}
.nb-big{width:120px;height:120px;margin:0 auto;display:block}
.nb-win .nb-big{animation:nbz .6s cubic-bezier(.2,.9,.3,1.3) both}
.nb-tag{display:inline-block;margin:4px 0;padding:3px 12px;border-radius:99px;font-size:11.5px;font-weight:800;background:var(--soft);color:var(--primary)}
.nb-win .nb-tag{background:rgba(232,185,60,.18);color:#ffe9a0}
.nb-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:10px 4px 2px}
.nb-bar i{display:block;height:100%;background:linear-gradient(90deg,#35b98a,#e8b93c);border-radius:99px}
.nb-acts{display:flex;gap:8px;margin-top:14px}
.nb-acts .btn{flex:1}
.nb-ps{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.nb-ps i{position:absolute;bottom:42%;left:50%;width:6px;height:6px;border-radius:50%;background:#f0c04a;opacity:0;animation:nbs 1.5s ease-out forwards;animation-delay:var(--dl);--x:0px}
@keyframes nbf{from{opacity:0}to{opacity:1}}
@keyframes nbp{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes nbz{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes nbs{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),-120px) scale(1)}}
@media (prefers-reduced-motion:reduce){.nb-ov,.nb-box,.nb-win .nb-big{animation:none}.nb-ps{display:none}.nb-cell{transition:none}}
@media (max-width:360px){.nb-grid{grid-template-columns:repeat(2,1fr)}}

/* اختصار الأوسمة في الرئيسية (بجوار اختصار الحساب) */
.hp-row{gap:8px;align-items:center}
.nb-hbtn{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line));background:var(--card);color:var(--gold,#c99a2c);box-shadow:var(--shadow);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.nb-hbtn:active{transform:scale(.94)}
.nb-hbtn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.nb-hbtn svg{width:21px;height:21px}
.nb-hdot{position:absolute;top:-4px;inset-inline-start:-4px;min-width:14px;height:14px;padding:0 3px;border-radius:99px;background:#d64545;color:#fff;font-size:9.5px;font-weight:800;line-height:14px;font-style:normal;text-align:center;border:2px solid var(--card);box-sizing:content-box}
/* حين يظهر سطر هوية المؤسس يزداد الشريط العلوي 12px: نعدّل العناصر اللاصقة التي تفترض ارتفاعه */
body.nb-has-founder .st-ctrl{top:86px}
body.nb-has-founder.qibla-lock .screen{height:calc(100% - 86px - 74px - env(safe-area-inset-bottom,0px))}

/* ───────── V2: درجات سبع، فلاتر، حلقة الإنجاز، تقدّم الوسام ───────── */
.nb-t-bronze{--tc:#c27a3e}.nb-t-silver{--tc:#aeb8c9}.nb-t-gold{--tc:#e0b040}.nb-t-platinum{--tc:#7fb4e8}
.nb-t-diamond{--tc:#52d4f5}.nb-t-legendary{--tc:#ff9f4a}.nb-t-secret{--tc:#9b6cf0}
.nb-cell[class*="nb-t-"]{border-color:color-mix(in srgb,var(--tc) 55%,var(--line))}
.nb-cell.nb-got{box-shadow:0 0 0 1px color-mix(in srgb,var(--tc) 30%,transparent),0 6px 18px color-mix(in srgb,var(--tc) 20%,transparent)}
.nb-cell.nb-t-diamond.nb-got,.nb-cell.nb-t-legendary.nb-got,.nb-cell.nb-t-secret.nb-got{box-shadow:0 0 16px color-mix(in srgb,var(--tc) 45%,transparent)}
.nb-cell.nb-lock img{filter:grayscale(.85) brightness(.8);opacity:.55}
.nb-cell.nb-sec-c img{filter:none;opacity:.9}
.nb-cell.nb-sec-c{background:linear-gradient(160deg,color-mix(in srgb,#1d1038 70%,var(--card)),var(--card))}
.nb-mini{display:block;width:78%;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.nb-mini i{display:block;height:100%;background:var(--tc,#35b98a);border-radius:99px}
.nb-pc{font-weight:800;color:var(--tc,var(--muted))!important}
.nb-sec{display:flex;align-items:baseline;justify-content:space-between}
.nb-sec small{font-weight:700;opacity:.8}
.nb-sec-bronze span{color:#c27a3e}.nb-sec-silver span{color:#98a3b6}.nb-sec-gold span{color:#c99a2c}.nb-sec-platinum span{color:#5f9fd8}
.nb-sec-diamond span{color:#27b8dc}.nb-sec-legendary span{color:#e8833a}.nb-sec-secret span{color:#8a5be0}
.nb-ring-row{display:flex;align-items:center;gap:14px;margin-top:14px}
.nb-ring-row .nb-sum{flex:1;margin-top:0}
.nb-ring{--p:0;flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#e8b93c calc(var(--p)*1%),rgba(255,230,160,.14) 0)}
.nb-ring b{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:#150f03;color:#ffe9a0;font-size:17px}
.nb-recent{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nb-rc{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:14px;padding:8px;display:flex;align-items:center;gap:8px;text-align:start;min-width:0}
.nb-rc span{min-width:0;display:flex;flex-direction:column}.nb-rc b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nb-rc small{font-size:10.5px;color:var(--muted)}
.nb-filters{margin:14px 0 4px;display:flex;flex-direction:column;gap:8px}
.nb-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nb-chips::-webkit-scrollbar{display:none}
.nb-chip{appearance:none;flex:none;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:99px;padding:6px 12px;font-size:12px;font-weight:700;white-space:nowrap}
.nb-chip small{opacity:.7;font-weight:600}
.nb-chip.on{background:var(--primary,#0b6b57);color:#fff;border-color:transparent}
.nb-chip:focus-visible,.nb-cell:focus-visible,.nb-rc:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.nb-catsel{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.nb-catsel select{flex:1;min-width:0;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;padding:8px 10px;font:inherit}
.nb-secret-h{color:#b58cff}
.nb-cat{background:transparent;border:1px solid var(--line);color:var(--muted)}
/* نافذة الاكتساب حسب الدرجة */
.nb-box.nb-win[class*="nb-t-"]{border-color:color-mix(in srgb,var(--tc) 70%,transparent);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--tc) 28%,transparent)}
.nb-box.nb-win.nb-t-secret{background:radial-gradient(120% 90% at 50% 0%,#2a1a4d,#08050f)}
.nb-box.nb-win.nb-t-diamond{background:radial-gradient(120% 90% at 50% 0%,#0d3a66,#06142b)}
.nb-box.nb-win.nb-t-legendary{background:radial-gradient(120% 90% at 50% 0%,#5a1220,#1c0509)}
.nb-unl{font-size:11px;letter-spacing:.14em;font-weight:800;color:var(--tc,#e8b93c);opacity:.95}
.nb-win .nb-tag{color:var(--tc,#ffe9a0);background:color-mix(in srgb,var(--tc,#e8b93c) 18%,transparent)}
.nb-burst{position:absolute;inset:-30%;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg at 50% 38%,color-mix(in srgb,var(--tc) 55%,transparent) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle at 50% 38%,#000,transparent 62%);mask:radial-gradient(circle at 50% 38%,#000,transparent 62%);animation:nbr 14s linear infinite}
@keyframes nbr{to{transform:rotate(360deg)}}
.nb-box>*:not(.nb-burst):not(.nb-ps){position:relative}
@media (prefers-reduced-motion:reduce){.nb-burst{animation:none}}
@media (max-width:360px){.nb-recent{grid-template-columns:1fr}.nb-ring-row{flex-direction:column;align-items:stretch}}