/* Ligne à côté du titre Latest Game Highlights */
.game-highlights .section-title-line {
	flex: 1 1 0;
	border: none;
	border-top: 2.5px solid #fff;
	opacity: 0.5;
	margin: 0 0 0 32px;
	height: 0;
	min-width: 72vw;
}

/* Very small mobile tweaks: center Featured Trailer and Quick Links and remove decorative lines/buttons */
@media (max-width: 1480px) {
	/* Petite ligne blanche verticale entre les cartes de la section News (mobile) */
	.news-row .news-card {
		box-sizing: border-box; /* ensure border doesn't expand card width unexpectedly */
		padding-left: 6px; /* make room for the separator line */
	}
	/* add a thin white separator on the left of every card except the first one */
	.news-row .news-card:not(:first-child) {
		border-left: 0.5px solid rgba(255,255,255,0.9);
		border-radius: 0px;
	}
	.featured-trailer-links {
		max-width: 100% !important;
		margin: 12px 0 !important;
		padding: 0 12px !important;
		box-sizing: border-box !important;
	}
	.featured-trailer-links-columns {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 12px !important;
		width: 100% !important;
	}
	.featured-trailer-col, .quick-links-col {
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}
	/* Hide decorative horizontal rules and any arrow controls inside these column headers */
	.featured-trailer-col-header hr,
	.quick-links-col-header hr,
	.featured-trailer-title-line,
	.featured-trailer-col-header .section-controls,
	.quick-links-col-header .section-controls {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Center the titles */
	.featured-trailer-col-header h3,
	.quick-links-col-header h3,
	.featured-trailer-title-row h3 {
		text-align: center !important;
		width: 100% !important;
		margin: 0 0 8px 0 !important;
		font-size: 1.4rem !important;
	}

	/* Make iframe and quick-links full width and centered */
	.featured-trailer {
		margin: 0 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		padding: 6px !important;
		border-radius: 10px !important;
		overflow: hidden !important;
		background: transparent !important;
	}
	.featured-trailer iframe,
	.featured-trailer video {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: 16/9 !important;
		margin: 0 auto !important;
		display: block !important;
		object-fit: cover !important;
	}
	.quick-links {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		padding: 12px !important;
		border-radius: 12px !important;
		box-sizing: border-box !important;
		align-items: center !important;
	}
	.quick-links-card h4, .quick-links-card p {
		text-align: center !important;
		margin: 6px 0 !important;
	}
	/* Make quick-links buttons simple and centered; hide any extra decorative controls */
	.quick-links .quick-links-buttons {
		justify-content: center !important;
		gap: 8px !important;
		flex-wrap: wrap !important;
	}
	.quick-links .btn {
		padding: 8px 12px !important;
		font-size: 0.95rem !important;
	}

	/* Ensure no horizontal overflow from this section */
	.featured-trailer-links, .featured-trailer-links * {
		max-width: 100% !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}
}

@media (max-width: 1400px) {
	.footer-content-custom {
		padding: 20px 18px 32px 18px;
	}
	/* Mobile footer: make it a centered rounded card with stacked content */
	footer.footer-custom {
		margin: 18px 12px !important; /* tighter outer margin on mobile */
		min-height: auto !important;
		border-radius: 12px !important;
		box-shadow: 0 8px 30px rgba(0,0,0,0.48) !important;
		border: 1px solid rgba(255,255,255,0.18) !important;
		overflow: visible !important;
	}
	.footer-bg-custom {
		opacity: 1 !important;
		filter: blur(8px) brightness(0.45) !important;
		border-radius: 12px !important;
	}
	.footer-content-custom {
		max-width: calc(100% - 24px) !important;
		margin: 12px auto !important;
		padding: 18px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 12px !important;
	}
	.footer-row-custom {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 10px !important;
	}
	/* Stack logo under the text and links under the logo on mobile */
	.footer-logo-links-inline {
		flex-direction: column !important;
		align-items: center !important;
		gap: 12px !important;
		width: 100% !important;
	}
	.footer-main-logo-copyright-col {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 6px !important;
		order: 1 !important;
		width: 100% !important;
	}
	/* Ensure copyright sits under the logo and is centered on mobile */
	.footer-copyright-row {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
		width: 100% !important;
		order: 2 !important;
	}
	.footer-copyright-custom {
		margin: 0 !important;
		margin-top: 4px !important;
		margin-left: 0 !important;
		text-align: center !important;
	}
	.footer-main-logo-custom {
		order: 1 !important;
		justify-content: center !important;
	}
	.footer-main-logo-custom img {
		height: 56px !important; /* smaller logo on mobile */
		width: auto !important;
	}
	.footer-links-custom {
		order: 2 !important;
		width: 100% !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		justify-content: center !important;
		gap: 8px 12px !important;
		margin-top: 6px !important;
	}
	.footer-links-col-custom {
		align-items: center !important;
		text-align: center !important;
		min-width: 0 !important;
		flex: 0 0 48% !important; /* two columns per row */
		max-width: 48% !important;
	}
	.footer-left-block,
	.footer-links-block {
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 10px !important;
	}
	.footer-main-logo-custom img {
		height: 72px !important;
		border-radius: 10px !important;
		padding: 6px !important;
	}
	.footer-info-custom h4 {
		font-size: 1.1rem !important;
		text-align: center !important;
	}
	.footer-info-custom p {
		font-size: 0.95rem !important;
		text-align: center !important;
	}
	.footer-links-custom {
		/* keep row/wrap behavior (two columns) - do not force column here */
		align-items: center !important;
		gap: 12px !important;
		margin-left: 0 !important;
	}
	.footer-links-col-custom {
		align-items: center !important;
		min-width: auto !important;
		font-size: 1.05rem !important;
	}
	.footer-contact-btn-custom {
		display: flex !important;
		justify-content: center !important;
		margin-left: 0 !important;
	}
	.footer-contact-btn-custom button {
		background: #c62828 !important;
		padding: 12px 28px !important;
		font-size: 1rem !important;
		border-radius: 8px !important;
	}
	.footer-divider-custom {
		width: 80% !important;
		margin: 8px 0 !important;
	}
	.footer-social-row-custom {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 18px !important;
		margin-top: 12px !important;
	}
	.footer-social-icons-custom {
		gap: 18px !important;
		margin-right: 0 !important;
	}
	.footer-social-icons-custom img {
		height: 28px !important;
		margin-top: 0 !important;
	}
	/* Strong override: force footer links into two columns on mobile */
	.footer-links-custom {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 10px 12px !important;
	}
	.footer-links-custom > .footer-links-col-custom {
		flex: 0 0 48% !important;
		max-width: 48% !important;
		box-sizing: border-box !important;
		padding: 6px 8px !important;
	}
	.footer-links-col-custom a {
		display: inline-block !important; /* prevent anchors stacking unexpectedly */
	}
}

/* Show game-highlights controls on small screens up to 700px */
@media (min-width: 700px) {
	/* Ensure the title row can position absolute controls */
	.game-highlights .section-title {
		position: relative !important;
		padding-right: 64px !important; /* space for the controls */
	}

	/* Re-enable only the controls for game-highlights (keeps other sections untouched) */
	.game-highlights .section-controls {
		display: flex !important;
		gap: 12px !important;
		position: absolute !important;
		right: 12px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		z-index: 5 !important;
	}

	.game-highlights .section-controls button {
		width: 40px !important;
		height: 40px !important;
		font-size: 1.1em !important;
		border-radius: 8px !important;
	}
	

	/* keep the decorative line hidden to avoid layout shift, only show buttons */
	.game-highlights .section-title-line { display: none !important; }
}
/* News rows horizontal layout */

.news-row {
	display: flex;
	width: 100%;
	max-width: 100%;
	gap: 32px;
	justify-content: stretch;
	margin-bottom: 24px;
	margin-top: 34px;
}
.news-row-1 .news-card {
	flex: 1 1 0;
	width: 47vw;
	max-width: 47vw;
}
.news-row-2 .news-card {
	flex: 1 1 0;
	width: 31vw;
	max-width: 31vw;
}
.news-row .news-card img {
	width: 100%;
	height: 25vw;
	object-fit: cover;
	border-radius: 12px;
	display: block;
	border: 1px solid #fff;
}
.footer-main-logo-copyright-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}
.footer-copyright-custom {
	margin-top: -40px;
	margin-bottom: 0px;
	padding-top: 0px;
	line-height: 1.1;
}
.quick-links-card h4 {
	margin-bottom: 90px !important;
}
.quick-links-card p {
	margin-bottom: 90px !important;
}
.quick-links-buttons {
	margin-top: 52px !important;
}
.featured-trailer-col-header h3,
.quick-links-col-header h3 {
	white-space: nowrap;
}
/* --- NAVBAR --- */
.header {
	
	padding: 0;
}
.navbar {
	max-width: 100vw;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 70px;
}

