:root {
	--primary-color: #f8c819;
	--secondary-color: #e5ae19;
	--accent-color: #ffc803;
	--text-color: #ffffff;
	--dark-bg: rgba(4, 4, 4, 0.85);
	--gradient-1: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffd93d, #ff6b6b);
	--gradient-2: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c, #4facfe, #00f2fe);
	--gradient-3: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
	--gradient-4: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	--gradient-5: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
	--gradient-6: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
	
	/* Rarity Colors */
	--common-gradient: linear-gradient(135deg, #7cd9e0 0%, #78bfee 100%);
	--rare-gradient: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	--epic-gradient: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
	--legendary-gradient: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Luckiest Guy", cursive;
	color: var(--text-color);
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	overflow-x: hidden;
	text-shadow: 2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000;
	background: url('bg.png') no-repeat center center fixed;
	background-size: cover;
	user-select: none;
}

.container {
	max-width: 1600px; /* Increased max width */
	margin: 0 auto;
	padding: 0.5rem;
}

.header {
	text-align: center;
	margin-bottom: 0.2rem; /* Reduced bottom margin */
	padding: 0.5rem 0; /* Reduced vertical padding */
	position: relative;
}

.connect-wallet {
	position: absolute;
	top: 2rem;
	right: 2rem;
	background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
	color: white;
	border: none;
	padding: 1rem 2rem;
	border-radius: 25px;
	font-family: "Luckiest Guy", cursive;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 4px 15px rgba(67, 233, 123, 0.3);
}

.connect-wallet:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 8px 25px rgba(67, 233, 123, 0.4);
}

.connect-wallet:active {
	transform: translateY(-1px) scale(1.02);
}

.title-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem; /* Reduced space between title lines */
	margin-bottom: 1rem; /* Reduced margin */
}

.title-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem; /* Reduced space between elements */
	width: 100%;
	max-width: 1000px; /* Reduced max width */
}

.peanut-left, .peanut-right {
	font-size: clamp(1.5rem, 4vw, 3rem); /* Reduced size */
	animation: bounce 2s infinite ease-in-out;
}

.peanut-left {
	animation-delay: 0s;
}

.peanut-right {
	animation-delay: 1s;
}

@keyframes bounce {
	0%, 100% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-15px) rotate(10deg); }
}

.header h1 {
	font-size: clamp(2.5rem, 6vw, 4rem); /* Reduced font size */
	background: var(--gradient-1);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	background-size: 400% 400%;
	animation: titleGlow 3s ease-in-out infinite;
	text-shadow: 3px 3px 0px #000, -3px -3px 0px #000, 3px -3px 0px #000, -3px 3px 0px #000;
	-webkit-text-stroke: 2px #000;
	letter-spacing: 0.08em; /* Slightly reduced letter spacing */
	line-height: 1.1; /* Tighter line height */
}

.title-word {
	display: inline-block;
	margin: 0 0.3rem; /* Reduced space between words */
}

@supports not (-webkit-background-clip: text) {
	.header h1 {
		background: none;
		color: #f8c819;
		text-shadow: 4px 4px 0px #000, -4px -4px 0px #000, 4px -4px 0px #000, -4px 4px 0px #000;
	}
}

@keyframes titleGlow {
	0%, 100% { 
		background-position: 0% 50%;
		text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
	}
	50% { 
		background-position: 100% 50%;
		text-shadow: 0 0 50px rgba(255, 255, 255, 0.6);
	}
}

.header p {
	font-size: clamp(1rem, 2.5vw, 1.4rem); /* Reduced subtitle size */
	margin-bottom: 1rem; /* Reduced margin */
	opacity: 0.9;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.3; /* Tighter line height */
}

.minting-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin-bottom: 3rem;
	align-items: stretch;
}

.nft-card {
	background: var(--dark-bg);
	border-radius: 25px;
	padding: 2rem;
	position: relative;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	cursor: pointer;
	border: 4px solid transparent;
}

.nft-card::before {
	content: '';
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	border-radius: 25px;
	z-index: -1;
	background-size: 400% 400%;
	animation: borderGlow 3s linear infinite;
}

.nft-card.common::before {
	background: var(--common-gradient);
}

.nft-card.rare::before {
	background: var(--rare-gradient);
}

.nft-card.epic::before {
	background: var(--epic-gradient);
}

.nft-card.legendary::before {
	background: var(--legendary-gradient);
}

@keyframes borderGlow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.nft-card:hover {
	transform: translateY(-15px) scale(1.02);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.rarity-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.5rem 1rem;
	border-radius: 20px;
	border: #000 2px solid;
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	z-index: 10;
	animation: badgePulse 2s infinite ease-in-out;
}

.common .rarity-badge {
	background: var(--common-gradient);
	color: white;
}

.rare .rarity-badge {
	background: var(--rare-gradient);
	color: white;
}

.epic .rarity-badge {
	background: var(--epic-gradient);
	color: white;
}

.legendary .rarity-badge {
	background: var(--legendary-gradient);
	color: white;
}

