/* ============================================================
   PROFILE — player profile page styles
   ============================================================ */

/* ---- Cover banner ---- */
.profile-cover {
  position: relative;
  height: 188px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(500px 200px at 80% -30%, rgba(255,92,138,.6), transparent),
    linear-gradient(120deg, #3A2566, #5B2A6B 55%, #7A2E5A);
  border: 1px solid var(--line-soft);
  margin-top: 0;
}

.profile-cover__grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, #000, transparent);
  pointer-events: none;
}

.profile-cover__badge {
  position: absolute;
  top: 14px; right: 16px;
}

/* ---- Profile head (av + meta + actions) ---- */
.profile-head {
  display: flex;
  gap: 20px;
  margin-top: -52px;
  padding: 0 22px;
  position: relative;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.profile-av {
  width: 118px; height: 118px;
  border-radius: 22px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #FFB36B, #FF6B9D);
  border: 4px solid var(--bg);
  display: grid;
  place-items: center;
  font-size: 50px;
  box-shadow: 0 14px 34px -10px rgba(255,107,157,.7);
  position: relative;
}

.profile-av__dot {
  position: absolute;
  right: 6px; bottom: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid var(--bg);
  box-shadow: 0 0 10px var(--green);
}

.profile-meta { flex: 1; min-width: 240px; padding-bottom: 6px; }

.profile-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  font-weight: 800;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.profile-actions {
  display: flex;
  gap: 10px;
  padding-bottom: 6px;
  flex-wrap: wrap;
}

/* ---- Game chips row ---- */
.profile-games {
  display: flex;
  gap: 8px;
  padding: 12px 22px 0;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* ---- Content grid ---- */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  margin-top: 20px;
}

.profile-grid__left,
.profile-grid__right { display: flex; flex-direction: column; gap: 0; }

/* ---- Bio text ---- */
.bio-text {
  margin: 0;
  line-height: 1.7;
  color: #D9D4F5;
  font-size: 14.5px;
}

/* ---- Voice sample player ---- */
.voice-player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-top: 14px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--line);
}

.voice-player__btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--cyan), #3AB0FF);
  color: #06121A;
  font-size: 18px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px -8px rgba(67,232,216,.7);
  transition: filter var(--ease);
}
.voice-player__btn:hover { filter: brightness(1.1); }

.voice-player__wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 34px;
}
.voice-player__wave span {
  flex: 1;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  border-radius: 3px;
  opacity: .5;
  transition: transform .1s ease;
}
.voice-player.is-playing .voice-player__wave span {
  animation: wave-bounce 1s ease-in-out infinite;
  opacity: .9;
}

.voice-player__dur { color: var(--muted); font-size: 12.5px; flex-shrink: 0; }

/* ---- Photo gallery ---- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.gallery__tile {
  aspect-ratio: 1;
  border-radius: 13px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--ease);
  border: 1px solid var(--line-soft);
}
.gallery__tile:hover { transform: scale(1.04); }

.gallery__tile-img {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 32px;
}

.gallery__tile-tag {
  position: absolute;
  left: 7px; bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.4);
  padding: 2px 7px;
  border-radius: 6px;
}

/* ---- Reviews ---- */
.reviews { display: flex; flex-direction: column; gap: 0; }

.review {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}
.review:first-of-type { border-top: 0; }

.review__av {
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(135deg, #7A5BFF, #43E8D8);
  color: #06121A;
}

.review__name  { font-weight: 700; font-size: 13.5px; }
.review__stars { color: var(--gold); font-size: 12px; margin-left: 4px; }
.review__text  { color: #CFC9F0; font-size: 13.5px; line-height: 1.6; margin-top: 3px; }

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .profile-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}