/* Effet néon sur tout le groupe de recherche au hover */
.search-group:hover {
	box-shadow: 0 0 24px #863434, 0 0 48px #86343488 !important;
	background: #232733;
}


/* Final override: ensure mobile header is hidden on larger screens and only visible on mobile.
	 Placed at the end of the file to override any earlier conflicting rules. */
.mobile-games-header { display: none !important; }

@media (max-width: 1468px) {
	.mobile-games-header { display: flex !important; align-items: center !important; justify-content: space-between !important; }
}


/* Ensure hamburger is hidden on desktop for pages that include game.css */
@media (min-width: 1481px) {
	.menu-btn { display: none !important; }
}
/* Mobile: simplify upcoming header (no lines, no arrows) and center the title */
@media (max-width: 1480px) {
	.upcoming-title-line { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; }
	.upcoming-arrows { display: flex !important; visibility: visible !important; }
	.upcoming-title {
		text-align: left !important;
		margin: 0 auto 12px auto !important;
		padding: 0 6px !important;
		font-size: 1.3em !important;
		white-space: normal !important;
	}
	.upcoming-header-row { justify-content: left !important; align-items: start !important; gap: 6px !important; }

	/* Nudge header items slightly right on very small phones (Games page only) */
	.navbar {
		padding-left: 12px !important; /* move content inward from left edge */
		padding-right: 8px !important;
	}

	.logo img { margin-left: 4px !important; }

	.search-group { margin-left: 6px !important; }

	/* Keep the menu button last (rightmost) and make it visible on mobile */
	.menu-btn { display: inline-flex !important; order: 3 !important; margin-left: -80vw !important; margin-right: 8px !important; align-items: center !important; justify-content: center !important; }
}


/* Very small screens: show only the title and the sort row (as in the screenshot) */
@media (max-width: 1480px) {
	/* hide tags and the left-side controls so only the headline + sort row remain */
	.available-tags-row-wrapper,
	.available-top-left,
	.available-search-group,
	.available-count {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* tighten spacing under the title so the sort row sits close beneath */
	.available-title {
		margin-bottom: 6px !important;
		padding-left: 8px !important;
	}

	/* ensure the sort row and filter button are visible and aligned as in the capture */
	.available-top-right {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		width: 100% !important;
		padding: 0 8px !important;
	}
	.available-sort-row {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		width: 100% !important;
	}
	.available-sort-row span,
	.available-sort-row .sort-btn {
		color: #bdbdbd !important;
		font-size: 0.6em !important;
		font-weight: 600 !important;
	}
	.available-sort-row .filter-btn {
		margin-left: auto !important; /* push filter to the right */
	}
}
/* === TRAILER SECTION === */
body {
  background: linear-gradient(90deg,rgba(36,40,42,1) 0%, rgba(44,41,46,1) 50%, rgba(75,43,50,1) 100%); 
}
/* Profile Dropdown Styles */
.profile-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 320px;
	background: linear-gradient(180deg, rgba(24,28,35,0.98) 0%, rgba(35,39,51,0.98) 50%, rgba(75,43,50,0.98) 100%);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(134,52,52,0.4), 0 10px 30px rgba(0,0,0,0.8), 0 0 0 1px rgba(134,52,52,0.3);
	z-index: 1300;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-20px) scale(0.95);
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	border: 1px solid rgba(134,52,52,0.3);
}
.profile-dropdown::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../image/da479fac12787867e2b629e03138dfcd30aab7f7.png') center/cover no-repeat;
	opacity: 0.05;
	z-index: 0;
	pointer-events: none;
}
.profile-dropdown > * {
	position: relative;
	z-index: 1;
}
.profile-dropdown.open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}
.profile-dropdown-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px;
	background: linear-gradient(90deg, rgba(134,52,52,0.1) 0%, transparent 100%);
}
.dropdown-avatar {
	height: 60px;
	width: 60px;
	border-radius: 50%;
	border: 2px solid #863434;
	box-shadow: 0 0 15px rgba(134,52,52,0.3);
}
.dropdown-profile-info {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.dropdown-profile-name {
	font-weight: bold;
	color: #fff;
	font-size: 1.2em;
	text-shadow: 0 2px 8px rgba(134,52,52,0.3);
}
.dropdown-profile-mail {
	color: #00e0ff;
	font-size: 0.95em;
	opacity: 0.9;
}
.dropdown-divider {
	border: none;
	border-top: 1px solid rgba(134,52,52,0.3);
	margin: 0;
	opacity: 0.7;
}
.profile-dropdown-menu {
	padding: 12px 0;
}
.dropdown-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 1em;
	transition: all 0.3s ease;
	border-left: 3px solid transparent;
	position: relative;
}
.dropdown-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, #863434 0%, #00e0ff 100%);
	transition: width 0.3s ease;
}
.dropdown-item:hover::before {
	width: 3px;
}
.dropdown-item:hover {
	background: linear-gradient(90deg, rgba(134,52,52,0.2) 0%, rgba(0,224,255,0.1) 100%);
	color: #00e0ff;
	text-shadow: 0 0 8px rgba(0,224,255,0.4);
	transform: translateX(8px);
}
.dropdown-item.logout {
	border-top: 1px solid rgba(134,52,52,0.3);
	margin-top: 8px;
	color: #ff6b6b;
}
.dropdown-item.logout:hover {
	background: linear-gradient(90deg, rgba(255,107,107,0.2) 0%, rgba(134,52,52,0.1) 100%);
	color: #ff4757;
}
.dropdown-icon {
	font-size: 1.2em;
	width: 20px;
	text-align: center;
	filter: drop-shadow(0 0 4px rgba(134,52,52,0.3));
}
.profile-dropdown-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1250;
	background: transparent;
}
.profile-dropdown-backdrop.open {
	display: block;
}

/* Arrow indicator for dropdown */
.profile-dropdown::after {
	content: '';
	position: absolute;
	top: -8px;
	right: 20px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(35,39,51,0.98);
	filter: drop-shadow(0 -2px 4px rgba(134,52,52,0.3));
}

.trailer-section {
	max-width: 107vw;
	margin: 40px auto 0 auto;
	padding: 0 24px 40px 24px;
}
.trailer-card {
	position: relative;
	background: #151517;
	border-radius: 8px;
	box-shadow: 0 2px 16px rgba(0,0,0,0.18);
	border: 1.5px solid #797985;
	overflow: hidden;
	margin: 0 auto;
	max-width: 90%;
}
.trailer-card .coming-soon {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 120px;
	height: 60px;
	display: block;
	pointer-events: none;
}
.trailer-card .coming-soon img {
	width: 100%;
	height: auto;
	display: block;
}
.trailer-iframe {
	width: 100%;
	height: 80vh;
	min-height: 600px;
	border: none;
	display: block;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
}
/* === UPCOMING GAMES SECTION === */
.upcoming-section {
	max-width: 100%;
	margin: 60px auto;
	padding: 0 40px;
}
.upcoming-header-row {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-bottom: 48px;
	gap: 0;
	width: 100%;
}
.profile-avatar {
	height: 54px;
	margin-right: 10px;
	border-radius: 50%;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}
