@import url('./partials/_variables.css');
@import url('./partials/_layout.css');
@import url('./partials/_header.css');
@import url('./partials/_cards.css');
@import url('./partials/_components.css');
@import url('./partials/_visuals.css');
@import url('./partials/_responsive.css');
@import url('./partials/_hero.css');
@import url('./partials/_features.css');

:root {
	/* Cosmic Color Palette */
	--space-dark: #0a0e17;
	--nebula-deep: #0d1221;
	--starlight: #e6f1ff;
	--quantum-blue: #4cc9f0;
	--neon-purple: #9d4edd;
	--cyber-cyan: #3abef9;
	--void-black: #030712;
	--glow-intensity: 0 0 15px rgba(76, 201, 240, 0.45);
	--transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	/* Spacing System */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.75rem;
	--space-xl: 2.5rem;
	--space-xxl: 4rem;
	/* Border Radii */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-full: 9999px;
	/* Shadows */
	--shadow-card: 0 10px 30px rgba(0, 5, 15, 0.65), 0 0 40px rgba(76, 201, 240, 0.12);
	--shadow-hover: 0 15px 40px rgba(0, 8, 20, 0.8), 0 0 50px rgba(157, 78, 221, 0.25);
	--shadow-glow: var(--glow-intensity);
}

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

html {
	scroll-behavior: smooth;
	background: radial-gradient(circle at 10% 20%, rgba(76, 201, 240, 0.08) 0%, transparent 25%), radial-gradient(circle at 90% 80%, rgba(157, 78, 221, 0.1) 0%, transparent 30%), linear-gradient(185deg, var(--space-dark) 0%, var(--nebula-deep) 100%);
	min-height: 100vh;
	overflow-x: hidden;
	position: relative;
}

body {
	font-family: 'Segoe UI', system-ui, -apple-system, Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: var(--starlight);
	background: transparent;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	overflow-x: hidden;
}

	/* Cosmic Particle Background */
	body::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: radial-gradient(white 1px, transparent 1px), radial-gradient(white 1px, transparent 1px), radial-gradient(rgba(76, 201, 240, 0.7) 1px, transparent 1px), radial-gradient(rgba(157, 78, 221, 0.7) 1px, transparent 1px);
		background-size: 50px 50px, 75px 75px, 65px 65px, 100px 100px;
		background-position: 0 0, 25px 25px, 15px 15px, 10px 10px;
		opacity: 0.15;
		z-index: -2;
		pointer-events: none;
	}

	/* Animated Nebula Overlay */
	body::after {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(circle at 20% 30%, rgba(76, 201, 240, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(157, 78, 221, 0.18) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(58, 190, 249, 0.08) 0%, transparent 60%);
		z-index: -1;
		animation: nebulaFloat 25s infinite linear;
		pointer-events: none;
	}

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

	50% {
		background-position: 100% 0%, 0% 100%, 50% 50%;
	}

	100% {
		background-position: 0% 0%, 100% 100%, 50% 50%;
	}
}

/* Main Container */
main {
	padding: var(--space-xl) var(--space-md);
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
	z-index: 10;
}

/* Header Section - Cosmic Gateway */
.section-header {
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(24, 30, 54, 0.92)), radial-gradient(circle at top right, rgba(76, 201, 240, 0.15) 0%, transparent 70%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: var(--shadow-glow), 0 8px 32px rgba(0, 10, 25, 0.7);
	padding: var(--space-lg) var(--space-xl);
	margin-bottom: var(--space-xl);
	position: relative;
	overflow: hidden;
	transition: var(--transition-smooth);
}

	.section-header::before {
		content: "";
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(76, 201, 240, 0.1) 0%, transparent 70%), radial-gradient(circle, rgba(157, 78, 221, 0.15) 0%, transparent 65%);
		z-index: -1;
		animation: rotateNebula 45s linear infinite;
	}

