/* =============================================================================
   village.css — «الفريج قبل الدشة»: مشهد بداية اللعبة (والموقع) حيًّا
   قدها وقدود · هو يا مال (PBE فقط)

   البنية: صندوق `.vg-plate` بنسبة لوح صالح (١٦٧٢×٩٤١) **يغطّي** المسرح مهما
   كانت نسبته (يقصّ الجنبين في ٤:٣ والسماء في ٢٠:٩ — القاع مثبَّت لأن الناس
   يمشون فيه). كل شي داخله بإحداثيات مئوية من اللوح، والطبقات من الخلف:

     سماء (تدرّج CSS من قياس اللوح) ← سحب ← طيور ← نخل (palm-sway.js: جذع ثابت + تاج يتمايل)
     ← اللوح الأمامي `fg.webp` (البيوت والأرض، سماؤه شفّافة — فالجذوع تختفي
     خلفه مثل الرسم) ← الناس (٣ ممرّات بعمق) ← واجهة الردهة.
     (٣٠/٩ سعفة المقدّمة فوق الناس انشالت — صالح: «النخلة اللي تصير بالزاوية تحت الغيها».)

   الحركة كلها `transform`/`opacity`. المتغيّران `--pw`/`--ph` (مقاس اللوح
   بالبكسل) يضبطهما JS عند تغيّر المقاس فقط، وكل المسافات تُشتقّ منهما بـ
   `calc()` — فلا يوجد رقم بكسل مكتوب في الحركات.
   ========================================================================== */

.vg {
  position: absolute; inset: 0; overflow: hidden;
  container-type: size;
  background: var(--vg-sky-bottom, #8ee1ff);
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  direction: rtl;
  --vg-ar: 1.7768;                                /* ١٦٧٢ / ٩٤١ — يُبثّ من JS */
}
.vg-plate {
  position: absolute;
  left: 50%; bottom: 0;
  width: max(100cqw, 100cqh * var(--vg-ar));
  height: max(100cqh, 100cqw / var(--vg-ar));
  transform: translateX(-50%);
  direction: ltr;                                 /* الإحداثيات من اليسار مثل الرسم */
}
.vg-l { position: absolute; inset: 0; }
.vg-l img { display: block; }

/* ── السماء ── */
.vg-sky { background-image: var(--vg-sky-grad); }

/* ── السحب: انزلاق بطيء جدًّا (٧–١٢ دقيقة للعبور)، كل واحدة بمدّتها، وتلتفّ ──
   تبدأ من مواضعها في الرسم: التأخير السالب محسوب في JS حتى تكون عند x الأصلي
   في اللحظة صفر، فالمشهد يفتح مطابقًا للوح ثم يعيش. */
.vg-cloud {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%); height: auto;
  animation: vg-cloud var(--d) linear var(--dl) infinite;
}
@keyframes vg-cloud {
  from { transform: translateX(calc(var(--pw) * (1.06 - var(--x)))); }
  to   { transform: translateX(calc(var(--pw) * (-0.18 - var(--x)))); }
}

/* ── الطيور: تطير ببطء وتنزلق (ميلان + ارتفاع) لا ترتجف ──
   ١١/١٠ كل نورس على مساره (village-world.js ‹BIRDS› · ‹birdCSS›): برّا عمود الواجهة — اليمين تنزل ورا بيت البادقير واليسار تطلع
   من ورا السطوح. ‹--x/--y› أوّل نقطة (برّا الإطار أو ورا البيت)، و«قلّل الحركة» يخلّيها هناك */
.vg-bird {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%); opacity: .96;
  animation: var(--an) var(--d) linear var(--dl) infinite;
}
.vg-bird img { width: 100%; height: auto; animation: vg-glide var(--fd) ease-in-out var(--fdl, 0s) infinite; }
@keyframes vg-glide {
  0%, 100% { transform: rotate(-4deg) translateY(0.4cqh); }
  50%      { transform: rotate(4deg)  translateY(-0.4cqh); }
}

/* ── النخل: من palm-sway.js (palmCSS يحطّ قواعده — ثلاث طبقات تمايل و«قلّل الحركة» ثابتة) ──
   ٣٠/٩ بدل ٣ رسمات تتكرّر بتمايل ±١°. الطبقة نفسها (.vg-palms) تحت اللوح الأمامي فالجذوع تختفي ورا البيوت. */