.upcoming-title {
	color: #fff;
	font-size: 2em;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 900;
	letter-spacing: 3px;
	margin: 0 40px;
	text-align: center;
	background: linear-gradient(90deg, #fff 0%, #00e0ff 50%, #fff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	padding: 0 20px;
	white-space: nowrap;
	text-shadow: 0 0 30px rgba(0, 224, 255, 0.5);
	position: relative;
}
.upcoming-title::before,
.upcoming-title::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 6px;
	height: 6px;
	background: #00e0ff;
	border-radius: 50%;
	box-shadow: 0 0 10px #00e0ff;
}
.upcoming-title::before {
	left: 0;
}
.upcoming-title::after {
	right: 0;
}
.upcoming-title-line {
	flex: 1;
	border: none;
	background: linear-gradient(90deg, transparent 0%, rgba(0, 224, 255, 0.5) 50%, transparent 100%);
	height: 2px;
	margin: 0;
	opacity: 1;
	position: relative;
}
.upcoming-title-line::after {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, transparent 0%, rgba(0, 224, 255, 0.2) 50%, transparent 100%);
	filter: blur(2px);
}
.upcoming-title-line:last-of-type {
	margin: 0;
}
.upcoming-arrows {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	gap: 16px;
	z-index: 10;
}
.upcoming-arrow {
	background: linear-gradient(135deg, rgba(0, 224, 255, 0.15), rgba(0, 224, 255, 0.05));
	color: #00e0ff;
	border: 2px solid rgba(0, 224, 255, 0.3);
	border-radius: 12px;
	width: 50px;
	height: 50px;
	font-size: 1.5em;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(0, 224, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}
.upcoming-arrow:hover {
	background: linear-gradient(135deg, rgba(0, 224, 255, 0.3), rgba(0, 224, 255, 0.1));
	border-color: rgba(0, 224, 255, 0.6);
	box-shadow: 0 6px 25px rgba(0, 224, 255, 0.4);
	transform: scale(1.1);
}
.upcoming-games-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	padding: 0 20px;
}
.upcoming-card {
	width: 320px;
	max-width: 320px;
	flex-shrink: 0;
	background: #151517;
	border-radius: 8px;
	box-shadow: 0 2px 16px rgba(0,0,0,0.18);
	border: 1.5px solid #797985;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 8px 14px 0px 14px;
	min-height: 28vw;
}
.upcoming-card .coming-soon {
	position: absolute;
	top: -8px;
	left: 0px;
	z-index: 10;
	width: 90px;
	height: 45px;
	display: block;
    
	pointer-events: none;
}
.upcoming-card .coming-soon img {
	width: 100%;
	height: auto;
	display: block;
}
.upcoming-card-img {
	width: 100%;
	height: 12vw; /* Reduced height to fit 4 cards */
	object-fit: cover;
	border-radius: 6px;
	display: block;
	border: 1px solid #797985;
	margin-bottom: 18px;
	position: relative;
	z-index: 1;
}
.upcoming-card-info {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.upcoming-card-info h4 {
	margin: 0 0 10px 0;
	color: #fff;
	font-size: 1.15em;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	text-align: left;
}
.upcoming-card-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 1em;
	margin-bottom: 8px;
	justify-content: flex-start;
}
.upcoming-card-meta img {
	height: 18px;
	margin-right: 8px;
	vertical-align: top;
	box-shadow: none;
	background: none;
	border: none;
	padding: 0;
	display: inline-block;
	position: relative;
	top: 2px;
}
.upcoming-card .view-btn {
	background: #232733;
	color: #fff;
	border: 1px solid #4a545c;
	border-radius: 12px;
	padding: 12px 30px;
	font-size: 0.95em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	width: 100%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.10);
	outline: none;
	margin-top: 28px;
}
.upcoming-card .view-btn:hover {
	background: #bf780e;
	color: #fff;
}

/* Mobile-specific tweaks for game page to match provided screenshot */
@media (max-width: 1480px) {
	/* Available games: show 2 columns on small phones, tighter gaps */
	.available-games-grid {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		justify-content: center !important;
		margin-top: 12px !important;
		padding: 0 8px !important;
	}

	/* Each game card more compact and visually consistent with screenshot */
	.game-card-available {
		padding: 8px !important;
		border-radius: 10px !important;
		min-height: auto !important;
	}

	.game-card-available img {
		height: 27vw !important; /* slightly taller than desktop to keep aspect */
		border-radius: 8px !important;
		margin-bottom: 10px !important;
	}

	.game-card-info h4 {
		font-size: 0.95em !important;
		margin-bottom: 6px !important;
	}

	.game-card-meta {
		gap: 8px !important;
		font-size: 0.95em !important;
	}

	/* Buttons: smaller, stacked nicely and centered */
	.game-card-actions {
		flex-direction: row !important;
		gap: 8px !important;
		justify-content: center !important;
		margin-top: 10px !important;
	}
	.view-btn, .download-btn {
		width: auto !important;
		padding: 8px 12px !important;
		font-size: 0.9em !important;
	}

	/* Make upcoming games horizontally scrollable like the screenshot */
	.upcoming-games-grid {
		display: flex !important;
		gap: 12px !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		padding: 8px 12px !important;
		scroll-snap-type: x mandatory !important;
	}
	.upcoming-card {
		min-width: 62% !important; /* peek next card */
		flex: 0 0 auto !important;
		height: 70vw !important;
		scroll-snap-align: start !important;
	}
	.upcoming-card img {
		height: 30vw !important;
		border-radius: 8px !important;
		margin-bottom: 2px !important;
	}
	.coming-soon {
		height: 5vw !important;
	}

	/* Trailer iframe responsive adjustments */
	.trailer-iframe {
		height: 46vw !important;
	}

	/* Make header icons compact (logo left, search+menu right) - reuse home rules but keep local */
	.navbar-center { display: none !important; }
	.navbar-right { gap: 8px !important; }
	.logo img { height: 28px !important; }
	.notif-btn { display: none !important; }

	/* Reduce large margins that push content inward */
	.available-section, .upcoming-section, .trailer-section {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	/* Footer: ensure it fits nicely at bottom with centered content */
	footer.footer-custom { margin: 16px 12px !important; }
	.footer-content-custom { padding: 12px !important; }
}

/* Small-phone layout: align 'Available' left and place Sort row + Filter as in the screenshot */
@media (max-width: 1480px) {
	/* Title left-aligned and closer to the page edge */
	.available-title {
		text-align: left !important;
		margin-left: 8px !important;
		margin-bottom: 6px !important;
		font-size: 1.8em !important;
	}

/* Preserve the design but make cards smaller on small phones */
@media (max-width: 1480px) {
	/* Slightly tighter grid spacing so smaller cards fit comfortably */
	.available-games-grid {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		padding: 0 6px !important;
	}

	/* Keep the thick rounded frame look but reduce its footprint */
	.game-card-available {
		border-radius: 14px !important;
		padding: 6px !important; /* smaller inner padding */
		border: 3px solid #3a3a3a !important; /* thinner outer frame */
		box-shadow: 0 8px 20px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,255,255,0.02) !important;
		min-height: auto !important;
	}

	/* Reduce banner size while keeping the white inset border look */
	.game-card-available > img {
		height: 20vw !important; /* smaller banner */
		width: calc(100% - 8px) !important;
		margin: 6px auto 8px auto !important;
		border-radius: 10px !important;
		border: 2px solid rgba(255,255,255,0.10) !important;
		box-shadow: 0 6px 12px rgba(0,0,0,0.42) inset, 0 6px 12px rgba(0,0,0,0.30) !important;
		object-fit: cover !important;
		display: block !important;
	}

	/* Slightly smaller title while keeping bold weight */
	.game-card-info h4 {
		font-size: 0.95em !important;
		margin: 6px 0 6px 0 !important;
	}

	/* Meta row icons and text slightly reduced */
	.game-card-meta { gap: 8px !important; }
	.game-card-meta img, .meta-platform img, .meta-rating img { width: 20px !important; height: 20px !important; }

	/* Keep rounded pill buttons but make them narrower so cards shrink */
	.view-btn, .download-btn {
		border-radius: 12px !important;
		padding: 8px 12px !important;
		min-width: 82px !important;
		font-size: 0.88em !important;
	}

	/* Ensure internal sizing doesn't overflow */
	.available-games-grid, .available-games-grid * { box-sizing: border-box !important; max-width: 100% !important; }
}

	/* Keep top row compact: label/search on left, sort/filter on the right */
	.available-top-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 8px !important;
		padding: 0 8px !important;
	}

	/* Hide the wide search input to free space on very small screens */
	.available-search-group { display: none !important; }

	/* Make the sort row take remaining space and keep filter pushed right */
	.available-top-right {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		width: auto !important;
		min-width: 0 !important;
	}
	.available-sort-row {
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		margin-left: 0 !important;
		margin-top: 0 !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
	}
	/* push the filter button to the right inside the sort row */
	.available-sort-row .filter-btn { margin-left: auto !important; }

	/* Slightly reduce paddings for tag row and available section */
	.available-tags-row-wrapper, .available-section {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}
