/* Avatar Frames System */
.avatar-framed {
	position: relative;
	display: inline-block;
}
.avatar-framed img {
	border-radius: 50%;
	display: block;
}
.avatar-framed::before,
.avatar-framed::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

/* No frame */
.frame-none img {
	border: 2px solid #444;
}

/* Gold frame */
.frame-gold::before {
	inset: -4px;
	background: linear-gradient(135deg, #f5af19, #f12711, #f5af19, #fceabb);
	background-size: 300% 300%;
	animation: frame-rotate 3s ease infinite;
	z-index: -1;
}
.frame-gold img {
	border: 3px solid #1a1a2e;
}

/* Silver frame */
.frame-silver::before {
	inset: -4px;
	background: linear-gradient(135deg, #bdc3c7, #ecf0f1, #95a5a6, #ecf0f1);
	background-size: 300% 300%;
	animation: frame-rotate 4s ease infinite;
	z-index: -1;
}
.frame-silver img {
	border: 3px solid #1a1a2e;
}

/* Bronze frame */
.frame-bronze::before {
	inset: -4px;
	background: linear-gradient(135deg, #b8860b, #cd853f, #daa520, #cd853f);
	background-size: 300% 300%;
	animation: frame-rotate 4s ease infinite;
	z-index: -1;
}
.frame-bronze img {
	border: 3px solid #1a1a2e;
}

/* Platinum frame */
.frame-platinum::before {
	inset: -5px;
	background: linear-gradient(135deg, #e5e4e2, #a8a9ad, #e5e4e2, #c0c0c0, #e5e4e2);
	background-size: 400% 400%;
	animation: frame-rotate 2s ease infinite;
	z-index: -1;
}
.frame-platinum::after {
	inset: -8px;
	border: 2px solid rgba(229, 228, 226, 0.3);
	animation: frame-pulse 2s ease-in-out infinite;
}
.frame-platinum img {
	border: 3px solid #1a1a2e;
}

/* Fire frame */
.frame-fire::before {
	inset: -6px;
	background: linear-gradient(135deg, #ff0000, #ff6600, #ffcc00, #ff6600, #ff0000);
	background-size: 400% 400%;
	animation: frame-rotate 1s ease infinite;
	z-index: -1;
	filter: blur(2px);
}
.frame-fire::after {
	inset: -4px;
	background: linear-gradient(135deg, #ff3300, #ff6600, #ff9900);
	background-size: 300% 300%;
	animation: frame-rotate 1.5s ease infinite reverse;
	z-index: -1;
}
.frame-fire img {
	border: 3px solid #1a1a2e;
	box-shadow: 0 0 10px rgba(255, 102, 0, 0.5);
}

/* Ice frame */
.frame-ice::before {
	inset: -5px;
	background: linear-gradient(135deg, #00d4ff, #0099cc, #00ffff, #0066cc, #00d4ff);
	background-size: 400% 400%;
	animation: frame-rotate 3s ease infinite;
	z-index: -1;
}
.frame-ice::after {
	inset: -8px;
	border: 2px solid rgba(0, 212, 255, 0.4);
	animation: frame-pulse 2s ease-in-out infinite;
}
.frame-ice img {
	border: 3px solid #1a1a2e;
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

/* Neon frame */
.frame-neon::before {
	inset: -5px;
	background: linear-gradient(135deg, #ff00ff, #00ffff, #ff00ff);
	background-size: 300% 300%;
	animation: frame-rotate 2s ease infinite;
	z-index: -1;
}
.frame-neon::after {
	inset: -8px;
	box-shadow: 0 0 15px #ff00ff, 0 0 30px #00ffff;
	animation: frame-neon-glow 1s ease-in-out infinite alternate;
}
.frame-neon img {
	border: 3px solid #1a1a2e;
}

/* Rainbow frame */
.frame-rainbow::before {
	inset: -5px;
	background: linear-gradient(135deg,
		#ff0000, #ff7f00, #ffff00, #00ff00,
		#0000ff, #4b0082, #9400d3, #ff0000);
	background-size: 800% 800%;
	animation: frame-rainbow 3s linear infinite;
	z-index: -1;
}
.frame-rainbow img {
	border: 3px solid #1a1a2e;
}

/* Legendary frame */
.frame-legendary::before {
	inset: -6px;
	background: linear-gradient(135deg, #ffd700, #ffec8b, #ffd700, #daa520, #ffd700);
	background-size: 400% 400%;
	animation: frame-rotate 2s ease infinite;
	z-index: -1;
}
.frame-legendary::after {
	inset: -10px;
	border: 3px solid transparent;
	background: linear-gradient(135deg, rgba(255,215,0,0.5), transparent, rgba(255,215,0,0.5)) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: frame-legendary-spin 4s linear infinite;
}
.frame-legendary img {
	border: 4px solid #1a1a2e;
	box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

/* VIP frame */
.frame-vip::before {
	inset: -5px;
	background: linear-gradient(135deg, #9400d3, #4b0082, #9400d3, #8b008b);
	background-size: 300% 300%;
	animation: frame-rotate 3s ease infinite;
	z-index: -1;
}
.frame-vip::after {
	inset: -8px;
	border: 2px solid rgba(148, 0, 211, 0.5);
	animation: frame-pulse 2s ease-in-out infinite;
}
.frame-vip img {
	border: 3px solid #1a1a2e;
	box-shadow: 0 0 15px rgba(148, 0, 211, 0.5);
}

/* Admin frame */
.frame-admin::before {
	inset: -6px;
	background: linear-gradient(135deg, #dc143c, #8b0000, #dc143c, #ff4500);
	background-size: 400% 400%;
	animation: frame-rotate 2s ease infinite;
	z-index: -1;
}
.frame-admin::after {
	inset: -10px;
	border: 2px solid rgba(220, 20, 60, 0.6);
	animation: frame-pulse 1.5s ease-in-out infinite;
}
.frame-admin img {
	border: 4px solid #1a1a2e;
	box-shadow: 0 0 20px rgba(220, 20, 60, 0.6);
}

/* Animations */
@keyframes frame-rotate {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes frame-pulse {
	0%, 100% { opacity: 0.5; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.05); }
}

@keyframes frame-rainbow {
	0% { background-position: 0% 50%; }
	100% { background-position: 800% 50%; }
}

@keyframes frame-neon-glow {
	0% { box-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff; }
	100% { box-shadow: 0 0 20px #00ffff, 0 0 40px #ff00ff; }
}

@keyframes frame-legendary-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Frame selector in profile */
.frame-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	padding: 15px;
}
.frame-option {
	cursor: pointer;
	text-align: center;
	padding: 10px;
	border-radius: 8px;
	background: #1a1a2e;
	transition: all 0.3s;
	min-width: 100px;
}
.frame-option:hover {
	background: #2a2a4e;
	transform: scale(1.05);
}
.frame-option.selected {
	background: #2a4a2e;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}
.frame-option.locked {
	opacity: 0.5;
	cursor: not-allowed;
}
.frame-option .frame-name {
	margin-top: 8px;
	font-size: 12px;
	color: #ccc;
}
.frame-option .frame-price {
	font-size: 11px;
	color: #f39c12;
}
.frame-option .frame-price.free {
	color: #4ade80;
}