/* ── اللوح الأمامي ── */
.vg-fg img { width: 100%; height: 100%; }

/* ── البيّاع بالدكّان (village-shop.js، ٤/١٠): قاعد على دكّة الدكّان اللي بالنصّ ورا — ورا الماشين والعيال (z ٨١ <
   فقرة اللعب ٩٣–٩٤ < الممرّات ٩٥+). النافذة والكيفريمات من sheet-anim.js ── */
.vg-shop { position: absolute; z-index: 81; pointer-events: none; }
.vg-shop.is-wait { visibility: hidden; }
.vg-shop-face { position: absolute; inset: 0; }

/* ── الناس ──
   كل ماشٍ: غلاف يعبر (`translateX` من x0 إلى x1 بالبكسل، يحسبها JS لحظة الظهور
   من مقاس اللوح الحالي) ← جسم ينطّ مع الخطوة ← نافذة بمقاس إطار واحد فيها
   شريط الإطارات.

   ⚠⚠ **الإطارات غير متساوية المدّة**، وكيفريماتها مولّدة في `village-world.js`
   من جدول `phase` (انظر `sheetCSS`). `steps()` تعطي مدداً متساوية، وأوراق
   ChatGPT ليست دورة موقوتة — فرق إطارين ٤٪ وآخرَين ١٥٪ — فكانت الحركة تتعثّر
   وتقفز، وهذا اللي وصفه صالح بـ«مشيهم مو smooth». الشريط كذلك أُعيد ترتيبه
   على أقلّ لفّة تغيّرًا (فرق نصف الدورة ارتفع ٢–٢٫٤× = دورة مشي حقيقية).

   طبقة B من نفس الشريط متقدّمة إطارًا وتظهر في آخر ٢٨٪ من نافذة كل إطار ⇒
   مزج ناعم. ⚠ B فوق A وA معتمة طول الوقت، فمجموع التغطية ١ دائمًا (لو تلاشى
   الاثنان معًا لبان الرمل من خلالهما في منتصف كل خطوة). */
.vg-people { position: absolute; inset: 0; }
.vg-walker {
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 0;
  animation: vg-cross var(--dur) linear both, vg-appear var(--dur) linear both;
}
@keyframes vg-cross { from { transform: translate3d(var(--x0), calc(var(--yy) * -1), 0); } to { transform: translate3d(var(--x1), calc(var(--yy) * -1), 0); } }
/* طرفا الممرّ قد يقعان داخل الشاشة (حدّ الأرض يمنع أبعد من ذلك)، فيدخل الماشي
   ويخرج بتلاشٍ قصير بدل أن ينبثق. ولو وصل المدى للحافّة صار التلاشي خارجها. */
@keyframes vg-appear { 0% { opacity: 0; } 7% { opacity: 1; } 93% { opacity: 1; } 100% { opacity: 0; } }
/* ⚠⚠ **ما فيه نطّة في CSS.** كانت هنا `vg-bob` تنطّ الجسم ٢٫٢٪ كل نصف دورة —
   وهي سبب «كأنهم يقفزون» اللي وصفه صالح: الرسم نفسه فيه نطّة (الجسم يهبط في
   وضع DOWN ويعلو في UP، ونحن نحاذي **القدم** فتظهر النطّة كما رُسمت)، فإضافة
   نطّة ثانية بطور مختلف تضاعفها وتضاربها ⇒ حركة رأسية غير منتظمة تُقرأ قفزًا.
   النطّة من الرسم وحده، والتوقيت من `phase`. */
.vg-body {
  position: absolute; left: calc(var(--w) * -0.5); bottom: 0;
  width: var(--w); height: var(--h);
  transform-origin: 50% 100%;
}
.vg-face { position: absolute; inset: 0; }
.vg-face.left { transform: scaleX(-1); }

/* صندوق النافذة والشريط في `sheet-anim.js` (`winCSS`) — مشترك مع مشهد الدشّة
   ⚠ ٣٠/٩ الظلّ من الطول لا العرض: الخانات الجديدة أعرض (مكان لميلان الرجل — مهمة المشي) فظلّ ٠٫٧٢ من العرض كبر
   ٧–١٥٪. والبصمة القديمة ٠٫٥٨–٠٫٧٣ من الطول ⇒ ٠٫٦٢. **ووسطه وسط الجسم**: كان left −٠٫٣٦w من يسار الجسم
   (الجسم نفسه مزاح −٠٫٥w) فالظلّ كان تحت طرف الجسم اليسار بنصّ عرض، مو تحت القدمين (قِسناه: مركزه = حافّة الجسم). */
