/* رَاءٍ — أنماط مشتركة لرأس الصفحات الداخلية وتذييلها. يُستخدم عبر كل صفحات الموقع الداخلية. */
/* شبكة أمان: هذان الشريطان لا يُنشآن أصلا إلا على عرض الهاتف (بجافاسكربت)،
   لكن هذه القاعدة غير المشروطة تمنع ظهورهما لو تغيّر عرض النافذة عبر نقطة
   الانكسار بعد إنشائهما دون إعادة تحميل الصفحة. */
.m-simple-topbar,.m-simple-bottombar{display:none}
:root{
  --hicon-ret-w: clamp(90px, 11vw, 130px);
  --hicon-logo-h: clamp(52px, 7vw, 78px);
}
.ret-icon{
  display:inline-block;position:relative;
  width:var(--hicon-ret-w);height:calc(var(--hicon-ret-w) / 1.175);
  text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, filter .12s ease;
}
.logo-icon{
  display:inline-block;position:relative;
  height:var(--hicon-logo-h);width:calc(var(--hicon-logo-h) * .7307);
  text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, filter .12s ease;
}
.ret-icon:active,.logo-icon:active{transform:scale(.92);filter:brightness(.9)}
.ret-icon .hface,.logo-icon .hface{
  position:absolute;inset:0;background-repeat:no-repeat;background-size:100% 100%;
  transition:opacity .4s ease;filter:drop-shadow(0 3px 8px rgba(53,40,27,.35));
}
.ret-icon .h-bare{background-image:url('./raien-ret-bare.webp');opacity:1}
.ret-icon .h-bloom{background-image:url('./raien-ret-bloom.webp');opacity:0}
.ret-icon:hover .h-bloom,.ret-icon:focus-visible .h-bloom{opacity:1}
.logo-icon .h-bare{background-image:url('./raien-logo-bare.webp');opacity:1}
.logo-icon .h-bloom{background-image:url('./raien-logo-bloom.webp');opacity:0}
.logo-icon:hover .h-bloom,.logo-icon:focus-visible .h-bloom{opacity:1}

footer.wrap p{margin:0}
footer.wrap p + p{margin-top:6px}
.footer-credit{font-size:.82rem;opacity:.8}
/* الفوتر بنفس أسلوب الصفحة الرئيسية: أبيض بحواف سوداء، ليبقى مقروءا فوق
   أي خلفية فوتوغرافية مزدحمة بدل أن يغرق فيها. نسخة الحاسوب هنا تحديدا؛
   نسخة الهاتف معرَّفة بشكل مستقل داخل استعلام الوسائط أدناه. */
footer.wrap,footer.wrap p{color:#F1E8D6}
footer.wrap p{
  text-shadow:0 0 4px rgba(0,0,0,.95),0 0 9px rgba(0,0,0,.85),0 1px 1px rgba(0,0,0,.95),0 -1px 1px rgba(0,0,0,.95),1px 0 1px rgba(0,0,0,.95),-1px 0 1px rgba(0,0,0,.95);
}

/* ---------- انتقال تدريجي سريع بين الصفحات: طبقة تغطية صلبة اللون، لا شفافية تكشف بياض المتصفح ---------- */
#raien-transition-overlay{
  position:fixed;inset:0;z-index:99999;background:#2b2117;
  opacity:1;pointer-events:none;transition:opacity .22s ease;
}
#raien-transition-overlay.is-hidden{opacity:0}
@media (prefers-reduced-motion:reduce){
  #raien-transition-overlay{transition:none;opacity:0}
}

/* ---------- زر "العودة إلى (اسم القسم)": يظهر فقط داخل صفحات الحكايات، يتوسط الرأس تمامًا ---------- */
.subheader.has-sectbtn{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.subheader.has-sectbtn .ret-icon{grid-column:1}
.subheader.has-sectbtn .logo-icon{grid-column:3;justify-self:end}
.section-btn{
  grid-column:2;justify-self:center;
  display:flex;align-items:center;justify-content:center;position:relative;
  width:clamp(270px, 32vw, 460px);height:calc(clamp(270px, 32vw, 460px) / 2.7512);
  text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, filter .12s ease;
}
.section-btn:active{transform:scale(.94) translateY(1px);filter:brightness(.9)}
.section-btn .hface{position:absolute;inset:0;background-repeat:no-repeat;background-size:100% 100%;transition:opacity .4s ease;filter:drop-shadow(0 3px 8px rgba(53,40,27,.3))}
.section-btn .h-bare{background-image:url('./raien-section-bare.webp');opacity:1}
.section-btn .h-bloom{background-image:url('./raien-section-bloom.webp');opacity:0}
.section-btn:hover .h-bloom,.section-btn:focus-visible .h-bloom{opacity:1}
/* نص منحوت أكبر ووضوحا في كل ظهوراته، سواء زر العودة إلى قسم بعينه هنا أو زر العودة إلى القائمة أدناه */
.section-btn span.lbl{
  position:relative;z-index:1;font-family:'Amiri',serif;font-weight:700;
  font-size:clamp(1.5rem,3vw,2.05rem);color:#2a1c0f;
  text-shadow:0 1px 0 rgba(255,255,255,.28), 0 -1px 1.5px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.35);
  padding:0 10%;text-align:center;pointer-events:none;line-height:1.15;
}

