Add Discord collectibles to profiles, messages, and settings.

Integrate profile effects, nameplates, and avatar decorations with live catalog browsing, Matrix profile storage, and rendering across user heroes, DMs, messages, and the sidebar avatar.

src/app/styles/AvatarDecoration.css.ts

@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css';
+
+/** Discord presets are 128px canvases aligned to an ~80px avatar circle. */
+export const AVATAR_DECORATION_SCALE_PERCENT = 119;
+
+/** Inner avatar diameter as a fraction of the decoration canvas (80 / 128). */
+export const AVATAR_DECORATION_INNER_PERCENT = 62.5;
+
+export const AvatarDecorationOverlay = style({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  width: `${AVATAR_DECORATION_SCALE_PERCENT}%`,
+  height: `${AVATAR_DECORATION_SCALE_PERCENT}%`,
+  transform: 'translate(-50%, -50%)',
+  objectFit: 'contain',
+  pointerEvents: 'none',
+  zIndex: 2,
+});
+
+export const SidebarAvatarStack = style({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'visible',
+});