/* ============================================================================
   ستايلات «إطار الاسم» — الجزء الثاني من بكج البادج (الأول: إطار الصورة .afr)
   كل إطار معزول تحت .nfr--<key> بمتغيّراته وkeyframes الخاصة به فلا يتصادم مع غيره.
   الفرق عن إطار الصورة: لا مقاس ثابت ولا تقييس — اللوح ينمو مع طول الاسم،
   فالأبعاد كلها بـem تتبع حجم خط الاسم اللي يضبطه الستريمر في إعدادات الإجراء.
   إعادة التلوين بنفس آلية إطار الصورة: --nfr-h (الدرجة) و--nfr-sm (معامل الإشباع).
   ============================================================================ */

/* الحاوية: سطر واحد يلفّ عنصر الاسم، والزخارف طبقات مطلقة خلفه/حوله. */
.nfr{position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;isolation:isolate}
/* --nfr-ink يضبطه centerInk في الجافاسكربت: إزاحة توسّط حروف الاسم لا صندوقه */
.nfr__txt{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  transform:translateY(var(--nfr-ink,0))}
.nfr [class^="nfr__"]:not(.nfr__txt){pointer-events:none}

/* ===== تحييد طبقات الإجراء داخل أي لوح بكج (مشترك لكل التصاميم) =====
   عنصر الاسم في الإجراء يرسم طبقتين فوق بعض: نصّ أساسي، وطبقة لمعان (__fx)
   بتدرّج الموقع البنفسجي — وكلاهما يهتزّ رأسيًا بـactionNameBob.
   داخل البكج يتضاربان مع تصميمه:
     • طبقة اللمعان ترسم تدرّج الموقع فوق تدرّج البكج فيظهر الاسم مرتين.
     • الهزّة (‎-4px‎) ترفع النصّ عن مركز اللوح نصف الوقت.
     • توهّج actionNameGlow يضيف ظلًّا بنفسجيًا غريبًا عن هوية البكج.
   البكج يملك شكل اسمه، فنُلغي الثلاثة. (يبقى actionNameIn — مجرّد ظهور تدريجي.) */
.nfr .action-name__fx{display:none!important}
.nfr .action-name__base{animation:none!important}
.nfr .action-name{filter:none!important}

/* ═══════════ royal — اللوح الملكي ═══════════
   منقول من تصميم المالك (royal-frame.html). التعديل الإلزامي الوحيد: كل الأبعاد
   حُوّلت من px إلى em بنسبها الأصلية (المرجع 29px) — اللوح ينمو مع طول الاسم
   ويتبع حجم الخط الذي يضبطه الستريمر، فمقاس ثابت كان يقصّ الأسماء الطويلة.
   حُذف عرض/ارتفاع الحاوية الثابتان وtranslateX(50%) (كانا للتوسيط في صفحة العرض). */
.nfr--royal{
  --gold:#dcae3e; --gold-light:#fff0a8;
  position:relative;padding:.15em 1.35em;
  animation:nameFloat__royal 4s ease-in-out infinite;
}
.nfr--royal .name-wing{position:absolute;top:50%;z-index:0;color:#d9a936;
  font-size:1.76em;line-height:1;filter:drop-shadow(0 .17em .17em rgba(0,0,0,.6))}
.nfr--royal .name-wing.right{right:0;transform:translateY(-50%) rotate(-14deg)}
.nfr--royal .name-wing.left{left:0;transform:translateY(-50%) scaleX(-1) rotate(-14deg)}
.nfr--royal .name-border{position:relative;z-index:1;display:grid;place-items:center;
  padding:.17em;overflow:hidden;border-radius:.62em .62em .9em .9em;
  background:linear-gradient(135deg,#79500c,#ffef9b 26%,#a96e17 52%,#f8d66c 76%,#704407);
  box-shadow:0 .45em .9em rgba(0,0,0,.45),0 0 0 .07em #6c3c08,
             0 0 .59em rgba(232,181,50,.18),inset 0 .035em rgba(255,251,202,.9)}
.nfr--royal .name-border::before{content:"";position:absolute;top:-45%;left:-38%;
  width:26%;height:190%;z-index:3;transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,232,.72),transparent);
  animation:nameShine__royal 4.5s ease-in-out infinite;pointer-events:none}
