:root {
	--background: #14171f;
	--panel: #1f2430;
	--accent: #7c5ceb;
	--accent-light: #a38beb;
	--danger: #ff4f64;
	--text: #f4f7ff;
	--muted: #8a92a3;
	--lane-height: 20vh;
	--transition-fast: 120ms ease-out;
}

* {
	box-sizing: border-box;
}

html {
	height: 100%;
	/* Prevent pull-to-refresh on mobile */
	overscroll-behavior: none;
}

body {
	margin: 0;
	background: linear-gradient(180deg, #14171f 0%, #1e2333 50%, #0f1118 100%);
	color: var(--text);
	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	min-height: 100vh;
	/* Help prevent pull-to-refresh */
	touch-action: manipulation;
	/* Safe area support for notched devices */
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 4px;
	gap: 4px;
}

.screen {
	position: relative;
	flex: 1;
	display: none;
	gap: 4px /* this will be the gap between the lanes and the top area on mobile */
}

.screen:not(.hidden) {
	display: flex;
	flex-direction: column;
}

button {
	height: 36px;
	padding: 0 12px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	transition: filter var(--transition-fast), transform var(--transition-fast);
}

button:disabled {
	cursor: not-allowed;
	filter: grayscale(0.6);
	opacity: 0.55;
}

button.primary {
	background: var(--accent);
	color: #fff;
}

button.secondary {
	background: rgba(255, 255, 255, 0.1);
}

button:hover:not(:disabled),
button:focus-visible:not(:disabled) {
	filter: brightness(1.1);
	transform: translateY(-1px);
}

button:active:not(:disabled) {
	transform: translateY(1px);
}