/* ═══ animated-names ═══ */

/* ── تأثير قوس قزح ── */
@keyframes an-rainbow {
  0%   { color: #ff0000; }
  17%  { color: #ff8800; }
  33%  { color: #ffff00; }
  50%  { color: #00cc00; }
  67%  { color: #0088ff; }
  83%  { color: #8800ff; }
  100% { color: #ff0000; }
}
.an-rainbow { animation: an-rainbow var(--an-speed, 3s) linear infinite; font-weight: 700 !important; }

/* ── تأثير لهب ── */
@keyframes an-fire {
  0%,100% { color: #ff4400; text-shadow: 0 0 6px #ff4400, 0 0 12px #ff8800; }
  50%      { color: #ffcc00; text-shadow: 0 0 10px #ffcc00, 0 0 20px #ff6600; }
}
.an-fire { animation: an-fire var(--an-speed, 3s) ease-in-out infinite; font-weight: 700 !important; }

/* ── تأثير جليد ── */
@keyframes an-ice {
  0%,100% { color: #a8e6ff; text-shadow: 0 0 8px #00cfff, 0 0 16px #0088bb; }
  50%      { color: #ffffff; text-shadow: 0 0 12px #aaeeff, 0 0 24px #0099dd; }
}
.an-ice { animation: an-ice var(--an-speed, 3s) ease-in-out infinite; font-weight: 700 !important; }

/* ── تأثير ذهب ── */
@keyframes an-gold {
  0%,100% { color: #f59e0b; text-shadow: 0 0 6px #f59e0b, 0 0 12px #d97706; }
  50%      { color: #fde68a; text-shadow: 0 0 10px #fde68a, 0 0 20px #f59e0b; }
}
.an-gold { animation: an-gold var(--an-speed, 3s) ease-in-out infinite; font-weight: 700 !important; }

/* ── تأثير نيون ── */
@keyframes an-neon {
  0%,100% { color: #c084fc; text-shadow: 0 0 6px #c084fc, 0 0 14px #7c3aed; }
  50%      { color: #f0abfc; text-shadow: 0 0 10px #f0abfc, 0 0 22px #a855f7; }
}
.an-neon { animation: an-neon var(--an-speed, 3s) ease-in-out infinite; font-weight: 700 !important; }

/* ── تأثير مجرة ── */
@keyframes an-galaxy {
  0%   { color: #818cf8; }
  33%  { color: #c084fc; }
  66%  { color: #38bdf8; }
  100% { color: #818cf8; }
}
.an-galaxy {
  animation: an-galaxy var(--an-speed, 3s) linear infinite;
  font-weight: 700 !important;
  text-shadow: 0 0 8px currentColor;
}

/* ── تأثير موجة (حروف متأرجحة) ── */
.an-wave .an-char { display: inline-block; animation: an-wave-char var(--an-speed, 3s) ease-in-out infinite; }
.an-wave .an-char:nth-child(1n){ animation-delay: calc(var(--i, 0) * 0.1s); }
@keyframes an-wave-char {
  0%,100%{ transform: translateY(0); color: inherit; }
  50%    { transform: translateY(-4px); color: #60a5fa; }
}

/* ── تأثير جليتش ── */
@keyframes an-glitch {
  0%,90%,100% { clip-path: none; transform: none; color: inherit; }
  91% { clip-path: polygon(0 20%,100% 20%,100% 40%,0 40%); transform: translate(-2px); color: #ff0055; }
  93% { clip-path: polygon(0 60%,100% 60%,100% 80%,0 80%); transform: translate(2px);  color: #00ffcc; }
  95% { clip-path: none; transform: none; color: inherit; }
}
.an-glitch { animation: an-glitch var(--an-speed, 3s) linear infinite; font-weight: 700 !important; }

/* ── نافذة إدارة الأسماء ── */
#animNamesModal .an-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--card2); border: 1px solid var(--border);
  margin-bottom: 6px;
}
#animNamesModal .an-user-row .an-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
#animNamesModal .an-user-row .an-uname { flex: 1; font-size: 13px; font-weight: 600; }
#animNamesModal .an-effect-preview { font-size: 14px; font-weight: 700; margin: 2px 0 8px; }
#animNamesModal .an-user-row .an-remove-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: none; color: #ef4444; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center; transition: background .12s;
}
#animNamesModal .an-remove-btn:hover { background: rgba(239,68,68,.1); }
#animNamesModal .an-add-row { display: flex; gap: 8px; margin-top: 12px; }
#animNamesModal .an-add-row input {
  flex: 1; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--card2); color: var(--text);
  font-size: 13px; outline: none;
}
#animNamesModal .an-add-row input:focus { border-color: #7c3aed; }
#animNamesModal .an-add-btn {
  padding: 9px 16px; border-radius: 10px; background: #7c3aed;
  color: #fff; border: none; font-weight: 700; cursor: pointer; font-size: 13px;
  transition: opacity .15s;
}
#animNamesModal .an-add-btn:hover { opacity: .88; }
#animNamesModal .an-preview-area {
  padding: 14px; border-radius: 12px; background: var(--card2);
  border: 1px solid var(--border); text-align: center; margin-bottom: 14px;
}