/* OX GAMES — خلفية الموقع «حقل النيون»
   ================================================================
   طبقاتُ الخلفية وحدها. لا واجهة هنا: لا شريط ولا نصّ ولا زرّ ولا
   بطاقة. الواجهة تجلس فوقها عند z-index 5 أو أكثر.

   ## الترتيب من الخلف إلى الأمام

   | z | الطبقة | المدى | ما هي |
   |---|---|---|---|
   | ‎-2‎ | `body::before` | الشاشة، ثابتة | صبغةٌ رأسية خافتة |
   | ‎-1‎ | `body::after` | الشاشة، ثابتة | وهجٌ من أسفل الوسط |
   | — | `body` | الصفحة كلّها | التدرّج الأساس + أربعة أوهاج |
   | ‎0‎ | `#bg-stars` | الشاشة، ثابتة | حقل النجوم (WebGL) |
      | ‎2‎ | `.hero-sparkles` | الواجهة | شررٌ صغير |

   ## ولماذا `--n1` و`--n2` و`--nm` لا `--a1` و`--a2` مباشرة

   الورقةُ تقول: اقرأ ألوان الهوية ولا تكتب لونا ثابتا. وهو الصحيح.
   لكنّ الموقع يعرّف `--a1` و`--a2` في **موضعين مختلفين**: الرئيسية
   تعرّفهما لكلّ هوية من الستّ، و`site.css` تعرّفهما ثابتين (سماويّ
   وأزرق) لصفحات الحساب والمجلس. فلو كتبتُ هنا
   `:root{--a2:#ff2fb0}` لانقلبت أزرار «حسابي» والمجلس والمتجر إلى
   الوردي — **وهذه واجهة، والمطلوب خلفية**.

   فالخلفية تأخذ رموزَها هي، بنفس القيم التي في الورقة حرفا حرفا،
   وتتبدّل بـ`data-accent` على **كلّ** صفحة لا على الرئيسية وحدها.
   ولا يتغيّر لون زرٍّ واحد في الموقع.
   ================================================================ */

/* ===== ١) نظام اللون ===== */
:root,
:root[data-accent="neon"]   { --n1:#22d3ee; --nm:#4cc9f0; --n2:#ff2fb0 } /* سماويّ · أزرق · وردي */
:root[data-accent="gold"]   { --n1:#f5c451; --nm:#fbbf24; --n2:#f97316 } /* ذهبيّ · عنبريّ · برتقاليّ */
:root[data-accent="mint"]   { --n1:#34d399; --nm:#2dd4bf; --n2:#22d3ee } /* نعناعيّ · فيروزيّ · سماويّ */
:root[data-accent="violet"] { --n1:#a855f7; --nm:#818cf8; --n2:#22d3ee } /* بنفسجيّ · نيليّ · سماويّ */
:root[data-accent="red"]    { --n1:#fb7185; --nm:#fb923c; --n2:#f59e0b } /* ورديّ · برتقاليّ · عنبريّ */
:root[data-accent="mono"]   { --n1:#dbe3ef; --nm:#cbd5e1; --n2:#94a3b8 } /* فضّيّ · فاتح · رَماديّ */

/* ===== ٢) الأساس =====
   `html body` لا `body`: الرئيسية تعرّف خلفيّة جسمها في وسمِ
   `<style>` داخلها، وهذا الملفّ يُحمَّل قبله. فبتخصيصٍ أعلى نغلبه
   بلا حاجةٍ إلى `!important` ولا إلى ترتيبٍ هشّ في الترويسة.

   والنِّسب (١٤٪ · ١٠٪ · ٨٪ · ١٢٪) منخفضةٌ عن قصد: السماويّ والورديّ
   أشدّ سطوعا من كُحليّ التصميم الأصلي، فلو رُفعت صارت الصفحةُ
   مغسولةً بلون بدل أن تبقى سوداء فيها نيون. */
html body {
  background-color: var(--bg, #0a0c14);
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--n1) 14%, transparent), transparent 26%),
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--n2) 10%, transparent), transparent 24%),
    radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--n1) 8%, transparent), transparent 30%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--nm) 12%, transparent), transparent 38%),
    linear-gradient(180deg, #06070d 0%, #080a11 36%, var(--bg, #0a0c14) 68%, var(--bg2, #0e111c) 100%);
  overflow-x: clip;
}

