/*
  ornament.css — زخارف «نجمة وطريق»: طابع ألعاب المدن (غروب، خط بوستر بإطار أسود، طريق المحطات، «المهمة نجحت»، شاشة تحميل بلوحات مايلة)
  + فن إسلامي (نجمة ثمانية/كيريه، قوس محراب، إطار هندسي، ذهبي وفيروزي على كحلي الليل).

  بيتحمّل بعد theme.css و style.css. كل الألوان من --vp-* (theme.css) إلا ألوان
  الأبطال الثابتة. النقوش SVG مرسومة بالكود كـ mask، فبتاخد لونها من الثيم
  وبتضل حادة بأي حجم.

  البُنى المتوقعة (للوكلاء S و M):

  ▸ بطل:   <section class="hero" data-img="home">
              <span class="hero-k">المهمة الحالية · VARA</span>
              <h2 class="hero-t">المرحلة 5: الصور</h2>
              <p class="hero-sub">…</p>
              <div class="hero-actions"><button class="btn">كمّل المهمة ←</button></div>
            </section>
            data-img: home | library | factory | mission | performance | products | sounds | pattern | tiles | tour | home-night
            (بلا data-img أو لو الصورة ناقصة = غروب مرسوم)
            .hero.compact = نسخة أقصر لرؤوس الصفحات.

  ▸ قوس:   <div class="arch">…</div>        ▸ إطار: <div class="frame-girih">…</div>
  ▸ ختم:   <span class="mission-passed">المهمة نجحت ✓</span>  (أو Ornament.passed(el, text))
  ▸ نجوم:  Ornament.stars(4)  ←  <span class="stars"><i class="on">★</i>…</span>

  ▸ المراحل:
      <ol class="mission-steps">
        <li class="done"><a href="#/mission/x?stage=1"><b>1</b><span>المنتج</span></a></li>
        <li class="now" aria-current="step"><a …><b>5</b><span>الصور</span></a></li>
        <li class="locked"><span class="ms"><b>6</b><span>التحريك</span></span></li>
      </ol>
      (أو data-state="done|now|locked" بدل الكلاس)

  ▸ الشريط السفلي:
      <div class="mission-bar">
        <button class="btn ghost mb-back">← رجوع</button>
        <div class="mb-reason">ناقص تختار صورة لـ 3 لقطات <button class="btn sm ghost mb-go">ودّيني</button></div>
        <button class="btn mb-next" disabled>التالي →</button>
      </div>

  ▸ الدليل:
      <details class="guide-panel" open>
        <summary>دليل المرحلة</summary>
        <dl class="gp-body"><dt>شو</dt><dd>…</dd><dt>ليش</dt><dd>…</dd><dt>مثال</dt><dd class="gp-example">…</dd></dl>
        <ul class="gp-tips"><li>…</li></ul>
      </details>
      (أو <div class="guide-panel" data-collapsed="true"><button class="gp-head">…</button><div class="gp-body">…</div></div>)

  ▸ مصطلح: <button type="button" class="term-q" data-tip="شرح بجملة" aria-label="شو يعني نمط؟">؟</button>
            أو فقاعة مستقلة <div class="term-pop" role="tooltip"><b>نمط</b> …</div>

  ▸ البحث (Ctrl+K):
      <div class="palette" role="dialog" aria-modal="true" aria-label="بحث سريع">
        <div class="palette-box">
          <div class="palette-search"><input class="palette-input" type="search" placeholder="…"></div>
          <ul class="palette-list" role="listbox">
            <li class="palette-group">الشاشات</li>
            <li class="palette-item" role="option" aria-selected="true"><span class="pi-icon">◆</span><span class="pi-t">الرئيسية</span><small class="pi-k">شاشة</small></li>
          </ul>
          <div class="palette-foot"><kbd>Enter</kbd> افتح · <kbd>Esc</kbd> سكّر</div>
        </div>
      </div>

  ▸ الجولة:
      <div class="tour-scrim"></div>
      <div class="tour-spot" style="top:…;left:…;width:…;height:…"></div>
      <div class="tour-card" style="top:…;left:…">   (أو .tour-card.center)
        <div class="tour-step">1 / 5</div><h4 class="tour-title">…</h4><p class="tour-text">…</p>
        <div class="tour-actions"><span class="tour-dots"><i class="on"></i><i></i>…</span> <button class="btn sm">التالي</button></div>
      </div>

  ▸ تحميل:  <div class="vp-loading">عم نجهّز…</div>     ▸ فاصل: <div class="orn-divider" role="separator"></div>
*/


/* IBM Plex Sans Arabic (OFL) — خط النص الأساسي: أوضح بكتير من خط النظام على الشاشات */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexSansArabic-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexSansArabic-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/IBMPlexSansArabic-500-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/IBMPlexSansArabic-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/IBMPlexSansArabic-600-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/IBMPlexSansArabic-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/IBMPlexSansArabic-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/IBMPlexSansArabic-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* خطوط محلية (OFL) من /fonts — بلا Google Fonts */
@font-face { font-family: "Lalezar"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/lalezar-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Lalezar"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/lalezar-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Reem Kufi"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/reem-kufi-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Reem Kufi"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/reem-kufi-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "Bangers"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/bangers-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ═════════ الرسومات (SVG بالكود) وفتحات الصور ═════════ */
:root {
  /* نقش الكيريه: نجمة ثمانية + نجمة رباعية + خطوط واصلة — بلاطة 80×80 */
  --orn-girih: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M40 0L50 30L80 40L50 50L40 80L30 50L0 40L30 30Z'/%3E%3Crect x='22' y='22' width='36' height='36'/%3E%3Crect x='22' y='22' width='36' height='36' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3Cpath d='M0 0L22 22M80 0L58 22M0 80L22 58M80 80L58 58'/%3E%3C/g%3E%3C/svg%3E");
  /* خاتم (نجمة ثمانية مصمتة) */
  --orn-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L15.22 4.22H19.78V8.78L23 12L19.78 15.22V19.78H15.22L12 23L8.78 19.78H4.22V15.22L1 12L4.22 8.78V4.22H8.78Z'/%3E%3C/svg%3E");
  /* أفق مدينة شرقية: مآذن وقباب وبوابة */
  --orn-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='90' viewBox='0 0 400 90'%3E%3Cpath d='M0 78H400V90H0Z M20 78V18L24 6L28 18V78Z M18 34H30V37H18Z M50 78V55H130V78Z M58 55Q58 25 90 20Q122 25 122 55Z M89 21V9H91V21Z M135 78V60H170V78Z M175 78V50H200V78Z M210 78V28L213 16L216 28V78Z M208 40H218V43H208Z M225 78V62H275V78Z M230 62Q230 42 250 39Q270 42 270 62Z M280 78V56H320V78Z M325 78V64H345V78Z M350 78V52H395V78Z M372 52V22L375 10L378 22V52Z M370 32H380V35H370Z'/%3E%3C/svg%3E");
  /* نجوم السماء الصغيرة */
  --orn-sky-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140'%3E%3Cg fill='white'%3E%3Ccircle cx='14' cy='18' r='1.1'/%3E%3Ccircle cx='60' cy='42' r='.7' opacity='.7'/%3E%3Ccircle cx='98' cy='12' r='1.3'/%3E%3Ccircle cx='140' cy='36' r='.8' opacity='.6'/%3E%3Ccircle cx='188' cy='20' r='1'/%3E%3Ccircle cx='34' cy='76' r='.6' opacity='.5'/%3E%3Ccircle cx='120' cy='70' r='.9' opacity='.8'/%3E%3Ccircle cx='206' cy='64' r='.6' opacity='.6'/%3E%3Ccircle cx='170' cy='96' r='.7' opacity='.4'/%3E%3Ccircle cx='78' cy='104' r='.6' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  --orn-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E");
  --orn-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");

  /* فتحات الصور الحقيقية (img/theme/ — الأسماء بـ README.md، والحقوق بـ credits.json و CREDITS.md هناك).
     لو الصورة مش موجودة، الطبقة بتفشل بصمت وبيبيّن الغروب المرسوم تحتها. */
  --img-hero-home:   url("/img/theme/hero-home.webp");
  --img-library:     url("/img/theme/library.webp");
  --img-factory:     url("/img/theme/factory.webp");
  --img-mission:     url("/img/theme/mission.webp");
  --img-performance: url("/img/theme/performance.webp");
  --img-home-night:  url("/img/theme/home-night.webp");
  --img-hero-day:    url("/img/theme/hero-day.webp");
  --img-products:    url("/img/theme/products.webp");
  --img-sounds:      url("/img/theme/sounds.webp");
  --img-pattern:     url("/img/theme/pattern.webp");
  --img-tiles:       url("/img/theme/tiles.webp");
  --img-tour:        url("/img/theme/tour.webp");
  --img-petra-night: url("/img/theme/petra-night.webp");

  /* طبقة غروب خفيفة فوق الصور عشان تضل من نفس العالم (برتقالي ← وردي ← كحلي الليل) */
  --hero-tint: linear-gradient(180deg, rgb(242 140 56 / 0.24) 0%, rgb(224 69 123 / 0.16) 45%, rgb(5 15 31 / 0.55) 100%);
  --orn-glow: radial-gradient(60rem 26rem at 12% -8%, rgb(224 69 123 / 0.1), transparent 62%),
              radial-gradient(48rem 26rem at 100% 108%, rgb(54 181 204 / 0.1), transparent 60%),
              radial-gradient(40rem 22rem at 50% -20%, rgb(227 176 75 / 0.07), transparent 60%);
}
[data-theme="day"], [data-theme="light"], [data-theme="calm"] {
  --hero-tint: linear-gradient(180deg, rgb(242 161 90 / 0.12) 0%, rgb(224 106 142 / 0.08) 45%, rgb(11 27 51 / 0.45) 100%);
  --orn-glow: radial-gradient(60rem 26rem at 12% -8%, rgb(242 161 90 / 0.12), transparent 62%),
              radial-gradient(48rem 26rem at 100% 108%, rgb(14 111 132 / 0.07), transparent 60%);
}

/* «ساحل النيون»: صور الصفحات من img/theme/neon/ (صور حقيقية، الحقوق بـ CREDITS.md وcredits.json) وغروب نيون فوقها */
[data-theme="neon"] {
  --img-hero-home:   url("/img/theme/neon/hero-home.webp");
  --img-library:     url("/img/theme/neon/library.webp");
  --img-factory:     url("/img/theme/neon/factory.webp");
  --img-mission:     url("/img/theme/neon/mission.webp");
  --img-performance: url("/img/theme/neon/performance.webp");
  --img-home-night:  url("/img/theme/neon/home-night.webp");
  --img-hero-day:    url("/img/theme/neon/hero-day.webp");
  --img-products:    url("/img/theme/neon/products.webp");
  --img-sounds:      url("/img/theme/neon/sounds.webp");
  --img-pattern:     url("/img/theme/neon/pattern.webp");
  --img-tiles:       url("/img/theme/neon/tiles.webp");
  --img-tour:        url("/img/theme/neon/tour.webp");
  --img-petra-night: url("/img/theme/neon/petra-night.webp");
  --hero-tint: linear-gradient(180deg, rgb(255 79 163 / 0.22) 0%, rgb(124 58 237 / 0.26) 52%, rgb(10 5 36 / 0.55) 100%);
  --orn-glow: radial-gradient(60rem 26rem at 12% -8%, rgb(255 79 163 / 0.16), transparent 62%),
              radial-gradient(48rem 26rem at 100% 108%, rgb(0 229 255 / 0.12), transparent 60%);
}

/* ═════════ خلفية الصفحة: نقش الكيريه الخفيف + توهّج الأفق ═════════ */
body::before,
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
body::before {
  background: var(--orn-glow);
}
body::after {
  background-color: var(--vp-orn);
  -webkit-mask: var(--orn-girih) 0 0 / 80px 80px repeat;
          mask: var(--orn-girih) 0 0 / 80px 80px repeat;
  opacity: var(--vp-orn-alpha);
}
.orn-pattern { position: relative; isolation: isolate; }
.orn-pattern::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-color: var(--vp-orn);
  -webkit-mask: var(--orn-girih) 0 0 / 64px 64px repeat;
          mask: var(--orn-girih) 0 0 / 64px 64px repeat;
  opacity: calc(var(--vp-orn-alpha) * 1.2);
}