@keyframes badgePulse {
	0%, 100% { transform: scale(1); opacity: 0.9; }
	50% { transform: scale(1.05); opacity: 1; }
}

.nft-image {
	width: 100%;
	height: 250px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(248, 200, 25, 0.1) 100%);
	border-radius: 15px;
	margin-bottom: 1.5rem;
	border: 2px solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.nft-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 13px;
	transition: all 0.3s ease;
}

.nft-card:hover .nft-image img {
	transform: scale(1.1);
	filter: brightness(1.1) contrast(1.1);
}

.upload-area {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	transition: all 0.3s ease;
}

.upload-area:hover {
	color: var(--primary-color);
	background: rgba(248, 200, 25, 0.1);
}

.upload-area i {
	font-size: 3rem;
	margin-bottom: 1rem;
	color: var(--primary-color);
}

.file-input {
	display: none;
}

.nft-image::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s;
}

.nft-card:hover .nft-image::before {
	left: 100%;
}

.nft-card:hover .nft-image {
	transform: scale(1.05);
	border-color: rgba(255, 255, 255, 0.4);
}

.nft-title {
	font-size: 1.8rem;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
	text-align: center;
}

.nft-description {
	font-size: 1rem;
	line-height: 1.5;
	opacity: 0.9;
	margin-bottom: 1.5rem;
	text-align: center;
	height: 120px; /* Fixed height for uniform description area */
	display: flex;
	align-items: center;
	justify-content: center;
}

.nft-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
}

.stat-item {
	background: rgba(255, 255, 255, 0.1);
	padding: 0.8rem;
	border-radius: 10px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-label {
	font-size: 0.8rem;
	opacity: 0.8;
	margin-bottom: 0.3rem;
}

.stat-value {
	font-size: 1.2rem;
	color: var(--primary-color);
}

.nft-buttons {
	display: flex;
	gap: 0;
	justify-content: center;
}

.btn {
	padding: 1rem 2rem;
	border: none;
	border-radius: 25px;
	font-family: "Luckiest Guy", cursive;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 200px;
}

.btn-mint {
	background: var(--gradient-1);
	color: white;
	background-size: 400% 400%;
	animation: gradientShift 3s ease infinite;
}

.btn-claim {
	background: var(--gradient-5);
	color: white;
	background-size: 400% 400%;
	animation: gradientShift 3s ease infinite;
	animation-delay: 1s;
}

@keyframes gradientShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.btn:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.btn:active {
	transform: translateY(-1px) scale(1.02);
}

.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s;
}

.btn:hover::before {
	left: 100%;
}

.stats-section {
	background: var(--dark-bg);
	border-radius: 25px;
	padding: 2rem;
	margin-top: 3rem;
	text-align: center;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}

.global-stat {
	background: rgba(255, 255, 255, 0.1);
	padding: 1.5rem;
	border-radius: 15px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
}

.global-stat:hover {
	transform: translateY(-5px);
	border-color: var(--primary-color);
}

.global-stat-value {
	font-size: 2.5rem;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
}

.global-stat-label {
	font-size: 1.1rem;
	opacity: 0.9;
}

/* Mobile Responsive */
@media (max-width: 1200px) {
	.minting-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}

@media (max-width: 768px) {
	.container {
		padding: 1rem;
	}

	.connect-wallet {
		position: static;
		margin-bottom: 2rem;
		width: 100%;
		max-width: 250px;
	}

	.header {
		padding: 2rem 0;
	}

	.title-line {
		gap: 1.5rem; /* Reduced gap on mobile */
	}

	.title-word {
		margin: 0 0.2rem; /* Reduced margin on mobile */
	}

	.peanut-left, .peanut-right {
		font-size: clamp(1.2rem, 3vw, 2rem); /* Further reduced for mobile */
	}

	.minting-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.nft-card {
		padding: 1.5rem;
	}

	.nft-image {
		height: 200px;
		font-size: 3rem;
	}

	.nft-title {
		font-size: 1.5rem;
	}

	.nft-buttons {
		flex-direction: row;
	}

	.btn {
		max-width: none;
	}

	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	.global-stat-value {
		font-size: 2rem;
	}
}

@media (max-width: 480px) {
	.header h1 {
		font-size: 2.5rem;
	}

	.header p {
		font-size: 1.2rem;
	}

	.title-line {
		flex-direction: column;
		gap: 1rem;
	}

	.minting-grid {
		grid-template-columns: 1fr;
	}

	.stats-grid {
		grid-template-columns: 1fr;
	}
}

/* Floating Animation */
@keyframes float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
}

.nft-card:nth-child(1) { animation: float 6s ease-in-out infinite; animation-delay: 0s; }
.nft-card:nth-child(2) { animation: float 6s ease-in-out infinite; animation-delay: 2s; }
.nft-card:nth-child(3) { animation: float 6s ease-in-out infinite; animation-delay: 4s; }
.nft-card:nth-child(4) { animation: float 6s ease-in-out infinite; animation-delay: 6s; }

.Toastify{
	font-family:"sans-serif" !important;
	text-shadow:none !important;
}