@keyframes rotateNebula {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.header-title {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	background: linear-gradient(90deg, var(--quantum-blue), var(--neon-purple), var(--cyber-cyan));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 15px rgba(76, 201, 240, 0.3);
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin-bottom: var(--space-sm);
	position: relative;
}

	.header-title::after {
		content: "";
		position: absolute;
		bottom: -8px;
		left: 0;
		width: 100%;
		height: 4px;
		background: linear-gradient(90deg, transparent, var(--quantum-blue), transparent);
		border-radius: var(--radius-full);
		opacity: 0.7;
	}

.header-description {
	font-size: clamp(1.125rem, 2.5vw, 1.5rem);
	color: rgba(230, 239, 255, 0.85);
	max-width: 750px;
	line-height: 1.5;
	font-weight: 300;
	letter-spacing: 0.01em;
	position: relative;
	z-index: 2;
}

/* Navigation - Starship Console */
nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	background: rgba(18, 25, 45, 0.88);
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 32px rgba(0, 10, 25, 0.6);
	margin-bottom: var(--space-lg);
	position: sticky;
	top: var(--space-md);
	z-index: 100;
	transition: var(--transition-smooth);
}

	nav:hover {
		box-shadow: var(--shadow-glow), 0 12px 40px rgba(0, 15, 35, 0.75);
	}

	nav .logo {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
	}

		nav .logo img {
			height: 56px;
			border-radius: 20%;
			border: 2px solid rgba(76, 201, 240, 0.3);
			box-shadow: var(--glow-intensity);
			transition: var(--transition-smooth);
			filter: drop-shadow(0 0 10px rgba(76, 201, 240, 0.4));
		}

		nav .logo:hover img {
			transform: scale(1.05) rotate(5deg);
			box-shadow: 0 0 25px rgba(76, 201, 240, 0.6);
		}

	nav .menu {
		display: flex;
		gap: var(--space-md);
		align-items: center;
	}

	nav a {
		color: rgba(230, 239, 255, 0.88);
		text-decoration: none;
		padding: var(--space-xs) var(--space-md);
		border-radius: var(--radius-full);
		font-weight: 600;
		font-size: 1.05rem;
		position: relative;
		transition: var(--transition-smooth);
		letter-spacing: -0.02em;
		display: flex;
		align-items: center;
		gap: 6px;
	}

		nav a::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 0;
			height: 2px;
			background: linear-gradient(90deg, var(--quantum-blue), var(--neon-purple));
			border-radius: var(--radius-full);
			transition: var(--transition-smooth);
		}

		nav a:hover {
			color: var(--starlight);
			transform: translateY(-2px);
		}

			nav a:hover::after {
				width: 100%;
			}

		nav a.active {
			color: var(--starlight);
			background: rgba(30, 40, 70, 0.7);
			box-shadow: 0 0 15px rgba(157, 78, 221, 0.3);
		}

			nav a.active::after {
				width: 100%;
			}

/* Filters Area - Control Panel */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	background: rgba(20, 28, 50, 0.75);
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
	margin-bottom: var(--space-lg);
	box-shadow: 0 4px 20px rgba(0, 10, 25, 0.5);
}

	.filters .left {
		display: flex;
		gap: var(--space-sm);
		align-items: center;
		flex-wrap: wrap;
	}

#games-search-input {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-full);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(15, 23, 42, 0.7);
	color: var(--starlight);
	font-size: 1rem;
	width: 280px;
	min-width: 200px;
	transition: var(--transition-smooth);
	backdrop-filter: blur(5px);
}

	#games-search-input:focus {
		outline: none;
		border-color: var(--quantum-blue);
		box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.25);
		width: 320px;
	}

	#games-search-input::placeholder {
		color: rgba(198, 217, 238, 0.6);
		opacity: 1;
	}

#games-clear-search {
	background: rgba(30, 40, 70, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--starlight);
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: var(--transition-smooth);
	display: flex;
	align-items: center;
	gap: 4px;
}

	#games-clear-search:hover {
		background: rgba(76, 201, 240, 0.15);
		border-color: var(--quantum-blue);
		transform: scale(1.05);
	}

#games-tag-container {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	flex-wrap: wrap;
	padding: var(--space-xs) 0;
}