/* خط الغروب تحت الترويسة */
zk-app-shell > [slot="header"]::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: var(--vp-sunset-line); opacity: 0.75; pointer-events: none;
}

/* نجمة صغيرة قبل عنوان كل صفحة */
.page-head h2::before {
  content: ""; display: inline-block; inline-size: 0.62em; block-size: 0.62em;
  margin-inline-end: 0.45em; vertical-align: 0.04em;
  background-color: var(--vp-brand);
  -webkit-mask: var(--orn-star) center / contain no-repeat;
          mask: var(--orn-star) center / contain no-repeat;
}

/* حالات فاضية: خاتم خافت فوق النص */
.empty::before, .unavail::before {
  content: ""; display: block; inline-size: 2rem; block-size: 2rem; margin: 0 auto var(--vp-space-2);
  background-color: var(--vp-orn); opacity: 0.45;
  -webkit-mask: var(--orn-star) center / contain no-repeat;
          mask: var(--orn-star) center / contain no-repeat;
}

/* فاصل زخرفي */
.orn-divider {
  position: relative; block-size: 16px; margin: var(--vp-space-4) 0;
  background: linear-gradient(90deg, transparent, var(--vp-hairline) 25%, var(--vp-hairline) 75%, transparent) center / 100% 1px no-repeat;
}
.orn-divider::after {
  content: ""; position: absolute; left: 50%; top: 0; inline-size: 16px; block-size: 16px; transform: translateX(-50%);
  background-color: var(--vp-orn);
  -webkit-mask: var(--orn-star) center / contain no-repeat;
          mask: var(--orn-star) center / contain no-repeat;
}

/* ═════════ البطل: سماء غروب + أفق مدينة + خط بوستر ═════════ */
.hero {
  --hero-img: none;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--vp-space-2);
  min-block-size: 11.5rem; padding: var(--vp-space-5); margin-bottom: var(--vp-space-4);
  border-radius: var(--vp-radius-lg); color: var(--vp-on-hero);
  background-color: var(--vp-sunset-3);
  background-image: var(--orn-sky-stars), var(--vp-hero-shade), var(--hero-tint), var(--hero-img), var(--vp-sunset);
  background-size: 220px 140px, 100% 100%, 100% 100%, cover, 100% 100%;
  background-position: top center, center, center, center, center;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  box-shadow: var(--vp-shadow-2), inset 0 0 0 1px rgb(255 255 255 / 0.14);
}
.hero[data-img="home"]        { --hero-img: var(--img-hero-home); }
.hero[data-img="library"]     { --hero-img: var(--img-library); }
.hero[data-img="factory"]     { --hero-img: var(--img-factory); }
.hero[data-img="mission"]     { --hero-img: var(--img-mission); }
.hero[data-img="performance"] { --hero-img: var(--img-performance); }
.hero[data-img="home-night"]  { --hero-img: var(--img-home-night); }
.hero[data-img="products"]    { --hero-img: var(--img-products); }
.hero[data-img="sounds"]      { --hero-img: var(--img-sounds); }
.hero[data-img="pattern"]     { --hero-img: var(--img-pattern); }
.hero[data-img="tiles"]       { --hero-img: var(--img-tiles); }
.hero[data-img="tour"]        { --hero-img: var(--img-tour); }
/* النهار: الرئيسية بصورة غروب نهارية */
[data-theme="day"] .hero[data-img="home"], [data-theme="light"] .hero[data-img="home"], [data-theme="calm"] .hero[data-img="home"] { --hero-img: var(--img-hero-day); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--vp-on-hero);
  -webkit-mask: var(--orn-girih) 0 0 / 72px 72px repeat;
          mask: var(--orn-girih) 0 0 / 72px 72px repeat;
  opacity: 0.1;
}
.hero::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; block-size: 64px; z-index: -1; pointer-events: none;
  background-color: var(--vp-night-ink);
  -webkit-mask: var(--orn-skyline) bottom center / auto 64px repeat-x;
          mask: var(--orn-skyline) bottom center / auto 64px repeat-x;
  opacity: 0.55;
}
.hero-k {
  display: inline-flex; align-items: center; gap: 6px; inline-size: fit-content; max-inline-size: 100%;
  padding: 2px 12px; border-radius: var(--vp-radius-pill);
  background: rgb(5 15 31 / 0.4); border: 1px solid rgb(255 255 255 / 0.25);
  font-size: var(--vp-fs-sm); font-weight: 600; overflow-wrap: anywhere;
}
.hero-t, .hero > h1, .hero > h2 {
  margin: 2px 0 var(--vp-space-1);
  font-family: var(--vp-font-display); font-weight: 400; font-size: var(--vp-fs-hero); line-height: 1.12;
  color: var(--vp-on-hero); text-shadow: var(--vp-text-shadow-hero); overflow-wrap: anywhere;
}
.hero > h2::before { display: none; }
.hero-sub, .hero > p { margin: 0; max-inline-size: 60ch; color: rgb(255 255 255 / 0.92); text-shadow: 0 1px 2px rgb(0 0 0 / 0.5); }
.hero-actions { display: flex; gap: var(--vp-space-2); flex-wrap: wrap; margin-top: var(--vp-space-2); }
.hero .btn.ghost { color: var(--vp-on-hero); border-color: rgb(255 255 255 / 0.6); background: rgb(5 15 31 / 0.25); }
.hero .btn.ghost:hover { background: rgb(5 15 31 / 0.45); color: var(--vp-on-hero); border-color: var(--vp-on-hero); }
.hero.compact { min-block-size: 7.5rem; padding: var(--vp-space-4); }
.hero.compact .hero-t, .hero.compact > h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem); }
.hero.compact::after { block-size: 44px; -webkit-mask-size: auto 44px; mask-size: auto 44px; }

