/* ═══════════════════════════════════════════════════════════════
   WN-LOCAL LAYER — تعميم تحسينات الداشبورد على صفحات العائلة
   (game-detail · shop · story · faq · account) — لوكال فقط
   = V4 حركة + V2 صقل + V6 خلفية البقع الدافئة. الهوية كما هي حرفياً.
   الحذف: شِل هذا الملف + wn-uiux-local.js وسطري الربط من الصفحات.
   ═══════════════════════════════════════════════════════════════ */
:root { --mo-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ── V6: خلفية البقع الدافئة المعتمدة ── */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 420px at 88% 6%,  rgba(249,216,46,.16), transparent 70%),
    radial-gradient(560px 420px at 8% 32%,  rgba(233,138,37,.10), transparent 70%),
    radial-gradient(640px 480px at 80% 88%, rgba(44,62,80,.05),   transparent 70%);
}

/* ── V4: تتابع الهيدر (الهيدر المُحقن بنفس الكلاسات) ── */
.wa-logo-wrap, .wa-nav, .wa-hdr-actions { animation: moDrop .5s var(--mo-spring) backwards; }
.wa-nav { animation-delay: .08s; }
.wa-hdr-actions { animation-delay: .16s; }
@keyframes moDrop { from { opacity: 0; translate: 0 -14px; } }

/* ── V4: دخول رؤوس الصفحات (ختم + صعود) ── */
.wa-pagehead-eyebrow { animation: moRise .5s var(--mo-spring) .05s backwards; }
.wa-pagehead-title   { animation: moStamp .6s var(--mo-spring) .15s backwards; }
.wa-pagehead-sub     { animation: moRise .55s var(--mo-spring) .5s backwards; }
.gd-hero .gd-title   { animation: moStamp .6s var(--mo-spring) .1s backwards; }
.ac-hero             { animation: moRise .55s var(--mo-spring) .05s backwards; }
@keyframes moRise  { from { opacity: 0; translate: 0 16px; } }
@keyframes moStamp {
  0% { opacity: 0; scale: 1.15; rotate: 1.5deg; }
  60% { opacity: 1; }
  100% { scale: 1; rotate: 0deg; }
}

/* ── V4: قفزة البطاقات المتدرجة عند ظهور أقسامها (reveal موجود أصلاً) ── */
.reveal.is-in .shop-pkg,
.reveal.is-in .shop-info-cell,
.reveal.is-in .ln-test-card,
.reveal.is-in .gd-fact,
.reveal.is-in .gd-step { animation: moPop .55s var(--mo-spring) backwards; }
.reveal.is-in > :nth-child(1) { animation-delay: .02s; }
.reveal.is-in > :nth-child(2) { animation-delay: .08s; }
.reveal.is-in > :nth-child(3) { animation-delay: .14s; }
.reveal.is-in > :nth-child(4) { animation-delay: .20s; }
.reveal.is-in > :nth-child(5) { animation-delay: .26s; }
.reveal.is-in > :nth-child(6) { animation-delay: .32s; }
@keyframes moPop {
  0% { opacity: 0; translate: 0 20px; scale: .96; rotate: -1deg; }
  100% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
}