/* ---------- زر "العودة إلى القائمة": حصريا لرأس صفحات الأقسام الست الرئيسية، بنفس موضع section-btn تمامًا ---------- */
.menu-btn{
  grid-column:2;justify-self:center;
  display:flex;align-items:center;justify-content:center;position:relative;
  width:clamp(270px, 32vw, 460px);height:calc(clamp(270px, 32vw, 460px) / 1.8333);
  text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, filter .12s ease;
}
.menu-btn:active{transform:scale(.94) translateY(1px);filter:brightness(.9)}
.menu-btn .hface{position:absolute;inset:0;background-repeat:no-repeat;background-size:100% 100%;transition:opacity .4s ease;filter:drop-shadow(0 3px 8px rgba(53,40,27,.3))}
.menu-btn .h-bare{background-image:url('./raien-menu-btn-bare.webp');opacity:1}
.menu-btn .h-bloom{background-image:url('./raien-menu-btn-bloom.webp');opacity:0}
.menu-btn:hover .h-bloom,.menu-btn:focus-visible .h-bloom{opacity:1}
.menu-btn span.lbl{
  position:relative;z-index:1;font-family:'Amiri',serif;font-weight:700;
  font-size:clamp(1.5rem,3vw,2.05rem);color:#2a1c0f;
  text-shadow:0 1px 0 rgba(255,255,255,.28), 0 -1px 1.5px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.35);
  padding:0 10%;text-align:center;pointer-events:none;line-height:1.15;
}

/* ---------- بطاقات الحكايات: لوح خشبي عارٍ/مزدهر، بلا صور، نص العنوان والموجز كلاهما منحوت ---------- */
.story-card{
  position:relative;display:block;text-decoration:none;color:inherit;
  aspect-ratio:1461/2035;-webkit-tap-highlight-color:transparent;
}
.story-card .plank-face{
  position:absolute;inset:0;background-repeat:no-repeat;background-size:100% 100%;
  transition:opacity .4s ease;filter:drop-shadow(0 8px 16px rgba(20,14,8,.28));
}
.story-card .plank-bare{background-image:url('./raien-card-bare.webp');opacity:1}
.story-card .plank-bloom{background-image:url('./raien-card-bloom.webp');opacity:0}
.story-card:hover .plank-bloom,.story-card:focus-visible .plank-bloom{opacity:1}
.story-card:active .card-btn{transform:translate(-50%,-50%) scale(.94) translateY(1px);filter:brightness(.9)}

.story-card h2{
  position:absolute;top:6%;right:9%;left:9%;height:25%;margin:0;
  display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  font-family:'Amiri',serif;font-weight:700;font-size:clamp(1.08rem,2.1vw,1.42rem);line-height:1.2;
  color:#2a1c0f;text-shadow:0 1px 0 rgba(255,255,255,.3), 0 -1px 1.5px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.2);
}
.story-card .card-desc{
  position:absolute;top:32.5%;right:10%;left:10%;height:31%;margin:0;
  text-align:center;font-family:'Amiri',serif;font-weight:500;
  font-size:clamp(.9rem,1.5vw,1.12rem);line-height:1.36;
  color:#3a2815;text-shadow:0 1px 0 rgba(255,255,255,.22), 0 -1px 1px rgba(0,0,0,.3);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.story-card .card-btn{
  position:absolute;top:76.8%;left:50%;transform:translate(-50%,-50%);
  width:60%;aspect-ratio:2.7512;
}
.story-card .card-btn .hface{position:absolute;inset:0;background-repeat:no-repeat;background-size:100% 100%;transition:opacity .4s ease;filter:drop-shadow(0 3px 7px rgba(53,40,27,.32))}
.story-card .card-btn .h-bare{background-image:url('./raien-section-bare.webp');opacity:1}
.story-card .card-btn .h-bloom{background-image:url('./raien-section-bloom.webp');opacity:0}
.story-card:hover .card-btn .h-bloom{opacity:1}
.story-card .card-btn span.lbl{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  font-family:'Amiri',serif;font-weight:700;font-size:clamp(.85rem,1.5vw,1.08rem);color:#2a1c0f;
  text-shadow:0 1px 0 rgba(255,255,255,.28), 0 -1px 1.5px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.35);
  padding:0 6%;text-align:center;pointer-events:none;line-height:1.1;
}

/* ================================================================
   نسخة الهاتف — النسخة المبسّطة: الإطار الأخضر خلفية زخرفية بحتة
   (صورة عشب دون أي زر أو تجويف مرسوم داخلها)، وكل عنصر تفاعلي أو
   يحمل نصا (الأزرار، البطاقات، الجذوع) مرسوم بالكود مباشرة (CSS)
   لا بصورة مستوردة. هذا يزيل تماما فئة الأخطاء التي واجهناها سابقا
   (مطابقة نص فوق صورة بدقة بكسل). لا مؤثرات قص أو قناع متحركة هنا
   إطلاقا؛ التمرير قياسي عادي، وشريطا الأزرار ثابتان بخلفية شبه
   شفافة تخفي المحتوى المتمرر تحتهما بلا أي حساب هندسي دقيق. لا يمس
   نسخة الحاسوب إطلاقا، كل قواعده محصورة داخل هذا الاستعلام فقط.
   ================================================================ */
