/* =====================================================================
   qz.css — أنماط اختبار القدرات الذهنية
   ---------------------------------------------------------------------
   ملف مشترك لا أنماط داخل كل صفحة، لأن ثلاث عشرة صفحة تتقاسم الهيكل
   نفسه. تكرارها في كل صفحة يعني تعديل ثلاثة عشر ملفاً عند كل تغيير.

   يعتمد على متغيّرات ui.css ولا يعيد تعريف أيٍّ منها.
   ===================================================================== */

/* =====================================================================
   الهيكل المشترك — تملكه النواة
   ===================================================================== */

.qz-stage {
  background: var(--bg-soft);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.qz-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
  min-height: 18px;
  line-height: 1.7;
}

/* على الشاشات القصيرة تُضغط الحشوة والفجوات ليبقى أكبر تخطيط (شبكة
   ١٦) داخل الشاشة كاملاً. التمرير أثناء اختبارٍ موقوت يفسد القياس. */
@media (max-height: 780px), (max-width: 420px) {
  .qz-stage { min-height: 300px; padding: 16px 10px; gap: 10px; }
  .qz-rt2-wrap { gap: 12px; }
  .qz-rt2-ask { font-size: 17px; min-height: 30px; }
}

/* ---------- شاشة التعليمات ---------- */
.qz-intro-icon { font-size: 44px; line-height: 1; }

.qz-intro-text {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.9;
  max-width: 46ch;
}

.qz-start-btn { min-width: 160px; }

/* ---------- العدّ التنازلي ---------- */
.qz-count {
  font-family: var(--font-mono);
  font-size: 72px;
  font-weight: 800;
  color: var(--accent-teal);
  line-height: 1;
}

.qz-count.pop { animation: qzPop .35s ease; }

@keyframes qzPop {
  0%   { transform: scale(.6); opacity: .3; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---------- شاشة النتيجة ---------- */
.qz-res-main {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: 800;
  color: var(--accent-teal);
  line-height: 1;
}

.qz-res-unit {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: -6px;
}

.qz-res-pct {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-violet);
}

/* التحسّن والتراجع بلونين مختلفين — والتراجع لا يُخفى ولا يُلوَّن
   بلون الإنذار: تذبذب الأداء بين محاولة وأخرى طبيعي، وتهويله يدفع
   اللاعب إلى إعادة المحاولة حتى يخرج برقم يرضيه فيفسد قياسه. */
.qz-res-pct.good { color: var(--accent-teal); }
.qz-res-pct.down { color: var(--text-muted); }

.qz-res-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.qz-res-best { font-size: 12.5px; color: var(--text-muted); }

/* إعلان الحدود — يظهر مع كل نتيجة لا في صفحة بعيدة.
   :empty يخفيه تماماً ما دامت الصياغة مؤجّلة، فلا يترك فراغاً. */
.qz-res-limit {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 44ch;
  border-top: 1px solid var(--panel-border);
  padding-top: 12px;
  margin-top: 4px;
}

.qz-res-limit:empty { display: none; }

.qz-res-actions { margin-top: 6px; }

/* =====================================================================
   اختبار سرعة الاستجابة والاختيار
   ===================================================================== */

.qz-rt2-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

/* ---- سطر الطلب: «اضغط ▉ الأزرق» ---- */
.qz-rt2-ask {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 800;
  min-height: 34px;
  line-height: 1.4;
  color: var(--text-primary);
  transition: color .08s linear;
}

.qz-rt2-ask.early { color: var(--accent-coral); }
.qz-rt2-ask.next  { color: var(--accent-violet); }

/* مربّع اللون بجانب اسمه — يكفل المطابقة البصرية لمن لا يميّز الأسماء
   (نحو ٨٪ من الذكور). بلا هذا نقيس إبصار الألوان لا سرعة العقل. */
.qz-rt2-swatch {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.25);
  flex: 0 0 auto;
}

.qz-rt2-ask.early .qz-rt2-swatch,
.qz-rt2-ask.next  .qz-rt2-swatch { display: none; }

.qz-rt2-grid {
  display: grid;
  gap: 10px;
  direction: ltr;          /* هندسة لا نص — لا تنعكس مع RTL */
  touch-action: manipulation;
  justify-content: center;
}

