/* Avatar stack: shape clip + decorative hat overlays */

.avatar-stack {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 auto;
  flex-shrink: 0;
  overflow: visible;
  vertical-align: middle;
  box-sizing: border-box;
}

.avatar-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--moner-border, #3a3a3f);
  background: var(--moner-bg-card, #1f1f23);
  box-sizing: border-box;
  z-index: 1;
}

.avatar-shape-circle .avatar-photo-wrap { border-radius: 50%; }
.avatar-shape-square .avatar-photo-wrap { border-radius: 0; }
.avatar-shape-rounded .avatar-photo-wrap { border-radius: 22%; }

.avatar-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.avatar-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 800;
  color: var(--moner-text, #e4e4e7);
  background: var(--moner-bg-card, #1f1f23);
}

/* Sizes — photo area; stack is slightly taller when a hat is present */
.avatar-stack.avatar-size-xs { width: var(--avatar-xs); height: var(--avatar-xs-hat); font-size: 0.75rem; }
.avatar-stack.avatar-size-sm { width: var(--avatar-sm); height: var(--avatar-sm-hat); font-size: 0.92rem; }
.avatar-stack.avatar-size-md { width: var(--avatar-md); height: var(--avatar-md-hat); font-size: 2rem; }
.avatar-stack.avatar-size-lg { width: var(--avatar-lg); height: var(--avatar-lg-hat); font-size: 2.3rem; }
.avatar-stack.avatar-size-xl { width: var(--avatar-xl); height: var(--avatar-xl-hat); font-size: 2.9rem; }

.avatar-stack.avatar-effect-none,
.avatar-stack:not([class*="avatar-effect-"]):not(:has(.avatar-hat)) {
  height: auto;
}

.avatar-stack.avatar-size-xs:not(:has(.avatar-hat)):not([class*="avatar-effect-"]) { height: var(--avatar-xs); }
.avatar-stack.avatar-size-sm:not(:has(.avatar-hat)):not([class*="avatar-effect-"]) { height: var(--avatar-sm); }
.avatar-stack.avatar-size-md:not(:has(.avatar-hat)):not([class*="avatar-effect-"]) { height: var(--avatar-md); }
.avatar-stack.avatar-size-lg:not(:has(.avatar-hat)):not([class*="avatar-effect-"]) { height: var(--avatar-lg); }
.avatar-stack.avatar-size-xl:not(:has(.avatar-hat)):not([class*="avatar-effect-"]) { height: var(--avatar-xl); }

.avatar-hat {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  height: 52%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  z-index: 3;
}

.avatar-size-xs .avatar-hat { width: 100%; height: 58%; top: -2px; }
.avatar-size-sm .avatar-hat { width: 96%; height: 54%; }

.avatar-hat-crown {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23f5c542' stroke='%23b8860b' stroke-width='1.5' d='M6 26 L12 8 L22 18 L32 4 L42 18 L52 8 L58 26 Z'/%3E%3Ccircle cx='12' cy='8' r='2.5' fill='%23ff6b6b'/%3E%3Ccircle cx='32' cy='4' r='2.5' fill='%234ecdc4'/%3E%3Ccircle cx='52' cy='8' r='2.5' fill='%23a45bff'/%3E%3C/svg%3E");
}

.avatar-hat-cap {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36'%3E%3Cellipse cx='32' cy='30' rx='28' ry='5' fill='%23222'/%3E%3Cpath fill='%23dc2626' d='M14 28 Q14 10 32 8 Q50 10 50 28 Z'/%3E%3Cpath fill='%23fff' opacity='.25' d='M18 20 Q32 14 46 20 L46 26 Q32 22 18 26 Z'/%3E%3C/svg%3E");
}

.avatar-hat-halo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24'%3E%3Cellipse cx='32' cy='14' rx='22' ry='6' fill='none' stroke='%23ffe566' stroke-width='3' opacity='.95'/%3E%3Cellipse cx='32' cy='14' rx='22' ry='6' fill='none' stroke='%23fff8c4' stroke-width='8' opacity='.35'/%3E%3C/svg%3E");
  top: -4%;
  height: 38%;
}

