:root,
[data-theme='dark'] {
	--bg: #050507;
	--fg: #d8ffc8;
	--dim: #6d8a62;
	--line: #1b2418;
	--accent: #c6ff3d;
	--glow: rgba(198, 255, 61, 0.18);
	--scan: rgba(5, 5, 7, 0.28);
	color-scheme: dark;
}

[data-theme='light'] {
	--bg: #f3f6ee;
	--fg: #12160f;
	--dim: #5c6654;
	--line: #d5dbc8;
	--accent: #3a5a00;
	--glow: rgba(58, 90, 0, 0.1);
	--scan: rgba(243, 246, 238, 0.15);
	color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	background: var(--bg);
	color: var(--fg);
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 15px;
	line-height: 1.45;
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
}

body {
	overflow: hidden;
}

#field {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
}

.scan {
	pointer-events: none;
	position: fixed;
	inset: 0;
	z-index: 1;
	background:
		repeating-linear-gradient(
			to bottom,
			transparent 0,
			transparent 2px,
			var(--scan) 3px
		);
	mix-blend-mode: multiply;
	opacity: 0.45;
}

.hud,
.deck,
.prompt {
	position: relative;
	z-index: 2;
}

.hud {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: max(0.85rem, env(safe-area-inset-top)) 1rem 0;
}

.hud__id {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	min-width: 0;
}

.hud__mark {
	font-weight: 600;
	font-size: 1.35rem;
	letter-spacing: 0.14em;
	text-transform: lowercase;
	color: var(--accent);
	text-shadow: 0 0 18px var(--glow);
}

.hud__host {
	color: var(--dim);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: lowercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hud__you {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font: inherit;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: lowercase;
	cursor: pointer;
}

.hud__you:hover,
.hud__you:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
	outline: none;
}

.hud__meta {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	color: var(--dim);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: lowercase;
	flex-shrink: 0;
}

.hud__meta [data-link] {
	color: var(--accent);
}

.deck {
	height: calc(100dvh - 7.4rem);
	padding: 1.25rem 1rem 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.log {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
}

.log li {
	margin: 0;
	max-width: 42rem;
	color: var(--fg);
	word-break: break-word;
}

.log .out {
	color: var(--dim);
}

.log .out::before {
	content: '↳ ';
	color: var(--accent);
}

.log .msg {
	display: grid;
	grid-template-columns: minmax(3.5rem, 7.5rem) 1fr;
	gap: 0.7rem;
	align-items: baseline;
}

.log .msg a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.log .msg a:hover,
.log .msg a:focus-visible {
	color: var(--accent);
}

.log .msg b {
	color: var(--accent);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.log .msg.me b {
	opacity: 0.85;
	cursor: pointer;
}

.log .msg.me b:hover,
.log .msg.me b:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
	outline: none;
}

.log::-webkit-scrollbar {
	display: none;
}

[data-online]:not([hidden]) {
	color: var(--accent);
}

.prompt {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.85rem 1rem max(0.95rem, env(safe-area-inset-bottom));
	background: linear-gradient(to top, var(--bg) 70%, transparent);
}

.prompt__label {
	color: var(--accent);
	font-weight: 600;
	letter-spacing: 0.08em;
	user-select: none;
}

.prompt__label::after {
	content: ' ▸';
}

#cmd {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fg);
	font: inherit;
	caret-color: var(--accent);
	outline: none;
}

#cmd::placeholder {
	color: var(--dim);
	opacity: 0.7;
}

@media (max-width: 640px) {
	html, body { font-size: 14px; }
	.hud__host,
	.hud time { display: none; }
}