:root {
	--starcup-safe-top: env(safe-area-inset-top, 0px);
	--starcup-safe-right: env(safe-area-inset-right, 0px);
	--starcup-safe-bottom: env(safe-area-inset-bottom, 0px);
	--starcup-safe-left: env(safe-area-inset-left, 0px);
	--starcup-touch-target: 44px;
	--starcup-ui-font: 21px;
	--starcup-control-font: 24px;
	--starcup-system-font: 16px;
	--starcup-system-gap: 4px;
	--starcup-page-gap: 12px;
	--starcup-dialog-top: 68px;
	--starcup-dialog-chrome: 176px;
}

html.starcup-compact,
html.starcup-compact body {
	width: 100%;
	height: 100%;
	min-height: 100dvh;
	margin: 0;
	overflow: hidden;
	overscroll-behavior: none;
}

html.starcup-touch {
	-webkit-tap-highlight-color: transparent;
}

html.starcup-touch .pointerdiv,
html.starcup-touch .pointerspan,
html.starcup-touch .menubutton,
html.starcup-touch .control,
html.starcup-touch .button.selectable,
html.starcup-touch #system > div > div {
	touch-action: manipulation;
}

.starcup-notices {
	position: fixed;
	z-index: 10000;
	top: calc(var(--starcup-page-gap) + var(--starcup-safe-top));
	left: 50%;
	display: flex;
	box-sizing: border-box;
	width: calc(100% - var(--starcup-page-gap) - var(--starcup-page-gap) - var(--starcup-safe-left) - var(--starcup-safe-right));
	transform: translateX(-50%);
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	pointer-events: none;
}

.starcup-notice {
	box-sizing: border-box;
	padding: var(--starcup-page-gap);
	transform: translateY(-8px);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 10px;
	background: rgba(26, 28, 31, 0.94);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
	color: #fff;
	font-family: system-ui, -apple-system, "PingFang SC", sans-serif;
	font-size: var(--starcup-ui-font);
	line-height: 1.45;
	opacity: 0;
	transition: opacity 180ms ease, transform 180ms ease;
	text-align: center;
}

.starcup-notice.shown {
	transform: translateY(0);
	opacity: 1;
}

.starcup-notice.success {
	border-color: rgba(91, 207, 132, 0.7);
}

.starcup-notice.error {
	border-color: rgba(239, 104, 104, 0.75);
}

@media (max-width: 900px), (max-height: 600px) {
	html.starcup-compact #system {
		display: flex;
		box-sizing: border-box;
		padding-top: var(--starcup-safe-top);
		padding-right: var(--starcup-safe-right);
		padding-left: var(--starcup-safe-left);
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	html.starcup-compact #system::-webkit-scrollbar {
		display: none;
	}

	html.starcup-compact #system > div {
		position: static !important;
		display: flex;
		flex: 0 0 auto;
		width: auto !important;
		height: var(--starcup-touch-target);
		transform: none !important;
	}

	html.starcup-compact #system > div > div {
		box-sizing: border-box;
		min-width: var(--starcup-touch-target);
		min-height: var(--starcup-touch-target);
		height: var(--starcup-touch-target);
		padding: 5px var(--starcup-system-gap);
		font-size: var(--starcup-system-font);
		line-height: calc(var(--starcup-touch-target) - 10px);
		flex: 0 0 auto;
	}

	html.starcup-compact .connect-status-bar {
		height: var(--starcup-touch-target) !important;
		font-size: var(--starcup-system-font);
		line-height: calc(var(--starcup-touch-target) - 10px);
	}

	html.starcup-compact .connect-status-bar > .shadowed {
		box-sizing: border-box;
		min-height: var(--starcup-touch-target);
		padding: 5px var(--starcup-page-gap) !important;
	}

	html.starcup-compact #arena {
		top: calc(var(--starcup-touch-target) + var(--starcup-safe-top)) !important;
		height: calc(100% - var(--starcup-touch-target) - var(--starcup-safe-top) - var(--starcup-safe-bottom)) !important;
	}

	html.starcup-compact #control > div,
	html.starcup-compact #control > .control {
		min-height: var(--starcup-touch-target);
		font-size: var(--starcup-control-font);
		line-height: calc(var(--starcup-touch-target) - 10px);
	}

	html.starcup-compact #window > .dialog.nobutton:not(.fullheight) {
		box-sizing: border-box;
		width: calc(100% - var(--starcup-page-gap) - var(--starcup-page-gap) - var(--starcup-safe-left) - var(--starcup-safe-right)) !important;
		max-width: none;
		max-height: calc(100% - var(--starcup-dialog-chrome) - var(--starcup-safe-top) - var(--starcup-safe-bottom));
		left: calc(var(--starcup-page-gap) + var(--starcup-safe-left)) !important;
		top: calc(var(--starcup-dialog-top) + var(--starcup-safe-top)) !important;
		bottom: auto !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	html.starcup-compact #window > .dialog.popped,
	html.starcup-compact .popup-container > .menu {
		max-width: calc(100% - var(--starcup-page-gap) - var(--starcup-page-gap) - var(--starcup-safe-left) - var(--starcup-safe-right));
		max-height: calc(100% - var(--starcup-page-gap) - var(--starcup-page-gap) - var(--starcup-safe-top) - var(--starcup-safe-bottom));
	}

	html.starcup-compact .menubutton.large,
	html.starcup-compact .config.switcher,
	html.starcup-compact .config.toggle {
		min-height: var(--starcup-touch-target);
	}

	html.starcup-compact .dialog > .content-container,
	html.starcup-compact .dialog > .content-container > .content {
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 600px) and (orientation: portrait) {
	html.starcup-compact #system > div > div {
		padding-right: var(--starcup-page-gap);
		padding-left: var(--starcup-page-gap);
	}

	html.starcup-compact #arena.phonetop {
		top: calc(64px + var(--starcup-safe-top)) !important;
	}

	html.starcup-compact #window > .dialog.nobutton:not(.fullheight) {
		max-height: calc(100% - var(--starcup-dialog-chrome) - var(--starcup-safe-top) - var(--starcup-safe-bottom));
		top: calc(var(--starcup-dialog-top) + var(--starcup-safe-top)) !important;
	}
}

@media (max-height: 600px) and (orientation: landscape) {
	html.starcup-compact .connect-status-bar {
		top: var(--starcup-safe-top) !important;
		right: calc(var(--starcup-page-gap) + var(--starcup-safe-right));
		left: auto !important;
		width: 35% !important;
		pointer-events: none;
		z-index: 6;
	}
}