.vg-shadow {
  position: absolute; left: calc(50% - var(--h) * 0.31); bottom: calc(var(--h) * -0.035);
  width: calc(var(--h) * 0.62); height: calc(var(--h) * 0.075);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(70, 40, 10, .34), rgba(70, 40, 10, .14) 55%, rgba(70, 40, 10, 0) 72%);
}

/* ── واجهة الردهة: الاسم والزرّ في السماء، فوق سطح البيوت ── */
/* ١١/١٠ (الفحص الناقد — 02-village/village-21x9): اللوح «يغطّي» بعرضه بالشاشات العريضة ويتقصّ من فوق، فخطّ السطوح يرتفع
   (سطح الدكّان ٠٫٦٠ من اللوح ⇒ ‎١٠٠cqh − ٢٢٫٥cqw‎ من فوق الشاشة: ٦٠cqh بـ١٦:٩ و٤٧cqh بـ٢١:٩) وكان «كيف نلعب؟» قاعد على السطح.
   ‹--sky› = المسافة لين السطح، والواجهة تنضغط معها (الشعار والفراغات) — بـ١٦:٩ وأضيق نفس المقاسات بالضبط */
.lb {
  --sky: min(60cqh, 100cqh - 22.5cqw);
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding-top: clamp(10px, min(7cqh, var(--sky) * .1), 90px);
  pointer-events: none;
  direction: rtl;
}
.lb > * { pointer-events: auto; }
.lb-logo { position: absolute; top: clamp(8px, 2.6cqh, 26px); right: clamp(10px, 2cqw, 30px); height: clamp(28px, 7cqh, 60px); width: auto; opacity: .95; filter: drop-shadow(0 2px 6px rgba(6, 60, 80, .25)); }
.lb-mark {
  margin: 0; line-height: 0;
  animation: lb-in .9s cubic-bezier(.2, 1, .3, 1) both;
}
/* ٩/١٠ الاسم = الشعار الجديد الأصلي (oym-logo.js · الكلمة بس — المكان عريض وقصير) مثل ما هو: إطاره الأبيض والكحلي
   يكفيه على السما، ظلّ خفيف بس. نفس الصورة بشاشة التحميل (boot.css) ⇒ ولا قفزة بينهم */
