#particles span { position: absolute; display: block; opacity: 0; }

/* ✅ خلفية الساحة صارت gradient ثابت (بدون صورة) — لمنع الوميض
   الصورة الحقيقية تُعرض فوق الطاولة داخل .board-area فقط */
#arena-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg1, #0a0e1a), var(--bg2, #050505));
}

#arena-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

/* ============ جزيئات الخلفية ============ */

/* غبار ذهبي (عصور وسطى) */
#particles.dust span {
  width: 3px; height: 3px; border-radius: 50%;
  background: #d4af37; box-shadow: 0 0 8px #ffb347;
  animation: drift linear infinite;
}
@keyframes drift {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  20% { opacity: 0.9; }
  100% { transform: translateY(-10vh) translateX(60px); opacity: 0; }
}

/* شرارات (بركان) */
#particles.embers span {
  width: 4px; height: 4px; border-radius: 50%;
  background: #ff7043; box-shadow: 0 0 8px #ff5722;
  bottom: -10px; animation: rise linear infinite;
}
@keyframes rise {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-110vh) scale(1.2); opacity: 0; }
}

/* ثلج */
#particles.snow span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #eaf6ff; box-shadow: 0 0 6px #a8dadc;
  top: -10px; animation: fall linear infinite;
}
@keyframes fall {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(110vh) translateX(40px); opacity: 0.2; }
}

/* أوراق (غابات) */
#particles.leaves span {
  width: 8px; height: 5px; background: #52b788;
  border-radius: 60% 40% 50% 50%; top: -10px;
  animation: leafFall linear infinite;
}
@keyframes leafFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg) translateX(-60px); opacity: 0; }
}

/* نجوم (فضائية) */
#particles.stars span {
  width: 2px; height: 2px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px #fff, 0 0 12px #f72585;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.6); }
}