/* When the mobile sidebar menu is open, hide the top header to avoid duplication.
	 The body gets class `mobile-menu-open` from JS. This rule only applies on small screens. */
@media (max-width: 1468px) {
	body.mobile-menu-open .header {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		overflow: hidden !important;
	}
}
.navbar-left {
	display: flex;
	align-items: center;
	gap: 40px;
}
.navbar-left a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: opacity 0.3s ease;
}
.navbar-left a:hover {
	opacity: 0.8;
}
.logo-img {
	height: 54px;
	margin-right: 2px;
}
.logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}
.logo-main {
	font-size: 2.2em;
	font-weight: bold;
	color: #fff;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	letter-spacing: 1px;
}
.logo-sub {
	font-size: 1em;
	color: #00e0ff;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	margin-left: 2px;
}
.navbar-center {
	display: flex;
	gap: 52px;
	align-items: flex-start;
	margin-top: 0px;
    margin-left: -90px;
}
.navbar-center a {
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.15em;
	transition: color 0.2s;
	position: relative;
}

.navbar-center a.active {
  color: #00e0ff;
  text-shadow: 0 0 8px #00e0ff, 0 0 24px #00e0ff44;
  border-bottom: 2.5px solid #00e0ff;
  position: relative;
  background: linear-gradient(90deg, rgba(0,224,255,0.1) 0%, rgba(0,224,255,0.05) 100%);
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,224,255,0.3), inset 0 0 20px rgba(0,224,255,0.1);
  animation: activeGlow 2s ease-in-out infinite alternate;
}

.navbar-center a.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #00e0ff 0%, #863434 100%);
  border-radius: 2px;
  margin-left: -2px;
}

@keyframes activeGlow {
  0% { box-shadow: 0 0 20px rgba(0,224,255,0.3), inset 0 0 20px rgba(0,224,255,0.1); }
  100% { box-shadow: 0 0 30px rgba(0,224,255,0.5), inset 0 0 30px rgba(0,224,255,0.15); }
}

.navbar-center a:hover {
	color: #00e0ff;
}
.navbar-right {
	display: flex;
	align-items: center;
	gap: 5vw;
}
.search-group {
	display: flex;
	align-items: center;
	flex-direction: row;
	background: #2d323b;
	border-radius: 14px;
	padding: 0 0 0 12px;
	margin-right: 4px;
    margin-left: 10px;
	height: 2.5vw;
	width: 15vw;
	position: static;
    gap: -100px;
    transition: box-shadow 0.3s, background 0.2s;
}
	/* 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;
	
	}


.search-bar:hover, .search-bar:focus {
    box-shadow: none !important;
}
.search-btn:hover {
    box-shadow: none !important;
}
.search-bar {
	flex: 1;
    margin-left: -20px;
	padding: 7px 0 7px 0;
	border: none;
	background: transparent;
	color: #fff;
	outline: none;
	font-size: 1em;
    width: 10px;
	height: 44px;
	box-sizing: border-box;
	border-radius: 24px 0 0 24px;
    box-shadow: none !important;
}

.search-btn {
	background: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
	border-radius: 0 24px 24px 0;
	width: 44px;
	height: 44px;
    margin-left: -10px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
	margin-left: -15px;
	margin-right: 0;
    box-shadow: none !important;
}


.notif-btn {
	background: #2d323b;
	border: none;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 8px;
	position: relative;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.2s;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.notif-btn:hover {
	background: #232733;
}
.notif-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.notif-dot {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 8px;
	height: 8px;
	background: #ff2d2d;
	border-radius: 50%;
	border: 2px solid #2d323b;
	z-index: 2;
}
.profile {
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 18px;
	padding: 6px;
	position: relative;
	cursor: pointer;
}
.profile-avatar {
	height: 54px;
	margin-right: 10px;
	border-radius: 50%;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}
.profile-avatar:hover {
	border-color: #863434;
	box-shadow: 0 0 20px rgba(134, 52, 52, 0.5);
}
/* Hide the original profile info in header */
.profile-info {
	display: none;
}

/* 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;
}

/* Notifications dropdown - reuse visual style from profile dropdown */
.notif-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 340px;
	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: 12px;
	box-shadow: 0 18px 50px rgba(134,52,52,0.35), 0 8px 30px rgba(0,0,0,0.7);
	z-index: 1300;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px) scale(0.98);
	transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
	overflow: hidden;
	border: 1px solid rgba(134,52,52,0.25);
}
.notif-dropdown.open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}
.notif-dropdown-header {
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(90deg, rgba(134,52,52,0.06) 0%, transparent 100%);
}
.notif-dropdown-list { padding: 8px 0; max-height: 280px; overflow: auto; }
.notif-item { display: block; padding: 12px 16px; text-decoration: none; color: #fff; }
.notif-item:hover { background: linear-gradient(90deg, rgba(134,52,52,0.08) 0%, rgba(0,224,255,0.04) 100%); color: #00e0ff; }
.notif-item-title { font-weight: 700; margin-bottom: 4px; }
.notif-item-meta { font-size: 0.85em; color: rgba(255,255,255,0.7); }

/* Ensure the notif dropdown is responsive on smaller screens */
@media (max-width: 1400px) {
	.notif-dropdown { width: 300px; right: -6px; }
}

/* 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));
}

/* Mobile adjustments */
@media (max-width: 1400px) {
	.profile {
		display: flex !important;
	}
	.profile-avatar {
		height: 40px !important;
	}
	.profile-dropdown {
		width: 280px;
		right: -10px;
	}
	.profile-dropdown-header {
		padding: 16px;
	}
	.dropdown-avatar {
		height: 50px;
		width: 50px;
	}
	.dropdown-profile-name {
		font-size: 1.1em;
	}
	.dropdown-profile-mail {
		font-size: 0.9em;
	}
}

/* --- HERO SECTION (Netflix-style) --- */
.main-hero {
	max-width: 100vw;
	margin: 0;
	padding: 0;
	position: relative;
	background: #000;
}

.hero-img-container {
	position: relative;
	width: 100%;
	height: 85vh;
	min-height: 600px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hero-content-wrapper {
	position: relative;
	z-index: 2;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 60px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

.hero-info {
	flex: 1;
	max-width: 650px;
}

.hero-genre {
	display: inline-block;
	background: linear-gradient(135deg, #00e0ff, #0066ff);
	color: #fff;
	padding: 8px 20px;
	border-radius: 25px;
	font-size: 0.9em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 20px;
	box-shadow: 0 4px 20px rgba(0, 224, 255, 0.5);
}

.hero-main-title {
	font-size: 4.5em;
	font-weight: 900;
	margin: 0 0 20px 0;
	line-height: 1.1;
	color: #fff;
	text-shadow: 
		0 0 20px rgba(0, 224, 255, 0.3),
		0 4px 30px rgba(0, 0, 0, 0.8);
	letter-spacing: -1px;
}

.hero-desc {
	font-size: 1.3em;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 30px 0;
	text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8);
	font-weight: 400;
}

.hero-meta {
	display: flex;
	gap: 20px;
	margin-bottom: 35px;
	flex-wrap: wrap;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(10px);
	padding: 10px 18px;
	border-radius: 10px;
	font-size: 1em;
	font-weight: 600;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.meta-item svg {
	flex-shrink: 0;
}

.meta-item.status-badge {
	background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 200, 100, 0.2));
	border-color: rgba(0, 255, 136, 0.4);
	color: #00ff88;
}

.meta-item.status-badge.upcoming {
	background: linear-gradient(135deg, rgba(255, 200, 0, 0.2), rgba(255, 150, 0, 0.2));
	border-color: rgba(255, 200, 0, 0.4);
	color: #ffc800;
}

.hero-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 40px;
	border-radius: 8px;
	font-size: 1.1em;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.btn-primary {
	background: linear-gradient(135deg, #00e0ff, #0080ff);
	color: #fff;
	box-shadow: 0 8px 30px rgba(0, 224, 255, 0.4);
}

.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(0, 224, 255, 0.6);
	background: linear-gradient(135deg, #00f0ff, #0090ff);
}

.btn-secondary {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	backdrop-filter: blur(10px);
	border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateY(-3px);
}

.hero-background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

.hero-background-image::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.95) 0%,
		rgba(0, 0, 0, 0.7) 50%,
		rgba(0, 0, 0, 0.3) 100%
	);
	z-index: 1;
}

.hero-background-image::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.9) 0%,
		transparent 60%
	);
	z-index: 1;
}