/* الصفحةُ كانت تنزلق أُفقيّا ٦٢ بكسلا على جوالٍ بعرض ٣٩٠، فمُنع
   الانزلاق على الجسم و`html` معا.

   و`clip` لا `hidden` **على الاثنين**: `overflow-x:hidden` يجعل
   `overflow-y` المحسوبة `auto`، فيصير العنصر **حاوية تمرير**،
   فيلتصق الشريط الأعلى بصندوقها لا بالشاشة — فيمضي مع الصفحة بدل
   أن يثبت. قِيس على الرئيسية: بعد تمرير ٦٠٠ بكسل كان الشريط عند
   ‎-٤٢٥‎. كُتب هذا التعليق عن `html` وحدها، والجسمُ وقع في نفس
   الفخّ. و`clip` يقصّ بلا أن يُنشئ حاوية، فيبقى الالتصاق سليما. */
html { overflow-x: clip; }

html body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--nm) 3%, transparent) 55%,
    color-mix(in srgb, var(--n2) 6%, transparent) 100%);
}
html body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at 50% 100%,
    color-mix(in srgb, var(--n1) 9%, transparent), transparent 42%);
}

/* الرئيسية كانت تحمل هالاتها وشبكتها القديمة عند ‎-2‎ و‎-1‎ — وهي
   بديلُ ما بُني هنا، فلو بقيت لاجتمع وهجان فتُغسل الصفحة. */
html body .aura,
html body .grid-bg { display: none !important; }

/* ===== ٣) حقل النجوم ===== */
#bg-stars {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
}
#bg-stars canvas { display: block; width: 100%; height: 100%; }

/* ===== ٤) لا طبقةَ غبار =====
   كانت هنا لوحةٌ ثنائيّة تُمسح وتُرسم كلَّ إطار فوق صندوق الواجهة.
   رُفعت: لوحةٌ تتغيّر كلَّ إطار فوق تدرّجٍ ملوّن تُجبر المتصفّح على
   إعادة رسم ما تحتها معها، فيرفّ التدرّج — على كرتٍ دون كرت. أمسكه
   صاحبُ الموقع بحذف `#hero-dust` من المِعراض فسكن اللون. */

/* ===== ٥) الشرر ===== */
.hero-sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .8 }
.sparkle {
  position: absolute;
  display: block;
  opacity: .9;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--n1) 35%, transparent));
}
/* نجمةٌ رباعية: أبيض ← أزرق سماويّ */
.sparkle-star {
  width: 16px; height: 16px;
  background: linear-gradient(135deg, #ffffff, var(--nm));
  clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
}
/* نقطة: سماويّ ← أزرق */
.sparkle-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--n1), var(--nm));
}
/* معيّن: ورديّ ← أبيض */
.sparkle-diamond {
  width: 12px; height: 12px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--n2), #ffffff);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--n2) 40%, transparent));
}
.sparkle:nth-child(1) { top: 18%; left: 11% }
.sparkle:nth-child(2) { top: 28%; left: 18% }
.sparkle:nth-child(3) { top: 16%; right: 13% }
.sparkle:nth-child(4) { top: 30%; right: 20% }
.sparkle:nth-child(5) { top: 62%; left: 7% }
.sparkle:nth-child(6) { top: 70%; right: 9% }

/* ===== ٦) إشارة التمرير ===== */
.scroll-indicator {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
.scroll-indicator .wheel {
  width: 4px; height: 10px;
  border-radius: 2px;
  background: var(--n1);
  box-shadow: 0 0 10px color-mix(in srgb, var(--n1) 60%, transparent);
  animation: ox-scroll-wheel 2s ease-out infinite;
}
@keyframes ox-scroll-wheel {
  0%   { opacity: 1; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(20px) }
}

/* ===== ٧) الوضع الفاتح =====
   النجومُ ضوءٌ يُضاف: يلمع على صفحةٍ سوداء ويختفي على بيضاء.
   فتُخفّف الأوهاج، ويُنقص وضوحُ النجوم، ويتبدّل مزجُها من الجمعيّ
   إلى العاديّ (في `neon.js`) وإلا صارت بيضاء كلّها. */
html[data-mode="light"] body {
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--n1) 10%, transparent), transparent 26%),
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--n2) 7%, transparent), transparent 24%),
    linear-gradient(180deg, var(--bg2, #eef1f7) 0%, var(--bg, #e4e7ee) 100%);
}
html[data-mode="light"] body::before,
html[data-mode="light"] body::after { opacity: .5 }
html[data-mode="light"] #bg-stars  { opacity: .55 }

/* ===== ٨) السكون =====
   من طلب سكونا فله السكون. والنجومُ تبقى معروضةً ساكنة — صفحةٌ
   عارية ليست «سكونا»، هي خلفيّةٌ مفقودة. */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
/* وعنصرٌ يبدأ شفّافا ويظهر بحركةِ دخول يبقى مخفيّا لو أُلغيت الحركة */
body.reduce-motion .reveal,
body.reduce-motion .opacity-0 { opacity: 1 !important; transform: none !important }