/* الشبكة تقارب المربّع كلما كبرت: الصفّ الطويل تكون أطرافه أبعد عن
   مركز النظر من وسطه، فيتفاوت زمن العثور بحسب موضع الهدف لا بحسب
   قدرة اللاعب. */
.qz-rt2-grid.n2  { grid-template-columns: repeat(2, auto); }
.qz-rt2-grid.n4  { grid-template-columns: repeat(2, auto); }
.qz-rt2-grid.n8  { grid-template-columns: repeat(4, auto); }
.qz-rt2-grid.n16 { grid-template-columns: repeat(4, auto); gap: 8px; }

.qz-rt2-cell {
  width:  clamp(54px, 16vw, 80px);
  height: clamp(54px, 16vw, 80px);
  border-radius: var(--radius-md);
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease;
}

/* ستة عشر مربّعاً على شاشة جوّال: تصغُر لتبقى أربعة أعمدة بلا تمرير
   أفقي، ولا تنزل تحت ٤٤px وهو الحدّ الأدنى للمس. */
.qz-rt2-grid.n16 .qz-rt2-cell {
  width:  clamp(46px, 13.5vw, 66px);
  height: clamp(46px, 13.5vw, 66px);
}

.qz-rt2-cell.hit  { transform: scale(.9); box-shadow: 0 0 0 3px rgba(87,232,201,.5); }
.qz-rt2-cell.miss { transform: scale(.9); box-shadow: 0 0 0 3px rgba(255,122,138,.6); }

.qz-rt2-meta {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--text-muted);
  min-height: 18px;
}

.qz-rt2-meta .qz-rt2-last {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--accent-teal);
  direction: ltr;
}

/* =====================================================================
   تفاصيل إضافية تحت النتيجة (تكلفة القرار، الأخطاء…)
   ===================================================================== */

.qz-res-extra {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 2px;
}

.qz-res-extra .item { text-align: center; }

.qz-res-extra .v {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-violet);
  direction: ltr;
}

.qz-res-extra .k {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* =====================================================================
   اختبار الذاكرة البصرية
   ===================================================================== */

.qz-vm-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.qz-vm-grid {
  display: grid;
  gap: 8px;
  direction: ltr;          /* الشبكة هندسة لا نص — لا تنعكس مع RTL */
  touch-action: manipulation;
}

.qz-vm-cell {
  width: clamp(44px, 15vw, 62px);
  height: clamp(44px, 15vw, 62px);
  border-radius: var(--radius-sm);
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .1s linear, border-color .1s linear, transform .1s ease;
}

.qz-vm-cell.flash {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  transform: scale(1.04);
}

.qz-vm-cell.tapped {
  background: var(--accent-violet-dim);
  border-color: var(--accent-violet);
}

.qz-vm-cell.good { background: var(--accent-teal-dim); border-color: var(--accent-teal); }
.qz-vm-cell.bad  { background: var(--accent-coral-dim); border-color: var(--accent-coral); }

/* أثناء العرض لا تُقبل الضغطات — ولا نكتفي بتجاهلها في الجافاسكربت،
   فمؤشّر اليد يوحي بأنها مقبولة فيربك اللاعب. */
.qz-vm-grid.locked .qz-vm-cell { cursor: default; }

.qz-vm-status {
  font-size: 14px;
  font-weight: 700;
  min-height: 22px;
}

.qz-vm-meta {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--text-muted);
}

.qz-vm-meta .v {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--text-primary);
}

/* =====================================================================
   اختبار المصفوفات المنطقية
   ===================================================================== */

.qz-mx-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.qz-mx-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  min-height: 18px;
}

.qz-mx-hint {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-violet);
  min-height: 20px;
}

/* ---- الشبكة ٣×٣ ---- */
.qz-mx-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 6px;
  direction: ltr;            /* هندسة لا نص */
  background: var(--panel-border);
  padding: 6px;
  border-radius: var(--radius-md);
}

