@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Cairo:wght@700;900&display=swap');
  *{margin:0;padding:0;box-sizing:border-box;font-family:'Tajawal',sans-serif;-webkit-tap-highlight-color:transparent}
  :root{
    --star:#ffe27a; --new:#ff5b7f;
    --c-green:#5cc98a; --c-orange:#f5a04a; --c-blue:#4fa8e8;
    --c-purple:#a07fd8; --c-red:#f2705a; --c-teal:#3fc7c0;
    --ink:#eef0ff;
  }
  body{min-height:100vh;color:var(--ink);overflow-x:hidden;position:relative;
    transition:background .6s ease;
    background:linear-gradient(180deg,#26262e 0%,#33333d 30%,#45454f 60%,#575762 100%)}
  /* خلفية الرئيسية — فضاء رمادي */
  body.theme-home{
    background:linear-gradient(180deg,#26262e 0%,#33333d 30%,#45454f 60%,#575762 100%)}
  /* خلفية العلوم — بنفسجي داكن بلمسة خضراء خفيفة */
  body.theme-sci{
    background:linear-gradient(180deg,#1c2540 0%,#243a54 32%,#2f5560 65%,#3a7566 100%)}
  /* خلفية علوم الثالث — بنفسجي داكن بلمسة حمراء خفيفة */
  body.theme-sci3{
    background:linear-gradient(180deg,#2a1f42 0%,#43254e 32%,#5e3556 65%,#7d4a5a 100%)}
  /* خلفية الرياضيات — بنفسجي داكن بلمسة ليمونية خفيفة */
  body.theme-math{
    background:linear-gradient(180deg,#22253f 0%,#333f54 32%,#47605a 65%,#5a7a55 100%)}
  /* خلفية أحب لغتي (ج١) — بنفسجي داكن بلمسة تركوازية خفيفة */
  body.theme-arabic{
    background:linear-gradient(180deg,#20243f 0%,#26384e 32%,#2c5a5c 65%,#347d74 100%)}
  /* خلفية أحب لغتي (ج٢) — بنفسجي داكن بلمسة برتقالية خفيفة */
  body.theme-arabic-2{
    background:linear-gradient(180deg,#2a2340 0%,#42354e 32%,#66493d 65%,#8a6335 100%)}
  /* خلفية ديني حياتي (ج١) — بنفسجي داكن بلمسة زرقاء خفيفة */
  body.theme-dini{
    background:linear-gradient(180deg,#20263f 0%,#283a54 32%,#2c4f6e 65%,#356a94 100%)}
  /* خلفية ديني حياتي (ج٢) — بنفسجي داكن بلمسة نعناعية خفيفة */
  body.theme-dini-2{
    background:linear-gradient(180deg,#20283f 0%,#26404e 32%,#2c5c50 65%,#357d64 100%)}
  /* خلفية رياضيات الثاني — بنفسجي داكن بلمسة برتقالية دافئة خفيفة */
  body.theme-math2{
    background:linear-gradient(180deg,#241f3c 0%,#3b3350 32%,#664a34 65%,#93672c 100%)}
  /* خلفية علوم الأول — بنفسجي داكن بلمسة فيروزية سماوية خفيفة */
  body.theme-sci1{
    background:linear-gradient(180deg,#1f253f 0%,#26405a 32%,#2d6074 65%,#377f92 100%)}
  /* خلفية علوم الثاني — بنفسجي داكن بلمسة برتقالية مشمسة خفيفة */
  body.theme-sci2{
    background:linear-gradient(180deg,#251f3a 0%,#402f4a 32%,#6f4c2e 65%,#a06d24 100%)}

  /* ═══ خلفيةُ الفضاءِ ثابتةٌ على المنفذِ لا تتمرّرُ مع المحتوى (قرارُ المالك ٢٠٢٦-٠٨-٠١) ═══
     بعدَ فتحِ التمريرِ في صفحتَي الكتبِ والفهرسِ (‏`js/fit.js` — §١.٥‑أ) صارَ المستندُ أطولَ
     من الشاشة، فكانَ التدرّجُ **يتمرّرُ مع المحتوى ويُبلَّطُ** عندَ تجاوزِ ارتفاعِ منطقةِ
     تموضعِه (‏`background-repeat` الافتراضيُّ `repeat`) — فتبدو الخلفيةُ «متكرّرة».
     `background-attachment:fixed` يُثبّتُها على المنفذِ: لا حركةَ ولا تبليطَ ولا حاجةَ
     إلى `background-size` ولا إلى إلغاءِ التكرار.
     **لماذا مُحدِّدانِ لا `body` وحدَه:** كلُّ `body.theme-*` يكتبُ **اختصارَ** `background`
     فيُصفِّرُ `background-attachment` إلى `scroll`؛ وقاعدةُ `body` المجرّدةُ وزنُها أدنى
     فتُغلَب. فـ`body[class]` بوزنِ الثيماتِ نفسِه ومتأخّرٌ عنها في المصدرِ ⇒ يغلبُها.
     **لا يمسُّ شاشةَ الأسئلة:** تمريرُها مقفولٌ (`fit-lock`) فلا فرقَ فيها أصلاً. */
  body, body[class]{background-attachment:fixed}

  /* نجوم الخلفية */
  .stars{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .stars i{position:absolute;background:#fff;border-radius:50%;opacity:.7;animation:tw 3s infinite}
  @keyframes tw{0%,100%{opacity:.3}50%{opacity:.9}}
  .planet{position:fixed;border-radius:50%;z-index:0;pointer-events:none;filter:blur(.3px)}

  .app{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding:26px 20px 60px}

  /* الترويسة */
  header{text-align:center;margin-bottom:122px;position:relative}
  .logo-wrap{display:inline-flex;align-items:center;justify-content:center;
    margin-bottom:14px}
  .logo{height:130px;width:auto;display:block;
    filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
  .main-title{font-family:'Cairo';font-size:1.1rem;color:#fff;
    text-shadow:0 3px 14px rgba(0,0,0,.35)}

  /* بعد اختيار كتاب (شاشة الدروس أو النشاط): تُصغَّر الترويسة إلى النصف تقريباً
     وتُحاذى إلى أعلى يمين الشاشة (ضمن التدفّق، فلا تحجب زرّ الرجوع)، فيتّسع المحتوى
     ويقترب من الأعلى بعد تحرير المساحة الكبيرة التي كانت تشغلها الترويسة الوسطى. */
  .app:has(#lessonsScreen.active) > header,
  .app:has(#activityScreen.active) > header{
    position:fixed; top:6px; right:14px; left:auto; margin:0;
    text-align:right; z-index:40;
  }
  .app:has(#lessonsScreen.active) > header .logo,
  .app:has(#activityScreen.active) > header .logo{ height:60px }
  /* ── صفحةُ الدرسِ وحدَها: الشعارُ ينتقلُ من الترويسةِ إلى سطرِ الدرس ──
     في شاشةِ النشاطِ يُخفى شعارُ الترويسةِ ونصُّها، ويظهرُ الشعارُ داخلَ
     ‎.lesson-head‎ على السطرِ نفسِه مع عنوانِ الدرس (الطرفانِ المتقابلان)
     مباشرةً فوقَ حاويةِ السؤال. صفحةُ التنقّلِ (‎#lessonsScreen‎) لا تُمَسّ. */
  .app:has(#activityScreen.active) > header .logo-wrap,
  .app:has(#activityScreen.active) > header .main-title{ display:none }
  #activityScreen .lesson-head{display:flex;align-items:center;
    justify-content:space-between;gap:20px;margin-bottom:6px}
  /* هالةٌ داكنةٌ حولَ عنوانِ الدرس: الشريطُ الخلفيُّ صارَ يحملُ لونَ بطاقةِ الكتابِ
     بشفافيةٍ عالية، فبعضُ الألوانِ الفاتحة (الأخضرُ والبرتقاليُّ) تُنزِلُ تباينَ النصِّ
     الفاتحِ إلى ~2.5:1 — دونَ حدِّ 3:1 للنصِّ الكبير. الهالةُ تُعيدُ الفصلَ فوقَ أيِّ
     لونِ كتابٍ بلا تغميقِ الشريطِ ولا انحرافٍ عن لونِ البطاقة. */
  #activityScreen .lesson-head .screen-title{margin-bottom:0;flex:1 1 auto;min-width:0;
    text-shadow:0 2px 7px rgba(8,22,18,.80), 0 0 3px rgba(8,22,18,.65)}
  #activityScreen .lesson-head + .screen-sub{
    text-shadow:0 1px 5px rgba(8,22,18,.75)}
  #activityScreen .lesson-logo{height:60px;width:auto;display:block;flex:0 0 auto;
    filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
  .app:has(#lessonsScreen.active) > header .logo-wrap,
  .app:has(#activityScreen.active) > header .logo-wrap{ margin-bottom:2px }
  .app:has(#lessonsScreen.active) > header .main-title,
  .app:has(#activityScreen.active) > header .main-title{ font-size:.55rem }
  /* زرّ الصوت مثبَّت في أعلى اليسار كي يبقى متاحاً بعيداً عن الشعار */
  .app:has(#lessonsScreen.active) > header .sound-btn,
  .app:has(#activityScreen.active) > header .sound-btn{ position:fixed; top:10px; left:12px; right:auto }
  /* رفع المحتوى إلى الأعلى أكثر بعد خروج الترويسة من التدفّق */
  .app:has(#lessonsScreen.active), .app:has(#activityScreen.active){ padding-top:12px }
  .choose-line{text-align:center;color:#cfc4f5;font-size:1.35rem;
    margin:6px 0 12px;font-weight:500}
  .tagline{font-family:'Cairo';color:#ffd257 !important;font-size:1.1rem !important;
    margin-top:8px !important;margin-bottom:4px !important;font-weight:700}
  header h1{font-family:'Cairo';font-size:2rem;text-shadow:0 3px 14px rgba(0,0,0,.35)}
  header p{color:#cfc4f5;margin-top:6px;font-size:1rem}

  /* زر كتم/تشغيل الصوت (أعلى اليمين) */
  .sound-btn{position:absolute;top:0;right:0;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
    border-radius:16px;padding:8px 14px;font-size:1.25rem;line-height:1;
    cursor:pointer;color:#fff;backdrop-filter:blur(6px);transition:.2s;
    -webkit-user-select:none;user-select:none;touch-action:manipulation}
  .sound-btn:hover{background:rgba(255,255,255,.24)}
  .sound-btn:active{transform:scale(.94)}
  .sound-btn.muted{opacity:.6}

  /* تبويب الفصول الدراسية (الأعلى) */
  .terms{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:6px 0 54px}
  .term-btn{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);
    color:#dcd5f5;font-family:'Cairo';font-size:1.05rem;padding:13px 30px;border-radius:20px;
    cursor:pointer;transition:.2s;backdrop-filter:blur(6px);display:flex;align-items:center;gap:8px}
  .term-btn:hover{background:rgba(255,255,255,.16)}
  .term-btn.active{background:linear-gradient(135deg,#7d5ba6,#a07fd8);color:#fff;border-color:transparent;
    box-shadow:0 10px 26px rgba(125,91,166,.45)}
  .term-ic{font-size:1.2rem}
  /* تبويب الصفوف */
  .grades{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:24px 0 30px}
  .grade{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);
    color:#e6e1ff;font-family:'Cairo';font-size:1.05rem;padding:12px 26px;border-radius:18px;
    cursor:pointer;transition:.2s;backdrop-filter:blur(6px)}
  .grade:hover{background:rgba(255,255,255,.18)}
  .grade.active{background:#FFE0B3;color:#3a2c0a;border-color:transparent;
    box-shadow:0 10px 24px rgba(217,161,92,.35)}

  /* شبكة الكتب (مربّعات منحنية) */
  .books{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;max-width:720px;margin:0 auto}
  /* ═══ إطارُ البطاقةِ الأبيضُ ذو الزوايا السميكة (قرارُ المالك ٢٠٢٦-٠٨-٠١) ═══
     رسمٌ واحدٌ يُستعمَلُ 9-slice (‏`border-image`) — أسلوبُ المنصّةِ المعتمدُ للأطرِ المصوّرةِ
     التي تتمدّدُ مع المحتوى (مهارةُ shoogp-ui §١.١): الأركانُ ثابتةُ الشكلِ والأضلاعُ تتمدّد.
     **كيف تنشأُ السماكةُ المتغيّرة:** الحلقةُ محصورةٌ بين مستطيلَين مستديرَين، الخارجيُّ
     نصفُ قطرِه **46** والداخليُّ **58** (أكبرُ لا أصغر) وبإزاحةٍ 8 — فعندَ الأضلاعِ المستقيمةِ
     تكونُ الفجوةُ 8 بالضبط، وعلى القطرِ عندَ الركنِ تتّسعُ إلى **16.3** (الضِّعف) بانتقالٍ
     مماسيٍّ ناعمٍ لأنّ الحدَّين قوسانِ لا خطوطٌ مكسورة. (لو جُعِلَ الداخليُّ أصغرَ لانقلبت
     الحلقةُ فرقّت عندَ الأركان.)
     **لماذا عرضُ الحدِّ 39px:** الشريحةُ 60 والقطرُ الخارجيُّ 46، فنصفُ القطرِ المعروضُ =
     46 × (39÷60) = **30px** — أي **استدارةُ بطاقةِ الكتابِ نفسُها** فينطبقُ الإطارُ على
     حافّتِها بلا انزلاق. تغييرُ العرضِ يغيّرُ الاستدارةَ معه، فلا يُغيَّرُ إلا مع نظيرِه.
     **الحلقةُ ملاصقةٌ لحافّةِ الصندوقِ (إزاحةٌ صفر — قرارُ المالك):** كانت مُزاحةً 10 وحدات
     لتُفسِحَ للظلِّ المخبوزِ في الرسم، فبقيت حافّةُ البطاقةِ الملوّنةُ ظاهرةً **6.5px** خارجَ
     الأبيضِ فبدا الإطارُ طافياً داخلَها لا مُغطّياً لحدِّها. الآن الحدُّ الخارجيُّ للحلقةِ
     على الصندوقِ تماماً فيُغطّي المحيطَ، **والظلُّ انتقلَ إلى `filter` في CSS** فلا يحتاجُ
     فسحةً داخلَ الرسم. */
  :root{
    --shoogp-frame-w:39px;
    --shoogp-frame:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><path fill='%23ffffff' fill-rule='evenodd' d='M46,0 H114 A46,46 0 0 1 160,46 V114 A46,46 0 0 1 114,160 H46 A46,46 0 0 1 0,114 V46 A46,46 0 0 1 46,0 Z M68,8 H92 A60,60 0 0 1 152,68 V92 A60,60 0 0 1 92,152 H68 A60,60 0 0 1 8,92 V68 A60,60 0 0 1 68,8 Z'/></svg>");
    --shoogp-frame-shadow:drop-shadow(0 2px 5px rgba(0,0,0,.28));
  }
  /* الإطارُ طبقةٌ فوقَ البطاقةِ لا حدٌّ لها: `.book` عليه `overflow:hidden` وغلافٌ مصوَّر،
     فالحدُّ الحقيقيُّ كان سيُقتَصُّ أو يزيحَ المحتوى. و`::after` محجوزٌ للمعةِ البطاقة.
     الظلُّ بـ`filter` يتبعُ شفافيةَ الحلقةِ فيقعُ حولَها **وداخلَ فتحتِها** معاً؛ وما وقعَ
     خارجَ البطاقةِ يقتصُّه `overflow:hidden` ويبقى الداخليُّ فيؤدّي العمقَ المطلوب. */
  .book::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    border:var(--shoogp-frame-w) solid transparent;
    border-image:var(--shoogp-frame) 60 stretch;
    filter:var(--shoogp-frame-shadow)}
  .book{border-radius:30px;padding:26px 22px;cursor:pointer;position:relative;overflow:hidden;min-height:200px;
    display:flex;flex-direction:column;justify-content:space-between;transition:.25s;
    box-shadow:0 16px 34px rgba(0,0,0,.3), inset 0 2px 10px rgba(255,255,255,.3)}
  .book:hover{transform:translateY(-6px)}
  .book::after{content:"";position:absolute;top:0;left:0;right:0;height:45%;
    background:linear-gradient(180deg,rgba(255,255,255,.25),transparent)}
  .book .ic{font-size:52px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));position:relative;z-index:1}
  .book .btitle{font-family:'Cairo';font-size:1.5rem;color:#fff;position:relative;z-index:1;
    text-shadow:0 2px 8px rgba(0,0,0,.2)}
  .book .term{color:rgba(255,255,255,.9);font-size:.92rem;margin-top:4px;position:relative;z-index:1}
  .book .newbadge{position:absolute;top:16px;left:16px;background:var(--new);color:#fff;
    font-family:'Cairo';font-size:.75rem;padding:5px 12px;border-radius:12px;z-index:2;transform:rotate(-6deg)}
  .book.has-cover{padding:0;overflow:hidden;min-height:260px}
  .book.has-cover::after{display:none}
  .cover-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:30px}
  /* ── لوحةُ ألوانِ بطاقاتِ الكتب — **مصدرُ حقيقةٍ واحد** ──
     تُعلَنُ المحطّتانِ (فاتحة/غامقة) لكلِّ لونٍ متغيّراتٍ على :root، فتستهلكُها
     بطاقةُ الكتابِ هنا **والشريطُ الخلفيُّ في صفحةِ الدرس** (‏.qband في
     css/shoogp-ui.css) — فيستحيلُ أن ينفصلَ لونُ الشريطِ عن لونِ البطاقة.
     **لتغييرِ لونِ كتاب: هذه المتغيّراتُ وحدَها.** */
  :root{
    --bk-red-a:#f26169;    --bk-red-b:#cf3a44;
    --bk-green-a:#5cc98a;  --bk-green-b:#3fa870;
    --bk-orange-a:#f5a04a; --bk-orange-b:#e07f2b;
    --bk-blue-a:#4fa8e8;   --bk-blue-b:#2f88d0;
    --bk-purple-a:#a07fd8; --bk-purple-b:#7f5cc0;
    --bk-teal-a:#4bb3ab;   --bk-teal-b:#33978f;
  }
  .bk-red{background:linear-gradient(145deg,var(--bk-red-a),var(--bk-red-b))}
  .bk-green{background:linear-gradient(145deg,var(--bk-green-a),var(--bk-green-b))}
  .bk-orange{background:linear-gradient(145deg,var(--bk-orange-a),var(--bk-orange-b))}
  .bk-blue{background:linear-gradient(145deg,var(--bk-blue-a),var(--bk-blue-b))}
  .bk-purple{background:linear-gradient(145deg,var(--bk-purple-a),var(--bk-purple-b))}
  .bk-teal{background:linear-gradient(145deg,var(--bk-teal-a),var(--bk-teal-b))}
  .empty{grid-column:1/-1;text-align:center;color:#b8aee5;padding:50px;font-size:1.05rem}

  /* شاشة الدروس */
  .screen{display:none;animation:fade .35s}
  .screen.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .back{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;
    padding:10px 20px;border-radius:14px;cursor:pointer;font-family:'Tajawal';font-weight:700;font-size:.95rem;
    margin-bottom:20px;display:inline-flex;align-items:center;gap:8px}
  .back:hover{background:rgba(255,255,255,.2)}
  .screen-title{font-family:'Cairo';font-size:1.7rem;margin-bottom:6px}
  .screen-sub{color:#cfc4f5;margin-bottom:24px}

  .unit-box{margin-bottom:14px;border-radius:20px;overflow:hidden;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
  .unit-head{width:100%;display:flex;align-items:center;gap:12px;padding:18px 20px;cursor:pointer;
    background:rgba(255,255,255,.08);border:none;font-family:'Tajawal';transition:.2s;text-align:right}
  .unit-head:hover{background:rgba(255,255,255,.14)}
  .unit-head.open{background:linear-gradient(135deg,rgba(255,224,179,.32),rgba(255,224,179,.18))}
  .unit-no{background:#FFE0B3;color:#3a2c0a;font-family:'Cairo';
    font-size:.78rem;font-weight:700;padding:6px 13px;border-radius:10px;white-space:nowrap}
  .unit-title{font-family:'Cairo';font-size:1.2rem;color:#fff;flex:1}
  .unit-count{font-size:.82rem;color:#cfc4f5;white-space:nowrap}
  .unit-chevron{font-size:1.4rem;color:#ffe27a;transition:transform .3s;line-height:1}
  .unit-head.open .unit-chevron{transform:rotate(180deg)}
  .unit-body{max-height:0;overflow:hidden;transition:max-height .4s ease;
    display:flex;flex-direction:column;gap:0}
  .unit-body.open{max-height:1200px}
  .unit-body .lesson{margin:0;border-radius:0;background:transparent;
    border:none;border-top:1px solid rgba(255,255,255,.08)}
  .unit-body .lesson:hover:not(.locked){background:rgba(255,255,255,.1);transform:none}
  .lessons{display:flex;flex-direction:column;gap:0;max-width:640px}
  .lesson{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:20px;
    padding:20px 24px;cursor:pointer;display:flex;align-items:center;gap:16px;transition:.2s;backdrop-filter:blur(6px)}
  .lesson:hover{background:rgba(255,255,255,.18);transform:translateX(-4px)}
  .lesson .num{width:44px;height:44px;border-radius:14px;background:#FFE0B3;
    color:#3a2c0a;font-family:'Cairo';font-size:1.2rem;display:grid;place-items:center;flex-shrink:0}
  .lesson .lt{font-family:'Cairo';font-size:1.2rem;color:#fff}
  .lesson .arrow{margin-inline-start:auto;font-size:1.3rem;color:#cfc4f5}
  .lesson.locked{opacity:.5;cursor:not-allowed}
  .lesson.locked:hover{transform:none;background:rgba(255,255,255,.1)}

  /* شاشة النشاط */
  .act-tabs{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}
  .act-tab{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#e6e1ff;
    font-weight:700;padding:11px 22px;border-radius:14px;cursor:pointer;transition:.2s}
  .act-tab.active{background:linear-gradient(135deg,#5fc4f0,#2f9fe0);color:#fff;border-color:transparent}
  .panel{display:none}
  .panel.active{display:block}
  /* قاعدة التنفّس البصري: الإطار الرئيسي padding 32px */
  .card-box{background:rgba(255,255,255,.96);border-radius:24px;padding:32px;color:#2f3a2c}
  .card-box h3{font-family:'Cairo';color:#2c6e3f;font-size:1.3rem;margin-bottom:6px}
  .card-box .desc{color:#7a8a75;margin-bottom:22px}

  /* سحب وإفلات */
  .dnd{display:grid;grid-template-columns:1fr 260px;gap:24px}
  @media(max-width:680px){.dnd{grid-template-columns:1fr}}
  /* عرضية (نسبة الصورة ≥ 1.2): البطاقات صفّ أفقيّ في الأعلى + الصورة بالعرض الكامل أسفلها.
     التبديل يُدار في renderDragDrop (js/app.js) بإضافة/إزالة .dnd-wide حسب نسبة الصورة. */
  .dnd.dnd-wide{display:flex;flex-direction:column;gap:16px}
  /* المسرح يتوسّط حين يُقيَّد عرضه بسقفٍ للصور الطولية (dndCapStage في js/app.js) */
  .dnd.dnd-wide .stage{margin-inline:auto;width:100%}
  .dnd.dnd-wide .bank{order:-1;flex-direction:row;flex-wrap:wrap;align-items:flex-start;
    justify-content:center;gap:12px}
  .dnd.dnd-wide .bank .bt{flex-basis:100%;text-align:center;margin-bottom:0}
  /* أسئلة تحديد الأجزاء (hotspot): لا بطاقات جانبية — الصورة تملأ العرض وتتوسّط */
  .dnd-solo{grid-template-columns:1fr}
  /* `min(…,100%)` لا 640px مجرّدة: السقف الثابت يتجاوز نافذة الإطار حين تكون أضيق
     منه (نافذة الرياضيات tall = 622px) فيخرج الرسم عن الإطار ويميل عن مركزه.
     القيد بالحاوية يمنع ذلك ولا يصغّر شيئاً حين تتّسع النافذة. */
  .dnd-solo .stage-img{max-width:min(640px,100%);margin-inline:auto}
  .stage{position:relative;background:linear-gradient(180deg,#eaf5ee 60%,#f3e8d8 60%);
    border-radius:18px;height:400px;overflow:hidden;border:2px dashed rgba(181,201,154,.55)}
  .stage-img{background:#fdfbf5;display:flex;align-items:center;justify-content:center}
  .plantimg{max-height:100%;max-width:100%;object-fit:contain}
  /* غلاف الرسم/الصورة: يحافظ على النسبة وتُوضع الأهداف نسبةً إليه */
  /* `max-width:100%` حارسٌ عام: الغلاف يأخذ عرضه من نسبة الرسم × ارتفاع المسرح،
     فقد يتجاوز نافذة الإطار حين تكون ضيّقةً (نافذة الرياضيات tall = 622px مقابل
     رسمٍ عرضه 654px) فيخرج الرسم عن الإطار من الجهتين. */
  .figwrap{position:relative;height:100%;display:inline-block;max-width:100%}
  .figwrap svg,.figwrap img{max-width:100%}
  .figwrap svg,.figwrap img{height:100%;width:auto;display:block}
  /* ملاءمة العرض: للصور العريضة (تملأ العرض ويتوسّط ارتفاعها) */
  .figwrap.fw{height:auto;width:100%;display:block}
  .figwrap.fw img,.figwrap.fw svg{width:100%;height:auto}
  .psvg{position:absolute;inset:0;width:100%;height:100%}
  /* نمط التسمية بخطوط واصلة: صورة في الوسط + صناديق حولها + طبقة SVG */
  .stage-label{position:relative;overflow:hidden}
  .labelimg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    max-height:86%;max-width:60%;display:block}
  img.labelimg{width:auto;height:auto}
  .labelimg svg{width:100%;height:100%;display:block}
  /* ملاءمة العرض في نمط التسمية (fit:"width"): للرسوم العريضة كخط الأعداد */
  .labelimg.lw{width:86%;max-width:86%;height:auto}
  .labelimg.lw svg,img.labelimg.lw{width:100%;height:auto}
  /* خطوط التوصيل والنقاط: السلوك الافتراضي لكل المواد — وفي الرياضيات لا تُنشأ
     عناصرها أصلاً في renderDragDrop (قاعدة DESIGN_RULES.md §خطوط التوصيل). */
  .dndlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .dndline{stroke:#f5a04a;stroke-width:2.5;stroke-linecap:round}
  .dnd-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:#f5a04a;
    border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 3px rgba(0,0,0,.35)}
  /* صندوق الإفلات الفارغ: يبقى بلونه/شكله القديم (أبيض شفّاف بحدّ منقّط) */
  .target{position:absolute;transform:translate(-50%,-50%);background:rgba(255,255,255,.7);
    border:2px dashed #b5c99a;border-radius:12px;padding:8px 4px;min-width:88px;text-align:center;
    font-weight:700;color:#9aa596;font-size:.86rem;transition:.2s}
  /* النوع (ب) — هدف على خانة مرسومة داخل svg السؤال (DESIGN_RULES.md §خطوط
     التوصيل): يطابق خانته موقعاً ومقاساً (redraw يضبطهما بالبكسل)، فيُصفَّر
     حدُّه الأدنى وحشوُه كي لا يفيض عن الخانة */
  /* ‏--cellfs يضبطه redraw = خط أرقام الرسم بمقياس الصورة الحيّ — فالعدد الموضوع
     في الخانة بحجم جيرانه في الصف نفسه لا أصغر */
  .target.target-cell{min-width:0;padding:0;display:flex;align-items:center;justify-content:center;
    font-size:var(--cellfs, 1.05rem);line-height:1}
  /* قبل الامتلاء: شفاف تماماً — الخانة المتقطّعة المرسومة نفسها هي المرئيّ */
  .target.target-cell:not(.filled):not(.over){background:transparent;border-color:transparent;box-shadow:none;color:transparent;text-shadow:none}
  .target.over{background:#fff6d8;border-color:#f5b942;transform:translate(-50%,-50%) scale(1.08)}
  /* بمجرد وضع الإجابة داخل الصندوق: يتحوّل إلى البرتقالي الفاتح #FFE0B3 (ويعود للقديم إن أُفرغ) */
  .target.filled{background:#FFE0B3;border-style:solid;border-color:#e0b380;color:#3a2c0a}
  .target.filled.correct{background:#a7c957;border-color:#82a83e;color:#20340a}
  .bank{display:flex;flex-direction:column;gap:16px}
  .bank .bt{font-weight:700;color:#2c6e3f;margin-bottom:2px}
  .chip{background:#FFE0B3;border:2px solid #e0b380;border-radius:14px;
    padding:13px 16px;font-weight:700;font-size:1.02rem;color:#4a3a10;cursor:grab;text-align:center;
    box-shadow:0 3px 8px rgba(217,161,92,.22);user-select:none;touch-action:none;transition:.15s}
  .chip.used{opacity:.35;pointer-events:none;text-decoration:line-through}
  .chip.dragging{opacity:1;transform:scale(1.06);box-shadow:0 6px 16px rgba(245,160,74,.55);cursor:grabbing}

  /* ⑮ التلوين بالتعليمات: لوحة ألوان كبيرة + رسم SVG بأجزاء <g class="cpart"> قابلة للتلوين */
  .colorq{display:flex;flex-direction:column;gap:16px}
  .cpalette{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
  .cswatch{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:3px solid #e0d6c2;
    border-radius:16px;padding:8px 14px;min-height:58px;font-weight:800;font-size:1rem;
    color:#3a2c0a;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.18);transition:.15s;touch-action:manipulation}
  .cswatch:hover{transform:translateY(-2px)}
  .cswatch.sel{border-color:#f5a04a;background:#fff6e6;box-shadow:0 0 0 4px rgba(245,160,74,.4)}
  .bucket-ic{width:42px;height:42px;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.22))}
  .bucket-wrap{display:inline-block;transition:transform .15s;transform-origin:50% 80%}
  .cswatch.sel .bucket-wrap{transform:scale(1.2) rotate(-16deg)}
  .cinstrbar{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
  .cinstr{display:inline-flex;align-items:center;background:rgba(255,255,255,.92);
    border-radius:12px;padding:6px 16px;font-weight:700;color:#3a2c0a;font-size:1.05rem}
  /* حدُّ مناطقِ التلوين = حدُّ ورقةِ المواصفات البصرية نفسُه (‏#111111‎ — CLAUDE.md).
     كان ‎#33334d‎ قبلَ اعتمادِ الورقة؛ وُحِّد هنا لأنّ الحدَّ خاصيةُ الرسمِ لا خاصيةُ السؤال. */
  .csvg .cpart{fill:#efe7d3;stroke:#111111;stroke-width:3;transition:fill .12s;cursor:pointer}
  .csvg .cpart:hover{filter:brightness(.96)}
  .csvg .cpart.cwrong{stroke:#c94a4a!important;stroke-width:5;stroke-dasharray:7 4}
  /* بعد اختيار دلو: مؤشّر فرشاة طلاء فوق منطقة التلوين (حاسوب) */
  .csvg.brushing,.csvg.brushing .cpart{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g stroke='black' stroke-width='1.5' stroke-linejoin='round'><rect x='18' y='3' width='6' height='16' rx='2' transform='rotate(45 21 11)' fill='saddlebrown'/><path d='M10 14 l7 7 l-3 3 l-8 -2 z' fill='gold'/><path d='M5 22 l3 3 l-5 1 z' fill='dimgray'/></g></svg>") 4 28,crosshair}

  /* ⑥ الترتيب التسلسلي: بطاقات كبيرة تُرتَّب بالسحب لتغيير أماكنها */
  .seq{width:100%;max-width:620px;margin-inline:auto}
  .seq-hint{color:#eaf1ee;font-size:.95rem;font-weight:700;margin-bottom:10px;opacity:.9}
  /* مساحة (خانة) على جانب البداية للأرقام الثابتة خارج الصناديق */
  .seqlist{list-style:none;margin:0;padding:0;padding-inline-start:50px;display:flex;flex-direction:column;gap:16px}
  .seqitem{position:relative;display:flex;align-items:center;gap:12px;background:#FFE0B3;border:2px solid #e0b380;
    border-radius:16px;padding:14px 16px;color:#3a2c0a;font-weight:700;font-size:1.05rem;
    cursor:grab;touch-action:none;box-shadow:0 3px 10px rgba(0,0,0,.22);transition:background .12s,border-color .12s,transform .12s}
  .seqitem:active{cursor:grabbing}
  .seqitem.dragging{opacity:.55;transform:scale(1.02);box-shadow:0 8px 20px rgba(0,0,0,.32)}
  .seqitem.correct{background:#a7c957;border-color:#82a83e;color:#20340a}
  .seqitem.wrong{background:#fde2e2;border-color:#c94a4a;color:#c94a4a}
  /* الرقم الثابت خارج الصندوق (بجانبه في خانة البداية) — يبقى ١،٢،٣… ثابتاً بينما تتحرك البطاقات */
  .seqitem::before{content:attr(data-pos);position:absolute;inset-inline-start:-50px;top:50%;transform:translateY(-50%);
    width:38px;height:38px;border-radius:50%;background:#fff;color:#c8791f;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;box-shadow:0 2px 5px rgba(0,0,0,.28)}
  .seq-txt{flex:1 1 auto;text-align:right}
  .seq-grip{flex:0 0 auto;color:#b98a3e;font-size:1.5rem;line-height:1;cursor:grab;user-select:none}

  /* ⑦ التصنيف في مجموعات: صناديق جنباً إلى جنب تُسحب إليها العناصر */
  .classify{width:100%;max-width:640px;margin-inline:auto;display:flex;flex-direction:column;gap:18px}
  .grp-row{display:flex;gap:16px;flex-wrap:wrap}
  .grp{flex:1 1 0;min-width:170px;display:flex;flex-direction:column;border:2px solid rgba(255,255,255,.4);
    border-radius:16px;overflow:hidden;background:rgba(255,255,255,.08)}
  .grp-h{background:rgba(255,255,255,.2);color:#fff;font-weight:800;text-align:center;padding:10px 8px;font-size:1.08rem;
    text-shadow:0 1px 2px rgba(0,0,0,.3)}
  .grp-drop{flex:1 1 auto;min-height:120px;padding:12px;display:flex;flex-wrap:wrap;gap:16px;
    align-content:flex-start;justify-content:center;background:#fff;transition:background .12s}
  .grp-drop.over{background:#fff6d8}
  .clsbank .chips.over{background:rgba(255,246,216,.28)}
  .clsbank .chips{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;min-height:54px;padding:8px;border-radius:12px;transition:background .12s}
  .chip.ok{background:#a7c957;border-color:#82a83e;color:#20340a}
  .chip.no{background:#fde2e2;border-color:#c94a4a;color:#c94a4a}

  /* ⑧ ملء الفراغ بالسحب: جملة فيها فراغات تُسحب إليها الكلمات */
  .fill{width:100%;max-width:640px;margin-inline:auto;display:flex;flex-direction:column;gap:22px}
  /* نصّ السؤال داخل صندوق أبيض */
  .fbtext{background:#fff;color:#2f3a2c;font-size:1.25rem;line-height:2.6;text-align:center;font-weight:700;
    padding:22px 24px;border-radius:18px;box-shadow:0 4px 14px rgba(0,0,0,.22)}
  /* قاعدة التنفّس البصري: هامش عمودي ≥8px كي لا تتلامس صناديق الأسطر المتجاورة */
  .blank{display:inline-block;min-width:104px;margin:8px 6px;padding:6px 14px;border-radius:12px;vertical-align:middle;
    background:#f4ecdd;border:2px dashed #c3ad82;color:#9c7b3f;font-weight:800;
    text-align:center;cursor:pointer;transition:.12s;box-shadow:0 1px 4px rgba(0,0,0,.12)}
  .blank.over{background:#fff6d8;border-color:#f5b942;color:#3a2c0a;transform:scale(1.05)}
  .blank.filled{background:#FFE0B3;border-style:solid;border-color:#e0b380;color:#3a2c0a}
  .blank.correct{background:#a7c957;border-color:#82a83e;color:#20340a}
  .blank.wrong{background:#fde2e2;border-color:#c94a4a;color:#c94a4a}
  .fillbank .chips{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:8px}

  /* توصيل */
  /* التوصيل: طبقة SVG لرسم الخطوط المنحنية بين المفردتين */
  .matchwrap{position:relative;max-width:620px;margin:auto}
  .matchsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
  .match{display:grid;grid-template-columns:1fr 1fr;gap:72px;position:relative;z-index:2}
  .mcol{display:flex;flex-direction:column;gap:16px}
  .mitem{padding:15px;border-radius:14px;font-weight:700;cursor:pointer;border:2px solid transparent;
    transition:.2s;text-align:center;font-size:1.02rem}
  .mitem.left{background:#FFE0B3;color:#4a3a10;border-color:#e0b380}
  .mitem.right{background:#FFE0B3;color:#4a3a10;border-color:#e0b380}
  .mitem.selected{transform:scale(1.04);box-shadow:0 6px 16px rgba(0,0,0,.12);border-color:#f5b942}
  .mitem.matched{background:#a7c957;color:#20340a;border-color:#82a83e;cursor:default;pointer-events:none}

  .btn{font-family:'Tajawal';font-weight:700;font-size:1rem;border:none;padding:12px 26px;
    border-radius:14px;cursor:pointer;transition:.2s;color:#fff}
  .btn-check{background:#b5c99a;color:#20340a} .btn-check:hover{background:#a1b884}
  .btn-reset{background:#eee;color:#666} .btn-reset:hover{background:#ddd}
  /* قاعدة التنفّس البصري: أزرار تحقّق/إعادة ≥24px عن آخر محتوى */
  .actions{display:flex;gap:16px;justify-content:center;margin-top:24px;flex-wrap:wrap}
  /* أزرار تحقّق/إعادة تُتبنّى من جسم السؤال إلى وسط شريط التنقّل (renderQuestions)
     فيتفرّغ داخل الإطار للسؤال؛ وما بقي منها في الجسم يُخفى فلا يدخل قياس الإطار */
  .qbody .actions{display:none}
  .qnav .qnav-mid{display:flex;justify-content:center;align-items:center;min-width:132px}
  .qnav .qnav-mid .actions{display:flex;margin-top:0}
  .fb{text-align:center;margin-top:16px;font-weight:700;font-size:1.08rem;min-height:26px}
  .fb.good{color:#2c6e3f} .fb.bad{color:#c94a4a}

  /* ===== محرّك الأسئلة الموحّد ===== */

  /* ═══════════════════════════════════════════════════════════════
     ⚠️ قاعدةُ الاحتواءِ الأساسيةُ لكلِّ أنواعِ الأسئلة — **لا تُزَل** ⚠️
     قاعدةُ تصميمٍ دائمةٌ مرجعُها DESIGN_RULES.md §«احتواء محتوى السؤال داخل
     الإطار» — عندَ أيِّ تعارضٍ يُطابَقُ الكودُ على ما هو موثَّقٌ هناك.
     الغرض: ألّا يخرجَ محتوى أيِّ سؤالٍ — قائمٍ أو مستقبليّ (لوحةٌ · سحبٌ وإفلات ·
     بازل · ترتيب · اختيار …) — عن حدودِ إطارِه، ولا يتداخلَ مع العنوانِ وأزرارِ
     الترويسة. قاعدةٌ **واحدةٌ في طبقةِ النوعِ المشتركة**، فلا تُكرَّرُ في كلِّ
     نوعٍ ولا تُنسى مع نوعٍ جديد.

     ① `min-height:0; min-width:0` على حاوياتِ السؤال: عنصرُ flex **لا يتقلّصُ
        افتراضياً** عن حجمِ محتواه (‏`min-*:auto` = الحدُّ الأدنى التلقائيّ)، فيتجاوزُ
        المحتوى ارتفاعَ الإطارِ المتاحَ ويبرزُ من أعلاه وأسفله. الصفرُ يفتحُ بابَ
        التقلّصِ فتُطبَّقَ الحدودُ أدناه فعلاً — وهذا **السببُ التقنيُّ الجذريُّ**
        لخروجِ شبكةِ لوحةِ المائةِ عن الإطارِ المعدنيّ.
     ② `.qbody`: ‏`max-height:100%` + `overflow:hidden` — حدُّ أمانٍ نهائيّ: لا
        يتجاوزُ متنُ السؤالِ ارتفاعَ نافذتِه مهما جدَّ من محتوى.
     ③ الوسائطُ داخلَ `.qbody` (‏svg · img · canvas · video · ‎.media‎): لا تتجاوزُ
        حاويتَها (‏`max-width/height:100%`) وتحفظُ نسبتَها (‏`object-fit:contain`
        للصورةِ، و`preserveAspectRatio` للـSVG).
        **لا نفرضُ `height:auto` على كلِّ وسيط**: بعضُ رسومِ الأسئلةِ طبقاتٌ مطلقةُ
        الموضعِ بارتفاعِ 100% (خطوطُ التوصيل `.matchsvg` · خطوطُ الخريطةِ الذهنية
        `.mmlines` · طبقةُ التلوين `.psvg`) فيصفّرُها `height:auto`. الوسيطُ الجاري
        في التدفّقِ يعلنُ `width:100%;height:auto` في قاعدةِ نوعِه (‏`.hcsvg` ·
        `.nlsvg` · `.arsvg`).
     ④ **الوسيطُ المرن** (اختياريٌّ بالوسم): الرسمُ الذي يجبُ أن *يتقلّصَ* ليتلاءمَ
        مع النافذةِ بدلَ أن يفيضَ منها يُوسَمُ `qfit-flex` في مُنشئِه (مثلُ شبكةِ لوحةِ
        المائة)، فيصيرَ عنصرَ flex قابلاً للتقلّصِ وتتكفّلَ `preserveAspectRatio`
        بحفظِ نسبته. وطبقةُ الإطار (‏js/shoogp-ui.js) تقرأُ الوسمَ فتُعطي البطاقةَ
        **أوسعَ إطارٍ مسموح** (لا أضيقَه) وتُهيّئُ عمودَ flex على `.qbody`.
        ولا يُوسَمُ الوسمُ عامّاً لكلِّ وسيط: لو تقلّصَ كلُّ رسمٍ لصار كلُّ سؤالٍ
        «يسعُ» أيَّ إطارٍ فاختارت الخوارزميةُ أصغرَ إطارٍ دائماً.
     ═══════════════════════════════════════════════════════════════ */
  .qslides,.qcard,.qcard .qbody,.qframe,.qwin{min-height:0;min-width:0;box-sizing:border-box}
  .qcard .qbody{max-height:100%;overflow:hidden}
  /* ‏`:where()` بلا وزنٍ في التخصيص (0,0,0) **عن قصد**: هذه *قاعدةٌ أساسيةٌ* لا حاكمة،
     فأيُّ قاعدةِ نوعٍ لها حدُّها الخاصُّ تغلبُها (مثلُ `.labelimg{max-height:86%}` التي
     تحجزُ حولَ الرسمِ فراغَ صناديقِ التسميةِ وخطوطِها). ولو كُتبت بوزنٍ أعلى لَجرفت
     تلك الحدودَ إلى 100% فالتصقَ الرسمُ بما حولَه. */
  :where(.qcard .qbody) :where(svg,img,canvas,video,.media){max-width:100%;max-height:100%}
  :where(.qcard .qbody) :where(img,canvas,video){object-fit:contain}
  /* ④ الوسيطُ المرن ووعاؤه (الوسمُ من المُنشئِ/طبقةِ الإطار — انظر أعلاه) */
  .qcard .qbody.qflexmedia{display:flex;flex-direction:column;flex:0 1 auto;min-height:0}
  .qcard .qbody.qflexmedia>*{min-height:0}
  .qcard .qbody .qfit-flex{flex:0 1 auto;min-height:0}

  /* بطاقة السؤال تأخذ هوية الكتاب: خلفيتها بلون بطاقة الكتاب (bk-*) + نجوم بيضاء
     (الثيم الفضائي). تتغيّر تلقائياً حسب الكتاب الحالي عبر صنف اللون المُضاف. */
  /* جميع بطاقات الأسئلة: خلفية رمادية بشفافية 35% + حدّ أبيض */
  /* قاعدة التنفّس البصري: بطاقة السؤال هي الإطار الرئيسي → padding 32px */
  .qcard{margin-bottom:18px;position:relative;overflow:hidden;border-radius:24px;
    padding:32px 32px 34px;color:#fff;
    background:linear-gradient(150deg,rgba(158,162,170,.35),rgba(120,124,132,.35));
    border:2px solid rgba(255,255,255,.9);
    box-shadow:0 12px 30px rgba(0,0,0,.28)}
  @media(max-width:560px){ .qcard{padding:24px 24px 28px} }
  /* تعتيم قاعديّ أسفل البطاقة (عمق + وضوح النصّ) */
  .qcard::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(0,0,0,.16) 100%)}
  /* نقاط شبكية صغيرة منتظمة (نفس نمط خلفية بطاقة الكتاب) */
  .qcard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.17) 1.3px, transparent 1.7px);
    background-size:22px 22px;background-position:6px 6px}
  /* المحتوى فوق النقاط والتعتيم */
  .qcard>.qhead,.qcard>.qprompt,.qcard>.qbody,.qcard>.qfb{position:relative;z-index:2}
  .qhead{display:flex;justify-content:space-between;align-items:center;font-family:'Tajawal';margin-bottom:2px}
  /* نصوص رأس/متن البطاقة فاتحة لتوضح فوق لون الكتاب */
  .qnum{font-weight:700;color:#ffe27a;font-size:1.3rem}
  .qtype{color:#eaf1ee;font-size:1.08rem;font-weight:700}
  /* مسافة أوسع تحت نصّ السؤال قبل الصور/الصناديق (يزيد ارتفاع البطاقة عند الحاجة) */
  .qcard>.qprompt{margin:8px 0 38px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.34);text-align:center}
  /* توسيط محتوى السؤال داخل بطاقته */
  .qcard>.qbody{display:flex;flex-direction:column;align-items:center}
  .qcard>.qbody>*{width:100%}
  .qcard .qfb.good{color:#c2f2d1;text-shadow:0 1px 2px rgba(0,0,0,.35)}
  .qcard .qfb.bad{color:#ffc7c0;text-shadow:0 1px 2px rgba(0,0,0,.35)}
  .qcard .bank .bt{color:#eef5ef}
  /* بطاقات/أزرار الإجابات تبقى بارزة فوق أي لون بظلّ واضح */
  .qcard .opt,.qcard .tf,.qcard .chip,.qcard .mitem,.qcard .target,.qcard .excl-opt,.qcard .mmchip,.qcard .aopt{box-shadow:0 3px 10px rgba(0,0,0,.22)}
  /* اختيار من متعدد */
  .opts{display:flex;flex-direction:column;gap:16px;max-width:560px}
  .opt{width:100%;text-align:right;background:#FFE0B3;border:2px solid #e0b380;border-radius:14px;
    padding:14px 18px;cursor:pointer;font-family:'Tajawal';font-weight:700;color:#4a3a10;font-size:1.02rem;transition:.15s}
  .opt:hover:not(:disabled){background:#ffd39a}
  .opt:disabled{cursor:default;opacity:.9}
  .opt.correct{background:#a7c957;color:#20340a;border-color:#82a83e}
  .opt.wrong{background:#fde2e2;color:#c94a4a;border-color:#c94a4a}
  /* الاستبعاد (الدخيل) — عناصر كبيرة تناسب اللمس على السبورة، تتوزّع في صفّ يلتفّ */
  .excl{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:640px;margin:0 auto}
  .excl-opt{min-width:150px;text-align:center;background:#FFE0B3;border:2px solid #e0b380;border-radius:16px;
    padding:20px 26px;cursor:pointer;font-family:'Tajawal';font-weight:700;color:#4a3a10;font-size:1.15rem;transition:.15s}
  .excl-opt:hover:not(:disabled){background:#ffd39a}
  .excl-opt:disabled{cursor:default;opacity:.9}
  .excl-opt.correct{background:#a7c957;color:#20340a;border-color:#82a83e}
  .excl-opt.wrong{background:#fde2e2;color:#c94a4a;border-color:#c94a4a}
  /* السؤال الصوتي — زر استماع كبير وخيارات صور كبيرة تناسب اللمس على السبورة */
  .audioq{display:flex;flex-direction:column;align-items:center;gap:20px}
  .aplay{background:#f5a04a !important;color:#fff !important;border:none !important;font-size:1.3rem;
    padding:16px 44px;border-radius:40px;min-width:210px;box-shadow:0 4px 12px rgba(0,0,0,.28)}
  .aplay:hover{filter:brightness(1.06)}
  .aopts{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
  .aopt{background:#FFE0B3;border:3px solid #e0b380;border-radius:18px;padding:12px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:8px;width:162px;transition:.15s;font-family:'Tajawal'}
  .aopt:hover:not(:disabled){background:#ffd39a}
  .aopt:disabled{cursor:default;opacity:.9}
  .aopt-img{width:132px;height:132px;object-fit:contain;background:#fff;border-radius:12px}
  .aopt.noimg{min-height:120px;justify-content:center}
  .aopt-label{font-weight:800;color:#4a3a10;font-size:1.2rem}
  .aopt.correct{background:#a7c957;border-color:#82a83e;color:#20340a}
  .aopt.correct .aopt-label{color:#20340a}
  .aopt.wrong{background:#fde2e2;border-color:#c94a4a;color:#c94a4a}
  .aopt.wrong .aopt-label{color:#c94a4a}
  /* التكبير التدريجي — نافذة تعرض جزءاً مكبّراً من الصورة يتّسع تدريجياً */
  .zoomq{display:flex;flex-direction:column;align-items:center;gap:16px}
  .zoom-stage{width:100%;max-width:420px;aspect-ratio:1/1;overflow:hidden;border-radius:18px;background:#fff;
    border:2px dashed rgba(181,201,154,.55);display:flex;align-items:center;justify-content:center}
  .zoom-img{width:100%;height:100%;object-fit:contain;transform-origin:center center;will-change:transform}
  .zoom-meter{font-family:'Cairo';font-weight:700;color:#fff;font-size:1.05rem}
  .zoom-meter .zoom-pts{color:#f5a04a;font-size:1.25rem}
  .zoom-start{background:#f5a04a !important;color:#fff !important;border:none !important;font-size:1.2rem;
    padding:14px 40px;border-radius:40px;min-width:200px;box-shadow:0 4px 12px rgba(0,0,0,.28)}
  .zoom-start:hover{filter:brightness(1.06)}
  .zoom-opts{width:100%;align-items:center}
  /* ترتيب الحروف — خانات كبيرة أفقية (قراءة يمين→يسار) وبنك حروف مبعثرة، عناصر لمسية للسبورة */
  .arrange{display:flex;flex-direction:column;align-items:center;gap:18px}
  .lslots{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
  .lslot{min-width:72px;min-height:72px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.9);border:2px dashed #e0b380;border-radius:16px;padding:6px;box-sizing:border-box}
  .lslot.over{border-color:#82a83e;background:#eef7e2}
  .arrbank .chips{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;min-height:60px;padding:8px;border-radius:12px}
  .lbank.over{outline:2px dashed rgba(255,255,255,.5);outline-offset:3px;border-radius:12px}
  .lchip{min-width:56px;text-align:center;font-size:1.6rem;font-weight:800;padding:14px 20px}
  .lslot .lchip{margin:0}
  .lchip.ok{background:#a7c957;border-color:#82a83e;color:#20340a}
  .lchip.no{background:#fde2e2;border-color:#c94a4a;color:#c94a4a}
  /* الكلمة كاملة متّصلة تُكشف عند النجاح (بلا letter-spacing كي تبقى الحروف موصولة) */
  .lword{display:inline-block;font-size:2.4rem;font-weight:800;color:#20340a;background:#a7c957;
    border:2px solid #82a83e;border-radius:16px;padding:10px 28px;box-shadow:0 3px 10px rgba(0,0,0,.22)}
  /* الخريطة الذهنية الناقصة — عقدة مركزية تتفرّع لفروع بخانات تُملأ بالسحب، عناصر لمسية للسبورة و RTL */
  .mindmap{display:flex;flex-direction:column;align-items:center;gap:16px}
  .mm-stage{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:28px;padding-top:6px}
  .mmlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
  .mmline{stroke:#a7c957;stroke-width:3.5;stroke-linecap:round}
  .mm-center{position:relative;z-index:1;background:#f5a04a;color:#fff;font-family:'Cairo';font-weight:800;
    font-size:1.3rem;padding:16px 30px;border-radius:20px;box-shadow:0 3px 12px rgba(0,0,0,.28);text-align:center}
  .mm-branches{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
  .mm-branch{display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:12px 14px;min-width:122px}
  .mm-label{font-family:'Cairo';font-weight:700;color:#fff;font-size:1.1rem}
  .mm-slot{min-width:96px;min-height:54px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.9);border:2px dashed #e0b380;border-radius:14px;padding:4px;box-sizing:border-box}
  .mm-slot.over{border-color:#82a83e;background:#eef7e2}
  .mm-slot .mmchip{margin:0}
  .mmbank .chips{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;min-height:58px;padding:8px;border-radius:12px}
  .mmchips.over{outline:2px dashed rgba(255,255,255,.5);outline-offset:3px}
  .mmchip{min-width:70px;text-align:center;font-size:1.15rem;font-weight:700;padding:14px 20px}
  .mmchip.ok{background:#a7c957;border-color:#82a83e;color:#20340a}
  .mmchip.no{background:#fde2e2;border-color:#c94a4a;color:#c94a4a}
  /* ⑯ البازل (تركيب الصورة): صورة واحدة تُقسَّم بـ background-position إلى شبكة قطع تُركَّب بالسحب.
     اللوح direction:ltr كي تطابق أعمدة الشبكة أعمدة الصورة؛ القطع كبيرة تناسب اللمس على السبورة */
  .puzzle{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
  /* اللوح الفارغ يظهر كشبكة: خطوط رمادية خفيفة (حدود الخانات) بين المربّعات التي توضع فيها القطع */
  /* ── تخطيط البازل: اللوح وصينية القطع **جنباً إلى جنب** لا فوق بعضهما ──
     كان اللوح فوق والصينية تحته، فيصير الارتفاع = اللوح + الصينية؛ ومع تسع قطعٍ
     بحجم خانة اللوح تنكسر الصينية إلى صفّين فيرتفع المجموع حتى يتجاوز أطول إطار
     (‏tall) فيسقط السؤال إلى الحاوية المرنة qflex، وعندها تُحاط صورة الإطار
     letterbox فيخرج المحتوى عن الرمل المرسوم ويُقصّ أعلى الإطار فوق حدّ الشاشة.
     بالتجاور يصير الارتفاع = **أطولهما** فقط، ويتّسع اللوح للعرض المتاح. */
  .puzzle{display:flex;flex-direction:row;gap:20px;align-items:flex-start;width:100%}
  .puzzle .pzbank{flex:0 0 220px;width:220px}
  /* عرض اللوح يضبطه `fitBoard` في js/app.js بالبكسل: خاناته فارغة فلا عرض ذاتيّ
     لها (‏`flex-basis:0` أعطى 180×6 — مجرّد حدود الخانات)، وصورته قد تكون طوليّة
     فتوسيعه عرضاً يُطيله لا يُقصّره. لذا يُحسب العرض من **سقف الارتفاع × النسبة**،
     فتُحفظ نسبة الصورة تماماً ويبقى الارتفاع داخل المنطقة الداخلية. */
  .puzzle .pzboard{flex:0 0 auto;max-width:none}
  /* صينية ثابتة 3×3 — لا تنكسر إلى صفّين مهما ضاق العرض */
  .puzzle .pztray{display:grid;grid-template-columns:repeat(3,auto);gap:10px;
    justify-content:center;justify-items:center;flex-wrap:nowrap}
  @media(max-width:560px){ .puzzle{flex-direction:column;align-items:center}
    .puzzle .pzbank{flex:0 0 auto;width:100%} }
  .pzboard{direction:ltr;display:grid;gap:0;width:min(340px,86%);aspect-ratio:1/1;
    border:3px solid #b3b3b3;border-radius:12px;padding:0;box-sizing:border-box;overflow:hidden}
  .pzslot{border:2px solid #b3b3b3;background:#fbfaf5;box-sizing:border-box;
    display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
  .pzslot.over{background:#fff6d8;border-color:#f5b942;z-index:2}
  .pzslot.correct{border-color:#82a83e;z-index:2}
  .pzslot.wrong{border-color:#c94a4a;z-index:2}
  .pzslot .pzpiece{width:100%;height:100%;border-color:transparent}
  /* قطع الصينية: حدّ رمادي خفيف يفصل بينها (داخل اللوح تكفي حدود الخانات) */
  .pzpiece{background-repeat:no-repeat;border-radius:6px;border:1px solid #cfcfcf;box-sizing:border-box;
    cursor:grab;touch-action:none;box-shadow:0 2px 6px rgba(0,0,0,.28);transition:opacity .12s}
  .pzpiece.dragging{opacity:.55}
  .pztray{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;min-height:60px;padding:8px;border-radius:12px}
  .pztray .pzpiece{width:var(--pw,84px);height:var(--ph,84px)}
  .pztray.over{outline:2px dashed rgba(255,255,255,.5);outline-offset:3px}
  /* مكافأة الاكتمال: تختفي الفواصل والحدود فتظهر الصورة صورةً واحدة متّصلة */
  .pzboard.solved{gap:0;padding:0;background:transparent;border-color:transparent}
  .pzboard.solved .pzslot{border-color:transparent;background:transparent;border-radius:0}
  .pzboard.solved .pzpiece{border-radius:0;box-shadow:none;border-color:transparent}
  /* ⑬ الشريط المتدرّج: شريط أفقي بمؤشّر كبير يُسحب لتحديد قيمة على تدريج مرئيّ بأرقام كبيرة.
     الشريط dir:ltr كي تتصاعد الأرقام يساراً→يميناً كمسطرة، وبقيّة الواجهة RTL */
  .slider{display:flex;flex-direction:column;align-items:center;gap:26px;width:100%;max-width:640px;margin-inline:auto}
  /* رسمٌ اختياريٌّ فوق الشريط (‏svg/image في بيانات السؤال) — مرجعٌ بصريٌّ للمقدار
     المطلوب تقديرُه. محدودُ العرض عمداً: الشريطُ وتدريجُه هما بطلا السؤال، والرسمُ
     مُعينٌ لا يزاحمهما، وتحديدُ العرضِ يمنع نموَّ الإطارِ إلى الحاوية المرنة. */
  .sldfig{width:100%;max-width:360px;margin-inline:auto;display:block}
  .sldfig svg,.sldfig img{width:100%;height:auto;display:block}
  /* عرض القيمة المختارة بأرقام كبيرة واضحة */
  .sld-value{font-family:'Cairo';font-weight:700;color:#fff;font-size:1.15rem;text-shadow:0 1px 3px rgba(0,0,0,.34)}
  .sld-value .sld-num{color:#ffe27a;font-size:1.7rem;margin-inline-start:6px}
  .sld-scale{width:100%;padding:0 20px 34px}
  /* الشريط: مسار سميك يناسب اللمس، جزؤه المملوء برتقالي */
  .sld-track{position:relative;height:20px;border-radius:12px;background:#f4ecdd;
    border:2px solid #e0b380;cursor:pointer;touch-action:none;box-shadow:inset 0 2px 5px rgba(0,0,0,.12)}
  .sld-fill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:10px 0 0 10px;
    background:linear-gradient(90deg,#f5b942,#f5a04a)}
  .sld-ticks{position:absolute;inset:0;pointer-events:none}
  /* علامة التدريج الصغيرة أسفل الشريط */
  .sld-tick{position:absolute;top:100%;width:3px;height:12px;background:#c3ad82;
    transform:translateX(-50%);border-radius:2px}
  /* رقم التدريج الكبير تحت كل علامة */
  .sld-tlabel{position:absolute;top:calc(100% + 15px);transform:translateX(-50%);
    font-family:'Cairo';font-weight:700;color:#fff;font-size:1.05rem;white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,.34)}
  /* المؤشّر: زرّ دائري كبير يُسحب على الشريط (عنصر لمسيّ واضح) */
  .sld-thumb{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
    width:46px;height:46px;border-radius:50%;background:#fff;border:4px solid #f5a04a;
    color:#f5a04a;font-size:1.3rem;line-height:1;cursor:grab;touch-action:none;
    box-shadow:0 4px 12px rgba(0,0,0,.32);transition:border-color .15s,background .15s,transform .08s;z-index:2}
  .sld-thumb:hover{transform:translate(-50%,-50%) scale(1.06)}
  .sld-thumb.grab{cursor:grabbing;transform:translate(-50%,-50%) scale(1.12)}
  .sld-thumb.correct{background:#a7c957;border-color:#82a83e;color:#20340a}
  /* أرقام طرفَي الشريط (الأدنى/الأقصى) */
  .sld-ends{display:flex;justify-content:space-between;margin-top:40px;
    font-family:'Cairo';font-weight:800;color:#ffe27a;font-size:1.15rem}
  /* صواب وخطأ */
  .tf-btns{display:flex;gap:16px;justify-content:center}
  .tf-btns .tf{flex:1;max-width:190px;background:#FFE0B3;color:#4a3a10;border:2px solid #e0b380}
  .tf-btns .tf:hover{background:#ffd39a}
  .tf-correct{background:#a7c957 !important;color:#20340a !important;border-color:#82a83e !important}
  .tf-wrong{background:#fde2e2 !important;color:#c94a4a !important;border-color:#c94a4a !important}
  /* تحديد الأجزاء */
  .hsfig{cursor:pointer}
  .hs-mark{position:absolute;width:26px;height:26px;border-radius:50%;transform:translate(-50%,-50%);
    border:3px solid #fff;pointer-events:none;z-index:3;box-shadow:0 2px 6px rgba(0,0,0,.3)}
  .hs-mark.hit{background:rgba(63,157,90,.6)}
  .hs-mark.miss{background:rgba(201,74,74,.6)}

  /* ⑱ بطاقات الذاكرة — شبكة بطاقات مقلوبة تُقلب بطاقتان كل دور (نسخة نصية)، بطاقات كبيرة للسبورة و RTL */
  .memory{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
  /* تخطيط الشبكة — قاعدة تصميم دائمة (DESIGN_RULES.md §أسئلة بطاقات الذاكرة —
     تخطيط الشبكة): الشبكة تتلاءم كاملة داخل الإطار بلا قصّ أي بطاقة.
     ‏--memcols = عدد الأعمدة المفضَّل (يمرّره renderMemory حسب عدد البطاقات)،
     يتحقق في العرض الواسع بعرض بطاقة نسبي؛ وإن ضاق الإطار عن العمود الأدنى
     (76px — فوق حدّ اللمس 60px) قلّ عدد الأعمدة تلقائياً (auto-fit) والتفّت
     البطاقات لصفوف أكثر — فلا يتجاوز مجموع الأعمدة عرض الإطار أبداً. */
  .memgrid{display:grid;gap:16px;width:100%;max-width:620px;margin-inline:auto;
    grid-template-columns:repeat(auto-fit,
      minmax(max(76px, calc(100%/var(--memcols,4) - 16px)), 1fr))}
  /* البطاقة: مربّعة بمنظور ثلاثيّ لقلبها — عرضها نسبيّ من عمودها (لا حدّ أدنى
     ثابتاً بالبكسل يفرض على العمود عرضاً أكبر من المتاح فيقصّ البطاقات الطرفية —
     الحدّ الأدنى مضمون من عمود الشبكة أعلاه) */
  .memcard{position:relative;aspect-ratio:1/1;min-height:0;min-width:0;border:none;background:none;padding:0;
    cursor:pointer;perspective:800px;font-family:'Tajawal'}
  /* وجها البطاقة متطابقان في المكان، يُخفى المقلوب منهما (backface) */
  .memface{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
    border-radius:16px;padding:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    transition:transform .4s;box-shadow:0 3px 10px rgba(0,0,0,.22)}
  /* الوجه الخلفي (الظاهر ابتداءً): برتقاليّ هوية المنصّة بشعار البطاقة */
  .memback{background:linear-gradient(150deg,#f5a04a,#e07f2a);color:#fff;font-size:2rem}
  /* الوجه الأمامي (النصّ): مقلوب ابتداءً فلا يظهر إلا عند القلب */
  .memfront{background:#FFE0B3;color:#4a3a10;font-size:1.15rem;font-weight:800;transform:rotateY(180deg)}
  .memcard.flipped .memback{transform:rotateY(180deg)}
  .memcard.flipped .memfront{transform:rotateY(360deg)}
  /* بطاقة متطابقة: تبقى مكشوفة بلون النجاح ولا تُنقر ثانيةً */
  .memcard.matched{cursor:default}
  .memcard.matched .memfront{background:#a7c957;color:#20340a;box-shadow:0 0 0 3px #82a83e inset}

  /* ⑲ العدسة المكبّرة (lens): صورتان متطابقتا الأبعاد — العلوية المشهد الظاهر والسفلية الطبقة
     الخفية — والعدسة دائرة clip-path (قطر ~160px) بمقبض واضح تُسحب بالفأرة واللمس فتكشف
     السفلية أينما تحرّكت. العناصر المكتشفة تثبت مكشوفة بتسميتها. عناصر كبيرة للسبورة و RTL */
  .lensq{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
  .lens-progress{font-family:'Cairo';font-weight:700;color:#fff;font-size:1.15rem;
    text-shadow:0 1px 3px rgba(0,0,0,.34)}
  .lens-progress b{color:#ffe27a;font-size:1.4rem;margin-inline:4px}
  .lensfig{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
  .lensfig img{pointer-events:none;-webkit-user-drag:none}
  /* الملعب لا يقصّ إطار العدسة (المقبض يظهر خارج حدوده عند أطراف الصورة) */
  .lensq .stage{overflow:visible}
  .lens-top{position:relative;z-index:0}
  /* الطبقة الخفية: فوق العلوية وتُقصّ بدائرة العدسة (يحدّث الكود القصّ مع كل حركة) */
  .lens-reveal{position:absolute;inset:0;z-index:1;pointer-events:none;clip-path:circle(0 at 50% 50%)}
  .lensfig .lens-under{position:absolute;inset:0;width:100%;height:100%}
  /* العناصر المكتشفة: دوائر كشف دائمة من الطبقة الخفية + تسمية فوق كل عنصر */
  .lens-found{position:absolute;inset:0;z-index:2;pointer-events:none}
  .lens-spot{position:absolute;inset:0}
  .lens-label{position:absolute;z-index:1;transform:translate(-50%,-140%);background:#FFE0B3;border:2px solid #e0b380;
    color:#3a2c0a;font-weight:800;font-size:.98rem;padding:5px 14px;border-radius:12px;white-space:nowrap;
    box-shadow:0 3px 8px rgba(0,0,0,.3);animation:lensPop .35s ease-out}
  @keyframes lensPop{from{opacity:0;transform:translate(-50%,-140%) scale(.6)}
    to{opacity:1;transform:translate(-50%,-140%) scale(1)}}
  /* تسمية أسفل العنصر (labelBelow): للعناصر المتجاورة كي لا تتراكب تسمياتها */
  .lens-label.below{transform:translate(-50%,40%);animation-name:lensPopB}
  @keyframes lensPopB{from{opacity:0;transform:translate(-50%,40%) scale(.6)}
    to{opacity:1;transform:translate(-50%,40%) scale(1)}}
  /* العدسة: إطار صوري "عدسة-إطار.png" (فتحة شفافة الجوف بمقبض) — الحاوية نقطة ارتساء
     عند مركز الفتحة (يضعها الكود على lx,ly)، والصورة مُحجَّمة ومُزاحة بحيث ينطبق مركز
     فتحتها ونصف قطرها (371px من أصل 1254) على دائرة الكشف (R=80px) تماماً */
  .lens-glass{position:absolute;left:76%;top:80%;width:0;height:0;
    z-index:3;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
  /* pointer-events:auto: ضغطات المقبض تُلتقط على الصورة نفسها (حتى خارج حدود الملعب)
     وتنتشر صعوداً لمستمعي السحب على الصورة الأمّ — بلا أي تغيير في منطق السحب واللمس */
  .lensfig .lens-frame{position:absolute;width:270.4px;height:auto;max-width:none;
    left:-160.9px;top:-104.4px;pointer-events:auto;cursor:grab}
  .lens-glass.grab .lens-frame{filter:brightness(1.07)}

  /* ⑳ بناء المعادلة (equation-builder): صفّ المعادلة (رموز ثابتة + خانات) فوق بنك البطاقات.
     الخانة `.blank` والبطاقة `.chip` هما نفساهما في `fill-blank` — فترثان قشرة المادة
     وحدودها الدنيا تلقائياً بلا قاعدة كسوة جديدة. أمّا `.eqtok` (الرمز المطبوع) فليس
     عنصراً تفاعلياً، فهو **خارج الكسوة** كرسم السؤال (نفس منطق استثناء .cpart و.grp) */
  /* بلا max-width عمداً: المعادلة شكلها **عريض** بطبعها، وتقييد عرضها كان يُطيل المحتوى
     عند قياس نسبته الطبيعية فيختار له النظام إطاراً طوليّاً ضيّقاً فتلتفّ المعادلة على
     سطرين (قيس: D=1.271 ← qf-tall). بلا القيد تُقاس النسبة على شكلها الحقيقيّ فيُختار
     إطارٌ عريض وتبقى المعادلة سطراً واحداً. (نفس منطق .opts{max-width:none} في القشرة) */
  .eqb{width:100%;margin-inline:auto;display:flex;flex-direction:column;gap:26px}
  /* dir:ltr كي تُقرأ المعادلة يساراً→يميناً كما تُكتب رياضياً (كنمط dir:ltr في الشريط
     المتدرّج ولوح البازل)، وبقيّة الواجهة تبقى RTL */
  /* الالتفاف مسموح احتياطاً لا اختياراً: نافذة إطار الرياضيات المقيسة **471.8px** عرضاً
     (الإطار محكوم بالارتفاع المتاح availH=560 فلا يتّسع بزيادة العرض)، فالعرض الصافي
     لرموز المعادلة ~404px. والمقادير أدناه (رمز 58 + فجوة 12 + حشوة 18) تجعل معادلة
     الخمسة رموز **368px** بفائض 36px — لا على حدّ الالتفاف تماماً: بمقاس 64/14/20 كان
     المجموع 400px مقابل 400px متاحة، فالتفّت على 1280×800 ولم تلتفّ على 1920×1080
     لفارق تقريبٍ كسريّ لا أكثر. المعادلة الأطول من خمسة رموز تلتفّ سطرين بدل أن تفيض */
  /* اتجاه المعادلة RTL — قاعدة تصميم دائمة (DESIGN_RULES.md §أسئلة بناء المعادلة —
     اتجاه العرض): أول حدّ من أقصى اليمين والناتج (= والخانة) في أقصى اليسار،
     والتفاف flex يتابع الأسطر من اليمين. البيانات بترتيب القراءة والاتجاه شأن
     العرض وحده — لا يُعاد ضبطها ltr. */
  .eqrow{direction:rtl;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:12px;background:#fff;border-radius:18px;padding:18px;box-shadow:0 4px 14px rgba(0,0,0,.22)}
  /* الرمز المطبوع: أرقام ورموز كبيرة واضحة للسبورة (لا تُنقر) */
  .eqtok{display:inline-flex;align-items:center;justify-content:center;min-width:58px;min-height:64px;
    font-family:'Cairo';font-weight:800;font-size:2rem;color:#2f3a2c;line-height:1;user-select:none}
  .eqtok.eqop{color:#c8791f;font-size:2.2rem}
  /* الخانة داخل صفّ المعادلة: بحجم الرمز نفسه فلا يتموّج السطر */
  .eqrow .eqslot{min-width:88px;min-height:64px;display:inline-flex;align-items:center;justify-content:center;
    margin:0;font-size:1.9rem;line-height:1}
  .eqchips{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:8px}
  /* بطاقة البنك: مربّعة كبيرة تناسب إصبعاً على السبورة */
  .eqchip{min-width:74px;min-height:64px;display:inline-flex;align-items:center;justify-content:center;
    font-size:1.7rem;font-family:'Cairo';font-weight:800;line-height:1}
  .eqchip.eqchip-op{color:#c8791f}
  /* بطاقة مختارة بالنقر (نمط السبورة: انقر البطاقة ثم الخانة) — حلقة بارزة لا لون فحسب */
  .chip.picked{box-shadow:0 0 0 4px rgba(245,160,74,.55),0 6px 16px rgba(245,160,74,.4);
    transform:translateY(-2px)}

  /* ㉑ خط الأعداد (number-line): رسم SVG واحد بالكامل — محور وتدريج وأرقام ومؤشّر
     وأقواس قفز. الرسم **خارج الكسوة** (رسم سؤال لا عنصر تفاعليّ ملوَّن) كنمط hotspot،
     ولوحته فاتحة كي تُقرأ فوق تعبئة الإطار السماوية الداكنة */
  .numline{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
  .nl-progress{font-family:'Cairo';font-weight:700;color:#fff;font-size:1.15rem;
    text-shadow:0 1px 3px rgba(0,0,0,.34)}
  .nl-progress b{color:#ffe27a;font-size:1.4rem;margin-inline:4px}
  /* لوح الرسم: أبيض مستدير كصندوق نصّ ملء الفراغ — خلفية موحّدة تُقرأ عليها الأرقام */
  .nlsvg{width:100%;height:auto;display:block;background:#fff;border-radius:18px;
    box-shadow:0 4px 14px rgba(0,0,0,.22);touch-action:none;cursor:pointer;
    -webkit-user-select:none;user-select:none}
  .nl-axis{stroke:#4a3a10;stroke-width:5;stroke-linecap:round}
  .nl-tick{stroke:#c3ad82;stroke-width:3;stroke-linecap:round}
  .nl-tick.nl-major{stroke:#4a3a10;stroke-width:5}
  .nl-num{fill:#2f3a2c;font-family:'Cairo';font-weight:800;font-size:34px;text-anchor:middle}
  /* العدد المُعطى في وضع التقريب: معلَّم ثابتاً ليقارن الطالب بُعده عن العشرتين */
  .nl-given line{stroke:#c94a4a;stroke-width:4;stroke-dasharray:9 7}
  .nl-given circle{fill:#c94a4a}
  .nl-given text{fill:#c94a4a;font-family:'Cairo';font-weight:800;font-size:38px;text-anchor:middle}
  /* المؤشّر: كبسولة كبيرة برأس مثلّث تلمس الخط — هدف لمس واسع للسبورة */
  .nl-mhead{fill:#f5a04a;stroke:#c8791f;stroke-width:4}
  .nl-mdot{fill:#f5a04a;stroke:#c8791f;stroke-width:3}
  .nl-mval{fill:#fff;font-family:'Cairo';font-weight:800;font-size:62px;text-anchor:middle}
  /* الصواب: فارق شكليّ مع اللون (حلقة أوضح) لا لون فحسب */
  .nl-marker.correct .nl-mhead{fill:#a7c957;stroke:#4e7c1f;stroke-width:5}
  .nl-marker.correct .nl-mdot{fill:#a7c957;stroke:#4e7c1f}
  .nl-marker.correct .nl-mval{fill:#20340a}
  /* أقواس القفز بالعدّ */
  .nl-arc{stroke:#2f6fb0;stroke-width:5;stroke-linecap:round}
  .nl-arrow{fill:#2f6fb0}
  .nl-arclabel{fill:#2f6fb0;font-family:'Cairo';font-weight:800;font-size:32px;text-anchor:middle}
  .nl-jdot{fill:#2f6fb0}
  .nl-jdot.nl-jstart{fill:#f5a04a;stroke:#c8791f;stroke-width:3}
  .nl-jlabel{fill:#4a3a10;font-family:'Cairo';font-weight:800;font-size:28px;text-anchor:middle}

  /* ㉒ لوحة المائة (hundred-chart): شبكة SVG واحدة — **رسم سؤال خارج الكسوة** كخط الأعداد.
     الخلية المطبوعة بارزة والخلية الناقصة **غائرة بحدّ متقطّع** (قاعدة المحمول ≠ المستقبِل)،
     وبطاقات البنك .chip ترث قشرة المادة كسائر البطاقات */
  /* الشبكةُ **مربّعةٌ دائماً** (‏١٠×١٠) ومرنةٌ: `qfit-flex` في مُنشئِها (‏js/app.js)
     يجعلُها عنصرَ flex قابلاً للتقلّصِ (‏§④ في قاعدةِ الاحتواءِ الأساسية أعلاه)، فتضيقُ
     لتتلاءمَ مع ما تبقّى من نافذةِ السؤالِ بعدَ نصِّه وبطاقاتِه وأزراره — **بلا أيِّ
     ارتفاعٍ ثابت**؛ و`aspect-ratio:1/1` يعلنُ نسبتَها المربّعةَ في حالةِ السَّعة،
     و`preserveAspectRatio="xMidYMid meet"` يحفظُها مركزيّةً مربّعةً عندَ التقلّص.
     وصفُّ بطاقاتِ الأعدادِ أسفلَها لا يتقلّصُ (حدُّه الأدنى التلقائيّ) فيبقى ظاهراً. */
  .hchart{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;min-height:0}
  .hcsvg{width:100%;height:auto;aspect-ratio:1/1;display:block;touch-action:manipulation;
    -webkit-user-select:none;user-select:none}
  .hc-cell{cursor:pointer}
  /* .hc-hit = مساحة اللمس (خطوة الخلية كاملة، شفّافة)، و.hc-face = الوجه المرئيّ المحشوّ */
  .hc-hit{fill:transparent;stroke:none}
  .hc-face{fill:#fff;stroke:#d9c7a4;stroke-width:3;transition:fill .12s}
  .hc-cell text{fill:#2f3a2c;font-family:'Cairo';font-weight:800;font-size:44px;
    text-anchor:middle;pointer-events:none}
  .hc-cell:hover .hc-face{fill:#fff6e6}
  /* المختارة: لون **ومعه** حدّ أثخن وأغمق (اللون ليس الفارق الوحيد) */
  .hc-cell.picked-cell .hc-face{fill:#ffd79a;stroke:#c8791f;stroke-width:6}
  .hc-cell.correct .hc-face{fill:#a7c957;stroke:#4e7c1f;stroke-width:6}
  .hc-cell.correct text{fill:#20340a}
  .hc-cell.wrong .hc-face{fill:#fde2e2;stroke:#c94a4a;stroke-width:6}
  .hc-cell.wrong text{fill:#c94a4a}
  /* خلية الأساس في وضع الأكثر/الأقل: معلَّمة لا مختارة (نقطة الانطلاق) */
  .hc-cell.hc-base .hc-face{fill:#dce9f7;stroke:#2f6fb0;stroke-width:6}
  .hc-cell.hc-base text{fill:#1d4b7e}
  /* الخلية الناقصة (مستقبِل): غائرة بحدّ متقطّع بلا بروز */
  .hc-cell.hc-blank .hc-face{fill:#efe6d6;stroke:#9c7b3f;stroke-width:4;stroke-dasharray:12 9}
  .hc-cell.hc-blank.filled .hc-face{fill:#FFE0B3;stroke:#e0b380;stroke-dasharray:none}
  /* شريط مطالب وضع الأكثر/الأقل */
  .hc-asks{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
  .hc-ask{background:rgba(255,255,255,.92);border-radius:12px;padding:8px 16px;
    font-family:'Cairo';font-weight:700;color:#3a2c0a;font-size:1.05rem}
  .hc-ask b{color:#2f6fb0;font-size:1.2rem;margin-inline-start:4px}
  .hcchips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:6px}
  .hcchip{min-width:74px;min-height:64px;display:inline-flex;align-items:center;justify-content:center;
    font-family:'Cairo';font-weight:800;font-size:1.5rem;line-height:1}

  /* ㉓ المصفوفات (array): رسم SVG **خارج الكسوة** كسائر رسوم الأسئلة؛ أمّا خيارات وضع
     القراءة فهي .opt المعتادة فترث قشرة المادة وحدّها الأدنى بلا قاعدة جديدة */
  .arrayq{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
  .arsvg{width:100%;height:auto;display:block;max-width:520px;touch-action:manipulation;
    -webkit-user-select:none;user-select:none}
  .ar-dot{fill:#f5a04a;stroke:#c8791f;stroke-width:3}
  .ar-count{font-family:'Cairo';font-weight:700;color:#fff;font-size:1.1rem;
    text-shadow:0 1px 3px rgba(0,0,0,.34)}
  .ar-count b{color:#ffe27a;font-size:1.35rem;margin-inline:4px}
  /* لوح البناء: خانة فارغة **غائرة بحدّ متقطّع** (مستقبِل)، وقرصها مخفيّ حتى تُختار */
  .ar-cell{cursor:pointer}
  .ar-hit{fill:transparent;stroke:none}   /* مساحة اللمس = خطوة الخلية كاملة (كـ.hc-hit) */
  .ar-face{fill:rgba(255,255,255,.55);stroke:#9c7b3f;stroke-width:3;stroke-dasharray:11 8;
    transition:fill .12s}
  .arsvg-build .ar-dot{opacity:0;transition:opacity .12s}
  .ar-cell:hover .ar-face{fill:#fff6e6}
  /* المختارة: الحدّ يصير صلباً ويظهر القرص — فارق شكليّ مع اللون لا لون فحسب */
  .ar-cell.on .ar-face{fill:#fff;stroke:#c8791f;stroke-width:5;stroke-dasharray:none}
  .arsvg-build .ar-cell.on .ar-dot{opacity:1}
  .ar-cell.correct .ar-face{fill:#eef8dc;stroke:#4e7c1f;stroke-width:5}
  .ar-cell.correct .ar-dot{fill:#a7c957;stroke:#4e7c1f}
  /* جملة الضرب/الجمع المتكرر تُكشف عند الصواب */
  .ar-sentence{display:none}
  .ar-sentence.show{display:block;background:#fff;border-radius:14px;padding:10px 22px;
    font-family:'Cairo';font-weight:800;font-size:1.5rem;color:#2f3a2c;
    box-shadow:0 4px 14px rgba(0,0,0,.22)}

  /* ═══ أنماطُ الأنواعِ الرياضيّةِ الإضافيّة (الدفعةُ الثانية) ═══ */
/* ⓐ المقارنة (compare): صفّ «عددٌ — رمزٌ — عددٌ» بترتيب رياضيّ (يسار→يمين) داخل صفحة RTL */
.cmp{display:flex;flex-direction:column;gap:12px;align-items:center}
.cmp-row{direction:ltr;display:flex;align-items:center;justify-content:center;gap:16px}
.cmp-num{background:#fff;color:#2f3a2c;font-family:'Cairo';font-weight:800;font-size:2rem;
  min-width:112px;padding:6px 18px;border-radius:16px;text-align:center;box-shadow:0 3px 12px rgba(0,0,0,.2)}
/* الخانة والبطاقة: مساحة لمس ≥60px في البعدين (قاعدة السبورة) */
.cmp-slot{min-width:92px;min-height:66px;display:inline-flex;align-items:center;justify-content:center;
  font-size:2.1rem;font-family:'Cairo';font-weight:800}
.cmpbank{width:100%}
.cmpbank .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.cmp-chip{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.15;min-width:104px;min-height:64px}
/* رمزا < و> **قابلان للانعكاس البِدِيّ**: داخل صفحة RTL يُقلبان بصرياً ويصير المعنى ضدَّه،
   فيُعزل الرمز في سياق LTR — وهذا شرطُ صحّةِ النوع لا تجميلٌ */
.cmp-chip b{direction:ltr;unicode-bidi:isolate;font-size:2rem;font-family:'Cairo';font-weight:800}
.cmp-chip i{font-style:normal;font-size:.92rem;opacity:.72}
/* ⓑ إكمال النمط (pattern): شريطُ عناصرَ بينها أسهمُ اتّجاهِ التتابع + خاناتٌ من بنك البطاقات */
.patt{display:flex;flex-direction:column;gap:12px;align-items:center}
.pt-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.patt-ltr .pt-strip{direction:ltr}
.pt-cell{background:#fff;color:#2f3a2c;font-family:'Cairo';font-weight:800;font-size:1.9rem;
  min-width:84px;min-height:66px;padding:4px 12px;border-radius:16px;display:inline-flex;
  align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.2)}
.pt-slot{min-width:84px;min-height:66px;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.9rem;font-family:'Cairo';font-weight:800}
.pt-arrow{color:#ffe27a;font-size:1.4rem;opacity:.85}
.ptbank{width:100%}
.ptbank .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ptchip{min-width:78px;min-height:62px;display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem}
/* القاعدة تُكشف عند الصواب (كجملة المصفوفة) لا قبله فلا تُفسد التفكير */
.pt-rule{display:none}
.pt-rule.show{display:block;background:#fff;border-radius:14px;padding:8px 20px;
  font-family:'Cairo';font-weight:800;font-size:1.3rem;color:#2f3a2c;box-shadow:0 4px 14px rgba(0,0,0,.22)}
/* ⓒ العد بالنقر (count-tap): عناصرُ تُنقر فيظهر عليها العددُ بترتيب النقر */
.cnt{display:flex;flex-direction:column;gap:10px;align-items:center}
.ct-count{font-family:'Cairo';font-weight:700;color:#fff;font-size:1.15rem}
.ct-count b{color:#ffe27a;font-size:1.6rem;margin-inline:6px}
.ct-count i{font-style:normal;opacity:.7;font-size:.95rem}
.ct-area{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:940px}
.ct-tile,.ct-group{position:relative;background:rgba(255,255,255,.9);border:3px solid #c9b48a;
  border-radius:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  min-width:66px;min-height:66px;transition:transform .1s,background .12s}
.ct-group{gap:6px;padding:8px 12px;min-width:auto}
.ct-glyphs{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:170px}
.ct-glyph{font-size:1.9rem;line-height:1}
.ct-tile:hover,.ct-group:hover{background:#fff6e6}
/* المعدودُ: فارقٌ شكليٌّ (حدٌّ صلبٌ + شارةٌ) لا لونٌ فحسب */
.ct-tile.on,.ct-group.on{background:#fff;border-color:#c8791f;transform:scale(.96)}
.ct-tile.correct,.ct-group.correct{background:#eef8dc;border-color:#4e7c1f}
.ct-badge{position:absolute;top:-10px;inset-inline-start:-10px;min-width:30px;height:30px;
  border-radius:50%;background:#c8791f;color:#fff;font-family:'Cairo';font-weight:800;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;padding:0 6px}
.ct-badge:empty{display:none}
/* ⓓ القيمة المنزلية بالمكعبات (place-value): لوحُ عشراتٍ وآحادٍ بترتيب المنازل (العشراتُ يساراً) */
.pv{display:flex;flex-direction:column;gap:12px;align-items:center}
.pv-panes{direction:ltr;display:flex;gap:10px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.pv-pane{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.22);border-radius:18px;
  padding:10px 12px;min-width:180px;display:flex;flex-direction:column;gap:8px;align-items:center}
.pv-head{font-family:'Cairo';font-weight:800;color:#ffe27a;font-size:1.1rem}
.pv-items{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;align-items:flex-end;min-height:70px;max-width:340px}
/* الغلافُ هو هدفُ اللمس (≥60px) والرسمُ داخله بقياسه الحقيقيّ */
.pv-item{display:inline-flex;align-items:flex-end;justify-content:center;min-width:62px;min-height:62px;cursor:pointer}
.pv-svg{display:block}
/* العمودُ والمكعّبُ مُصغَّرانِ بنسبةٍ واحدة (‎×0.804‎ من 26×224 و26×26) فتبقى
   «العشرةُ = عشرُ آحادٍ» صحيحةً بالقياس، ويتّسعُ اللوحُ المحجوزُ لإطارٍ حقيقيّ */
.pv-rod{width:21px;height:180px}
.pv-cube{width:21px;height:21px}
.pv-face{fill:#f7c948;stroke:#8a5a12;stroke-width:2}
.pv-item-cube .pv-face{fill:#7fd1ae}
.pv-line{stroke:#8a5a12;stroke-width:1.4;opacity:.85}
.pv-item:hover .pv-face{fill:#fff0c2}
.pv-item.correct .pv-face{fill:#a7c957;stroke:#4e7c1f}
.pv-add{background:#FFE0B3;color:#3a2c0a;border-color:transparent;font-size:1.05rem;min-height:52px}
.pv-read{display:none}
.pv-read.show{display:block;background:#fff;border-radius:14px;padding:8px 20px;font-family:'Cairo';
  font-weight:800;font-size:1.35rem;color:#2f3a2c;box-shadow:0 4px 14px rgba(0,0,0,.22)}

/* ⓔ الساعة التفاعلية (clock): ميناءٌ SVG بعقربَينِ يُضبطانِ باللمس */
.clockq{display:flex;flex-direction:column;gap:10px;align-items:center}
.ck-task,.ck-hint{font-family:'Cairo';color:#fff;font-size:1.02rem;text-align:center;max-width:520px}
.ck-task b{color:#ffe27a;margin-inline:4px}
.ck-hint{opacity:.72;font-size:.95rem}
.cksvg{width:min(360px,86vw);height:auto;touch-action:none;cursor:pointer}
.ck-face{fill:#fffdf6;stroke:#8a5a12;stroke-width:7}
.ck-tick{stroke:#8a7d63;stroke-width:2.4;stroke-linecap:round}
.ck-tick-h{stroke:#4a3a18;stroke-width:5}
.ck-num{fill:#2f3a2c;font-family:'Cairo';font-weight:800;font-size:34px;text-anchor:middle}
.ck-hand line{stroke-linecap:round}
.ck-hour line{stroke:#4a3a18;stroke-width:14}
.ck-min line{stroke:#c8791f;stroke-width:9}
.ck-pin{fill:#4a3a18}
.cksvg.correct .ck-face{stroke:#4e7c1f}
.ck-read{background:#fff;border-radius:14px;padding:6px 22px;box-shadow:0 4px 14px rgba(0,0,0,.22)}
/* الوقتُ «٣:٣٠» يُعزل في سياقِ LTR فلا تُقلبُ النقطتانِ موضعَ الساعةِ والدقيقة */
.ck-time{direction:ltr;unicode-bidi:isolate;font-family:'Cairo';font-weight:800;font-size:1.6rem;color:#2f3a2c}
/* ⓕ قراءة أداة القياس (measure-tool): مسطرةٌ خطّيّةٌ أو ميناءُ ميزانٍ من محرّكِ التدريجِ المشترك */
.meas{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.mssvg{width:min(880px,94%);height:auto;touch-action:none}
.mssvg-dial{width:min(400px,86vw)}
.ms-ruler{fill:#f7dfa5;stroke:#8a5a12;stroke-width:4}
.ms-tick{stroke:#6b5320;stroke-width:2.6;stroke-linecap:round}
.ms-major{stroke:#3f3010;stroke-width:5}
.ms-num{fill:#3f3010;font-family:'Cairo';font-weight:800;font-size:30px;text-anchor:middle}
.ms-bar{fill:#7fd1ae;stroke:#1f6f52;stroke-width:4}
.ms-edge{stroke:#1f6f52;stroke-width:3;stroke-dasharray:9 7}
.ms-dialface{fill:none;stroke:#fffdf6;stroke-width:16;stroke-linecap:round}
.ms-needle line{stroke:#c8791f;stroke-width:11;stroke-linecap:round}
.ms-pin{fill:#4a3a18}
.ms-unit{fill:#ffe27a;font-family:'Cairo';font-weight:800;font-size:30px;text-anchor:middle}
.mssvg.correct .ms-bar{fill:#a7c957;stroke:#4e7c1f}
.mssvg.correct .ms-needle line{stroke:#4e7c1f}
.ms-read{background:#fff;border-radius:14px;padding:6px 20px;font-family:'Cairo';font-weight:800;
  font-size:1.4rem;color:#2f3a2c;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.ms-read b{color:#8a5a12;margin-inline-end:4px}
.mssvg-dial .ms-num{font-size:26px}
/* ⓖ النقود العُمانية (money): عملاتٌ ووَرَقٌ مرسومٌ SVG (لا صورَ عملةٍ حقيقيّة) والقيمُ بالبيسة */
.moneyq{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.mn-task{font-family:'Cairo';color:#fff;font-size:1.08rem;text-align:center}
.mn-task b{color:#ffe27a;margin-inline:4px}
.mn-tray{min-height:96px;width:min(760px,94%);display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  align-items:center;background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.3);border-radius:18px;padding:10px}
.mn-tray-fixed{border-style:solid}
.mn-empty{font-family:'Cairo';color:rgba(255,255,255,.6)}
/* كلُّ قطعةٍ زرٌّ مساحتُه ≥60px في البعدين */
.mn-piece{background:none;border:none;padding:0;cursor:pointer;min-width:66px;min-height:66px;
  display:inline-flex;align-items:center;justify-content:center;transition:transform .1s}
.mn-piece:hover{transform:translateY(-3px)}
.mn-coin{width:72px;height:72px}
.mn-note{width:116px;height:67px}
.mn-coinface{fill:#e8c46a;stroke:#8a5a12;stroke-width:3}
.mn-coinring{fill:none;stroke:#8a5a12;stroke-width:1.6;opacity:.6}
.mn-noteface{fill:#cfe8d6;stroke:#2f6f4f;stroke-width:3}
.mn-noteinner{fill:none;stroke:#2f6f4f;stroke-width:1.6;opacity:.55}
.mn-val{fill:#3f3010;font-family:'Cairo';font-weight:800;font-size:26px;text-anchor:middle}
.mn-noteval{fill:#1f5138;font-size:22px}
.mn-unit{fill:#6b5320;font-family:'Cairo';font-weight:700;font-size:14px;text-anchor:middle}
.mn-total{font-family:'Cairo';color:#fff;font-size:1.05rem}
.mn-total b{color:#ffe27a;font-size:1.35rem;margin-inline-start:6px}
.mnrack{width:100%}
.mnchips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.mn-piece.correct .mn-coinface{fill:#a7c957;stroke:#4e7c1f}
.mn-piece.correct .mn-noteface{fill:#a7c957;stroke:#4e7c1f}

/* ⓗ خط التماثل (symmetry): وضعُ الخطوطِ على شكلٍ، ووضعُ إكمالِ الصورةِ المرآتيّةِ على شبكة */
.symq{display:flex;justify-content:center;width:100%}
.sysvg{width:min(520px,90vw);height:auto;touch-action:none}
.sysvg-shape{width:min(380px,84vw)}
.sy-shape{fill:#7fd1ae;stroke:#1f6f52;stroke-width:4}
/* خطُّ اللمسِ شفّافٌ عريضٌ (٢٦ وحدة) فوق الخطِّ المرئيِّ الرقيق — هدفُ لمسٍ واسعٌ على السبورة */
.sy-lhit{stroke:transparent;stroke-width:26;cursor:pointer}
.sy-lface{stroke:#fffdf6;stroke-width:4;stroke-dasharray:10 8;pointer-events:none}
.sy-line.on .sy-lface{stroke:#c8791f;stroke-width:6;stroke-dasharray:none}
.sy-line.correct .sy-lface{stroke:#4e7c1f;stroke-width:7;stroke-dasharray:none}
.sy-line.wrong .sy-lface{stroke:#c0392b;stroke-width:6;stroke-dasharray:none}
.sy-cell{cursor:pointer}
.sy-hit{fill:transparent}
.sy-face{fill:rgba(255,255,255,.5);stroke:#9c7b3f;stroke-width:3;stroke-dasharray:9 7}
.sy-cell:hover .sy-face{fill:#fff6e6}
.sy-given .sy-face{fill:#7fd1ae;stroke:#1f6f52;stroke-dasharray:none;stroke-width:4}
.sy-cell.on .sy-face{fill:#fff;stroke:#c8791f;stroke-width:5;stroke-dasharray:none}
.sy-cell.correct .sy-face{fill:#a7c957;stroke:#4e7c1f;stroke-dasharray:none}
.sy-cell.wrong .sy-face{fill:#f3d0cb;stroke:#c0392b;stroke-dasharray:none}
.sy-axis{stroke:#ffe27a;stroke-width:5;stroke-dasharray:16 12}
/* ⓘ قراءة التمثيل البياني (chart-read): أعمدةٌ ومحورٌ رأسيٌّ **يمينَ الرسمِ** باتّجاهِ القراءة */
.chartq{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.chsvg{width:min(880px,96%);height:auto;touch-action:none}
.ch-grid{stroke:rgba(255,255,255,.22);stroke-width:2;stroke-dasharray:8 8}
.ch-axis{stroke:#fffdf6;stroke-width:5}
.ch-num{fill:#ffe27a;font-family:'Cairo';font-weight:800;font-size:28px;text-anchor:start}
.ch-label{fill:#fff;font-family:'Cairo';font-weight:700;font-size:28px;text-anchor:middle}
.ch-val{fill:#fff;font-family:'Cairo';font-weight:800;font-size:28px;text-anchor:middle}
.ch-title{fill:#fff;font-family:'Cairo';font-weight:700;font-size:26px;text-anchor:end;opacity:.85}
.ch-hit{fill:transparent}
.ch-face{fill:#7fd1ae;stroke:#1f6f52;stroke-width:3}
.ch-bar{cursor:pointer}
.ch-bar:hover .ch-face{fill:#a8e6cb}
.ch-bar.correct .ch-face{fill:#a7c957;stroke:#4e7c1f}
.ch-bar.wrong .ch-face{fill:#e8b4ad;stroke:#c0392b}
.ch-legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-family:'Cairo';color:#fff}
.ch-legend b{color:#ffe27a;margin-inline-start:4px}

/* التنقّل بين الأسئلة (خطوة بخطوة) */
  .qnav{display:flex;align-items:center;justify-content:center;gap:16px;margin:6px 0 10px;flex-wrap:wrap}
  .qnav .btn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;min-width:118px}
  .qnav .btn:hover:not(:disabled){background:rgba(255,255,255,.24)}
  .qnav .btn:disabled{opacity:.4;cursor:default}
  .qprogress{font-family:'Cairo';font-weight:700;color:#fff;font-size:1.05rem;min-width:132px;text-align:center}
  .qfinish{background:#FFE0B3 !important;color:#3a2c0a !important;border-color:transparent !important}
  .qresult-box{text-align:center}
  .qresult-box h3{color:#2c6e3f;font-family:'Cairo';font-size:1.4rem;margin-bottom:8px}
  .qresult-box p{color:#2f3a2c;font-size:1.08rem;margin:5px 0}
  .qresult-cheer{color:#f5a04a !important;font-weight:700}

  .hint{text-align:center;color:#b8aee5;font-size:.82rem;margin-top:26px}

  /* ═══════════ رحلة الصاروخ (بديل النجوم — مؤشّر تقدّم بصريّ) ═══════════
     الصاروخ صورة جسم فقط (rocket-body.png)؛ اللهب والدخان حيّان بالكامل بالكود
     (لهب متذبذب + جسيمات) بتدرّج طاقة بين الصعود والتعثّر. مسار منحنٍ S،
     نقاط ديناميكية، هبوط على القمر ورفع علم عُمان. */
  /* مساحة يسارية تكفي لعرض المسار بعد إزاحته للداخل، فلا يزاحم الأسئلة */
  body.rocket-mode #activityScreen{padding-left:250px}

  /* المسار مُزاح للداخل ~100px عن حافّة الشاشة */
  /* --rj-k = معامِلُ حجمِ عناصرِ نظامِ الصاروخ (1 = الأحجامُ الأصلية).
     كلُّ مقاسٍ أدناه مضروبٌ فيه، وهوامشُ التمركز (‏margin-left = −العرض÷2) مضروبةٌ معه
     فيبقى كلُّ عنصرٍ متمركزاً على المحور أيّاً كان المعامِل. **لتغييرِ الحجمِ: هذا الرقمُ
     وحدَه.** مواضعُ النظامِ (top للقمر، bottom للأرض، وعرضُ العمودِ 124) مرتبطةٌ بثوابتِ
     `js/fit.js` (MOON_TOP/EARTH_BOTTOM/LANE_W) — **لا تُغيَّر إلا معها في الملفّين معاً**.
     فتصغرُ العناصرُ في مواضعِها بلا إزاحةٍ للمنظومة ولا كسرٍ لعقدِ المحاذاة. وحركةُ
     الصاروخِ ومحطّاتُه تُقاسُ حيّاً من الأبعادِ الفعلية (‏_measure في rocket.js) فتتبعُ
     التصغيرَ تلقائياً.
     --rj-sat-k = معامِلٌ إضافيٌّ للقمرِ الصناعيِّ وحدَه (فوقَ --rj-k)، للمعايرةِ بالنظر. */
  .rocket-lane{--rj-k:.85;--rj-sat-k:1.18;
    position:fixed;top:92px;bottom:22px;left:114px;width:124px;z-index:6;
    pointer-events:none} /* عرض فقط، لا يعترض اللمس */
  .rocket-lane img{position:absolute;display:block;-webkit-user-select:none;user-select:none}

  /* القمر رأسُ المسار: top هنا + laneTop في fit.js = 50px تحتَ حافّةِ الشاشةِ العليا */
  .rocket-lane .rj-moon-img{top:32px;left:50%;
    width:calc(110px * var(--rj-k));margin-left:calc(-55px * var(--rj-k));z-index:1;
    filter:drop-shadow(0 0 10px rgba(255,246,196,.5))}
  /* المعالم عند انحناءات المنحنى (يوضعها الكود بالـ left/bottom) — مكبّرة */
  .rocket-lane .rj-sat-img{width:calc(66px * var(--rj-k) * var(--rj-sat-k));opacity:.95;transform:translateX(-50%);z-index:1}
  .rocket-lane .rj-cloud-img{width:calc(94px * var(--rj-k));opacity:.95;transform:translateX(-50%);z-index:1}
  /* الأرضُ ذيلُ المسار: bottom هنا + أسفلُ العمودِ في fit.js = 50px فوقَ الحافّةِ السفلى.
     **تصحيحُ استدارةِ الكرة (قرارُ المالك ٢٠٢٦-٠٨-٠١):** قرصُ الأرضِ في `earth-pad.png`
     **مرسومٌ بيضاوياً** — لا CSS ولا أبعادُ الملفِّ سببُ ذلك (العرضُ وحدَه مضبوطٌ
     والارتفاعُ تلقائيّ) بل الرسمُ نفسُه. فيُمَطُّ رأسياً بمقلوبِ التسطيحِ فيستديرُ القرص.
     **⚠️ المعامِلُ يُقاسُ من النصفِ السفليِّ وحدَه:** قمّةُ الكرةِ **محجوبةٌ خلفَ منصّةِ
     الإطلاق**، فقياسُ الارتفاعِ الكاملِ يعطي 229 (ناقصاً) ومنه معامِلٌ **1.271 مبالَغٌ
     فيه** جعلَ الكرةَ طوليّةً (جُرِّبَ ورُدّ). الصوابُ من نصفِ المحورَين حولَ خطِّ
     الاستواء (أعرضُ صفّ، y=171): الأفقيُّ **145.5** والرأسيُّ السفليُّ **138** —
     وكلاهما غيرُ محجوب ⇒ المعامِلُ **1.054**، أي تسطُّحٌ 5.4٪ لا 27٪.
     **`transform` لا `height`:** التحويلُ لا يدخلُ التخطيط، فارتفاعُ العنصرِ المحجوزُ
     يبقى كما هو ولا يتغيّرُ توازنُ عمودِ الصاروخِ ولا موضعُ الصاروخِ فوقَها؛
     و`transform-origin:bottom` يُثبّتُ قاعدةَ الكرةِ فلا تنزلقُ عن `bottom:30px`.
     **حلٌّ مؤقتٌ حتى يُعادَ توليدُ الأصل** بقرصٍ مستديرٍ أصلاً — فالمطُّ يرفعُ برجَ
     المنصّةِ فوقَها بالنسبةِ نفسِها (27٪ أنحفَ نسبياً)، وهو مقبولٌ لبرجٍ مُنمَّقٍ
     لكنّه ليس الصواب. عند استبدالِ الصورة **يُحذَفُ هذا السطرُ كلُّه**. */
  .rocket-lane .rj-earth-img{bottom:30px;left:50%;
    width:calc(118px * var(--rj-k));margin-left:calc(-59px * var(--rj-k));z-index:1;
    transform:scaleY(1.054);transform-origin:bottom center;
    filter:drop-shadow(0 0 10px rgba(120,180,255,.4))}

  /* المنحنى المتقطّع (نقاط زرقاء) */
  .rocket-lane .rj-curve-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
  /* سماكةُ الخطِّ تتبعُ المعامِلَ (فتصغرُ نقاطُ المنحنى المستديرةُ معه)، أمّا تباعدُها
     (dasharray) فيبقى كما هو — تصغيرُه يُكثِّفُ النقاطَ فيبدو الخطُّ متّصلاً. */
  .rocket-lane .rj-curve{fill:none;stroke:rgba(122,166,255,.9);stroke-width:calc(4px * var(--rj-k));
    stroke-linecap:round;stroke-dasharray:0.5 15}

  /* نقاط المحطّات (على المنحنى، فوق الصاروخ لتظهر رغم الدخان) */
  .rocket-lane .rj-dots{position:absolute;inset:0;pointer-events:none;z-index:4}
  .rocket-lane .rj-dot{position:absolute;
    width:calc(16px * var(--rj-k));height:calc(16px * var(--rj-k));margin-left:calc(-8px * var(--rj-k));
    border-radius:50%;background:#26365c;border:calc(2.5px * var(--rj-k)) solid #7ea6ff;
    box-shadow:0 1px 3px rgba(0,0,0,.4);transition:.35s}
  .rocket-lane .rj-dot.on{background:#7fe0ff;border-color:#eaffff;
    box-shadow:0 0 10px 2px rgba(127,224,255,.8)}

  /* الصاروخ: الحاوية الخارجية تتبع المنحنى بالـ transform (JS)،
     والطبقة الداخلية تتأرجح تأرجحاً عائماً مستمراً (translate/rotate مستقلّان) */
  /* موضعُ السكون: 55px فوقَ حافّةِ الأرضِ السفلى (‏bottom الأرضِ + 55) — نزلَ معها 50px */
  .rocket-lane .rj-rocket{position:absolute;bottom:85px;left:50%;
    width:calc(74px * var(--rj-k));margin-left:calc(-37px * var(--rj-k));
    transform:translate(0,0);will-change:transform;z-index:3;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
  .rocket-lane .rj-rocket-inner{position:relative;display:block;width:100%}
  .rocket-lane .rj-body-img{position:static;width:100%;display:block}
  /* التأرجح العائم: يعمل أثناء الطيران/التعثّر فقط (لا idle، ويتوقّف عند الهبوط) —
     ترددان مختلفان (موضع 3.1ث + دوران 4.7ث) كي لا يبدو التكرار نمطياً */
  .rocket-lane.rj-airborne .rj-rocket-inner,
  .rocket-lane.rj-sputter  .rj-rocket-inner{
    animation:rjFloatT 3.1s ease-in-out infinite, rjFloatR 4.7s ease-in-out infinite}
  @keyframes rjFloatT{0%{translate:-3px 2px}50%{translate:3px -3px}100%{translate:-3px 2px}}
  @keyframes rjFloatR{0%{rotate:-2.6deg}50%{rotate:2.6deg}100%{rotate:-2.6deg}}
  @media (prefers-reduced-motion: reduce){
    .rocket-lane.rj-airborne .rj-rocket-inner,
    .rocket-lane.rj-sputter  .rj-rocket-inner{animation:none}}

  /* ── اللهب الحيّ: طبقتان تتذبذبان (تمايل/اتساع/انكماش) كلهب حقيقي ── */
  .rocket-lane .rj-flame{position:absolute;top:99%;left:50%;transform:translateX(-50%);
    width:var(--fw,26px);height:var(--fh,48px);opacity:0;pointer-events:none;
    filter:blur(.4px) drop-shadow(0 0 7px rgba(255,140,30,.75))}
  .rocket-lane .rj-flame i{position:absolute;left:0;right:0;top:0;margin:0 auto;
    transform-origin:top center;border-radius:50% 50% 50% 50%/34% 34% 100% 100%}
  .rocket-lane .rj-flame .fo{width:100%;height:100%;
    background:linear-gradient(to bottom,#ffbf47,#ff7a12 52%,rgba(255,70,0,.08));
    animation:rjFlick .16s infinite alternate}
  .rocket-lane .rj-flame .fi{width:56%;height:72%;
    background:linear-gradient(to bottom,#fff4bf,#ffd23a 62%,rgba(255,190,40,0));
    animation:rjFlick .11s infinite alternate-reverse}
  @keyframes rjFlick{
    0%{transform:scaleY(.82) scaleX(1.07) skewX(3deg)}
    50%{transform:scaleY(1.12) scaleX(.95) skewX(-2deg)}
    100%{transform:scaleY(1.26) scaleX(.9) skewX(-4deg) translateY(1px)}}
  /* الصعود: لهب قويّ ثابت */
  .rocket-lane .rj-rocket.st-fly .rj-flame{opacity:1;--fw:27px;--fh:52px}
  /* التعثّر: لهب أضعف وأقصر ومتقطّع (المحرّك يتلعثم) */
  .rocket-lane .rj-rocket.st-sput .rj-flame{--fw:15px;--fh:24px;
    animation:rjSputCut .3s infinite steps(1,end)}
  .rocket-lane .rj-rocket.st-sput .rj-flame .fo{animation-duration:.09s}
  .rocket-lane .rj-rocket.st-sput .rj-flame .fi{animation-duration:.07s}
  @keyframes rjSputCut{0%,50%{opacity:.9}52%,100%{opacity:.12}}

  /* ── الدخان الحيّ: جسيمات تنبعث من الفوّهة، تهتزّ جانبياً وتتلاشى ── */
  .rocket-lane .rj-particle{position:absolute;border-radius:50%;pointer-events:none;z-index:2;
    background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
    transform:translate(-50%,-50%);opacity:0;animation:rjPuff .95s ease-out forwards}
  .rocket-lane .rj-particle.gray{
    background:radial-gradient(circle,rgba(200,205,214,.8),rgba(200,205,214,0) 70%)}
  @keyframes rjPuff{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
    18%{opacity:.8}
    55%{transform:translate(calc(-50% + var(--dx2,0)),calc(-50% + var(--dy,26px) * .5)) scale(1.05)}
    100%{opacity:0;transform:translate(calc(-50% + var(--dx,0)),calc(-50% + var(--dy,26px))) scale(1.75)}}

  /* علم عُمان: يوضع بالكود (الساريّة خلف الصاروخ، القماش يمينه مرئي كاملاً)،
     وينبثق بحركة رفع لطيفة عند الوصول */
  .rocket-lane .rj-flag-img{width:58px;z-index:2;transform-origin:bottom left;
    transform:translateY(26px) scale(.92) rotate(8deg);opacity:0}
  .rocket-lane.rj-arrived .rj-flag-img{animation:rjFlag 1s cubic-bezier(.34,1.4,.5,1) forwards}
  @keyframes rjFlag{0%{opacity:0;transform:translateY(26px) scale(.92) rotate(8deg)}
    100%{opacity:1;transform:translateY(0) scale(1) rotate(8deg)}}

  /* استقرار لطيف عند الملامسة: انضغاط خفيف كعجلات هبوط، بلا وثبة للأعلى */
  .rocket-lane.rj-arrived .rj-rocket{animation:rjSettle .6s ease-out}
  @keyframes rjSettle{
    0%{transform:translate(var(--rj-x,0),var(--rj-y,0)) rotate(var(--rj-rot,0)) scale(1,1)}
    38%{transform:translate(var(--rj-x,0),var(--rj-y,0)) rotate(var(--rj-rot,0)) scale(1.03,.96)}
    100%{transform:translate(var(--rj-x,0),var(--rj-y,0)) rotate(var(--rj-rot,0)) scale(1,1)}}

  /* السبورات الضيّقة */
  @media (max-width:900px){
    .rocket-lane{width:98px;left:56px}
    body.rocket-mode #activityScreen{padding-left:170px}
    .rocket-lane .rj-moon-img{width:88px;margin-left:-44px}
    .rocket-lane .rj-earth-img{width:100px;margin-left:-50px}
    .rocket-lane .rj-rocket{width:60px;margin-left:-30px;bottom:76px}
    .rocket-lane .rj-flag-img{width:48px}
    .rocket-lane .rj-sat-img{width:calc(54px * var(--rj-sat-k))}
    .rocket-lane .rj-cloud-img{width:76px}
  }