:root {
	--bg: #f6f5f2;
	--card: #ffffff;
	--text: #1d1d1f;
	--muted: #5f6066;
	--line: #e3e1dc;
	--accent: #b3261e;
	--accent2: #1f5fbf;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #121214;
		--card: #1c1c1f;
		--text: #f2f2f4;
		--muted: #a4a5ab;
		--line: #2e2e33;
		--accent: #ff6b5f;
		--accent2: #7fb0ff;
	}
}

* { box-sizing: border-box; }

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

main {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 16px 48px;
}

header.site {
	margin-bottom: 28px;
}

header.site h1 {
	margin: 0 0 4px;
	font-size: 28px;
	letter-spacing: 0.5px;
}

header.site p {
	margin: 0;
	color: var(--muted);
}

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
}

.game {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.game img {
	width: 96px;
	height: 96px;
	border-radius: 22px;
	flex: none;
}

.game h2 {
	margin: 0 0 6px;
	font-size: 22px;
}

.game p {
	margin: 0 0 10px;
}

h2 { font-size: 22px; margin: 0 0 10px; }
h3 { font-size: 18px; margin: 22px 0 6px; }

a { color: var(--accent2); }

.links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact {
	font-size: 19px;
	font-weight: 600;
}

.muted { color: var(--muted); }

footer {
	color: var(--muted);
	font-size: 14px;
	margin-top: 32px;
	text-align: center;
}

@media (max-width: 520px) {
	.game { flex-direction: column; }
}