.hero-accent-bars {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 0;
	z-index: 3;
	padding-right: 40px;
}

.accent-bar {
	width: 6px;
	height: 200px;
	background: linear-gradient(to bottom, #00e0ff, #0080ff);
	border-radius: 3px;
	box-shadow: 0 0 20px rgba(0, 224, 255, 0.6);
	animation: barPulse 3s ease-in-out infinite;
}

@keyframes barPulse {
	0%, 100% {
		opacity: 1;
		box-shadow: 0 0 20px rgba(0, 224, 255, 0.6);
	}
	50% {
		opacity: 0.6;
		box-shadow: 0 0 40px rgba(0, 224, 255, 0.9);
	}
}
	color: #fff;
	transition: background 0.2s, color 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero-arrow-left {
	left: 24px;
}
.hero-arrow-right {
	right: 24px;
}


body {
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Arial, sans-serif;
	 background: linear-gradient(90deg,rgba(36,40,42,1) 0%, rgba(44,41,46,1) 50%, rgba(75,43,50,1) 100%); 
	color: #fff;
}
/* Canvas Starfield Background */
#star-bg {
	position: fixed;
	top: 0;
	left: 0;
	/* use percentage width to avoid adding a horizontal scrollbar on some devices */
	width: 100%;
	height: 100vh;
	z-index: -1;
	display: block;
	pointer-events: none;
}

/* 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);
}


header.header {
	
	padding: 18px 0;
}
.container.header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 120vw;
	margin: 0 auto;
}
.logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.5em;
	font-weight: bold;
	color: #00e0ff;
}
.logo img {
	height: 36px;
}
.nav {
	display: flex;
	gap: 24px;
}
.nav a {
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s;
}
.nav a:hover {
	color: #00e0ff;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 18px;
}
.search-bar {
	padding: 7px 44px 7px 14px;
	border-radius: 10px;
	border: none;
	color: #fff;
	outline: none;
	font-size: 1em;
	width: 180px;
}
.search-group .search-bar, .search-group .available-search-bar {
  padding-left: 25px !important;
}

/* Mobile-specific: add subtle rounded border for clarity */
@media (max-width: 1468px) {
  .search-group .search-bar,
  .search-group .available-search-bar {
   
    border-radius: 12px !important;
    background-clip: padding-box !important;
  }
  .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: 55vw !important;
		max-width: 100vwv !important;
		opacity: 1 !important;
		transition: opacity 160ms ease-in-out !important;
	}
	.search-group.mobile-search-open {
			position: relative;
			z-index: 1500 !important;
			/* shift right slightly so the active search bar moves toward the center on open */
			transform: translateX(-5vw) !important;
			transition: transform 180ms ease-out !important;
	}
  .search-group .search-btn { pointer-events: auto !important; }
  .mobile-search-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.45);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		z-index: 1400;
	}
	.mobile-search-backdrop.open { display: block; }
}
.profile {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 20px;
}
	.profile {
		display: flex !important;
		align-items: center !important;
		gap: 4px !important;
		order: 2 !important;
	}
.main-carousel {
	max-width: 1100px;
	margin: 32px auto 0 auto;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 24px #863434;
	background: #232733;
}
.carousel-slide {
	position: relative;
}
.carousel-slide img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
}
.carousel-caption {
	position: absolute;
	left: 32px;
	bottom: 32px;
	background: rgba(24,28,35,0.8);
	padding: 18px 28px;
	border-radius: 12px;
}
.carousel-caption h2 {
	margin: 0 0 10px 0;
	font-size: 2em;
	color: #fff;
}
.carousel-tags span {
	background: #863434;
	color: #fff;
}
.carousel-controls {
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 10px;
}
.carousel-controls button {
	background: #232733;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	font-size: 1.2em;
	cursor: pointer;
	transition: background 0.2s;
}
.carousel-controls button:hover {
	background: #863434;
	color: #fff;
}

/* Game Highlights Cards */
.game-highlights {
	width: 100%;
	max-width: 1200px; /* keep the highlights area constrained on very wide screens */
	margin-left: 24px; /* slightly reduced left margin */
	margin-right: 10px;
	padding-left: 0;
	padding-right: 0;
}
.game-cards {
	width: 94vw;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	gap: 22px;
	display: flex;
	flex-wrap: nowrap; /* keep a single row so extras are scrolled to */
	/* Disable user-driven scrolling on desktop; programmatic scroll via buttons still works */
	overflow-x: hidden; /* hide native scrollbar and prevent manual scroll */
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}
.menu-btn {
  display: none !important;
}
/* hide any scrollbar visuals as a double-safety (won't affect programmatic scroll) */
.game-cards::-webkit-scrollbar { display: none; }
.game-cards { -ms-overflow-style: none; scrollbar-width: none; }
.game-card {
	flex: 0 0 calc((100% - 66px) / 4);
	min-width: 200px;
	max-width: none;
	background: transparent;
	overflow: visible;
	border: none;
	box-shadow: none;
	position: relative;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	transition: transform 0.3s ease;
	cursor: pointer;
}

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

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

.game-card:hover img {
	box-shadow: 0 12px 40px rgba(0, 224, 255, 0.3);
	border: 2px solid rgba(0, 224, 255, 0.5);
}

.game-info {
	padding: 16px 8px 0 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	text-align: left;
}

.game-info h4 {
	margin: 0;
	font-size: 1.1em;
	color: #fff;
	font-weight: 700;
	text-align: left;
	font-family: 'Montserrat', sans-serif;
}