/* ================================================================
   نسخة الهاتف — النسخة الأبسط والنهائية: لا إطار، لا صورة خلفية، لا
   قناع، لا تموضع ثابت لأي عنصر إطلاقا. الصفحة تتمرر بشكل طبيعي تماما
   كأي صفحة ويب عادية. شريط علوي وسفلي بسيطان ضمن تدفق الصفحة العادي
   (لا position:fixed)، بطاقات وألواح مسطحة بلون واحد وحدود رفيعة، بلا
   أي صورة. هذا يزيل تماما فئة أخطاء المحاذاة والتموضع التي واجهناها
   في كل المحاولات السابقة، لأن لا شيء هنا يحتاج إلى محاذاة مع شيء آخر.
   لا يمس نسخة الحاسوب إطلاقا، كل قواعده محصورة داخل هذا الاستعلام فقط.
   ================================================================ */
@media (max-width:767px), (orientation:landscape) and (max-height:500px), (orientation:portrait) and (max-width:1024px){

  .subheader.has-sectbtn{display:none !important}

  html,body{background:#FBF8F1}
  body{color:#3a2c1e}

  main{padding:0 6% 8px}

  /* ============================================================
     الشريط العلوي: ثلاثة أزرار دائما جنبا إلى جنب (رَاءٍ، السياقي،
     الصفحة الرئيسية)، كلها بنفس نسيج الخشب الفاتح القابل للتكرار
     ونفس النص الأسود المنحوت، توحيدا لهوية الموقع بلا أي درجة غامقة
     مختلفة. عنصر عادي ضمن تدفق الصفحة، لا ثبات ولا طبقات.
     ============================================================ */
  .m-simple-topbar{
    display:flex;gap:8px;justify-content:space-between;
    padding:14px 6%;border-bottom:1px solid #e3d7c0;margin-bottom:14px;
    position:relative; /* لتثبيت لوحة البحث المنسدلة من زر "ابحث في رَاءٍ" أسفله مباشرة */
  }
  /* زر "ابحث في رَاءٍ" (الزر الأوسط سابقا "رَاءٍ") عنصر <button> الآن لا <a>، بنفس
     مظهر الزرين الآخرين تماما، فالقاعدة موحَّدة بينهما بلا أي تكرار. */
  .m-simple-topbar a,.m-simple-topbar button{
    display:inline-flex;align-items:center;justify-content:center;flex:1;
    font-family:'Amiri',serif;font-weight:700;font-size:clamp(.72rem,3.4vw,.92rem);
    color:#000;text-decoration:none;text-align:center;
    background-image:url('./raien-wood-light.webp');background-size:150px 150px;background-repeat:repeat;
    padding:9px 8px;border-radius:8px;border:1px solid #cbb98e;
    text-shadow:0 1px 0 rgba(255,255,255,.35), 0 -1px 1px rgba(0,0,0,.3);
    box-shadow:0 2px 4px rgba(0,0,0,.18);
    cursor:pointer;
  }
  .m-simple-topbar a:active,.m-simple-topbar button:active{transform:scale(.96)}

  /* ---------- لوحة بحث "ابحث في رَاءٍ" المنسدلة، نسخة الهاتف ----------
     تنسدل مباشرة أسفل الشريط الثلاثي، بعرضه كاملا حافة لحافة، بنفس هوية
     صندوق بحث الحاسوب (نسيج خشبي، خط أميري)، مع تضبيب كامل لكل ما خلفها
     (main وfooter) أثناء انفتاحها، بنفس منطق "الورقة تحط فتتضبب الصورة
     خلفها" المعتمد في صفحات الحكايات. */
  .mtb-search-panel{
    position:absolute;top:100%;right:0;left:0;z-index:30;
    max-height:0;overflow:hidden;opacity:0;
    background-image:url('./raien-wood-light.webp');background-size:150px 150px;background-repeat:repeat;
    border-bottom:1px solid #8a6a3d;
    box-shadow:0 6px 16px rgba(0,0,0,.35);
    transition:max-height .28s ease, opacity .22s ease;
  }
  .mtb-search-panel.is-open{max-height:70vh;opacity:1}
  .mtb-search-form{display:flex;align-items:center;padding:10px 6%}
  .mtb-search-input{
    flex:1;background:transparent;border:none;color:#3b2712;
    font-family:'Amiri',serif;font-size:1.05rem;font-weight:700;
    padding:8px 4px;
  }
  .mtb-search-input:focus{outline:none}
  .mtb-search-input::placeholder{color:rgba(59,39,18,.6)}
  .mtb-search-results{max-height:0;overflow-y:auto;overscroll-behavior:contain;transition:max-height .2s ease}
  .mtb-search-results.is-active{max-height:55vh;border-top:1px solid rgba(59,39,18,.25)}
  .mtb-search-item{
    display:block;width:100%;padding:12px 6%;border:none;background:transparent;
    border-bottom:1px solid rgba(59,39,18,.15);cursor:pointer;text-align:right;font:inherit;
  }
  .mtb-search-item:last-child{border-bottom:none}
  .mtb-search-item:active{background:rgba(0,0,0,.08)}
  .mtb-item-title{display:block;font-family:'Amiri',serif;font-weight:700;font-size:1.05rem;color:#3b2712}
  .mtb-item-desc{display:block;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:.78rem;color:#6B5741;margin-top:3px}
  .mtb-no-results{padding:15px 6%;text-align:center;color:#7a3226;font-weight:600;font-family:'Amiri',serif}

  /* تضبيب المحتوى خلف اللوحة أثناء انفتاحها، بلا مسّ الشريط أو اللوحة نفسيهما */
  main,footer.wrap{transition:filter .25s ease}
  body.mtb-search-open main,body.mtb-search-open footer.wrap{filter:blur(6px)}

  /* ============================================================
     زر عائم صغير: "العودة للأعلى"، زاوية الشاشة السفلى اليسرى، يظهر
     فقط بعد أن يسحب المستخدم الشاشة لأسفل (لا عند تحميل الصفحة إطلاقا)،
     ويختفي فور الضغط عليه. لا استخدام لـ transform في تموضعه (فقط
     bottom/left مباشرة) تفاديا لعطل سبق اكتشافه مع الدوران والاتجاه. */
  .m-back-top{
    position:fixed;bottom:18px;left:14px;z-index:20;
    display:flex;align-items:center;justify-content:center;
    width:74px;min-height:60px;text-align:center;white-space:normal;line-height:1.25;
    font-family:'Amiri',serif;font-weight:700;font-size:.78rem;
    color:#fff;text-decoration:none;
    background-image:url('./raien-wood-dark.webp');background-size:140px 140px;background-repeat:repeat;
    padding:10px 8px;border-radius:9px;border:1px solid #fff;box-sizing:border-box;
    text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    box-shadow:0 3px 8px rgba(0,0,0,.32);
    opacity:0;pointer-events:none;transition:opacity .25s ease, transform .12s ease;
  }
  .m-back-top.is-shown{opacity:1;pointer-events:auto}
  .m-back-top:active{transform:scale(.93)}

  /* بطاقات الحكايات على صفحات الأقسام: القالب الخشبي الفوتوغرافي
     الحقيقي (لا نسيج مسطح متكرر)، عبر border-image تحديدا لا
     background — هذه هي التقنية المصمَّمة أصلا لهذا الموقف بالضبط:
     إطار زخرفي (طحلب/لحاء) بحجم ثابت لا يتمدد أبدا مهما تغيّر طول
     النص، بينما تتمدد مساحة الخشب المسطحة في المنتصف فقط لتلائم
     ارتفاع المحتوى. البطاقة كلها رابط واحد (a.story-card)، فلا حاجة
     لزر منفصل داخلها إطلاقا — أُلغي "اقرأ الحكاية" وكل نظامه القديم
     (hface/h-bare/h-bloom) نهائيا من نسخة الهاتف، فتزول معه فئة عطل
     "الزر المشوَّه" من جذورها لا بترقيعها فقط. إشارة نقر خفيفة (سهم)
     مُضافة بالكود مباشرة، لا جزءا من الصورة، فلا قصّ ولا تعديل عليها
     مهما تغيّر التصميم لاحقا. */
  .story-card{width:100% !important;margin:0 0 16px !important;min-height:auto !important}
  .story-card .plank-face{display:none !important}
  /* توحيد حجم بطاقات الحكايات داخل كل قسم بحجم بطاقات الزاد الداخلية
     تماما. نسبة عرض إلى ارتفاع ثابتة تطابق نسبة صورة اللوح الفعلية
     بالضبط (1400×739، مقيسة من الصورة نفسها لا تخمينا)، فلا تمدد ولا
     تمطيط للسنابل مهما طال النص أو قصر، تماما كآلية عمل بطاقات الزاد:
     المحتوى يتوسط داخل مساحة ثابتة بدل أن تكبر البطاقة معه. البطاقة
     كلها رابط واحد (a.story-card)، فلا حاجة لزر منفصل داخلها إطلاقا —
     أُلغي "اقرأ الحكاية" وكل نظامه القديم (hface/h-bare/h-bloom) نهائيا
     من نسخة الهاتف. إشارة نقر خفيفة (سهم) مُضافة بالكود مباشرة، لا جزءا
     من الصورة، فلا قصّ ولا تعديل عليها مهما تغيّر التصميم لاحقا. */
  .story-card{
    position:relative !important;
    display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;text-align:center !important;
    overflow:hidden !important;
    aspect-ratio:1400/739 !important;
    background:none !important;
    background-image:url('./raien-card-plank-wheat.webp') !important;
    background-size:100% 100% !important;background-repeat:no-repeat !important;
    border:none !important;border-radius:0 !important;
    padding:11% 13% 8.5% 17% !important;
    box-shadow:0 10px 20px rgba(0,0,0,.4) !important;
  }
  .story-card h2{
    position:static !important;height:auto !important;margin:0 0 6px !important;padding:0 !important;
    font-size:clamp(1.3rem,5.2vw,1.75rem) !important;line-height:1.2 !important;
    color:#000 !important;text-shadow:0 1px 0 rgba(255,255,255,.35), 0 -1px 1px rgba(0,0,0,.3) !important;
  }
  .story-card .card-desc{
    position:static !important;height:auto !important;margin:0 !important;padding:0 !important;
    font-size:clamp(.95rem,3.4vw,1.15rem) !important;line-height:1.3 !important;
    color:#000 !important;text-shadow:0 1px 0 rgba(255,255,255,.25), 0 -1px 1px rgba(0,0,0,.2) !important;
  }
  .story-card .card-btn{display:none !important}
  .story-card::after{
    content:"\2190" !important;
    position:absolute !important;bottom:10px !important;left:14px !important;
    font-family:'Amiri',serif !important;font-weight:700 !important;font-size:1.15rem !important;
    color:#2a1c0f !important;opacity:.6 !important;
    text-shadow:0 1px 0 rgba(255,255,255,.3), 0 -1px 1px rgba(0,0,0,.3) !important;
    pointer-events:none !important;
  }
  @media (orientation:landscape) and (max-height:500px){
    .story-card h2{font-size:clamp(1.3rem,5.2vw,2.6rem) !important}
    .story-card .card-desc{font-size:clamp(.95rem,3.4vw,1.7rem) !important}
  }
}

/* ================================================================
   نفس معاملة "لوح القمح" العريض أعلاه، لكن هنا خصيصا للمدى الذي يبقى
   مصنَّفا حاسوبا رغم ضيقه الفعلي (آيباد أفقي، أو هاتف أفقي واسع لم
   يلتقطه المدى الهاتفي أعلاه). حاسوب حقيقي واسع لا يدخل هذا المدى
   إطلاقا فيبقى بشكله الطويل الأنيق كما هو، بلا أي تغيير.
   ================================================================ */
@media (orientation:landscape) and (min-width:768px) and (max-width:1228px){
  .story-cards{grid-template-columns:1fr !important;max-width:600px !important;margin-inline:auto !important}
  .story-card{
    position:relative !important;
    display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;text-align:center !important;
    overflow:hidden !important;
    aspect-ratio:1400/739 !important;
    background:none !important;
    background-image:url('./raien-card-plank-wheat.webp') !important;
    background-size:100% 100% !important;background-repeat:no-repeat !important;
    border:none !important;border-radius:0 !important;
    padding:18% 18% 13% 26% !important;
    box-shadow:0 10px 20px rgba(0,0,0,.4) !important;
  }
  .story-card .plank-face{display:none !important}
  .story-card h2{
    position:static !important;height:auto !important;margin:0 0 6px !important;padding:0 !important;
    display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;
    font-size:clamp(1rem,2.4vw,1.2rem) !important;
    color:#000 !important;text-shadow:0 1px 0 rgba(255,255,255,.35), 0 -1px 1px rgba(0,0,0,.3) !important;
  }
  .story-card .card-desc{
    position:static !important;height:auto !important;margin:0 !important;padding:0 !important;
    display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;
    font-size:clamp(.78rem,1.6vw,.92rem) !important;
    color:#000 !important;text-shadow:0 1px 0 rgba(255,255,255,.25), 0 -1px 1px rgba(0,0,0,.2) !important;
  }
  .story-card .card-btn{display:none !important}
  .story-card::after{
    content:"\2190" !important;
    position:absolute !important;bottom:10px !important;left:14px !important;
    font-family:'Amiri',serif !important;font-weight:700 !important;font-size:1.15rem !important;
    color:#2a1c0f !important;opacity:.6 !important;
    text-shadow:0 1px 0 rgba(255,255,255,.3), 0 -1px 1px rgba(0,0,0,.3) !important;
    pointer-events:none !important;
  }
}

@media (max-width:767px), (orientation:landscape) and (max-height:500px), (orientation:portrait) and (max-width:1024px){
  footer.wrap{padding-bottom:8px}
  footer.wrap,footer.wrap p{color:#F1E8D6 !important}
  footer.wrap p{
    text-shadow:0 0 4px rgba(0,0,0,.95),0 0 9px rgba(0,0,0,.85),0 1px 1px rgba(0,0,0,.95),0 -1px 1px rgba(0,0,0,.95),1px 0 1px rgba(0,0,0,.95),-1px 0 1px rgba(0,0,0,.95) !important;
  }

  /* إصلاح الصورة "الملصقة" (كما سبق): تحرير الشريطين من overflow:hidden
     القديم، وتصغيرهما ونقلهما لزاوية الصورة الفعلية بلا تغطية أي تفاصيل */
  .figure{overflow:visible !important}
  .figure::before,.figure::after{width:72px !important;height:26px !important}
  .figure::before{top:-13px !important;right:6px !important}
  .figure::after{bottom:-13px !important;left:6px !important}

  /* الورقة المجعدة: حُذفت كليا. لوح خشبي بسيط بدل الصورة الفوتوغرافية
     الممزقة الحواف، يظهر فوق الخلفية الضبابية المعزولة الجديدة خلفه
     مباشرة، بلا أي قناع أو صورة ورقة إطلاقا.
     تصحيح: كان هذا اللوح لونا صلبا مسطحا (#FBF8F1) لا خشبيا، بخلاف
     بطاقات الحكايات وأزرارها التي أصبحت خشبية — تناقض بصري واضح
     تحديدا لأن هذا هو اللوح الذي يحمل نص الحكاية كاملا، فتبدو صفحة
     القصة "بيضاء" رغم أن كل ما حولها خشبي. وُحِّد الآن بنفس نسيج
     البطاقات ولون احتياطي صلب مطابق. */
  .paper-content{
    -webkit-mask-image:none !important;mask-image:none !important;
    background-color:#E4CD9E !important;
    background-image:url('./raien-wood-light.webp') !important;background-size:260px 260px !important;background-repeat:repeat !important;
    border:1px solid #cbb98e !important;border-radius:12px !important;
    box-shadow:0 6px 18px rgba(20,14,8,.22) !important;
    padding:34px clamp(20px,6vw,40px) 38px !important;
  }

  /* ملاحظة: نظام body::before المعقّد بالكامل (طبقة صورة مموَّهة، إصلاح
     ثلاثي للقفزة والفيضان وحافة التمويه) أُلغي نهائيا من هذا الملف
     المشترك. كل صفحة تحمل الآن خلفية متدرجة لونية بسيطة (لا صورة، لا
     filter، لا طبقة منفصلة) معرَّفة مباشرة على body في نمط الصفحة
     نفسها — فئة العطل بأكملها (قفزة، فيضان أفقي، حافة غير مكتملة)
     مستحيلة بنيويا الآن، لا مُصلَحة فقط. */
}

/* ============================================================
   سهم العودة للأعلى — نسخة الحاسوب حصرا. مكافئ بصري لزر الهاتف
   (m-back-top)، لكن بشكل السهم الخشبي بحالتيه (عار دوما، يزدهر
   بالطحالب والأزهار عند التحويم عليه، تماما كتحول الجذوع والبطاقات
   الأخرى في العرض الحاسوبي). يظهر فقط بعد نزول المستخدم بالصفحة،
   ويختفي تماما بحالتيه عند العودة لأعلى الصفحة تماما. لا يظهر على
   عرض الهاتف إطلاقا (زر m-back-top وحده يخدم تلك الحالة). */
.d-back-top{display:none}
@media (orientation:portrait) and (min-width:1025px), (orientation:landscape) and (min-width:768px) and (min-height:501px){
  .d-back-top{
    display:block;position:fixed;bottom:22px;right:20px;z-index:20;
    width:50px;height:68px;border:none;padding:0;background-color:transparent;
    background-image:url('./raien-scrolltop-bare.png');
    background-size:contain;background-repeat:no-repeat;background-position:center;
    cursor:pointer;opacity:0;pointer-events:none;
    transition:opacity .3s ease, transform .15s ease;
  }
  .d-back-top.is-shown{opacity:1;pointer-events:auto}
  .d-back-top:hover,.d-back-top:focus-visible{
    background-image:url('./raien-scrolltop-bloom.png');
    transform:translateY(-3px);
  }
  .d-back-top:active{transform:translateY(-1px) scale(.94)}
}

/* ============================================================
   زر "كيف يعمل رَاءٍ أوفلاين"، نسخة الحاسوب. مطابق حرفيا لهوية صندوق
   البحث (نفس الحجم والموضع والنسيج الخشبي وزوايا الاستدارة والظل)، في
   الجهة المقابلة له تحديدا (أعلى يسار مقابل أعلى يمين)، لكنه ظاهر دائما
   بلا ارتباط بحالة القائمة، لأنه أداة دائمة لا كشف عرضي كالبحث. العنوان
   مكتوب عليه دوما، لا نص بديل يختفي، وينسدل من داخل حدوده هو نفسه تماما
   كطريقة انسدال نتائج البحث، ثم يعود لحجمه الطبيعي بنفس الطريقة. يختفي
   حصرا حين يعمل الموقع مثبَّتا كتطبيق مستقل. نسخة الهاتف منفصلة تماما،
   شريط ثابت بعرض الأزرار الثلاثة أسفلها. */
.d-howworks-btn{display:none}
@media (orientation:portrait) and (min-width:1025px), (orientation:landscape) and (min-width:768px) and (min-height:501px){
  .d-howworks-box{
    position:fixed;top:clamp(20px,4vh,40px);left:clamp(20px,4vw,40px);
    z-index:100;
    width:250px;max-width:calc(100vw - 40px);
    background-image:url('./raien-wood-light.webp');background-size:150px 150px;background-repeat:repeat;
    border-radius:22px;border:1px solid #8a6a3d;
    box-shadow:0 4px 15px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.2);
    overflow:hidden;
  }
  .d-howworks-box.is-app-hidden{display:none !important}
  .d-lang-box{
    position:fixed;top:clamp(20px,4vh,40px);right:clamp(20px,4vw,40px);left:auto;
    z-index:100;
    background-image:url('./raien-wood-light.webp');background-size:150px 150px;background-repeat:repeat;
    border-radius:22px;border:1px solid #8a6a3d;
    box-shadow:0 4px 15px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.2);
    overflow:hidden;
  }
  .d-lang-btn{
    display:flex;align-items:center;padding:5px 18px;
    font-family:'Amiri',serif;font-size:1.05rem;font-weight:700;color:#3b2712;
    text-decoration:none;
  }
  .d-howworks-btn{
    display:flex;align-items:center;width:100%;padding:5px 15px;
    background:transparent;border:none;cursor:pointer;
    font-family:'Amiri',serif;font-size:1.05rem;font-weight:700;color:#3b2712;
    text-align:right;
  }
  .d-howworks-panel{
    max-height:0;overflow-y:auto;overscroll-behavior:contain;
    transition:max-height .25s ease;
  }
  .d-howworks-panel.is-open{max-height:60vh;border-top:1px solid rgba(59,39,18,.25)}
  .d-howworks-panel .zad-hw-body{padding:12px 15px}
  .d-howworks-panel .zad-hw-body p{
    font-family:'IBM Plex Sans Arabic',sans-serif;font-size:.84rem;color:#3b2712;
    line-height:1.75;margin:0 0 12px;
  }
  .d-howworks-panel .zad-hw-body p:last-child{margin-bottom:0}
  .d-howworks-panel .zad-hw-body strong{color:#3f6a1f}
}

@media (max-width:767px), (orientation:landscape) and (max-height:500px), (orientation:portrait) and (max-width:1024px){
  /* صفّ ثانوي بزرين متجاورين، بنفس نسبة الحشو الجانبي 6% للشريط الثلاثي
     أعلاه بالضبط، فتتطابق حافتا الصفّين رأسيا: "كيف يعمل؟" يمينا تحت
     "الصفحة الرئيسية"، و"التواصل مع رَاءٍ" يسارا تحت الزر السياقي الثالث. */
  .m-secondary-row{display:flex;gap:8px;padding:0 6%;margin:0 0 14px}
  .m-howworks-btn,.m-contact-btn,.m-lang-btn{
    flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
    background-image:url('./raien-wood-light.webp');background-size:150px 150px;background-repeat:repeat;
    border:1px solid #cbb98e;border-radius:9px;padding:9px 8px;
    font-family:'Amiri',serif;font-weight:700;font-size:clamp(.7rem,3.2vw,.86rem);color:#000;
    text-decoration:none;
    text-shadow:0 1px 0 rgba(255,255,255,.35), 0 -1px 1px rgba(0,0,0,.3);
    box-shadow:0 2px 4px rgba(0,0,0,.18);
    cursor:pointer;
  }
  .m-howworks-btn:active,.m-contact-btn:active,.m-lang-btn:active{transform:scale(.96)}
  .m-howworks-panel{
    max-height:0;overflow:hidden;opacity:0;margin:0;
    background-image:url('./raien-wood-light.webp');background-size:150px 150px;background-repeat:repeat;
    border:1px solid #cbb98e;border-radius:9px;
    transition:max-height .3s ease, opacity .22s ease;
  }
  .m-howworks-panel.is-open{max-height:70vh;opacity:1;overflow-y:auto;margin:0 0 14px}
  .m-howworks-panel .zad-hw-body{padding:0;height:0;overflow:hidden}
  .m-howworks-panel.is-open .zad-hw-body{padding:14px 5%;height:auto;overflow:visible}
  .m-howworks-panel .zad-hw-body p{
    font-family:'IBM Plex Sans Arabic',sans-serif;font-size:.82rem;color:#2a1c0f;
    line-height:1.8;margin:0 0 12px;
  }
  .m-howworks-panel .zad-hw-body p:last-child{margin-bottom:0}
  .m-howworks-panel .zad-hw-body strong{color:#3f6a1f}
}

/* ---------- شارات الحفظ أوفلاين: الفردية المتمددة، والصح الثابتة ---------- */
.zad-cache-badge{
  position:fixed;top:50%;right:14px;z-index:55;transform:translateY(-50%);
  display:flex;align-items:center;gap:7px;
  background:#2b2117;color:#F1E8D6;border-radius:20px;padding:8px;
  font-family:'IBM Plex Sans Arabic',sans-serif;font-size:.76rem;
  box-shadow:0 3px 10px rgba(0,0,0,.32);
  max-width:36px;overflow:hidden;white-space:nowrap;
  transition:max-width .4s ease;
}
.zad-cache-badge.is-expanded{max-width:270px;padding-inline-end:14px}
.zad-cache-badge .zad-cache-icon{
  width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:#6B5741;font-size:.72rem;font-weight:700;color:#fff;
  transition:background-color .3s ease;
  cursor:pointer;
}
.zad-cache-badge.is-success .zad-cache-icon{background:#5F8A2E}
.zad-cache-badge.is-fail .zad-cache-icon{background:#9a4a2a}

.zad-check-badge{
  position:absolute;bottom:8px;right:8px;width:22px;height:22px;border-radius:50%;
  background:#5F8A2E;border:2px solid #F1E8D6;box-shadow:0 2px 5px rgba(0,0,0,.3);
  z-index:5;
}
.zad-check-badge::after{
  content:"";position:absolute;top:45%;left:50%;width:9px;height:5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:translate(-50%,-60%) rotate(-45deg);
}

/* ---------- زر تثبيت الموقع كله كتطبيق. الحاسوب بنفس هوية صندوق البحث
   وزر "كيف يعمل" تماما (لوح خشبي فاتح، نفس المقاس والزوايا)، أسفل يسارا
   تحديدا (يقابل زر العودة للأعلى أسفل يمينا). الهاتف زر خشب داكن ضيق
   طويل بنفس مقاس زر العودة للأعلى تماما، أسفل يمينا ---------- */
.raien-install-btn{
  position:fixed;bottom:22px;z-index:58;cursor:pointer;
  font-family:'Amiri',serif;font-weight:700;
  transition:transform .12s ease, filter .2s ease;
}
.raien-install-btn:active{transform:scale(.96)}
@media (orientation:portrait) and (min-width:1025px), (orientation:landscape) and (min-width:768px) and (min-height:501px){
  .raien-install-btn{
    left:clamp(20px,4vw,40px);width:250px;max-width:calc(100vw - 40px);
    display:flex;align-items:center;padding:5px 15px;
    background-image:url('./raien-wood-light.webp');background-size:150px 150px;background-repeat:repeat;
    border-radius:22px;border:1px solid #8a6a3d;
    box-shadow:0 4px 15px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.2);
    color:#3b2712;font-size:1.05rem;text-shadow:none;
  }
  .raien-install-btn:hover{filter:none;background-color:rgba(255,255,255,.08)}
}
/* ---------- تصحيح: على حاسوب ضيق (كالآيباد بالوضع العرضي)، لا هامش
   خارج المحتوى يكفي لهذه العناصر العائمة الثلاثة، فتتراكب مع صفحات
   الأقسام كافة (لا الرئيسية وحدها). عند هذا المدى تحديدا فقط، نخفي
   سهم العودة للأعلى وصندوق الشرح، ونحوّل زر التثبيت لشكله المضغوط
   نفسه المستخدم في الهاتف. ---------- */
@media (min-width:768px) and (max-width:1228px) and (orientation:landscape){
  .d-back-top{display:none !important}
  .d-howworks-box{
    width:46px !important;max-width:46px !important;min-height:46px !important;
    border-radius:50% !important;padding:0 !important;overflow:visible !important;
  }
  .d-howworks-btn{
    width:46px !important;height:46px !important;padding:0 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    font-size:0 !important;position:relative !important;
  }
  .d-howworks-btn::after{
    content:"؟" !important;font-size:1.5rem !important;font-weight:700 !important;
    color:#3b2712 !important;font-family:'Amiri',serif !important;
  }
  .d-howworks-panel{
    position:absolute !important;top:52px !important;left:0 !important;
    width:min(280px,85vw) !important;max-height:0 !important;
    border:0 !important;box-shadow:none !important;-webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;overflow:hidden !important;
    background-image:url('./raien-wood-light.webp') !important;background-size:150px 150px !important;background-repeat:repeat !important;
    border-radius:14px !important;
  }
  .d-howworks-panel .zad-hw-body{padding:0 !important;margin:0 !important;height:0 !important;overflow:hidden !important}
  .d-howworks-panel.is-open{
    max-height:60vh !important;overflow-y:auto !important;
    border:1px solid #8a6a3d !important;box-shadow:0 4px 15px rgba(0,0,0,.5) !important;
  }
  .d-howworks-panel.is-open .zad-hw-body{padding:12px 15px !important;margin:0 !important;height:auto !important;overflow:visible !important}
  .raien-install-btn{
    left:auto !important;right:14px !important;
    width:74px !important;min-height:60px !important;
    text-align:center !important;white-space:normal !important;line-height:1.25 !important;
    font-size:.78rem !important;color:#fff !important;
    background-image:url('./raien-wood-dark.webp') !important;background-size:140px 140px !important;background-repeat:repeat !important;
    border:1px solid #fff !important;border-radius:9px !important;padding:10px 8px !important;
    text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
    box-shadow:0 6px 16px rgba(20,14,8,.35) !important;
  }
}
@media (max-width:767px), (orientation:landscape) and (max-height:500px), (orientation:portrait) and (max-width:1024px){
  .raien-install-btn{
    right:14px;display:flex;align-items:center;justify-content:center;
    width:74px;min-height:60px;text-align:center;white-space:normal;line-height:1.25;
    font-size:.78rem;color:#fff;box-sizing:border-box;
    background-image:url('./raien-wood-dark.webp');background-size:140px 140px;background-repeat:repeat;
    border:1px solid #fff;border-radius:9px;padding:10px 8px;
    text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    box-shadow:0 6px 16px rgba(20,14,8,.35);
  }
}