.tag {
	cursor: pointer;
	border-radius: var(--radius-full);
	padding: var(--space-xs) var(--space-md);
	background: rgba(30, 40, 70, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(219, 234, 254, 0.85);
	font-size: 0.875rem;
	transition: var(--transition-smooth);
	display: flex;
	align-items: center;
	gap: 4px;
	position: relative;
	overflow: hidden;
}

	.tag::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(76, 201, 240, 0.15), transparent);
		transform: translateX(-100%);
		transition: transform 0.6s ease;
	}

	.tag:hover::before {
		transform: translateX(100%);
	}

	.tag.active {
		background: linear-gradient(90deg, var(--neon-purple), var(--cyber-cyan));
		color: var(--void-black);
		border: none;
		box-shadow: 0 0 20px rgba(157, 78, 221, 0.45), 0 4px 15px rgba(0, 10, 25, 0.5);
		transform: translateY(-2px);
		font-weight: 600;
	}

		.tag.active::after {
			content: "✓";
			margin-left: 4px;
			font-weight: bold;
		}

/* Games Grid - Constellation Layout */
.games-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-lg);
	position: relative;
	padding: 4px;
}

/* Game Card - Holographic Display */
.games-card {
	position: relative;
	background: linear-gradient(160deg, rgba(20, 30, 55, 0.85), rgba(25, 35, 65, 0.92)), radial-gradient(circle at 30% 30%, rgba(76, 201, 240, 0.08) 0%, transparent 70%);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	transition: var(--transition-smooth);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

	.games-card::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(45deg, transparent 45%, rgba(157, 78, 221, 0.08) 55%, transparent 65%);
		transform: translateX(-100%);
		transition: transform 0.8s ease;
		z-index: -1;
	}

	.games-card:hover::before {
		transform: translateX(100%);
	}

	.games-card:hover {
		transform: translateY(-10px) scale(1.02);
		box-shadow: var(--shadow-hover);
		border-color: rgba(157, 78, 221, 0.35);
	}

	.games-card img {
		width: 100%;
		height: 160px;
		object-fit: cover;
		border-radius: var(--radius-sm);
		display: block;
		transition: var(--transition-smooth);
		border: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: 0 4px 12px rgba(0, 5, 15, 0.5);
	}

	.games-card:hover img {
		transform: scale(1.05);
		box-shadow: 0 6px 20px rgba(0, 10, 25, 0.7), 0 0 25px rgba(76, 201, 240, 0.2);
	}

	.games-card h3 {
		margin: var(--space-sm) 0 var(--space-xs);
		color: var(--starlight);
		font-size: 1.35rem;
		font-weight: 700;
		letter-spacing: -0.02em;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.games-card p {
		margin: 0;
		color: rgba(183, 201, 221, 0.85);
		font-size: 0.95rem;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		line-height: 1.5;
	}

	.games-card .year-badge {
		position: absolute;
		right: var(--space-md);
		top: var(--space-md);
		background: linear-gradient(90deg, var(--neon-purple), var(--cyber-cyan));
		color: var(--void-black);
		padding: 2px 10px;
		border-radius: var(--radius-full);
		font-size: 0.75rem;
		font-weight: 800;
		letter-spacing: 0.05em;
		box-shadow: 0 0 12px rgba(76, 201, 240, 0.4);
		z-index: 5;
		animation: pulseGlow 2s infinite;
	}

@keyframes pulseGlow {
	0%, 100% {
		box-shadow: 0 0 12px rgba(76, 201, 240, 0.4);
	}

	50% {
		box-shadow: 0 0 20px rgba(157, 78, 221, 0.6);
	}
}

.games-card .tags {
	display: flex;
	gap: var(--space-xs);
	flex-wrap: wrap;
	align-items: center;
	margin-top: var(--space-sm);
	padding-top: var(--space-xs);
	border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

	.games-card .tags .tag {
		font-size: 0.75rem;
		background: rgba(30, 40, 70, 0.6);
		color: rgba(219, 234, 254, 0.8);
		padding: 2px 8px;
		border-radius: var(--radius-full);
		border: 1px solid rgba(255, 255, 255, 0.06);
		transition: var(--transition-smooth);
	}

		.games-card .tags .tag:hover {
			background: rgba(76, 201, 240, 0.15);
			color: var(--quantum-blue);
			border-color: rgba(76, 201, 240, 0.3);
		}

.games-card .platforms {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: var(--space-xs);
	padding-top: var(--space-xs);
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

	.games-card .platforms img {
		width: 22px;
		height: 22px;
		border-radius: 4px;
		transition: var(--transition-smooth);
		filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

		.games-card .platforms img:hover {
			transform: scale(1.25);
			filter: drop-shadow(0 0 8px var(--quantum-blue));
		}

.more-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-md);
	color: var(--quantum-blue);
	font-weight: 700;
	text-decoration: none;
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-full);
	transition: var(--transition-smooth);
	position: relative;
	overflow: hidden;
	z-index: 1;
}

	.more-link::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(76, 201, 240, 0.15), transparent);
		transform: translateX(-100%);
		transition: transform 0.6s ease;
		z-index: -1;
	}

	.more-link:hover::after {
		transform: translateX(100%);
	}

	.more-link:hover {
		color: var(--starlight);
		transform: translateX(4px);
	}