/* رأس صفحة رئيسية كبطل مصغّر: <div class="page-head hero compact" data-img="library"> (العنوان والجملة يمين، الأزرار يسار) */
.page-head.hero { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
.page-head.hero > div:first-child { min-width: 0; flex: 1 1 18rem; }
.page-head.hero h2 {
  margin: 2px 0 var(--vp-space-1);
  font-family: var(--vp-font-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem); line-height: 1.12;
  color: var(--vp-on-hero); text-shadow: var(--vp-text-shadow-hero); overflow-wrap: anywhere;
}
.page-head.hero h2::before { display: none; }
.page-head.hero .hero-actions { margin-top: 0; }

/* فتحة صورة عامة (بطاقة/خلفية) بنفس آلية البديل */
.img-slot {
  --slot-img: none;
  background-color: var(--vp-sunset-3);
  background-image: var(--hero-tint), var(--slot-img), var(--vp-sunset);
  background-size: 100% 100%, cover, 100% 100%;
  background-position: center; background-repeat: no-repeat;
}
.img-slot[data-img="home"]        { --slot-img: var(--img-hero-home); }
.img-slot[data-img="library"]     { --slot-img: var(--img-library); }
.img-slot[data-img="factory"]     { --slot-img: var(--img-factory); }
.img-slot[data-img="mission"]     { --slot-img: var(--img-mission); }
.img-slot[data-img="performance"] { --slot-img: var(--img-performance); }
.img-slot[data-img="products"]    { --slot-img: var(--img-products); }
.img-slot[data-img="sounds"]      { --slot-img: var(--img-sounds); }
.img-slot[data-img="pattern"]     { --slot-img: var(--img-pattern); }
.img-slot[data-img="tiles"]       { --slot-img: var(--img-tiles); }
.img-slot[data-img="tour"]        { --slot-img: var(--img-tour); }

/* ═════════ قوس المحراب ═════════ */
.arch {
  position: relative; isolation: isolate; min-width: 0;
  background: color-mix(in srgb, var(--vp-surface) 94%, transparent);
  border: 1px solid var(--vp-hairline);
  border-radius: 50% 50% var(--vp-radius-lg) var(--vp-radius-lg) / var(--vp-arch-h) var(--vp-arch-h) var(--vp-radius-lg) var(--vp-radius-lg);
  padding: calc(var(--vp-arch-h) * 0.62) var(--vp-space-4) var(--vp-space-4);
  text-align: center; box-shadow: var(--vp-shadow-1);
}
.arch::before {
  content: ""; position: absolute; inset: 6px; z-index: -1; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--vp-orn) 30%, transparent);
  border-radius: 50% 50% calc(var(--vp-radius-lg) - 4px) calc(var(--vp-radius-lg) - 4px) / calc(var(--vp-arch-h) - 6px) calc(var(--vp-arch-h) - 6px) calc(var(--vp-radius-lg) - 4px) calc(var(--vp-radius-lg) - 4px);
}
.arch::after {
  content: ""; position: absolute; left: 50%; top: 12px; inline-size: 16px; block-size: 16px; transform: translateX(-50%);
  background-color: var(--vp-brand);
  -webkit-mask: var(--orn-star) center / contain no-repeat;
          mask: var(--orn-star) center / contain no-repeat;
}
.arch > h3, .arch > h4 { margin-top: 0; }
.arch.start { text-align: start; }
a.arch, button.arch { color: var(--vp-text); cursor: pointer; font: inherit; transition: transform var(--vp-ease), box-shadow var(--vp-ease), border-color var(--vp-ease); }
a.arch:hover, button.arch:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--vp-brand); box-shadow: var(--vp-glow); }

/* ═════════ الإطار الهندسي ═════════ */
.frame-girih {
  position: relative; min-width: 0;
  padding: var(--vp-space-5);
  background: var(--vp-surface);
  border: 1px solid color-mix(in srgb, var(--vp-orn) 55%, transparent);
  border-radius: var(--vp-radius-sm);
  box-shadow: inset 0 0 0 5px var(--vp-surface), inset 0 0 0 6px color-mix(in srgb, var(--vp-orn) 30%, transparent), var(--vp-shadow-1);
}
.frame-girih::before {
  content: ""; position: absolute; inset: -8px; pointer-events: none;
  background-color: var(--vp-orn);
  -webkit-mask:
    var(--orn-star) top left / 16px 16px no-repeat, var(--orn-star) top right / 16px 16px no-repeat,
    var(--orn-star) bottom left / 16px 16px no-repeat, var(--orn-star) bottom right / 16px 16px no-repeat;
          mask:
    var(--orn-star) top left / 16px 16px no-repeat, var(--orn-star) top right / 16px 16px no-repeat,
    var(--orn-star) bottom left / 16px 16px no-repeat, var(--orn-star) bottom right / 16px 16px no-repeat;
}
.frame-girih::after {
  content: ""; position: absolute; inset-inline: 22px; top: 0; block-size: 6px; pointer-events: none;
  background-color: var(--vp-orn); opacity: 0.35;
  -webkit-mask: var(--orn-girih) 0 -37px / 40px 40px repeat-x;
          mask: var(--orn-girih) 0 -37px / 40px 40px repeat-x;
}

