/* Pixel Art UI Styles */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
	--pixel-bg: #2d2d2d;
	--pixel-border-light: #5a5a5a;
	--pixel-border-dark: #1a1a1a;
	--pixel-accent: #4f46e5; /* Indigo-600 */
}

.font-pixel {
	font-family: 'Press Start 2P', cursive;
}

/* Pixel Panel */
.pixel-panel {
	background-color: var(--pixel-bg);
	position: relative;
	box-shadow: -4px 0 0 0 var(--pixel-border-dark),
		4px 0 0 0 var(--pixel-border-dark), 0 -4px 0 0 var(--pixel-border-dark),
		0 4px 0 0 var(--pixel-border-dark);
	border: 4px solid var(--pixel-border-light);
	image-rendering: pixelated;
}

/* Pixel Button */
.pixel-btn {
	background-color: var(--pixel-accent);
	color: white;
	font-family: 'Press Start 2P', cursive;
	font-size: 12px;
	padding: 12px 16px;
	border: none;
	position: relative;
	box-shadow: inset 4px 4px 0px 0px rgba(255, 255, 255, 0.2),
		inset -4px -4px 0px 0px rgba(0, 0, 0, 0.2), 4px 4px 0px 0px #000;
	transition: transform 0.1s, box-shadow 0.1s;
	cursor: pointer;
	text-transform: uppercase;
}

.pixel-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: inset 4px 4px 0px 0px rgba(255, 255, 255, 0.3),
		inset -4px -4px 0px 0px rgba(0, 0, 0, 0.2), 6px 6px 0px 0px #000;
}

.pixel-btn:active {
	transform: translate(2px, 2px);
	box-shadow: inset 4px 4px 0px 0px rgba(0, 0, 0, 0.2),
		inset -4px -4px 0px 0px rgba(255, 255, 255, 0.1), 0px 0px 0px 0px #000;
}

.pixel-btn:disabled {
	background-color: #4b5563;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* Pixel Text */
.pixel-text {
	font-family: 'Press Start 2P', cursive;
	text-shadow: 2px 2px 0px #000;
}

.pixel-border {
	border: 4px solid #000;
	box-shadow: inset 4px 4px 0px 0px #444, inset -4px -4px 0px 0px #111;
}

/* Rarity Effects */
/* Rarity Effects */
/* Rainbow border removed */

.rarity-exotic {
	animation: exotic-pulse 2s ease-in-out infinite;
	background: linear-gradient(
		135deg,
		rgba(40, 0, 20, 1) 0%,
		rgba(60, 0, 30, 1) 100%
	);
	/* overflow: visible;  Allow particles on border */
}

@keyframes exotic-pulse {
	0% {
		border-color: #ec4899;
		box-shadow: 0 0 5px rgba(236, 72, 153, 0.3);
	}
	50% {
		border-color: #f472b6;
		box-shadow: 0 0 20px rgba(244, 114, 182, 0.6);
	}
	100% {
		border-color: #ec4899;
		box-shadow: 0 0 5px rgba(236, 72, 153, 0.3);
	}
}

.rarity-legendary {
	animation: gold-pulse 2s ease-in-out infinite;
	background: linear-gradient(
		135deg,
		rgba(20, 20, 0, 1) 0%,
		rgba(40, 30, 0, 1) 100%
	);
	overflow: hidden;
}

@keyframes gold-pulse {
	0% {
		border-color: #ca8a04;
		box-shadow: 0 0 5px rgba(202, 138, 4, 0.3);
	}
	50% {
		border-color: #facc15;
		box-shadow: 0 0 20px rgba(250, 204, 21, 0.6);
	}
	100% {
		border-color: #ca8a04;
		box-shadow: 0 0 5px rgba(202, 138, 4, 0.3);
	}
}

.rarity-rainbow {
	animation: rainbow-pulse 3s linear infinite;
	background: linear-gradient(
		135deg,
		rgba(20, 0, 0, 1) 0%,
		rgba(0, 0, 20, 1) 100%
	);
}

@keyframes rainbow-pulse {
	0% {
		border-color: #ef4444;
		box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
	}
	20% {
		border-color: #eab308;
		box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
	}
	40% {
		border-color: #22c55e;
		box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
	}
	60% {
		border-color: #3b82f6;
		box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
	}
	80% {
		border-color: #a855f7;
		box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
	}
	100% {
		border-color: #ef4444;
		box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
	}
}

/* Particle Effects */
.pixel-particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background-color: white;
	pointer-events: none;
	animation: float-up 2s linear infinite;
	opacity: 0;
}

@keyframes float-up {
	0% {
		transform: translateY(100%) scale(1);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(-20%) scale(0);
		opacity: 0;
	}
}

@keyframes twinkle {
	0% {
		transform: scale(0) rotate(0deg);
		opacity: 0;
	}
	50% {
		transform: scale(1) rotate(45deg);
		opacity: 1;
	}
	100% {
		transform: scale(0) rotate(90deg);
		opacity: 0;
	}
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
	display: none !important;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
	-ms-overflow-style: none !important; /* IE and Edge */
	scrollbar-width: none !important; /* Firefox */
}

/* Level Up Animations */
@keyframes slide-up-enter {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slide-up-exit {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(-100%);
		opacity: 0;
	}
}

.animate-slide-up-enter {
	animation: slide-up-enter 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-up-exit {
	animation: slide-up-exit 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes border-fill {
	0% {
		clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
	}
	25% {
		clip-path: polygon(50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
	}
	50% {
		clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
	}
	75% {
		clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
	}
}

.animate-border-fill {
	animation: border-fill 1s ease-out forwards;
}

@keyframes float-fade-up {
	0% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
	100% {
		transform: translateY(-20px) scale(1.1);
		opacity: 0;
	}
}

.animate-float-fade-up {
	animation: float-fade-up 1.5s ease-out forwards;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.animate-fade-in {
	animation: fade-in 0.2s ease-out forwards;
}