/* Content Sections - Data Archives */
.content-section {
	background: linear-gradient(165deg, rgba(25, 35, 65, 0.85), rgba(30, 40, 75, 0.9)), radial-gradient(circle at 70% 20%, rgba(157, 78, 221, 0.1) 0%, transparent 60%);
	padding: var(--space-lg) var(--space-xl);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--shadow-card);
	margin-bottom: var(--space-lg);
	transition: var(--transition-smooth);
}

	.content-section:hover {
		box-shadow: var(--shadow-hover);
		border-color: rgba(157, 78, 221, 0.3);
	}

	.content-section h3 {
		color: var(--starlight);
		font-size: 1.875rem;
		margin-bottom: var(--space-md);
		background: linear-gradient(90deg, var(--quantum-blue), var(--neon-purple));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		position: relative;
		display: inline-block;
	}

		.content-section h3::after {
			content: "";
			position: absolute;
			bottom: -8px;
			left: 0;
			width: 100%;
			height: 3px;
			background: linear-gradient(90deg, transparent, var(--cyber-cyan), transparent);
			border-radius: var(--radius-full);
			opacity: 0.6;
		}

button.read-more {
	background: linear-gradient(90deg, var(--neon-purple), var(--cyber-cyan));
	color: var(--void-black);
	border: none;
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--radius-full);
	cursor: pointer;
	font-weight: 700;
	letter-spacing: 0.03em;
	transition: var(--transition-smooth);
	box-shadow: 0 4px 15px rgba(0, 10, 25, 0.5), var(--glow-intensity);
	position: relative;
	overflow: hidden;
	z-index: 1;
	margin-top: var(--space-md);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

	button.read-more::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, var(--cyber-cyan), var(--quantum-blue));
		transform: translateX(-100%);
		transition: transform 0.5s ease;
		z-index: -1;
	}

	button.read-more:hover::before {
		transform: translateX(0);
	}

	button.read-more:hover {
		transform: translateY(-2px) scale(1.05);
		box-shadow: 0 6px 25px rgba(0, 15, 35, 0.7), 0 0 30px rgba(76, 201, 240, 0.5);
		color: white;
	}

	button.read-more:active {
		transform: translateY(1px) scale(0.98);
	}

/* Footer - Cosmic Horizon */
.minimal-footer {
	text-align: center;
	padding: var(--space-lg) var(--space-md);
	color: rgba(159, 182, 211, 0.75);
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	margin-top: var(--space-xxl);
	font-size: 0.95rem;
	position: relative;
	overflow: hidden;
}

	.minimal-footer::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 200%;
		height: 2px;
		background: linear-gradient(90deg, transparent, var(--quantum-blue), var(--neon-purple), var(--cyber-cyan), transparent);
		animation: footerGlow 8s infinite linear;
	}

@keyframes footerGlow {
	0% {
		opacity: 0.3;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0.3;
	}
}

/* Game Frame Container - Portal Interface */
.iframe-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 70vh;
	margin: var(--space-xl) 0;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: radial-gradient(circle at 30% 30%, rgba(15, 23, 42, 0.9) 0%, rgba(10, 14, 23, 0.95) 100%), linear-gradient(145deg, rgba(25, 35, 65, 0.85), rgba(15, 23, 42, 0.95));
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: var(--shadow-card);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.game-frame {
	width: 95%;
	height: 85%;
	max-width: 1200px;
	max-height: 750px;
	border: none;
	border-radius: var(--radius-md);
	box-shadow: 0 15px 50px rgba(0, 10, 25, 0.8), 0 0 40px rgba(76, 201, 240, 0.25);
	transition: var(--transition-smooth);
}

