/**
 * Avatar frame system — CSS-only, marketplace-ready (no PNG).
 */

.nx-avatar-frame {
	--nx-frame-size: 112px;
	--nx-frame-ring: 3px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--nx-frame-size);
	height: var(--nx-frame-size);
	border-radius: 50%;
	flex-shrink: 0;
}

.nx-avatar-frame--sm { --nx-frame-size: 48px; --nx-frame-ring: 2px; }
.nx-avatar-frame--md { --nx-frame-size: 96px; }
.nx-avatar-frame--lg { --nx-frame-size: 128px; --nx-frame-ring: 4px; }

.nx-avatar-frame__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	z-index: 2;
}

.nx-avatar-frame__img {
	position: relative;
	z-index: 1;
	width: calc(100% - var(--nx-frame-ring) * 4);
	height: calc(100% - var(--nx-frame-ring) * 4);
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Rank frames */
.nx-frame--bronze .nx-avatar-frame__ring {
	background: conic-gradient(from 200deg, #cd7f32, #8b5a2b, #cd7f32);
	padding: var(--nx-frame-ring);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.nx-frame--silver .nx-avatar-frame__ring {
	box-shadow: 0 0 0 var(--nx-frame-ring) #c0c0c0, 0 0 16px rgba(192,192,192,.35);
}

.nx-frame--gold .nx-avatar-frame__ring,
.nx-frame--gold_glow .nx-avatar-frame__ring,
.nx-frame--gold-glow .nx-avatar-frame__ring {
	background: conic-gradient(from 0deg, #ffd700, #ffec8b, #c9a227, #ffd700);
	padding: var(--nx-frame-ring);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.45));
}

.nx-frame--diamond .nx-avatar-frame__ring,
.nx-frame--diamond_ice .nx-avatar-frame__ring,
.nx-frame--diamond-ice .nx-avatar-frame__ring {
	background: conic-gradient(from 180deg, #7fdbff, #e0f7ff, #4a90d9, #7fdbff);
	padding: var(--nx-frame-ring);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: nx-frame-shimmer 3s linear infinite;
}

.nx-frame--neon .nx-avatar-frame__ring {
	background: conic-gradient(from 0deg, #00f5ff, #ff2d55, #a855f7, #00f5ff);
	padding: var(--nx-frame-ring);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: nx-frame-neon 2.5s ease-in-out infinite;
	filter: drop-shadow(0 0 14px rgba(0, 245, 255, 0.5));
}

.nx-frame--cyber .nx-avatar-frame__ring {
	background: linear-gradient(135deg, #00ffa3, #00c8ff 50%, #7c3aed);
	padding: var(--nx-frame-ring);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: nx-frame-cyber 3s ease-in-out infinite;
}

.nx-frame--legend .nx-avatar-frame__ring,
.nx-frame--mythic .nx-avatar-frame__ring {
	background: conic-gradient(from 0deg, #ff6b6b, #ee5a24, #a855f7, #ff6b6b);
	padding: var(--nx-frame-ring);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: nx-frame-mythic 2s ease-in-out infinite;
	filter: drop-shadow(0 0 18px rgba(255, 45, 85, 0.4));
}

.nx-frame--elite .nx-avatar-frame__ring,
.nx-frame--master .nx-avatar-frame__ring {
	box-shadow: 0 0 0 var(--nx-frame-ring) #9b59b6, 0 0 20px rgba(155, 89, 182, 0.4);
}

@keyframes nx-frame-neon {
	0%, 100% { opacity: 1; filter: drop-shadow(0 0 14px rgba(0, 245, 255, 0.5)); }
	50% { opacity: 0.9; filter: drop-shadow(0 0 22px rgba(255, 45, 85, 0.6)); }
}

@keyframes nx-frame-cyber {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(180deg); }
}

@keyframes nx-frame-shimmer {
	0% { filter: hue-rotate(0deg); }
	100% { filter: hue-rotate(360deg); }
}

@keyframes nx-frame-mythic {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.03); }
}