/* ═══════════════════════════════════════════════════════════════════ نظام واجهة شوجب الفضائي (مهارة shoogp-ui) — أنماط النظام المرحلة الأولى: مُبوَّبة تحت صنف .shoogp-ui (على #questionList) فيُطبَّق النظام على الدرس النموذج فقط. قواعد العناصر المشتركة (الأزرار/الشارات/ .qcard) مسبوقة بـ.shoogp-ui كي لا تمسّ بقية الدروس؛ وقواعد .qframe/.qfill/ .qmoon/.qwin بنيوياً خاصة بالدرس (السكربت لا يبنيها إلا حين البوّابة مفتوحة). نِسَب الأبعاد محفوظة دائماً: بُعد واحد + aspect-ratio. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ⓪ الحدُّ الأدنى لخطوطِ العناصرِ التفاعلية: **18px** (§٨) — قاعدةُ مقروئيةٍ لا كسوة، فتسري على **كلِّ موادِّ النظام** لا العلومَ وحدَها. يُطبَّقُ اليوم على: `.qfinish` و`.cswatch`/`.cswatch-name`. (‏`.grp-drop` و`.grp-h` مستثنيان: الأولُ وعاءٌ بلا نصٍّ خاصٍّ به، والثاني مرفوعٌ أصلاً بـ`max(18px,…)`.) ⚠️ **استثناءٌ نهائيٌّ بقرارِ المالك — ستّةُ عناصرَ خارجَ هذا الحدِّ عمداً:** `.qnum` و`.qtype` و`.qprogress` وزرّا التنقّل و`.btn-check` و`.btn-reset`. خطوطُها تبقى 18.24/14.4/15.68/16/15.36/15.04px، وأوعيتُها بمقاساتِها الأصلية (46/54/42/66/84/74px)، وصورُها PNG كما هي. **السبب:** هذه العناصرُ **خارجَ حاويةِ السؤال `.qwin`**، ونصُّها مرسومٌ **فوقَ صورةٍ ثابتةِ الأبعاد**، فرفعُ الخطِّ يستلزمُ تكبيرَ الصورةِ وتغييرَ هويةِ الواجهة. راجعْ §٨ في مهارةِ shoogp-ui. **لا تُدرَجْ في أيِّ تعميمٍ لاحقٍ للحدِّ الأدنى ولا للأسلوبِ الحجريّ.** ═══════════════════════════════════════════════════════════════════ */ :root{ --ui-min-font:18px; } /* محاذاة تحقّق/إعادة على خط منتصف رأسي واحد + تباعد ٤٨px */ .shoogp-ui .actions{align-items:center; gap:48px} /* ① زر تحقّق: نجمة خضراء + النص الحالي فوقها (٦٥٪ — الارتفاع فقط والعرض تلقائي) */ .shoogp-ui .actions .btn-check, .shoogp-ui .actions .btn-check:hover{ background:url('../images/ui/btn-check.png') no-repeat center / contain !important; border:none !important; box-shadow:none !important; border-radius:0; height:84px; aspect-ratio:842/816; width:auto; padding:9px 0 0 !important; min-width:0; color:#fff; font-weight:800; font-size:.96rem; /* استثناءُ المالك — خارجَ حدِّ 18px */ text-shadow:0 2px 4px rgba(25,90,15,.8), 0 0 8px rgba(25,90,15,.45); filter:drop-shadow(0 2px 3px rgba(0,0,0,.22)); transition:transform .18s, filter .2s; } .shoogp-ui .actions .btn-check:hover{ transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 2px 3px rgba(0,0,0,.22)) drop-shadow(0 0 12px rgba(150,225,90,.8)); } .shoogp-ui .actions .btn-check:active{transform:scale(.94)} /* ② زر إعادة: كوكب أزرق بسهم دوران + النص الحالي فوقه (٦٥٪) */ .shoogp-ui .actions .btn-reset, .shoogp-ui .actions .btn-reset:hover{ background:url('../images/ui/btn-retry.png') no-repeat center / contain !important; border:none !important; box-shadow:none !important; border-radius:0; height:74px; aspect-ratio:1056/785; width:auto; padding:0 22px 0 0 !important; min-width:0; color:#fff; font-weight:800; font-size:.94rem; /* استثناءُ المالك — خارجَ حدِّ 18px */ text-shadow:0 2px 4px rgba(0,45,85,.85), 0 0 8px rgba(0,45,85,.5); filter:drop-shadow(0 2px 3px rgba(0,0,0,.22)); transition:transform .18s, filter .2s; } .shoogp-ui .actions .btn-reset:hover{ transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 2px 3px rgba(0,0,0,.22)) drop-shadow(0 0 12px rgba(255,190,80,.75)); } .shoogp-ui .actions .btn-reset:active{transform:scale(.94)} /* ③+④ التنقل (٧٥٪): btn-next-prev.png مرتين — السابق بالاتجاه الأصلي (سهمه يمين: رجوع)، والتالي بنفس الصورة معكوسة scaleX(-1) (سهمه يسار: تقدّم في الواجهة العربية، يطابق «→ السابق» و«التالي ←» الأصلية). الصورة تحدد عرض الزرّ (height ثابت وwidth تلقائي فلا شدّ عرضياً)، والنصان حيّان في منفصل فلا يُعكسان مع الصورة (يحقنهما السكربت أدناه) */ .qnav .nav-btn, .qnav .nav-btn:hover:not(:disabled){ position:relative; background:none !important; border:none !important; box-shadow:none !important; height:66px; width:auto; padding:0; min-width:0; transition:transform .18s, filter .2s; } .qnav .nav-btn img{ display:block; height:100%; width:auto; object-fit:contain; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); } .qnav .nav-next img{transform:scaleX(-1)} .qnav .nav-btn .ncap{ position:absolute; top:50%; transform:translateY(-53%); text-align:center; color:#fff; font-weight:800; font-size:1rem; /* استثناءُ المالك — خارجَ حدِّ 18px */ pointer-events:none; font-family:'Tajawal',sans-serif; text-shadow:0 2px 4px rgba(150,70,5,.85), 0 0 8px rgba(150,70,5,.4); } /* الكلمتان تتوسطان زرّيهما (قرار المالك ٢٠٢٦-٠٧-٣١) — كانت كل كلمة مُزاحة بعيداً عن جهة السهم (12/46) فتبدو غير متوسطة؛ الإزاحتان الآن متساويتان */ .qnav .nav-prev .ncap{left:12px; right:12px} .qnav .nav-next .ncap{left:12px; right:12px} /* «إنهاء» ونصُّ عيّناتِ الألوان: رُفِعا إلى الحدِّ الأدنى كذلك */ .shoogp-ui .qnav .qfinish{font-size:var(--ui-min-font); min-height:60px} .shoogp-ui .qwin :is(.cswatch,.cswatch-name){font-size:var(--ui-min-font)} .qnav .nav-btn:hover:not(:disabled){ transform:translateY(-3px) scale(1.05); filter:drop-shadow(0 0 13px rgba(255,165,60,.8)); } .qnav .nav-btn:active:not(:disabled){transform:scale(.95)} .qnav .nav-btn:disabled{opacity:.35} /* ⑤ شارة رقم السؤال — أُلغيت (قرار المالك): مؤشر التقدم «السؤال ٢ من ٦» يغني عنها ويحل محلها في رأس البطاقة بنفس كبسولة badge-qnum.png (انظر ⑦ أدناه). */ /* ⑥ شارة نوع السؤال: الصورة كما هي بلا معالجة إضافية — ارتفاع ثابت والعرض من نسبتها الأصلية (1657:511) بلا شد، والنص الحيّ متوسط في جسم الكبسولة (إزاحة يسارية بسيطة كي لا يزاحم زخرفة النجمة والكوكب في طرفها) */ .shoogp-ui .qcard .qtype{ display:inline-flex; align-items:center; justify-content:center; height:54px; aspect-ratio:1657/511; width:auto; padding:0 8px 0 36px; white-space:nowrap; background:url('../images/ui/badge-qtype.png') no-repeat center / contain; color:#fff; font-weight:800; font-size:.9rem; /* استثناءُ المالك — خارجَ حدِّ 18px */ text-shadow:0 2px 3px rgba(0,40,70,.75); filter:drop-shadow(0 1px 2px rgba(0,0,0,.22)); } /* ═══ الأيقوناتُ حولَ الحاوية: 10px من حافّةِ الإطارِ الفعلية (قاعدةٌ دائمة) ═══ القيمُ هنا **مبدئيةٌ فقط** حتى يجهزَ القياس؛ الموضعَ الفعليَّ يكتبُه `placeIcons` في js/shoogp-ui.js من صندوقِ الرسمِ المعتمِ للإطارِ مسقَطاً على مقاسِه المعروض (الهامشُ الشفّافُ حولَ صخرِ القمر وletterbox المرنةِ داخلانِ في الحساب). ‎.qcard‎ بلا هامشٍ سفليٍّ كي يكونَ `margin-top` لـ‎.qnav‎ **وحدَه** حاكمَ المسافة السفلى (الهامشانِ متجاوران فينهارانِ إلى واحد؛ فلو بقيَ 18px لغلبَ الحسابَ). */ .shoogp-ui .qhead{margin-bottom:10px} .shoogp-ui .qcard{margin-bottom:0} .shoogp-ui .qnav{margin-top:10px} /* ⑦ مؤشر التقدّم: صعد إلى رأس البطاقة مكان شارة الرقم الملغاة (قرار المالك)، بنفس كبسولة badge-qnum.png وبمقاس الشارة القديم (46px) لأنه وريثها البصري */ .shoogp-ui .qprogress{ display:inline-flex; align-items:center; justify-content:center; height:46px; aspect-ratio:2096/534; width:auto; padding:0; background:url('../images/ui/badge-qnum.png') no-repeat center / contain; color:#fff; font-weight:800; font-size:1.02rem; /* استثناءُ المالك — خارجَ حدِّ 18px؛ والنصُّ أبيضُ بقرارِه */ text-shadow:0 2px 3px rgba(0,40,70,.75); filter:drop-shadow(0 1px 2px rgba(0,0,0,.22)); } /* ⑧ بطاقات الكلمات: تُرسَم بالكود (البطاقات الزرقاء الزجاجية §٦ عبر .qwin .chip)، لا بصورة word-card.png (متجاوَزة/غير مستعملة). أُزيلت قواعد .chip المصوّرة القديمة لأنها غير مبوّبة وكانت ستمسّ بطاقات بقية الدروس. حالة .chip.used تبقى من ستايل المنصّة. */ /* ⑨ حاوية الإجابة وفراغات الإسقاط (.blank .target .grp-drop): CSS المنصّة كما هو — بلا صور */ /* ⑩ تجربة: صورة الإطار frame-moon-source.png كما هي حاويةً كاملة للسؤال. الإطار صندوق بنسبة أبعاد الصورة الأصلية بالضبط (1448:1086) بلا أي شد، والمحتوى في نافذة داخلية فوق منطقة وسط الإطار مع تمرير داخلي عند الطول — الإطار نفسه لا يتمدد. الشارتان تبقيان فوقه من الخارج. */ .shoogp-ui .qcard{ background:none !important; border:none !important; box-shadow:none !important; border-radius:0; overflow:visible; padding:0 !important; color:#fff; } .shoogp-ui .qcard::before,.shoogp-ui .qcard::after{display:none} .shoogp-ui .qcard .qhead{padding:0 10px; margin-bottom:10px} /* مبدئيّ — placeIcons يحكمه */ /* عائلة الإطارات القمرية: صنف الحجم (qf-s/qf-m/qf-l) والهندسة تُضبط من جدول FRAME_SIZES في السكربت — الإطار بنسبة صورته الأصلية دائماً بلا شد، والعرض يتناسب مع الشاشة ويُقيَّد بالارتفاع المتاح */ .qframe{ position:relative; margin-inline:auto; background:none; /* إعادة ضبط المقاس بانتقال سلس لا قفزة (يُدار من fitFrame: يُعطَّل أثناء القياس ويُفعَّل للتغيّر النهائي فقط، حتى لا يفسد قياس الأبعاد المتزامن) */ transition:width .30s ease; } /* أزرار تحقّق/إعادة صارت في وسط شريط التنقّل (قرار المالك — التبنّي في app.js)؛ قاعدة z-index القديمة داخل النافذة أُزيلت لأنها لم تعد تنطبق */ /* قناع المحتوى (قرار المالك ٢٠٢٦-٠٨-٠١ — placeMask في js/shoogp-ui.js): أربع شرائح تعرض حلقة صورة الإطار المحيطة بالنافذة فوق المحتوى (z=3 فوق .qwin z=2)، فما تجاوز النافذة يغطيه رسم الإطار بزخارفه (الدورق والمجهر...) ويبدو داخلاً أسفله. بلا لمس. */ .qframe .qmask{position:absolute;inset:0;pointer-events:none;z-index:3} .qframe .qmask span{position:absolute;background-image:var(--fimg);background-repeat:no-repeat} /* قصاصة الإطار: شكل الإطار الحقيقي بزخارفه شفاف الوسط (تُبنى من صورته وقت التشغيل) */ .qframe .qmaskart{position:absolute;inset:0;pointer-events:none;z-index:3; background-repeat:no-repeat;background-size:100% 100%} /* تلاشٍ قصير عند التنقل بين سؤالين (يمنع قفزة تغيّر حجم الإطار) */ .shoogp-ui .qcard{animation:cardFade .28s ease} @keyframes cardFade{from{opacity:0}to{opacity:1}} /* ═══ الشريطُ الرماديُّ الخلفيُّ (.qband) ═══ مستطيلٌ رأسيٌّ من أعلى الشاشةِ إلى أسفلِها خلفَ منطقةِ السؤال. **عرضُه كلُّه من JS** (‏`clip-path` وحدَه) قياساً حيّاً لصندوقِ الإطارِ والأيقونات وعمودِ الصاروخ — لا بُعدَ ثابتاً هنا (راجعْ placeBand في js/shoogp-ui.js وقاعدةَ الهندسةِ الحيّة). **الترتيبُ الطبقيّ — لماذا `z-index:-1`:** المطلوبُ «فوقَ خلفيةِ الفضاءِ مباشرةً وتحتَ كلِّ شيءٍ آخر». خلفيةُ `body` المتدرّجةُ تنتقلُ إلى الكانفاس (‏`html` بلا خلفية)، والقيمةُ السالبةُ تُرسَم في خطوةِ «الأبناءُ ذوو z السالب» من سياقِ الجذر: **فوقَ الكانفاسِ وتحتَ كلِّ محتوى** (‏`.stars` عند 0، الإطارُ والتعبئةُ والنافذةُ داخلَ `.qframe`، وعمودُ الصاروخِ عند 6). قيمةُ `0` كانت ستُغطّي النصوصَ غيرَ المُموضَعةِ (عنوانَ الدرس) لأنّ المحتوى السطريَّ يُرسَم *قبلَ* العناصرِ المُموضَعةِ ذاتِ z=0. النجومُ تبقى ظاهرةً فوقَ الشريط (هي جزءٌ من خلفيةِ الفضاء) — لإخفائِها تحتَه اجعلْ z للشريط 0 وأدرِجْه بعد `.stars`. بلا حدودٍ ولا ظلالٍ ولا استدارة (يلامسُ أعلى الشاشةِ وأسفلَها)، ولا يعترضُ اللمس. **لماذا `clip-path` لا `left`/`width`:** الصندوقُ يغطّي المنفذَ كلَّه (`inset:0`) وتُقتَصُّ حافّتاه بـ`clip-path`، فيتغيّرُ العرضُ **بلا أيِّ إعادةِ تخطيطٍ** في كلِّ إطارٍ من الانتقال (‏`left`/`width` تُعيدانِ التخطيطَ لكلِّ إطار — ثقيلٌ على السبورة). وميزةٌ إضافية: `inset:0` يكفلُ الامتدادَ الكاملَ من أعلى الشاشةِ إلى أسفلِها بلا حسابِ ارتفاعٍ إطلاقاً. */ .qband{ position:fixed; inset:0; z-index:-1; display:none; /* يُظهرُه placeBand عند وجودِ إطارٍ معروض */ background:rgba(128,128,128,.5); /* رماديٌّ 50% — قابلٌ للمعايرة */ border:0; border-radius:0; box-shadow:none; clip-path:inset(0 100% 0 100%); /* مقتصٌّ تماماً حتى يضبطَه placeBand */ pointer-events:none; /* انتقالٌ قصيرٌ فلا تقفزُ الحافةُ بين سؤالين مختلفَي العرض */ transition:clip-path .20s ease; } @media(prefers-reduced-motion:reduce){ .qband{transition:none} } /* ═══ إطارُ الشريطِ الأبيضُ (‏.qbandframe) — نفسُ رسمِ إطارِ بطاقةِ الكتاب ═══ **لماذا عنصرٌ مستقلٌّ لا حدٌّ على ‎.qband‎:** الشريطُ صندوقُه يغطّي المنفذَ كلَّه (`inset:0`) ولا يُرى منه إلا ما يستبقيه `clip-path`. فأيُّ `border` عليه يُرسَمُ عندَ حوافِّ **المنفذ** ثمّ يقتصُّه القناعُ فيختفي تماماً. لذلك يُموضَعُ هذا العنصرُ على **مستطيلِ الشريطِ الفعليِّ** بـ`left/top/width/height` يكتبُها `placeBand` من الحسابِ نفسِه — فلا مصدرَ ثانٍ للهندسة. (‏`position:fixed` خارجَ التدفّق، فكتابةُ الأبعادِ لا تُعيدُ تخطيطَ المستند.) يرثُ `--shoogp-frame` و`--shoogp-frame-w` من `:root` في css/style.css — رسمٌ واحدٌ للبطاقةِ وللشريط، فاستدارتُهما ٣٠px واحدةٌ ولا ينفكّان. */ .qbandframe{ position:fixed; z-index:-1; display:none; pointer-events:none; border:var(--shoogp-frame-w) solid transparent; border-image:var(--shoogp-frame) 60 stretch; /* حرٌّ من أيِّ `overflow` فوقَه، فالظلُّ يظهرُ حولَه كاملاً (بخلافِ بطاقةِ الكتاب) */ filter:var(--shoogp-frame-shadow); transition:left .20s ease, top .20s ease, width .20s ease, height .20s ease; } @media(prefers-reduced-motion:reduce){ .qbandframe{transition:none} } /* ═══ كسوةُ الشريطِ ببطاقةِ الكتابِ الحاليّ (.qb-book) — **لكلِّ المواد** ═══ الشريطُ يرتدي **هويةَ بطاقةِ الكتابِ المفتوحِ نفسِها**: لونُها، وشبكةُ نقاطِها، ودائرتاها البيضاوان — **بلا نصوصٍ ولا شارةِ صفٍّ ولا أيقونةٍ ولا كبسولةِ دروس**. فيشعرُ التلميذُ أنّه ما زال «داخلَ الكتابِ» الذي اختارَه. **مصدرُ اللونِ واحدٌ لا يتكرّر:** صنفُ لونِ البطاقةِ (`bk-*`) يضعُه `placeBand` على الشريطِ بادئةً `qb-`، وكلُّ صنفٍ أدناه لا يفعلُ إلا **إسنادَ متغيّرَي اللونِ من لوحةِ `:root` في css/style.css** (‏`--bk-<اللون>-a/-b`) — وهي نفسُها التي ترسمُ البطاقةَ في صفحةِ التنقّل. فتغييرُ لونِ كتابٍ هناك ينتقلُ إلى شريطِه تلقائياً، ولا هَكْسَ مكرّرٌ هنا. كتابٌ جديدٌ بلونٍ جديد = سطرٌ واحدٌ في اللوحةِ وسطرٌ هنا. (لا تُستعمَلُ صورةُ البطاقةِ نفسُها لأنّ النصوصَ والأيقونةَ مطبوعةٌ فيها.) **التمدّدُ بلا تشويه:** التدرّجُ الخطّيُّ يمتدُّ طبيعياً بأيِّ نسبةِ أبعاد (100%×100%)؛ أمّا النقاطُ والدائرتانِ فـ**مقاسُها بالبكسلِ ثابت** فلا تُمطّ — النقاطُ تتكرّرُ عدداً لا حجماً (نفسُ قاعدةِ .qfill §٥)، والدائرتانِ تنتقلانِ بالنسبةِ المئويةِ بحجمٍ ثابت. الزاويةُ 160deg لا 145deg (زاويةُ البطاقة) لأنّ الشريطَ طويلٌ ضيّق: 145deg تُصرِّفُ التدرّجَ عرضاً فيبدو مقطوعاً، و160deg يحفظُ إيحاءَ الضوءِ من أعلى-اليسارِ ويقرأُ رأسياً. **زواياه تبقى قائمة** (لا تنتقلُ استدارةُ البطاقة 30px) — يرثُ border-radius:0 أعلاه. ويبقى **طبقةَ خلفيةٍ خالصة**: `z-index:-1` و`pointer-events:none` من القاعدةِ أعلاه، فلا يعترضُ لمساً ولا يمسُّ `.qfill` (المحصورةَ في نافذةِ الإطار) ولا عمودَ الصاروخ. */ .qband.qb-book{ background: /* (فوق) شبكةُ نقاطِ البطاقةِ — ثابتةُ الحجم، تتكرّرُ عدداً لا حجماً. **الألفا 0.35 (رُفِعت 0.20 ← 0.26 ← 0.35 بقرارِ المالك ٢٠٢٦-٠٨-٠١):** الشريطُ كلُّه عندَ `opacity:.82`، فالظاهرُ فعلياً = 0.35 × 0.82 = **0.287** (كان 0.164 ابتداءً). رقمٌ **مستقلٌّ عن ألفا الدائرتين** فلا يستدعي إعادةَ معايرتِهما (تحذيرُ §١.٣‑د يخصُّ `opacity` الشريطِ والدائرتين معاً، لا شبكةَ النقاط). */ radial-gradient(rgba(255,255,255,.35) 1.6px, rgba(255,255,255,0) 1.9px) 0 0/30px 30px repeat, /* ═══ دائرتا زاويتَي البطاقة — **دائرتانِ حقيقيتانِ بوحدةِ عرضِ المستطيل W** ═══ كانتا بالبكسلِ الثابت (430px و350px عند نسبٍ مئويةٍ من المنفذ) فتُقتطعانِ اقتطاعاً خاطئاً لأنّ عرضَ الشريطِ يتغيّرُ مع كلِّ سؤال. الآن مقاسُهما وموضعُهما يُحسبانِ حيّاً في `placeBand` من W ويُكتبانِ في المتغيّراتِ أدناه، فتثبتُ نسبةُ نصفِ القطرِ إلى العرضِ مهما تغيّرَ الحجم. **لماذا الحسابُ في JS لا بالنسبةِ المئوية:** صندوقُ الشريطِ يغطّي المنفذَ كلَّه (`inset:0`) ولا يُقتَصُّ إلا بـ`clip-path`، فالنسبةُ المئويةُ تُقاسُ على المنفذِ لا على المستطيلِ المرئيّ — ومن هنا جاء الخطأُ أصلاً. الهندسةُ مستخرَجةٌ من الغلافِ المرجعيِّ `images/cover-g1-sci.jpg` (500×660): قوسُ العلويةِ يقطعُ الحدَّ الأعلى عند 44.4٪ من العرضِ والأيسرَ عند 28٪ من الارتفاع، والسفليةُ تقطعُ الأسفلَ عند 70.6٪ والأيمنَ عند 71.8٪ — وكلتاهما تمرُّ بنقطةِ الزاويةِ نفسِها، فينتجُ: العليا : مركزٌ (0.222W من اليسار، 0.185W من الأعلى) ونق 0.289W، ألفا 0.11 السفلى : مركزٌ (0.147W من اليمين، 0.185W من الأسفل) ونق 0.237W، ألفا 0.07 (تحقُّقٌ مستقلٌّ بالكود من ملفِّ الغلاف أعطى 44.6/28.8/70.0/71.2٪ ونق 0.293W و0.242W وألفا 0.115 — فروقٌ دون 2٪، ضمنَ دقّةِ المسح.) `closest-side` على صندوقٍ **مربّع** ⇒ دائرةٌ حقيقيةٌ لا بيضاوية. **بلا تلاشٍ — حافّةٌ حادّة (مقيسة):** الملفُّ الدقيقُ عبرَ حدِّ الدائرةِ في الغلافِ عندَ y=150 يعطي 166→160→155→154 خلالَ **4px فقط**، أي قرصٌ مصمتٌ بحافّةٍ حادّةٍ لا تدرّجَ فيه (ما بعدَ 4px تنعيمُ حوافٍّ لا أكثر). فالمحطّاتُ الثلاثُ القديمةُ (كامل 74٪ ← النصف 90٪ ← صفر 100٪) كانت خطأً: أَخفَتِ الحافّةَ حيثُ تُرى بالضبط. تُستعمَلُ محطّتانِ متلاصقتان (99.4٪ ثمّ 100٪) فيبقى القرصُ مصمتاً وتُنعَّمُ الحافّةُ بمقدارِ بكسلٍ واحدٍ فلا تُسنَّن. الشفافيةُ **0.55 مسطّحةٌ** للدائرتين (بقرارِ المالك ٢٠٢٦-٠٧-٣١: محاكاةُ الأجزاءِ البيضاءِ الظاهرةِ في زوايا بطاقةِ الكتابِ — عندَ 0.30 السابقةِ كانتِ الأقواسُ المكشوفةُ على هوامشِ الشريطِ باهتةً لا تُقرأ، والإطارُ يغطّي جسمَ القرص). */ radial-gradient(closest-side, rgba(255,255,255,.55) 99.4%, rgba(255,255,255,0) 100%) var(--qb-c1x, 10%) var(--qb-c1y, 11%)/var(--qb-c1d, 430px) var(--qb-c1d, 430px) no-repeat, radial-gradient(closest-side, rgba(255,255,255,.55) 99.4%, rgba(255,255,255,0) 100%) var(--qb-c2x, 89%) var(--qb-c2y, 84%)/var(--qb-c2d, 350px) var(--qb-c2d, 350px) no-repeat, /* (تحت) تدرّجُ لونِ البطاقةِ نفسِه — من لوحةِ :root عبرَ صنفِ اللونِ أدناه */ linear-gradient(160deg, var(--qb-a) 0%, var(--qb-b) 100%) 0 0/100% 100% no-repeat; /* شفافيةُ الكسوةِ كلِّها. تُطبَّقُ على العنصرِ لا على كلِّ محطّةِ لون، فتحتفظُ الطبقاتُ بعلاقاتِها الداخلية (النقاطُ والدائرتانِ تخفتانِ بنفسِ النسبةِ مع التدرّج) — أي «البطاقةُ نفسُها بشفافية». **لماذا 0.82 لا 0.55:** خلفياتُ الثيماتِ داكنةٌ (كحليّ/زيتونيّ)، فعندَ 0.55 يمتزجُ 45٪ منها باللونِ فينحرفُ عن لونِ البطاقة انحرافاً ظاهراً — قِيسَ حسابياً: برتقاليُّ الرياضياتِ ‎#f5a04a‎ يخرجُ ‎rgb(150,105,69)‎ (طينيٌّ يُقرأُ أحمرَ باهتاً) بدلَ برتقاليّ. عندَ 0.82 يخرجُ ‎rgb(207,138,72)‎ — برتقاليٌّ صريحٌ كالبطاقة، وتبقى خلفيةُ الفضاءِ ظاهرةً بـ18٪ فلا يصيرُ الشريطُ لوحاً مصمتاً. **قابلةٌ للمعايرة: هذا هو الرقمُ المطلوبُ تغييرُه** (ومعه ألفا الدائرتين أعلاه، فهما مقسومتانِ عليه). */ opacity:.82; } /* إسنادُ لونِ البطاقةِ إلى الشريط — لا قيمَ هنا، إحالةٌ إلى لوحةِ :root وحدَها */ .qband.qb-bk-red{ --qb-a:var(--bk-red-a); --qb-b:var(--bk-red-b)} .qband.qb-bk-green{ --qb-a:var(--bk-green-a); --qb-b:var(--bk-green-b)} .qband.qb-bk-orange{--qb-a:var(--bk-orange-a); --qb-b:var(--bk-orange-b)} .qband.qb-bk-blue{ --qb-a:var(--bk-blue-a); --qb-b:var(--bk-blue-b)} .qband.qb-bk-purple{--qb-a:var(--bk-purple-a); --qb-b:var(--bk-purple-b)} .qband.qb-bk-teal{ --qb-a:var(--bk-teal-a); --qb-b:var(--bk-teal-b)} /* ثلاث طبقات فوق خلفية الصفحة: (0) .qfill — التعبئة النقطية، خلف الإطار، تُرى من الفتحة الشفافة فقط (1) .qmoon — صورة الإطار القمري بحوافه وحفره وزخارفه، تغطّي حواف التعبئة (2) .qwin — محتوى السؤال، فوق الجميع */ /* التعبئة الداخلية (CSS خالص — الصور لم تُمسّ): قماشة الحاوية القديمة نفسها — تعبئة بيضاء شبه شفافة (alpha 0.3 = شفافية 70%) وفوقها شبكة النقاط المنسوخة حرفياً من .qcard::after في css/style.css (نقطة 1.3px بشفافية .17، شبكة 22×22px، إزاحة 6px). إزاحاتها = نصف إزاحات الفتحة، فتمتدّ تحت حافة الإطار الداخلية (تداخل يمنع أي خط فاصل أو فجوة)، وزواياها مستديرة كبيرة تقارب انحناء الفتحة. مربوطة نسبياً فتلاحق كل تكبير وتصغير، والنقاط ثابتة الحجم. */ .qfill{ position:absolute; z-index:0; background-color:rgba(43,87,72,.65); /* أخضر #2B5748 بشفافية 65% — لكل الأسئلة */ box-shadow:inset 0 0 10px rgba(0,0,0,1); /* ظل داخلي أسود واضح، انتشار 10px */ background-image:radial-gradient(rgba(255,255,255,.17) 1.3px, transparent 1.7px); background-size:22px 22px; background-position:6px 6px; border-radius:8%/7%; backdrop-filter:blur(6px) saturate(.9); -webkit-backdrop-filter:blur(6px) saturate(.9); pointer-events:none; } /* صورة الإطار القمري فوق التعبئة (تُحقن عبر متغيّر --fimg) */ .qmoon{ position:absolute; inset:0; z-index:1; pointer-events:none; background:var(--fimg) no-repeat center / contain; } /* نافذة المحتوى فوق الجميع — إزاحاتها من جدول المقاسات (متحفظة عن الزخارف) */ .qwin{ --s:1; /* الخطوط بأحجامها الافتراضية — الإطار هو الذي يتكيف، لا تمرير أبداً. حارسُ الشاشة (js/shoogp-ui.js) قد يخفضُ --s inline على .qwin حين يتجاوزُ الإطارُ حدودَ الشاشة — «يُصغَّرُ المحتوى لا الإطار» (§١.٤ب) */ position:absolute; z-index:2; overflow:hidden; padding:10px 16px; display:flex; flex-direction:column; justify-content:space-evenly; /* القليل يتباعد باسترخاء */ row-gap:10px; color:#3d2f14; } /* ── تناظر التنفّس العلويّ/السفليّ (قاعدة §8) ── سطر التغذية الراجعة .fb (css/style.css) يحجز أسفلَ الأزرارِ 42px فارغةً دائماً (margin-top:16 + min-height:26) بلا مقابلٍ علويّ، والمحتوى يملأ النافذة تماماً، فتُدفَعُ الكتلةُ المرئيةُ (العنوان↔الأزرار) للأعلى ويلامسُ العنوانُ الزخرفةَ. نعكسُ ذلك الحجزَ فوقَ العنوانِ بفاصلٍ مساوٍ (--fb-reserve) فتتوسّطُ الكتلةُ بينَ حافّتَي الزخرفةِ العلويةِ والسفليةِ. طبقةٌ مشتركةٌ لكلِّ الأسئلةِ لا سؤالٌ مفرد. */ .qwin{ --fb-reserve:42px; } .qwin::before{ content:""; display:block; flex:0 0 auto; height:var(--fb-reserve); } /* الملاذ الأخير النادر: حاوية CSS مرنة بروح العائلة — للسؤال الذي لا يسعه أنحف إطار (أطول من نافذة tall). صورة الإطار تُعرض contain كسائر الإطارات (بلا مطّ ولا تكرار)، والتعبئة المنقّطة خلفها، والمحتوى فوقها. لا سقف ولا مئزر ولا round. */ .qframe.qflex{ width:min(100%, 880px) !important; aspect-ratio:auto !important; background:none !important; filter:drop-shadow(0 8px 18px rgba(0,0,0,.3)); padding:6px 2px 10px; } /* .qmoon يرث background: var(--fimg) / contain من القاعدة الأساسية — لكن الإرساء هنا **أعلى** لا وسطاً: الإرساء الأوسط يولّد شريط letterbox علوياً فارغاً (يتلوّن بتعبئة hasFill) تسحبه هوامش الأيقونات السالبة فوق أصل التمرير حيث لا يراه scrollHeight فيُقصّ من أعلى الشاشة بلا علاج (§١.٤ب «حارس الشاشة»). بالإرساء العلوي يبدأ الرسم من قمة الصندوق فيبقى العمود كله في التدفق المحسوب. */ .qframe.qflex .qmoon{ inset:0; background-position:center top; } /* التعبئة في المرنة تُحصر أيضاً بالفتحة الفعلية عبر placeFill (قياسٌ حيّ)؛ لا إزاحة ثابتة تتجاوز حافة الصورة. inset:0 مبدئيٌّ فقط حتى يجهز القياس (يُستبدل بالبكسل). */ .qframe.qflex .qfill{display:block; inset:0; border-radius:26px} .qframe.qflex .qwin{ position:relative; z-index:2; overflow:visible; height:auto; top:auto!important;left:auto!important;right:auto!important;bottom:auto!important; /* §١.٤ز: المحتوى يبدأ أسفل الزخرفة العلوية للصورة — الحشوة العلوية تُحسب حيّاً في placeFlexPad (هندسة decoT المقيسة لوناً) وتُكتب في --flexpad؛ إن غابت الهندسة يكتب الاحتياط ~15% من العرض + تنفّس. الجانبان: حافّة الرسم + 16px (--flexpadx)، والأسفل تنفّس §١.٥ب (≥16px). المتغيّرات تُستهلك هنا حصراً، فزوال qflex يُبطلها. */ padding: var(--flexpad, 0px) var(--flexpadx, 24px) 16px; } .qwin>*{width:100%; flex:0 0 auto} /* التقليص التدريجي بحدود دنيا صارمة: نص السؤال ≥22px · الخيارات والبطاقات ≥18px · العنصر التفاعلي ≥60px */ .qwin .qprompt{font-size:max(22px, calc(26px * var(--s))) !important} .qwin .tf,.qwin .opt{ font-size:max(18px, calc(21px * var(--s))) !important; min-height:60px; } .qwin .mitem,.qwin .seqitem,.qwin .excl-opt,.qwin .aopt{ font-size:max(18px, calc(20px * var(--s))) !important; min-height:60px; display:flex; align-items:center; justify-content:center; } .qwin .chip{ font-size:max(18px, calc(19px * var(--s))) !important; min-height:60px; } .qwin .fbtext{font-size:max(18px, calc(21px * var(--s))) !important} .qwin .grp-h{font-size:max(18px, calc(19px * var(--s))) !important} .qwin .grp-drop{min-height:max(60px, calc(110px * var(--s)))} /* حارسُ الشاشة: الوسائطُ (رسومُ الأسئلةِ الثابتة) تتقلّصُ عرضاً مع مقياسِ المحتوى --s فيتبعُها ارتفاعُها بنسبةِ الرسم — محايدٌ عند 1 (max-width:100% هو الأصل). بلا zoom متداخلٍ (يُفسدُ scrollHeight فيغشُّ زومَ fit.js). تُستثنى مسارحُ «السحبِ على صورة»: صناديقُ .target تُوضَعُ نسبةً من المسرحِ لا من الرسم. */ .qwin .figwrap{max-width:calc(100% * var(--s,1)); margin-left:auto; margin-right:auto} .qwin .stage:has(.target) .figwrap{max-width:100%} /* المسرحُ نفسه ثابتُ الارتفاع في style.css (‏400px) فلا يتأثر بالمقياس — وهو الكتلة الكبرى في أسئلة الوسائط (كالتلوين)؛ نُخضِعه للمقياس هنا (محايد عند 1) فيتبعه ارتفاعُ الرسم (height:100%). مسارحُ «السحب على صورة» مستثناة: صناديق .target وحارس dndStageNeed مبنيان على أبعادها القائمة. */ .qwin .stage:not(:has(.target)){height:calc(400px * var(--s,1))} .qwin::-webkit-scrollbar{width:10px} .qwin::-webkit-scrollbar-thumb{background:#d9be93; border-radius:5px} .qwin::-webkit-scrollbar-track{background:rgba(120,90,40,.08); border-radius:5px} /* نصوص فاتحة فوق طبقة التعبئة الكحلية الداكنة (النصوص العارية فقط — الخيارات والبطاقات لها خلفية كريمية بنصّها الداكن فتبقى كما هي) */ .qwin{color:#eef1f6} /* padding-top:.22em = بدلُ تجاوزِ التشكيلِ العربيِّ (الحركات/الشدّة) فوقَ صندوقِ السطرِ (قِيسَ ~3px عند Cairo 26px)؛ بوحدةِ em ليتناسبَ مع تكبيرِ الخطّ عبرَ الأطرِ. */ .qwin>.qprompt{margin:4px 0 14px;padding-top:.22em;color:#fff;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.45)} .qwin .qfb.good{color:#a8e6bd !important;text-shadow:0 1px 2px rgba(0,0,0,.4) !important} .qwin .qfb.bad{color:#ffb3aa !important;text-shadow:0 1px 2px rgba(0,0,0,.4) !important} .qwin .bank .bt{color:#e7ecf3 !important} .qwin .seq-hint{color:#dfe4ee !important} .qwin .grp{border-color:#d9b97c !important} .qwin .grp-h{background:#e6cd9c !important;color:#4a3213 !important;text-shadow:none !important} /* ── نصُّ السؤال في كتابِ العلوم: رماديٌّ غامق ── تعبئةُ الإطارِ القمريِّ في نسخِها الحالية رمليةٌ فاتحة (قِيسَت #F8C48B)، والأبيضُ أعلاه مُعَدٌّ لتعبئةٍ كحليةٍ داكنة فيَخفتُ عليها. نُثبِّتُ لدروسِ العلومِ رماديّاً غامقاً #3a3a3a (تباينٌ 7.1:1 على التعبئة الرملية)، ونقلبُ ظلَّ النصِّ من داكنٍ إلى فاتحٍ فيرفعُ الحرفَ عن الرملِ بدلَ أن يُوحِلَه. النطاق: علامةُ المادة `subj-science` — تسري على **كلِّ دروسِ كتابِ العلوم**، وهي مستقلّةٌ عن قشرةِ الأزرارِ `skin-rocky` المحصورةِ بدرسِ المعاينة. الرياضياتُ وبقيةُ المواد لا تتأثّر. (خاناتُ التعبئةِ المدموجة `qf-hasfill` لها قاعدتُها أدناه وتغلبُ هذه بالتخصيص، فلا تتعارضان.) */ .shoogp-ui.subj-science .qwin>.qprompt{ color:#3a3a3a; text-shadow:0 1px 2px rgba(255,255,255,.55); } /* ══ قاعدة تصميم خاصة بكتب الرياضيات (qf-hasfill — التعبئةُ المدموجة) ══ تعبئةُ أطرِ الرياضياتِ سماويةٌ مشبّعة (#00b6d7 وأخواتُها)، فالنصوصُ الملامسةُ لها بيضاءُ بظلٍّ داكنٍ يرفعُها عن التعبئة. وألوانُ التغذيةِ الراجعةِ فاتحةٌ (أخضرُ/أحمرُ مضيئان) لتُقرأَ على الخلفيةِ السماوية. */ .qframe.qf-hasfill .qwin>.qprompt{ color:#fff; /* ظلٌّ أوضحُ قليلاً (قرارُ المالك ٢٠٢٦-٠٧-٣١؛ كان 0 1px 3px بألفا 0.6) */ text-shadow:0 2px 4px rgba(0,0,0,.75); } .qframe.qf-hasfill .qwin .bank .bt, .qframe.qf-hasfill .qwin .seq-hint, .qframe.qf-hasfill .qwin .cinstr{ color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.65) !important; } .qframe.qf-hasfill .qwin .qfb.good{ color:#7ee2a0 !important; } .qframe.qf-hasfill .qwin .qfb.bad{ color:#ff8a8a !important; } /* ═══════════════════════════════════════════════════════════════════ ★ ستايل البطاقات الزجاجية الزرقاء (CSS خالص، بلا صور) ★ يُطبَّق على: بطاقات التوصيل (.mitem) · خيارات الاختيار (.opt) · بطاقات الكلمات القابلة للسحب (.chip في التصنيف وملء الفراغ). لا يمسّ الأزرار المصوّرة (تحقّق/إعادة/التنقل/الشارات). ─ خلفية زرقاء بتدرّج رأسي (أفتح أعلى، أغمق أسفل) + لمعة زجاجية علوية ─ حدّ أزرق أغمق سميك + زوايا كبيرة + نجيمتان بيضاوان في الزاويتين العلويتين ─ نص كحليّ داكن غامق متوسط · ظل خفيف للبروز ═══════════════════════════════════════════════════════════════════ */ .qwin .opt, .qwin .mitem, .qwin .chip{ /* نجمة/بريق أبيض صغير (رباعي الأطراف) للزخرفة في الزاويتين */ --spk:url("data:image/svg+xml,"); /* التدرّج الأساسي: سماوي فاتح أعلى ← أزرق أغمق أسفل (درجات الصورة) */ --card-grad:linear-gradient(180deg,#d4edfb 0%,#a8d6f2 52%,#82bfe8 100%); /* اللمعة الزجاجية: شريط أبيض شبه شفّاف يعلو النصف الأعلى ثم يتلاشى */ --card-sheen:linear-gradient(180deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.18) 40%,rgba(255,255,255,0) 56%); background: var(--spk) top 7px right 10px / 13px 13px no-repeat, var(--spk) top 8px left 10px / 9px 9px no-repeat, var(--card-sheen), var(--card-grad) !important; border:2.5px solid #3d86bd !important; border-image:none !important; /* يلغي إطار word-card.png المصوّر */ border-radius:17px !important; box-shadow:0 4px 9px rgba(23,66,102,.30), inset 0 1px 0 rgba(255,255,255,.55) !important; color:#143247 !important; /* نص كحليّ داكن */ font-weight:800 !important; text-shadow:none !important; filter:none !important; /* يلغي drop-shadow صور البطاقة القديمة */ min-height:60px; /* حد أدنى للمس */ transition:transform .16s ease, box-shadow .18s ease, filter .18s ease !important; } /* بطاقات الكلمات: حشوة مريحة وتوسيط (كانت تعتمد على أبعاد الصورة) */ .qwin .chip{ padding:12px 20px !important; display:inline-flex; align-items:center; justify-content:center; } .qwin .chip.ok::before, .qwin .chip.no::before{content:none} /* بلا علامات نصية — نكتفي باللون */ /* ⟡ تحويم/لمس: تفتيح طفيف مع رفع بسيط */ .qwin .opt:hover:not(:disabled), .qwin .mitem:not(.matched):hover, .qwin .chip:not(.used):hover{ filter:brightness(1.06) !important; transform:translateY(-2px); } .qwin .opt:active:not(:disabled), .qwin .mitem:not(.matched):active, .qwin .chip:not(.used):active{transform:translateY(0) scale(.98)} .qwin .chip.dragging{ transform:scale(1.07) !important; box-shadow:0 10px 20px rgba(23,66,102,.42) !important; filter:none !important; } /* ⟡ حالة «محدّدة» (التوصيل): توهّج أزرق حول الحد */ .qwin .mitem.selected{ border-color:#2f79b5 !important; box-shadow:0 0 0 3px rgba(125,198,242,.80), 0 0 16px rgba(85,170,235,.80), 0 4px 10px rgba(23,66,102,.32) !important; transform:translateY(-1px); } /* ⟡ بعد التحقّق — الصحيحة: تدرّج أخضر بنفس الأسلوب (نبدّل التدرّج فقط فتبقى اللمعة والنجيمتان) */ .qwin .opt.correct, .qwin .mitem.matched, .qwin .chip.ok{ --card-grad:linear-gradient(180deg,#ddf4c8 0%,#aee08a 52%,#8ccf66 100%); border-color:#5fa23f !important; color:#22380b !important; box-shadow:0 4px 9px rgba(40,80,20,.28), 0 0 12px rgba(140,205,95,.55), inset 0 1px 0 rgba(255,255,255,.45) !important; } /* ⟡ بعد التحقّق — الخاطئة: اهتزاز لطيف مع بقاء البطاقة على حالها العادية (لا لون عقابيّ صارخ — نلغي أي خلفية وردية يفرضها المنطق) */ .qwin .opt.wrong, .qwin .chip.no, .qwin .mitem.shake{animation:cardShake .45s ease} @keyframes cardShake{ 0%,100%{transform:translateX(0)} 15%{transform:translateX(-5px)} 30%{transform:translateX(5px)} 45%{transform:translateX(-4px)} 60%{transform:translateX(4px)} 75%{transform:translateX(-2px)} 90%{transform:translateX(2px)} } @media(prefers-reduced-motion:reduce){ .qwin .opt.wrong,.qwin .chip.no,.qwin .mitem.shake{animation:none} } /* ═══════════ إصلاح المطّ في أسئلة البطاقات (التصنيف/السحب) ═══════════ الإطار سليم (نسبة أبعاده محفوظة)؛ المطّ كان من align-items الافتراضي (stretch): الصناديق الفارغة تنتفخ لتطابق أطول صندوق، والبطاقات تتمدّد رأسياً لتطابق أطول بطاقة في صفّها. الحل: محاذاة البداية فيأخذ كلٌّ ارتفاع محتواه فقط. */ /* ④ صناديق التصنيف: كلٌّ بارتفاع محتواه — الفارغ لا يُمطّ ليطابق الأطول */ .qwin .grp-row{align-items:flex-start} /* ③ البطاقات: ارتفاعها مع نصّها فقط (سطر/سطران) لا مع أطول بطاقة في الصف، وحدّ أقصى مريح للعرض فتلتفّ الكلمة الطويلة بدل أن تتمدّد عرضاً */ .qwin .grp-drop, .qwin .clsbank .chips, .qwin .fillbank .chips{align-items:flex-start} .qwin .chip{max-width:min(100%,340px)} /* ② صورة «السحب على صورة»: object-fit:contain احترازاً ضد أي شدّ */ .qwin img.labelimg{object-fit:contain} /* ═══════════ تمييز السحب/الإفلات (تربوي): المحمول ≠ المستقبِل ═══════════ الطفل يميّز فوراً: البطاقة الزرقاء «ترتفع» عن السطح (تُحمَل)، والفراغ «غائر» كالحفرة (يستقبِل). أثناء السحب يتوهّج الفراغ الصالح ترحيباً، وبعد الإفلات يمتلئ الفراغ ببطاقة زرقاء ليفهم أنّ المكان اكتمل. */ .qwin .blank, .qwin .target{ --spk:url("data:image/svg+xml,"); } /* ① بطاقات السحب: بروز أوضح (ظل أعمق) وتوهّج عند اللمس يوحي بالارتفاع عن السطح */ .qwin .chip{ box-shadow:0 6px 13px rgba(23,66,102,.40), inset 0 1px 0 rgba(255,255,255,.55) !important; } .qwin .chip:not(.used):hover{ box-shadow:0 10px 18px rgba(23,66,102,.44), 0 0 14px rgba(120,195,240,.70), inset 0 1px 0 rgba(255,255,255,.60) !important; transform:translateY(-3px); } .qwin .chip:not(.used):active, .qwin .chip.dragging{ cursor:grabbing; box-shadow:0 14px 26px rgba(23,66,102,.50), 0 0 20px rgba(120,195,240,.90), inset 0 1px 0 rgba(255,255,255,.60) !important; transform:translateY(-4px) scale(1.06) !important; } /* ② فراغات الإسقاط الفارغة: غائرة كالحفرة — أغمق قليلاً من محيطها، حد متقطّع واضح، ظل داخليّ، بلا أيّ لمعة أو بروز */ .qwin .blank{ background:rgba(30,45,38,.12) !important; border:2px dashed #9fb0a6 !important; border-radius:12px !important; box-shadow:inset 0 2px 5px rgba(0,0,0,.22) !important; color:#8a998f !important; text-shadow:none !important; font-weight:800; } .qwin .target{ background:rgba(20,36,29,.32) !important; border:2px dashed rgba(255,255,255,.80) !important; border-radius:12px !important; box-shadow:inset 0 2px 6px rgba(0,0,0,.42) !important; color:#eef3ef !important; text-shadow:0 1px 2px rgba(0,0,0,.45) !important; } /* النوع (ب) — طبقة على خانة مرسومة داخل رسم السؤال (DESIGN_RULES.md §خطوط التوصيل): الغَور مرسوم في الخانة نفسها داخل svg فلا كسوة فوقها قبل الامتلاء؛ حالات الامتلاء/التحويم/التصحيح تبقى بأنماطها المعتادة أعلاه وأدناه. */ .qwin .target.target-cell:not(.filled):not(.over){ background:transparent !important; border-color:transparent !important; box-shadow:none !important; color:transparent !important; text-shadow:none !important; } /* ④ بعد الإفلات: يستقرّ كبطاقة زرقاء ممتلئة (نفس أسلوب البطاقات) — المكان اكتمل، ويبقى قابلاً للسحب/الإخراج للتصحيح (منطق التفريغ قائم في المحرّك) */ .qwin .blank.filled, .qwin .target.filled{ background: var(--spk) top 5px right 7px/11px 11px no-repeat, var(--spk) top 6px left 7px/8px 8px no-repeat, linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.16) 40%,rgba(255,255,255,0) 56%), linear-gradient(180deg,#d4edfb 0%,#a8d6f2 52%,#82bfe8 100%) !important; border:2.5px solid #3d86bd !important; border-style:solid !important; border-radius:13px !important; box-shadow:0 4px 9px rgba(23,66,102,.30), inset 0 1px 0 rgba(255,255,255,.55) !important; color:#143247 !important; text-shadow:none !important; font-weight:800 !important; cursor:grab; } /* الصحيحة بعد التحقّق: بطاقة خضراء بنفس الأسلوب */ .qwin .blank.filled.correct, .qwin .target.filled.correct, .qwin .blank.correct{ background: var(--spk) top 5px right 7px/11px 11px no-repeat, var(--spk) top 6px left 7px/8px 8px no-repeat, linear-gradient(180deg,rgba(255,255,255,.50) 0%,rgba(255,255,255,.14) 40%,rgba(255,255,255,0) 56%), linear-gradient(180deg,#ddf4c8 0%,#aee08a 52%,#8ccf66 100%) !important; border-color:#5fa23f !important; color:#22380b !important; box-shadow:0 4px 9px rgba(40,80,20,.28), 0 0 12px rgba(140,205,95,.50), inset 0 1px 0 rgba(255,255,255,.45) !important; } /* الخاطئة: تبقى زرقاء (لا لون عقابيّ) مع اهتزاز لطيف */ .qwin .blank.wrong, .qwin .target.wrong{animation:cardShake .45s ease} /* ③ أثناء السحب فوق فراغ صالح: توهّج مرحّب (أخضر فاتح) يقول «أفلت هنا» — يأتي أخيراً ليَغلِب كلّ الحالات أثناء التحويم */ .qwin .blank.over, .qwin .target.over{ background:rgba(95,191,106,.32) !important; border:2px dashed #5fbf6a !important; box-shadow:inset 0 1px 3px rgba(0,0,0,.10), 0 0 0 3px rgba(95,191,106,.45), 0 0 16px rgba(95,191,106,.65) !important; color:#1f4a26 !important; text-shadow:none !important; } /* ═══════════════════════════════════════════════════════════════════ ★ ٩. قشورُ أزرارِ الإجابة حسبَ المادة (طبقةُ عرضٍ خالصة) ★ «القشرة» = صنفٌ واحدٌ يضعُه `js/shoogp-ui.js` على `#questionList` بجانبِ بوّابةِ `.shoogp-ui`، مشتقٌّ من **مادةِ الدرس** بنفسِ منطقِ اختيارِ إطاراتِ المواد (`SUBJECT_SKINS` ← `lessonSubject`). المادةُ التي لا قشرةَ لها تبقى على شكلِها القائمِ **دونَ أيِّ تغيير** (الرياضياتُ اليوم على الأزرقِ الزجاجيّ §٦). إضافةُ مادةٍ لاحقاً = سطرٌ في `SUBJECT_SKINS` + كتلةٌ هنا بنفسِ اسمِ الصنف. القشرةُ **كسوةٌ بصريةٌ بحتة**: لا تمسُّ منطقَ الأسئلةِ ولا بنيةَ DOM، ولا تستعملُ أيَّ صورة — CSS ومرشِّحُ SVG (`feTurbulence`) مُضمَّنٌ في `data:` فقط. ═══════════════════════════════════════════════════════════════════ */ /* ───────── قشرةُ العلوم: «الصخرُ الرمليّ» (skin-rocky) ───────── تُقارِبُ أسلوبَ الإطارِ القمريِّ الصخريِّ الرمليّ: جسمٌ رمليٌّ فاتحٌ متدرّج، كبسولةٌ تامّةُ الاستدارة، سماكةٌ عبرَ إضاءةٍ علويةٍ وحافّةٍ سفليةٍ أغمق، وملمسٌ حبيبيٌّ مع نقراتٍ متناثرة. **النطاقُ: كلُّ العناصرِ التفاعليةِ الملوّنةِ في دروسِ العلوم** (بعدَ التعميم) — أشرطةُ الاختيار (`.opt`) وصواب/خطأ (`.tf`) والاستبعاد (`.excl-opt`)، وبطاقاتُ التوصيل (`.mitem`) والكلماتِ المسحوبة (`.chip`) والخريطةِ الذهنية (`.mmchip`) والترتيبِ التسلسليّ (`.seqitem`) وخياراتِ السؤالِ الصوتيّ (`.aopt`)، والفراغاتُ **بعدَ الإفلات** (`.blank.filled`/`.target.filled`). يبقى خارجَها عمداً: الفراغُ **الفارغ** (غائرٌ — قاعدةُ «المحمول ≠ المستقبِل» §٧)، وصناديقُ التصنيف، وقطعُ البازل، وأجزاءُ رسمِ التلوين، وعلاماتُ تحديدِ الأجزاء. */ .shoogp-ui.skin-rocky{ /* ألوانُ الجسم — مُتغيّراتٌ تُعادُ كتابتُها على الزرِّ في حالتَي الصواب/الخطأ، فتتلوّنُ الكسوةُ كلُّها (تدرّجاً وحبيباتٍ ونقراتٍ) بتبديلِ متغيّرٍ لا بتكرارِ قواعد. */ --rk-hi:#fdf4e2; /* أعلى الجسم — إضاءة */ --rk-mid:#f3ddb6; /* وسطُ الجسم */ --rk-lo:#e4c691; /* أسفلُ الجسم — إيحاءُ السماكة */ --rk-edge:#cba86e; /* الحافّة */ --rk-edge-dk:#a3823f; /* الحافّةُ السفليةُ الأغمق (سماكة) */ --rk-ink:#4a3117; /* النصّ: بنّيٌّ داكنٌ غامق */ --rk-lip:rgba(163,127,72,.55); /* شفةُ السماكةِ أسفلَ الكبسولة */ --rk-cast:rgba(60,40,15,.26); /* الظلُّ المُلقى */ --rk-glow:0 0 0 rgba(0,0,0,0); /* توهّجُ الحالة — شفّافٌ في الوضعِ العاديّ */ /* الملمسُ الحبيبيّ: ضجيجٌ كسوريٌّ (feTurbulence) بلا لونٍ وبشفافيةٍ منخفضة. `stitchTiles=stitch` يَخيطُ حوافَّ البلاطةِ فلا يبينُ خطُّ التكرار، ومقاسُ البلاطةِ غيرُ مدوَّرٍ (190×96) فلا ينتظمُ النمطُ للعين. */ --rk-grain:url("data:image/svg+xml,"); /* النقرات: ثلاثةُ أعماقٍ (غائرة/متوسطة/سطحية) — قاعٌ داكنٌ ثمّ حافّةٌ مضاءةٌ ثمّ تلاشٍ، فتُقرأُ كحفرةٍ لا كبقعة. تُركَّبُ عشرَ طبقاتٍ مفردةٍ (`no-repeat`) بمواضعَ ومقاساتٍ غيرِ منتظمة، وتختلفُ من شريطٍ لآخرَ عبرَ `nth-child` فلا يتكرّرُ نمطٌ ظاهر. */ --rk-pit-deep:radial-gradient(50% 50% at 50% 42%, rgba(132,94,44,.50) 0 30%, rgba(255,252,240,.60) 56%, rgba(255,252,240,0) 76%); --rk-pit-mid:radial-gradient(50% 50% at 50% 44%, rgba(146,106,52,.40) 0 33%, rgba(255,250,235,.52) 58%, rgba(255,250,235,0) 77%); --rk-pit-soft:radial-gradient(50% 50% at 50% 46%, rgba(160,120,64,.28) 0 36%, rgba(255,248,230,.42) 60%, rgba(255,248,230,0) 78%); } /* أشرطةُ الخيارات تتبعُ عرضَ النافذةِ الحيّة (رُفِعَ سقفُ 560px داخلَ القشرةِ وحدَها). */ .shoogp-ui.skin-rocky .qwin .opts{max-width:none} /* ── جسمُ الشريط ── بلا صورةٍ ولا 9-slice، فالتمدّدُ مع النصِّ وعرضِ الإطارِ **بلا تشوّهٍ بنيوياً**: التدرّجُ والحوافُّ والظلالُ كلُّها نسبيةٌ أو بسماكةٍ ثابتة. الحبيباتُ طبقةُ خلفيةٍ فوقَ التدرّج، والنقراتُ في `::before` (مطلقةُ الموضعِ بـ`z-index:-1` داخلَ سياقِ تكديسٍ معزول) فلا تعلو النصَّ ولا تدخلُ في تخطيطِ الـflex. */ .shoogp-ui.skin-rocky .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.mmchip,.seqitem,.aopt, .blank.filled,.target.filled){ /* ═══ الوصفاتُ تُعلَنُ **على الزرِّ نفسِه** لا على الحاويةِ — قاعدةٌ حرجة ═══ المتغيّرُ المخصّصُ يُستبدَلُ ما بداخلِه من `var()` **عندَ العنصرِ الذي يُعلِنُه**، ثم يُورَثُ نصّاً مُستبدَلاً. فلو أُعلِنَت هذه الوصفاتُ على `.shoogp-ui.skin-rocky` لتجمّدَ داخلُها على ألوانِ الحالةِ العاديةِ هناك، ولما لوّنتها حالتا الصواب/الخطأ اللتانِ تُعيدانِ كتابةَ `--rk-*` **على الزرّ**. (قِيسَ حيّاً بعدَ هَفوةٍ في هذا التعميم: `--rk-glow` على الزرِّ أخضرُ صريحٌ بينما `box-shadow` المحسوبُ ما زال يحملُ الشفّافَ وشفةَ الحالةِ العادية.) بإعلانِها هنا يقعُ الاستبدالُ على الزرِّ فيقرأُ ألوانَ حالتِه — ونحتفظُ بمكسبِ «اكتبِ الوصفةَ مرّةً» كما هو. */ --rk-face: var(--rk-grain) 0 0/190px 96px repeat, linear-gradient(180deg, var(--rk-hi) 0%, var(--rk-mid) 46%, var(--rk-lo) 100%) 0 0/100% 100% no-repeat; --rk-shadow: inset 0 2px 0 rgba(255,255,255,.78), inset 0 -3px 0 rgba(150,112,52,.30), inset 0 -8px 11px -7px rgba(120,86,36,.38), 0 3px 0 var(--rk-lip), 0 6px 12px var(--rk-cast), var(--rk-glow); --rk-shadow-hover: inset 0 2px 0 rgba(255,255,255,.85), inset 0 -3px 0 rgba(150,112,52,.28), inset 0 -8px 11px -7px rgba(120,86,36,.34), 0 5px 0 var(--rk-lip), 0 10px 18px rgba(60,40,15,.30), var(--rk-glow); --rk-shadow-press: inset 0 3px 7px rgba(120,86,36,.42), inset 0 -1px 0 rgba(255,255,255,.35), 0 1px 0 var(--rk-lip), 0 2px 5px rgba(60,40,15,.20), var(--rk-glow); /* ⚠️ **لا `position` هنا** — انظرِ القاعدةَ التالية. الكسوةُ تحتاجُ العنصرَ **حاوياً للموضعِ المطلق** لطبقةِ `::before` فقط، و`absolute` يفي بذلك مثلَ `relative` تماماً. وفرضُ `relative` على المجموعةِ كلِّها كان يُبطِلُ `.target{position:absolute}` فينهارُ تخطيطُ «السحبِ على صورة». */ isolation:isolate; /* سياقُ تكديسٍ كي يبقى ::before تحتَ النص */ background:var(--rk-face) !important; border:2px solid var(--rk-edge) !important; border-bottom-color:var(--rk-edge-dk) !important; border-image:none !important; /* يُلغي أيَّ إطارٍ مصوَّرٍ موروث */ border-style:solid !important; /* يُلغي الحدَّ المتقطّعَ الموروثَ من الفراغِ الفارغ */ border-radius:999px !important; /* كبسولةٌ تامّةُ الاستدارة في أيِّ ارتفاع */ color:var(--rk-ink) !important; font-weight:800 !important; text-shadow:0 1px 0 rgba(255,255,255,.55) !important; filter:none !important; /* السماكة: إضاءةٌ علويةٌ داخلية + قاعٌ داخليٌّ أغمق + شفةٌ سفليةٌ صلبة + ظلٌّ مُلقى */ box-shadow:var(--rk-shadow) !important; min-height:60px; /* الحدُّ الأدنى التفاعليّ (قاعدةُ الحدود) */ display:flex; align-items:center; /* توسيطُ النصِّ رأسياً مهما التفَّ */ gap:12px; padding:14px 26px !important; /* **الحركةُ على `transform` وحدَه — و`box-shadow` خارجَ التحوّل عمداً.** كروم لا يُعيدُ حلَّ خاصيةٍ *متحوِّلةٍ* حين يتغيّرُ المتغيّرُ المخصّصُ الذي تعتمدُ عليه فقط، فيبقى الظلُّ عالقاً على قيمتِه القديمة ولا يظهرُ التوهّجُ إطلاقاً (فُحِصَ حيّاً: بإلغاءِ التحوّلِ ظهرَ التوهّجُ فوراً). والظلُّ يتبدّلُ آنياً مع الرفعِ المتحرّك فلا يُلحَظُ انقطاع. */ transition:transform .14s ease !important; } /* ── حاويةُ الموضعِ لطبقةِ `::before`: لكلِّ الأعضاءِ **إلا `.target`** ── الأعضاءُ الآخرون ساكنونَ بطبيعتِهم (`static`) فيلزمُهم `relative` كي تنحصرَ طبقةُ النقراتِ فيهم. أمّا `.target` فمطلَقُ الموضعِ أصلاً (‏`position:absolute` مع `left/top` بالنسبةِ المئويةِ و`translate(-50%,-50%)` فوقَ صورةِ السؤال)، **والمطلَقُ حاوٍ لنفسِه**، فلا يحتاجُ `relative` — بل يُفسدُه: فرضُها يُعيدُه إلى التدفّقِ فيمتدَّ بعرضِ المسرحِ ويسقطَ تحتَ قاعِه. قُصِرَ النطاقُ هنا بدلَ رفعِ خصوصيةٍ أو `!important` على `.target`. */ .shoogp-ui.skin-rocky .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.mmchip,.seqitem,.aopt, .blank){position:relative} /* الاختيارُ من متعدد: النصُّ إلى بدايةِ السطر (يمينُ RTL)؛ وبقيةُ الكبسولاتِ متوسّطة. */ .shoogp-ui.skin-rocky .qwin .opt{justify-content:flex-start; text-align:start} .shoogp-ui.skin-rocky .qwin :where(.tf,.excl-opt,.mitem,.chip,.mmchip, .blank.filled,.target.filled){justify-content:center; text-align:center} /* ── فروقٌ لازمةٌ لكلِّ عائلة (ما لا تكفيه الكبسولةُ الموحّدة) ── **لماذا `:where()` في المجموعةِ أعلاه لا `:is()`:** `:is()` يأخذُ **أعلى وزنِ** وسائطِه (‏`.blank.filled` = صنفان)، فترتفعُ المجموعةُ فوقَ الاستثناءاتِ المفردةِ أدناه فتغلبُها ولو كانت `!important` — قِيسَ حيّاً: بقيَ `.aopt` كبسولةً 999px. و`:where()` وزنُه **صفر**، فتبقى المجموعةُ عند وزنِ `.shoogp-ui.skin-rocky .qwin` وحدَه (ويكفي لغَلَبةِ الأزرقِ الزجاجيّ)، وتغلبُها الاستثناءاتُ الأخصُّ طبيعياً. `.seqitem` و`.aopt` صندوقانِ لا كبسولتان: الأولُ يحملُ مقبضَ سحبٍ ونصّاً طويلاً، والثاني صورةً فوقَ عنوان — فالكبسولةُ التامّةُ تقضمُ زواياهما. استدارةٌ كبيرةٌ تكفي. */ .shoogp-ui.skin-rocky .qwin .seqitem{border-radius:20px !important; justify-content:flex-start} .shoogp-ui.skin-rocky .qwin .aopt{ border-radius:22px !important; flex-direction:column; justify-content:center; padding:12px !important; /* الصورةُ تملأُ العرضَ فلا حشوةٌ جانبيةٌ واسعة */ } /* بطاقاتُ الكلماتِ المسحوبة: إشارةُ «تُحمَل» تبقى (مؤشّرُ القبض) وحشوةٌ أضيق */ .shoogp-ui.skin-rocky .qwin :is(.chip,.mmchip){ padding:12px 22px !important; cursor:grab; display:inline-flex; /* تبقى بعرضِ نصِّها داخلَ صفِّ البطاقات */ } .shoogp-ui.skin-rocky .qwin .chip.used{opacity:.35; cursor:default} .shoogp-ui.skin-rocky .qwin .chip.dragging{ cursor:grabbing; transform:translateY(-4px) scale(1.06) !important; box-shadow:var(--rk-shadow-hover) !important; } /* الفراغُ **بعدَ الإفلات**: يستقرُّ حجراً (المكانُ اكتمل) ويبقى قابلاً للإخراجِ للتصحيح. أمّا الفارغُ فيبقى غائراً كما هو (قاعدةُ «المحمول ≠ المستقبِل» §٧ — لا يُمَسّ). */ .shoogp-ui.skin-rocky .qwin :is(.blank.filled,.target.filled){cursor:grab} /* الفراغُ الممتلئُ **بعدَ التحقّق**: قاعدةُ الزجاجِ الأخضرِ وزنُها ثلاثةُ أصناف (`.qwin .blank.filled.correct`)، فتغلبُ مجموعةَ `:where()` وتُعيدُ الزجاجَ الأزرق. نُعيدُ الوجهَ الحجريَّ بوزنٍ أعلى — واللونُ الأخضر/الأحمرُ يأتي من متغيّراتِ الحالةِ أدناه فلا يتكرّرُ هنا. (قِيسَ حيّاً: بدونِها بقيَ «الفراغُ الصحيحُ» زجاجياً.) */ .shoogp-ui.skin-rocky .qwin :is(.blank.filled.correct,.target.filled.correct,.blank.correct, .blank.wrong,.target.wrong){ background:var(--rk-face) !important; border:2px solid var(--rk-edge) !important; border-bottom-color:var(--rk-edge-dk) !important; box-shadow:var(--rk-shadow) !important; color:var(--rk-ink) !important; } /* ── طبقةُ النقرات ── */ .shoogp-ui.skin-rocky .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.mmchip,.seqitem,.aopt, .blank.filled,.target.filled)::before{ content:""; position:absolute; inset:0; z-index:-1; /* تحتَ النصِّ، فوقَ خلفيةِ الزرّ */ border-radius:inherit; pointer-events:none; background-repeat:no-repeat; background-image: var(--rk-pit-mid), var(--rk-pit-soft), var(--rk-pit-deep), var(--rk-pit-soft), var(--rk-pit-mid), var(--rk-pit-deep), var(--rk-pit-soft), var(--rk-pit-mid), var(--rk-pit-soft), var(--rk-pit-deep); /* المواضعُ والمقاساتُ الافتراضية (النمطُ ١) — تُبدَّلُ بحسبِ ترتيبِ الشريط أدناه */ background-position:7% 30%, 15% 72%, 24% 22%, 31% 60%, 43% 38%, 52% 75%, 61% 26%, 70% 66%, 82% 34%, 91% 70%; background-size:11px 9px, 7px 6px, 14px 11px, 6px 5px, 9px 8px, 12px 10px, 7px 6px, 10px 8px, 8px 7px, 13px 10px; } /* ــ أربعةُ أنماطٍ للنقراتِ تتناوبُ على الأشرطة، مع إزاحةِ بلاطةِ الحبيباتِ لكلِّ نمط، فلا يبدو شريطانِ متجاورانِ نسخةً واحدة (شرطُ «بلا نمطٍ ظاهر»). ــ */ .shoogp-ui.skin-rocky .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.mmchip,.seqitem,.aopt, .blank.filled,.target.filled):nth-child(4n+2)::before{ background-position:4% 66%, 12% 28%, 21% 70%, 34% 24%, 40% 68%, 49% 32%, 58% 72%, 67% 30%, 79% 64%, 88% 28%; background-size:8px 7px, 13px 10px, 6px 5px, 10px 9px, 14px 11px, 7px 6px, 9px 7px, 12px 10px, 6px 6px, 10px 8px; } .shoogp-ui.skin-rocky .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.mmchip,.seqitem,.aopt, .blank.filled,.target.filled):nth-child(4n+3)::before{ background-position:9% 74%, 18% 34%, 27% 64%, 36% 30%, 46% 70%, 55% 26%, 64% 62%, 73% 36%, 85% 68%, 94% 32%; background-size:12px 10px, 6px 5px, 9px 8px, 14px 11px, 7px 6px, 11px 9px, 8px 7px, 6px 5px, 13px 10px, 9px 8px; } .shoogp-ui.skin-rocky .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.mmchip,.seqitem,.aopt, .blank.filled,.target.filled):nth-child(4n)::before{ background-position:5% 38%, 14% 66%, 26% 32%, 33% 72%, 44% 28%, 51% 64%, 63% 74%, 72% 28%, 80% 60%, 90% 40%; background-size:9px 8px, 11px 9px, 7px 6px, 13px 10px, 10px 8px, 6px 5px, 12px 10px, 8px 7px, 7px 6px, 11px 9px; } /* إزاحةُ بلاطةِ الحبيباتِ لكلِّ ترتيبٍ (الطبقةُ الأولى في `background`) */ .shoogp-ui.skin-rocky .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.mmchip,.seqitem,.aopt, .blank.filled,.target.filled):nth-child(4n+2){background-position:-47px -23px, 0 0 !important} .shoogp-ui.skin-rocky .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.mmchip,.seqitem,.aopt, .blank.filled,.target.filled):nth-child(4n+3){background-position:-93px -51px, 0 0 !important} .shoogp-ui.skin-rocky .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.mmchip,.seqitem,.aopt, .blank.filled,.target.filled):nth-child(4n){background-position:-138px -11px, 0 0 !important} /* ── تحويم: بروزٌ خفيف (رفعٌ + ظلٌّ أعمق + شفةٌ أطول) ── */ .shoogp-ui.skin-rocky .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.mmchip,.seqitem,.aopt, .blank.filled,.target.filled):hover:not(:disabled):not(.matched):not(.used){ transform:translateY(-2px); filter:none !important; box-shadow:var(--rk-shadow-hover) !important; } /* ── نقر: انضغاطٌ داخلَ سطحِه (تنزلُ الشفةُ ويغورُ السطح) ── */ .shoogp-ui.skin-rocky .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.mmchip,.seqitem,.aopt, .blank.filled,.target.filled):active:not(:disabled):not(.matched):not(.used){ transform:translateY(3px) scale(.995); box-shadow:var(--rk-shadow-press) !important; } /* ── «محدَّدة» في التوصيل: توهّجٌ حولَ الحافّةِ يقولُ «اخترتُ هذه» ── */ .shoogp-ui.skin-rocky .qwin .mitem.selected{ --rk-glow:0 0 0 3px rgba(203,168,110,.85), 0 0 18px 2px rgba(226,186,116,.75); --rk-edge:#a3823f; transform:translateY(-1px); } /* ── الصواب: تلوينُ الكسوةِ خُضرةً (بتبديلِ المتغيّراتِ فقط) + توهّجٌ أخضر + ✓ ── */ .shoogp-ui.skin-rocky .qwin :is(.opt.correct,.tf.tf-correct,.excl-opt.correct,.mitem.matched, .chip.ok,.mmchip.ok,.seqitem.correct,.aopt.correct, .blank.correct,.blank.filled.correct,.target.filled.correct){ --rk-hi:#eef8dc; --rk-mid:#cfeaa6; --rk-lo:#a9d477; --rk-edge:#7cb051; --rk-edge-dk:#5c8c36; --rk-ink:#22380b; --rk-lip:rgba(92,140,54,.60); --rk-cast:rgba(40,80,20,.28); --rk-glow:0 0 18px 2px rgba(140,205,95,.70); } /* ── الخطأ: تلوينٌ أحمرُ هادئ + توهّجٌ أحمر + ✗ + اهتزازٌ خفيف ── */ .shoogp-ui.skin-rocky .qwin :is(.opt.wrong,.tf.tf-wrong,.excl-opt.wrong,.mitem.shake, .chip.no,.mmchip.no,.aopt.wrong, .blank.wrong,.target.wrong){ --rk-hi:#fdeae4; --rk-mid:#f4cabe; --rk-lo:#e6a695; --rk-edge:#c98070; --rk-edge-dk:#a55c4a; --rk-ink:#7a2419; --rk-lip:rgba(165,92,74,.58); --rk-cast:rgba(100,30,20,.26); --rk-glow:0 0 18px 2px rgba(228,120,100,.65); animation:cardShake .45s ease; } /* شارةُ الحالة: دائرةٌ في طرفِ الشريطِ الحرّ (يسارُ RTL) — عنصرُ flex بهامشٍ تلقائيّ */ .shoogp-ui.skin-rocky .qwin :is(.opt,.excl-opt,.seqitem,.mmchip,.chip):is(.correct,.wrong,.ok,.no)::after{ margin-inline-start:auto; flex:0 0 auto; /* 30px = ارتفاعُ النصِّ نفسِه تقريباً، فلا يزيدُ ارتفاعَ الشريطِ عند ظهورِ الشارة (لا قفزةَ تخطيطٍ لحظةَ الإجابة). */ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:18px; font-weight:900; line-height:1; text-shadow:none; } .shoogp-ui.skin-rocky .qwin :is(.opt,.excl-opt,.seqitem,.mmchip,.chip):is(.correct,.ok)::after{ content:"✓"; color:#2f6b1f; background:rgba(255,255,255,.58); box-shadow:inset 0 0 0 2px rgba(95,162,63,.80), 0 1px 2px rgba(40,80,20,.30); } .shoogp-ui.skin-rocky .qwin :is(.opt,.excl-opt,.mmchip,.chip):is(.wrong,.no)::after{ content:"✗"; color:#a8382a; background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 2px rgba(190,95,78,.80), 0 1px 2px rgba(100,30,20,.28); } /* المعطَّلةُ تخفتُ قليلاً، والصحيحةُ تبقى بكاملِ وضوحِها بعدَ قفلِ السؤال */ .shoogp-ui.skin-rocky .qwin :is(.opt,.aopt):disabled{opacity:.88} .shoogp-ui.skin-rocky .qwin :is(.opt,.excl-opt,.aopt).correct:disabled{opacity:1} @media(prefers-reduced-motion:reduce){ .shoogp-ui.skin-rocky .qwin :is(.opt.wrong,.tf.tf-wrong,.excl-opt.wrong,.mitem.shake, .chip.no,.mmchip.no,.aopt.wrong, .blank.wrong,.target.wrong){animation:none} } /* ═══ الحدُّ الأدنى التفاعليّ لصناديقِ «السحبِ على صورة» (خرقٌ قائمٌ صُوِّب) ═══ `.target` صناديقُ مطلقةُ الموضعِ فوقَ الصورة، وكانت تُقاسُ **39px ارتفاعاً و13.8px خطّاً** — دونَ حدَّي 60px و18px (§٨). ترفعُ القاعدةُ الحدَّينِ لكلِّ الأسئلةِ في النظام (لا العلومَ وحدَها، فالحدودُ ليست كسوةً بل قاعدةَ لمسٍ ومقروئية). الصناديقُ مطلقةٌ فلا تُنمّي طولَ المحتوى، ولذا لا يتمدّدُ الإطارُ بسببها. */ .shoogp-ui .qwin .target{ min-height:60px; font-size:max(18px, 1rem) !important; display:flex; align-items:center; justify-content:center; } /* ═══════════════════════════════════════════════════════════════════ دفعة ٤/٤ — الفراغاتُ **الفارغة**: حجرٌ **غائر** (§٧ مقدَّمةٌ على توحيدِ الشكل) قاعدةُ «المحمول ≠ المستقبِل» تفرضُ أن يبقى المستقبِلُ **حفرةً**: أغمقَ من محيطِه، بحدٍّ متقطّع، وظلٍّ داخليّ، **بلا لمعةٍ ولا شفةٍ ولا ظلٍّ مُلقى**. فتُكسى بنفسِ الحبيباتِ والنقراتِ (هويةٌ واحدة) لكن **بإضاءةٍ مقلوبة**: • التدرّجُ من الغامقِ أعلى إلى الفاتحِ أسفل (عكسُ الزرّ) ← إيحاءُ الغَور. • ظلٌّ داخليٌّ علويٌّ قويّ، وبلا `0 3px 0` شفةٍ ولا ظلٍّ خارجيّ. • حدٌّ **متقطّعٌ** لا صلب — الإشارةُ البصريةُ الأصرحُ لـ«مكانٌ ينتظرُ شيئاً». وحينَ تمتلئُ يتكفّلُ محدِّدُ `.filled` أعلاه بإعادتِها بارزةً (المكانُ اكتمل). ═══════════════════════════════════════════════════════════════════ */ .shoogp-ui.skin-rocky .qwin :is(.blank,.target):not(.filled):not(.correct):not(.wrong){ --rk-face: var(--rk-grain) 0 0/190px 96px repeat, linear-gradient(180deg, #b9a077 0%, #cdb392 46%, #e0cbaa 100%) 0 0/100% 100% no-repeat; background:var(--rk-face) !important; border:2px dashed var(--rk-edge-dk) !important; border-radius:14px !important; color:#6b5636 !important; text-shadow:0 1px 0 rgba(255,255,255,.35) !important; box-shadow: inset 0 3px 8px rgba(90,64,26,.45), inset 0 -1px 0 rgba(255,255,255,.30) !important; /* بلا شفةٍ ولا ظلٍّ مُلقى */ filter:none !important; } /* النقراتُ نفسُها تسري على الفارغِ أيضاً (‏::before مشمولٌ في مجموعةِ الوجه أعلاه للممتلئ؛ نُضيفُها هنا للفارغِ كي تتوحّدَ الهوية) */ .shoogp-ui.skin-rocky .qwin :is(.blank,.target):not(.filled)::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background-repeat:no-repeat; background-image: var(--rk-pit-mid), var(--rk-pit-soft), var(--rk-pit-deep), var(--rk-pit-soft), var(--rk-pit-mid); background-position:12% 32%, 28% 68%, 47% 30%, 66% 70%, 85% 38%; background-size:9px 8px, 7px 6px, 12px 10px, 8px 7px, 10px 8px; opacity:.75; } /* سياقُ التكديسِ للفارغِ أيضاً — **بلا `position`** للسببِ نفسِه أعلاه: `.blank` يأخذُ `relative` من قاعدةِ الحاويةِ العامّة، و`.target` مطلَقٌ فيكفي. */ .shoogp-ui.skin-rocky .qwin :is(.blank,.target):not(.filled){isolation:isolate} /* أثناءَ السحبِ فوقَ فراغٍ صالح: توهّجٌ مرحّبٌ أخضرُ يقولُ «أفلتْ هنا» (يبقى غائراً) */ /* تُستثنى الحالاتُ المُجابةُ كما في قاعدةِ «الفارغ» تماماً — فبدونِها كانت قاعدةُ الفارغِ (ثلاثةُ `:not`) أوزنَ من هذه (‏`:not` واحد) فتبتلعُ توهّجَ الترحيب. **حدٌّ معروفٌ (لم يُحَلّ):** توهّجُ الترحيبِ (‏`box-shadow`) يعملُ الآن ويُقاسُ، أمّا **لونُ الحدِّ فلا يتبدّلُ** رغمَ الإعلانِ الصريحِ بـ`!important` وبوزنٍ أعلى، ولا بتبديلِ `--rk-edge-dk`، ولا بعدَ استقرارِ انتقالِ `.target` (‏قِيسَ بعد 350مث). **والسلوكُ نفسُه في الرياضياتِ التي لم تُمَسّ** (قاعدتُها `.qwin .target.over` بـ`!important` لا تُطبَّقُ أيضاً) — فالعلّةُ سابقةٌ للقشرةِ وخارجَ نطاقِ هذا الإصلاح. التوهّجُ وحدَه يكفي إشارةَ «أفلتْ هنا» حالياً. */ .shoogp-ui.skin-rocky .qwin :is(.blank,.target).over:not(.filled):not(.correct):not(.wrong){ border-color:#7cb051 !important; box-shadow: inset 0 3px 8px rgba(60,90,30,.40), 0 0 0 3px rgba(140,205,95,.45) !important; } /* عيّناتُ الألوان (`.cswatch`): جسمٌ حجريٌّ كبقيةِ الأزرار — **ولونُ الطلاءِ لا يتأثّر** لأنّه في أيقونةِ الدلوِ (`.bucket-ic`) لا في خلفيةِ الزرّ، فلا تضيعُ وظيفتُها. وحالةُ «مختار» تبقى بحلقةٍ برتقاليةٍ صريحةٍ (شكلٌ لا لونٌ وحدَه). */ .shoogp-ui.skin-rocky .qwin .cswatch{ --rk-face: var(--rk-grain) 0 0/190px 96px repeat, linear-gradient(180deg, var(--rk-hi) 0%, var(--rk-mid) 46%, var(--rk-lo) 100%) 0 0/100% 100% no-repeat; background:var(--rk-face) !important; border:2px solid var(--rk-edge) !important; border-bottom-color:var(--rk-edge-dk) !important; border-radius:18px !important; color:var(--rk-ink) !important; min-height:60px; box-shadow:inset 0 2px 0 rgba(255,255,255,.72), 0 3px 0 var(--rk-lip), 0 6px 12px var(--rk-cast) !important; } .shoogp-ui.skin-rocky .qwin .cswatch.sel{ border-color:#a3823f !important; box-shadow:inset 0 2px 0 rgba(255,255,255,.85), 0 0 0 4px rgba(226,186,116,.75), 0 3px 0 var(--rk-lip), 0 6px 12px var(--rk-cast) !important; } /* زرُّ «إنهاء» يتبعُ الكسوةَ نفسَها (قواعدُه الأصليةُ تحملُ !important فنُقابلُها) */ .shoogp-ui.skin-rocky .qnav .qfinish{ --rk-face: var(--rk-grain) 0 0/190px 96px repeat, linear-gradient(180deg, var(--rk-hi) 0%, var(--rk-mid) 46%, var(--rk-lo) 100%) 0 0/100% 100% no-repeat; background:var(--rk-face) !important; border:2px solid var(--rk-edge) !important; border-bottom-color:var(--rk-edge-dk) !important; border-radius:999px !important; color:var(--rk-ink) !important; box-shadow:inset 0 2px 0 rgba(255,255,255,.72), 0 2px 0 var(--rk-lip), 0 4px 9px var(--rk-cast) !important; padding:10px 26px; } /* ═══════════════════════════════════════════════════════════════════ ★ قشرةُ الرياضيات: «المعدنُ الفضّيّ» (skin-metal) ★ كسوةٌ بالكودِ وحدَه (CSS/تدرّجات — **بلا أيِّ صورةٍ خارجية**) للعناصرِ التفاعلية **داخلَ `.qwin` في كتابِ الرياضياتِ فقط**. مصدرُ الصنفِ نفسُ منطقِ القشور (`SUBJECT_SKINS.math` ← `lessonSubject`)، فلا مصدرَ ثانٍ للحقيقة، والعلومُ (`skin-rocky`) لا تتأثّرُ إطلاقاً. **النطاق (١٠٦ عنصراً في ٢٤ سؤالاً):** `.opt` · `.tf` · `.excl-opt` · `.mitem` · `.chip` (ومنه `.chip.mmchip`) · `.seqitem` · `.blank` · `.target` · `.grp-drop` · `.cswatch`. **خارجَ النطاقِ عمداً:** `.grp` (حاويةٌ لا عنصرٌ تفاعليّ) و`.cpart` (جزءٌ من رسمِ سؤالِ التلوينِ وتلوينُه وظيفةُ السؤال)، وكلُّ ما هو خارجَ `.qwin` (الشارتان، التنقّل، العدّاد، الرجوع، تحقّق/إعادة — استثناءُ المالكِ §٨ بصورِها PNG). **البناء (لوحةُ المالكِ حرفياً):** تدرّجٌ رأسيٌّ للجسم #f7f9f7←#d4d9db← #c6cdd0←#a2acb4 · خطُّ تشطيبٍ داخليٌّ 1px #eaeced تحتَ الحافّةِ العليا · حافّةٌ داكنةٌ #525d6e · حدٌّ خارجيٌّ كحليٌّ 3px بتدرّج #023650←#092d3f (بتقنيةِ padding-box/border-box كي يحترمَ الاستدارة) · غطاءانِ كحليّانِ على الطرفينِ بخطوطِ تشطيبٍ رأسية · مصباحانِ سماويانِ #01b9de أعلى منتصفِ العنصرِ وأسفلَه · نصٌّ #1b1b1b والرمزُ (✓/✗) بعدَه. لا زخرفةَ سواها. **كلُّ ذلك في وصفةٍ واحدةٍ (--mt-face) تُعلَنُ على العنصرِ نفسِه** — لا على الحاوية: المتغيّرُ المركَّبُ يُستبدَلُ داخلُه عندَ مُعلِنِه ثمّ يُورَثُ نصّاً مُستبدَلاً، فلو أُعلِنَ على الحاويةِ لتجمّدَ على ألوانِ الحالةِ العادية ولما لوّنتْه حالتا الصواب/الخطأ (فخٌّ موثّقٌ في §٦ من المهارة). ═══════════════════════════════════════════════════════════════════ */ .shoogp-ui.skin-metal{ /* ── لوحةُ المعدن (البند ٤ من طلبِ المالك — أرقامٌ لا تُقارَب) ── */ --mt-hi:#f7f9f7; /* إضاءةٌ عليا */ --mt-hi2:#d4d9db; /* نهايةُ الإضاءةِ العليا */ --mt-mid:#c6cdd0; /* وسطُ الجسم */ --mt-lo:#a2acb4; /* أسفلُ الجسم */ --mt-finish:#eaeced; /* خطُّ التشطيبِ الداخليّ */ --mt-edge:#525d6e; /* الحافّةُ الداكنة */ --mt-cap-a:#023650; /* الأغطيةُ والحدُّ الخارجيّ — كحليٌّ فاتح */ --mt-cap-b:#092d3f; /* … وكحليٌّ غامق */ --mt-ink:#1b1b1b; /* لونُ النصّ */ --mt-lamp:#01b9de; /* المصباحانِ السماويان */ --mt-lamp-h:rgba(1,185,222,.55); --mt-cast:rgba(9,45,63,.30); --mt-glow:0 0 0 rgba(0,0,0,0); /* توهّجُ الحالة — شفّافٌ عادةً */ --mt-cap-w:14px; /* عرضُ الغطاءِ الطرفيّ */ /* ═══ الحدُّ الأدنى المعروضُ (البند ٦) — تعويضٌ بالحساب لا بالتقدير ═══ أسوأُ زومٍ مقيسٍ في الرياضيات **0.774**، فالمعروضُ = المُعلَن × 0.774: الارتفاع: 60 ÷ 0.774 = 77.52 ← **78px** الخطّ: 18 ÷ 0.774 = 23.26 ← **23.5px** (fit.js لم يُمَسّ إطلاقاً — أيُّ فارقٍ متبقٍّ يُذكَرُ بالرقمِ في التقرير.) */ --mt-min-h:78px; --mt-min-f:23.5px; } /* أشرطةُ الخيارات تتبعُ عرضَ النافذةِ الحيّة (كما في قشرةِ العلوم) */ .shoogp-ui.skin-metal .qwin .opts{max-width:none} /* ═════ ① الوجهُ المعدنيُّ — المجموعةُ كاملةً بوصفةٍ واحدة ═════ :where() وزنُه صفر، فتبقى المجموعةُ عندَ وزنِ `.shoogp-ui.skin-metal .qwin` (يكفي لغَلَبةِ الأزرقِ الزجاجيِّ الواقعِ قبلَها)، وتغلبُها الاستثناءاتُ الأخصُّ أدناه طبيعياً — بخلافِ :is() الذي يرثُ أعلى وزنِ وسائطِه فيبتلعُها. */ /* ── مقاديرُ الوجهِ (طبقاتُ التدرّجِ الخام) ── تُعلَنُ على **كلِّ** أعضاءِ الكسوةِ ومنهم `.grp-drop`، لأنّ المتغيّرَ المركَّبَ يُستبدَلُ عندَ مُعلِنِه: فلو بقيت هذه المقاديرُ محصورةً في مجموعةِ «الوجهِ البارز» لخرجَ `.grp-drop` (وهو مستقبِلٌ غائرٌ خارجَها) بخلفيةٍ **شفّافةٍ لاغية** — وهو ما وقعَ فعلاً وقُيسَ (`background-color: rgba(0,0,0,0)`) قبلَ هذا الفصل. */ .shoogp-ui.skin-metal .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.seqitem, .blank,.target,.cswatch,.grp-drop){ /* الوجه: مصباحان (أعلى/أسفل) ← غطاءان بخطوطِ تشطيبٍ رأسية ← جسمُ التدرّج. الطبقةُ الأخيرةُ border-box هي حدُّ التدرّجِ الكحليّ، وما قبلَها padding-box كي لا يطمسَها — فيُرسَمُ حدٌّ متدرّجٌ **يحترمُ border-radius** (خلافاً لـborder-image الذي يتجاهلُ الاستدارة). */ --mt-lampg:radial-gradient(ellipse at center, var(--mt-lamp) 0 52%, var(--mt-lamp-h) 68%, rgba(1,185,222,0) 100%); --mt-caphair:repeating-linear-gradient(90deg, rgba(255,255,255,.30) 0 1px, rgba(0,0,0,.26) 1px 2px, rgba(255,255,255,0) 2px 4px); --mt-capbase:linear-gradient(180deg, var(--mt-cap-a) 0%, var(--mt-cap-b) 100%); --mt-body:linear-gradient(180deg, var(--mt-hi) 0%, var(--mt-hi2) 20%, var(--mt-mid) 55%, var(--mt-lo) 100%); --mt-body-rev:linear-gradient(0deg, var(--mt-hi) 0%, var(--mt-hi2) 20%, var(--mt-mid) 55%, var(--mt-lo) 100%); } /* ── قاعدة تصميم خاصة بكتب الرياضيات: أغطيةٌ زرقاءُ كحليةٌ أفتح تنسجمُ مع التعبئةِ السماويةِ لأطرِ الرياضيات (تجاوزٌ على نفسِ الحاويةِ فيُعادُ حلُّ --mt-capbase تلقائياً بالقيمِ الجديدة). ── */ .shoogp-ui.skin-metal.subj-math{ --mt-cap-a:#16447e; --mt-cap-b:#123969; } /* ── الوجهُ البارزُ + خصائصُ الزرّ (المستقبِلاتُ خارجَها — لها وجهُها الغائرُ أدناه) ── */ .shoogp-ui.skin-metal .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.seqitem, .blank,.target,.cswatch){ --mt-face: var(--mt-lampg) 50% 5px/24px 6px no-repeat padding-box, var(--mt-lampg) 50% calc(100% - 5px)/24px 6px no-repeat padding-box, var(--mt-caphair) 100% 0/var(--mt-cap-w) 100% no-repeat padding-box, var(--mt-capbase) 100% 0/var(--mt-cap-w) 100% no-repeat padding-box, var(--mt-caphair) 0 0/var(--mt-cap-w) 100% no-repeat padding-box, var(--mt-capbase) 0 0/var(--mt-cap-w) 100% no-repeat padding-box, var(--mt-body) 0 0/100% 100% no-repeat padding-box, var(--mt-capbase) 0 0/100% 100% no-repeat border-box; --mt-face-press: var(--mt-lampg) 50% 5px/24px 6px no-repeat padding-box, var(--mt-lampg) 50% calc(100% - 5px)/24px 6px no-repeat padding-box, var(--mt-caphair) 100% 0/var(--mt-cap-w) 100% no-repeat padding-box, var(--mt-capbase) 100% 0/var(--mt-cap-w) 100% no-repeat padding-box, var(--mt-caphair) 0 0/var(--mt-cap-w) 100% no-repeat padding-box, var(--mt-capbase) 0 0/var(--mt-cap-w) 100% no-repeat padding-box, var(--mt-body-rev) 0 0/100% 100% no-repeat padding-box, var(--mt-capbase) 0 0/100% 100% no-repeat border-box; /* السماكة: حافّةٌ داكنةٌ 1px + خطُّ تشطيبٍ 1px تحتَها + قاعٌ داخليٌّ + ظلٌّ مُلقى */ --mt-shadow: inset 0 0 0 1px var(--mt-edge), inset 0 2px 0 -1px var(--mt-finish), inset 0 -7px 10px -8px rgba(30,44,58,.55), 0 3px 7px var(--mt-cast), var(--mt-glow); --mt-shadow-hover: inset 0 0 0 1px var(--mt-edge), inset 0 2px 0 -1px #ffffff, inset 0 -7px 10px -8px rgba(30,44,58,.45), 0 6px 13px var(--mt-cast), var(--mt-glow); --mt-shadow-press: inset 0 0 0 1px var(--mt-edge), inset 0 3px 6px rgba(30,44,58,.45), 0 1px 2px var(--mt-cast), var(--mt-glow); background:var(--mt-face) !important; border:3px solid transparent !important; border-image:none !important; border-style:solid !important; /* يُلغي الحدَّ المتقطّعَ الموروث */ border-radius:14px !important; /* زوايا الصورةِ المرجعية */ color:var(--mt-ink) !important; font-weight:800 !important; text-shadow:0 1px 0 rgba(255,255,255,.60) !important; filter:none !important; box-shadow:var(--mt-shadow) !important; /* الحدودُ الدنيا المعوَّضةُ حسابياً (أعلاه) */ min-height:var(--mt-min-h); font-size:var(--mt-min-f) !important; display:flex; align-items:center; gap:10px; padding:12px calc(var(--mt-cap-w) + 12px) !important; /* لا يركبُ النصُّ الغطاءين */ /* الحركةُ على transform وحدَه: كروم لا يُعيدُ حلَّ خاصيةٍ متحوّلةٍ حين يتغيّرُ المتغيّرُ المخصّصُ وحدَه، فيَعلَقُ الظلُّ ولا يظهرُ التوهّج (فخٌّ موثّق §٦). */ transition:transform .14s ease !important; } /* حاويةُ الموضعِ — **بلا `.target`** إطلاقاً: هو position:absolute أصلاً فوقَ صورةِ السؤال، وفرضُ relative يُعيدُه للتدفّقِ فينهارُ «السحبُ على صورة». */ .shoogp-ui.skin-metal .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.seqitem, .blank,.cswatch){position:relative} /* ═════ ② فروقُ الشكلِ لكلِّ عائلة ═════ */ .shoogp-ui.skin-metal .qwin .opt{justify-content:flex-start; text-align:start} .shoogp-ui.skin-metal .qwin :where(.tf,.excl-opt,.mitem,.chip,.blank,.target){ justify-content:center; text-align:center; } .shoogp-ui.skin-metal .qwin .seqitem{justify-content:flex-start} /* البطاقاتُ المحمولةُ تبقى بعرضِ نصِّها داخلَ صفِّها (لا تتمدّدُ كتلةً) */ .shoogp-ui.skin-metal .qwin .chip{ display:inline-flex; cursor:grab; padding:12px calc(var(--mt-cap-w) + 10px) !important; } /* `.mmchip` هو `.chip` نفسُه بصنفٍ ثانٍ (class="chip mmchip") — لا قاعدةَ كسوةٍ ثانيةٍ له، هذه لضبطِ المقاسِ وحدَه (خاناتُ الخريطةِ ضيّقةٌ فيلزمُ حدٌّ أدنى للعرض). */ .shoogp-ui.skin-metal .qwin .chip.mmchip{min-width:86px} .shoogp-ui.skin-metal .qwin .chip.used{opacity:.35; cursor:default} .shoogp-ui.skin-metal .qwin .chip.dragging{ cursor:grabbing; transform:translateY(-4px) scale(1.06) !important; box-shadow:var(--mt-shadow-hover) !important; } /* عيّناتُ الألوان: عمودٌ (دلوٌ فوقَ اسم) — و**لونُ الطلاءِ لا يتأثّرُ** لأنّه في أيقونةِ الدلوِ لا في خلفيةِ الزرّ، فلا تضيعُ وظيفةُ الزرّ. */ .shoogp-ui.skin-metal .qwin .cswatch{ flex-direction:column; justify-content:center; gap:4px; border-radius:16px !important; padding:10px 14px !important; } .shoogp-ui.skin-metal .qwin .cswatch-name{font-size:var(--mt-min-f)} /* ═════ ③ المستقبِلاتُ: معدنٌ **غائر** (قاعدة «المحمول ≠ المستقبِل» §٧) ═════ نفسُ اللوحةِ والهوية، لكنّ الإضاءةَ **مقلوبة** (غامقٌ أعلى ← فاتحٌ أسفل) مع ظلٍّ داخليٍّ وبلا ظلٍّ مُلقىً ولا مصابيح: فيُقرأُ «مكانٌ ينتظرُ شيئاً» لا زرّاً يُضغَط. ويبقى الفارقُ متعدّدَ المحاور لا لوناً وحدَه: نمطُ الحدّ (متقطّع↔صلب) واتجاهُ الإضاءةِ ووجودُ المصابيحِ والظلِّ المُلقى. */ .shoogp-ui.skin-metal .qwin :is(.blank,.target):not(.filled):not(.correct):not(.wrong){ /* **لا طبقةَ `border-box` هنا** ولا حدَّ شفّاف: التدرّجُ الكحليُّ لو رُسِمَ تحتَ الحدِّ لَملأَ فجواتِ التقطيعِ فبدا الحدُّ **صلباً**، فيسقطُ محورُ «نمطِ الحدّ» من فوارقِ §٧ (قِيسَ بالنظرِ في معرضِ الحالات). فالخلفيةُ `padding-box` وحدَها والحدُّ **متقطّعٌ بلونٍ صريح**، فتبقى الأربعةُ: نمطُ الحدّ + اتجاهُ الإضاءة + غيابُ المصابيح + غيابُ الظلِّ المُلقى. */ background: var(--mt-body-rev) 0 0/100% 100% no-repeat padding-box !important; border:3px dashed #45566a !important; box-shadow: inset 0 0 0 1px var(--mt-edge), inset 0 3px 8px rgba(30,44,58,.50) !important; color:#2b3742 !important; text-shadow:0 1px 0 rgba(255,255,255,.35) !important; } /* النوع (ب) — طبقةٌ على خانةٍ مرسومةٍ داخلَ رسمِ السؤال (DESIGN_RULES.md §خطوط التوصيل): الغَورُ مرسومٌ في الخانةِ المتقطّعةِ نفسِها داخلَ svg، فلا كسوةَ معدنٍ غائرٍ فوقَها قبلَ الامتلاء — بوزنٍ أعلى من قاعدةِ المستقبِلاتِ أعلاه عمداً. حالاتُ الامتلاءِ والتحويمِ والتصحيحِ تبقى بأنماطِها المعتادة. */ .shoogp-ui.skin-metal .qwin .target.target-cell:not(.filled):not(.correct):not(.wrong):not(.over){ background:transparent !important; border-color:transparent !important; box-shadow:none !important; color:transparent !important; text-shadow:none !important; } /* وفي كلِّ الحالاتِ (فارغةً وممتلئة): مقاسُ الطبقةِ مقاسُ الخانةِ المرسومةِ بالضبط — تُصفَّرُ حدودُ المجموعةِ الدنيا وحشوُها كي لا تفيضَ البطاقةُ عن خانتِها، وخطُّ العددِ الموضوعِ = خطُّ أرقامِ الرسمِ (--cellfs من redraw) لا الحدُّ الأدنى المعدنيُّ الثابت — فلا يتقلّصُ العددُ ولا يَصغُرُ عن جيرانِه في الصفّ */ .shoogp-ui.skin-metal .qwin .target.target-cell{ min-height:0 !important; min-width:0 !important; padding:0 !important; font-size:var(--cellfs, var(--mt-min-f)) !important; line-height:1 !important; gap:0 !important; } /* الفراغُ الفارغُ يبقى في تدفّقِ الجملةِ (لا كتلةً تكسرُ السطر) */ .shoogp-ui.skin-metal .qwin .blank{display:inline-flex; vertical-align:middle} /* أثناءَ السحبِ فوقَ فراغٍ صالح: توهّجٌ سماويٌّ مرحّبٌ يقولُ «أفلتْ هنا» */ .shoogp-ui.skin-metal .qwin :is(.blank,.target).over:not(.correct):not(.wrong){ box-shadow: inset 0 0 0 1px var(--mt-edge), inset 0 3px 8px rgba(30,44,58,.40), 0 0 0 3px rgba(1,185,222,.50), 0 0 16px rgba(1,185,222,.65) !important; } /* بعدَ الإفلاتِ يستقرُّ بارزاً (المكانُ اكتمل). قاعدةُ الزجاجِ الأخضرِ للفراغِ الصحيحِ وزنُها أربعةُ أصناف (.qwin .blank.filled.correct) فتغلبُ المجموعة — نُعيدُ الوجهَ المعدنيَّ بوزنٍ أعلى، واللونُ يأتي من متغيّراتِ الحالةِ أدناه. */ .shoogp-ui.skin-metal .qwin :is(.blank.filled,.target.filled, .blank.filled.correct,.target.filled.correct, .blank.correct,.blank.wrong,.target.wrong){ background:var(--mt-face) !important; border:3px solid transparent !important; border-style:solid !important; box-shadow:var(--mt-shadow) !important; color:var(--mt-ink) !important; cursor:grab; } /* صناديقُ التصنيف: صينيةٌ معدنيةٌ غائرةٌ (مستقبِلٌ كذلك) — وتصحيحُ ما طلبَه المالك: الخطُّ كان **16px** (دونَ الحدّ) والزوايا **0**. */ .shoogp-ui.skin-metal .qwin .grp-drop{ background: var(--mt-body-rev) 0 0/100% 100% no-repeat padding-box, var(--mt-capbase) 0 0/100% 100% no-repeat border-box !important; border:3px solid transparent !important; border-radius:14px !important; box-shadow: inset 0 0 0 1px var(--mt-edge), inset 0 3px 8px rgba(30,44,58,.45) !important; color:var(--mt-ink); font-size:var(--mt-min-f); } .shoogp-ui.skin-metal .qwin .grp-drop.over{ box-shadow: inset 0 0 0 1px var(--mt-edge), inset 0 3px 8px rgba(30,44,58,.35), 0 0 0 3px rgba(1,185,222,.45) !important; } /* ═════ ④ الحالاتُ السبع ═════ */ /* (٢) تمريرُ الماوس: إضاءةٌ أعلى + رفعٌ طفيف */ .shoogp-ui.skin-metal .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.seqitem, .blank.filled,.target.filled,.cswatch):hover:not(:disabled):not(.matched):not(.used){ --mt-hi:#ffffff; --mt-hi2:#e4e9eb; --mt-mid:#d3dadd; --mt-lo:#b3bcc3; transform:translateY(-2px); box-shadow:var(--mt-shadow-hover) !important; } /* (٣) مضغوط: انعكاسُ التدرّجِ وغَورُ 1px */ .shoogp-ui.skin-metal .qwin :where(.opt,.tf,.excl-opt,.mitem,.chip,.seqitem, .blank.filled,.target.filled,.cswatch):active:not(:disabled):not(.matched):not(.used){ background:var(--mt-face-press) !important; transform:translateY(1px); box-shadow:var(--mt-shadow-press) !important; } /* (٤) مُختار: توهّجٌ سماويٌّ حولَ الحدّ (التوصيلُ وعيّنةُ اللون) */ .shoogp-ui.skin-metal .qwin :is(.mitem.selected,.cswatch.sel){ --mt-glow:0 0 0 3px rgba(1,185,222,.55), 0 0 18px 2px rgba(1,185,222,.75); transform:translateY(-1px); } /* (٥) صحيح: مسحةٌ خضراءُ **على المصابيحِ فقط** — المعدنُ كما هو */ .shoogp-ui.skin-metal .qwin :is(.opt.correct,.tf.tf-correct,.excl-opt.correct, .mitem.matched,.chip.ok,.seqitem.correct, .blank.correct,.blank.filled.correct,.target.filled.correct){ --mt-lamp:#2fd07d; --mt-lamp-h:rgba(47,208,125,.60); --mt-glow:0 0 14px 1px rgba(47,208,125,.55); } /* (٦) خطأ: مسحةٌ حمراءُ على المصابيحِ فقط + اهتزازٌ لطيف */ .shoogp-ui.skin-metal .qwin :is(.opt.wrong,.tf.tf-wrong,.excl-opt.wrong,.mitem.shake, .chip.no,.seqitem.wrong,.blank.wrong,.target.wrong){ --mt-lamp:#ff5c4d; --mt-lamp-h:rgba(255,92,77,.60); --mt-glow:0 0 14px 1px rgba(255,92,77,.50); animation:cardShake .45s ease; } @media(prefers-reduced-motion:reduce){ .shoogp-ui.skin-metal .qwin :is(.opt.wrong,.tf.tf-wrong,.excl-opt.wrong,.mitem.shake, .chip.no,.seqitem.wrong,.blank.wrong,.target.wrong){animation:none} } /* الرمزُ (✓/✗) بعدَ النصِّ — عقدةُ نصٍّ صرفةٌ بلا ميداليةٍ ولا أيِّ زخرفةٍ إضافية */ .shoogp-ui.skin-metal .qwin :is(.opt,.tf,.excl-opt,.mitem,.chip,.seqitem):is( .correct,.tf-correct,.ok,.matched,.wrong,.tf-wrong,.no)::after{ margin-inline-start:auto; flex:0 0 auto; font-size:var(--mt-min-f); font-weight:900; line-height:1; text-shadow:none; } .shoogp-ui.skin-metal .qwin :is(.opt,.tf,.excl-opt,.mitem,.chip,.seqitem):is( .correct,.tf-correct,.ok,.matched)::after{content:"✓"; color:#0e7a45} .shoogp-ui.skin-metal .qwin :is(.opt,.tf,.excl-opt,.mitem,.chip,.seqitem):is( .wrong,.tf-wrong,.no)::after{content:"✗"; color:#b3271a} /* (٧) معطّل: تشبّعٌ منخفضٌ دونَ فقدانِ القراءة — والصحيحةُ تبقى بكاملِ وضوحِها */ .shoogp-ui.skin-metal .qwin :is(.opt,.tf,.excl-opt,.aopt):disabled{ filter:saturate(.45) brightness(.98) !important; opacity:.92; } .shoogp-ui.skin-metal .qwin :is(.opt,.excl-opt).correct:disabled{ filter:none !important; opacity:1; }