/* Косметика идентичности игрока (ник + аватар), видимая по всему сайту.
   Применяется классами pc-name(--<эффект>) и pc-avatar(--glow|--glow-pulse|
   --frame + pc-frame-<name>). Доступность решается на сервере, CSS лишь рисует. */

/* ── Ник: базовый слой для эффектов на палитре игрока ───────── */
.pc-name--gradient,
.pc-name--animated,
.pc-name--wave,
.pc-name--pulse,
.pc-name--shine,
.pc-name--glitch,
.pc-name--rainbow {
  background-image: var(--pc-name-gradient, linear-gradient(90deg, #dc3545, #ff6b78));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* Перелив (движение градиента слева направо) */
.pc-name--animated { animation: pc-name-flow 4.5s linear infinite; }
@keyframes pc-name-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Качание (плавный ход градиента туда-обратно) */
.pc-name--wave { animation: pc-name-flow 3s ease-in-out infinite alternate; }

/* Пульсация (яркость/насыщенность) */
.pc-name--pulse { animation: pc-name-pulse 1.8s ease-in-out infinite; }
@keyframes pc-name-pulse {
  0%, 100% { filter: brightness(1) saturate(1); opacity: 1; }
  50%      { filter: brightness(1.45) saturate(1.35); opacity: 0.82; }
}

/* Блик (глянцевая полоса пробегает по нику) */
.pc-name--shine {
  background-image:
    linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.92) 50%, transparent 80%),
    var(--pc-name-gradient, linear-gradient(90deg, #dc3545, #ff6b78));
  background-size: 220% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  animation: pc-name-shine 3.2s linear infinite;
}
@keyframes pc-name-shine {
  0%   { background-position: 150% center, center; }
  100% { background-position: -50% center, center; }
}

/* Глитч (перелив + лёгкое дрожание/скос) */
.pc-name--glitch {
  animation: pc-name-flow 4.5s linear infinite, pc-name-glitch 1.6s steps(3) infinite;
}
@keyframes pc-name-glitch {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-1px, 1px); }
  40%      { transform: translate(1px, -1px) skewX(-3deg); }
  60%      { transform: translate(-1px, 0); }
  80%      { transform: translate(1px, 1px) skewX(3deg); }
}

/* Радуга (встроенная палитра, цвета игрока не нужны) */
.pc-name--rainbow {
  background-image: linear-gradient(90deg,
    #ff004c, #ff8a00, #ffe000, #17c964, #00b4ff, #7b61ff, #ff004c);
  background-size: 300% auto;
  animation: pc-name-flow 6s linear infinite;
}

/* ── Аватар: свечение ───────────────────────────────────────── */
.pc-avatar--glow {
  border-radius: inherit;
  box-shadow: 0 0 10px 2px var(--pc-glow, #dc3545);
}
.pc-avatar--glow img,
img.pc-avatar--glow {
  border-color: var(--pc-glow, #dc3545) !important;
  box-shadow: 0 0 12px 2px var(--pc-glow, #dc3545);
}

/* Пульсирующее свечение */
.pc-avatar--glow-pulse { animation: pc-avatar-glow-pulse 1.8s ease-in-out infinite; }
.pc-avatar--glow-pulse img,
img.pc-avatar--glow-pulse { animation: pc-avatar-glow-pulse 1.8s ease-in-out infinite; }
@keyframes pc-avatar-glow-pulse {
  0%, 100% { box-shadow: 0 0 8px 1px var(--pc-glow, #dc3545); }
  50%      { box-shadow: 0 0 20px 6px var(--pc-glow, #dc3545); }
}

/* ── Аватар: рамки (пресеты) ────────────────────────────────── */
.pc-avatar--frame {
  border-radius: inherit;
}
.pc-avatar--frame img,
img.pc-avatar--frame {
  border-style: solid !important;
  border-width: 2px !important;
}

.pc-frame-gold  { box-shadow: 0 0 0 2px #f7d774, 0 0 12px 1px rgba(247, 215, 116, 0.55); }
.pc-frame-gold  img, img.pc-frame-gold  { border-color: #f7d774 !important; }

.pc-frame-neon  { box-shadow: 0 0 0 2px #22d3ee, 0 0 14px 1px rgba(34, 211, 238, 0.6); }
.pc-frame-neon  img, img.pc-frame-neon  { border-color: #22d3ee !important; }

.pc-frame-frost { box-shadow: 0 0 0 2px #7dd3fc, 0 0 12px 1px rgba(125, 211, 252, 0.5); }
.pc-frame-frost img, img.pc-frame-frost { border-color: #7dd3fc !important; }

.pc-frame-ember { box-shadow: 0 0 0 2px #fb923c, 0 0 14px 1px rgba(249, 115, 22, 0.55); }
.pc-frame-ember img, img.pc-frame-ember { border-color: #fb923c !important; }

.pc-frame-royal { box-shadow: 0 0 0 2px #a78bfa, 0 0 14px 1px rgba(167, 139, 250, 0.55); }
.pc-frame-royal img, img.pc-frame-royal { border-color: #a78bfa !important; }

/* ── Аватар: анимированные рамки ────────────────────────────── */
/* Радужная рамка (перебор цветов) */
.pc-frame-rainbow { animation: pc-frame-rainbow 4s linear infinite; }
.pc-frame-rainbow img, img.pc-frame-rainbow { animation: pc-frame-rainbow-border 4s linear infinite; }
@keyframes pc-frame-rainbow {
  0%   { box-shadow: 0 0 0 2px #ff004c, 0 0 14px 1px rgba(255, 0, 76, 0.6); }
  25%  { box-shadow: 0 0 0 2px #ffe000, 0 0 14px 1px rgba(255, 224, 0, 0.6); }
  50%  { box-shadow: 0 0 0 2px #17c964, 0 0 14px 1px rgba(23, 201, 100, 0.6); }
  75%  { box-shadow: 0 0 0 2px #00b4ff, 0 0 14px 1px rgba(0, 180, 255, 0.6); }
  100% { box-shadow: 0 0 0 2px #ff004c, 0 0 14px 1px rgba(255, 0, 76, 0.6); }
}
@keyframes pc-frame-rainbow-border {
  0%   { border-color: #ff004c; }
  25%  { border-color: #ffe000; }
  50%  { border-color: #17c964; }
  75%  { border-color: #00b4ff; }
  100% { border-color: #ff004c; }
}

/* Аврора (мягкое дыхание зелёный↔фиолетовый) */
.pc-frame-aurora { animation: pc-frame-aurora 6s ease-in-out infinite; }
.pc-frame-aurora img, img.pc-frame-aurora { border-color: #5eead4 !important; }
@keyframes pc-frame-aurora {
  0%, 100% { box-shadow: 0 0 0 2px #34d399, 0 0 16px 2px rgba(52, 211, 153, 0.55); }
  50%      { box-shadow: 0 0 0 2px #818cf8, 0 0 18px 3px rgba(129, 140, 248, 0.6); }
}

/* Орбита (световой блик вращается вокруг аватара) */
.pc-frame-spin { animation: pc-frame-spin 2.5s linear infinite; }
.pc-frame-spin img, img.pc-frame-spin { border-color: #a78bfa !important; }
@keyframes pc-frame-spin {
  0%   { box-shadow: 0 -3px 11px 0 #a78bfa, 0 0 0 2px rgba(167, 139, 250, 0.5); }
  25%  { box-shadow: 3px 0 11px 0 #a78bfa, 0 0 0 2px rgba(167, 139, 250, 0.5); }
  50%  { box-shadow: 0 3px 11px 0 #a78bfa, 0 0 0 2px rgba(167, 139, 250, 0.5); }
  75%  { box-shadow: -3px 0 11px 0 #a78bfa, 0 0 0 2px rgba(167, 139, 250, 0.5); }
  100% { box-shadow: 0 -3px 11px 0 #a78bfa, 0 0 0 2px rgba(167, 139, 250, 0.5); }
}

/* Уважение к «уменьшить движение»: отключаем анимации, статика остаётся. */
@media (prefers-reduced-motion: reduce) {
  .pc-name--animated,
  .pc-name--wave,
  .pc-name--pulse,
  .pc-name--shine,
  .pc-name--glitch,
  .pc-name--rainbow,
  .pc-avatar--glow-pulse,
  .pc-avatar--glow-pulse img,
  img.pc-avatar--glow-pulse,
  .pc-frame-rainbow,
  .pc-frame-rainbow img,
  img.pc-frame-rainbow,
  .pc-frame-aurora,
  .pc-frame-spin {
    animation: none !important;
  }
}