/* توكّل — الأوسمة والشارات. يعتمد على متغيرات 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-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}