.nfr--royal .name-plaque{position:relative;display:flex;align-items:center;justify-content:center;
  gap:.45em;padding:.42em 1.1em;overflow:hidden;
  border:.04em solid rgba(255,231,152,.48);border-radius:.45em .45em .72em .72em;
  background:radial-gradient(circle at 50% 20%,rgba(255,224,127,.14),transparent 43%),
             linear-gradient(180deg,#681427,#330812 72%,#21040a);
  box-shadow:inset 0 0 .62em rgba(0,0,0,.65),inset 0 .035em rgba(255,245,205,.12)}
.nfr--royal .name-plaque::after{content:"";position:absolute;right:15%;bottom:.24em;left:15%;
  height:1px;background:linear-gradient(90deg,transparent,rgba(239,192,73,.7),transparent)}
.nfr--royal .name-gem{color:#e4b23a;font-size:.34em;text-shadow:0 0 .27em rgba(255,213,92,.8)}
/* نصّ الاسم يلبس هوية البكج كاملة (خط + تدرّج ذهب): نجعل الأبناء شفافين ليظهر
   تدرّج .nfr__txt خلالهم. important لأن الإجراء يضبط الخط واللون inline من إعدادات
   الستريمر — والبكج المملوك يفوز، فالمشاهد دفع مقابل شكل بعينه ولازم يُضمن له.
   (حجم الخط يبقى للستريمر — البكج يتبعه بالـem.) */
.nfr--royal .nfr__txt,.nfr--royal .nfr__txt *{
  text-shadow:none!important;
  font-family:Georgia,"Times New Roman",Tahoma,serif!important;font-weight:700!important}
/* التدرّج على العنصر الحامل للنصّ نفسه لا على الحاوية: عنصر الاسم في الإجراء له
   أنيميشن ⇒ سياق تكديس خاصّ، فقصّ الحاوية (background-clip:text) لا يلتقط حروفه
   ويختفي الاسم. نغطّي الحالتين: .pv__nm في المتجر و.action-name__base في الإجراء. */
.nfr--royal .nfr__txt,.nfr--royal .pv__nm,.nfr--royal .action-name__base{
  background:linear-gradient(180deg,#fff7c7,#e7b942 58%,#a16c16);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 .07em .17em rgba(0,0,0,.7))}
@keyframes nameFloat__royal{0%,100%{transform:translateY(0)}50%{transform:translateY(-.14em)}}
@keyframes nameShine__royal{0%,30%{left:-38%;opacity:0}42%{opacity:1}65%,100%{left:116%;opacity:0}}

/* ═══════════ luxury — اللوح الفاخر ═══════════
   منقول من luxury-nameplate. التعديلات الإلزامية:
   • الأبعاد px → em بنسبها الأصلية (مرجع 46px) فينمو مع الاسم ويتبع حجم الخط،
     وحُذف width:clamp(280px,72vw,560px) — العرض يتبع الاسم لا النافذة.
   • مواقع الغبار الأربعة عشر ثُبّتت (كانت Math.random ⇒ شكل مختلف كل تحميل).
   • حُذف .subtitle (كان حقل لقب اختياريًا في صفحة العرض) وسكافولدنق العرض. */
.nfr--luxury{
  --gold-deep:#6e4e1e; --gold-mid:#b98d3e; --gold-bright:#f3dd9a;
  --gold-white:#fff7e2; --band:.13em;
  position:relative;padding:.42em .5em;
}
.nfr--luxury .aura{position:absolute;inset:0;margin:auto;z-index:0;width:80%;height:64%;
  border-radius:999px;
  background:radial-gradient(circle,rgba(243,221,154,.5),rgba(201,160,74,.24) 46%,transparent 72%);
  filter:blur(20px);animation:pulse__luxn 3.8s ease-in-out infinite}
.nfr--luxury .particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.nfr--luxury .dust{position:absolute;width:.11em;height:.11em;border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(243,221,154,.8) 40%,transparent 70%);
  animation:drift__luxn linear infinite}
.nfr--luxury .dust:nth-child(1){left:6%;top:68%;animation-duration:5.3s;animation-delay:-1.2s;opacity:.7}
.nfr--luxury .dust:nth-child(2){left:19%;top:85%;animation-duration:6.9s;animation-delay:-4.3s;opacity:.52}
.nfr--luxury .dust:nth-child(3){left:32%;top:59%;animation-duration:4.5s;animation-delay:-2.8s;opacity:.88}
.nfr--luxury .dust:nth-child(4){left:45%;top:92%;animation-duration:7.7s;animation-delay:-0.7s;opacity:.46}
.nfr--luxury .dust:nth-child(5){left:57%;top:74%;animation-duration:5.8s;animation-delay:-5.1s;opacity:.81}
.nfr--luxury .dust:nth-child(6){left:70%;top:63%;animation-duration:6.2s;animation-delay:-3.4s;opacity:.62}
.nfr--luxury .dust:nth-child(7){left:83%;top:88%;animation-duration:4.8s;animation-delay:-1.7s;opacity:.94}
.nfr--luxury .dust:nth-child(8){left:95%;top:66%;animation-duration:8.1s;animation-delay:-4.9s;opacity:.49}
.nfr--luxury .dust:nth-child(9){left:12%;top:79%;animation-duration:5.4s;animation-delay:-0.4s;opacity:.75}
.nfr--luxury .dust:nth-child(10){left:25%;top:96%;animation-duration:7.2s;animation-delay:-2.1s;opacity:.58}
.nfr--luxury .dust:nth-child(11){left:39%;top:71%;animation-duration:4.7s;animation-delay:-5.7s;opacity:.86}
.nfr--luxury .dust:nth-child(12){left:52%;top:61%;animation-duration:6.5s;animation-delay:-3.9s;opacity:.41}
.nfr--luxury .dust:nth-child(13){left:65%;top:90%;animation-duration:5.9s;animation-delay:-1.3s;opacity:.79}
.nfr--luxury .dust:nth-child(14){left:78%;top:76%;animation-duration:7.4s;animation-delay:-4.6s;opacity:.66}
.nfr--luxury .plate{position:relative;z-index:2;border-radius:999px;overflow:hidden;isolation:isolate;
  animation:float__luxn 7s ease-in-out infinite,breathe__luxn 4.6s ease-in-out infinite}
.nfr--luxury .metal{position:absolute;top:50%;left:50%;width:140%;aspect-ratio:1;
  transform:translate(-50%,-50%);z-index:1;
  background:conic-gradient(from 0deg,#6e4e1e,#b98d3e,#f3dd9a,#fff7e2,#f3dd9a,#b98d3e,
    #4d3512,#b98d3e,#f3dd9a,#ffefc2,#f3dd9a,#b98d3e,#6e4e1e);
  animation:spinC__luxn 15s linear infinite}
.nfr--luxury .spec{position:absolute;top:50%;left:50%;width:140%;aspect-ratio:1;
  transform:translate(-50%,-50%);z-index:2;opacity:.9;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,transparent 0deg 45deg,
    rgba(255,250,232,.6) 62deg,#fff 68deg,rgba(255,250,232,.6) 74deg,transparent 92deg 360deg);
  animation:spinC__luxn 8s linear infinite reverse}
.nfr--luxury .inner{position:relative;z-index:4;margin:var(--band);border-radius:999px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:.22em .57em;
  background:radial-gradient(120% 160% at 50% 0%,#1b1710,#0c0b0f 72%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 0 0 1px rgba(255,236,190,.6),
             inset 0 .3em .65em rgba(0,0,0,.5)}
.nfr--luxury .row{display:flex;align-items:center;justify-content:center;gap:.3em}
.nfr--luxury .flourish{display:flex;align-items:center;flex-shrink:0}
.nfr--luxury .flourish--rev{transform:scaleX(-1)}
.nfr--luxury .flourish svg{width:1.26em;height:.39em}
.nfr--luxury .flourish .gem{width:.2em;height:.2em;margin:0 .087em;
  background:linear-gradient(135deg,#fff,var(--gold-bright));
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  box-shadow:0 0 .22em .043em rgba(255,224,150,.9);
  animation:gemPulse__luxn 2.6s ease-in-out infinite}
.nfr--luxury .glint{position:absolute;z-index:5;width:.28em;height:.28em;background:#fff;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter:drop-shadow(0 0 .13em rgba(255,235,180,.95));
  opacity:0;transform:translate(-50%,-50%) scale(.35);
  animation:twinkle__luxn 3.2s ease-in-out infinite}
.nfr--luxury .g1{top:16%;left:14%}
.nfr--luxury .g2{top:20%;right:12%;animation-delay:1s}
.nfr--luxury .g3{bottom:18%;left:20%;animation-delay:1.8s}
.nfr--luxury .g4{bottom:16%;right:16%;animation-delay:2.5s}
/* نصّ الاسم: خط رقعة + تدرّج ذهبي يمرّ. important لأن الإجراء يضبط الخط واللون inline. */
.nfr--luxury .nfr__txt,.nfr--luxury .nfr__txt *{
  line-height:1.15;text-shadow:none!important;
  font-family:"Aref Ruqaa","Amiri",Georgia,serif!important;font-weight:700!important}
/* التدرّج على حامل النصّ نفسه (انظر الشرح في اللوح الملكي). وimportant على الحركة
   لأن الكتلة المشتركة تُلغي حركات __base لإيقاف هزّة الموقع — واللمعان هنا من التصميم. */
.nfr--luxury .nfr__txt,.nfr--luxury .pv__nm,.nfr--luxury .action-name__base{
  background:linear-gradient(100deg,#b98d3e 0%,#f3dd9a 28%,#fff7e2 48%,#f3dd9a 68%,#b98d3e 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));
  animation:shine__luxn 4.6s linear infinite!important}
@keyframes spinC__luxn{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes shine__luxn{to{background-position:-250% 0}}
@keyframes float__luxn{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulse__luxn{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.1);opacity:1}}
@keyframes gemPulse__luxn{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
@keyframes twinkle__luxn{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}}
@keyframes breathe__luxn{
  0%,100%{box-shadow:0 .26em .65em rgba(0,0,0,.55),0 0 .95em rgba(201,160,74,.30),0 0 0 1px rgba(243,221,154,.30)}
  50%{box-shadow:0 .35em .95em rgba(0,0,0,.6),0 0 1.7em rgba(201,160,74,.55),0 0 0 1px rgba(243,221,154,.52)}}
@keyframes drift__luxn{0%{transform:translateY(0) scale(1);opacity:0}
  15%{opacity:1}85%{opacity:.8}100%{transform:translateY(-1.3em) scale(.3);opacity:0}}

/* ═══════════ moon — لوحة القمر ═══════════
   منقولة من moon-frame. التعديل الإلزامي: الأبعاد px → em بنسبها الأصلية (مرجع 28px)
   فتنمو مع الاسم وتتبع حجم الخط، وحُذف min/max-width الثابتان (العرض يتبع الاسم)
   وfitName الذي كان يصغّر الخط ليدخل في عرض ثابت — لم نعد نحتاجه.
   غير منقول: تكوّن الاسم من نقاط ضوئية على كانفس (يحتاج كانفس وحلقة رسم لكل إجراء). */
.nfr--moon{
  --navy-deep:#090D2B; --violet-glow:#8B6DFF; --silver:#C9D1E3; --glow:rgba(165,145,255,.75);
  position:relative;
  animation:plateEnter__mn .5s ease-out both;
}
@keyframes plateEnter__mn{from{opacity:0;transform:translateY(.28em) scale(.95)}to{opacity:1;transform:none}}
.nfr--moon .plate{position:relative;display:flex;align-items:center;justify-content:center;
  padding:.32em 1.75em;border-radius:999px;
  background:rgba(9,13,43,.72);border:1px solid rgba(201,209,227,.65);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 .64em rgba(139,109,255,.25),inset 0 0 .43em rgba(255,255,255,.05)}
@supports not (backdrop-filter:blur(10px)){.nfr--moon .plate{background:rgba(9,13,43,.88)}}
.nfr--moon .plate-moon{position:absolute;left:.5em;top:50%;transform:translateY(-50%);
  width:.71em;height:.71em;filter:drop-shadow(0 0 .18em rgba(255,255,255,.5))}
.nfr--moon .plate-moon svg{width:100%;height:100%;display:block}
.nfr--moon .plate-stars{position:absolute;right:.43em;top:50%;transform:translateY(-50%);
  display:flex;gap:.18em;align-items:center}
.nfr--moon .plate-stars .star{display:block;opacity:.7;
  animation:starTwinkle__mnn var(--tw-dur,2.4s) ease-in-out var(--tw-delay,0s) infinite}
.nfr--moon .plate-stars .star svg{width:100%;height:100%;display:block}
.nfr--moon .plate-stars .s1{width:.18em;height:.18em;--tw-dur:1.8s;--tw-delay:0s}
.nfr--moon .plate-stars .s2{width:.25em;height:.25em;--tw-dur:2.4s;--tw-delay:.4s}
.nfr--moon .plate-stars .s3{width:.32em;height:.32em;--tw-dur:3s;--tw-delay:.8s}
@keyframes starTwinkle__mnn{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.nfr--moon .nfr__txt,.nfr--moon .nfr__txt *{
  letter-spacing:.5px;text-shadow:none!important;
  font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif!important;font-weight:700!important}
/* التدرّج على حامل النصّ نفسه (انظر الشرح في اللوح الملكي). لمعة فضية تمرّ مرة واحدة
   ثم يستقرّ الاسم أبيض — في المصدر كانت تُزال بجافاسكربت، وهنا بـforwards على آخر مفتاح. */
.nfr--moon .nfr__txt,.nfr--moon .pv__nm,.nfr--moon .action-name__base{
  color:#fff!important;-webkit-text-fill-color:transparent!important;
  background:linear-gradient(100deg,#FFFFFF 30%,#E8ECFF 45%,#8B6DFF 50%,#FFFFFF 55%,#FFFFFF 70%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 .21em rgba(255,255,255,.7)) drop-shadow(0 0 .5em rgba(139,109,255,.55));
  animation:nameShine__mn 1s ease-in-out .55s both!important}
@keyframes nameShine__mn{from{background-position:100% 0}to{background-position:0% 0}}

/* ═══════════ crystal — لوحة الكريستال ═══════════
   منقولة من مشروع crystal-profile-frame (app/globals.css). التعديلات الإلزامية:
   • كل الأبعاد px → em بنسبها الأصلية (مرجع 22px) فتنمو مع الاسم وتتبع حجم الخط.
   • حُذف min/max-width الثابتان وmax-width:205px مع text-overflow:ellipsis على
     الاسم — كان يقصّ الأسماء الطويلة بثلاث نقاط؛ عندنا اللوحة تتّسع للاسم كاملًا.
   • حُذف margin-top:-23px (كان ليتداخل مع الصورة في بطاقة واحدة — عندنا قطعتان).
   • ألوان الكريستال من ثيم rose الافتراضي في المصدر. */
.nfr--crystal{
  --crystal-1:#fff7fc; --crystal-2:#f7a4cd; --crystal-3:#d95f9c; --crystal-4:#c4a5ff;
  --glow:rgba(242,109,174,.48);
  position:relative;z-index:12;display:inline-flex;align-items:center;justify-content:center;
  padding:0 .36em;
  filter:drop-shadow(0 .64em .82em rgba(93,49,77,.23));
}
.nfr--crystal .badge-glass{position:relative;display:flex;align-items:center;justify-content:center;
  gap:.41em;padding:.34em 1.55em;overflow:hidden;
  border:2px solid transparent;border-radius:.73em;
  background:linear-gradient(135deg,rgba(255,250,253,.94),rgba(238,172,207,.79)) padding-box,
             linear-gradient(120deg,#8f5b1a,#fff2ac 24%,#c58b24 50%,#fff6c4 73%,#94621f) border-box;
  box-shadow:inset 0 1px 0 white,inset 0 -.36em .91em rgba(156,72,118,.13);
  clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)}
.nfr--crystal .badge-glass::before{content:"";position:absolute;top:-20%;left:-35%;
  width:25%;height:140%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  animation:badgeSweep__cr 4s ease-in-out 1s infinite}
@keyframes badgeSweep__cr{0%,25%{left:-35%}62%,100%{left:125%}}
.nfr--crystal .vip-label{position:relative;z-index:2;flex-shrink:0;
  padding:.14em .23em;border:1px solid rgba(160,100,21,.35);border-radius:.23em;
  color:#956017;background:rgba(255,246,193,.65);
  font-size:.36em;font-weight:900;letter-spacing:.08em;line-height:1.4}
.nfr--crystal .badge-gem{position:absolute;z-index:4;top:50%;
  width:1.55em;height:1.55em;margin-top:-.77em;transform:rotate(45deg);
  border:2px solid #fbeebd;
  background:linear-gradient(135deg,white,var(--crystal-2) 38%,var(--crystal-3) 72%,white);
  box-shadow:inset .23em .23em .41em rgba(255,255,255,.72),0 0 .45em var(--glow)}
.nfr--crystal .badge-gem::after{content:"";position:absolute;inset:.27em;
  border:1px solid rgba(255,255,255,.75)}
.nfr--crystal .badge-gem-right{right:-.18em}
.nfr--crystal .badge-gem-left{left:-.18em}
/* الاسم: تدرّج ذهبي يمرّ عليه — على حامل النصّ نفسه (انظر الشرح في اللوح الملكي) */
.nfr--crystal .nfr__txt,.nfr--crystal .nfr__txt *{
  letter-spacing:.01em;text-shadow:none!important;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;font-weight:800!important}
.nfr--crystal .nfr__txt{position:relative;z-index:2}
.nfr--crystal .nfr__txt,.nfr--crystal .pv__nm,.nfr--crystal .action-name__base{
  background:linear-gradient(110deg,#a86e18 0%,#fff0a0 25%,#d79d2c 42%,#fff 50%,
             #dcaa39 58%,#fff3ae 75%,#9b6215 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 1px 1px rgba(81,39,8,.33));
  animation:nameShimmer__cr 2.6s ease-in-out infinite!important}
@keyframes nameShimmer__cr{0%,25%{background-position:100% 0}72%,100%{background-position:-100% 0}}

/* ═══════════ lion — لوح الأسد ═══════════
   منقول من تصميم المالك (lion-badge-and-nameplate). إطاره صورة PNG بنسبة 3:1،
   فلا يتمدّد أفقيًا كالألواح المرسومة بالـcss (يشوّه زخارف طرفيه) — بدل ذلك يكبر
   اللوح كوحدة واحدة مع طول الاسم عبر fitPlate في name-frames.js (يضبط العرض بالبكسل
   والارتفاع يتبع aspect-ratio). كل الأبعاد الداخلية بالنسبة المئوية كما في المصدر.
   التلوين ثابت (هوية ذهبية على صورة) — كإطار الصورة .bfr--lion. */
.nfr--lion{
  --gold:#ffb52f; --amber:#ff6b00;
  position:relative;display:block;width:14em;aspect-ratio:3/1;isolation:isolate;
  filter:drop-shadow(0 .18em .22em rgba(0,0,0,.55));
  transform-origin:50% 50%;
  animation:nameplateFloat__ln 4.4s ease-in-out infinite}
.nfr--lion .nameplate-frame{position:absolute;z-index:3;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;user-select:none}
.nfr--lion .nameplate-aura{position:absolute;z-index:0;inset:18% 7%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,175,50,.48),rgba(255,89,0,.18) 42%,transparent 72%);
  filter:blur(22px);animation:nameplateAura__ln 2.8s ease-in-out infinite}
/* غلاف الاسم: موسّط فوق اللوح ويشغل 67% من عرضه (نفس نسبة fitPlate) */
.nfr--lion .name-content{position:absolute;z-index:6;top:50%;left:50%;width:67%;
  display:grid;place-items:center;transform:translate(-50%,-50%)}
.nfr--lion .nfr__txt{position:relative;z-index:2;max-width:100%}
.nfr--lion .nfr__txt,.nfr--lion .nfr__txt *{
  white-space:nowrap;letter-spacing:.035em;text-shadow:none!important;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;font-weight:900!important}
/* التدرّج المعدني على حامل النصّ نفسه لا على الحاوية (انظر الشرح في اللوح الملكي) */
.nfr--lion .nfr__txt,.nfr--lion .pv__nm,.nfr--lion .action-name__base{
  background:linear-gradient(105deg,#9c5c12 0%,#ffe9a5 24%,#fffbe7 42%,#e9a92f 58%,
             #fff0ad 74%,#9c5c12 100%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 2px 0 #4c2704) drop-shadow(0 0 8px rgba(255,167,31,.68));
  animation:nameMetalShimmer__ln 3.3s linear infinite,namePower__ln 2.6s ease-in-out infinite!important}
.nfr--lion .nameplate-scan{position:absolute;z-index:5;top:31%;left:16%;width:68%;height:38%;
  overflow:hidden;border-radius:999px;pointer-events:none}
.nfr--lion .nameplate-scan::before{content:"";position:absolute;inset:-50% auto -50% -20%;width:18%;
  background:linear-gradient(90deg,transparent,rgba(255,243,195,.72),transparent);
  filter:blur(4px);transform:skewX(-16deg);animation:nameScan__ln 4.5s ease-in-out infinite}
.nfr--lion .nameplate-edge-light{position:absolute;z-index:4;inset:25% 15%;
  border:1px solid rgba(255,209,112,.32);border-radius:999px;
  box-shadow:inset 0 0 10px rgba(255,142,0,.3),0 0 9px rgba(255,139,0,.28);
  pointer-events:none;animation:edgeBreathe__ln 2.6s ease-in-out infinite}
.nfr--lion .nameplate-ray{position:absolute;z-index:2;top:38%;width:28%;height:24%;
  background:linear-gradient(90deg,transparent,#ff9b10,#fff3b3,transparent);
  filter:blur(7px);opacity:0;pointer-events:none;
  animation:nameRay__ln 4s ease-in-out infinite}
.nfr--lion .ray-left{left:1%}
.nfr--lion .ray-right{right:1%;transform:scaleX(-1);animation-delay:2s}
.nfr--lion .name-spark{position:absolute;z-index:8;width:4.5%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0 4%,#ffe495 10%,#ff8a00 26%,transparent 57%);
  filter:drop-shadow(0 0 7px #ff8700);pointer-events:none;opacity:0;
  animation:nameSparkle__ln 4.6s ease-in-out infinite}
.nfr--lion .name-spark::before,.nfr--lion .name-spark::after{content:"";position:absolute;
  top:50%;left:50%;background:linear-gradient(90deg,transparent,#fff8d9,transparent);
  transform:translate(-50%,-50%)}
.nfr--lion .name-spark::before{width:240%;height:1px}
.nfr--lion .name-spark::after{width:1px;height:240%;
  background:linear-gradient(transparent,#fff8d9,transparent)}
.nfr--lion .name-spark-one{top:18%;left:22%}
.nfr--lion .name-spark-two{top:63%;right:24%;animation-delay:1.55s}
.nfr--lion .name-spark-three{top:31%;left:50%;animation-delay:3.1s}
@keyframes nameplateFloat__ln{0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.006)}}
@keyframes nameplateAura__ln{0%,100%{opacity:.4;transform:scaleX(.94)}
  50%{opacity:.92;transform:scaleX(1.04)}}
@keyframes nameMetalShimmer__ln{to{background-position:-240% 0}}
@keyframes namePower__ln{
  0%,100%{filter:drop-shadow(0 2px 0 #4c2704) drop-shadow(0 0 7px rgba(255,167,31,.55))}
  50%{filter:drop-shadow(0 2px 0 #4c2704) drop-shadow(0 0 15px rgba(255,167,31,.88))}}
@keyframes nameScan__ln{0%,20%{left:-20%;opacity:0}34%{opacity:.9}
  68%,100%{left:115%;opacity:0}}
@keyframes edgeBreathe__ln{0%,100%{opacity:.35}
  50%{opacity:.9;box-shadow:inset 0 0 15px rgba(255,142,0,.46),0 0 14px rgba(255,139,0,.48)}}
@keyframes nameRay__ln{0%,68%,100%{opacity:0;transform:scaleX(.5)}
  76%{opacity:.72;transform:scaleX(1.08)}86%{opacity:.1;transform:scaleX(1.3)}}
@keyframes nameSparkle__ln{0%,70%,100%{opacity:0;transform:scale(.2) rotate(0)}
  76%{opacity:1;transform:scale(1.4) rotate(20deg)}
  84%{opacity:.32;transform:scale(.7) rotate(34deg)}}

/* ═══════════ cat — لوح القطوة الوردية ═══════════
   نفس بنية لوح الأسد (إطار PNG + هالة + شعاعان + مسح + حافة + شرارات)، بلوحة
   ألوان وردية. نسخة slim: الحاوية 2.7:1 كما اختار المصمّم (صورتها 2054:766
   ≈2.681) فتتوسّط داخلها بفارق يسير. keyframes بلاحقة __ct. */
.nfr--cat{
  --pink:#ff79b7; --magenta:#e40077;
  position:relative;display:block;width:14em;aspect-ratio:2.7/1;isolation:isolate;
  filter:drop-shadow(0 .18em .22em rgba(0,0,0,.55));
  transform-origin:50% 50%;
  animation:nameplateFloat__ct 5.2s ease-in-out infinite}
.nfr--cat .nameplate-frame{position:absolute;z-index:3;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;user-select:none}
.nfr--cat .nameplate-aura{position:absolute;z-index:0;inset:18% 7%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,99,169,.52),rgba(207,0,93,.21) 42%,transparent 72%);
  opacity:.65;filter:blur(18px);animation:nameplateAura__ct 2.8s ease-in-out infinite}
/* نسخة slim: الاسم يشغل 69% ومركزه عند 47.5% (نسبتا المصدر) */
.nfr--cat .name-content{position:absolute;z-index:6;top:47.5%;left:50%;width:69%;
  display:grid;place-items:center;transform:translate(-50%,-50%)}
.nfr--cat .nfr__txt{position:relative;z-index:2;max-width:100%}
.nfr--cat .nfr__txt,.nfr--cat .nfr__txt *{
  white-space:nowrap;letter-spacing:.035em;text-shadow:none!important;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;font-weight:900!important}
.nfr--cat .nfr__txt,.nfr--cat .pv__nm,.nfr--cat .action-name__base{
  background:linear-gradient(105deg,#b31962 0%,#ffc9df 24%,#fff8fb 42%,#ff6daf 58%,
             #ffd9e9 74%,#9b124e 100%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 2px 0 #5c1238) drop-shadow(0 0 8px rgba(255,57,149,.72));
  animation:nameMetalShimmer__ct 3.3s linear infinite,namePower__ct 2.6s ease-in-out infinite!important}
.nfr--cat .nameplate-scan{position:absolute;z-index:5;top:31%;left:16%;width:68%;height:38%;
  overflow:hidden;border-radius:999px;pointer-events:none}
.nfr--cat .nameplate-scan::before{content:"";position:absolute;inset:-50% auto -50% -20%;width:18%;
  background:linear-gradient(90deg,transparent,#fff4fa,#ff58a8,#fff4fa,transparent);
  filter:blur(4px);transform:skewX(-16deg);animation:nameScan__ct 4.5s ease-in-out infinite}
.nfr--cat .nameplate-edge-light{position:absolute;z-index:4;inset:25% 15%;
  border:1px solid rgba(255,187,219,.44);border-radius:999px;
  box-shadow:inset 0 0 10px rgba(255,47,143,.36),0 0 9px rgba(220,0,101,.32);
  pointer-events:none;animation:edgeBreathe__ct 2.6s ease-in-out infinite}
.nfr--cat .nameplate-ray{position:absolute;z-index:2;top:38%;width:28%;height:24%;
  background:linear-gradient(90deg,transparent,#ff3397,#ffe4f0,transparent);
  filter:blur(7px);opacity:0;pointer-events:none;
  animation:nameRay__ct 4s ease-in-out infinite}
.nfr--cat .ray-left{left:1%}
.nfr--cat .ray-right{right:1%;transform:scaleX(-1);animation-delay:2s}
.nfr--cat .name-spark{position:absolute;z-index:8;width:4.5%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0 4%,#ffe4f0 10%,#ff3b9b 26%,transparent 57%);
  filter:drop-shadow(0 0 7px #ff298f);pointer-events:none;opacity:0;
  animation:nameSparkle__ct 4.6s ease-in-out infinite}
.nfr--cat .name-spark::before,.nfr--cat .name-spark::after{content:"";position:absolute;
  top:50%;left:50%;background:linear-gradient(90deg,transparent,#fff0f7,transparent);
  transform:translate(-50%,-50%)}
.nfr--cat .name-spark::before{width:240%;height:1px}
.nfr--cat .name-spark::after{width:1px;height:240%;
  background:linear-gradient(transparent,#fff0f7,transparent)}
.nfr--cat .name-spark-one{top:18%;left:22%}
.nfr--cat .name-spark-two{top:63%;right:24%;animation-delay:1.55s}
.nfr--cat .name-spark-three{top:31%;left:50%;animation-delay:3.1s}
@keyframes nameplateFloat__ct{0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.003)}}
@keyframes nameplateAura__ct{0%,100%{opacity:.4;transform:scaleX(.94)}
  50%{opacity:.92;transform:scaleX(1.04)}}
@keyframes nameMetalShimmer__ct{to{background-position:-240% 0}}
@keyframes namePower__ct{
  0%,100%{filter:drop-shadow(0 2px 0 #5c1238) drop-shadow(0 0 7px rgba(255,55,149,.58))}
  50%{filter:drop-shadow(0 2px 0 #5c1238) drop-shadow(0 0 16px rgba(255,82,165,.92))}}
@keyframes nameScan__ct{0%,20%{left:-20%;opacity:0}34%{opacity:.9}
  68%,100%{left:115%;opacity:0}}
@keyframes edgeBreathe__ct{0%,100%{opacity:.35}
  50%{opacity:.9;box-shadow:inset 0 0 15px rgba(255,47,143,.5),0 0 14px rgba(220,0,101,.5)}}
@keyframes nameRay__ct{0%,68%,100%{opacity:0;transform:scaleX(.5)}
  76%{opacity:.72;transform:scaleX(1.08)}86%{opacity:.1;transform:scaleX(1.3)}}
@keyframes nameSparkle__ct{0%,70%,100%{opacity:0;transform:scale(.2) rotate(0)}
  76%{opacity:1;transform:scale(1.4) rotate(20deg)}
  84%{opacity:.32;transform:scale(.7) rotate(34deg)}}

/* ═══════════ hilal — لوح الهلال ═══════════
   نفس بنية لوح الأسد بلوحة زرقاء. نسبة الإطار 2172:724 (3:1)، والاسم يشغل 69%
   من العرض ومركزه عند 51% (نسبتا المصدر). keyframes بلاحقة __hl. */
.nfr--hilal{
  --blue:#1e74ff; --ice:#8ce2ff;
  position:relative;display:block;width:14em;aspect-ratio:2161/728;isolation:isolate;
  filter:drop-shadow(0 .18em .22em rgba(0,0,0,.55));
  transform-origin:50% 50%;
  animation:nameplateFloat__hl 5.2s ease-in-out infinite}
.nfr--hilal .nameplate-frame{position:absolute;z-index:3;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;user-select:none}
/* نسخة slim: هالة أهدأ (شفافية ‎.66‎ وضباب ‎18px‎) تناسب اللوح النحيف */
.nfr--hilal .nameplate-aura{position:absolute;z-index:0;inset:18% 7%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(51,135,255,.58),rgba(13,44,214,.24) 42%,transparent 72%);
  opacity:.66;filter:blur(18px);animation:nameplateAura__hl 2.8s ease-in-out infinite}
.nfr--hilal .name-content{position:absolute;z-index:6;top:51%;left:50%;width:69%;
  display:grid;place-items:center;transform:translate(-50%,-50%)}
.nfr--hilal .nfr__txt{position:relative;z-index:2;max-width:100%}
.nfr--hilal .nfr__txt,.nfr--hilal .nfr__txt *{
  white-space:nowrap;letter-spacing:.035em;text-shadow:none!important;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;font-weight:900!important}
.nfr--hilal .nfr__txt,.nfr--hilal .pv__nm,.nfr--hilal .action-name__base{
  background:linear-gradient(105deg,#5a84a8 0%,#dff7ff 22%,#ffffff 41%,#49bfff 58%,
             #eafaff 74%,#3d70a7 100%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 2px 0 #061a4f) drop-shadow(0 0 9px rgba(65,183,255,.82));
  animation:nameMetalShimmer__hl 3.1s linear infinite,namePower__hl 2.5s ease-in-out infinite!important}
.nfr--hilal .nameplate-scan{position:absolute;z-index:5;top:31%;left:16%;width:68%;height:38%;
  overflow:hidden;border-radius:999px;pointer-events:none}
.nfr--hilal .nameplate-scan::before{content:"";position:absolute;inset:-50% auto -50% -20%;width:18%;
  background:linear-gradient(90deg,transparent,#f4fdff,#4bc5ff,#f4fdff,transparent);
  filter:blur(4px);transform:skewX(-16deg);animation:nameScan__hl 4.5s ease-in-out infinite}
.nfr--hilal .nameplate-edge-light{position:absolute;z-index:4;inset:25% 15%;
  border:1px solid rgba(172,229,255,.49);border-radius:999px;
  box-shadow:inset 0 0 11px rgba(50,137,255,.46),0 0 10px rgba(43,115,255,.44);
  pointer-events:none;animation:edgeBreathe__hl 2.6s ease-in-out infinite}
.nfr--hilal .nameplate-ray{position:absolute;z-index:2;top:38%;width:28%;height:24%;
  background:linear-gradient(90deg,transparent,#2476ff,#eafaff,transparent);
  filter:blur(7px);opacity:0;pointer-events:none;
  animation:nameRay__hl 4s ease-in-out infinite}
.nfr--hilal .ray-left{left:1%}
.nfr--hilal .ray-right{right:1%;transform:scaleX(-1);animation-delay:2s}
.nfr--hilal .name-spark{position:absolute;z-index:8;width:4.5%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0 4%,#e6f9ff 10%,#48c3ff 26%,transparent 57%);
  filter:drop-shadow(0 0 8px #2177ff);pointer-events:none;opacity:0;
  animation:nameSparkle__hl 4.6s ease-in-out infinite}
.nfr--hilal .name-spark::before,.nfr--hilal .name-spark::after{content:"";position:absolute;
  top:50%;left:50%;background:linear-gradient(90deg,transparent,#e8fbff,transparent);
  transform:translate(-50%,-50%)}
.nfr--hilal .name-spark::before{width:240%;height:1px}
.nfr--hilal .name-spark::after{width:1px;height:240%;
  background:linear-gradient(transparent,#e8fbff,transparent)}
.nfr--hilal .name-spark-one{top:18%;left:22%}
.nfr--hilal .name-spark-two{top:63%;right:24%;animation-delay:1.55s}
.nfr--hilal .name-spark-three{top:31%;left:50%;animation-delay:3.1s}
@keyframes nameplateFloat__hl{0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.003)}}
@keyframes nameplateAura__hl{0%,100%{opacity:.4;transform:scaleX(.94)}
  50%{opacity:.92;transform:scaleX(1.04)}}
@keyframes nameMetalShimmer__hl{to{background-position:-240% 0}}
@keyframes namePower__hl{
  0%,100%{filter:drop-shadow(0 2px 0 #061a4f) drop-shadow(0 0 8px rgba(65,183,255,.65))}
  50%{filter:drop-shadow(0 2px 0 #061a4f) drop-shadow(0 0 18px rgba(82,201,255,.96))}}
@keyframes nameScan__hl{0%,20%{left:-20%;opacity:0}34%{opacity:.9}
  68%,100%{left:115%;opacity:0}}
@keyframes edgeBreathe__hl{0%,100%{opacity:.35}
  50%{opacity:.9;box-shadow:inset 0 0 16px rgba(50,137,255,.62),0 0 15px rgba(43,115,255,.6)}}
@keyframes nameRay__hl{0%,68%,100%{opacity:0;transform:scaleX(.5)}
  76%{opacity:.72;transform:scaleX(1.08)}86%{opacity:.1;transform:scaleX(1.3)}}
@keyframes nameSparkle__hl{0%,70%,100%{opacity:0;transform:scale(.2) rotate(0)}
  76%{opacity:1;transform:scale(1.4) rotate(20deg)}
  84%{opacity:.32;transform:scale(.7) rotate(34deg)}}

/* ═══════════ nassr — لوح النصر ═══════════
   نفس بنية لوح الهلال بلوحة صفراء/زرقاء. الحاوية 2.05:1 كما اختار المصمّم —
   لا نسبة الصورة (1672:941) — فتتوسّط الصورة داخلها بـobject-fit وتقع نسب
   المسح والحافة والأشعّة والشرارات في مواضعها المقصودة. keyframes بلاحقة __ns. */
.nfr--nassr{
  --gold:#ffd21f; --navy:#245486;
  position:relative;display:block;width:14em;aspect-ratio:2.05/1;isolation:isolate;
  filter:drop-shadow(0 .18em .22em rgba(0,0,0,.55));
  transform-origin:50% 50%;
  animation:nameplateFloat__ns 5.2s ease-in-out infinite}
.nfr--nassr .nameplate-frame{position:absolute;z-index:3;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;user-select:none}
.nfr--nassr .nameplate-aura{position:absolute;z-index:0;inset:18% 7%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,213,37,.5),rgba(30,78,145,.34) 45%,transparent 74%);
  opacity:.66;filter:blur(18px);animation:nameplateAura__ns 2.8s ease-in-out infinite}
.nfr--nassr .name-content{position:absolute;z-index:6;top:49.5%;left:50%;width:67%;
  display:grid;place-items:center;transform:translate(-50%,-50%)}
.nfr--nassr .nfr__txt{position:relative;z-index:2;max-width:100%}
.nfr--nassr .nfr__txt,.nfr--nassr .nfr__txt *{
  white-space:nowrap;letter-spacing:.035em;text-shadow:none!important;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;font-weight:900!important}
.nfr--nassr .nfr__txt,.nfr--nassr .pv__nm,.nfr--nassr .action-name__base{
  background:linear-gradient(105deg,#9d7511 0%,#ffec78 22%,#fffde5 41%,#ffcf19 58%,
             #fff1a1 74%,#7f5f0d 100%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 2px 0 #17385e) drop-shadow(0 0 9px rgba(255,207,25,.82));
  animation:nameMetalShimmer__ns 3.1s linear infinite,namePower__ns 2.5s ease-in-out infinite!important}
.nfr--nassr .nameplate-scan{position:absolute;z-index:5;top:31%;left:16%;width:68%;height:38%;
  overflow:hidden;border-radius:999px;pointer-events:none}
.nfr--nassr .nameplate-scan::before{content:"";position:absolute;inset:-50% auto -50% -20%;width:18%;
  background:linear-gradient(90deg,transparent,#fffef1,#ffdc2e,#fffef1,transparent);
  filter:blur(4px);transform:skewX(-16deg);animation:nameScan__ns 4.5s ease-in-out infinite}
.nfr--nassr .nameplate-edge-light{position:absolute;z-index:4;inset:25% 15%;
  border:1px solid rgba(255,232,105,.55);border-radius:999px;
  box-shadow:inset 0 0 11px rgba(255,204,16,.42),0 0 10px rgba(44,100,162,.5);
  pointer-events:none;animation:edgeBreathe__ns 2.6s ease-in-out infinite}
.nfr--nassr .nameplate-ray{position:absolute;z-index:2;top:38%;width:28%;height:24%;
  background:linear-gradient(90deg,transparent,#245486,#ffeb72,transparent);
  filter:blur(7px);opacity:0;pointer-events:none;
  animation:nameRay__ns 4s ease-in-out infinite}
.nfr--nassr .ray-left{left:1%}
.nfr--nassr .ray-right{right:1%;transform:scaleX(-1);animation-delay:2s}
.nfr--nassr .name-spark{position:absolute;z-index:8;width:4.5%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0 4%,#fff7bc 10%,#ffd226 26%,transparent 57%);
  filter:drop-shadow(0 0 8px #ffc400);pointer-events:none;opacity:0;
  animation:nameSparkle__ns 4.6s ease-in-out infinite}
.nfr--nassr .name-spark::before,.nfr--nassr .name-spark::after{content:"";position:absolute;
  top:50%;left:50%;background:linear-gradient(90deg,transparent,#fff9d6,transparent);
  transform:translate(-50%,-50%)}
.nfr--nassr .name-spark::before{width:240%;height:1px}
.nfr--nassr .name-spark::after{width:1px;height:240%;
  background:linear-gradient(transparent,#fff9d6,transparent)}
.nfr--nassr .name-spark-one{top:18%;left:22%}
.nfr--nassr .name-spark-two{top:63%;right:24%;animation-delay:1.55s}
.nfr--nassr .name-spark-three{top:31%;left:50%;animation-delay:3.1s}
@keyframes nameplateFloat__ns{0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.003)}}
@keyframes nameplateAura__ns{0%,100%{opacity:.4;transform:scaleX(.94)}
  50%{opacity:.92;transform:scaleX(1.04)}}
@keyframes nameMetalShimmer__ns{to{background-position:-240% 0}}
@keyframes namePower__ns{
  0%,100%{filter:drop-shadow(0 2px 0 #17385e) drop-shadow(0 0 8px rgba(255,207,25,.66))}
  50%{filter:drop-shadow(0 2px 0 #17385e) drop-shadow(0 0 18px rgba(255,223,62,.97))}}
@keyframes nameScan__ns{0%,20%{left:-20%;opacity:0}34%{opacity:.9}
  68%,100%{left:115%;opacity:0}}
@keyframes edgeBreathe__ns{0%,100%{opacity:.35}
  50%{opacity:.9;box-shadow:inset 0 0 16px rgba(255,204,16,.6),0 0 15px rgba(44,100,162,.66)}}
@keyframes nameRay__ns{0%,68%,100%{opacity:0;transform:scaleX(.5)}
  76%{opacity:.72;transform:scaleX(1.08)}86%{opacity:.1;transform:scaleX(1.3)}}
@keyframes nameSparkle__ns{0%,70%,100%{opacity:0;transform:scale(.2) rotate(0)}
  76%{opacity:1;transform:scale(1.4) rotate(20deg)}
  84%{opacity:.32;transform:scale(.7) rotate(34deg)}}

/* ═══════════ gold — لوح قولد ═══════════
   منقول من تصميم المالك (lion-frame.html). css خالص بلا صور: كبسولة حدّها تدرّج
   مخروطي ذهبي دوّار، ومعيّنان نابضان جانبًا. كل الأبعاد بالـem (المرجع 64px في
   المصدر) فينمو مع الاسم ويتبع حجم الخط الذي يضبطه الستريمر. */
@property --gold-plate-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.nfr--gold{
  --gold:#ffd873; --gold-deep:#7a5210;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.22em;padding:0 .6em}
/* الحدّ الذهبي: تدرّج مخروطي على الحاوية، وداخله الكبسولة الداكنة ⇒ إطار دوّار */
.nfr--gold .name-plate{position:relative;z-index:1;padding:.047em;border-radius:999px;
  background:conic-gradient(from var(--gold-plate-angle,0deg),
    #7a5210,#ffd873,#b8860b,#fff3c4,#daa520,#8a6508,#ffd873,#7a5210);
  filter:drop-shadow(0 0 .19em rgba(255,200,80,.45));
  animation:plateSpin__gd 2s linear infinite}
.nfr--gold .nfr__txt{position:relative;display:block;padding:.375em 1.594em;
  border-radius:999px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%,#2b1c08 0%,#0d0803 80%);
  box-shadow:inset 0 0 .28em rgba(255,200,80,.18)}
/* لمعة تمسح الاسم */
.nfr--gold .nfr__txt::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(to right,transparent,rgba(255,245,210,.3),transparent);
  animation:sweepMove__gd 2.5s ease-in-out infinite}
.nfr--gold .nfr__txt,.nfr--gold .nfr__txt *{
  color:#ffd873!important;letter-spacing:.125em;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;font-weight:700!important;
  text-shadow:0 0 .19em rgba(255,200,80,.7)!important}
/* المعيّنان يُلحقان بعد اللوح في الـDOM (طبقات outer)، فبلا order يقعان معًا في
   جهة واحدة — نوزّعهما بـorder: واحد قبل اللوح وواحد بعده. */
.nfr--gold .side-gem{flex:0 0 auto;order:1;width:.375em;height:.375em;background:#e8b64c;
  transform:rotate(45deg);box-shadow:0 0 .16em rgba(255,200,80,.8);
  animation:gemPulse__gd .75s ease-in-out infinite}
.nfr--gold .side-gem-right{order:-1}
.nfr--gold .name-plate{order:0}
@keyframes plateSpin__gd{to{--gold-plate-angle:360deg}}
@keyframes sweepMove__gd{0%,35%{left:-60%}65%,100%{left:130%}}
@keyframes gemPulse__gd{0%,100%{opacity:.75}50%{opacity:1}}

/* ═══════════ crown — لوح التاج الملكي ═══════════
   منقول من تصميم المالك (crown-badge-demo). التعديل الإلزامي: كل الأبعاد من px
   إلى em بنسبها الأصلية (المرجع 26.88px = ‎1.68rem‎، أقصى حجم اسم في المصدر) —
   اللوح ينمو مع طول الاسم ويتبع حجم الخط الذي يضبطه الستريمر. وحُذف عرض الحاوية
   الثابت ‎min(76%,440px)‎ (كان لصفحة العرض). keyframes بلاحقة __cr2. */
.nfr--crown{
  --gold:#f3cc68; --royal-blue:#1e55b9;
  position:relative;display:inline-grid;place-items:center;isolation:isolate;
  min-height:3.27em;
  filter:drop-shadow(0 .6em .67em rgba(0,0,0,.48));
  animation:plateEnter__cr2 .95s .1s cubic-bezier(.16,1,.3,1) both,
            plateFloat__cr2 5.4s 1.1s ease-in-out infinite}
.nfr--crown .nameplate-shell{position:relative;z-index:4;width:100%;min-height:2.68em;
  padding:.41em 2.83em .37em;overflow:hidden;display:grid;place-items:center;align-content:center;
  border:.056em solid transparent;border-radius:999px;
  background:linear-gradient(110deg,rgb(9 10 16/95%),rgb(25 20 12/97%) 50%,rgb(8 11 18/95%)) padding-box,
             linear-gradient(100deg,#814b05,#f7d77c 20%,#fff2b1 34%,#b5730d 52%,#ffe18d 72%,#8a5006) border-box;
  box-shadow:inset 0 0 1.04em rgba(0,0,0,.7),inset 0 0 0 .186em rgba(255,228,154,.04),
             0 0 .67em rgba(218,157,34,.18)}
.nfr--crown .nameplate-shell::before{content:"";position:absolute;inset:.186em;
  border:.037em solid rgba(247,213,128,.22);border-radius:inherit;pointer-events:none}
.nfr--crown .nameplate-shell::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(45,95,197,.14),transparent 38%),
             linear-gradient(90deg,transparent,rgba(255,235,172,.04) 50%,transparent)}
/* الاسم: البكج يفرض لونه وخطّه (انظر الشرح في اللوح الملكي) ويترك الحجم للستريمر */
.nfr--crown .nfr__txt{position:relative;z-index:3;max-width:100%;overflow:hidden;
  animation:nameEnter__cr2 .72s .6s cubic-bezier(.16,1,.3,1) both}
.nfr--crown .nfr__txt,.nfr--crown .nfr__txt *{
  color:#fff4cf!important;letter-spacing:-.025em;line-height:1.15;white-space:nowrap;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;font-weight:900!important;
  text-shadow:0 1px 0 #7e4d09,0 0 .52em rgba(235,190,79,.18)!important}
.nfr--crown .royal-title{position:relative;z-index:3;margin-top:.149em;color:#b89754;
  font-size:.31em;font-weight:900;letter-spacing:.34em;direction:ltr;
  animation:nameEnter__cr2 .72s .6s cubic-bezier(.16,1,.3,1) both}
.nfr--crown .nameplate-wing{position:absolute;z-index:2;top:50%;width:24%;height:1.49em;
  border-block:.037em solid #c48a26;
  background:linear-gradient(180deg,rgba(255,226,147,.08),rgba(126,75,8,.17));
  transform:translateY(-50%);box-shadow:0 0 .45em rgba(212,146,26,.12)}
.nfr--crown .wing-left{left:-8%;clip-path:polygon(100% 0,58% 8%,0 50%,58% 92%,100% 100%,78% 50%)}
.nfr--crown .wing-right{right:-8%;clip-path:polygon(0 0,42% 8%,100% 50%,42% 92%,0 100%,22% 50%)}
.nfr--crown .nameplate-end-gem{position:absolute;z-index:6;top:50%;width:.558em;aspect-ratio:1;
  border:.074em solid #e4bc58;
  background:radial-gradient(circle at 35% 28%,#c6e1ff,#1852bd 35%,#071c59 75%);
  box-shadow:0 0 0 .074em #6d4107,0 0 .484em #245ec8;
  transform:translateY(-50%) rotate(45deg);animation:endGem__cr2 2.8s ease-in-out infinite}
.nfr--crown .end-gem-left{left:8.5%}
.nfr--crown .end-gem-right{right:8.5%;animation-delay:1.4s}
.nfr--crown .nameplate-crown-gem{position:absolute;z-index:7;top:-.335em;left:50%;
  width:.893em;aspect-ratio:1;border:.074em solid #f3d476;
  background:linear-gradient(145deg,#a7670b,#ffe392 47%,#8b5106);
  box-shadow:0 0 0 .074em #6e4006,0 .186em .52em rgba(0,0,0,.48);
  transform:translateX(-50%) rotate(45deg)}
.nfr--crown .nameplate-crown-gem i{position:absolute;inset:.186em;border-radius:.074em;
  background:radial-gradient(circle at 32% 25%,#d9ecff,#2064db 34%,#071e66 75%);
  box-shadow:0 0 .335em #2c71e5;animation:gemCore__cr2 2.6s ease-in-out infinite}
.nfr--crown .nameplate-bottom-filigree{position:absolute;z-index:6;bottom:0;left:50%;
  width:2.31em;height:.484em;border-bottom:.074em solid #d9a93f;border-radius:0 0 50% 50%;
  transform:translateX(-50%)}
.nfr--crown .nameplate-bottom-filigree::before,
.nfr--crown .nameplate-bottom-filigree::after{content:"";position:absolute;bottom:.074em;
  width:1.12em;height:.335em;border-top:.037em solid #a56c13}
.nfr--crown .nameplate-bottom-filigree::before{left:-.818em;transform:rotate(-13deg)}
.nfr--crown .nameplate-bottom-filigree::after{right:-.818em;transform:rotate(13deg)}
.nfr--crown .nameplate-halo{position:absolute;z-index:-1;inset:9% 3%;border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(220,157,32,.36),rgba(38,92,192,.22),transparent);
  filter:blur(.6em);opacity:.7;animation:plateHalo__cr2 3.8s ease-in-out infinite}
.nfr--crown .nameplate-sweep{position:absolute;z-index:2;top:-80%;bottom:-80%;left:-28%;width:14%;
  background:linear-gradient(90deg,transparent,rgba(255,245,211,.48),transparent);
  filter:blur(.074em);transform:rotate(14deg);
  animation:plateSweep__cr2 4.9s 1.3s ease-in-out infinite}
@keyframes plateEnter__cr2{0%{opacity:0;transform:translateY(1.04em) scaleX(.45) scaleY(.86);filter:blur(.3em) brightness(1.8)}
  62%{opacity:1;transform:translateY(-.11em) scaleX(1.035) scaleY(1.02);filter:blur(0) brightness(1.15)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:drop-shadow(0 .6em .67em rgba(0,0,0,.48))}}
@keyframes nameEnter__cr2{0%{opacity:0;transform:translateY(.48em);filter:blur(.19em);letter-spacing:.14em}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes plateFloat__cr2{0%,100%{transform:translateY(0);filter:drop-shadow(0 .6em .67em rgba(0,0,0,.48))}
  50%{transform:translateY(-.11em);filter:drop-shadow(0 .67em .86em rgba(0,0,0,.42)) drop-shadow(0 0 .3em rgba(218,157,34,.18))}}
@keyframes plateSweep__cr2{0%,20%{left:-28%;opacity:0}38%{opacity:.9}62%,100%{left:114%;opacity:0}}
@keyframes endGem__cr2{0%,100%{filter:brightness(.86)}50%{filter:brightness(1.35) drop-shadow(0 0 .19em #2b70e3)}}
@keyframes gemCore__cr2{0%,100%{opacity:.72;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes plateHalo__cr2{0%,100%{opacity:.42;transform:scaleX(.96)}50%{opacity:.82;transform:scaleX(1.04)}}

/* ── قالب تصميم إضافي ──
   .nfr--mykey{
   .nfr--mykey{
     --gold:hsla(var(--nfr-h, 41deg), clamp(0%, calc(64% * var(--nfr-sm, 1)), 100%), 60%, 1);
     padding:.30em 1.5em;
   }
   .nfr--mykey .nfr__bg{position:absolute;inset:0;border-radius:.42em;background:#111}
   .nfr--mykey .nfr__edge{position:absolute;inset:0;border:.09em solid var(--gold);border-radius:.42em}

   قاعدة ثابتة لكل بكج: البكج يفرض خطّ الاسم ولونه (هويته مضمونة للمشتري)،
   ويترك حجم الخط للستريمر. انسخ هذا السطر بمفتاحك:
   .nfr--mykey .nfr__txt,.nfr--mykey .nfr__txt *{
     color:<لونك>!important;font-family:<خطك>!important;font-weight:<وزنك>!important}
   (لو أردت تدرّجًا بدل لون صلب: ضع background+background-clip:text على .nfr__txt
    واجعل اللون transparent!important في السطر أعلاه.)

   ثم سجّل المفتاح في name-frames.js ليظهر في الأدمن. */

/* حركة أقل للمستخدمين اللي يطلبونها */
@media (prefers-reduced-motion: reduce){
  .nfr *{animation:none!important}
}