.lb-mark-img { display: block; height: clamp(56px, min(19cqh, var(--sky) * .36), 190px); width: auto; filter: drop-shadow(0 6px 14px rgba(5, 52, 70, .28)); }
.lb-tag {
  margin: clamp(2px, .6cqh, 8px) 0 0;
  font-size: clamp(13px, min(3cqh, var(--sky) * .05), 28px); font-weight: 800; color: #FFF7E6;
  text-shadow: 0 2px 10px rgba(5, 52, 70, .5);
  animation: lb-in .9s .15s cubic-bezier(.2, 1, .3, 1) both;
}
.lb-go {
  margin-top: clamp(10px, min(4.2cqh, var(--sky) * .065), 44px);
  padding: clamp(8px, min(2.2cqh, var(--sky) * .035), 22px) clamp(24px, 5cqw, 72px);
  border: 0; border-radius: 999px; cursor: pointer;
  background: #F5B83D; color: #3A2500;
  box-shadow: 0 7px 0 #B07E12, 0 16px 30px rgba(5, 52, 70, .32);
  font: inherit; font-size: clamp(16px, min(4.2cqh, var(--sky) * .07), 40px); font-weight: 900;
  transition: transform .15s, box-shadow .15s;
  animation: lb-in .9s .3s cubic-bezier(.2, 1, .3, 1) both, lb-breathe 3.2s 1.4s ease-in-out infinite;
}
.lb-go:hover { transform: translateY(-2px); box-shadow: 0 9px 0 #B07E12, 0 20px 34px rgba(5, 52, 70, .36); }
/* سعر اللعبة على الزرّ نفسه (الفريج صار الصفحة الرئيسية ٢٩/٩ — ما فيه صفحة شراء قبله) */
.lb-price { display: inline-block; margin-inline-start: .55em; padding: .12em .6em; border-radius: 999px; background: rgba(58, 37, 0, .12); font-size: .62em; font-weight: 800; vertical-align: .12em; }
.lb-go:active { transform: translateY(5px); box-shadow: 0 2px 0 #B07E12, 0 8px 18px rgba(5, 52, 70, .3); }
@keyframes lb-in { from { opacity: 0; transform: translateY(-18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lb-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }

/* الانتقال للدشة: دفعة كامرة خفيفة ووهج شمس يغطّي القطع */
.vg.is-leaving .vg-plate { animation: vg-push 1.5s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes vg-push { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.07); } }
.vg.is-leaving .lb { animation: lb-out .5s ease-in both; }
/* للدفتر (صفحة الفئات): الواجهة بس تطلع — الفريج نفسه يصغر من cats.js */
.vg.is-book .lb { animation: lb-out .38s ease-in both; }
@keyframes lb-out { to { opacity: 0; transform: translateY(-10px); } }
/* ١١/١٠ (الفحص الناقد — 02-village/village-buy-fhd): بطاقة «رحلة جديدة» كانت فوق الشعار ونصّه طالع فوقها ⇒ وهي مفتوحة الواجهة
   تطلع (نفس «كيف نلعب؟» — howto.css)، وترجع بدخولها لمّا تتسكّر. intro.html يحطّ ‹is-buy› (onOpen/onClose) */
.vg.is-buy .lb-mark, .vg.is-buy .lb-tag, .vg.is-buy .lb-go, .vg.is-buy .lb-how { animation: none; opacity: 0; transform: translateY(-2cqh); pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.3, .8, .3, 1); }

/* ── الصحوة بعد شاشة التحميل (boot.css): السماء والعنوان هي نفسها، والبيوت والنخل والناس تطلع من تحت ──
   ٨/١٠ عزيز وصالح: «بعد اللودنق السما فجأة الترانزشن يطلع البيوت. بدال لا، ينزل لي تحت كأنه كامرة، نفس الحركة الانتقالية
   بين الفئات واللوبي» ⇒ كانت البيوت تذوب وتطلع ٩٪ (فجأة). الحين الكامرة **تنزل** من السما (village-world ‹rise›، WAAPI):
   البيوت والناس تحت الشاشة بالكامل (١٠٠٪ من اللوح) وتطلع بلا ذوبان، والنخل وراها أبطأ (٨٦٪ — أبعد)، والسحب والطيور ترتفع
   شوي (أبعد شي — بارالاكس) — نفس منحنى نزول الكامرة بـtx-sky ‹catsToLobby›. الزرّ ينطّ آخرها. */
.vg.is-waking .vg-palms, .vg.is-waking .vg-fg, .vg.is-waking .vg-people { transform: translateY(100%); }
.vg.is-waking .lb-go { visibility: hidden; }
/* ⚠ اسم حركة جديد (lb-rise-in): نفس الاسم lb-in ما يعيد الحركة (بدت وقت التركيب تحت شاشة التحميل وخلصت) ⇒ كان الزرّ يطلع قبل البيوت */
.vg.is-rise .lb-go { animation: lb-rise-in .7s 1.3s cubic-bezier(.2, 1, .3, 1) both, lb-breathe 3.2s 2.6s ease-in-out infinite; }
@keyframes lb-rise-in { from { opacity: 0; transform: translateY(-18px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  /* «قلّل الحركة»: بلا كامرة — ذوبان بمكانها */
  .vg.is-waking .vg-palms, .vg.is-waking .vg-fg, .vg.is-waking .vg-people { transform: none; opacity: 0; }
  .vg.is-rise .vg-palms, .vg.is-rise .vg-fg, .vg.is-rise .vg-people { transition: opacity .6s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .vg-cloud, .vg-bird, .vg-bird img, .vg-body, .vg-shadow, .lb-go { animation: none !important; }   /* النخل: palm-sway.js */
}

/* ── حامل الصندوق: بطل شاشة البداية (فيديو عزيز ٢٩/٩) ──────────────────────────
   داخل طبقة الناس (فيطلع من تحت مع البيوت بعد شاشة التحميل، ومخفي وهي صاحية) وفوق الممرّات.
   كل المقاسات **نِسَب من اللوح** بلا JS: ارتفاع الخانة = طوله ÷ fig (نسبة الشخصية من الخانة)،
   وعرضها بنسبة الخانة مقسومة على نسبة اللوح (العرض نسبةً لعرض اللوح). الارتكاز (منتصف القدمين،
   الأرض) من hero-data.js ينحطّ على (--hx, --hy). ونافذة المشي تنزلق بـtranslateX(٪) من .vg-hwalk
   اللي بمقاس اللوح ⇒ ١٠٠٪ = عرض لوح، فالسرعة بنسب اللوح وما تتأثّر بالمقاس. */
.vg-hero { position: absolute; inset: 0; z-index: 100; pointer-events: none; }
.vg-hwalk { position: absolute; inset: 0; }
.vg-hbody {
  --hch: calc(var(--hh) / var(--hfig));
  position: absolute;
  height: calc(var(--hch) * 100%);
  width: calc(var(--hch) * var(--har) / var(--vg-ar) * 100%);
  left: calc(var(--hx) * 100% - var(--hax) * var(--hch) * var(--har) / var(--vg-ar) * 100%);
  top: calc(var(--hy) * 100% - var(--hg) * var(--hch) * 100%);
}
/* نافذة وحدة ظاهرة (وقفة / لفّة / مشي) — التبديل بلا تلاشي: آخر إطار باللفّة هو نفسه بداية المشي */
.vg-hs { position: absolute; inset: 0; visibility: hidden; }
.vg-hs.is-on { visibility: visible; }
/* اللفّة مرّة وحدة وتوقف على آخر إطار (sheetCSS يعطي infinite لكل الأشرطة) */
.vg-hero .sx-hero-turn .sa-win > img { animation-iteration-count: 1; animation-fill-mode: forwards; }
/* الظلّ: أضيق من ظلّ الماشين — قدماه مضمومتان وهو مواجه للكامرة */
.vg-hshadow {
  position: absolute; left: calc(var(--hax) * 100% - 30%); width: 60%;
  bottom: calc((1 - var(--hg)) * 100% - 2.2%); height: 4.6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(70, 40, 10, .34), rgba(70, 40, 10, .14) 55%, rgba(70, 40, 10, 0) 72%);
}
@media (prefers-reduced-motion: reduce) {
  .vg-hero .sa-win > img { animation: none !important; }     /* وقفة ثابتة (الإطار ٠ = الزفير) */
}

/* ── التيلة: ثلاث عيال بساحة الفريج (صالح ٢٩/٩ — «اي سوها») ─────────────────────────────
   داخل طبقة الناس (تطلع من تحت مع البيوت بعد شاشة التحميل)، وz من أرضهم (٩٣) ⇒ الماشين كلهم يعبرون
   قدّامهم. كل مكان ومقاس **٪ من اللوح** محسوب مرّة بـvillage-world.js (tilaLayout) — بلا JS مع تغيّر المقاس.
   الأشرطة بنفس نافذة الماشين (sheet-anim.js)، والتيل نقاط زجاج بتدرّج ثابت تتحرّك بـtransform بس. */
.vg-tila { position: absolute; inset: 0; pointer-events: none; transition: opacity .4s ease; }
.vg-tila.is-wait { opacity: 0; transition: none; }
.vg-tk { position: absolute; }
.vg-tk-in, .vg-tk-face { position: absolute; inset: 0; }
.vg-tk.flip .vg-tk-in { transform: scaleX(-1); }            /* اللي يطالع: وجهه يسار للدائرة (الظلّ ينعكس معه) */
/* ظلّ التلامس: تحت القدمين بالضبط (feet من build-tila)، نفس لون ظلّ الماشين */
.vg-tk-sh {
  position: absolute; left: calc(var(--f0) * 100%); width: calc((var(--f1) - var(--f0)) * 100%);
  top: calc(var(--g) * 100% - var(--sh) * 50%); height: calc(var(--sh) * 100%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(70, 40, 10, .32), rgba(70, 40, 10, .13) 55%, rgba(70, 40, 10, 0) 72%);
}
/* الدائرة المخطوطة بالرمل (SVG ثابت) */
.vg-tring { position: absolute; display: block; overflow: visible; }
/* تيلة: كرة زجاج (لمعة + لون + حافّة غامقة) وظلّها تحتها — الاثنين pseudo حتى الظلّ يتحرّك معها وتحتها */
.vg-tm { position: absolute; display: block; aspect-ratio: 1; }
.vg-tm::before {
  content: ''; position: absolute; left: -15%; right: -35%; top: 62%; height: 55%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(70, 40, 10, .38), rgba(70, 40, 10, 0) 70%);
}
.vg-tm::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95) 0 13%, var(--c) 40%, var(--d) 100%);
}
.vg-tm--s1, .vg-tm--s2 { opacity: 0; }                       /* اللي تنطقّ: مخفية لين لحظة الطقّة */
/* غبرة الإصابة */
.vg-tp { position: absolute; display: block; opacity: 0; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 240, 210, .9), rgba(240, 214, 168, .45) 45%, rgba(240, 214, 168, 0) 72%); }
@media (prefers-reduced-motion: reduce) {
  .vg-tila .vg-tm, .vg-tila .vg-tp { animation: none !important; }
  .vg-tila .sa-win > img { animation: none !important; }      /* احتياط لو ما لحق at-rest (الإطار ٠) */
}