/* ═════════ «المهمة نجحت ✓» ═════════ */
.mission-passed {
  display: inline-flex; align-items: center; gap: 0.35em; inline-size: fit-content; max-inline-size: 100%;
  margin-bottom: var(--vp-space-3);
  padding: 0.18em 0.75em 0.28em;
  font-family: var(--vp-font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.15;
  color: var(--vp-turq); text-shadow: 2px 2px 0 #000000;
  background: rgb(5 15 31 / 0.85);
  border: 2px solid currentColor; border-radius: var(--vp-radius-sm);
  box-shadow: 0 0 0 3px rgb(5 15 31 / 0.45), 0 0 26px rgb(54 181 204 / 0.35);
  transform: rotate(-3deg);
  overflow-wrap: anywhere;
}
.hero > .mission-passed, .mission-passed.corner {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; margin: 0;
}
.mission-passed.anim { animation: vp-stamp 620ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }

/* لافتة كاملة بنص الشاشة (Ornament.passed() بلا عنصر): شريط داكن بعنوان بوستر ذهبي وأشعة ورا */
.mission-passed-screen {
  position: fixed; inset: 0; z-index: calc(var(--vp-z-palette) + 2);
  display: grid; place-items: center; pointer-events: none; overflow: hidden;
}
.mission-passed-screen::before {
  content: ""; position: absolute; inset: -50%;
  background: repeating-conic-gradient(from 0deg, rgb(227 176 75 / 0.16) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle at center, #000000 0 16%, transparent 52%);
          mask: radial-gradient(circle at center, #000000 0 16%, transparent 52%);
  animation: mps-rays 2600ms ease both;
}
.mps-band {
  position: relative; inline-size: 100%; padding: 1.5rem var(--vp-space-4) 1.3rem; text-align: center;
  background: linear-gradient(90deg, transparent, rgb(3 10 22 / 0.9) 16%, rgb(3 10 22 / 0.9) 84%, transparent);
  border-block: 1px solid rgb(227 176 75 / 0.45);
  animation: vp-band 2600ms ease both;
}
.mps-title {
  font-family: var(--vp-font-display); font-size: clamp(2.4rem, 1.4rem + 4.8vw, 4.6rem); line-height: 1.1;
  color: var(--vp-gold-light); text-shadow: var(--vp-poster-outline); overflow-wrap: anywhere;
  animation: vp-stamp-big 700ms cubic-bezier(0.2, 0.9, 0.25, 1.1) both;
}
.mps-sub { margin-top: 8px; color: #ffffff; font-family: var(--vp-font-heading); font-size: var(--vp-fs-lg); text-shadow: 0 2px 0 #000000; }
@keyframes mps-rays {
  0%   { opacity: 0; transform: rotate(-8deg) scale(0.9); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(8deg) scale(1.05); }
}

/* ═════════ نجوم الجودة ═════════ */
.stars {
  display: inline-flex; align-items: center; gap: 1px; direction: rtl;
  font-size: 1.1em; line-height: 1; letter-spacing: 0; color: var(--vp-border-strong);
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", var(--vp-font-sans);
}
.stars i { font-style: normal; }
.stars i.on {
  color: var(--vp-gold); -webkit-text-stroke: 0.5px var(--vp-cta-edge);
  text-shadow: 0 0 8px rgb(227 176 75 / 0.5);
}
.stars i.half {
  background: linear-gradient(to left, var(--vp-gold) 50%, var(--vp-border-strong) 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="day"] .stars i.on, [data-theme="light"] .stars i.on, [data-theme="calm"] .stars i.on { color: #eaa910; text-shadow: none; }
.stars.lg { font-size: 1.6em; gap: 3px; }

/* ═════════ طريق المحطات (شريط المراحل): نجوم على طريق متل خط الـ GPS ═════════
   نفس البنية من mission.js: <li class="done|now|locked"><a><img class="ms-ico"><i>N</i><span>الاسم</span></a></li>
   (أو <b>N</b> بدل <i>، أو <span aria-disabled> بدل <a> للمرحلة اللي لسا ما بتنفتح).
   الطريق: كل خلية بترسم قطعتها لعند اللي بعدها (::after): ذهبي للي خلص، متقطّع باهت للجاي.
   النجمة: ورا الأيقونة (a::before)، والرقم شارة صغيرة بزاويتها. */
.mission-steps {
  --ms-node: 3.1rem;
  --ms-road: 10px;
  list-style: none; margin: 0 0 var(--vp-space-4); padding: var(--vp-space-2) 0 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0;
}
.mission-steps > * {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 4px; text-align: center; background: none; border: 0;
  color: var(--vp-text-muted); font-size: var(--vp-fs-xs); font-weight: 600; line-height: 1.3;
}
.mission-steps > *:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: calc(var(--vp-space-2) * 0 + var(--ms-node) / 2 - var(--ms-road) / 2);
  inset-inline-start: 50%; inline-size: 100%; block-size: var(--ms-road);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--vp-text-faint) 60%, transparent) 0 9px, transparent 9px 18px) center / 100% 2px no-repeat,
    color-mix(in srgb, var(--vp-surface-2) 85%, var(--vp-black));
  border-block: 1px solid var(--vp-border);
}
.mission-steps > .done:not(:last-child)::after, .mission-steps > [data-state="done"]:not(:last-child)::after {
  background:
    repeating-linear-gradient(90deg, var(--vp-gold-light) 0 12px, transparent 12px 18px) center / 100% 2px no-repeat,
    color-mix(in srgb, var(--vp-gold) 28%, var(--vp-surface-2));
  border-color: color-mix(in srgb, var(--vp-gold) 55%, transparent);
  box-shadow: 0 0 12px rgb(227 176 75 / 0.22);
}
.mission-steps > * > a, .mission-steps > * > button, .mission-steps > * > [aria-disabled], .mission-steps .ms {
  position: relative; z-index: 1; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-inline-size: 100%;
  color: inherit; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.mission-steps > * > [aria-disabled] { cursor: not-allowed; }
/* النجمة ورا الأيقونة + إطارها (نجمة أكبر شوي) */
.mission-steps > * > a::before, .mission-steps > * > button::before, .mission-steps > * > [aria-disabled]::before, .mission-steps .ms::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 50%;
  inline-size: var(--ms-node); block-size: var(--ms-node); transform: translateX(-50%);
  background-color: var(--vp-surface-3);
  -webkit-mask: var(--orn-star) center / contain no-repeat; mask: var(--orn-star) center / contain no-repeat;
  filter: drop-shadow(0 0 0 var(--vp-border-strong));
  transition: transform var(--vp-ease), background-color var(--vp-ease);
}
.mission-steps > * > a::after, .mission-steps > * > button::after {
  content: ""; position: absolute; inset: -4px -6px; border-radius: var(--vp-radius-sm);    /* الخلية كلها قابلة للكبس */
}
.mission-steps > * > a:focus-visible, .mission-steps > * > button:focus-visible { box-shadow: none; outline: none; }
.mission-steps > * > a:focus-visible::after, .mission-steps > * > button:focus-visible::after { box-shadow: var(--vp-focus); }
.mission-steps .ms-ico {
  display: block; inline-size: var(--ms-node); block-size: var(--ms-node); padding: 9px; margin: 0;
  object-fit: contain; transition: transform var(--vp-ease), filter var(--vp-ease);
}
.mission-steps > *:hover .ms-ico { transform: scale(1.06); }
/* الرقم: شارة صغيرة بزاوية النجمة */
.mission-steps i, .mission-steps b, .mission-steps .ms-n {
  position: absolute; top: calc(var(--ms-node) - 17px); left: calc(50% + var(--ms-node) / 2 - 15px);
  display: grid; place-items: center; min-inline-size: 18px; block-size: 18px; padding: 0 4px;
  border-radius: var(--vp-radius-pill); background: var(--vp-bg); border: 1px solid var(--vp-border-strong);
  font-family: var(--vp-font-display); font-style: normal; font-weight: 400; font-size: 0.78rem; line-height: 1;
  color: var(--vp-text-muted);
}
.mission-steps span:not(.ms):not([aria-disabled]), .mission-steps .ms-t {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 100%; margin-top: 2px;
}

/* خلصت: نجمة فيروزية + علامة صح */
.mission-steps > .done, .mission-steps > [data-state="done"] { color: var(--vp-text); }
.mission-steps > .done > *::before, .mission-steps > [data-state="done"] > *::before { background-color: var(--vp-accent); }
.mission-steps > .done i, .mission-steps > .done b, .mission-steps > [data-state="done"] i, .mission-steps > [data-state="done"] b {
  color: var(--vp-on-cta); background: var(--vp-ok); border-color: var(--vp-ok);
}
/* هلّق: نجمة ذهبية أكبر بتوهّج (ونبض خفيف لو الحركة مسموحة) */
.mission-steps > .now, .mission-steps > [data-state="now"], .mission-steps > [aria-current="step"] { color: var(--vp-heading); font-weight: 700; }
.mission-steps > .now > *::before, .mission-steps > [data-state="now"] > *::before {
  background-color: var(--vp-gold); transform: translateX(-50%) scale(1.16);
  filter: drop-shadow(0 0 10px rgb(227 176 75 / 0.55));
}
.mission-steps > .now .ms-ico, .mission-steps > [data-state="now"] .ms-ico { transform: scale(1.1); }
.mission-steps > .now i, .mission-steps > .now b, .mission-steps > [data-state="now"] i, .mission-steps > [data-state="now"] b {
  color: var(--vp-on-cta); background: var(--vp-gold-light); border-color: var(--vp-cta-edge);
}
/* مقفولة: نجمة باهتة + قفل */
.mission-steps > .locked, .mission-steps > [data-state="locked"] { color: var(--vp-text-faint); }
.mission-steps > .locked > *::before, .mission-steps > [data-state="locked"] > *::before { background-color: var(--vp-surface-2); }
.mission-steps > .locked > a, .mission-steps > .locked > button,
.mission-steps > [data-state="locked"] > a, .mission-steps > [data-state="locked"] > button { cursor: not-allowed; }
.mission-steps > .done .ms-ico, .mission-steps > [data-state="done"] .ms-ico { filter: saturate(0.85); }
.mission-steps > .locked .ms-ico, .mission-steps > [data-state="locked"] .ms-ico { filter: grayscale(1) opacity(0.45); }
.mission-steps > .locked::before, .mission-steps > [data-state="locked"]::before {
  content: ""; position: absolute; z-index: 2; top: -2px; left: calc(50% - var(--ms-node) / 2 - 2px);
  inline-size: 13px; block-size: 13px;
  background-color: var(--vp-text-faint);
  -webkit-mask: var(--orn-lock) center / contain no-repeat; mask: var(--orn-lock) center / contain no-repeat;
}

/* ═════════ الشريط السفلي للمهمة ═════════ */
.mission-bar {
  position: sticky; bottom: 0; z-index: var(--vp-z-topbar);
  display: flex; align-items: center; gap: var(--vp-space-3); flex-wrap: wrap;
  margin-top: var(--vp-space-5); padding: var(--vp-space-3) var(--vp-space-4);
  background: var(--vp-glass); border: 1px solid var(--vp-hairline); border-bottom: 0;
  border-radius: var(--vp-radius-lg) var(--vp-radius-lg) 0 0;
  box-shadow: 0 -10px 30px rgb(1 6 16 / 0.28);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.mission-bar::before {
  content: ""; position: absolute; inset-inline: 18px; top: -1px; block-size: 2px; border-radius: var(--vp-radius-pill);
  background: var(--vp-sunset-line); pointer-events: none;
}
.mission-bar .mb-reason {
  flex: 1 1 14rem; min-width: 0; display: flex; align-items: center; gap: var(--vp-space-2); flex-wrap: wrap;
  color: var(--vp-text-muted); font-size: var(--vp-fs-sm); overflow-wrap: anywhere;
}
.mission-bar .mb-reason:not(:empty)::before {
  content: ""; inline-size: 14px; block-size: 14px; flex: 0 0 auto;
  background-color: var(--vp-warn);
  -webkit-mask: var(--orn-lock) center / contain no-repeat;
          mask: var(--orn-lock) center / contain no-repeat;
}
.mission-bar .mb-reason.ok { color: var(--vp-ok); }
.mission-bar .mb-reason.ok::before {
  background-color: var(--vp-ok);
  -webkit-mask-image: var(--orn-check); mask-image: var(--orn-check);
}
.mission-bar .mb-next { margin-inline-start: auto; min-inline-size: 8rem; }

/* ═════════ لوحة «دليل المرحلة» ═════════ */
.guide-panel {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  margin-bottom: var(--vp-space-4); padding: var(--vp-space-3) var(--vp-space-4);
  border: 1px solid color-mix(in srgb, var(--vp-accent) 40%, var(--vp-border));
  border-inline-start: 3px solid var(--vp-accent);
  border-radius: var(--vp-radius-lg);
  background: linear-gradient(to left, color-mix(in srgb, var(--vp-accent) 9%, var(--vp-surface)), var(--vp-surface) 70%);
}
.guide-panel::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 9rem; z-index: -1; pointer-events: none;
  background-color: var(--vp-accent);
  -webkit-mask: var(--orn-girih) 0 0 / 56px 56px repeat;
          mask: var(--orn-girih) 0 0 / 56px 56px repeat;
  opacity: 0.1;
}
.guide-panel > summary, .guide-panel .gp-head {
  display: flex; align-items: center; gap: var(--vp-space-2); min-block-size: 2rem; inline-size: 100%;
  cursor: pointer; list-style: none; padding: 0; background: none; border: 0; text-align: start;
  font-family: var(--vp-font-heading); font-weight: 700; font-size: var(--vp-fs-md); color: var(--vp-heading);
}
.guide-panel > summary::-webkit-details-marker { display: none; }
.guide-panel > summary::before, .guide-panel .gp-head::before {
  content: ""; inline-size: 16px; block-size: 16px; flex: 0 0 auto;
  background-color: var(--vp-accent);
  -webkit-mask: var(--orn-star) center / contain no-repeat;
          mask: var(--orn-star) center / contain no-repeat;
}
.guide-panel > summary::after, .guide-panel .gp-head::after {
  content: "▾"; margin-inline-start: auto; color: var(--vp-text-muted); transition: transform var(--vp-ease);
}
.guide-panel:not([open]) > summary::after,
.guide-panel[data-collapsed="true"] .gp-head::after, .guide-panel.collapsed .gp-head::after { transform: rotate(90deg); }
.guide-panel[data-collapsed="true"] .gp-body, .guide-panel.collapsed .gp-body,
.guide-panel[data-collapsed="true"] .gp-tips, .guide-panel.collapsed .gp-tips { display: none; }
.guide-panel dl, .guide-panel .gp-body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--vp-space-2) var(--vp-space-3); align-items: baseline;
  margin: var(--vp-space-3) 0 0;
}
.guide-panel dl > div, .guide-panel .gp-row { display: contents; }
.guide-panel dt, .guide-panel .gp-k {
  inline-size: fit-content; padding: 1px 10px; border-radius: var(--vp-radius-pill);
  font-family: var(--vp-font-heading); font-weight: 700; font-size: var(--vp-fs-xs);
  color: var(--vp-accent); background: var(--vp-accent-soft);
}
.guide-panel dd, .guide-panel .gp-v { margin: 0; min-width: 0; color: var(--vp-text); font-size: var(--vp-fs-sm); overflow-wrap: anywhere; }
.guide-panel .gp-example, .guide-panel dd:last-of-type {
  padding: 4px 10px; border-inline-start: 2px solid var(--vp-brand); border-radius: var(--vp-radius-sm);
  background: color-mix(in srgb, var(--vp-brand-soft) 60%, transparent);
}
.guide-panel .gp-tips { margin: var(--vp-space-3) 0 0; padding-inline-start: 1.2rem; color: var(--vp-text-muted); font-size: var(--vp-fs-sm); }
.guide-panel .gp-tips li { margin-bottom: 3px; overflow-wrap: anywhere; }
.guide-panel .gp-tips li::marker { content: "◆  "; color: var(--vp-brand); font-size: 0.7em; }

