/* Косметика идентичности игрока (ник + аватар), видимая по всему сайту.
   Применяется классами 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;
}

/* ── Аватар: свечение ───────────────────────────────────────── */
/* Свечение и рамки рисуются через filter: drop-shadow(), а не box-shadow.
   drop-shadow повторяет реальную (альфа) форму отрисованного аватара — круг,
   скруглённый квадрат или прямой квадрат — поэтому свечение всегда совпадает
   с формой картинки. box-shadow же зависел от border-radius обёртки и давал
   рассинхрон формы (круглый аватар — квадратное свечение). Работает одинаково,
   навешан ли класс на <img> или на обёртку-контейнер. */
.pc-avatar--glow {
  filter:
    drop-shadow(0 0 5px var(--pc-glow, #dc3545))
    drop-shadow(0 0 3px var(--pc-glow, #dc3545));
}

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

/* ── Аватар: рамки (пресеты) ────────────────────────────────── */
/* Рамка = тонкая цветная обводка по краю самого изображения (border повторяет
   его форму) + мягкое свечение через drop-shadow (тоже по форме аватара). */
.pc-avatar--frame img,
img.pc-avatar--frame {
  border-style: solid !important;
  border-width: 2px !important;
}

.pc-frame-gold  { filter: drop-shadow(0 0 3px #f7d774) drop-shadow(0 0 8px rgba(247, 215, 116, 0.55)); }
.pc-frame-gold  img, img.pc-frame-gold  { border-color: #f7d774 !important; }

.pc-frame-neon  { filter: drop-shadow(0 0 3px #22d3ee) drop-shadow(0 0 9px rgba(34, 211, 238, 0.6)); }
.pc-frame-neon  img, img.pc-frame-neon  { border-color: #22d3ee !important; }

.pc-frame-frost { filter: drop-shadow(0 0 3px #7dd3fc) drop-shadow(0 0 8px rgba(125, 211, 252, 0.5)); }
.pc-frame-frost img, img.pc-frame-frost { border-color: #7dd3fc !important; }

.pc-frame-ember { filter: drop-shadow(0 0 3px #fb923c) drop-shadow(0 0 9px rgba(249, 115, 22, 0.55)); }
.pc-frame-ember img, img.pc-frame-ember { border-color: #fb923c !important; }

.pc-frame-royal { filter: drop-shadow(0 0 3px #a78bfa) drop-shadow(0 0 9px 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%   { filter: drop-shadow(0 0 3px #ff004c) drop-shadow(0 0 9px rgba(255, 0, 76, 0.6)); }
  25%  { filter: drop-shadow(0 0 3px #ffe000) drop-shadow(0 0 9px rgba(255, 224, 0, 0.6)); }
  50%  { filter: drop-shadow(0 0 3px #17c964) drop-shadow(0 0 9px rgba(23, 201, 100, 0.6)); }
  75%  { filter: drop-shadow(0 0 3px #00b4ff) drop-shadow(0 0 9px rgba(0, 180, 255, 0.6)); }
  100% { filter: drop-shadow(0 0 3px #ff004c) drop-shadow(0 0 9px 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% { filter: drop-shadow(0 0 3px #34d399) drop-shadow(0 0 11px rgba(52, 211, 153, 0.55)); }
  50%      { filter: drop-shadow(0 0 3px #818cf8) drop-shadow(0 0 13px 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%   { filter: drop-shadow(0 -3px 8px #a78bfa) drop-shadow(0 0 2px rgba(167, 139, 250, 0.6)); }
  25%  { filter: drop-shadow(3px 0 8px #a78bfa) drop-shadow(0 0 2px rgba(167, 139, 250, 0.6)); }
  50%  { filter: drop-shadow(0 3px 8px #a78bfa) drop-shadow(0 0 2px rgba(167, 139, 250, 0.6)); }
  75%  { filter: drop-shadow(-3px 0 8px #a78bfa) drop-shadow(0 0 2px rgba(167, 139, 250, 0.6)); }
  100% { filter: drop-shadow(0 -3px 8px #a78bfa) drop-shadow(0 0 2px rgba(167, 139, 250, 0.6)); }
}

/* Уважение к «уменьшить движение»: отключаем анимации, статика остаётся. */
@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-frame-rainbow,
  .pc-frame-rainbow img,
  img.pc-frame-rainbow,
  .pc-frame-aurora,
  .pc-frame-spin {
    animation: none !important;
  }
}