/* ═══ ЗНАЧКИ EQUALS ════════════════════════════════════════ */
.badges-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:16px;
  /* margin-top 16→32: легендарные значки имеют box-shadow blur 28px,
     который вылезал вверх в заголовок «ЗНАЧКИ» — теперь есть запас. */
  margin-top:32px;
  /* padding-top чтоб тень не клипалась если родитель overflow:hidden */
  padding-top:8px;
}
.badge-card{
  position:relative;
  padding:18px 12px 14px;
  border-radius:14px;
  text-align:center;
  cursor:pointer;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  border:1px solid var(--border);
  background:var(--card);
  overflow:hidden;
}
.badge-card:hover{transform:translateY(-4px);}

/* Заблокированные — тусклые */
.badge-locked{opacity:.45; filter:grayscale(.6);}
.badge-locked:hover{opacity:.7;}

/* Полученные — с подсветкой по редкости */
.badge-icon{font-size:38px; line-height:1; margin-bottom:8px; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));}
.badge-name{font-family:'Bebas Neue',sans-serif; font-size:14px; letter-spacing:1.5px; color:var(--text); line-height:1.1; margin-bottom:3px;}
.badge-rarity{font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);}

/* Редкости — цветные рамки/свечение */
.rarity-common{border-color:#6b7280;}
.rarity-common .badge-rarity{color:#9ca3af;}

.rarity-rare{border-color:#3b82f6; box-shadow:0 0 0 1px rgba(59,130,246,.2), 0 8px 24px rgba(59,130,246,.12);}
.rarity-rare .badge-rarity{color:#60a5fa;}
.rarity-rare:hover{box-shadow:0 0 0 1px rgba(59,130,246,.4), 0 12px 32px rgba(59,130,246,.25);}

.rarity-epic{border-color:#a855f7; box-shadow:0 0 0 1px rgba(168,85,247,.25), 0 8px 24px rgba(168,85,247,.15);}
.rarity-epic .badge-rarity{color:#c084fc;}
.rarity-epic::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(168,85,247,.18) 0%, transparent 60%);
  pointer-events:none;
}

.rarity-legendary{
  border-color:#c8a84b;
  box-shadow:0 0 0 1px rgba(200,168,75,.35), 0 8px 28px rgba(200,168,75,.2);
}
.rarity-legendary .badge-rarity{color:#c8a84b;}
.rarity-legendary .badge-name{color:#f0d77a;}
.rarity-legendary::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(200,168,75,.12) 0%, transparent 50%, rgba(200,168,75,.08) 100%);
  pointer-events:none;
}
.rarity-legendary .badge-icon{
  animation:badgeShine 3s ease-in-out infinite;
}
@keyframes badgeShine{
  0%,100%{filter:drop-shadow(0 4px 10px rgba(200,168,75,.3));}
  50%{filter:drop-shadow(0 4px 18px rgba(200,168,75,.7));}
}

/* Мини-значки рядом с именем в профиле/публичном профиле */
.badge-chips{display:inline-flex; gap:4px; vertical-align:middle; margin-left:8px;}
.badge-chip{
  font-size:15px; line-height:1;
  cursor:pointer;
  transition:transform .2s;
}
.badge-chip:hover{transform:scale(1.25);}

@media (max-width:640px){
  .badges-grid{grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:8px;}
  .badge-card{padding:14px 8px 10px;}
  .badge-icon{font-size:30px;}
  .badge-name{font-size:12px;}
}