/* ═════════ علامة «؟» جنب المصطلح ═════════ */
.term-q {
  position: relative; display: inline-grid; place-items: center; vertical-align: middle;
  inline-size: 1.2rem; block-size: 1.2rem; margin-inline: 3px; padding: 0;
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--vp-accent) 65%, transparent);
  background: var(--vp-accent-soft); color: var(--vp-accent);
  font: 700 11px/1 var(--vp-font-sans); cursor: help;
  transition: background-color var(--vp-ease), color var(--vp-ease);
}
.term-q::before { content: ""; position: absolute; inset: -10px; }   /* مساحة كبس أكبر */
.term-q:hover, .term-q:focus-visible, .term-q[aria-expanded="true"] { background: var(--vp-accent); color: var(--vp-bg); }
.term-q[data-tip]:hover::after, .term-q[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: var(--vp-z-toast); inline-size: max-content; max-inline-size: min(17rem, 70vw);
  padding: 8px 12px; border-radius: var(--vp-radius-md);
  background: var(--vp-surface-3); color: var(--vp-text); border: 1px solid var(--vp-hairline); box-shadow: var(--vp-shadow-2);
  font: 500 var(--vp-fs-sm)/1.6 var(--vp-font-sans); text-align: start; white-space: normal; pointer-events: none;
}
.term-pop {
  position: absolute; z-index: var(--vp-z-toast); inline-size: max-content; max-inline-size: min(20rem, calc(100vw - 24px));
  padding: var(--vp-space-2) var(--vp-space-3); border-radius: var(--vp-radius-md);
  background: var(--vp-surface-3); color: var(--vp-text);
  border: 1px solid var(--vp-hairline); border-inline-start: 3px solid var(--vp-accent); box-shadow: var(--vp-shadow-2);
  font-size: var(--vp-fs-sm); line-height: 1.6; overflow-wrap: anywhere;
}
.term-pop b { display: block; font-family: var(--vp-font-heading); color: var(--vp-heading); }

/* ═════════ البحث السريع (Ctrl+K) ═════════ */
.palette {
  position: fixed; inset: 0; z-index: var(--vp-z-palette);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh var(--vp-space-3) var(--vp-space-3);
  background: var(--vp-overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.palette[hidden] { display: none; }
.palette-box {
  inline-size: min(40rem, 100%); max-block-size: 72vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--vp-sunset-line) top / 100% 3px no-repeat, var(--vp-surface);
  border: 1px solid var(--vp-hairline); border-radius: var(--vp-radius-lg); box-shadow: var(--vp-shadow-2);
}
.palette-search { display: flex; align-items: center; gap: var(--vp-space-3); padding: var(--vp-space-3) var(--vp-space-4); border-bottom: 1px solid var(--vp-border); }
.palette-search::before {
  content: ""; inline-size: 18px; block-size: 18px; flex: 0 0 auto; background-color: var(--vp-brand);
  -webkit-mask: var(--orn-star) center / contain no-repeat;
          mask: var(--orn-star) center / contain no-repeat;
}
.palette-input, .palette-input:focus, .palette-input:hover:not(:disabled) {
  flex: 1 1 auto; min-width: 0; padding: 6px 0; border: 0; background: transparent; box-shadow: none;
  font-size: var(--vp-fs-lg); color: var(--vp-text);
}
.palette-list { list-style: none; margin: 0; padding: var(--vp-space-2); overflow-y: auto; }
.palette-group { padding: var(--vp-space-3) var(--vp-space-3) var(--vp-space-1); font-family: var(--vp-font-heading); font-size: var(--vp-fs-xs); color: var(--vp-text-faint); }
.palette-item {
  position: relative; display: flex; align-items: center; gap: var(--vp-space-3); min-block-size: var(--vp-tap);
  padding: 6px var(--vp-space-3); border-radius: var(--vp-radius-md); color: var(--vp-text); cursor: pointer;
}
.palette-item:hover { background: var(--vp-surface-3); }
.palette-item[aria-selected="true"], .palette-item.on { background: var(--vp-brand-soft); color: var(--vp-brand-text); }
.palette-item[aria-selected="true"]::before, .palette-item.on::before {
  content: ""; position: absolute; inset-block: 8px; inset-inline-start: 0; inline-size: 3px; border-radius: var(--vp-radius-pill); background: var(--vp-brand);
}
.palette-item .pi-icon { inline-size: 1.5rem; text-align: center; color: var(--vp-brand); flex: 0 0 auto; }
.palette-item .pi-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .pi-k, .palette-item small { color: var(--vp-text-faint); font-size: var(--vp-fs-xs); flex: 0 0 auto; }
.palette-empty { padding: var(--vp-space-5) var(--vp-space-4); text-align: center; color: var(--vp-text-muted); }
.palette-foot {
  display: flex; gap: var(--vp-space-2) var(--vp-space-3); flex-wrap: wrap; align-items: center;
  padding: var(--vp-space-2) var(--vp-space-4); border-top: 1px solid var(--vp-border);
  color: var(--vp-text-faint); font-size: var(--vp-fs-xs);
}
kbd {
  display: inline-block; padding: 1px 6px; min-inline-size: 1.4em; text-align: center;
  font-family: var(--vp-font-mono); font-size: 11px; line-height: 1.5; direction: ltr;
  color: var(--vp-text); background: var(--vp-surface-2);
  border: 1px solid var(--vp-border-strong); border-bottom-width: 2px; border-radius: 5px;
}

/* ═════════ جولة أول مرة ═════════ */
.tour-scrim { position: fixed; inset: 0; z-index: calc(var(--vp-z-palette) + 1); background: transparent; }
.tour-scrim.dim { background: var(--vp-overlay); }
.tour-spot {
  position: fixed; z-index: calc(var(--vp-z-palette) + 1); pointer-events: none;
  border-radius: var(--vp-radius-md);
  box-shadow: 0 0 0 3px var(--vp-gold), 0 0 0 9999px var(--vp-overlay);
  transition: top var(--vp-ease-slow), left var(--vp-ease-slow), width var(--vp-ease-slow), height var(--vp-ease-slow);
}
.tour-spot::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  box-shadow: 0 0 0 0 rgb(227 176 75 / 0.6);
  animation: vp-pulse 1.8s ease-out infinite;
}
.tour-card {
  position: fixed; z-index: calc(var(--vp-z-palette) + 2);
  inline-size: min(22rem, calc(100vw - 24px)); padding: var(--vp-space-4);
  background: var(--vp-sunset-line) top / 100% 3px no-repeat, var(--vp-surface);
  border: 1px solid var(--vp-hairline); border-radius: var(--vp-radius-lg); box-shadow: var(--vp-shadow-2);
  color: var(--vp-text);
}
.tour-card.center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour-step { font-size: var(--vp-fs-xs); font-weight: 700; color: var(--vp-brand-text); font-variant-numeric: tabular-nums; }
.tour-title { margin: 4px 0 6px; font-family: var(--vp-font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.2; color: var(--vp-display-ink); text-shadow: var(--vp-display-shadow); }
.tour-text { margin: 0; color: var(--vp-text); font-size: var(--vp-fs-sm); overflow-wrap: anywhere; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--vp-space-2); flex-wrap: wrap; margin-top: var(--vp-space-4); }
.tour-dots { display: inline-flex; gap: 5px; align-items: center; }
.tour-dots i { inline-size: 7px; block-size: 7px; border-radius: var(--vp-radius-pill); background: var(--vp-border-strong); transition: inline-size var(--vp-ease); }
.tour-dots i.on { inline-size: 20px; background: var(--vp-brand); }