.game-info p {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9em;
	line-height: 1.4;
	max-height: 2.8em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.game-info button {
	margin-top: 8px;
	background: rgba(0, 224, 255, 0.1);
	color: #00e0ff;
	border: 2px solid rgba(0, 224, 255, 0.3);
	border-radius: 8px;
	padding: 10px 24px;
	font-weight: 600;
	font-size: 0.95em;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.game-info button:hover {
	background: rgba(0, 224, 255, 0.2);
	border-color: rgba(0, 224, 255, 0.6);
	transform: translateX(4px);
	box-shadow: 0 4px 16px rgba(0, 224, 255, 0.3);
}
.game-highlights-horizontal {
    background: rgba(35,39,51,0.7);
    border: 2px solid #444;
    border-radius: 8px;
    margin: 32px 32px 0 32px;
    padding: 2px 4px 2px 4px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18);
    margin-top: 104px;
    position: relative;
}
.game-highlights-horizontal-title-row {
    display: flex;
    align-items: center;
    gap: 48px;
    top: -80px;
    margin-bottom: 0;
    margin-left: 10px;
    margin-top: 0;
}
.game-highlights-horizontal-title-row h3 {
    margin: 0;
    font-size: 1.3em;
    color: #fff;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.game-highlights-horizontal-title-line {
    flex: 1;
    border: none;
    border-top: 2px solid #fff;
    opacity: 0.5;
    margin: 0 0 0 18px;
    height: 0;
}
.game-highlights-horizontal .section-title {
    position: absolute;
    top: -66px;
    left: 0;
    width: 100%;
    background: none;
    margin: 0;
    padding: 0 0 0 10px;
    z-index: 2;
}
.game-highlights-horizontal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../image/da479fac12787867e2b629e03138dfcd30aab7f7.png') center right no-repeat;
    background-size: cover;
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
}
.game-highlights-horizontal > * {
    position: relative;
    z-index: 1;
}
.game-horizontal-list {
    display: flex;
    gap: -20px;
    padding: -0px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.game-horizontal-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.game-horizontal-item {
    border-radius: 12px;
    width: 18vw;
    min-width: 10vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.game-horizontal-item:hover {
    transform: translateY(-12px) scale(1.05);
    filter: drop-shadow(0 8px 24px rgba(255, 107, 0, 0.4));
}

.game-horizontal-item.trending:hover {
    filter: drop-shadow(0 8px 32px rgba(255, 60, 0, 0.6));
}

.game-horizontal-item img {
    width: 10vw;
    height: 9vw;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s;
}

.game-horizontal-item:hover img {
    border-color: rgba(255, 107, 0, 0.6);
}

.game-horizontal-item.trending img {
    border-color: rgba(255, 60, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 60, 0, 0.3);
}

.game-overlay {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10vw;
    height: 9vw;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.game-horizontal-item:hover .game-overlay {
    opacity: 1;
}

.trending-badge {
    position: absolute;
    top: 8px;
    right: 50%;
    transform: translateX(50%) translateX(4.5vw);
    font-size: 1.4em;
    z-index: 2;
    animation: flicker 1.5s infinite;
    filter: drop-shadow(0 0 8px rgba(255, 60, 0, 0.8));
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.game-horizontal-item h5 {
    color: #fff;
    font-size: 1em;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    text-align: center;
    margin: 0;
    margin-top: 2px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

.game-horizontal-item:hover h5 {
    color: #ff6b00;
}

/* News Section */
.news-section {
	/* prevent horizontal overflow by using percentage-based max width */
	max-width: 100%;
	margin: 48px auto 0 auto;
	padding: 0 32px;
}
.news-cards {
    display: flex;
    gap: 48px;
    margin-top: 58px;
    margin-bottom: 28px;
    justify-content: flex-start;
}
.news-card {
    border-radius: 16px;
    overflow: hidden;
    width: 30vw;
    min-width: none;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    overflow: visible !important;
}
.news-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px 12px 12px 12px;
    display: block;
    border: 1px solid #fff;
}
.news-card .coming-soon img {
    border: none;
}
.news-info {
    padding: 24px 18px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.news-info h4 {
    margin: 0 0 8px 0;
    font-size: 2em;
    color: #fff;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
}
.news-info .news-date {
    font-size: 1.3em;
    color: #fff;
    margin-bottom: 4px;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-weight: 400;
}
.news-info button {
    background: #fff;
    color: #232733;
    border: none;
    border-radius: 8px;
    padding: 10px 28px;
    font-weight: 700;
    font-size: 1.2em;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 18px;
    align-self: flex-start;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.news-info button:hover {
    background: #00e0ff;
    color: #fff;
}
.news-card .coming-soon {
    position: absolute;
    top: -30px;
    left: -18px;
    z-index: 10;
    background: none;
    border: none;
    padding: 0;
    overflow: visible;
}
.news-card .coming-soon img {
    width: 90px;
    height: auto;
    display: block;
    border-top-left-radius: 16px;
    box-shadow: none;
    margin: 0;
}
.news-title-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 0;
    margin-left: 10px;
    margin-top: 0;
}
.news-title-row h3 {
    margin: 0;
    font-size: 1.6em;
    color: #fff;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.news-title-line {
    flex: 1;
    border: none;
    border-top: 2px solid #fff;
    opacity: 0.5;
    margin: 0 0 0 18px;
    height: 0;
}
.news-card p {
    color: #e0e0e0;
    font-size: 1.1em;
    margin: 0;
    margin-top: 18px;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-weight: 400;
}


/* === Featured Trailer & Quick Links Section (2 columns, each with its own title and line) === */
.featured-trailer-links {
	max-width: 100%;
	margin: 48px auto 0 auto;
	padding: 0 32px;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow-x: hidden;
}
.featured-trailer-links-columns {
	display: flex;
	flex-direction: row;
	gap: 32px;
	width: 100%;
	justify-content: space-between;
	align-items: flex-start;
}
.featured-trailer-col, .quick-links-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
featured-trailer-col-header, .quick-links-col-header {
	width: 100%;
	margin-bottom: 18px;
	margin-left: 0;
	display: flex;
	align-items: center;
	gap: 16px;
}
.featured-trailer-col-header h3,
.quick-links-col-header h3 {
	margin: 0;
	font-size: 2.5em;
	color: #fff;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0.5px;
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1.1;
}
.featured-trailer-col-header hr,
.quick-links-col-header hr {
	border: none;
	border-top: 2px solid #fff;
	opacity: 0.5;
	margin: 0;
	width: 100%;
	height: 0;
}
.featured-trailer {
	width: 100%;
	background: #232733;
	border-radius: 18px;
	box-shadow: 0 2px 16px rgba(0,0,0,0.18);
	padding: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
}
.featured-trailer iframe,
.featured-trailer video {
	width: 100%;
	height: 100%;
	border-radius: 18px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
}
.quick-links {
	width: 100%;
	max-width: 100%;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	padding-right: 15px;
	gap: 0;
	overflow: hidden;
}

.quick-links-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.quick-link-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	background: transparent;
	border-radius: 0;
	color: #fff;
	text-decoration: none;
	font-size: 1.05em;
	font-weight: 500;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	transition: all 0.2s ease;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 16px;
}

.quick-link-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.quick-link-item:hover {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.1);
	transform: none;
	box-shadow: none;
	color: #00e0ff;
}

.quick-link-item svg {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.2s ease;
	width: 20px;
	height: 20px;
}

.quick-link-item:hover svg {
	transform: none;
	color: #00e0ff;
}

.quick-link-item span {
	flex: 1;
}
.quick-links-buttons {
	display: flex;
	gap: 58px;
	justify-content: center;
}
.btn {
	background: #1a8cff;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 12px 28px;
	font-weight: 600;
	font-size: 1.1em;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	gap: 8px;
}
.btn .icon {
	font-size: 1.2em;
	margin-left: 6px;
}
.btn-red {
	background: #d32f2f;
	color: #fff;
}
.btn:hover {
	background: #863434;
	color: #fff;
}

/* Featured Trailer & Quick Links Title Row */
.featured-trailer-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 18px;
	margin-top: 48px;
}
.featured-trailer-title-row h3 {
	margin: 0;
	font-size: 2em;
	color: #fff;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0.5px;
	flex: 1 1 0;
}
.featured-trailer-title-line {
	flex: 2;
	border: none;
	border-top: 2px solid #fff;
	opacity: 0.5;
	margin: 0 18px 0 18px;
	height: 0;
}
.quick-links-title {
	text-align: right;
	flex: 1 1 0;
}
.featured-trailer-links-content {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    margin-top: 0;
}
.featured-trailer {
    flex: 2;
    background: #232733;
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18);
    padding: 0;
    overflow: hidden;
    min-width: 420px;
}
.featured-trailer iframe {
    width: 100%;
    height: 30vw;
    border-radius: 18px;
    display: block;
}
.quick-links {
    flex: 2;
    background-image: url(../image/b564929098bbbb3575dc32f29068958c1c846457.png);
	background-size: cover;
	background-position: center;
    border-radius: 24px;
	height: 10px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18);
    padding: 36px 32px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 420px;
}
.quick-links-card h4 {
    margin: 0 0 18px 0;
    color: #fff;
    font-size: 2.5em;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    text-align: center;
}
.quick-links-card p {
    color: #e0e0e0;
    font-size: 1.9em;
	line-height: 1.9;
    margin: 0 0 24px 0;
    text-align: center;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-weight: 400;
}
.quick-links-buttons {
    display: flex;
    gap: 48px;
    justify-content: center;
}
.btn {
    background: #1a8cff;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 1.1em;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn .icon {
    font-size: 1.2em;
    margin-left: 6px;
}
.btn-red {
    background: #d32f2f;
    color: #fff;
}
.btn:hover {
    background: #863434;
    color: #fff;
}