.qz-mx-cell {
  width:  clamp(56px, 17vw, 84px);
  height: clamp(56px, 17vw, 84px);
  background: var(--tile-bg);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qz-mx-cell svg { width: 82%; height: 82%; display: block; }

/* الخانة الناقصة: مميّزة بلا أن تُشتِّت — إطار متقطّع لا لون صارخ */
.qz-mx-cell.missing {
  background: var(--bg);
  border: 2px dashed var(--accent-violet);
  color: var(--accent-violet);
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
}

/* تُملأ بالجواب بعد الاختيار ليرى اللاعب النمط كاملاً */
.qz-mx-cell.revealed {
  background: var(--accent-teal-dim);
  box-shadow: inset 0 0 0 2px var(--accent-teal);
}

/* ---- الخيارات الستة ---- */
.qz-mx-options {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 9px;
  direction: ltr;
  touch-action: manipulation;
  justify-content: center;
}

.qz-mx-opt {
  width:  clamp(54px, 16vw, 78px);
  height: clamp(54px, 16vw, 78px);
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .1s ease, transform .1s ease;
}

.qz-mx-opt svg { width: 80%; height: 80%; display: block; pointer-events: none; }
.qz-mx-opt:hover { border-color: var(--accent-teal); }

.qz-mx-opt.good {
  border-color: var(--accent-teal);
  background: var(--accent-teal-dim);
  transform: scale(1.06);
}
.qz-mx-opt.bad {
  border-color: var(--accent-coral);
  background: var(--accent-coral-dim);
}

/* على الشاشات القصيرة تُضغط المقاسات ليبقى اللغز وخياراته داخل الشاشة
   معاً — فمن يمرّر ليرى الخيارات ينسى النمط. */
@media (max-height: 780px), (max-width: 420px) {
  .qz-mx-wrap { gap: 10px; }
  .qz-mx-cell { width: clamp(48px, 14.5vw, 70px); height: clamp(48px, 14.5vw, 70px); }
  .qz-mx-opt  { width: clamp(46px, 13.5vw, 66px); height: clamp(46px, 13.5vw, 66px); }
  .qz-mx-grid { gap: 5px; padding: 5px; }
}

/* =====================================================================
   اختبار ستروب
   ===================================================================== */

.qz-st-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.qz-st-task {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-violet);
  min-height: 20px;
}

/* مساحة الكلمة ثابتة الارتفاع: لو تغيّرت لتحرّكت الأزرار تحتها بين
   محاولة وأخرى، فأضاف تصحيحُ اليد ضجيجاً إلى الزمن المقيس. */
.qz-st-stage {
  height: clamp(84px, 22vw, 118px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.qz-st-word {
  font-family: var(--font-ui);
  font-size: clamp(40px, 12vw, 64px);
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  user-select: none;
  -webkit-user-select: none;
}

.qz-st-word.on    { opacity: 1; }
.qz-st-word.wrong { animation: qzShake .3s ease; }

@keyframes qzShake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-6px); }
  75%     { transform: translateX(6px); }
}

/* ---- أزرار الألوان: ترتيبها ثابت في كل المحاولات ---- */
.qz-st-pads {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 12px;
  direction: ltr;            /* ترتيب ثابت لا يتبع اتجاه الصفحة */
  touch-action: manipulation;
  justify-content: center;
}

.qz-st-pad {
  width:  clamp(58px, 17vw, 82px);
  height: clamp(58px, 17vw, 82px);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .07s ease, box-shadow .07s ease;
}

