/* One composition for profiles, rows, map details, events and share images. */
.momus-appearance{--appearance-cream:#fff2d7;--appearance-gold:#eed18a;--appearance-purple:#ddbbff;min-width:0}
.appearance-avatar{position:relative;display:inline-block;flex:none;isolation:isolate;vertical-align:middle;width:var(--appearance-size,48px);max-width:100%;aspect-ratio:1;background:#251533;border-radius:12%;overflow:hidden}
.appearance-avatar>img{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none}
.appearance-avatar>.appearance-portrait{inset:9.375%;width:81.25%;height:81.25%;object-fit:cover;border-radius:6%}
.appearance-avatar>.appearance-ornament{inset:0;width:100%;height:100%}
[data-appearance-pack="0"] .appearance-portrait{inset:0;width:100%;height:100%;border-radius:inherit}
.appearance-name{color:var(--appearance-cream);overflow-wrap:anywhere;text-shadow:none}
[data-appearance-pack="1"][data-appearance-color="1"] .appearance-name{color:var(--appearance-gold)}
[data-appearance-pack="1"][data-appearance-color="2"] .appearance-name{color:var(--appearance-purple)}
[data-appearance-pack="2"] .appearance-avatar{box-shadow:0 0 0 1px #d2ab69,0 4px 15px #c79b4930;animation:appearance-float 7s ease-in-out infinite}
[data-appearance-pack="3"] .appearance-avatar{box-shadow:0 0 0 1px #ead39b,0 0 16px #b072ff65;animation:appearance-glow 5s ease-in-out infinite}
[data-appearance-pack="3"][data-appearance-profile]{background-color:#29163d;background-image:linear-gradient(90deg,#281536d9,#281536a6),url('/assets/game/titan-temple.svg');background-position:center;background-size:cover}
.appearance-badge{display:inline-flex;align-items:center;flex:none;vertical-align:middle;margin-inline-start:.45em;padding:.22em .55em;border:1px solid #d9b66d;border-radius:var(--radius-control);background:#3e235c;color:#ffe6aa;font:700 10px/1.4 var(--sans);letter-spacing:.13em;white-space:nowrap}
.appearance-badge[hidden]{display:none}
@supports((background-clip:text) or (-webkit-background-clip:text)){
  [data-appearance-pack="2"] .appearance-name{color:transparent;background:linear-gradient(105deg,#ffe9b1 10%,#e0c297 40%,#ddbbff 75%,#ffe9b1 100%);background-size:180% 100%;background-clip:text;-webkit-background-clip:text;animation:appearance-shimmer 9s ease-in-out infinite}
  [data-appearance-pack="3"] .appearance-name{color:transparent;background:linear-gradient(110deg,#fff0be 8%,#eacaff 40%,#bca2fa 52%,#ffe8a1 78%);background-size:190% 100%;background-clip:text;-webkit-background-clip:text;filter:drop-shadow(0 0 5px #b980ee55);animation:appearance-shimmer 6s ease-in-out infinite}
}
@keyframes appearance-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes appearance-glow{0%,100%{box-shadow:0 0 0 1px #ead39b,0 0 12px #b072ff50}50%{box-shadow:0 0 0 1px #ead39b,0 0 20px #b072ff85}}
@keyframes appearance-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* Compact hosts keep the silhouette and name readable; motion is decorative. */
[data-appearance-compact] .appearance-avatar{--appearance-size:32px;animation:none}
[data-appearance-compact] .appearance-badge{font-size:9px;padding:.15em .35em;letter-spacing:.06em}
@media(max-width:480px){[data-appearance-profile] .appearance-avatar{--appearance-size:56px}.appearance-badge{margin-inline-start:.3em}}
@media(prefers-reduced-motion:reduce){.momus-appearance .appearance-avatar,.momus-appearance .appearance-name{animation:none!important;transform:none!important;filter:none!important}}
@media(forced-colors:active){.momus-appearance .appearance-name{color:CanvasText;background:none;filter:none}.appearance-badge{color:CanvasText;background:Canvas;border-color:CanvasText}.appearance-avatar{box-shadow:none}}