/* =========================
   FRIENDS — Polaroid Front + JS Flip
   Depends on polaroid.css for:
   .polaroid, .polaroid-inner, .polaroid-photo, .tape-top, tilt classes
   ========================= */

/* Grid (similar feel to gallery) */
.friends-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Card is the 3D scene */
.friend-card{
  position: relative;
  perspective: 1200px;
  transform-origin: center 20px; /* matches your polaroid vibe */
}

/* Inner element rotates (sizes itself to the FRONT face) */
.friend-card-inner{
  position: relative;            /* IMPORTANT: allow height to come from the front */
  transform-style: preserve-3d;
  transition: transform .38s ease;
  cursor: pointer;
}

/* When JS adds this class, we flip */
.friend-card.is-flipped .friend-card-inner{
  transform: rotateY(180deg);
}

/* Faces */
.friend-face{
  backface-visibility: hidden;
}

/* Front: keep polaroid styling untouched */
.friend-front{
  position: relative;            /* stays in normal flow so it defines the card height */
}

/* Caption (optional, subtle) */
.friend-caption{
  font-size: .82rem;
  opacity: .85;
  margin-top: 10px;
}

/* Back face overlays the front */
.friend-back{
  position: absolute;            /* IMPORTANT: overlay, don't affect layout height */
  inset: 0;
  transform: rotateY(180deg);

  background: rgba(5, 5, 9, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  overflow: hidden;              /* keep the rounded clipping */
  padding: 0;                    /* IMPORTANT: no extra padding that creates “panel” */
  display: block;                /* reset */
}

.friend-back-inner{
  height: 100%;                  /* IMPORTANT: fill the back face */
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* IMPORTANT: kill scrollbars and stretch behavior */
  overflow: hidden;              /* IMPORTANT: no scrollbars */
  background: transparent;       /* IMPORTANT: remove inner panel look */
  border: 0;
  border-radius: 0;
}

/* Header */
.friend-back-header{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.friend-back-avatar{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 0 18px rgba(255, 223, 0, 0.16);
}

.friend-back-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.friend-back-name{
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.1;
}

.friend-back-sub{
  font-size: 0.88rem;
  opacity: 0.85;
}


/* Social links */
.friend-back-socials{
  display: flex;
  gap: 8px;
  margin: 6px 0 4px;

  justify-content: center;   /* ⬅️ THIS is what you want */
  align-items: center;
}

.friend-social{
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 223, 0, 0.45);
  color: #FFDF00;
  background: rgba(0,0,0,.35);

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.friend-social i{
  font-size: 1rem;
}

.friend-social:hover{
  transform: translateY(-1px);
  background: rgba(255, 223, 0, 0.08);
  box-shadow: 0 0 10px rgba(255, 223, 0, 0.35);
}

/* Optional platform accents */
.friend-social.twitch:hover{ color: #9146FF; border-color: #9146FF; }
.friend-social.steam:hover{ color: #c7d5e0; border-color: #c7d5e0; }
.friend-social.discord:hover{ color: #5865F2; border-color: #5865F2; }
.friend-social.youtube:hover{ color: #FF0000; border-color: #FF0000; }




/* Stats */
.friend-back-stats{
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 0.92rem;
}

.friend-stat-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.friend-stat-value{
  font-weight: 800;
  color: #FFDF00;
}

.friend-social.is-disabled{
  opacity: .28;
  border-color: rgba(255, 223, 0, 0.18);
  background: rgba(255,255,255,0.03);
  pointer-events: none;
}

.friend-social.is-disabled:hover{
  transform: none;
  box-shadow: none;
  background: rgba(255,255,255,0.03);
}



/* Actions */
.friend-back-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;

  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical alignment */
}

/* Close button (styled like a hint, not like a big button) */
.friend-back-close{
  margin-top: 4px;
  font-size: 0.82rem;
  opacity: 0.7;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  color: inherit;
}

.friend-action i{
  font-size: 1.15rem; /* consistent size for both */
  line-height: 1;
}

/* Hover lift only when NOT flipped */
.friend-card:not(.is-flipped) .friend-card-inner:hover{
  transform: translateY(-4px) scale(1.02);
  filter: saturate(1.03);
}

/* Tablet: 3 columns */
@media (min-width: 768px){
  .friends-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Desktop: 4 columns */
@media (min-width: 1200px){
  .friends-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}



/* Mobile */
@media (max-width: 420px){
  .friends-grid{ gap: 14px; }
  
}

/* Hide "Last login" on mobile only */
@media (max-width: 767.98px){
  .friend-last-login{
    display: none;
  }

  /* Reduce vertical breathing room inside the back */
  .friend-back-inner{
    gap: 6px;          /* tighten vertical spacing */
  }

  .friend-back-actions{
    margin-top: 0;
  }
}