/* ═════════ تحميل وانتقال الصفحات («شاشة تحميل») ═════════ */
.vp-loading {
  display: flex; flex-direction: column; align-items: center; gap: var(--vp-space-2);
  padding: var(--vp-space-6) var(--vp-space-4); color: var(--vp-text-muted); text-align: center;
}
.vp-loading::before {
  content: ""; inline-size: 56px; block-size: 56px;
  background: url("/img/art/loading.png") center / contain no-repeat;
  animation: vp-spin 2.4s linear infinite;
}
.vp-loadbar {
  position: fixed; top: 0; inset-inline: 0; block-size: 3px; z-index: calc(var(--vp-z-palette) + 3);
  background: var(--vp-sunset-line); transform-origin: right; pointer-events: none;
  animation: vp-load 900ms cubic-bezier(0.3, 0.7, 0.2, 1) both;
}

@keyframes vp-view-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}
@keyframes vp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vp-stamp {
  0%   { opacity: 0; transform: rotate(-3deg) scale(2.3); }
  55%  { opacity: 1; transform: rotate(-3deg) scale(0.9); }
  100% { opacity: 1; transform: rotate(-3deg) scale(1); }
}
@keyframes vp-stamp-big {
  0%   { opacity: 0; transform: scale(1.8); letter-spacing: 0; }
  60%  { opacity: 1; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes vp-band {
  0%   { opacity: 0; transform: scaleY(0.2); }
  12%  { opacity: 1; transform: scaleY(1); }
  82%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}
@keyframes vp-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(227 176 75 / 0.6); }
  100% { box-shadow: 0 0 0 16px rgb(227 176 75 / 0); }
}
@keyframes vp-spin { to { transform: rotate(360deg); } }
@keyframes ms-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgb(227 176 75 / 0.45)); }
  50%      { filter: drop-shadow(0 0 16px rgb(227 176 75 / 0.85)); }
}
@keyframes vp-load {
  0%   { transform: scaleX(0); opacity: 1; }
  80%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .view.active { animation: vp-view-in 340ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .tabpane.on, .stepview.on { animation: vp-fade-in 220ms ease both; }
  .mission-steps > .now > *::before, .mission-steps > [data-state="now"] > *::before { animation: ms-glow 2.6s ease-in-out infinite; }
}

/* ═════════ شاشات ضيقة (360px بلا تمرير أفقي) ═════════ */
@media (max-width: 640px) {
  .hero { min-block-size: 9.5rem; padding: var(--vp-space-4); }
  .hero::after { block-size: 48px; -webkit-mask-size: auto 48px; mask-size: auto 48px; }
  .hero > .mission-passed, .mission-passed.corner { top: 10px; inset-inline-end: 10px; font-size: 1.1rem; }

  /* طريق المحطات: نجوم أصغر بلا أسماء (اسم المرحلة الحالية بالعنوان تحت) */
  .mission-steps { --ms-node: 2.35rem; --ms-road: 7px; }
  .mission-steps span:not(.ms):not([aria-disabled]), .mission-steps .ms-t { display: none; }
  .mission-steps .ms-ico { padding: 6px; }
  .mission-steps i, .mission-steps b, .mission-steps .ms-n { min-inline-size: 15px; block-size: 15px; font-size: 0.68rem; top: calc(var(--ms-node) - 13px); }

  .mission-bar { padding: var(--vp-space-2) var(--vp-space-3); gap: var(--vp-space-2); }
  .mission-bar .mb-reason { order: -1; flex-basis: 100%; }
  .mission-bar .mb-back, .mission-bar .mb-next { flex: 1 1 0; min-inline-size: 0; }

  .guide-panel { padding: var(--vp-space-3); }
  .guide-panel dl, .guide-panel .gp-body { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .guide-panel dd, .guide-panel .gp-v { margin-bottom: var(--vp-space-2); }

  .palette { padding-top: 8vh; }
  .frame-girih { padding: var(--vp-space-4); }
  .arch { --vp-arch-h: 3.5rem; padding-inline: var(--vp-space-3); }
}

/* ═════════ احترام «قلّل الحركة» ═════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .btn:hover, .btn:active, .pcard:hover, a.arch:hover, .mission-steps > .now { transform: none !important; }
  .brand:hover .logo { transform: none; }
  .vp-loading::before { animation: none !important; }
  .mps-band, .mps-title, .mission-passed.anim { animation: none !important; }
  .mission-passed-screen::before { animation: none !important; opacity: 0.6; }
}

/* ═════════ رسومات GPT (img/art/): الشعار وأيقونات المراحل ═════════ */
.logo { clip-path: none; background: none; }
.logo img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--vp-gold) 35%, transparent)); }
.brand:hover .logo { transform: scale(1.06); }

/* رسومات الحالات الفاضية (img/art/empty-*.png) — بدل الخاتم الخافت */
.empty[data-art]::before {
  inline-size: min(260px, 80%); block-size: 180px; opacity: 1; margin-block-end: var(--vp-space-3);
  background: center / contain no-repeat; -webkit-mask: none; mask: none;
  border-radius: var(--vp-radius-md);                       /* صور حقيقية مستطيلة: زوايا ناعمة؛ الرسومات الشفافة ما بتتأثر */
}
.empty[data-art="products"]::before   { background-image: url("/img/art/empty-products.png"); }
.empty[data-art="characters"]::before { background-image: url("/img/art/empty-characters.png"); }
.empty[data-art="sounds"]::before     { background-image: url("/img/art/empty-sounds.png"); }
.empty[data-art="patterns"]::before   { background-image: url("/img/art/empty-patterns.png"); }
.empty[data-art="hooks"]::before      { background-image: url("/img/art/empty-hooks.png"); }
.empty[data-art="moves"]::before      { background-image: url("/img/art/empty-moves.png"); }
.empty[data-art="activity"]::before   { background-image: url("/img/art/empty-activity.png"); }

/* نص «hint» جوّا بطاقة البطل: فاتح بظل خفيف (كان رمادي ومش واضح على صورة النهار) */
.hero .hint { color: rgb(255 255 255 / 0.9); text-shadow: 0 1px 2px rgb(0 0 0 / 0.55); }

/* ═════════ صفحة الدخول: login-bg.jpg (صورة حقيقية، حقوقها بـ credits.json) فوق صورة عمّان بالليل؛ ناقصين = السماء المرسومة ═════════ */
body.login-page {                                        /* body.login-page بدل .login-page: بدونها قاعدة body.zk بـ style.css كانت تغلب وتخفي الصورة */
  background-color: var(--vp-bg);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--vp-bg) 55%, transparent) 0%, color-mix(in srgb, var(--vp-bg) 20%, transparent) 45%, color-mix(in srgb, var(--vp-bg) 60%, transparent) 100%),
    url("/img/art/login-bg.jpg"), var(--img-hero-home), var(--vp-sky);
  background-position: center, center bottom, center, center;
  background-size: cover, cover, cover, cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (orientation: portrait) {
  body.login-page { background-position: center, center bottom, 30% center, center; }
}
.login-card { background: color-mix(in srgb, var(--vp-surface) 86%, transparent); backdrop-filter: blur(3px); }



/* ═════════ «نجمة» — مكوّنات الواجهة الجديدة (najma.js) ═════════
   قاعدة السلاسة: كل إشي إله مكان واحد. اللي ما بيخصّك ما بيطلع.
   ▸ .oms-only        بيختفي كلياً إلا لو الـ OMS مضبوط (html[data-oms="on"])
   ▸ .tb-menu         قوائم الترويسة (جديد · الدليل · حسابي)
   ▸ .objective       سطر المهمة تحت الشاشة (أسلوب ترجمة الألعاب)
   ▸ .nload           شاشة التحميل 3 لوحات، وبتصير .nload-pill حبة صغيرة
------------------------------------------------------------------ */

/* الأماكن اللي بتخصّ الـ OMS ما بتطلع إلا لما يكون مضبوط فعلاً */
html:not([data-oms="on"]) .oms-only { display: none !important; }

