/* =========================================
   Free Fire Nick Generator — GameWorld Style
   ========================================= */

.ffng-container *,
.ffng-container *::before,
.ffng-container *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Container */

.ffng-container {
	font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	background: #ffffff;
	max-width: 860px;
	margin: 24px auto;
	padding: 20px;
	color: #1f1f1f;
	border: 1px solid #e7e7e7;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* Input */

.ffng-input {
	display: block;
	width: 100%;
	padding: 16px 18px;
	background: #ffffff;
	border: 1px solid #d9d9d9;
	border-radius: 12px 12px 0 0;
	color: #222222;
	font-size: 1rem;
	font-family: inherit;
	outline: none;
	caret-color: #f28c18;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ffng-input::placeholder {
	color: #9a9a9a;
}

.ffng-input:focus {
	border-color: #f28c18;
	box-shadow: 0 0 0 4px rgba(242,140,24,0.15);
}

/* Generate Button */

.ffng-container .ffng-btn-generate {
	display: block;
	width: 100%;
	padding: 16px;
	background: linear-gradient(135deg,#f28c18 0%,#e97800 100%);
	color: #ffffff;
	border: none;
	border-radius: 0 0 12px 12px;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .2px;
	font-family: inherit;
	cursor: pointer;
	margin-bottom: 20px;
	box-shadow: 0 8px 20px rgba(242,140,24,.25);
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
	appearance: none;
	-webkit-appearance: none;
}

.ffng-container .ffng-btn-generate:hover {
	background: linear-gradient(135deg,#f59a2f 0%,#ee820f 100%);
	transform: translateY(-1px);
}

.ffng-container .ffng-btn-generate:active {
	background: linear-gradient(135deg,#e67d09 0%,#d96f00 100%);
	transform: translateY(0);
}

.ffng-container .ffng-btn-generate:focus,
.ffng-container .ffng-btn-generate:visited {
	background: linear-gradient(135deg,#f28c18 0%,#e97800 100%);
	color:#fff;
	outline:none;
}

/* Grid */

.ffng-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Card */

.ffng-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #ffffff;
	border: 1px solid #ebebeb;
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.04);
	transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.ffng-card:hover {
	border-color: #f2b36a;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(242,140,24,.08);
}

.ffng-card-nick {
	flex: 1;
	font-size: 1.02rem;
	font-weight: 500;
	color: #222222;
	word-break: break-word;
	overflow-wrap: anywhere;
	line-height: 1.45;
}

/* Copy Button */

.ffng-container .ffng-copy-btn {
	flex-shrink: 0;
	padding: 9px 16px;
	background: #2b2b2b;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .2px;
	font-family: inherit;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
	white-space: nowrap;
	appearance: none;
	-webkit-appearance: none;
}

.ffng-container .ffng-copy-btn:hover {
	background:#1c1c1c;
	transform: translateY(-1px);
	box-shadow:0 6px 14px rgba(0,0,0,.12);
}

.ffng-container .ffng-copy-btn:active {
	background:#111111;
	transform: translateY(0);
}

.ffng-container .ffng-copy-btn.copied {
	background:#f28c18;
	color:#ffffff;
}

/* More Button */

.ffng-container .ffng-btn-more {
	display:block;
	width:100%;
	padding:14px;
	background:#ffffff;
	color:#f28c18;
	border:1px solid #f28c18;
	border-radius:12px;
	font-size:.92rem;
	font-weight:700;
	font-family:inherit;
	cursor:pointer;
	margin-top:14px;
	transition:all .15s ease;
	appearance:none;
	-webkit-appearance:none;
}

.ffng-container .ffng-btn-more:hover {
	background:#f28c18;
	color:#ffffff;
	border-color:#f28c18;
	transform:translateY(-1px);
	box-shadow:0 8px 18px rgba(242,140,24,.16);
}

.ffng-container .ffng-btn-more:active {
	background:#e97800;
	border-color:#e97800;
	color:#fff;
	transform:translateY(0);
}

.ffng-container .ffng-btn-more:focus,
.ffng-container .ffng-btn-more:visited {
	background:#ffffff;
	color:#f28c18;
	border:1px solid #f28c18;
	outline:none;
}

/* Toast */

#ffng-toast {
	position: fixed;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%) translateY(80px);
	background: #ffffff;
	border: 1px solid #f2c28a;
	color: #d96f00;
	padding: 11px 20px;
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 700;
	font-family: 'Segoe UI', system-ui, sans-serif;
	z-index: 99999;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 10px 24px rgba(0,0,0,0.08);
	transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}

#ffng-toast.show {
	transform: translateX(-50%) translateY(0);
	opacity:1;
}

/* Responsive */

@media (max-width: 768px) {

	.ffng-container {
		padding:16px;
		margin:16px;
	}

}

@media (max-width: 540px) {

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

	.ffng-container {
		margin:12px;
		padding:14px;
		border-radius:14px;
	}

	.ffng-input {
		font-size:.96rem;
		padding:14px 16px;
	}

	.ffng-btn-generate {
		padding:15px;
		font-size:.96rem;
	}

	.ffng-card {
		padding:13px 14px;
	}

	.ffng-card-nick {
		font-size:.98rem;
	}

	.ffng-copy-btn {
		padding:8px 14px;
		font-size:.82rem;
	}

}