/* One decoration at a time, including accounts saved by older clients. */
.has-vinyl-frame[data-aura]::before,
.has-vinyl-frame[data-aura]::after {
  opacity: 0 !important;
  animation: none !important;
}
.has-vinyl-frame[data-aura] { box-shadow: none !important; animation: none !important; border-color: transparent !important; }
.has-vinyl-frame .jw-profile-avatar-media::after,
.has-vinyl-frame .jw-friends-avatar-media::after { animation: none !important; opacity: 0 !important; }

/* Colored auras use a continuous ring; orbiting particles belong to Sparks. */
:is(.jw-profile-avatar-wrap, .jw-friends-avatar)[data-aura-tone="blue"]::before {
  background: linear-gradient(135deg, #bce8ff, #54b8ff 55%, #318bc3);
  box-shadow: 0 0 10px #54b8ff38, 0 0 22px #54b8ff18;
}
:is(.jw-profile-avatar-wrap, .jw-friends-avatar)[data-aura-tone="blue"]::after {
  inset: -9px;
  border: 0;
  background: radial-gradient(circle, #54b8ff12 48%, transparent 72%);
  box-shadow: none;
  animation: none;
  transform: none;
}

/* Keep pinpoints inside their own layer instead of cutting discs at its edge. */
:is(.jw-profile-avatar-wrap, .jw-friends-avatar)[data-aura-tone="sparks"]::before {
  background: linear-gradient(135deg, #fff0bd, #c3a44b 38%, #f5d778 72%, #a08232);
  box-shadow: 0 0 9px #e6c45b33, 0 0 20px #e6c45b16;
}
:is(.jw-profile-avatar-wrap, .jw-friends-avatar)[data-aura-tone="sparks"]::after,
.header-profile-btn[data-aura="particles"]::after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: -12px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 8%, #fff4ce 0 1px, transparent 1.8px),
    radial-gradient(circle at 81% 17%, #f5d778 0 .7px, transparent 1.5px),
    radial-gradient(circle at 93% 47%, #fff4ce 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 81%, #f5d778 0 .6px, transparent 1.4px),
    radial-gradient(circle at 48% 93%, #fff4ce 0 .9px, transparent 1.7px),
    radial-gradient(circle at 18% 82%, #f5d778 0 1px, transparent 1.8px),
    radial-gradient(circle at 7% 48%, #fff4ce 0 .7px, transparent 1.5px),
    radial-gradient(circle at 18% 18%, #fff4ce 0 .8px, transparent 1.6px);
  filter: drop-shadow(0 0 2px #f0d07899);
  transform-origin: center;
  animation: jw-appearance-sparks 4s ease-in-out infinite alternate;
}
:is(.jw-profile-avatar-wrap, .jw-friends-avatar)[data-aura-tone="sparks"] :is(.jw-profile-avatar-media, .jw-friends-avatar-media)::after {
  animation: none;
  opacity: 0;
}
@keyframes jw-appearance-sparks {
  0% { opacity: .35; transform: rotate(-6deg) scale(.96); }
  55% { opacity: .85; }
  100% { opacity: .6; transform: rotate(7deg) scale(1.02); }
}
.header-profile-btn[data-aura="particles"]:not(.has-vinyl-frame) {
  position: relative;
  overflow: visible;
  animation: none;
  box-shadow: 0 0 10px #e6c45b26;
}
.header-profile-btn[data-aura="particles"] > img { border-radius: 50%; }

/* The same avatar rendering is used in cards and in the full live preview. */
.jw-appearance-preview {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 22px 0 28px;
  padding: 30px 32px;
  min-height: 158px;
  border: 1px solid var(--vault-line, #ffffff14);
  border-radius: 16px;
  background: radial-gradient(ellipse at 65px 50%, #ecd58e09, transparent 240px), #ffffff02;
}
.jw-appearance-preview-copy { display: grid; gap: 9px; min-width: 0; line-height: 1.5; }
.jw-appearance-preview-copy strong { font-size: 19px; color: var(--vault-text, #eee8d8); font-weight: 600; }
.jw-appearance-preview-copy span { font-size: 13px; color: var(--vault-muted, #a7a39c); }
.jw-appearance-preview-copy small { font-size: 11px; color: var(--vault-muted, #a7a39c); }
.jw-appearance-group-title { margin: 26px 0 14px; font-size: 13px; font-weight: 600; color: var(--vault-text, #eee8d8); }
.jw-profile-appearance > h3 { scroll-margin-top: 84px; }
.jw-profile-appearance .jw-profile-aura-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
.jw-profile-appearance .jw-profile-aura-option {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 20px;
  min-height: 96px;
  padding: 20px;
  border-radius: 12px;
  background: #ffffff02;
  transition: border-color .18s, background .18s;
}
.jw-profile-appearance .jw-profile-aura-option:hover { border-color: #ecd58e55; background: #ffffff04; }
.jw-profile-appearance .jw-profile-aura-option:has(input:checked) { border-color: #ecd58e99; background: #ecd58e0a; }
.jw-profile-appearance .jw-profile-aura-option:has(input:focus-visible) { outline: 2px solid #ecd58e; outline-offset: 3px; }
.jw-profile-appearance .jw-profile-aura-option input { width: 1px; height: 1px; margin: 0; }
.jw-profile-appearance .jw-profile-aura-option:has(input:checked)::after {
  content: '✓'; position: absolute; top: 7px; right: 9px; color: #ecd58e; font-size: 11px;
}
.jw-appearance-option-copy { display: grid; gap: 6px; min-width: 0; line-height: 1.4; }
.jw-appearance-option-copy strong { font-size: 13px; font-weight: 550; color: inherit; overflow-wrap: anywhere; }
.jw-appearance-option-copy small { font-size: 11px; color: var(--vault-muted, #a7a39c); }
.jw-appearance-frames + p { margin: 0; padding: 18px 0; font-size: 12px; }
.jw-profile-appearance .jw-appearance-avatar,
.jw-profile-appearance .jw-appearance-option-avatar {
  --jw-friends-avatar-size: 42px;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #2c2835;
  isolation: isolate;
  color: #eee8d8;
  font-size: 20px;
  --avatar-aura-ring-inset: -2px;
}
.jw-profile-appearance .jw-appearance-avatar { --jw-friends-avatar-size: 88px; width: 88px; height: 88px; font-size: 34px; --avatar-aura-ring-inset: -3px; }
.jw-profile-appearance .jw-friends-avatar-media { border-radius: inherit; }
.jw-appearance-option-avatar .vault-vinyl-frame { inset: -4px; }
.jw-appearance-option-avatar .vault-vinyl-mark { display: none; }
@media (max-width: 1000px) {
  .jw-profile-appearance .jw-profile-aura-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .jw-appearance-preview { flex-direction: column; text-align: center; gap: 24px; padding: 30px 18px 24px; }
  .jw-profile-appearance .jw-profile-aura-options { gap: 10px; }
  .jw-profile-appearance .jw-profile-aura-option { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 18px; padding: 22px 10px 16px; }
  .jw-appearance-option-copy small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.jw-profile-avatar-wrap, .jw-friends-avatar)[data-aura-tone="sparks"]::after,
  .header-profile-btn[data-aura="particles"]::after { animation: none; opacity: .65; transform: none; }
  .jw-profile-appearance .jw-profile-aura-option { transition: none; }
}