/* Wrapper pour tags row et compteur alignés */
.available-tags-row-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	gap: 18px;
}
.available-tags-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 0;
	margin-left: 24px;
}
.available-tags-row-wrapper .available-count {
	color: #bdbdbd;
	font-size: 1.25em;
	font-weight: 700;
	margin-right: 24px;
	margin-bottom: 10px;
}
.available-top-right .available-count {
	margin-bottom: 36px;
}
/* Réorganisation du top row pour alignement demandé */
.available-top-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 18px;
	gap: 18px;
}
.available-top-left {
	display: flex;
    color: #444;
	align-items: center;
	gap: 5px;
    margin-top: -35px;
}
.available-top-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	min-width: 220px;
}
.available-sort-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 2px;
	margin-left: 0;
	margin-top: 40px;
}
.available-count {
	color: #bdbdbd;
	font-size: 1.25em;
	font-weight: 700;
	margin-right: 0;
	margin-top: -12px;
}
@media (max-width: 1400px) {
	.available-top-row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.available-top-right {
		align-items: flex-start;
		min-width: 0;
	}
	.available-sort-row {
		flex-wrap: wrap;
		gap: 6px;
	}
}

/* Hide Price sort option on small/medium screens */
@media (max-width: 1400px) {
	.sort-btn.hide-price {
		display: none !important;
		visibility: hidden !important;
	}
}
/* === AVAILABLE SECTION === */
.available-section {
	max-width: 85vw;
	margin: 40px auto 0 auto;
	padding: 0 24px 40px 24px;
	background: none;
}
.available-title {
	text-align: center;
	font-size: 2.1em;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 800;
	letter-spacing: 1px;
	color: #fff;
	margin-bottom: 24px;
	margin-top: 0;
}
.available-tags-row {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 18px;
	margin-left: 24px;
}
.tag {
	background: #2d323b;
	color: #fff;
	border: none;
	border-radius: 22px;
	border: 0.2px solid rgb(184, 170, 170);
	padding: 4px 16px;
	font-size: 1em;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 400;
	cursor: pointer;
	transition: box-shadow 0.2s, background 0.2s, color 0.2s;
	outline: none;
	box-shadow: none;
	}
	.tag.active, .tag:hover {
	background: #1a8cff;
	color: #fff;
	box-shadow: 0 0 8px 2px #1a8cff, 0 0 16px 4px #1a8cff44;
	}
.available-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	gap: 18px;
	position: relative;
}
.available-games-label {
	font-size: 1.25em;
	color: #a29696;
	font-weight: 700;
	margin-left: 8px;
}
.available-search-group {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	margin-left: 18px;
}
.available-search-bar {
	width: 180px;
	background: #2d323b;
	border: 1px solid rgb(185, 174, 174);
	border-radius: 10px;
	padding: 8px 18px;
	color: #bdbdbd;
	font-size: 1em;
	font-family: 'Segoe UI', Arial, sans-serif;
	outline: none;
	margin: 0 0 0 8px;
	transition: border 0.2s;
}
.available-search-bar:focus {
	border: 1.5px solid #1a8cff;
	color: #fff;
}
.available-count {
	color: #bdbdbd;
	font-size: 1.25em;
	font-weight: 700;
	margin-right: 24px;
}
.available-sort-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	margin-left: 210px;
	margin-top: 0px;
}
.available-sort-row span {
	color: #bdbdbd;
	font-size: 1.05em;
	font-weight: 600;
	margin-right: 4px;
}
.sort-btn {
	color: white;
	background: none;
	border: none;
	border-radius: 12px;
	padding: 6px 8px;
	font-size: 1em;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 500;
	cursor: pointer;
	transition: box-shadow 0.2s, background 0.2s, color 0.2s;
	outline: none;
	box-shadow: none;
}
.filter-btn {
	background: #36393f;
	color: white;
	background: none;
	border: none;
	border-radius: 12px;
	padding: 6px 24px;
	font-size: 1em;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border 0.2s;
	outline: none;
	box-shadow: 0 0 0 2px #232733;
}
.sort-btn.active, .sort-btn:hover {
	background: none;
	color: #fff;
	box-shadow: 0 0 8px 2px #1a8cff, 0 0 16px 4px #1a8cff44;
}
.filter-btn:hover {
	background: #232733;
	color: #fff;
	border: 2px solid #1a8cff;
}
/* Desktop - Modern Compact Game Cards */
.available-games-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 24px 0;
	padding: 0 24px;
	max-width: 100%;
}


.game-card-available:hover {
	transform: translateY(-8px);
}

.game-card-available img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
	border: none;
	gap: 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	transition: box-shadow 0.3s ease;
}

.game-card-available:hover img {
	flex: 1 1 320px;

	max-width: 360px;
	max-width: 360px;
	min-width: 260px;
	padding: 0 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.game-card-info h4 {
	margin: 0 0 8px 0;
	color: #fff;
	font-size: 1.1em;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.game-card-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.85em;
	margin-bottom: 8px;
	color: rgba(255, 255, 255, 0.6);
}

.game-card-meta img {
	height: 16px;
	width: 16px;
	margin-right: 4px;
	box-shadow: none;
	background: none;
	border: none;
}

.meta-platform,
.meta-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.9em;
}