.qz-st-pad.hit  { transform: scale(.9); box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.qz-st-pad.miss { transform: scale(.9); box-shadow: 0 0 0 3px var(--accent-coral); }

.qz-st-meta {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 18px;
}

@media (max-height: 780px), (max-width: 420px) {
  .qz-st-wrap  { gap: 11px; }
  .qz-st-stage { height: clamp(70px, 19vw, 96px); }
  .qz-st-pads  { gap: 9px; }
  .qz-st-pad   { width: clamp(52px, 15vw, 72px); height: clamp(52px, 15vw, 72px); }
}

/* =====================================================================
   اختبار التبديل الذهني
   ===================================================================== */

.qz-sw-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* القاعدة: نصٌّ أصلي ولونٌ إشارة زائدة. من لا يميّز الألوان يقرأ،
   ومن يميّزها يرى التبديل بلمحة بلا قراءة. */
.qz-sw-rule {
  font-size: clamp(17px, 5vw, 22px);
  font-weight: 800;
  min-height: 30px;
  line-height: 1.4;
  transition: color .1s linear;
}

/* ارتفاع ثابت: لو تغيّر لتحرّكت الأزرار بين محاولة وأخرى، فأضاف
   تصحيحُ اليد ضجيجاً إلى الزمن المقيس. */
.qz-sw-stage {
  height: clamp(88px, 24vw, 124px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.qz-sw-digit {
  font-family: var(--font-mono);
  font-size: clamp(56px, 17vw, 88px);
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
  opacity: 0;
  user-select: none;
  -webkit-user-select: none;
}

.qz-sw-digit.on    { opacity: 1; }
.qz-sw-digit.wrong { animation: qzShake .3s ease; color: var(--accent-coral); }

/* ---- زرّا الإجابة: موضعاهما ثابتان، ونصّاهما يتبعان القاعدة ---- */
.qz-sw-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 420px;
  touch-action: manipulation;
}

.qz-sw-btn {
  min-height: 60px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  border: 2px solid var(--tile-border);
  background: var(--tile-bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: clamp(14px, 4vw, 17px);
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .07s ease, box-shadow .07s ease, border-color .1s linear;
}

.qz-sw-btn.hit  { transform: scale(.95); box-shadow: 0 0 0 3px rgba(87,232,201,.55); }
.qz-sw-btn.miss { transform: scale(.95); box-shadow: 0 0 0 3px var(--accent-coral); }

.qz-sw-meta {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 18px;
}

@media (max-height: 780px), (max-width: 420px) {
  .qz-sw-wrap  { gap: 10px; }
  .qz-sw-stage { height: clamp(72px, 20vw, 100px); }
  .qz-sw-btn   { min-height: 54px; padding: 10px 6px; }
}

/* =====================================================================
   اختبار الدوران الذهني
   ===================================================================== */

.qz-ro-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.qz-ro-ask {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-violet);
  line-height: 1.6;
  max-width: 40ch;
  min-height: 20px;
}

/* الشكلان جنباً إلى جنب دائماً — لا فوق بعضهما ولو على الجوّال.
   المقارنة تحتاج رؤيتهما في لمحة واحدة، والتفريق عمودياً يُجبر العين
   على الانتقال فيزيد الزمن بسببٍ ليس من القدرة. */
.qz-ro-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2.5vw, 16px);
  direction: ltr;              /* هندسة لا نص */
  width: 100%;
}

.qz-ro-box {
  width:  clamp(112px, 34vw, 168px);
  height: clamp(112px, 34vw, 168px);
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .12s ease, background-color .12s ease;
}

.qz-ro-box svg { width: 94%; height: 94%; display: block; }

.qz-ro-box.good { border-color: var(--accent-teal);  background: var(--accent-teal-dim); }
.qz-ro-box.bad  { border-color: var(--accent-coral); background: var(--accent-coral-dim); }

.qz-ro-vs {
  font-family: var(--font-mono);
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 800;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.qz-ro-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 420px;
  touch-action: manipulation;
}

.qz-ro-btn {
  min-height: 60px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  border: 2px solid var(--tile-border);
  background: var(--tile-bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: clamp(14px, 4vw, 17px);
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .07s ease, box-shadow .07s ease;
}

.qz-ro-btn.hit  { transform: scale(.95); box-shadow: 0 0 0 3px rgba(87,232,201,.55); }
.qz-ro-btn.miss { transform: scale(.95); box-shadow: 0 0 0 3px var(--accent-coral); }

.qz-ro-meta {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 18px;
}

@media (max-height: 780px), (max-width: 420px) {
  .qz-ro-wrap { gap: 10px; }
  .qz-ro-box  { width: clamp(96px, 30vw, 140px); height: clamp(96px, 30vw, 140px); }
  .qz-ro-btn  { min-height: 54px; padding: 10px 6px; }
}

/* عنوان الرقم الرئيسي في شاشة النتيجة — فوقه لا تحته، فيُقرأ قبله */
.qz-res-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: -6px;
}

.qz-res-label:empty { display: none; }

/* الوحدة تختفي إن كانت فارغة — بعض الاختبارات عنوانها يكفي عنها */
.qz-res-unit:empty { display: none; }

/* =====================================================================
   الاسترجاع المؤجَّل — qz-recall.js
   ---------------------------------------------------------------------
   شكل واحد في المنتصف، كبيرٌ بلا تنافس. والحشو حوله مقصود: العين
   تحفظ الشكل أفضل حين لا يزاحمه شيء على الشاشة.
   ===================================================================== */

.qz-rc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.qz-rc-task {
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 700;
  color: var(--text-primary);
  min-height: 24px;
  line-height: 1.6;
  max-width: 34ch;
}

