.site-topbar {
	position: fixed;
	top: max(clamp(20px, 3.4vw, 52px), env(safe-area-inset-top));
	right: max(clamp(20px, 3.4vw, 52px), env(safe-area-inset-right));
	z-index: 10000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	pointer-events: none;
}

.site-topbar .version-switch {
	pointer-events: auto;
}

.version-switch {
	display: inline-flex;
	padding: 2px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font: 500 11px/1 ui-monospace, "IBM Plex Mono", Menlo, monospace;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.version-switch a {
	display: block;
	padding: 6px 11px;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: color 0.2s, background 0.2s;
}

.version-switch a:hover {
	color: rgba(255, 255, 255, 0.9);
}

.version-switch a.is-active {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.version-switch a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.site-topbar .hud {
	position: static;
	opacity: 0.5;
	pointer-events: none;
}

.site-topbar--solo .hud {
	display: none;
}