/* ── حياة الفريج (village-play.js): فقرة اللعب مكان التيلة (صالح ٢/١٠؛ الدجاج انتقل للدشّة ٢/١٠ ج) ──────────
   داخل طبقة الناس (تطلع من تحت مع البيوت). الحاويات بلا ذوبان: «تنتظر» = visibility (ذوبان حاوية بحجم اللوح = طبقة
   بحجم الشاشة وقت الذوبان). الحركة transform بس، والأشرطة نفس نافذة الماشين (sheet-anim.js). */
.vp-play { position: absolute; inset: 0; pointer-events: none; }
.vp-play.is-wait { visibility: hidden; }
.vp-spr, .vp-wait, .vp-hop-go, .vp-gk-go { position: absolute; }
.vp-face { position: absolute; inset: 0; }
.vp-hgrid { position: absolute; display: block; overflow: visible; }
.vp-hop-who { position: absolute; left: 0; top: 0; }
.vp-hop-dir { position: absolute; inset: 0; }
/* ظلّ التلامس (نفس لون ظلّ الماشين): للجماعات بمكانه، وللّي بخانة لحالها تحت القدمين */
.vp-sh {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(70, 40, 10, .3), rgba(70, 40, 10, .12) 55%, rgba(70, 40, 10, 0) 72%);
}
.vp-sh-in { left: 22%; width: 56%; bottom: -3%; height: 8%; }
@media (prefers-reduced-motion: reduce) {
  .vp-hop-go, .vp-hop-dir { animation: none !important; }
  .vp-play .sa-win > img { animation: none !important; }   /* احتياط لو ما لحق at-rest */
}

