/* ════════════════════════════════════════════════════════════════
   WINR v19 — Profile polish
   • Social brand icons styled inline in the social-pill
   • Logged-out auth gate (renderProfile wrapper in js/_v19_profile_polish.js)
   ════════════════════════════════════════════════════════════════ */

/* Social brand icons inside the link pills */
.profile-social-links .social-pill .social-pill-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  color:var(--text-mid);
  flex-shrink:0;
  transition:color var(--duration)
}
.profile-social-links .social-pill .social-pill-icon svg{
  width:14px;
  height:14px;
  display:block
}
.profile-social-links .social-pill:hover .social-pill-icon{
  color:var(--text-hi)
}

/* ── Logged-out auth gate ─────────────────────────────────────── */
.profile-auth-gate{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 24px;
  min-height:60vh;
  text-align:center;
  position:relative
}

.profile-auth-gate-card{
  background:var(--bg-card);
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  border:1px solid var(--border-card);
  border-radius:var(--radius-lg);
  padding:48px 36px;
  max-width:420px;
  width:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 32px 80px rgba(0,0,0,0.5);
  position:relative;
  overflow:hidden;
  animation:authGateRise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both
}

@keyframes authGateRise{
  from{ opacity:0; transform:translateY(16px) scale(0.98) }
  to  { opacity:1; transform:translateY(0) scale(1) }
}

.profile-auth-gate-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 65%);
  pointer-events:none;
  z-index:0
}

.profile-auth-gate-icon{
  width:64px;
  height:64px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.18);
  border-radius:50%;
  color:#fff;
  position:relative;
  z-index:1;
  box-shadow:0 0 30px rgba(255,255,255,0.1)
}

.profile-auth-gate h2{
  font-size:22px;
  font-weight:900;
  letter-spacing:-0.5px;
  color:var(--text-hi);
  margin:0 0 8px;
  position:relative;
  z-index:1
}

.profile-auth-gate p{
  font-size:14px;
  color:var(--text-lo);
  line-height:1.55;
  margin:0 0 28px;
  position:relative;
  z-index:1
}

.profile-auth-gate-ctas{
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  z-index:1
}

.profile-auth-gate-cta{
  padding:14px 24px;
  font-size:14px;
  font-weight:700;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:all var(--duration);
  border:none;
  letter-spacing:0.2px
}

/* Tony's tokens.css sets --orange:#FFFFFF (monochrome brand).
   Primary CTA = solid white pill with BLACK text for max contrast on dark. */
.profile-auth-gate-cta.primary{
  background:#FFFFFF;
  color:#000000;
  box-shadow:0 8px 24px rgba(255,255,255,0.18)
}
.profile-auth-gate-cta.primary:hover{
  background:#F4F4F6;
  transform:translateY(-1px);
  box-shadow:0 12px 32px rgba(255,255,255,0.28)
}

.profile-auth-gate-cta.ghost{
  background:transparent;
  color:var(--text-mid);
  border:1px solid var(--border-card)
}
.profile-auth-gate-cta.ghost:hover{
  border-color:rgba(255,255,255,0.2);
  color:var(--text-hi);
  background:rgba(255,255,255,0.02)
}