.fullscreen-button {
	position: absolute;
	bottom: var(--space-lg);
	right: var(--space-lg);
	width: 60px;
	height: 60px;
	background: linear-gradient(145deg, rgba(30, 40, 70, 0.9), rgba(20, 30, 55, 0.95)), radial-gradient(circle at 30% 30%, rgba(76, 201, 240, 0.15) 0%, transparent 70%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-full);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234cc9f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'%3E%3C/path%3E%3C/svg%3E");
	background-size: 45%;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	transition: var(--transition-smooth);
	box-shadow: 0 4px 20px rgba(0, 10, 25, 0.6), var(--glow-intensity);
	z-index: 20;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

	.fullscreen-button:hover {
		background: linear-gradient(145deg, rgba(76, 201, 240, 0.25), rgba(157, 78, 221, 0.2));
		transform: scale(1.1) rotate(5deg);
		box-shadow: 0 6px 25px rgba(0, 15, 35, 0.75), 0 0 35px rgba(76, 201, 240, 0.6);
		border-color: var(--quantum-blue);
	}

	.fullscreen-button:active {
		transform: scale(0.95);
	}

	.fullscreen-button.exit-fullscreen {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'%3E%3C/path%3E%3C/svg%3E");
	}

/* Responsive Design - Adaptive Universe */
@media (max-width: 1024px) {
	:root {
		--space-xl: 2rem;
		--space-xxl: 3rem;
	}

	.games-grid {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}

	nav .logo img {
		height: 48px;
	}
}

@media (max-width: 768px) {
	:root {
		--space-lg: 1.5rem;
		--space-xl: 1.75rem;
		--space-xxl: 2.5rem;
	}

	main {
		padding: var(--space-lg) var(--space-md);
	}

	.section-header {
		padding: var(--space-md) var(--space-lg);
		margin-bottom: var(--space-lg);
	}

	.header-title {
		font-size: clamp(1.875rem, 6vw, 2.75rem);
	}

	.header-description {
		font-size: clamp(1rem, 3.5vw, 1.25rem);
	}

	nav {
		flex-direction: column;
		gap: var(--space-md);
		padding: var(--space-md);
		position: relative;
	}

		nav .menu {
			flex-wrap: wrap;
			justify-content: center;
			width: 100%;
		}

	#games-search-input {
		width: 100%;
		max-width: 400px;
	}

	.games-grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}

	.games-card img {
		height: 140px;
	}

	.iframe-container {
		min-height: 60vh;
	}

	.game-frame {
		width: 98%;
		height: 80%;
	}

	.fullscreen-button {
		bottom: var(--space-md);
		right: var(--space-md);
		width: 50px;
		height: 50px;
	}
}

@media (max-width: 480px) {
	:root {
		--space-md: 0.75rem;
		--space-lg: 1.25rem;
		--space-xl: 1.5rem;
	}

	.section-header {
		padding: var(--space-sm) var(--space-md);
	}

	.header-title {
		font-size: clamp(1.75rem, 8vw, 2.25rem);
	}

	nav .logo img {
		height: 42px;
	}

	nav a {
		font-size: 0.95rem;
		padding: var(--space-xs) var(--space-sm);
	}

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

	.games-card img {
		height: 160px;
	}

	.minimal-footer {
		font-size: 0.875rem;
		padding: var(--space-md) var(--space-sm);
	}
}

/* Accessibility & Polish */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Interactive Elements Enhancement */
a {
	transition: var(--transition-smooth);
}

button, .tag, .more-link {
	will-change: transform, box-shadow;
}

/* Loading Animation for Images */
@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}

	100% {
		background-position: 1000px 0;
	}
}

/* Scroll Progress Indicator */
body::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--neon-purple), var(--cyber-cyan), var(--quantum-blue)); transform-origin: left; transform: scaleX(0); z-index: 1000; transition: transform 0.1s ease-out; }

/* No JavaScript Fallback */
.js-disabled .fullscreen-button {
	display: none;
}

/* Performance Optimization */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}