/* Friends (templates/friends-page.html.twig). */
.lsx-friends { max-width: 820px; margin: 0 auto; padding: 1.5rem; border-radius: 18px; background: linear-gradient(180deg, #1c1a4a, #0f1229); color: #e8ebff; }
.lsx-friends a:not(.btn) { color: #fff1b8; }
.lsx-friends h1 { font-weight: 900; color: #fff; }
.lsx-friends h2 { margin: 1.5rem 0 0.6rem; font-size: 1.15rem; font-weight: 800; color: #fff1b8; }
.lsx-friends h2 small { color: #a5acd6; font-weight: 600; }
.lsx-friends__secret {
  padding: 0 0.35rem;
  border-radius: 6px;
  background: linear-gradient(90deg, #22d3ee, #a855f7, #f472b6, #facc15);
  background-size: 300% 100%;
  color: #0b1026;
  font-weight: 900;
  animation: lsx-friends-shift 4s linear infinite;
}
@keyframes lsx-friends-shift { to { background-position: 300% 0; } }
.lsx-friends__levels { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.lsx-friends__levels li { padding: 0.35rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 0.85rem; }
.lsx-friends__levels small { color: #a5acd6; }
.lsx-friends__hearts { letter-spacing: -0.15em; }
.lsx-friends__add { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.lsx-friends__add input { max-width: 22rem; }
.lsx-friends__status { margin-top: 0.6rem; padding: 0.4rem 0.8rem; border-radius: 8px; font-weight: 700; }
.lsx-friends__status.is-ok { background: rgba(74, 222, 128, 0.15); color: #86efac; }
.lsx-friends__status.is-error { background: rgba(248, 113, 113, 0.15); color: #fca5a5; }
.lsx-friends__list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.lsx-friend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 5px solid #a5acd6;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.lsx-friend.is-level-2 { border-left-color: #60a5fa; }
.lsx-friend.is-level-3 { border-left-color: #c084fc; }
.lsx-friend.is-level-4 { border-left-color: #facc15; box-shadow: 0 0 14px rgba(250, 204, 21, 0.2); }
.lsx-friend__main { display: flex; flex-direction: column; min-width: 9rem; }
.lsx-friend__name { font-weight: 800; color: #fff; }
.lsx-friend__level { font-size: 0.8rem; color: #c7cbff; }
.lsx-friend__progress { flex: 1; min-width: 10rem; font-size: 0.75rem; color: #a5acd6; }
.lsx-friend__bar { height: 8px; margin-bottom: 0.2rem; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.lsx-friend__bar span { display: block; height: 100%; background: linear-gradient(90deg, #f472b6, #facc15); }
.lsx-friend__chance { font-weight: 900; color: #f0abfc; }
.lsx-friends__empty { color: #a5acd6; }
@media (prefers-reduced-motion: reduce) { .lsx-friends__secret { animation: none; } }