.meta-votes {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.85em;
	font-weight: 400;
}

.game-card-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.view-btn,
.download-btn {
	background: rgba(0, 224, 255, 0.1);
	color: #00e0ff;
	border: 2px solid rgba(0, 224, 255, 0.3);
	border-radius: 8px;
	padding: 10px 16px;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	flex: 1;
	backdrop-filter: blur(10px);
	box-shadow: none;
}

.view-btn:hover,
.download-btn:hover {
	background: rgba(0, 224, 255, 0.2);
	border-color: rgba(0, 224, 255, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 224, 255, 0.3);
}

.download-btn {
	background: linear-gradient(135deg, #00e0ff, #0080ff);
	border: none;
	color: #fff;
}

.download-btn:hover {
	background: linear-gradient(135deg, #00f0ff, #0090ff);
}
/* Neon Button Effect */
.btn, button {
  box-shadow: 0 0 8px #863434, 0 0 24px #86343444;
  transition: box-shadow 0.3s, background 0.2s;
}
.btn:hover, button:hover {
  box-shadow: 0 0 24px #863434, 0 0 48px #86343488;
  background: #863434;
  color: #fff;
}

/* Neon Card Hover Effect */
.game-card.card-animate {
  box-shadow: 0 0 24px #863434, 0 0 48px #86343488;
  border-color: #863434;
  transform: scale(1.04) translateY(-8px);
}

/* Barre de recherche effet néon au survol */
.search-bar {
  box-shadow: none !important;
  padding-left: 30px !important;
}
.search-bar:hover, .search-bar:focus {
	box-shadow: none !important;
}

/* Bouton de recherche effet néon au survol */
.search-btn {
  box-shadow: none !important;
  transition: background 0.2s, box-shadow 0.3s;
}
.search-btn:hover {
	box-shadow: none !important;
	background: #232733;
}

/* Final card visual polish for small phones: make cards match the provided screenshot */
@media (max-width: 1480px) {
	.available-games-grid {
		gap: 18px 12px !important;
		padding: 0 8px !important;
	}

/* Tablet Design - allow up to 5 cards per row */
@media (min-width: 501px) and (max-width: 1468px) {
	.available-games-grid {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 18px !important;
		justify-content: center !important;
		padding: 0 32px !important;
	}

	.available-games-grid .game-card {
		flex: 1 1 calc((100% - 48px) / 3) !important;
		max-width: 360px !important;
		min-width: 260px !important;
	}

	.available-games-grid .game-card .game-card-image {
		height: 300px !important;
	}
}

/* Modern Mobile Game Card Design - 2 per row */
@media (max-width: 768px) {
	.available-games-grid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.game-card-available {
		border-radius: 12px !important;
		padding: 12px !important;
		background: rgba(0, 224, 255, 0.08) !important;
		border: 1px solid rgba(0, 224, 255, 0.15) !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
		overflow: hidden !important;
		display: flex !important;
		flex-direction: column !important;
		transition: all 0.3s ease !important;
	}
	
	.game-card-available:active {
		transform: scale(0.98) !important;
		background: rgba(0, 224, 255, 0.12) !important;
	}

	.game-card-available img {
		height: 180px !important;
		width: 100% !important;
		margin: -12px -12px 12px -12px !important;
		border-radius: 8px !important;
		border: none !important;
		box-shadow: none !important;
		object-fit: cover !important;
		display: block !important;
	}

	.game-card-info {
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 6px !important;
		flex: 1 !important;
	}

	.game-card-info h4 {
		font-size: 0.95em !important;
		margin: 0 !important;
		color: #fff !important;
		font-weight: 700 !important;
		font-family: 'Montserrat', sans-serif !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}

	.game-card-meta {
		display: flex !important;
		align-items: center !important;
		gap: 6px !important;
		margin-bottom: 6px !important;
		font-size: 0.7em !important;
		color: rgba(255, 255, 255, 0.6) !important;
		flex-wrap: wrap !important;
	}

	.meta-platform img,
	.meta-rating img {
		width: 14px !important;
		height: 14px !important;
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
	}

	.game-card-actions {
		display: flex !important;
		flex-direction: row !important;
		gap: 8px !important;
		margin-top: auto !important;
	}

	.view-btn,
	.download-btn {
		border-radius: 6px !important;
		padding: 9px 12px !important;
		flex: 1 !important;
		background: rgba(0, 224, 255, 0.1) !important;
		border: 1.5px solid rgba(0, 224, 255, 0.3) !important;
		box-shadow: none !important;
		color: #00e0ff !important;
		font-weight: 600 !important;
		font-size: 0.8em !important;
		backdrop-filter: blur(10px) !important;
		transition: all 0.2s ease !important;
	}
	
	.view-btn:active,
	.download-btn:active {
		transform: scale(0.95) !important;
	}

	.download-btn {
		background: linear-gradient(135deg, #00e0ff, #0080ff) !important;
		border: none !important;
		color: #fff !important;
	}

	/* Upcoming header - mobile friendly */
	.upcoming-header-row {
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		gap: 12px !important;
		margin-bottom: 24px !important;
		padding: 0 8px !important;
	}

	.upcoming-title-line {
		display: none !important;
	}

	.upcoming-title {
		font-size: 1.1em !important;
		letter-spacing: 1.5px !important;
		margin: 0 !important;
		padding: 0 !important;
		white-space: nowrap !important;
		flex: 0 0 auto !important;
	}

	.upcoming-title::before,
	.upcoming-title::after {
		display: none !important;
	}

	.upcoming-arrows {
		position: static !important;
		transform: none !important;
		display: flex !important;
		gap: 8px !important;
		flex: 0 0 auto !important;
	}

	.upcoming-arrow {
		width: 36px !important;
		height: 36px !important;
		font-size: 1.2em !important;
		border-radius: 8px !important;
		background: rgba(0, 224, 255, 0.1) !important;
		border: 1.5px solid rgba(0, 224, 255, 0.3) !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
	}

	.upcoming-arrow:active {
		transform: scale(0.92) !important;
		background: rgba(0, 224, 255, 0.2) !important;
	}
}

	

	@media (max-width: 1480px) {
		.game-card-available .game-card-meta img,
		.game-card-available .meta-platform img,
		.game-card-available .meta-rating img {
			width: 28px !important;
			height: 28px !important;
		}
	}

/* Strong mobile card visual to match provided screenshot */
@media (max-width: 1480px) {
	/* Outer card: thick rounded frame, darker outer border and inner padding */
	.game-card-available {
		border-radius: 20px !important;
		padding: 12px !important;
		background: linear-gradient(180deg, rgba(18,18,20,0.96), rgba(30,30,34,0.96)) !important;
		border: 6px solid #3a3a3a !important; /* outer frame */
		box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,255,255,0.02) !important;
		overflow: visible !important;
		min-height: auto !important;
	}

	/* Banner image: inset white rounded border like screenshot */
	.game-card-available > img {
		height: 36vw !important;
		width: calc(100% - 8px) !important;
		margin: 6px auto 10px auto !important;
		border-radius: 12px !important;
		border: 2px solid #ffffff !important; /* white inset border */
		box-shadow: 0 6px 14px rgba(0,0,0,0.45) inset, 0 8px 18px rgba(0,0,0,0.35) !important;
		object-fit: cover !important;
		display: block !important;
		background-clip: padding-box !important;
	}

	/* Title: compact, bold, and left aligned */
	.game-card-info h4 {
		font-size: 1.05em !important;
		margin: 10px 0 8px 0 !important;
		color: #fff !important;
		font-weight: 800 !important;
		letter-spacing: 0.2px !important;
	}

	/* Platform + rating row: icon + label, red percent, small votes */
	.game-card-meta {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		margin-bottom: 8px !important;
		color: #bfbfbf !important;
	}

	.meta-platform { gap: 8px; align-items: center; }
	.meta-platform img { width: 28px !important; height: 28px !important; }
	.meta-platform span, .meta-platform { color: #bfe6c6 !important; font-weight: 600; }

	.meta-rating { display:flex; align-items:center; gap:8px; }
	.meta-rating .percent {
		color: #e14b4b !important; /* red percent */
		font-weight: 800 !important;
		font-size: 0.95em !important;
	}
	.meta-rating .meta-votes { color: #9fa0a4 !important; font-size: 0.8em !important; margin-left: 6px !important; }

	/* Buttons: rounded pills, subtle inner border like screenshot */
	.view-btn, .download-btn {
		border-radius: 14px !important;
		padding: 10px 16px !important;
		min-width: 110px !important;
		background: #2f3539 !important;
		border: 1px solid rgba(255,255,255,0.06) !important;
		box-shadow: inset 0 -6px 16px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.35) !important;
		color: #ffffff !important;
		font-weight: 700 !important;
	}

	.game-card-actions { justify-content: space-between !important; gap: 12px !important; }
}

	/* Remove any accidental border/outline/shadow on small platform/rating icons */
	.game-card-available .game-card-meta img,
	.game-card-available .meta-platform img,
	.game-card-available .meta-rating img {
		border: none !important;
		box-shadow: none !important;
		outline: none !important;
		background: transparent !important;
	}

	.game-card-available .game-card-meta img,
	.game-card-available .meta-platform img,
	.game-card-available .meta-rating img {
		border: none !important;
		box-shadow: none !important;
		outline: none !important;
		background: transparent !important;
	}

	/* Reduce outer frame and inner padding to shrink footprint */
	.game-card-available {
		border-radius: 12px !important;
		padding: 6px !important;
		border: 3px solid #33353a !important; /* thinner outer frame */
		box-shadow: 0 8px 18px rgba(0,0,0,0.40), inset 0 0 0 1px rgba(255,255,255,0.02) !important;
		background: linear-gradient(180deg, rgba(18,18,20,0.96), rgba(30,30,34,0.96)) !important;
		min-height: auto !important;
		overflow: hidden !important;
	}

	/* Make the banner much smaller but keep inset border visual */
	.game-card-available > img {
		height: 76vw !important; /* increased for better visibility on mobile */
		width: calc(100% - 6px) !important;
		margin: 6px auto !important;
		border-radius: 8px !important;
		border: 1px solid rgba(255,255,255,0.06) !important;
		box-shadow: 0 4px 8px rgba(0,0,0,0.38) inset !important;
		object-fit: cover !important;
		display: block !important;
	}

	/* Tighter text and clamp long titles */
	.game-card-info h4 {
		font-size: 0.9em !important;
		margin: 4px 0 6px 0 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	/* Smaller meta icons and spacing */
	.game-card-meta { gap: 6px !important; font-size: 0.85em !important; }
	.game-card-meta img, .meta-platform img, .meta-rating img { width: 16px !important; height: 16px !important; }

	/* Narrow the action buttons substantially but keep pill look */
	.game-card-actions { gap: 6px !important; margin-top: 6px !important; }
	.view-btn, .download-btn {
		padding: 6px 10px !important;
		font-size: 0.82em !important;
		border-radius: 10px !important;
		min-width: 64px !important; /* compact but still tappable for most thumbs */
		width: auto !important;
	}

	/* Ensure no element overflows its grid cell */
	.available-games-grid, .available-games-grid * { box-sizing: border-box !important; max-width: 100% !important;justify-content: center; }
}

	/* Reduce card text size even more on very small screens */
	@media (max-width: 1480px) {
		.game-card-info h4 { font-size: 0.82em !important; line-height: 1.05 !important; }
		.game-card-meta { font-size: 0.78em !important; gap: 6px !important; }
		.meta-platform, .meta-rating { font-size: 0.78em !important; }
		.meta-votes { font-size: 0.7em !important; }
	}

	/* Further compact icons and buttons for ultra-small screens */
	@media (max-width: 1480px) {
		/* icons inside meta and platform */
		.game-card-meta img,
		.meta-platform img,
		.meta-rating img {
			width: 14px !important;
			height: 14px !important;
		}

		/* make the action buttons even smaller */
		.view-btn, .download-btn {
			padding: 6px 8px !important;
			font-size: 0.72em !important; /* smaller text inside buttons */
			min-width: 56px !important;
			border-radius: 8px !important;
		}

		/* reduce button widths previously enforced elsewhere */
		.view-btn { width: auto !important; }
		.download-btn { width: auto !important; }

		/* tighten actions row spacing */
		.game-card-actions { gap: 6px !important; justify-content: center !important; }
	}

		/* Aggressive shrink: make cards even more compact on the smallest phones */
		@media (max-width: 1480px) {
			/* reduce banner image more */
			.game-card-available > img {
				height: 24vw !important;
				border-radius: 6px !important;
				margin: 4px auto !important;
			}

			/* titles smaller and slightly tighter */
			.game-card-info h4 {
				font-size: 0.75em !important;
				line-height: 1.0 !important;
				margin: 2px 0 4px 0 !important;
			}

			/* icons tiny */
			.game-card-meta img, .meta-platform img, .meta-rating img {
				width: 12px !important;
				height: 12px !important;
			}

			/* very compact buttons */
			.view-btn, .download-btn {
				padding: 4px 6px !important;
				font-size: 0.65em !important;
				min-width: 48px !important;
				border-radius: 6px !important;
			}

			/* reduce spacing around meta and actions */
			.game-card-meta { gap: 4px !important; }
			.game-card-actions { gap: 4px !important; margin-top: 4px !important; }
		}

		/* Very-specific overrides for icon sizes inside the markup to match screenshot */
		@media (max-width: 1480px) {
			/* Android platform icon larger so it reads well in the capture */
			.available-games-grid .game-card-available .meta-platform.android img {
				width: 10px !important;
				height: 10px !important;
			}

			/* Mobile header (title + arrows) shown above the grid on small phones */
			@media (max-width: 1480px) {
				.mobile-games-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; margin: 6px 6px; }
				.mobile-games-title { color: #dcdcdc; font-weight: 700; font-size: 1.05em; }
				.mobile-games-controls { display: flex; gap: 8px; }
				.mobile-arrow { background: #2f3336; color: #fff; border: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
				.mobile-arrow.left { transform: rotate(0deg); }
				.mobile-arrow.right { transform: rotate(0deg); }
				/* header hidden on larger screens */
			}

			@media (min-width: 1481px) {
				.mobile-games-header { display: none !important; }
			}

			/* helper class used by JS to hide cards reliably even with other overrides */
			.card-hidden { display: none !important; }

			/* Rating smile / percent icon slightly smaller */
			.available-games-grid .game-card-available .meta-rating img {
				width: 18px !important;
				height: 18px !important;
			}

			/* Mobile header (.mobile-games-header) should be hidden on desktop and visible only on small screens */
			
			.mobile-games-header { display: none !important; }
			@media (max-width: 1468px) {
				.mobile-games-header { display: flex !important; align-items: center !important; justify-content: space-between !important; }
			}

			/* Fallback for any other img inside meta row */
			.available-games-grid .game-card-available .game-card-meta img {
				width: 10px !important;
				height: 10px !important;
			}
		}
		

			/* === Final tablet override for games page === */
			@media (min-width: 501px) and (max-width: 1268px) {
				body.page-games .available-games-grid {
						display: flex !important;
						flex-wrap: wrap !important;
						gap: 18px !important;
						justify-content: center !important;
						padding: 0 24px !important;
				}

				body.page-games .available-games-grid .game-card {
						flex: 1 1 calc((100% - 36px) / 3) !important;
						max-width: 320px !important;
						min-width: 240px !important;
				}

				body.page-games .game-card-image {
						height: 320px !important;
				}
			}


	/* Shrink coming-soon badges on very small screens so they take less visual space */
	@media (max-width: 1480px) {
		/* Trailer badge (top-left of trailer card) */
		.trailer-card .coming-soon {
			width: 70px !important;
			height: 34px !important;
			top: 6px !important;
			left: 6px !important;
			z-index: 12 !important;
		}

		/* Upcoming card badge */
		.upcoming-card .coming-soon {
			width: 56px !important;
			height: 28px !important;
			top: -6px !important;
			left: 6px !important;
			z-index: 12 !important;
		}

		/* Ensure badge images scale and do not overflow their containers */
		.trailer-card .coming-soon img,
		.upcoming-card .coming-soon img,
		.coming-soon img {
			max-width: 100% !important;
			height: auto !important;
			display: block !important;
		}

		/* keep them non-interactive on mobile */
		.coming-soon { pointer-events: none !important; }
	}

	/* Show hamburger on small screens (match home.css) */
	@media (max-width: 1468px) {
		.menu-btn, .hamburger {
			display: inline-flex !important;
			align-items: center !important;
			justify-content: center !important;
			width: 40px !important;
			height: 40px !important;
			border-radius: 8px !important;
			background: transparent !important;
			border: none !important;
			padding: 6px !important;
			margin-right: 10px !important;
		}
		.menu-btn img, .hamburger img { width: 22px !important; height: auto !important; }
		/* hide notif button on small screens (consistent with home) */
		.notif-btn { display: none !important; }
	}

	/* Mobile: pin search and hamburger to the right edge */
	@media (max-width: 1480px) {
		.navbar-right {
			display: flex !important;
			align-items: center !important;
			gap: 8px !important;
			margin-left: auto !important;
			padding-right: 6px !important;
		}
		.search-group {
			margin-left: 0 !important;
			margin-right: 0 !important;
			padding-right: 4px !important;
			background: transparent !important;
		}
		.search-btn {
			margin-left: 0 !important;
			margin-right: 0 !important;
			width: 40px !important;
			height: 40px !important;
			padding: 6px !important;
			box-shadow: none !important;
		}
		.menu-btn {
			margin-left: 0 !important;
			margin-right: -0vw !important;
			width: 42px !important;
			height: 42px !important;
			padding: 6px !important;
		}
		/* ensure both sit visually flush right by reducing extra spacing on the container */
		.navbar { padding-right: 6px !important; }
	}

/* Mobile: fix the top header to the viewport and push content down so it isn't covered */
@media (max-width: 768px) {
	.header {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1600 !important;
	}
	body {
		padding-top: 72px !important;
	}
}

/* Mobile filter sidebar (only shown on small screens) */
.mobile-filter-sidebar {
	display: none; /* Hidden by default on desktop */
	position: fixed;
	top: 0;
	right: 0; /* keep anchored to the right edge */
	width: 320px;
	max-width: 86vw;
	height: 100vh;
	background: #121215;
	/* keep a shadow but it will be translated off-screen with the element */
	box-shadow: -12px 0 30px rgba(0,0,0,0.6);
	z-index: 1200;
	/* hide by translating it fully to the right relative to its own width */
	transform: translateX(110%);
	transition: transform 0.28s ease-in-out;
	flex-direction: column;
	color: #e6e6e6;
	border-left: 1px solid rgba(255,255,255,0.03);
	padding: 14px;
}

/* Only show on mobile screens */
@media (max-width: 1468px) {
	.mobile-filter-sidebar {
		display: flex;
	}
}
.mobile-filter-sidebar.open {
	transform: translateX(0) !important;
}
.mobile-filter-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mobile-filter-header span { font-weight: 700; font-size: 1.05em; }
.mobile-filter-close {
	background: transparent; color: #fff; border: none; font-size: 1.1em; cursor: pointer; padding: 6px; border-radius: 6px;
}
.mobile-filter-body { padding-top: 12px; overflow-y: auto; flex: 1; }
.mobile-filter-body label { display: block; margin: 8px 0; color: #cfcfcf; }
.mobile-filter-body hr { border: none; border-top: 1px solid rgba(255,255,255,0.04); margin: 10px 0; }
.apply-filter-mobile, .clear-filter-mobile { width: 100%; padding: 10px; margin-top: 8px; border-radius: 8px; }
.apply-filter-mobile { background: #1a8cff; color: #fff; border: none; }
.clear-filter-mobile { background: #2d323b; color: #fff; border: none; }

/* Backdrop overlay when sidebar open */
.mobile-filter-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	z-index: 1100;
}
.mobile-filter-backdrop.open { display: block; }

/* Ensure sidebar only appears on small screens */
@media (min-width: 1469px) {
	.mobile-filter-sidebar, .mobile-filter-backdrop { 
		display: none !important; 
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
}

/* Force hamburger/menu button visible on very small screens (Games page) - override earlier negative margins */
@media (max-width: 1480px) {
	.menu-btn {
		display: inline-flex !important;
		order: 3 !important;
		margin-left: auto !important; /* push it to the far right */
		margin-right: -5px !important;
		align-items: center !important;
		justify-content: center !important;
		width: 40px !important;
		height: 40px !important;
		padding: 6px !important;
		border-radius: 8px !important;
		background: #2d323b !important;
		border: none !important;
		z-index: 1400 !important;
	}

	/* ensure navbar-right has space on the right so the button is not clipped */
	.navbar-right {
		padding-right: 12px !important;
		margin-left: auto !important;
	}

	/* prevent any previous rules that pushed the button off-screen */
	.menu-btn[style], .menu-btn[style] * { margin-left: 0 !important; }
}


/* Hide hamburger when it has the hidden class (used by JS when sidebar open) */
@media (max-width: 1480px) {
	.menu-btn.hidden {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}
}

/* Hide filter button while mobile filter sidebar is open (JS toggles .hidden) */

/* Mobile search — ensure JS can reveal the header search input when needed */
@media (max-width: 1468px) {
	.search-group.mobile-search-open .search-bar,
	.search-group.mobile-search-open .available-search-bar {
		display: block !important;
		/* wider on small screens: use viewport width but cap to a reasonable max */
		width: 45vw !important;
		max-width: 100vwv !important;
		opacity: 1 !important;
		transition: opacity 160ms ease-in-out !important;
	}
	/* Allow the search button to be clickable and visible */
	.search-group .search-btn { pointer-events: auto !important; }

	/* Mobile: add a subtle rounded border to the search input so it reads clearly on small screens */
	.search-group .search-bar,
	.search-group .available-search-bar {
	
		border-radius: 6px !important;
		background-clip: padding-box !important;
		margin-left: 0px;
	}
}

/* Mobile search — ensure JS can reveal the header search input when needed */
@media (max-width: 1468px) {
	.search-group.mobile-search-open .search-bar,
	.search-group.mobile-search-open .available-search-bar {
		display: block !important;
		/* wider on small screens: use viewport width but cap to a reasonable max */
		width: 45vw !important;
		max-width: 100vwv !important;
		opacity: 1 !important;
		transition: opacity 160ms ease-in-out !important;
	}
	/* Allow the search button to be clickable and visible */
	.search-group .search-btn { pointer-events: auto !important; }

	/* Mobile: add a subtle rounded border to the search input so it reads clearly on small screens */
	.search-group .search-bar,
	.search-group .available-search-bar {
	
		border-radius: 6px !important;
		background-clip: padding-box !important;
		margin-left: 0px;
	}
}



/* === GAME CARDS STYLES === */
.available-games-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 32px;
justify-content: center;
}

.game-card {
flex: 1 1 320px;
max-width: 320px;
min-width: 260px;
background: linear-gradient(145deg, rgba(35,39,51,0.95) 0%, rgba(44,41,46,0.95) 100%);
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(134,52,52,0.3);
transition: all 0.3s ease;
position: relative;
cursor: pointer;
}

@media (min-width: 768px) and (max-width: 1300px) {
	.available-games-grid {
		justify-content: center;
		gap: 18px;
	}
	.game-card {
		flex: 1 1 calc((100% - 36px) / 3);
		max-width: 320px;
		min-width: 240px;
	}
}

.game-card:hover {
transform: translateY(-4px);
border-color: rgba(0,224,255,0.5);
box-shadow: 0 8px 32px rgba(0,224,255,0.15);
}

.game-card.highlight {
border-color: rgba(255,215,0,0.5);
background: linear-gradient(145deg, rgba(35,39,51,0.95) 0%, rgba(75,43,50,0.95) 100%);
}

.game-card-image {
position: relative;
height: 200px;
overflow: hidden;
}

.game-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.game-card:hover .game-card-image img {
transform: scale(1.05);
}

.featured-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: linear-gradient(135deg, #ff3366 0%, #ff6b9d 50%, #c44569 100%);
	color: #fff;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 0.65em;
	font-weight: 800;
	text-transform: uppercase;
	z-index: 10;
	letter-spacing: 1px;
	box-shadow: 0 4px 15px rgba(255, 51, 102, 0.6), 
	            0 0 20px rgba(255, 51, 102, 0.4),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.2);
	animation: featuredPulse 2s ease-in-out infinite;
	backdrop-filter: blur(4px);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.game-card-content {
padding: 16px;
}

.game-title {
font-size: 1.1em;
font-weight: bold;
color: #e6eef8;
margin-bottom: 8px;
line-height: 1.3;
}

.game-meta {
display: flex;
gap: 12px;
margin-bottom: 12px;
font-size: 0.85em;
}

.game-platform, .game-genre {
background: rgba(134,52,52,0.3);
color: #b8c5d6;
padding: 4px 8px;
border-radius: 4px;
text-transform: uppercase;
font-size: 0.75em;
font-weight: 500;
}

.game-rating {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}

.stars {
color: #ffd700;
font-size: 0.9em;
}

.rating-text {
color: #e6eef8;
font-weight: bold;
font-size: 0.9em;
}

.votes {
color: #8892a6;
font-size: 0.8em;
}

.game-price {
font-size: 1.1em;
font-weight: bold;
color: #00e0ff;
margin-bottom: 12px;
}

.game-actions {
display: flex;
gap: 12px;
padding: 0 16px 16px 16px;
}

.btn-play {
flex: 1;
background: linear-gradient(90deg, #863434 0%, #00e0ff 100%);
color: white;
border: none;
padding: 10px 16px;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}

.btn-play:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,224,255,0.3);
}



/* === UPCOMING GAMES STYLES === */
.upcoming-games-grid {
display: flex;
gap: 24px;
overflow-x: auto;
padding-bottom: 16px;
scroll-behavior: smooth;
}

.upcoming-games-grid::-webkit-scrollbar {
height: 6px;
}

.upcoming-games-grid::-webkit-scrollbar-track {
background: rgba(134,52,52,0.2);
border-radius: 3px;
}

.upcoming-games-grid::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, #863434 0%, #00e0ff 100%);
border-radius: 3px;
}

.upcoming-game-card {
	width: 320px;
	max-width: 320px;
	flex-shrink: 0;
	background: linear-gradient(145deg, rgba(35,39,51,0.98) 0%, rgba(44,41,46,0.98) 100%);
	border-radius: 16px;
	overflow: hidden;
	border: 2px solid rgba(134,52,52,0.2);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	position: relative;
}

.upcoming-game-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(0, 224, 255, 0.05), transparent);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 1;
	pointer-events: none;
}

.upcoming-game-card:hover {
	transform: translateY(-8px);
	border-color: rgba(0,224,255,0.6);
	box-shadow: 0 16px 48px rgba(0,224,255,0.25), 0 0 0 1px rgba(0,224,255,0.3);
}

.upcoming-game-card:hover::before {
	opacity: 1;
}

.upcoming-game-image {
	position: relative;
	height: 200px;
	overflow: hidden;
}

.upcoming-game-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.upcoming-game-card:hover .upcoming-game-image img {
	transform: scale(1.08);
}

.coming-soon-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: linear-gradient(135deg, #ff9500 0%, #ff5e00 50%, #ff3d00 100%);
	color: #fff;
	padding: 6px 14px;
	border-radius: 8px;
	font-size: 0.7em;
	font-weight: 800;
	text-transform: uppercase;
	z-index: 10;
	letter-spacing: 1.2px;
	box-shadow: 0 4px 15px rgba(255, 149, 0, 0.6), 
	            0 0 20px rgba(255, 149, 0, 0.4),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.2);
	animation: comingSoonPulse 2.5s ease-in-out infinite;
	backdrop-filter: blur(4px);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@keyframes comingSoonPulse {
	0%, 100% {
		box-shadow: 0 4px 15px rgba(255, 149, 0, 0.6), 
		            0 0 20px rgba(255, 149, 0, 0.4),
		            inset 0 1px 0 rgba(255, 255, 255, 0.3);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 4px 20px rgba(255, 149, 0, 0.8), 
		            0 0 30px rgba(255, 149, 0, 0.6),
		            inset 0 1px 0 rgba(255, 255, 255, 0.4);
		transform: scale(1.05);
	}
}

.coming-soon-badge:hover {
	animation: none;
	background: linear-gradient(135deg, #ffa500 0%, #ff6e00 50%, #ff4d00 100%);
	box-shadow: 0 6px 25px rgba(255, 149, 0, 0.9), 
	            0 0 40px rgba(255, 149, 0, 0.7),
	            inset 0 1px 0 rgba(255, 255, 255, 0.4);
	transform: scale(1.1);
}

.upcoming-game-content {
	padding: 20px;
	position: relative;
	z-index: 2;
}

.upcoming-game-title {
	font-size: 1.2em;
	font-weight: 800;
	color: #fff;
	margin-bottom: 12px;
	line-height: 1.3;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.upcoming-game-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 0.85em;
	flex-wrap: wrap;
}

.upcoming-game-meta .platform-icon {
	width: 16px;
	height: 16px;
	color: #00e0ff;
	opacity: 0.9;
}

.release-date {
	color: #00e0ff;
	font-size: 0.9em;
	margin-bottom: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}

.release-date::before {
	content: '';
	width: 18px;
	height: 18px;
	display: inline-block;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300e0ff"><path d="M19,4h-1V2h-2v2H8V2H6v2H5C3.89,4,3.01,4.9,3.01,6L3,20c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V6C21,4.9,20.1,4,19,4z M19,20H5V10h14V20z M9,14H7v-2h2V14z M13,14h-2v-2h2V14z M17,14h-2v-2h2V14z M9,18H7v-2h2V18z M13,18h-2v-2h2V18z M17,18h-2v-2h2V18z"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
}

.upcoming-game-actions {
	padding: 0 20px 20px 20px;
	position: relative;
	z-index: 2;
}

.btn-notify {
	width: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: 2px solid rgba(255, 255, 255, 0.1);
	padding: 12px 20px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 0.95em;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: relative;
	overflow: hidden;
}

.btn-notify::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.btn-notify:hover::before {
	width: 300px;
	height: 300px;
}

.btn-notify:hover {
	background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
	box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
	transform: translateY(-2px);
}

.btn-notify.notified {
	background: linear-gradient(135deg, #20bf6b 0%, #26de81 100%);
	cursor: default;
	box-shadow: 0 4px 15px rgba(32, 191, 107, 0.4);
}

.btn-notify.notified:hover {
	transform: none;
}

/* === FILTER AND SORT STYLES === */
.tag.active {
background: linear-gradient(90deg, #863434 0%, #00e0ff 100%);
color: white;
}

.sort-btn.active {
background: linear-gradient(90deg, #863434 0%, #00e0ff 100%);
color: white;
}

/* === ERROR AND LOADING STATES === */
.no-games, .error-message {
text-align: center;
padding: 40px 20px;
color: #8892a6;
font-size: 1.1em;
grid-column: 1 / -1;
}

.error-message {
color: #ff6b6b;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
.available-games-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}

.upcoming-game-card,
.upcoming-card {
	width: 280px;
	max-width: 280px;
}

.game-actions {
flex-direction: column;
gap: 8px;
}
}
/* === Additional Styles for Badge Elements === */
.featured-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: linear-gradient(135deg, #ff3366 0%, #ff6b9d 50%, #c44569 100%);
	color: #fff;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 0.65em;
	font-weight: 800;
	text-transform: uppercase;
	z-index: 10;
	letter-spacing: 1px;
	box-shadow: 0 4px 15px rgba(255, 51, 102, 0.6), 
	            0 0 20px rgba(255, 51, 102, 0.4),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.2);
	animation: featuredPulse 2s ease-in-out infinite;
	backdrop-filter: blur(4px);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@keyframes featuredPulse {
	0%, 100% {
		box-shadow: 0 4px 15px rgba(255, 51, 102, 0.6), 
		            0 0 20px rgba(255, 51, 102, 0.4),
		            inset 0 1px 0 rgba(255, 255, 255, 0.3);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 4px 20px rgba(255, 51, 102, 0.8), 
		            0 0 30px rgba(255, 51, 102, 0.6),
		            inset 0 1px 0 rgba(255, 255, 255, 0.4);
		transform: scale(1.05);
	}
}

.featured-badge:hover {
	animation: none;
	background: linear-gradient(135deg, #ff3366 0%, #ff8fab 50%, #d4567a 100%);
	box-shadow: 0 6px 25px rgba(255, 51, 102, 0.9), 
	            0 0 40px rgba(255, 51, 102, 0.7),
	            inset 0 1px 0 rgba(255, 255, 255, 0.4);
	transform: scale(1.1);
}

.platform-badge,
.genre-badge {
	display: inline-block;
	background: rgba(134, 52, 52, 0.4);
	color: #fff;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.genre-badge {
	background: rgba(0, 224, 255, 0.2);
	color: #00e0ff;
}

.game-card-meta .meta-platform {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.platform-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: #00e0ff;
	opacity: 0.9;
}

.stars-display {
	color: #ffd700;
	font-size: 0.9em;
	letter-spacing: 1px;
}

.rating-value {
	color: #fff;
	font-weight: 600;
	font-size: 0.9em;
}

.game-card-available {
	position: relative;
}

.game-card-available .featured-badge {
	position: absolute;
	top: 8px;
	left: 8px;
}

/* No image fallback styles */
.game-card-available.no-image img,
.upcoming-game-image.no-image img {
	display: none;
}

.game-card-available.no-image::before {
	content: '';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 280px;
	background: linear-gradient(135deg, rgba(134,52,52,0.2), rgba(0,224,255,0.1));
	border-radius: 12px;
	margin-bottom: 12px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" opacity="0.3"><path d="M21,6H3C1.9,6,1,6.9,1,8v8c0,1.1,0.9,2,2,2h5v2h8v-2h5c1.1,0,2-0.9,2-2V8C23,6.9,22.1,6,21,6z M11,13H9v2H8v-2H6v-1h2V12h1v2h2V13z M15,15c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C16,14.55,15.55,15,15,15z M18,12c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C19,11.55,18.55,12,18,12z"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 25%;
}

.upcoming-game-image.no-image::before {
	content: '';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 200px;
	background: linear-gradient(135deg, rgba(134,52,52,0.2), rgba(0,224,255,0.1));
	border-radius: 12px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" opacity="0.3"><path d="M21,6H3C1.9,6,1,6.9,1,8v8c0,1.1,0.9,2,2,2h5v2h8v-2h5c1.1,0,2-0.9,2-2V8C23,6.9,22.1,6,21,6z M11,13H9v2H8v-2H6v-1h2V12h1v2h2V13z M15,15c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C16,14.55,15.55,15,15,15z M18,12c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C19,11.55,18.55,12,18,12z"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20%;
}