.avatar-hat-party {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath fill='%234f46e5' d='M32 6 L52 32 L12 32 Z'/%3E%3Cpath fill='%23fbbf24' d='M32 6 L38 32 L26 32 Z'/%3E%3Ccircle cx='32' cy='4' r='3' fill='%23ec4899'/%3E%3C/svg%3E");
}

.avatar-hat-horns {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cpath fill='%23dc2626' d='M10 26 Q8 4 18 10 Q14 18 10 26'/%3E%3Cpath fill='%23dc2626' d='M54 26 Q56 4 46 10 Q50 18 54 26'/%3E%3C/svg%3E");
  top: 2%;
  height: 42%;
}

.avatar-hat-wreath {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='none' stroke='%2322c55e' stroke-width='4' d='M8 20 Q16 4 32 6 Q48 4 56 20'/%3E%3Ccircle cx='10' cy='18' r='3' fill='%23ef4444'/%3E%3Ccircle cx='54' cy='18' r='3' fill='%23ef4444'/%3E%3Ccircle cx='32' cy='6' r='3' fill='%23fbbf24'/%3E%3C/svg%3E");
}

.avatar-hat-cat_ears {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cpath fill='%23fda4af' stroke='%23fb7185' stroke-width='1.5' d='M8 28 L14 6 L24 22 Z'/%3E%3Cpath fill='%23fda4af' stroke='%23fb7185' stroke-width='1.5' d='M56 28 L50 6 L40 22 Z'/%3E%3Cpath fill='%23fff' opacity='.6' d='M15 14 L18 22 L21 16 Z M49 14 L46 22 L43 16 Z'/%3E%3C/svg%3E");
  top: 0;
  height: 48%;
}

/* Frame / sparkle effects on the photo wrap */
.avatar-effect-frame_gold .avatar-photo-wrap {
  border-color: #d4a017;
  box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.35), 0 0 12px rgba(248, 224, 142, 0.45);
}

.avatar-effect-frame_neon .avatar-photo-wrap {
  border-color: #39ff14;
  box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.35), 0 0 14px rgba(57, 255, 20, 0.55);
}

.avatar-effect-sparkles .avatar-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 28%, rgba(255, 230, 120, 0.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 44% 68%, rgba(180, 220, 255, 0.85) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 74%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px);
  animation: avatar-sparkle-shift 3s ease-in-out infinite;
}

@keyframes avatar-sparkle-shift {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

/* Wall / forum slots keep fixed footprint */
.avatar-stack.wall-post-avatar,
.wall-post-avatar-slot .avatar-stack {
  width: var(--avatar-sm);
  height: var(--avatar-sm-hat);
  min-width: var(--avatar-sm);
  max-width: var(--avatar-sm);
}

.wall-post-avatar-slot .avatar-stack:not(:has(.avatar-hat)):not([class*="avatar-effect-"]) {
  height: var(--avatar-sm);
}

.moner-user-btn .avatar-stack.moner-user-avatar {
  width: var(--avatar-xs) !important;
  height: var(--avatar-xs-hat) !important;
  min-width: var(--avatar-xs) !important;
  max-width: var(--avatar-xs) !important;
  flex: 0 0 var(--avatar-xs) !important;
}

.moner-user-btn .avatar-stack.moner-user-avatar:not(:has(.avatar-hat)):not([class*="avatar-effect-"]) {
  height: var(--avatar-xs) !important;
}

/* Legacy selectors — old markup without avatar-stack */
img.user-avatar,
.user-avatar-placeholder {
  display: block;
  object-fit: cover;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2px solid var(--moner-border, #3a3a3f);
  background: var(--moner-bg-card, #1f1f23);
}

.avatar-shape-circle.user-avatar,
.avatar-shape-circle.user-avatar-placeholder,
.avatar-mask-circle.user-avatar,
.avatar-mask-circle.user-avatar-placeholder { border-radius: 50%; }

.avatar-shape-square.user-avatar,
.avatar-shape-square.user-avatar-placeholder,
.avatar-mask-square.user-avatar,
.avatar-mask-square.user-avatar-placeholder { border-radius: 0; }

.avatar-shape-rounded.user-avatar,
.avatar-shape-rounded.user-avatar-placeholder,
.avatar-mask-rounded.user-avatar,
.avatar-mask-rounded.user-avatar-placeholder { border-radius: 22%; }