/* Оформление ников, купленное за опыт */
.u-name{ font-weight:600; }

/* одиночный цвет — мягкое свечение вокруг букв */
.u-name.u-glow{
  text-shadow:0 0 8px color-mix(in srgb, var(--glow) 55%, transparent),
              0 0 18px color-mix(in srgb, var(--glow) 30%, transparent);
}
/* запасной вариант для браузеров без color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .u-name.u-glow{ text-shadow:0 0 9px var(--glow); }
}

/* градиент по буквам */
.u-name.u-grad{
  background-clip:text; -webkit-background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  background-size:200% auto; animation:u-slide 5s linear infinite;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.18));
}
@keyframes u-slide{ to{ background-position:200% center; } }

/* частицы вокруг ника */
.u-name.u-fx{ position:relative; }
.u-name.u-fx::before,
.u-name.u-fx::after{
  content:""; position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--fx, #93909A); pointer-events:none; opacity:0;
}
.u-name.u-fx::before{ left:-6px;  top:0.15em; animation:u-spark 2.4s ease-in-out infinite; }
.u-name.u-fx::after{  right:-6px; top:0.55em; animation:u-spark 2.4s ease-in-out infinite 1.2s; }
@keyframes u-spark{
  0%   { opacity:0; transform:translateY(4px) scale(.6); }
  35%  { opacity:1; transform:translateY(-3px) scale(1); }
  100% { opacity:0; transform:translateY(-9px) scale(.5); }
}
/* пыльца падает, пузырьки всплывают — эффекты должны отличаться */
.u-name.u-fx_dust::before,
.u-name.u-fx_dust::after{ animation-name:u-dust; border-radius:1px; }
@keyframes u-dust{
  0%   { opacity:0; transform:translateY(-6px) scale(.5); }
  40%  { opacity:.9; transform:translateY(2px) scale(1); }
  100% { opacity:0; transform:translateY(9px) scale(.5); }
}
.u-name.u-fx_bubbles::before,
.u-name.u-fx_bubbles::after{
  animation-name:u-bubble; background:transparent;
  border:1px solid var(--fx, #93909A); width:5px; height:5px;
}
@keyframes u-bubble{
  0%   { opacity:0; transform:translateY(6px) scale(.4); }
  45%  { opacity:.85; transform:translateY(-2px) scale(1); }
  100% { opacity:0; transform:translateY(-11px) scale(1.2); }
}

/* значок перед ником */
.u-prefix{
  display:inline-flex; vertical-align:-2px; margin-right:5px;
  width:15px; height:15px;
}
.u-prefix svg{ width:100%; height:100%; }

/* людям с чувствительностью к движению анимация не нужна */
@media (prefers-reduced-motion: reduce){
  .u-name.u-grad{ animation:none; }
  .u-name.u-fx::before, .u-name.u-fx::after{ animation:none; opacity:.6; }
}

/* ================= ЗАГРУЗКА ДАННЫХ =================
   Пока данные не пришли с сервера, показываем размытую заглушку вместо
   «Войти» и «Игрок». Иначе интерфейс мигает: сначала гостевой вид,
   потом настоящий. */
.is-loading{
  filter:blur(5px); opacity:.55; pointer-events:none; user-select:none;
  transition:filter .2s ease, opacity .2s ease;
}
.skeleton{
  display:inline-block; border-radius:7px; color:transparent !important;
  background:linear-gradient(90deg, #1C1B1E 25%, #262429 50%, #1C1B1E 75%);
  background-size:200% 100%; animation:sk-shine 1.3s linear infinite;
}
.skeleton *{ visibility:hidden; }
@keyframes sk-shine{ to{ background-position:-200% 0; } }

/* шапка: пока не знаем, вошёл человек или нет, держим место пустым */
.nav-actions.is-pending{ visibility:hidden; }

@media (prefers-reduced-motion: reduce){
  .skeleton{ animation:none; }
}

/* ================= ЗАГЛУШКИ ПРИ ЗАГРУЗКЕ =================
   Серый перелив на месте данных, которые ещё едут с сервера. Скрывает
   и текст, и картинку: иначе человек успевает прочитать «Игрок» и #000000,
   а потом они подменяются на настоящие. */
.sk-on{
  position:relative; overflow:hidden;
  border-radius:8px; color:transparent !important;
  background:linear-gradient(100deg,
    var(--surface-2) 20%, var(--border) 40%, var(--surface-2) 60%) !important;
  background-size:220% 100% !important;
  animation:sk-wave 1.4s linear infinite;
  user-select:none; pointer-events:none;
}
/* прячем содержимое, но держим размеры: без этого блок схлопнется */
.sk-on > *{ visibility:hidden !important; }
.sk-on::after{ content:none; }

/* аватар — круглая заглушка того же размера */
.avatar-slot.sk-on{ border-radius:18px; }

@keyframes sk-wave{ to{ background-position:-220% 0; } }

@media (prefers-reduced-motion: reduce){
  .sk-on{ animation:none; }
}