/* SORA Project v130 — explicit avatar/photo and transparent PNG frame layers. */

.avatar-frame-stack {
  position:relative !important;
  display:inline-block !important;
  flex:none;
  overflow:visible !important;
  isolation:isolate;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

.avatar-frame-stack::before,
.avatar-frame-stack::after {
  content:none !important;
  display:none !important;
}

.avatar-frame-stack > .avatar-frame-photo {
  position:absolute !important;
  z-index:1 !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  border:0 !important;
  border-radius:50% !important;
  background:#0c1927 !important;
  object-fit:cover !important;
  object-position:center !important;
  box-shadow:inset 0 0 0 1px rgba(135,194,236,.2);
}

.avatar-frame-stack > .avatar-frame-overlay {
  position:absolute !important;
  z-index:2 !important;
  top:-8% !important;
  left:-8% !important;
  display:block !important;
  width:116% !important;
  height:116% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:drop-shadow(0 0 4px rgba(67,173,255,.2));
  pointer-events:none !important;
  user-select:none !important;
}

.avatar-frame-compact.avatar-frame-stack > .avatar-frame-overlay {
  top:-7% !important;
  left:-7% !important;
  width:114% !important;
  height:114% !important;
}

.profile-public-avatar.avatar-frame-stack > .avatar-frame-overlay,
.avatar-frame-preview.avatar-frame-stack > .avatar-frame-overlay {
  top:-8% !important;
  left:-8% !important;
  width:116% !important;
  height:116% !important;
}

.profile-public-card .avatar-presence .online-dot {
  z-index:5 !important;
}

/* Frame selector: predictable card sizing and a centered 1:1 preview. */
.profile-edit-card .avatar-frame-picker {
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr)) !important;
  align-items:stretch !important;
  gap:10px !important;
  padding:10px !important;
}

.profile-edit-card .avatar-frame-choice {
  position:relative !important;
  display:grid !important;
  grid-template-rows:84px minmax(28px,auto) !important;
  align-items:center !important;
  justify-items:center !important;
  gap:7px !important;
  min-width:0 !important;
  min-height:126px !important;
  padding:10px 7px 8px !important;
  overflow:hidden !important;
  border:1px solid rgba(91,158,211,.16) !important;
  border-radius:14px !important;
  background:linear-gradient(155deg,rgba(14,31,49,.92),rgba(7,17,29,.96)) !important;
  cursor:pointer !important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}

.profile-edit-card .avatar-frame-choice:hover {
  transform:translateY(-2px) !important;
  border-color:rgba(63,181,255,.42) !important;
}

.profile-edit-card .avatar-frame-choice:has(input:checked) {
  border-color:#35aaf8 !important;
  box-shadow:0 0 0 2px rgba(53,170,248,.14),0 10px 24px rgba(0,0,0,.2) !important;
}

.profile-edit-card .avatar-frame-choice > input[type="radio"] {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.profile-edit-card .avatar-frame-choice .avatar-frame-preview {
  position:relative !important;
  align-self:center !important;
  width:82px !important;
  min-width:82px !important;
  height:82px !important;
  min-height:82px !important;
  aspect-ratio:1 !important;
  margin:0 !important;
}

.profile-edit-card .avatar-frame-choice > small {
  display:-webkit-box !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  color:#dceafa !important;
  font-size:10px !important;
  font-weight:800 !important;
  line-height:1.3 !important;
  text-align:center !important;
  text-overflow:ellipsis !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.release-character-avatar.avatar-frame-stack > .avatar-frame-photo {
  border-radius:50% !important;
}

@media (max-width:720px) {
  .profile-edit-card .avatar-frame-picker {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .profile-edit-card .avatar-frame-choice { transition:none !important; }
}