/* Klyro · Хэллоуин 2026 — награды: значки у имени, украшения аватарок, арт достижений.
   Подключается для всех пользователей, чтобы награды победителей видели все. */

/* ---------- 2. Бейджи у имени и украшения аватарок ---------- */

.vbadge.badge-hw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  vertical-align: -2px;
  cursor: pointer;
}
.vbadge.badge-hw svg { display: block; }

/* Украшения аватарки: рисунок вокруг аватара (крылья, паук, паутина, тыква) */
.av[class*="frame-hw-"],
.avatar-xl[class*="frame-hw-"] {
  position: relative;
  overflow: visible !important;
  border-color: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}
.av[class*="frame-hw-"] > img,
.avatar-xl[class*="frame-hw-"] > img { border-radius: 50%; }
.av[class*="frame-hw-"]::before,
.avatar-xl[class*="frame-hw-"]::before {
  content: "";
  position: absolute;
  inset: -30%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.frame-hw-bat::before { background-image: url("art/deco-bat.svg?v=3"); }
.frame-hw-spider::before { background-image: url("art/deco-spider.svg?v=3"); }
.frame-hw-web::before { background-image: url("art/deco-web.svg?v=3"); }
.frame-hw-pumpkin::before { background-image: url("art/deco-pumpkin.svg?v=3"); }
/* точка «в сети» поверх украшения */
.av[class*="frame-hw-"] .online-dot { z-index: 3; }

/* Арт на странице достижений */
.ach-hw-art {
  display: grid;
  place-items: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 35%, #3b2160, #140b26);
}
.ach-hw-art.is-top { background: radial-gradient(circle at 50% 35%, #7c2d12, #1c0b05); }
.ach-hw-year { font: 700 11px/1 system-ui, sans-serif; color: #fdba74; letter-spacing: .12em; }


.ach-hw-art.is-top { background: radial-gradient(circle at 50% 35%, #4a1d0c, #120805); }
.ach-hw-icon { width: 72%; height: auto; border-radius: 24%; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .8); }
.ach-hw-art.is-top .ach-hw-year { display: none; }