/* ── خروف مسلسل قصّة (village-khrouf.js) ٢/١٠ ب ── ممثّل = غلاف بلا مقاس يتحرّك ← مقياس العمق حول القدمين ← اتجاه ← نوافذ */
.vk-act { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.vk-sc { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.vk-dir { position: absolute; left: 0; top: 0; }
.vk-dir.left { transform: scaleX(-1); }
.vk-win { position: absolute; visibility: hidden; }
/* حجرة الحجلة (٢/١٠ د): تطير من إيد اللاعبة لأوّل مربّع بقوس (transform بس) */
.vk-stone { position: absolute; left: 0; top: 0; pointer-events: none; }
.vk-stone > svg { display: block; width: 100%; height: 100%; }
.vk-win.is-on { visibility: inherit; }
/* الإفلات مرّة وحدة ويوقف على آخر إطار (التسليم للركض بنفس البكسل) */
.vk-win[data-k^="k-release"] .sa-win > img, .vk-win[data-k^="k-grab"] .sa-win > img,
.vk-win[data-k^="hswap"] .sa-win > img, .vk-win[data-k^="bulbul-throw"] .sa-win > img, .vk-win[data-k="bulbul-fall"] .sa-win > img,
.vk-win[data-k^="darbaha-turn"] .sa-win > img, .vk-win[data-k^="bulbul-pick"] .sa-win > img, .vk-win[data-k^="hready"] .sa-win > img,
.vk-win[data-k="hsettle-p"] .sa-win > img, .vk-win[data-k="hsettle-g"] .sa-win > img,
.vk-win[data-k^="react-"] .sa-win > img { animation-iteration-count: 1 !important; animation-fill-mode: forwards !important; }   /* ٨/١٠ react-*: ردّات فعل المتفرّجين (village-react.js) */
@media (prefers-reduced-motion: reduce) {
  .vp-gk-go, .vp-gk-dir { animation: none !important; }
  .vk-act .sa-win > img { animation: none !important; }
}