.qz-rc-stage {
  /* أكبر من السابق: أقرب شكلين يفترقان بـ١٣ بكسل على هذا الحجم و٧ على
     الأصغر — والفرق بين قياس ذاكرةٍ وقياس بصر */
  width: clamp(190px, 56vw, 260px);
  height: clamp(190px, 56vw, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .12s ease, transform .12s ease;
}

.qz-rc-stage.on { opacity: 1; transform: scale(1); }
.qz-rc-stage svg { width: 100%; height: 100%; display: block; }

.qz-rc-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 340px;
}

.qz-rc-btn {
  min-height: 54px;
  border-radius: var(--radius-md);
  border: 2px solid var(--tile-border);
  background: var(--tile-bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: clamp(14px, 4vw, 17px);
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .07s ease;
}

.qz-rc-btn:active { transform: scale(.96); }

.qz-rc-meta {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 18px;
}

/* =====================================================================
   الجلسة الشاملة — qz-session.js
   ===================================================================== */

.qz-ses { display: flex; flex-direction: column; gap: 10px; }

/* شريط التقدّم: اللاعب في جلسة من ثماني مراحل، وبلا مؤشّرٍ لا يعرف
   أقربَ الطريق من أبعده فينسحب في منتصفه. */
.qz-ses-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--tile-bg);
  border: 1px solid var(--panel-border);
  overflow: hidden;
}

.qz-ses-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-violet), var(--accent-teal));
  transition: width .35s ease;
}

.qz-ses-step {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  min-height: 18px;
}

.qz-ses-plan {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 46ch;
  margin: -4px 0 4px;
}

/* ---------- النتيجة المركّبة ---------- */
.qz-ses-result {
  gap: 18px;
  justify-content: flex-start;
  min-height: 0;
  padding: 26px 16px 22px;
}

.qz-res-head { display: flex; flex-direction: column; gap: 6px; }

.qz-arch-name {
  font-size: clamp(26px, 8vw, 38px);
  font-weight: 900;
  color: var(--accent-teal);
  line-height: 1.15;
}

.qz-arch-desc {
  font-size: clamp(13px, 3.6vw, 15px);
  color: var(--text-primary);
  line-height: 1.75;
  max-width: 42ch;
}

/* ⚠️ الحدّ يُعرض مع النمط لا في صفحة بعيدة — ولا يُصغَّر حتى يختفي */
.qz-arch-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 42ch;
}

.qz-hex-wrap {
  width: clamp(240px, 78vw, 340px);
  margin: -2px auto 0;
}

.qz-hex { width: 100%; height: auto; display: block; overflow: visible; }

/* ---------- صفوف المحاور: الرقم الخام بجانب الرسم دائماً ----------
   شرطٌ مكتوب في رأس qz-norms.js: حدود المقياس **اختيار**، فالرسم وحده
   يوهم دقّةً لا يملكها. الرقم الخام هو الحقيقة. */
.qz-axis-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}

.qz-axis-row {
  display: grid;
  grid-template-columns: 4.6em 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.qz-axis-row.off { opacity: .45; }

.qz-axis-name {
  font-weight: 700;
  color: var(--text-primary);
  text-align: start;
}

.qz-axis-track {
  height: 8px;
  border-radius: 99px;
  background: var(--tile-bg);
  border: 1px solid var(--panel-border);
  overflow: hidden;
}

.qz-axis-fill {
  height: 100%;
  background: var(--accent-teal);
  border-radius: 99px;
  transition: width .5s ease;
}

.qz-axis-raw {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  text-align: end;
  min-width: 5.4em;
}

/* ---------- بطاقة الاسترجاع المؤجَّل: تحت الرسم لا ضلعاً فيه ---------- */
.qz-recall-card {
  width: 100%;
  max-width: 420px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--panel-border);
  background: var(--tile-bg);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.qz-rcc-title { font-size: 13px; font-weight: 800; color: var(--text-primary); }

.qz-rcc-main {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 800;
  color: var(--accent-violet);
  line-height: 1.1;
}

.qz-rcc-sub  { font-size: 12.5px; color: var(--text-primary); line-height: 1.7; }
.qz-rcc-note { font-size: 11.5px; color: var(--text-muted); line-height: 1.8; }

/* ---------- التوصية ---------- */
.qz-reco {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qz-reco-weak { font-size: 13px; font-weight: 700; color: var(--text-primary); }

.qz-reco-gap {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.8;
}

.qz-reco-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-teal);
  background: rgba(87, 232, 201, .07);
  text-decoration: none;
  transition: transform .1s ease;
}