/* ── V4: سحق-وتمدد + غرزة الظل عند الضغط ── */
.btn-pri:active, .btn-ghost:active, .btn-sm:active,
.ck-coupon-btn:active, .checkout-pay:active, .wa-cats-more:active,
.shop-coupon-form button:active {
  animation: moSquash .28s var(--mo-spring);
  translate: 2px 2px;
  box-shadow: 1px 1px 0 var(--ink, #2c3e50) !important;
}
@keyframes moSquash { 40% { scale: 1.06 .92; } 100% { scale: 1 1; } }

/* ── V4: تلويحة الهدية + قفزة شارة الرصيد + نجوم الـCTA + السهم الداعي ── */
.wa-icbtn svg { animation: moWave 11s ease-in-out 5s infinite; transform-origin: 50% 85%; }
@keyframes moWave {
  0%, 91%, 100% { rotate: 0deg; }
  93% { rotate: 14deg; } 95.5% { rotate: -10deg; } 98% { rotate: 6deg; }
}
.wa-tickets.is-bump { animation: moBump .6s var(--mo-spring); }
@keyframes moBump {
  30% { scale: 1.16; rotate: -3deg; }
  60% { scale: .97; rotate: 2deg; }
  100% { scale: 1; rotate: 0deg; }
}
.wa-cta-star { animation: moTwinkle 3.2s ease-in-out infinite; }
.wa-cta-star--2 { animation-delay: .7s; }
.wa-cta-star--3 { animation-delay: 1.4s; }
@keyframes moTwinkle { 0%, 100% { opacity: .5; scale: 1; } 50% { opacity: 1; scale: 1.3; } }
.wa-cta-strip .btn-pri svg { animation: moNudge 3.5s ease-in-out 2s infinite; }
@keyframes moNudge {
  0%, 86%, 100% { translate: 0 0; }
  90% { translate: -5px 0; } 95% { translate: 2px 0; }
}

/* ── V2: skip-link + حلقة التركيز ── */
.wn-skip {
  position: fixed; top: 12px; inset-inline-start: 12px; z-index: 10000;
  background: var(--cta, #f9d82e); color: var(--ink, #2c3e50);
  border: 2.5px solid var(--ink, #2c3e50); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink, #2c3e50);
  padding: 10px 18px; font-weight: 800; font-size: 14px; text-decoration: none;
  transform: translateY(-220%); transition: transform .3s var(--mo-spring);
}
.wn-skip:focus-visible { transform: translateY(0); outline: none; }
:is(a, button, [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--cta, #f9d82e);
  outline-offset: 2px;
}

/* ── V2: أهداف لمس ٤٤px (زر الهدية الدائري مستثنى ومقدّس) ── */
.btn-pri, .btn-ghost, .btn-sm, .ck-coupon-btn, .wa-cats-more { min-height: 44px; touch-action: manipulation; }
.wa-icbtn { touch-action: manipulation; position: relative; }
.wa-icbtn::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }

/* ── V2: أرقام ثابتة العرض ── */
[class*="count"], [class*="price"], [class*="amount"], [class*="balance"], .wa-tickets-count {
  font-variant-numeric: tabular-nums;
}

/* ── V2: مراسي لا تنغرز تحت الهيدر ── */
main [id], section[id] { scroll-margin-top: 96px; }

/* ── قارئ شاشة فقط ── */
.wn-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ═══ WN-RESP: التنقّل السفلي للجوال + إرجاع ناف التابلت ═══ */
.wn-bnav {
  position: fixed; inset-inline: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 900; display: none; gap: 4px;
  background: var(--surface, #fffbf2);
  border: 2.5px solid var(--ink, #2c3e50);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink, #2c3e50);
  padding: 6px;
}
.wn-bnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 7px 4px; min-height: 44px;
  border-radius: 12px; text-decoration: none;
  color: var(--ink, #2c3e50); font-weight: 800; font-size: 11px;
}
.wn-bnav a svg { width: 21px; height: 21px; }
.wn-bnav a.is-active { background: var(--cta, #f9d82e); box-shadow: 2px 2px 0 var(--ink, #2c3e50); }
.wn-bnav a:active { translate: 1px 1px; }
@media (max-width: 720px) {
  .wn-bnav { display: flex; }
  body { padding-bottom: 96px; }
  .wa-fab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* التابلت (721-1040): رجّع روابط الهيدر النصية — كانت تختفي بلا بديل */
@media (min-width: 721px) and (max-width: 1040px) {
  .wa-nav { display: flex !important; gap: 14px; }
  .wa-nav-link { font-size: 13.5px; }
  .wa-tickets-label, .wa-profile-greet { display: none; }
}

/* ── تقليل الحركة: إطفاء كامل لإضافاتنا ── */
@media (prefers-reduced-motion: reduce) {
  .wa-logo-wrap, .wa-nav, .wa-hdr-actions,
  .wa-pagehead-eyebrow, .wa-pagehead-title, .wa-pagehead-sub, .gd-hero .gd-title, .ac-hero,
  .reveal.is-in .shop-pkg, .reveal.is-in .shop-info-cell, .reveal.is-in .ln-test-card,
  .reveal.is-in .gd-fact, .reveal.is-in .gd-step,
  .wa-icbtn svg, .wa-tickets.is-bump, .wa-cta-star, .wa-cta-strip .btn-pri svg {
    animation: none !important;
  }
  .wn-skip { transition: none; }
  .btn-pri:active, .btn-ghost:active, .btn-sm:active,
  .ck-coupon-btn:active, .checkout-pay:active, .wa-cats-more:active,
  .shop-coupon-form button:active { animation: none !important; translate: 0 0; }
}