/* Fonts */

@font-face {
    font-family: "Press Start 2P";
    src: url("../fonts/PressStart2P/PressStart2P-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-VariableFont_wdth,wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Main Styles */

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

:root {
	--bg: #090E1C;
	--text: #F2F3F8;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--bg);
	color: var(--text);
	/* font-family: Inter, Segoe UI, Arial, sans-serif; */
	font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont;
}

/* Hero Area */

.hero {
	position: relative;
	width: 100%;
	height: 720px;

	background-image:
		linear-gradient(to bottom,
			rgba(9,14,28,0) 60%,
			rgba(9,14,28,.35) 75%,
			rgba(9,14,28,.8) 90%,
			#090E1C 100%),
		url("../imgs/hero.webp");

	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;

	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.hero-content {
	text-align: center;
	margin-top: 120px;
	padding: 20px;
}
h1 {
	font-family: "Press Start 2P", cursive;
	font-size: clamp(36px, 4vw, 64px);
	line-height: 1.4;
	letter-spacing: 3px;
	margin-bottom: 32px;
	color: #F5F4F0;
	text-shadow:
		0 0 10px rgba(255,255,255,.15),
		0 0 30px rgba(147,112,219,.15);
}

p {
	font-family: "Press Start 2P", cursive;
	font-size: 13px;
	line-height: 1.8;
	color: #BFC7E3;
	margin-top: -10px;
	text-shadow:
		0 0 8px rgba(255,255,255,.08);
}

/* Content */

main {
	max-width: 1500px;
	margin: auto;
	padding: 20px 40px 80px;
	/* min-height: 1200px; */
}

.games-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 32px;
	margin-top: -30px;
}

.game-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: white;
	overflow: hidden;
	background: rgba(255,255,255,.035);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 14px;
	transition: .25s ease;
	backdrop-filter: blur(8px);
}

.game-card:hover {
	transform: translateY(-8px);
	border-color: rgba(170,140,255,.55);
	box-shadow:
		0 10px 40px rgba(0,0,0,.45),
		0 0 40px rgba(140,90,255,.10);
}

.game-card img {

	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: .35s ease;
}

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

.game-info {
	padding: 22px;
}

.game-info h2 {
	font-family: "Press Start 2P", cursive;
	font-size: 16px;
	margin-bottom: 16px;
	color: #F3F3F7;
}

.game-info span {
	font-size: 15px;
	color: #BFC7E3;
}

.coming-soon {
	opacity: .75;
}

.coming-soon:hover {
	opacity: 1;
}

/* Media Queries */

@media (max-width: 768px) {

    main {
        padding: 20px;
    }

    .hero {
        height: 420px;
    }

    .hero-content {
        margin-top: 70px;
        padding: 20px;
    }

    h1 {
        font-size: 28px;
        line-height: 1.5;
    }

    p {
        font-size: 10px;
        margin-top: -4px;
    }

    .games-grid {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: -40px;
	}

    .game-info {
        padding: 18px;
    }

    .game-info h2 {
        font-size: 14px;
    }

    .game-info span {
        font-size: 14px;
    }
}

@media (hover: none) {

    .game-card:hover {
        transform: none;
        box-shadow: none;
        border-color: rgba(255,255,255,.08);
    }

    .game-card:hover img {
        transform: none;
    }
}