/* rb.css — BorderGlow + GooeyNav بـCSS عاديّ. الأصلُ React+Tailwind،
   والموقع صفحاتٌ ثابتة بلا بناء. كلُّ خروجٍ عن الأصل معلَّمٌ `OX:`،
   والتفصيل في claude/react-bits.md. */

/* OX: الوهج الخارجيّ يتجاوز البطاقة ٣٦ بكسلا، فكان يُخرج صفحةَ
   جوال ٣٩٠ خمسةَ عشر بكسلا إلى الجنب. و`clip` لا `hidden` —
   لأنّ `hidden` يُبطل `position:sticky` في الرأس. */
html { overflow-x: clip; }

/* ==================== BorderGlow ==================== */

.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 105deg;
  --bg-radius: 22px;
  --glow-radius: 36;
  --glow-intensity: 1;
  --cone-spread: 25;
  --glow-color: 188 86% 68%;
  --c1: #22d3ee;
  --c2: #ff2fb0;
  --c3: #4cc9f0;
  position: relative;
  /* OX: لا خلفيّة ولا إطار ولا ظلّ هنا — البطاقة تُنسّق نفسَها في
     الموقع، والمكوّن **يُضيف** وهجا فوقها لا يُعيد تصميمها. */
}

/* الحلقة المضيئة: قوسٌ مخروطيّ يدور مع زاوية المؤشّر، مقصوصٌ على
   الحافّة بقناعٍ مزدوج (الحشوة تُستثنى فيبقى الإطار وحده). */
.border-glow-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--cursor-angle) at 50% 50%,
    transparent 0deg,
    var(--c1) calc(var(--cone-spread) * .45deg),
    var(--c3) calc(var(--cone-spread) * 1deg),
    var(--c2) calc(var(--cone-spread) * 1.8deg),
    transparent calc(var(--cone-spread) * 2.7deg));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: calc(var(--edge-proximity) / 100 * var(--glow-intensity));
  pointer-events: none;
  z-index: 3;
}

/* الوهج الخارجيّ */
.border-glow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    0 0 calc(var(--glow-radius) * 1px) hsl(var(--glow-color) / calc(var(--edge-proximity) / 100 * .55)),
    0 0 calc(var(--glow-radius) * .45px) hsl(var(--glow-color) / calc(var(--edge-proximity) / 100 * .40));
}

/* شريطٌ ناعم تحت المؤشّر داخل البطاقة */
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(160px 160px at var(--px, 50%) var(--py, 50%),
    hsl(var(--glow-color) / .16), transparent 70%);
  opacity: calc(var(--edge-proximity) / 100);
}

/* ما لم يكن المؤشّر فوقها فلا وهج — والتلاشي بطيءٌ كي لا يُقطع */
.border-glow-card:not(:hover)::before,
.border-glow-card:not(:hover)::after,
.border-glow-card:not(:hover) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* غلافُ البطاقة: يحمل الوهج وحده، والبطاقة داخله كما هي */
.gwrap { position: relative; display: flex; border-radius: var(--r2, 18px) }
.gwrap[hidden] { display: none }
.gwrap > .game { flex: 1; min-width: 0 }


/* ==================== GooeyNav ==================== */

