*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--size-body);
	line-height: 1.5;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	line-height: 1.15;
	margin: 0 0 var(--space-sm);
}

h1 {
	font-size: var(--size-h1);
}

h2 {
	font-size: var(--size-h2);
}

h3 {
	font-size: var(--size-h3);
}

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

:focus-visible {
	outline: 4px solid var(--color-accent);
	outline-offset: 2px;
}

.g4k-button {
	min-height: var(--touch-default);
	min-width: var(--touch-min);
	padding: 0 var(--space-md);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-control);
	background: var(--color-primary);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.g4k-button:hover {
	background: var(--color-primary-pressed);
}

.g4k-button.quiet {
	background: transparent;
	color: var(--color-primary);
}

.g4k-button.quiet:hover {
	background: var(--color-primary-tint);
}

.g4k-button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.g4k-screen {
	max-width: 36rem;
	margin: var(--space-xl) auto;
	padding: 0 var(--space-md);
}

.g4k-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.g4k-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	min-height: var(--top-bar-height);
	padding: var(--space-sm) var(--space-md);
	background: var(--color-surface);
	border-bottom: 2px solid var(--color-line);
}

.g4k-bar .brand {
	font-family: var(--font-display);
	font-size: var(--size-h3);
	font-weight: 700;
	color: var(--color-ink);
	text-decoration: none;
	margin-right: auto;
	min-height: var(--touch-min);
	display: inline-flex;
	align-items: center;
}

.g4k-bar .back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	border-radius: var(--radius-chip);
	text-decoration: none;
}

.g4k-bar .back::before {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	margin-left: 0.2rem;
	border: solid currentColor;
	border-width: 0 0 3px 3px;
	transform: rotate(45deg);
}

.g4k-bar nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

.g4k-bar .who {
	color: var(--color-ink-soft);
}

.g4k-bar .who .name {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-min);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.g4k-bar.admin {
	background: var(--color-admin-bar);
	color: #fff;
}

.g4k-bar.admin .brand,
.g4k-bar.admin .who,
.g4k-bar.admin a {
	color: #fff;
}

.g4k-bar.admin .g4k-button.quiet {
	border-color: #fff;
	color: #fff;
}

.g4k-bar.admin .g4k-button.quiet:hover {
	background: var(--color-ink-soft);
}

body[aria-busy="true"]::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--color-ink) 45%, transparent);
	cursor: progress;
}

body[aria-busy="true"]::after {
	content: "";
	content: "" / "Loading";
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 101;
	width: 3.5rem;
	height: 3.5rem;
	margin: -1.75rem 0 0 -1.75rem;
	border: 0.4rem solid var(--color-line);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: g4k-spin 0.9s linear infinite;
}

@keyframes g4k-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}

	body[aria-busy="true"]::after {
		animation: none;
	}
}

/* On a phone the brand takes its own row and the links wrap below it, so every game stays in view; the email goes. */
@media (max-width: 600px) {
	.g4k-bar.admin {
		padding-block: var(--space-xs);
	}

	.g4k-bar.admin .brand {
		flex: 1 0 100%;
		font-size: var(--size-body);
	}

	.g4k-bar.admin nav {
		column-gap: var(--space-md);
		row-gap: var(--space-xs);
	}

	.g4k-bar.admin .g4k-button {
		margin-left: auto;
	}

	.g4k-bar.admin .who {
		display: none;
	}
}