:root {
	--matrix-green: #00ff00;
	--matrix-dark-green: #003b00;
	--console-bg: #000000;
	--highlight: #39ff14;
}

/* The page scrolls as one document. There is no locked-viewport shell and no
   inner scroll frame on #console: a nested scroller put a second scrollbar in
   the gutter beside the nav buttons. The prompt and footer are pinned to the
   window instead (see .bottom-bar), so output scrolls beneath them. */
body {
	margin: 0;
	padding: 20px;
	font-family: 'Menlo', 'Consolas', monospace;
	background-color: var(--console-bg);
	color: var(--matrix-green);
	min-height: 100vh;
	min-height: 100dvh; /* accounts for mobile browser chrome */
	position: relative;
	z-index: 0;
	box-sizing: border-box;
}

.container {
	box-sizing: border-box;
	/* keep text clear of the fixed nav buttons in the bottom-right */
	padding-right: 130px;
	/* Reserve page space for the fixed bottom bar so the last line of output
	   can never end up hidden behind it. --bottom-bar-h is measured in JS,
	   since the bar's height depends on font size and how the footer wraps. */
	padding-bottom: calc(var(--bottom-bar-h, 90px) + 16px);
}

#console {
	width: 100%;
	font-size: 1rem;
	line-height: 1.4;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.console-line {
	margin: 0;
	padding: 2px 0;
	display: block;
	max-width: 80ch;
	white-space: pre-wrap;
	word-wrap: break-word;
	/* While a line types, JS pins min-height to a measured border-box height.
	   Under the default content-box that measurement gets the 4px of vertical
	   padding added on top, so the line stood 4px too tall and snapped down the
	   instant the reservation was released, jolting everything below it. */
	box-sizing: border-box;
}

/* The prompt and footer are pinned to the bottom of the viewport as one unit.
   Letting the prompt trail the output down the page made it drift as each line
   arrived; anchored, output scrolls beneath a stationary prompt. */
.bottom-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	/* stop short of the nav buttons in the bottom-right */
	padding: 8px 130px 10px 20px;
	background-color: var(--console-bg);
	z-index: 50;
}

.console-input-container {
	display: flex;
	align-items: center;
}

.console-prompt {
	color: var(--matrix-green);
	margin-right: 8px;
}

#console-input {
	background-color: transparent;
	border: none;
	color: var(--matrix-green);
	font-family: 'Menlo', 'Consolas', monospace;
	font-size: 1rem;
	width: 100%;
	max-width: 72ch;
	outline: none;
	caret-color: var(--matrix-green);
}

.nav-buttons {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 100;
}

.nav-button {
	background-color: rgba(0, 0, 0, 0.8);
	border: 1px solid var(--matrix-green);
	color: var(--matrix-green);
	padding: 8px 16px;
	border-radius: 3px;
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	min-width: 100px;
	text-align: center;
}

.nav-button:hover {
	background-color: var(--matrix-dark-green);
	color: var(--highlight);
	border-color: var(--highlight);
	box-shadow: 0 0 10px var(--matrix-dark-green);
	transform: translateX(-3px);
}

.nav-button.active {
	background-color: var(--matrix-dark-green);
	color: var(--highlight);
	border-color: var(--highlight);
}

/* Buttons are disabled while the console boots and while a command runs;
   without this they still looked and behaved as though they were clickable. */
.nav-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.nav-button:disabled:hover {
	background-color: rgba(0, 0, 0, 0.8);
	color: var(--matrix-green);
	border-color: var(--matrix-green);
	box-shadow: none;
	transform: none;
}

.nav-button:focus-visible {
	outline: 2px solid var(--highlight);
	outline-offset: 2px;
}

footer {
	text-align: left;
	font-size: 0.9rem;
	margin-top: 6px;
}

footer p {
	margin: 0;
}

/* Scrollbar styling */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--console-bg);
}

::-webkit-scrollbar-thumb {
	background: var(--matrix-dark-green);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--matrix-green);
}

/* ASCII art blocks rendered into the console.
   The logo is ~98 characters wide, so at a fixed 1rem it overflowed the console
   on anything narrower than ~1130px, clipping the wordmark and forcing a
   horizontal scrollbar. Scale the type to the space available and cap it at
   1rem so it stays full size on desktop. */
.ascii-art {
	line-height: 1.2;
	margin: 0;
	padding: 0;
	white-space: pre;
	font-size: min(1rem, calc((100vw - 170px) / 60));
}

/* --- Small screens ---------------------------------------------------------
   The nav buttons are fixed to the bottom-right, where they sat on top of the
   console input on narrow viewports. Below 768px they become a wrapping row
   pinned across the bottom, and the container reserves vertical room for them
   instead of horizontal. */
@media (max-width: 768px) {
	body {
		padding: 12px;
	}

	.container {
		padding-right: 0;
	}

	.bottom-bar {
		/* Sit directly on top of the nav row, which owns the bottom edge on
		   small screens. Its height is measured in JS because the buttons wrap
		   to a second row on narrow viewports. */
		bottom: var(--nav-h, 92px);
		padding: 8px 12px;
	}

	footer {
		font-size: 0.75rem;
	}

	.nav-buttons {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		left: 0;
		right: 0;
		bottom: 0;
		gap: 6px;
		padding: 8px 12px;
		background-color: rgba(0, 0, 0, 0.92);
	}

	.nav-button {
		min-width: 0;
		flex: 1 1 auto;
		padding: 8px 10px;
		font-size: 0.8rem;
	}

	.nav-button:hover {
		transform: none;
	}

	#console {
		font-size: 0.85rem;
	}

	.ascii-art {
		font-size: min(1rem, calc((100vw - 24px) / 60));
	}
}

/* Respect users who have asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	.nav-button {
		transition: none;
	}

	.nav-button:hover {
		transform: none;
	}
}