.gooey-nav-container {
  position: relative;
  /* OX: ألوان الجزيئات من متغيّرات الهوية، فتتبع اختيارَ المستخدم */
  --color-1: var(--a1, #22d3ee);
  --color-2: var(--a2, #ff2fb0);
  --color-3: var(--a-mid, #4cc9f0);
  --color-4: #ffffff;
}
.gooey-nav-container nav { position: relative }
.gooey-nav-container nav ul {
  display: flex; list-style: none; margin: 0; padding: 0;
  position: relative; z-index: 3; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.gooey-nav-container nav ul li {
  position: relative; border-radius: 8px; cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
  user-select: none;
}
.gooey-nav-container nav ul li a {
  display: inline-block;
  padding: 0.6em 1em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.gooey-nav-container nav ul li a:focus-visible { outline: none }
.gooey-nav-container nav ul li a:focus-visible::after {
  content: ""; position: absolute; inset: -2px; border-radius: 10px;
  border: 2px solid var(--a1, #22d3ee);
}
.gooey-nav-container nav ul li::after {
  content: ""; position: absolute; inset: 0; border-radius: 8px;
  background: #fff; opacity: 0; transform: scale(0);
  transition: all .3s ease; z-index: -1;
}
.gooey-nav-container nav ul li.active { color: #000; text-shadow: none }
.gooey-nav-container nav ul li.active::after { opacity: 1; transform: scale(1) }

.gooey-nav-container .effect {
  position: absolute; opacity: 1; pointer-events: none;
  display: grid; place-items: center; z-index: 1;
}
.gooey-nav-container .effect.text { color: #fff; transition: color .3s ease }
.gooey-nav-container .effect.text.active { color: #000 }
/* OX: الأصل `filter: blur(7px) contrast(100) blur(0)` فوق صندوقٍ
   أسود مع `mix-blend-mode: lighten` — يحتاج صفحةً سوداء خلفه،
   وداخل حبّةٍ زجاجية يظهر **مستطيلٌ أسود** مكان الأثر. فصار فلتر
   SVG يعمل على قناة ألفا: نفس الشكل بلا صندوق. */
.gooey-nav-container .effect.filter { filter: var(--gooey-filter) }
/* OX: حُذفت قاعدة `.effect.filter::before` كلُّها — هي الصندوق الأسود. */
.gooey-nav-container .effect.filter::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  transform: scale(0); opacity: 0; z-index: -1; border-radius: 9999px;
}
.gooey-nav-container .effect.active::after { animation: ox-goo-pill .3s ease both }
@keyframes ox-goo-pill { to { transform: scale(1); opacity: 1 } }

/* OX: `.particle` و`.point` اسمان عامّان جدّا في موقعٍ فيه أصنافٌ
   محجوزة، فحُصرا داخل `.gooey-nav-container`. */
.gooey-nav-container .particle,
.gooey-nav-container .point {
  display: block; opacity: 0; width: 20px; height: 20px;
  border-radius: 9999px; transform-origin: center;
}
.gooey-nav-container .particle {
  --time: 5s;
  position: absolute; top: calc(50% - 8px); left: calc(50% - 8px);
  animation: ox-goo-particle calc(var(--time)) ease 1 -350ms;
}
.gooey-nav-container .point {
  background: var(--color); opacity: 1;
  animation: ox-goo-point calc(var(--time)) ease 1 -350ms;
}
@keyframes ox-goo-particle {
  0%   { transform: rotate(0deg) translate(calc(var(--start-x)), calc(var(--start-y))); opacity: 1; animation-timing-function: cubic-bezier(.55,0,1,.45) }
  70%  { transform: rotate(calc(var(--rotate) * .5)) translate(calc(var(--end-x)), calc(var(--end-y))); opacity: 1; animation-timing-function: ease }
  85%  { transform: rotate(calc(var(--rotate) * .66)) translate(calc(var(--end-x)), calc(var(--end-y))); opacity: 1 }
  100% { transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * .5), calc(var(--end-y) * .5)); opacity: 1 }
}
@keyframes ox-goo-point {
  0%   { transform: scale(0); opacity: 0; animation-timing-function: cubic-bezier(.55,0,1,.45) }
  25%  { transform: scale(calc(var(--scale) * .25)) }
  38%  { opacity: 1 }
  65%  { transform: scale(var(--scale)); opacity: 1; animation-timing-function: ease }
  85%  { transform: scale(var(--scale)); opacity: 1 }
  100% { transform: scale(0); opacity: 0 }
}

/* داخل حبّة الرأس الزجاجية */
.gooey-nav--pill { font-size: 14px; font-weight: 450; line-height: 14px }
.gooey-nav--pill nav ul { gap: 4px; padding: 0 }
.gooey-nav--pill nav ul li a { padding: 11px 16px }

:root[data-mode="light"] .gooey-nav-container nav ul { color: #131a2b; text-shadow: none }
:root[data-mode="light"] .gooey-nav-container nav ul li::after { background: #131a2b }
:root[data-mode="light"] .gooey-nav-container nav ul li.active { color: #fff }
:root[data-mode="light"] .gooey-nav-container .effect.text { color: #131a2b }
:root[data-mode="light"] .gooey-nav-container .effect.text.active { color: #fff }
:root[data-mode="light"] .gooey-nav-container .effect.filter::after { background: #131a2b }

/* الرأس: الحبّة من 1280 لا من 1024 — عند 1024 تلامس الشعارُ
   والقائمةُ وحبّةُ الدخول بلا فراغ. */
.navpill { display: none }
@media (min-width: 1280px) {
  .navpill {
    display: flex; align-items: center; gap: 16px;
    height: 52px; padding-inline: 4px 20px;
    background: rgba(10,7,7,0.35); border-radius: 11px; backdrop-filter: blur(17px);
  }
  .navlinks { display: none !important }
}