/* Footer */
footer.footer-custom {
	position: relative;
	background: transparent;
	margin: 4vw 40px 40px 40px; /* top, right, bottom, left */
	padding: 0;
	color: #fff;
	overflow: hidden;
	min-height: 21vw;
	border-radius: 8px;
	box-shadow: 0 4px 32px rgba(0,0,0,0.18);
	border: 1px solid #fff;
}

		.section-title {
			position: relative;
			display: flex;
			align-items: center;
			gap: 12px;
			padding-right: 84px; /* reserve space for controls on the right */
		}

		.section-controls {
			position: absolute !important;
			right: 12px !important;
			top: 50% !important;
			transform: translateY(-50%) !important;
			display: flex !important;
			gap: 12px !important;
			z-index: 5 !important;
		}
/* --- Desktop-only: show section title divider --- */
/* Hide by default (mobile-first); enable on desktop widths */
.section-title-line,
.game-highlights .section-title-line {
	display: none !important;
}


	.section-title-line,
	.game-highlights .section-title-line {
		display: block !important;
		visibility: visible !important;
		border-top: 2.5px solid #fff !important;
		opacity: 0.5 !important;
		margin: 0 0 0 24px !important;
		height: 0 !important;
		flex: 1 1 0 !important;
		min-width: 72vw !important;
	}

.footer-bg-custom {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: url('../image/da479fac12787867e2b629e03138dfcd30aab7f7.png') center/cover no-repeat;
	z-index: 0;
	opacity: 1;
	filter: blur(12px) brightness(0.5) contrast(0.9);
	/* Pour éviter que le flou déborde sur le contour blanc */
	border-radius: 32px;
}
/* Footer Layout inspired by screenshot */
.footer-content-custom {
	position: relative;
	z-index: 1;
	max-width: 170vw;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 21vw;
	padding: 32px 48px 0 48px;
	box-sizing: border-box;
}
.footer-row-custom {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	gap: 72px;
}
.footer-left-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 20vw;
	max-width: 520px;
	flex: 1 1 0;
	gap: 108px;
}
.footer-title-custom {
	color: #fff;
	font-size: 2em;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	margin: 0 0 24px 0;
	line-height: 1.2;
}
.footer-logo-img-custom {
	height: 110px;
	margin: 0 0 8px 0;
}
.footer-copyright-custom {
	color: #fff;
	font-size: 1.1em;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	margin-top: -20px;
	margin-left: 10vw;
	display: flex; /* Ensure the copyright and divider are in the same line */
	align-items: center; /* Center align items vertically */
	line-height: 1.1;
}
.footer-links-block {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	flex: 2 1 0;
	gap: 64px;
	margin-top: 32px;
}
.footer-links-col-custom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	font-size: 1.2em;
	color: #fff;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 600;
	min-width: 140px;
}
.footer-links-col-custom span {
	color: #fff;
	opacity: 0.5;
	font-size: 1.5em;
	margin-bottom: 8px;
}
.footer-links-col-custom a {
	color: #fff;
	text-decoration: none;
	margin-bottom: 4px;
	transition: color 0.2s;
	font-weight: 600;
}
.footer-links-col-custom a:hover {
	color: #00e0ff;
}
.footer-contact-btn-custom {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
		font-weight: 500;
		font-size: 0.5em;
}
.footer-contact-btn-custom button {
	background: #c62828;
	color: #fff;
	border: none;
	border-radius: 4px;
	
	padding: 16px 16px;
	font-size: 1.2em;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s;
}
.footer-contact-btn-custom button:hover {
	background: #a31515;
}
.footer-social-row-custom {
	width: 100%;
	margin-top: 48px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 102px;
}
.footer-social-row-custom {
	display: flex;
	align-items: center; /* Align items in the row */
	justify-content: space-between; /* Space between copyright and divider */
}
.footer-divider-custom {
	width: 100%;
	border: none;
	border-top: 2px solid #fff;
	opacity: 0.7;
	margin: 0 0 12px 0;
}
.footer-social-icons-custom {
	display: flex;
	gap: 148px;
	align-items: center;
	margin-right: 24px;
}
.footer-social-icons-custom img {
	height: 8px;
	filter: brightness(0) invert(1);
	transition: filter 0.2s;
}
.footer-social-icons-custom img:hover {
	filter: brightness(1) invert(0) sepia(1) hue-rotate(180deg) saturate(5);
}
.footer-main-logo-custom {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 18px;
}
.footer-main-logo-custom img {
	height: 110px;
	border-radius: 18px;
	padding: 8px;
}
.footer-grid-custom {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.footer-logo-links-inline {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 48px;
	margin-top: 32px;
	margin-bottom: 16px;
}
.footer-main-logo-custom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-width: 220px;
}
.footer-links-custom {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10vw;
	margin-left: -75vw;
}
.footer-info-custom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 260px;
}
.footer-info-custom h4 {
	margin: 0 0 8px 0;
	color: #fff;
	font-size: 2em;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
}
.footer-info-custom p {
	margin: 0 0 12px 0;
	color: #fff;
	font-size: 1.2em;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	display: inline; /* Ensure the copyright and divider are in the same line */
	vertical-align: middle; /* Center align items vertically */
}
.footer-copyright-row {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.footer-divider-custom {
	width: 20px;
	min-width: 60px;
	max-width: none;
	border: none;
	border-top: 2px solid #fff;
	opacity: 0.7;
	
}
.footer-copyright-custom {
	color: #fff;
	font-size: 1.1em;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	line-height: 1.1;
}
/* .footer-links-custom gap corrigé plus haut, suppression de la redéfinition */
.footer-links-col-custom {
	display: flex;
	flex-direction: column;
	gap: 5px 20px;
	font-size: 1.2em;
	color: #fff;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-weight: 800;
}
.footer-links-col-custom a {
	color: #fff;
	text-decoration: none;
	margin-bottom: 4px;
	transition: color 0.2s;
}
.footer-links-col-custom a:hover {
	color: #00e0ff;
}
.footer-contact-btn-custom {
	display: flex;
	align-items: flex-end;
	margin-left: 150px;
}
.footer-contact-btn-custom button {
	background: #c62828;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 1.7em;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.2s;
}
.footer-contact-btn-custom button:hover {
	background: #a31515;
}
.footer-social-row-custom {
	width: 100%;
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}
.footer-divider-custom {
	width: 72vw;
	border: none;
	border-top: 3px solid #fff;
	opacity: 0.7;
	margin: 0 0 12px 0;
}
.footer-social-icons-custom {
	display: flex;
	gap: 40px;
	align-items: center;
	margin-right: 24px;
}
.footer-social-icons-custom img {
	margin-top: -250px;
	margin-bottom: 5px;
	height: 28px;
	filter: brightness(0) invert(1);
	transition: filter 0.2s;
}
.footer-social-icons-custom img:hover {
	filter: brightness(1) invert(0) sepia(1) hue-rotate(180deg) saturate(5);
}
.footer-newsletter h4 {
	margin: 0 0 8px 0;
	color: #00e0ff;
}
.footer-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.2em;
	font-weight: bold;
	color: #00e0ff;
}
.footer-logo img {
	height: 32px;
}
.footer-links {
	display: flex;
	gap: 18px;
}
.footer-links a {
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s;
}
.footer-links a:hover {
	color: #00e0ff;
}
.footer-social {
	display: flex;
	gap: 12px;
}
.footer-social img {
	height: 28px;
	filter: brightness(0) invert(1);
	transition: filter 0.2s;
}
.footer-social img:hover {
	filter: brightness(1) invert(0) sepia(1) hue-rotate(180deg) saturate(5);
}

