[data-view='friends'] .friends-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46%;
  align-items: center;
  gap: 6px;
  min-height: 184px;
  padding: 6px 0 18px;
}
.friends-hero h2 { width: auto; margin: 0; font-size: 23px; line-height: 1.3; font-weight: 700; }
.friends-hero-art { width: 100%; height: 170px; max-width: 100%; margin: 0; object-fit: contain; filter: drop-shadow(0 10px 14px #0007) drop-shadow(0 0 7px #2af2a31f); }
[data-view='friends'] .card-panel {
  border-radius: 8px;
  border: 1px solid #8dadab38;
  background: linear-gradient(150deg, #d1fff70b, transparent 24%), linear-gradient(110deg, #0b211bfa, #040e0df5 52%, #0b372af0);
  box-shadow: inset 7px 0 16px -13px #26ffb177, inset -7px 0 16px -13px #26ffb155, inset 0 1px 0 #c9fff21a, 0 8px 20px #0005;
}
[data-view='friends'] .card-panel::before, [data-view='friends'] .card-panel::after { display: none; }
.invite-card { padding: 18px 16px 16px; }
.invite-card-art { position: absolute; top: 10px; right: 13px; width: 35px; height: 41px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 5px #28f69b33); }
.invite-card h3 { padding-right: 39px; min-height: 28px; }
.invite-link { position: relative; z-index: 1; }
.invite-card h3, .how-card h3 { font-size: 16px; font-weight: 700; line-height: 1.35; }
.invite-link { min-height: 48px; margin-top: 13px; padding: 0 8px 0 12px; border: 0; border-bottom: 1px solid #51736677; border-radius: 5px; background: #020e0b88; }
.invite-link span { font-size: 12px; color: #bbd2ca; }
.invite-link button { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 6px; border: 1px solid #80c7a43b; background: linear-gradient(145deg, #254636, #11291e); color: #8affbd; }
.invite-link button svg { width: 20px; height: 20px; }
.friend-stats { margin-top: 16px; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.friend-stats article { position: relative; overflow: hidden; isolation: isolate; min-width: 0; min-height: 130px; padding: 15px 14px; align-content: start; }
.friend-stat-art { position: absolute; z-index: 0; right: -14px; top: 6px; width: 128px; height: 128px; object-fit: contain; pointer-events: none; opacity: .48; filter: brightness(.72) saturate(.85); mask-image: linear-gradient(to right, transparent, #0008 35%, #000 75%); }
.friend-stat-art-coins { opacity: .42; }
.friend-stats article > span { padding-right: 0; }
.friend-stats article > span, .friend-stats article > strong, .friend-stats article > p { position: relative; z-index: 1; }
.friend-stats article > span { font-size: 12px; color: #a7c0b9; font-weight: 400; }
.friend-stats strong { margin-top: 12px; font-size: 32px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.friend-stats small { font-size: 12px; color: #f5d878; font-weight: 600; }
.friend-stats p { margin-top: 7px; margin-bottom: 0; font-size: 12px; color: #a5bcb6; }
.friend-stats article:last-child { background: linear-gradient(145deg, #c6aa670a, transparent 45%), linear-gradient(110deg, #17251c, #071710); }
.friend-stats article:last-child strong { color: #ffe69d; }
.invite-button { margin-top: 16px; min-height: 52px; border-radius: 8px; border: 1px solid #65ffb0; background: linear-gradient(165deg, #03d879, #00b960 35%, #006d3b); box-shadow: inset 0 1px 0 #ccffe773, 0 0 10px #10ffa528; color: white; font-size: 15px; font-weight: 600; }
.invite-button svg { width: 23px; height: 23px; }
.how-card { margin-top: 18px; padding: 18px 16px; grid-template-columns: minmax(0, 1fr) 55px; }
.how-card p { font-size: 13px; line-height: 1.5; font-weight: 400; margin-top: 8px; color: #b1c3c7; }
.how-card img { filter: drop-shadow(0 0 6px #2af29922); }
.invite-link button:active, .invite-button:active { transform: translateY(1px); }
@media (max-width: 360px) {
  .friends-hero h2 { font-size: 20px; }
  [data-view='friends'] .friends-hero { min-height: 165px; }
  .friends-hero-art { height: 152px; }
  .invite-card h3, .how-card h3 { font-size: 14px; }
  .friend-stats { gap: 9px; }
  .friend-stats article { padding: 16px 12px; }
  .friend-stats article > span { font-size: 11px; padding-right: 0; }
  .friend-stat-art { right: -24px; }
  .friend-stats strong { font-size: 27px; }
}