/* ───── قوائم الترويسة ───── */
.tb-menu { min-inline-size: 19rem; padding: var(--vp-space-1); }
.tb-menu .zk-dropdown__item {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--vp-space-2) var(--vp-space-2);
  align-items: start; padding: 8px 10px; border-radius: var(--vp-radius-sm); line-height: 1.35;
}
.tb-menu .zk-dropdown__item:hover { background: var(--vp-surface-3); }
.tb-menu .mi-ico { font-size: 15px; line-height: 1.4; text-align: center; color: var(--vp-brand); }
.tb-menu .mi-t { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.tb-menu .mi-t small { color: var(--vp-text-muted); font-size: var(--vp-fs-xs); font-weight: 400; }
.tb-menu-h {
  margin: var(--vp-space-2) 0 0; padding: 6px 10px 2px;
  font-family: var(--vp-font-heading); font-size: var(--vp-fs-xs); color: var(--vp-text-faint);
  border-block-start: 1px solid var(--vp-hairline);
}
.tb-apps { padding-block: var(--vp-space-1); }
.tb-apps .zk-app-switcher { inline-size: 100%; }

/* زر «حسابي»: اسم الموظف جوّاه بدل شريحة منفصلة بالترويسة (خانة أقل) */
.acc-btn { gap: 6px; }
.who-chip { display: inline-flex; align-items: center; gap: 4px; max-inline-size: 9rem; }
.who-chip b { font-weight: 600; font-size: var(--vp-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-dot { color: var(--vp-ok); font-size: 9px; line-height: 1; }

/* ───── سطر المهمة (تحت الشاشة) ───── */
.objective {
  position: fixed; inset-block-end: calc(var(--vp-space-4) + env(safe-area-inset-bottom, 0px)); inset-inline-start: var(--vp-space-4);
  z-index: calc(var(--vp-z-drawer) + 2);
  display: flex; align-items: center; gap: var(--vp-space-2);
  max-inline-size: min(34rem, calc(100vw - 2 * var(--vp-space-4)));
  padding: 8px 10px 8px 6px;
  background: color-mix(in srgb, var(--vp-black) 82%, transparent);
  border: 1px solid var(--vp-hairline); border-radius: var(--vp-radius-pill);
  box-shadow: var(--vp-shadow-2); backdrop-filter: blur(6px);
  animation: obj-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes obj-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.objective[hidden] { display: none; }
.obj-star {
  flex: 0 0 auto; inline-size: 18px; block-size: 18px;
  background: var(--vp-gold); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vp-gold) 70%, transparent));
}
.obj-t {
  flex: 1 1 auto; min-inline-size: 0; color: var(--vp-on-hero); text-decoration: none;
  font-size: var(--vp-fs-sm); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obj-t:hover { text-decoration: underline; }
.obj-y { color: var(--vp-gold-light); font-weight: 600; }
.obj-b { color: var(--vp-hl-blue); font-weight: 600; font-variant-numeric: tabular-nums; }
.obj-x {
  flex: 0 0 auto; inline-size: 1.75rem; block-size: 1.75rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--vp-text-faint);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.obj-x:hover { background: rgb(255 255 255 / 0.12); color: var(--vp-on-hero); }

/* ───── شاشة التحميل: 3 لوحات مايلة + تلميح، وبتصير حبة ───── */
.nload {
  position: fixed; inset: 0; z-index: calc(var(--vp-z-palette) + 4);
  display: grid; place-items: center; overflow: hidden;
  background: rgb(1 6 16 / 0.55); backdrop-filter: blur(2px);
  animation: nl-fade 220ms ease-out;
}
@keyframes nl-fade { from { opacity: 0; } to { opacity: 1; } }
.nl-panels { position: absolute; inset: -12% -6%; display: flex; gap: 10px; transform: rotate(-9deg) scale(1.08); }
.nl-p { flex: 1 1 0; background: center / cover no-repeat; filter: saturate(0.85) brightness(0.75); }
.nl-p.p1 { background-image: var(--img-petra-night); }
.nl-p.p2 { background-image: var(--img-hero-home); }
.nl-p.p3 { background-image: var(--img-tiles); }
.nl-panels::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(1 6 16 / 0.72), rgb(1 6 16 / 0.9)); }
.nl-box {
  position: relative; z-index: 1; inline-size: min(30rem, calc(100vw - 2rem));
  padding: var(--vp-space-5) var(--vp-space-4);
  display: flex; flex-direction: column; gap: var(--vp-space-2); text-align: center;
  background: color-mix(in srgb, var(--vp-bg) 78%, transparent);
  border: 1px solid var(--vp-hairline); border-radius: var(--vp-radius-lg);
  box-shadow: var(--vp-shadow-2);
}
.nl-k {
  display: inline-flex; align-items: center; gap: 6px; margin-inline: auto;
  padding: 2px 10px; border-radius: var(--vp-radius-pill);
  background: color-mix(in srgb, var(--vp-gold) 16%, transparent);
  color: var(--vp-gold-light); font-size: var(--vp-fs-xs); font-weight: 600;
}
.nl-title { margin: 0; font-family: var(--vp-font-heading); font-size: var(--vp-fs-xl); color: var(--vp-heading); }
.nl-tip { margin: 0; color: var(--vp-text-muted); font-size: var(--vp-fs-sm); line-height: 1.6; min-block-size: 3.2em; }
.nl-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--vp-space-2); }
.nl-off { color: var(--vp-text-faint); font-size: var(--vp-fs-xs); }
.nl-bar { position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 3px; background: rgb(255 255 255 / 0.1); }
.nl-bar i { display: block; block-size: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--vp-gold), transparent); animation: nl-sweep 1600ms linear infinite; }
@keyframes nl-sweep { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

.nload-pill {
  position: fixed; inset-block-end: var(--vp-space-4); inset-inline-end: var(--vp-space-4);
  z-index: calc(var(--vp-z-toast) - 1);
  display: inline-flex; align-items: center; gap: 8px; max-inline-size: 22rem;
  padding: 8px 12px; cursor: pointer;
  background: color-mix(in srgb, var(--vp-black) 84%, transparent); color: var(--vp-on-hero);
  border: 1px solid var(--vp-hairline); border-radius: var(--vp-radius-pill);
  box-shadow: var(--vp-shadow-2); backdrop-filter: blur(6px);
  font-size: var(--vp-fs-sm);
}
.nload-pill[hidden] { display: none; }
.np-star { inline-size: 14px; block-size: 14px; background: var(--vp-gold); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: nl-spin 3s linear infinite; }
@keyframes nl-spin { to { transform: rotate(360deg); } }
.np-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-go { color: var(--vp-gold-light); font-weight: 600; }
.nload-pill .count { background: var(--vp-gold); color: #05101f; }

/* ───── نوافذ: حقوق الصور + قاموس الكلمات ───── */
.credits-list, .glossary-list { margin: var(--vp-space-2) 0; padding: 0; }
.credits-list { list-style: none; display: grid; gap: var(--vp-space-2); }
.credits-list li {
  display: grid; gap: 2px; padding: var(--vp-space-2);
  border: 1px solid var(--vp-border); border-radius: var(--vp-radius-sm); background: var(--vp-surface-2);
}
.cr-what { font-weight: 600; color: var(--vp-heading); }
.cr-by { color: var(--vp-text-muted); font-size: var(--vp-fs-xs); }
.cr-by a { color: var(--vp-brand-text); text-decoration: underline; }
.glossary-list dt { font-family: var(--vp-font-heading); font-weight: 700; color: var(--vp-heading); margin-block-start: var(--vp-space-2); }
.glossary-list dd { margin: 2px 0 0; color: var(--vp-text); font-size: var(--vp-fs-sm); line-height: 1.6; }
.glossary-list dd .hint { display: block; margin-block-start: 2px; }

/* ───── جوال: السطر والحبة ما بيغطّوا المحتوى ───── */
@media (max-width: 560px) {
  .objective {
    inset-inline: var(--vp-space-2); inset-block-end: calc(var(--vp-space-2) + env(safe-area-inset-bottom, 0px));
    max-inline-size: none; font-size: var(--vp-fs-xs);
  }
  .obj-t { font-size: var(--vp-fs-xs); }
  .tb-menu { min-inline-size: min(19rem, calc(100vw - 2rem)); max-inline-size: calc(100vw - 1rem); }
  .who-chip b { max-inline-size: 5.5rem; }
  .nl-panels { transform: rotate(-12deg) scale(1.15); }
  .nl-box { padding: var(--vp-space-4) var(--vp-space-3); }
  .nl-title { font-size: var(--vp-fs-lg); }
  .nload-pill { inset-inline: var(--vp-space-2); max-inline-size: none; justify-content: space-between; }
}

/* حركة أقل = راحة */
@media (prefers-reduced-motion: reduce) {
  .objective, .nload { animation: none !important; }
  .nl-bar i, .np-star { animation: none !important; }
}

/* ═════════ «ساحل النيون»: حدود سودا وظلال حادة وعناوين بوستر (طابع بس) ═════════ */
[data-theme="neon"] .login-page {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--vp-bg) 55%, transparent) 0%, color-mix(in srgb, var(--vp-bg) 20%, transparent) 45%, color-mix(in srgb, var(--vp-bg) 55%, transparent) 100%),
    url("/img/theme/neon/neon-coast.door.webp"), var(--vp-sky);
}
@media (orientation: portrait) {
  [data-theme="neon"] .login-page {
    background-image:
      linear-gradient(180deg, color-mix(in srgb, var(--vp-bg) 55%, transparent) 0%, color-mix(in srgb, var(--vp-bg) 20%, transparent) 45%, color-mix(in srgb, var(--vp-bg) 55%, transparent) 100%),
      url("/img/theme/neon/neon-coast.door-tall.webp"), var(--vp-sky);
  }
}
[data-theme="neon"] .panel,
[data-theme="neon"] .card,
[data-theme="neon"] .arch,
[data-theme="neon"] .chip {
  border: 2px solid var(--vp-black);
  box-shadow: 4px 4px 0 var(--vp-black), inset 0 0 0 1px var(--vp-border);
}
[data-theme="neon"] .btn { border: 2px solid var(--vp-black); }
[data-theme="neon"] .btn.ghost { border-color: var(--vp-border-strong); }
[data-theme="neon"] .btn.danger { border-color: var(--vp-danger); }       /* حدود الحالة (خطر/تنبيه) بتضل بلونها */
[data-theme="neon"] .btn.warn { border-color: var(--vp-warn); }
[data-theme="neon"] .chip[data-state="danger"] { border-color: var(--vp-danger); }
[data-theme="neon"] .chip[data-state="warn"] { border-color: var(--vp-warn); }
[data-theme="neon"] .hero {
  border: 2px solid var(--vp-black);
  box-shadow: 6px 6px 0 var(--vp-black), 0 0 32px rgb(255 79 163 / 0.28);
}
[data-theme="neon"] .hero::before { display: none; }                /* بلا نقش الكيريه، النيون ما بدّه إياه */
[data-theme="neon"] .hero::after { display: none; }                 /* ولا أفق المآذن */
[data-theme="neon"] { font-synthesis: none; }                       /* Lalezar وBangers بوزن واحد: ما نخلّي المتصفح يسمّك الخط بالقوة */
[data-theme="neon"] h2, [data-theme="neon"] h3 { text-shadow: 2px 2px 0 var(--vp-black); font-weight: 400; }
[data-theme="neon"] .page-head h2::before { background-color: var(--vp-accent); }
[data-theme="neon"] zk-app-shell > [slot="header"]::after { block-size: 4px; opacity: 1; }
[data-theme="neon"] .brand-text b { letter-spacing: 0.02em; }


