/* Black, white and greys, copied from Chice's tokens so the lobby and the games read as one site. */
:root {
	--ink: #111111;
	--paper: #FFFFFF;
	--panel: #F2F2F2;
	--border: #D9D9D9;
	--muted: #6B6B6B;
	--radius: 4px;
	--font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--ink: #EEEEEE;
		--paper: #111111;
		--panel: #1D1D1D;
		--border: #333333;
		--muted: #9A9A9A;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body {
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
	padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
	min-height: 100vh;
}
main { width: 100%; max-width: 1120px; margin: 0 auto; padding-bottom: 48px; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.topbar { width: 100%; max-width: 1120px; margin: 0 auto 24px; padding-block: 14px; border-bottom: 1px solid var(--border); }
.wordmark { margin: 0; font-weight: 700; font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }

.btn {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: var(--radius);
	padding: 10px 18px; font-weight: 700; font-size: 15px; text-decoration: none; line-height: 1.2;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--muted); border-color: var(--muted); }

.games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.game { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: start; padding: clamp(16px, 3vw, 24px); border: 1px solid var(--border); border-radius: var(--radius); }
.game:has(.display:hover) { border-color: var(--ink); }
.display { display: block; width: 100%; text-decoration: none; }
.empty { color: var(--muted); }