.qz-reco-card:active { transform: scale(.99); }

.qz-reco-game { font-size: 17px; font-weight: 900; color: var(--accent-teal); }
.qz-reco-why  { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; }

/* ---------- الأزرار والحدود ---------- */
.qz-ses-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 2px;
}

.qz-ses-limit {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.9;
  max-width: 52ch;
  padding-top: 12px;
  border-top: 1px solid var(--panel-border);
  width: 100%;
}

.qz-ses-limit:empty { display: none; }

@media (max-height: 780px), (max-width: 420px) {
  .qz-rc-wrap  { gap: 12px; }
  .qz-rc-btn   { min-height: 50px; }
  .qz-ses-result { gap: 14px; padding: 20px 12px 18px; }
  .qz-axis-row { grid-template-columns: 4.2em 1fr auto; gap: 8px; }
  .qz-axis-raw { min-width: 4.8em; font-size: 11.5px; }
}

/* =====================================================================
   🐞 أزرار الاختبار — كانت بلا نمط إطلاقاً
   ---------------------------------------------------------------------
   `.ms-primary` في ui.css معرّفة **داخل `.ms-modal` وحدها**:

     .ms-modal button.ms-primary { ... }

   وكل أزرار الاختبارات خارج أي مودال، فكان زرّ «ابدأ» على الصفحات الستّ
   زرَّ نظامٍ خاماً: رمادي، بخطّ Arial، ارتفاعه ١٩ بكسل — أي أقلّ من
   نصف حدّ اللمس (٤٤). وهو الزرّ الوحيد الذي يُضغط في كل صفحة.

   ولم يظهر في المراجعة لأن `.qz-start-btn { min-width: 160px }` كانت
   موجودة، فبدا الزر «مُنمَّطاً» في الكود بينما لم يكن كذلك في الشاشة.

   والنمط هنا لا في ui.css: قاعدةٌ عامة لـ`.ms-primary` قد تُغيّر أزرار
   المودالات في الألعاب الثلاث، والمكسب لا يستحق ذلك الخطر.
   ===================================================================== */

.qz-stage .ms-primary,
.qz-stage .ms-ghost {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 800;
  min-height: var(--touch-min);
  padding: 12px 26px;
  border-radius: var(--radius-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, opacity .12s ease;
}

.qz-stage .ms-primary {
  background: linear-gradient(90deg, var(--accent-teal), var(--accent-violet));
  color: var(--bg);
  border: none;
}

.qz-stage .ms-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--tile-border);
}

.qz-stage .ms-ghost:hover { border-color: var(--accent-teal); }

.qz-stage .ms-primary:active,
.qz-stage .ms-ghost:active { transform: scale(.97); }

/* إشعار الضغط — محايدٌ في الحالتين ---------------------------------
   يقول «وصلت ضغطتك» ولا يقول «أصبتَ». والتصحيح الفوري يُفسد القياس
   (انظر qz-recall.js)، أما غياب أي إشعار فيجعل اللاعب يظنّ الزرّ
   معطّلاً فيضغط مرتين. */
.qz-rc-btn.tapped {
  border-color: var(--accent-violet);
  background: var(--accent-violet-dim);
  transform: scale(.97);
}

/* ---------- تفصيل الاسترجاع في النتيجة ---------- */
.qz-rcc-detail { margin-top: 4px; }

.qz-rcc-detail > summary {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-teal);
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
}
.qz-rcc-detail > summary::-webkit-details-marker { display: none; }
.qz-rcc-detail > summary::before { content: '▸ '; }
.qz-rcc-detail[open] > summary::before { content: '▾ '; }

.qz-rcc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 8px 0;
}

.qz-rcc-item {
  border-radius: var(--radius-sm);
  border: 2px solid var(--tile-border);
  background: var(--bg-soft);
  padding: 5px 3px 3px;
  text-align: center;
}

.qz-rcc-item.right { border-color: var(--accent-teal); }
.qz-rcc-item.wrong { border-color: var(--accent-coral); }

.qz-rcc-item svg { width: 100%; height: auto; display: block; }

.qz-rcc-item .tag {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 2px;
}

.qz-rcc-key {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.8;
}

@media (max-width: 420px) {
  .qz-rcc-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .qz-rcc-item .tag { font-size: 9px; }
}