/* ═════════ إعادة الهيكلة (23/10): «إعلان جديد»، جاهزية المصنع، الدليل، إطار الكيريه ═════════
   كل الألوان من --vp-* (بتتبع الثيمات التلاتة)، والنقوش مرسومة بالكود (--orn-*). */

/* إطار الكيريه للبطاقات المهمة: خط ذهبي + حلقة داخلية + نجمة ثمانية بالزاوية */
.orn-frame {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--vp-orn) 55%, transparent);
  box-shadow: inset 0 0 0 4px var(--vp-surface), inset 0 0 0 5px color-mix(in srgb, var(--vp-orn) 28%, transparent), var(--vp-shadow-1);
}
.orn-frame::after {
  content: ""; position: absolute; inset-block-start: -9px; inset-inline-start: 18px; inline-size: 18px; block-size: 18px;
  background-color: var(--vp-brand);
  -webkit-mask: var(--orn-star) center / contain no-repeat; mask: var(--orn-star) center / contain no-repeat;
  pointer-events: none;
}

/* الزر الكبير بأول القائمة الجانبية */
.nav-new {
  display: flex; align-items: center; justify-content: center; gap: var(--vp-space-2);
  inline-size: calc(100% - var(--vp-space-4)); margin: var(--vp-space-3) auto var(--vp-space-2);
  padding: var(--vp-space-3) var(--vp-space-4); cursor: pointer;
  font: inherit; font-family: var(--vp-font-heading); font-weight: 700; font-size: var(--vp-fs-lg);
  color: var(--vp-on-cta); background: var(--vp-cta);
  border: 0; border-radius: var(--vp-radius-md);
  box-shadow: 0 3px 0 var(--vp-cta-edge), var(--vp-shadow-1);
  transition: transform var(--vp-ease), box-shadow var(--vp-ease), background var(--vp-ease);
}
.nav-new:hover { background: var(--vp-cta-hover); transform: translateY(-1px); }
.nav-new:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vp-cta-edge); }
.nav-new:focus-visible { outline: none; box-shadow: 0 3px 0 var(--vp-cta-edge), var(--vp-focus); }
.nav-new__star { inline-size: 18px; block-size: 18px; background-color: currentColor;
  -webkit-mask: var(--orn-star) center / contain no-repeat; mask: var(--orn-star) center / contain no-repeat; }
zk-app-shell[data-nav="mini"] .nav-new { inline-size: 44px; padding: var(--vp-space-3) 0; }
zk-app-shell[data-nav="mini"] .nav-new__t { display: none; }

/* نافذة «إعلان جديد» */
.new-chooser h3 { margin-top: 0; }
.nc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vp-space-3); margin-block: var(--vp-space-3); }
.nc-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--vp-space-2); text-align: center;
  padding: var(--vp-space-3); cursor: pointer; font: inherit; color: var(--vp-text);
  background: var(--vp-surface-2); border: 1px solid var(--vp-border); border-radius: 50% 50% var(--vp-radius-lg) var(--vp-radius-lg) / 2.2rem 2.2rem var(--vp-radius-lg) var(--vp-radius-lg);
  transition: transform var(--vp-ease), border-color var(--vp-ease), box-shadow var(--vp-ease);
}
.nc-card:hover, .nc-card:focus-visible { transform: translateY(-3px); border-color: var(--vp-brand); box-shadow: var(--vp-glow); text-decoration: none; outline: none; }
.nc-art { position: relative; display: grid; place-items: center; inline-size: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--vp-radius-md);
  background: var(--vp-sunset); }
.nc-art img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.nc-ico { position: relative; font-size: 2.2rem; color: var(--vp-on-hero); text-shadow: var(--vp-text-shadow-hero); }
.nc-art img + .nc-ico { display: none; }
.nc-card b { font-family: var(--vp-font-heading); font-size: var(--vp-fs-lg); color: var(--vp-heading); }
.nc-d { font-size: var(--vp-fs-sm); color: var(--vp-text-muted); }
.nc-ex { font-size: var(--vp-fs-xs); }
.nc-quick { padding-top: var(--vp-space-3); border-top: 1px solid var(--vp-hairline); }
@media (max-width: 640px) { .nc-cards { grid-template-columns: 1fr; } .nc-art { aspect-ratio: 16 / 7; } }

/* الرئيسية: «الخطوة الجاية» جوّا البطل */
.home-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vp-space-2); margin: var(--vp-space-3) 0 0; padding: var(--vp-space-2) var(--vp-space-3);
  background: color-mix(in srgb, var(--vp-black) 55%, transparent); border-radius: var(--vp-radius-md); color: var(--vp-on-hero); }
.home-next__star { inline-size: 16px; block-size: 16px; flex: none; background-color: var(--vp-gold);
  -webkit-mask: var(--orn-star) center / contain no-repeat; mask: var(--orn-star) center / contain no-repeat; }
.home-next > span:not(.home-next__star) { flex: 1 1 14rem; }

/* المصنع: جاهزية الاستوديو */
.ready-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vp-space-2); }
.ready-row { display: flex; gap: var(--vp-space-3); align-items: flex-start; padding: var(--vp-space-2) var(--vp-space-3);
  background: var(--vp-surface-2); border: 1px solid var(--vp-border); border-radius: var(--vp-radius-md); }
.ready-star { flex: none; inline-size: 20px; block-size: 20px; margin-top: 2px; background-color: var(--vp-idle);
  -webkit-mask: var(--orn-star) center / contain no-repeat; mask: var(--orn-star) center / contain no-repeat; }
.ready-row[data-state="ok"] .ready-star { background-color: var(--vp-ok); }
.ready-row[data-state="warn"] .ready-star { background-color: var(--vp-warn); }
.ready-row[data-state="danger"] .ready-star { background-color: var(--vp-danger); }
.ready-main { flex: 1 1 auto; min-width: 0; }
.ready-prob { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vp-space-2); margin-top: var(--vp-space-2);
  padding: var(--vp-space-2); background: var(--vp-warn-soft); border-radius: var(--vp-radius-sm); font-size: var(--vp-fs-sm); }
.seg-sm[hidden] { display: none; }

/* الشغلة السريعة: صف الخيارات (النموذج + عدد النسخ) */
.free-qopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--vp-space-3); }

/* المهمة: شاشة «خلص الإعلان» */
.mission-done { display: flex; align-items: center; gap: var(--vp-space-4); }
.mission-done__art { inline-size: 120px; block-size: 120px; object-fit: contain; flex: none; }
.mission-done h3 { margin: 0 0 var(--vp-space-1); color: var(--vp-heading); }

/* صفحة الدليل */
.gp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vp-space-4); }
.gp-step { display: flex; gap: var(--vp-space-4); align-items: flex-start; }
.gp-ico { inline-size: 64px; block-size: 64px; flex: none; object-fit: contain; }
.gp-body { min-width: 0; }
.gp-body h3 { margin: 0 0 var(--vp-space-2); }
.gp-n { display: inline-grid; place-items: center; inline-size: 1.7em; block-size: 1.7em; margin-inline-end: var(--vp-space-2);
  border-radius: 50%; background: var(--vp-brand); color: var(--vp-on-brand); font-size: .9em; }
.gp-more { margin: var(--vp-space-2) 0; }
.gp-problems, .gp-words { display: grid; gap: var(--vp-space-3); margin: 0; }
.gp-words dd { margin: var(--vp-space-1) 0 0; }
.gp-prob summary { cursor: pointer; }
@media (max-width: 640px) { .gp-step { flex-direction: column; } }

/* ═════════ تعديلات ثيم «ساحل النيون» على القطع الجديدة ═════════ */
[data-theme="neon"] .nav-new, [data-theme="neon"] .nc-card, [data-theme="neon"] .ready-row { border: 2px solid var(--vp-black); }
[data-theme="neon"] .nav-new { box-shadow: 3px 3px 0 var(--vp-black); }
[data-theme="neon"] .orn-frame { border: 2px solid var(--vp-black); box-shadow: 4px 4px 0 var(--vp-black), inset 0 0 0 1px var(--vp-border); }
[data-theme="neon"] .orn-frame::after { background-color: var(--vp-accent); }

/* صور حقيقية بالدليل والمصنع (img/art/ — الحقوق بـ credits.json) */
.gp-banner { margin: 0 0 var(--vp-space-4); border-radius: var(--vp-radius-lg); overflow: hidden; border: 1px solid var(--vp-hairline); }
.gp-banner img { display: block; inline-size: 100%; block-size: clamp(110px, 20vw, 190px); object-fit: cover; }
.ready-art { float: inline-end; inline-size: 120px; block-size: 90px; object-fit: cover; border-radius: var(--vp-radius-md); margin: 0 0 var(--vp-space-2) var(--vp-space-3); }
@media (max-width: 640px) { .ready-art { display: none; } }