/* Section Title */
.section-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    margin-top: 18px;
    margin-bottom: 25px;
    position: relative;
}
.section-title h3 {
    margin: 0;
    font-size: 1.3em;
    color: #fff;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.section-title-line {
    flex: 1;
	width: 100vw;
    border: none;
    border-top: 2px solid #fff;
    opacity: 0.5;
    margin: 0 0px 0 8px;
    height: 0;
}
.section-controls {
    display: flex;
    gap: 18px;
    position: relative;
    z-index: 1;
	
}
.section-controls button {
    background: #32373b;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.5em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    box-shadow: none;
}
.section-controls button:hover {
    background: #444;
    color: #00e0ff;
}
.news-cards:first-of-type {
	display: flex !important;
	gap: 0 !important;
	margin-bottom: 0 !important;
	justify-content: space-between !important;
	padding-left: 0 !important;
	box-sizing: border-box !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: 0 !important;
	height: auto !important;
}
.news-cards:first-of-type .news-card {
	flex: 1 1 0 !important;
	width: 50% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
}
.news-cards:first-of-type .news-card img {
	width: 100% !important;
	object-fit: cover !important;
	display: block !important;
}
/* --- Responsive: Mobile / Small tablets --- */
@media (max-width: 1468px) {
	/* Layout: stack major sections and allow horizontal scrolling for card lists */
	.navbar-center {
		display: none; /* hide desktop nav on mobile */
	}

	/* Mobile navbar: compact, logo left, icons (search + menu) right */
	header.header {
		padding: 6px 8px !important;
	}
	.navbar {
		height: 56px !important;
		padding: 0 8px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	.logo {
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
	}
	.logo img {
		height: 28px !important;
		width: auto !important;
	}
	/* Right-side icons: keep them compact and vertically centered */
	.navbar-right {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 8px !important;
		margin-left: auto !important; /* push to the far right */
	}
	/* Hide the search input bar on mobile, keep only the icon */
	.search-bar {
		display: none !important;
	}
	/* Mobile search group: make it compact and icon-only */
	.search-group {
		background: transparent !important;
		padding: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		height: auto !important;
		width: auto !important;
		display: flex !important;
		align-items: center !important;
		border-radius: 8px !important;
	}
	/* Mobile search button: make it standalone and properly sized */
	.search-btn {
		width: 40px !important;
		height: 40px !important;
		padding: 8px !important;
		border-radius: 8px !important;
		background: #2d323b !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transition: background 0.2s !important;
	}
	.search-btn:hover {
		background: #232733 !important;
		box-shadow: 0 0 15px rgba(134, 52, 52, 0.3) !important;
	}
	.search-btn svg {
		width: 20px !important;
		height: 20px !important;
	}
	
	/* Ensure other navbar buttons have consistent sizing */
	.navbar-right button {
		width: 40px !important;
		height: 40px !important;
		padding: 8px !important;
		border-radius: 8px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.navbar-right img {
		height: 24px !important;
		width: auto !important;
	}
	/* Hamburger / menu icon styles on mobile */
	.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: #2d323b !important;
		border: none !important;
		padding: 8px !important;
	}
	.menu-btn:hover, .hamburger:hover {
		background: #232733 !important;
		box-shadow: 0 0 15px rgba(134, 52, 52, 0.3) !important;
	}
	.menu-btn svg, .hamburger svg {
		width: 20px !important;
		height: auto !important;
	}
	/* Ensure the notification button is hidden on mobile to avoid confusion with the menu */
	.notif-btn {
		display: none !important;
	}
	/* By default (desktop) hide the menu-btn; mobile media query above makes it visible */
	.menu-btn {
		display: none;
			margin-right: 30px !important;
	}
	.profile {
		display: none; /* hide profile details to save space */
	}
	.navbar-right {
		gap: 12px;
	}
	.search-group {
		width: auto;
		height: 44px;
		padding: 0 8px;
		margin-left: 6px;
	}

	.main-hero {
		margin: 10px 12px 0 12px;
		border-radius: 12px;
	}
	.hero-img-container {
		height: 56vw; /* taller hero for mobile */
	}
	.hero-content {
		left: 18px;
		bottom: 18px;
	}
	.hero-title {
		font-size: 2.2em;
		margin-bottom: 24px;
	}

	/* Game highlights: turn into a horizontal scroller with full-width cards */
	/* Ensure the highlights container sits close to the left edge on mobile */
	.game-highlights {
		margin-left: 6px !important;
	}
	.game-cards {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 8px; /* smaller gap so cards are wider */
		padding: 12px 6px 12px 6px !important; /* small left padding so first card is not glued to edge */
		box-sizing: border-box; /* ensure padding doesn't increase total width */
	}
	.game-card {
		min-width: 200px !important;
		width: 200px !important;
		min-height: 64vw;
		margin: 0;
		border-radius: 12px;
		flex: 0 0 auto;
		position: relative;
		overflow: hidden;
		background: linear-gradient(180deg, rgba(35, 39, 51, 0.85), rgba(35, 39, 51, 0.9));
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
	}
	.game-card img {
		height: 36vw; /* slightly taller image */
		width: calc(100% - 20px);
		margin: 10px 10px 8px 10px;
		border-radius: 10px !important;
		border: 3px solid #fff;
		box-shadow: 0 6px 18px rgba(0,0,0,0.35) inset, 0 2px 8px rgba(0,0,0,0.12);
		object-fit: cover;
		display: block;
	}
	.game-info h4 {
		font-size: 1.05em;
		margin: 6px 0 8px 0;
		text-align: left;
	}
	.game-info p {
		font-size: 0.95em;
		line-height: 1.35;
		color: #e6e6e6;
		max-height: 4.6em;
		overflow: hidden;
	}
	/* Make button visible inside card on mobile */
	.game-info button {
		position: absolute;
		right: 12px;
		bottom: 12px;
		background: #1a8cff;
		color: #fff;
		padding: 8px 12px;
		border-radius: 10px;
		box-shadow: 0 8px 20px rgba(26,140,255,0.18);
	}
	.section-title {
		padding: 0 12px;
	}
	/* Ensure the title row is positioned so controls can sit on the right */
	
	/* Remove decorative line and controls beside the section title on mobile */
	.section-title-line,
	.game-highlights .section-title-line,
	.section-controls {
		display: none !important;
	}

	/* Horizontal lists (multiplayer / small cards) */
	.game-horizontal-list {
		gap: 42px;
		padding: 2px;
	}
	.game-horizontal-item {
		min-width: 45vw;
		width: 45vw;
	}
	.game-horizontal-item img {
		width: 43vw;
		height: 38vw;
	}

	/* News: stack and full-width cards */
	.news-section {
		padding: 0 12px;
		margin-top: 22px;
		box-sizing: border-box;
	}

	/* Reduce 'coming soon' badge and card typography for mobile */
	/* place coming-soon badge inside the image corner on mobile */
	.news-card .coming-soon {
		position: absolute;
		top: 10px !important;
		left: 10px !important;
		z-index: 12;
	}
	.news-card .coming-soon img {
		width: 44px !important;
		height: auto !important;
		display: block;
	}

	/* Tighter, smaller text in game cards on mobile for better preview */
	.game-info h4 {
		font-size: 0.86em !important; /* reduced title size */
		line-height: 1.06;
		margin-bottom: 4px;
	}
	.game-info p {
		font-size: 0.78em !important; /* reduced body text */
		line-height: 1.28;
		max-height: 3.2em;
	}
	.game-info button {
		padding: 6px 10px !important;
		font-size: 0.9em !important;
	}

	/* News card typography adjustments */
	.news-info h4 {
		font-size: 1em !important;
		margin: 6px 0 8px 0;
	}
	.news-info p {
		font-size: 0.9em !important;
		line-height: 1.3;
		max-height: 4.2em;
	}
	.news-info .news-date {
		font-size: 0.95em !important;
	}

	/* Compact spacing between title and paragraph for a tight, organized look */
	.game-info {
		gap: 6px !important;
		padding: 10px 12px 84px 12px !important; /* more bottom padding so text doesn't sit under button */
		position: static !important; /* ensure we can position the button relative to the card */
	}
	.game-info h4 {
		margin: 4px 0 6px 0 !important;
		font-size: 0.86em !important;
		line-height: 1.04 !important;
	}
	.game-info p {
		margin: 0 !important;
		font-size: 0.78em !important;
		line-height: 1.16 !important;
		/* show up to 4 lines on mobile */
		display: -webkit-box !important;
		-webkit-box-orient: vertical !important;
		-webkit-line-clamp: 4 !important;
		line-clamp: 4 !important;
		line-clamp: 4 !important; /* standard property when supported */
		overflow: hidden !important;
	}
	/* Position the button relative to the card (not the .game-info block) */
	.game-card .game-info button {
		position: absolute !important;
		right: 12px !important;
		bottom: 12px !important;
		padding: 6px 10px !important;
		font-size: 0.78em !important;
	}

	.news-info {
		gap: 6px !important;
		padding: 10px 12px !important;
	}
	.news-info h4 {
		margin: 4px 0 6px 0 !important;
		font-size: 0.98em !important;
		line-height: 1.06 !important;
	}
	.news-info p {
		margin: 0 !important;
		font-size: 0.88em !important;
		line-height: 1.2 !important;
		max-height: 3.6em !important;
		overflow: hidden !important;
	}
	/* Make news a horizontal scroller on mobile (peek like highlights) */
	.news-row {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 0px; /* reduced gap so cards sit closer */
		padding: 6px 0 0px 0;
		box-sizing: border-box;
	}
	.news-row .news-card {
		/* show three cards per viewport on mobile; subtract total gaps (2 * 8px) */
		min-width: calc((100% - 12px) / 3);
		width: calc((100% - 12px) / 3);
		flex: 0 0 auto;
		margin: 0 0px 0 0;
		border-radius: 12px;
		overflow: hidden;
		position: relative;
	}
	/* Specific: first news row should display 2 centered cards (not scroll) */
	.news-row.news-row-1 {
		justify-content: center;
		overflow: visible;
		padding-left: 3px; /* reduce left offset so first image sits closer to edge */
	}
	.news-row.news-row-1 .news-card {
		min-width: calc((100% - 12px) / 2) !important;
		width: calc((100% - 12px) / 2) !important;
		margin: 0 0px !important;
		margin-left: 0px !important;
		flex: 0 0 auto !important;
	}
	/* make the very first news-card image align flush with the container on mobile (reduced offset) */
	.news-row .news-card:first-child img {
		margin-left: -6px !important; /* reduced from -10px to tighten left spacing */
		margin-right: 4px !important; /* keep small inner gap to next card */
	}
	/* reduce left offset of the second image in the first row so it sits closer */
	.news-row.news-row-1 .news-card:nth-child(2) img {
		margin-left: -5px !important;
		margin-right: 14px !important;
	}
	.news-row .news-card img {
		width: calc(100% - 8px);
		height: auto;
		aspect-ratio: 16/10;
		margin: 4px; /* smaller inner margin */
		border-radius: 8px;
		border: 1px solid #fff; /* thinner border visually brings cards closer */
		object-fit: cover;
		display: block;
	}
	/* Tighter spacing in the second news row: bring first and following cards closer together */
	.news-row.news-row-2 .news-card:first-child img {
		margin-right: 0px !important;
		margin-left: 2px !important;
	}
	.news-row.news-row-2 .news-card:nth-child(2) img,
	.news-row.news-row-2 .news-card:nth-child(3) img {
		margin-left: 0px !important;
	}

	/* Featured trailer & quick links stacking */
	.featured-trailer-links-columns {
		flex-direction: column;
		gap: 18px;
		width: 100%;
		padding: 0 12px;
	}
	/* push the first card of the second news row slightly right on mobile */
	.news-row.news-row-2 .news-card:first-child {
		margin-left: 2px !important;
	}
	.featured-trailer {
		/* responsive container for the embedded trailer on mobile */
		height: auto;
		background: none;
		margin-left: -14vw;
		min-width: 100vw;
		padding: 6px 12px; /* small inner padding so rounded corners don't touch edge */
		box-sizing: border-box;
		overflow: hidden;
		border-radius: 10px;
	}
	.featured-trailer iframe {
		background: none !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16/9 !important;
		display: block !important;
		border: none !important;
		border-radius: 8px !important;
		
	}
	.quick-links {
		height: auto;
		min-width: auto;
		padding: 18px;
	}

	/* Quick Links: mobile-specific layout (match provided screenshot) */
	.quick-links {
		/* use symmetric horizontal margins and sit a bit closer to the left edge */
		width: 88vw !important;
		margin: 10px -10vw !important; /* top/bottom 10px, left/right 8px */
		padding: 8px !important;
		border-radius: 12px !important;
		background-size: cover !important;
		background-position: center !important;
	}
	.quick-links .quick-links-card h4 {
		font-size: 1.25rem !important;
		margin-bottom: 6px !important;
		text-align: center !important;
	}
	.quick-links .quick-links-card p {
		font-size: 0.95rem !important;
		text-align: center !important;
		margin-bottom: 8px !important;
	}
	.quick-links .quick-links-buttons {
		display: flex !important;
		justify-content: center !important;
		gap: 10px !important;
		flex-wrap: wrap !important;
	}
	.quick-links .btn {
		padding: 8px 12px !important;
		font-size: 0.95rem !important;
		border-radius: 10px !important;
	}

	/* Footer adjustments for narrow screens */
	

	
}

/* Extra-tight mobile header spacing for very small screens */
@media (max-width: 1480px) {
	.navbar {
		padding: 0 8px !important;
		height: 52px !important;
	}
	.navbar-left {
		gap: 12px !important; /* reduce space between logo and left edge */
	}
	.logo-img {
		height: 40px !important; /* slightly smaller logo on very small screens */
	}
	.navbar-right {
		gap: 6px !important; /* tighten controls on the right */
		margin-left: auto !important;
	}
	.menu-btn, .hamburger {
		width: 36px !important;
		height: 36px !important;
		padding: 6px !important;
	}
	.profile-avatar {
		height: 36px !important; /* smaller avatar to save room */
		margin-right: 4px !important;
	}
	/* Reduce any left margin on navbar-center (hidden on mobile but defensive) */
	.navbar-center {
		margin-left: 0 !important;
	}
}

/* Small-screen safety fixes: re-hide page-level horizontal overflow and
   neutralize a few viewport-width / negative-margin rules that can push
   content slightly past the right edge on tiny phones. Kept minimal so
   horizontal scrollers inside components still work. */
@media (max-width: 1480px) {
	html, body {
		overflow-x: hidden !important;
		max-width: 100% !important;
	}

	/* Prevent section title/lines from using 100vw which can overflow
	   when padding/margins are present */
	.section-title-line,
	.game-highlights .section-title-line,
	.news-title-line {
		width: calc(100% - 12px) !important;
		margin-left: 6px !important;
		box-sizing: border-box !important;
	}

	/* Stop featured trailer & quick-links pushing past viewport */
	.featured-trailer,
	.quick-links,
	.news-cards:first-of-type,
	.news-cards {
		margin-left: 0 !important;
		margin-right: 0 !important;
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
}

/* Extra: ensure notification controls are completely hidden on mobile viewports to avoid confusion with hamburger */
@media (max-width: 1468px) {
	.notif-btn, .notif-icon, .notif-dot {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Lift the coming-soon badge a bit so it doesn't overlap image edges on small screens */
	.news-card .coming-soon {
		top: -10px !important;
		left: 0px !important;
	}
	.news-card .coming-soon img {
		width: 40px !important; /* slightly smaller on mobile */
		height: auto !important;
		display: block !important;
	}

	/* Remove borders and image shadows on mobile for a cleaner, tighter look */
	.news-row .news-card img,
	.game-card img,
	.game-horizontal-item img {
		border: none !important;
		box-shadow: none !important;
	}

	
}

/* Final fallback: use CSS Grid with very specific selector to guarantee two columns
	 even if other flex-based rules conflict or are applied earlier. Kept outside the
	 @media block closing brace so it's loaded last in the stylesheet (but still scoped
	 to same max-width via a redundant media query to ensure mobile-only). */
@media (max-width: 1468px) {
	footer.footer-custom .footer-bg-custom .footer-content_custom .footer-links-custom {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px 12px !important;
		justify-items: center !important;
		align-items: start !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	footer.footer-custom .footer-bg-custom .footer-content_custom .footer-links-custom > .footer-links-col-custom {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 6px 8px !important;
		box-sizing: border-box !important;
	}

	footer.footer-custom .footer-bg-custom .footer-content_custom .footer-links-col-custom a {
		display: inline !important;
		text-align: center !important;
	}
}

/* Mobile menu sidebar styles - enhanced with website aesthetic */
.mobile-menu-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  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);
  box-shadow: -12px 0 40px rgba(134,52,52,0.6), -6px 0 20px rgba(0,0,0,0.8);
  border-left: 1px solid rgba(134,52,52,0.3);
  z-index: 1200;
  transform: translateX(110%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 0;
  overflow: hidden;
}
.mobile-menu-sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../image/da479fac12787867e2b629e03138dfcd30aab7f7.png') center/cover no-repeat;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}
.mobile-menu-sidebar > * {
  position: relative;
  z-index: 1;
}
.mobile-menu-sidebar.open {
  transform: translateX(0);
  box-shadow: -12px 0 50px rgba(134,52,52,0.8), -6px 0 30px rgba(0,0,0,0.9), 0 0 100px rgba(134,52,52,0.4);
}
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px 16px 20px;
  border-bottom: 1px solid rgba(134,52,52,0.3);
  background: linear-gradient(90deg, rgba(134,52,52,0.1) 0%, transparent 100%);
  font-weight: 800;
  font-size: 1.2em;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(134,52,52,0.5);
}
#mobile-menu-close {
  background: rgba(134,52,52,0.2);
  color: #fff;
  border: 1px solid rgba(134,52,52,0.4);
  font-size: 1.4em;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(134,52,52,0.3);
  font-weight: bold;
}
#mobile-menu-close:hover {
  background: rgba(134,52,52,0.4);
  box-shadow: 0 0 20px rgba(134,52,52,0.6), 0 0 40px rgba(134,52,52,0.3);
  transform: scale(1.05);
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 20px;
  flex: 1;
  overflow-y: auto;
}
.mobile-menu-links a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: 700;
  padding: 16px 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  border: 1px solid transparent;
  background: linear-gradient(90deg, rgba(45,50,59,0.3) 0%, rgba(35,39,51,0.3) 100%);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  overflow: hidden;
}
.mobile-menu-links a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #00e0ff 0%, #863434 100%);
  border-radius: 2px;
  margin-left: -2px;
}
.mobile-menu-links a.active::before,
.mobile-menu-links a:hover::before {
  transform: scaleY(1);
}
.mobile-menu-links a.active {
  background: linear-gradient(90deg, rgba(134,52,52,0.2) 0%, rgba(0,224,255,0.1) 100%);
  color: #00e0ff;
  border-color: rgba(134,52,52,0.4);
  box-shadow: 0 0 20px rgba(134,52,52,0.3), inset 0 0 20px rgba(0,224,255,0.1);
  text-shadow: 0 0 10px rgba(0,224,255,0.5);
}
.mobile-menu-links a:hover {
  background: linear-gradient(90deg, rgba(134,52,52,0.3) 0%, rgba(0,224,255,0.15) 100%);
  color: #00e0ff;
  border-color: rgba(134,52,52,0.5);
  box-shadow: 0 0 25px rgba(134,52,52,0.4), inset 0 0 15px rgba(0,224,255,0.1);
  transform: translateX(8px);
  text-shadow: 0 0 8px rgba(0,224,255,0.4);
}

