/* --- 1. Base Setup & Theme --- */
:root {
	--bg-color: #14181C;
	--card-color: #2C3440;
	--text-color: #9ab;
	--text-light: #e0e0e0;
	--accent-color: #E9A00D;
	--border-color: #445566;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: var(--bg-color);
	color: var(--text-color);
	margin: 0;
	padding: 0;
}

.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 0;
}

h1, h2 {
	color: var(--text-light);
	font-weight: 700;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 10px;
}

h2 {
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

a {
	color: var(--accent-color);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- 2. Header --- */
.site-header {
	background-color: var(--card-color);
	border-bottom: 1px solid var(--border-color);
	padding: 0 5%;
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.logo {
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--text-light);
	letter-spacing: -1px;
}

.logo span {
	color: var(--accent-color);
}

.main-nav a {
	color: var(--text-light);
	text-decoration: none;
	margin: 0 18px 0 0;
	font-weight: 600;
}

.main-nav a:hover {
	color: var(--accent-color);
}

.main-nav {
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	width: 100%;
	order: 3;
}
.main-nav::-webkit-scrollbar { display: none; }

/* Mobile menu controls */
.mobile-toggle { background: transparent; color: var(--text-light); border: 1px solid var(--border-color); border-radius: 6px; padding: 8px 12px; font-size: 1.1rem; cursor: pointer; }
.mobile-toggle { order: 0; }

.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(1px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.mobile-drawer { position: fixed; top: 0; left: 0; height: 100%; width: 280px; background: var(--card-color); border-right: 1px solid var(--border-color); transform: translateX(-100%); transition: transform .25s ease; z-index: 9999; padding: 16px; box-sizing: border-box; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.drawer-title { color: var(--text-light); font-weight: 700; }
.drawer-close { background: transparent; color: var(--text-light); border: 1px solid var(--border-color); border-radius: 6px; padding: 4px 8px; font-size: 1.1rem; cursor: pointer; }
.drawer-nav a { display: block; padding: 10px 0; color: var(--text-light); border-bottom: 1px solid var(--border-color); }
.drawer-nav a:last-child { border-bottom: none; }

body.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; }
body.drawer-open .mobile-drawer { transform: translateX(0); }

/* Hide desktop nav when very small, show toggle */
@media (max-width: 767px) {
	.main-nav { display: none; }
	.user-actions { display: none; }
	.mobile-drawer .user-actions { display: block; }
}

.user-actions a {
	color: var(--text-light);
	text-decoration: none;
	margin-left: 12px;
}

.user-actions .btn-signup {
	background-color: var(--accent-color);
	color: var(--bg-color);
	padding: 8px 12px;
	border-radius: 5px;
	font-weight: 700;
}

.user-actions .btn-signup:hover {
	background-color: #ffb400;
	text-decoration: none;
}

/* --- 3. Hero (used on homepage) --- */
.hero {
	background: linear-gradient(rgba(20, 24, 28, 0.8), rgba(20, 24, 28, 0.8)), url('https://images.unsplash.com/photo-1579952363873-27f3bade9f55?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
	padding: 50px 16px;
}

.hero h1 {
	font-size: 1.9rem;
	color: #fff;
	border: none;
	margin-bottom: 15px;
}

.hero p {
	font-size: 1rem;
	margin-bottom: 30px;
}

.hero .cta-button {
	background-color: var(--accent-color);
	color: var(--bg-color);
	padding: 15px 30px;
	font-size: 1rem;
	font-weight: 700;
	border-radius: 5px;
	text-transform: uppercase;
}

.hero .cta-button:hover {
	background-color: #ffb400;
	text-decoration: none;
}

/* --- 4. Carousel (used on homepage) --- */
.carousel-section { position: relative; }
.carousel { display: flex; overflow-x: scroll; padding: 10px 0; scrollbar-width: none; -ms-overflow-style: none; }
.carousel::-webkit-scrollbar { display: none; }
.game-poster { flex-shrink: 0; width: 150px; margin-right: 12px; background-color: var(--card-color); border: 1px solid var(--border-color); border-radius: 5px; cursor: pointer; transition: transform 0.2s, border-color 0.2s; }
.game-poster:hover { transform: scale(1.03); border-color: var(--accent-color); }
.poster-image { width: 100%; height: 220px; background-color: #556677; border-top-left-radius: 5px; border-top-right-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--bg-color); }
.poster-info { padding: 10px; }
.poster-info h3 { font-size: 0.9rem; color: var(--text-light); margin: 0 0 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-info .rating { font-size: 0.9rem; color: var(--accent-color); }
.carousel-btn { position: absolute; top: 55%; transform: translateY(-50%); background-color: rgba(44, 52, 64, 0.9); color: var(--text-light); border: 1px solid var(--border-color); border-radius: 50%; width: 40px; height: 40px; font-size: 1.5rem; cursor: pointer; z-index: 10; display: none; }
.carousel-btn:hover { background-color: var(--accent-color); color: var(--bg-color); }
.prev-btn { left: -20px; }
.next-btn { right: -20px; }

/* --- 5. Reviews (used on homepage) --- */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.review-card { background-color: var(--card-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 15px; }
.review-header { display: flex; align-items: center; margin-bottom: 10px; }
.review-header img { width: 40px; height: 40px; border-radius: 50%; background-color: #556677; margin-right: 10px; }
.review-meta .username { color: var(--text-light); font-weight: 600; }
.review-meta .rating { color: var(--accent-color); font-size: 0.9rem; }
.review-game-poster { width: 70px; height: 105px; background-color: #556677; border-radius: 3px; float: left; margin-right: 15px; margin-bottom: 5px; }
.review-body { font-size: 0.95rem; line-height: 1.5; }
.review-body p { margin-top: 0; }
.review-footer { margin-top: 15px; font-size: 0.9rem; }
.review-footer i { margin-right: 5px; }
.review-footer a { margin-right: 15px; color: var(--text-color); }
.review-footer a:hover { color: var(--text-light); }

/* --- 6. Footer --- */
.site-footer {
	background-color: #0E1012;
	color: var(--text-color);
	padding: 30px 0;
	margin-top: 40px;
	border-top: 1px solid var(--border-color);
	text-align: center;
}

/* --- 7. Login Form (shared) --- */
.login-form-container { max-width: 450px; margin: 50px auto; padding: 30px; background-color: var(--card-color); border-radius: 8px; border: 1px solid var(--border-color); }
.login-form-container h1 { text-align: center; border-bottom: none; margin-bottom: 30px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-light); }
.form-group input { width: 100%; padding: 12px; background-color: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 5px; box-sizing: border-box; }
.form-group button { width: 100%; padding: 12px; background-color: var(--accent-color); color: var(--bg-color); border: none; border-radius: 5px; font-weight: 700; font-size: 1rem; cursor: pointer; }
.form-footer { text-align: center; margin-top: 20px; }

/* --- 8. Mobile-first adjustments and breakpoints --- */
.user-actions { order: 2; }
.logo { order: 1; }
.main-nav { order: 3; }

@media (min-width: 768px) {
	.container { padding: 20px 0; }
	.site-header .container { flex-wrap: nowrap; gap: 0; }
	.main-nav { width: auto; overflow: visible; order: 2; margin-left: 18px; }
	.user-actions { order: 3; }
	.mobile-toggle { display: none; }
	.hero { padding: 80px 20px; }
	.hero h1 { font-size: 2.5rem; }
	.hero p { font-size: 1.2rem; }
	.hero .cta-button { font-size: 1.1rem; }
	.game-poster { width: 180px; margin-right: 15px; }
	.poster-image { height: 270px; font-size: 3rem; }
	.carousel-btn { display: inline-flex; align-items: center; justify-content: center; }
}