/* Mobile user info styles */
.mobile-user-info {
  background: linear-gradient(135deg, rgba(134,52,52,0.2) 0%, rgba(0,224,255,0.05) 100%);
  border: 1px solid rgba(134,52,52,0.3);
  border-radius: 8px;
  margin: 8px 12px;
}

.mobile-user-info a[data-action="logout"] {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: 12px;
  margin-top: 8px;
}

.mobile-user-info a[data-action="logout"]:hover {
  background: rgba(255, 71, 87, 0.2);
  border-color: rgba(255, 71, 87, 0.5);
  transform: translateY(-1px);
}

.mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: linear-gradient(45deg, rgba(0,0,0,0.7) 0%, rgba(134,52,52,0.3) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1100;
  animation: fadeIn 0.3s ease;
}
.mobile-menu-backdrop.open {
  display: block;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Only show sidebar on mobile */
@media (min-width: 1469px) {
  .mobile-menu-sidebar, .mobile-menu-backdrop { display: none !important; }
}

/* Tighten spacing between avatar and hamburger on small phones */
@media (max-width: 1480px) {
	/* Place logo + controls together on the left, keep avatar on the far right */
	.navbar {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important; /* keep logo and controls together */
		padding: 0 6px !important;
		height: 48px !important;
	}

	/* Reduce the gap between controls and tighten padding */
	.navbar-right {
		gap: 4px !important;
		padding-right: 0 !important;
		display: flex !important;
		align-items: center !important;
	}

	/* Make sure profile/avatar is compact and pushed to the far right */
	.profile {
		display: flex !important;
		align-items: center !important;
		gap: 4px !important;
		margin-left: -0vw !important; /* push avatar to the far right */
	}
	.profile-avatar {
		width: 34px !important;
		height: 34px !important;
		border-radius: 8px !important;
		margin: 0 !important;
		object-fit: cover !important;
	}

	/* Keep hamburger compact and remove extra right margin */
	/* Keep hamburger compact and make it the last item (far right) */
	.menu-btn {
		order: 3 !important;
		width: 34px !important;
		height: 34px !important;
		padding: 4px !important;
		margin-right: 10px !important;
		margin-left: auto !important; /* force it to the far right */
	}

	/* Ensure search group stays first */
	.search-group {
		order: 1 !important;
	}
}

/* Mobile: make the top header fixed and push page content down so it's not hidden
	 Applies only on small screens to avoid affecting desktop layout. */
@media (max-width: 768px) {
	.header {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1600 !important;
		 background: linear-gradient(90deg,rgba(36,40,42,1) 0%, rgba(44,41,46,1) 50%, rgba(75,43,50,1) 100%); 
	}
	/* Reserve space equal to the header height so content isn't covered. Adjust if needed. */
	body {
		padding-top: 72px !important;
	}
	
	/* Hero mobile responsive */
	.hero-img-container {
		height: 100vh;
		min-height: auto;
	}
	
	.hero-content-wrapper {
		flex-direction: column-reverse;
		padding: 30px 20px;
		gap: 30px;
	}
	
	.hero-info {
		max-width: 100%;
	}
	
	.hero-main-title {
		font-size: 2.5em;
		margin-bottom: 15px;
	}
	
	.hero-desc {
		font-size: 1.05em;
		margin-bottom: 20px;
	}
	
	.hero-meta {
		gap: 12px;
		margin-bottom: 25px;
	}
	
	.meta-item {
		font-size: 0.9em;
		padding: 8px 14px;
	}
	
	.hero-actions {
		gap: 12px;
	}
	
	.btn-primary,
	.btn-secondary {
		padding: 14px 28px;
		font-size: 1em;
		width: 100%;
		justify-content: center;
	}
	
	.hero-poster {
		width: 280px;
		height: 400px;
		margin: 0 auto;
	}
	
	.hero-bg-img {
		filter: brightness(0.25);
	}
}

/* Desktop: show the section title divider and pin controls to the right of the title row
	 Added as a final override to avoid earlier rules that forced the line to be viewport-wide */

	.section-title-line,
	.game-highlights .section-title-line {
		display: block !important;
		visibility: visible !important;
		border-top: 2px solid #fff !important;
		opacity: 0.5 !important;
		margin: 0 0 0 18px !important;
		height: 0 !important;
		flex: 1 1 78vw !important; /* increase the visible length on desktop */
		min-width: 73vw !important; /* explicit minimum width for longer line */
		max-width:88  !important; /* keep some space for controls */
	}

	/* Ensure the title container is positioned so absolute controls can align to its right edge */
	.game-highlights .section-title {
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
	}

	.game-highlights .section-controls {
		position: absolute !important;
		right: -30vw !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		display: flex !important;
		gap: 12px !important;
		z-index: 50 !important;
	}

	/* Slightly reduce right padding on section-title so controls can sit without overlap */
	.section-title { padding-right: 120px !important;
	 }


/* Authentication Actions Styles */
.auth-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.login-btn {
	background: linear-gradient(135deg, #00e0ff, #0099cc);
	color: white;
	padding: 8px 20px;
	border-radius: 20px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.3s ease;
	border: 1px solid transparent;
}

.login-btn:hover {
	background: linear-gradient(135deg, #0099cc, #00e0ff);
	transform: translateY(-1px);
	box-shadow: 0 4px 15px rgba(0, 224, 255, 0.3);
}