:root {
	--ground: #f3f5f4;
	--panel: #ffffff;
	--line: #d5dcd8;
	--ink: #1d2622;
	--muted: #5c6b64;
	--done-bg: #d6efdd;
	--done-ink: #1f6b3a;
	--open-bg: #f8e7c8;
	--open-ink: #7a4d0b;
	--wait-bg: #e6ebe8;
	--code-bg: #f7f9f8;
}
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--ground: #141a17;
		--panel: #1c2420;
		--line: #33403a;
		--ink: #e3ebe6;
		--muted: #9aaba2;
		--done-bg: #1f4a2e;
		--done-ink: #a8e6bb;
		--open-bg: #4d3a17;
		--open-ink: #f3d49b;
		--wait-bg: #28322d;
		--code-bg: #161d1a;
	}
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font: 15px/1.45 "IBM Plex Sans", system-ui, sans-serif;
	padding: 24px 16px;
}
.layout {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	max-width: var(--layout-max);
	margin: 0 auto;
}
.game {
	flex: var(--game-flex);
	display: grid;
	gap: 8px;
}
.game iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: var(--game-aspect);
	height: auto;
	border: 1px solid var(--line);
	background: var(--game-bg);
	display: block;
}
.hint a { color: inherit; }
.hint {
	color: var(--muted);
	font-size: 13px;
	margin: 0;
}
.checker,
.intro-panel {
	background: var(--panel);
	border: 1px solid var(--line);
	padding: 16px 18px;
	display: grid;
}
.checker {
	flex: 1 1 320px;
	min-width: 0;
	gap: 14px;
}
.eyebrow {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin: 0;
}
h1 {
	font-size: 20px;
	font-weight: 600;
	margin: 2px 0 0;
	text-wrap: balance;
}
.status {
	justify-self: start;
	font-weight: 600;
	font-size: 14px;
	padding: 5px 10px;
	border-radius: 4px;
	background: var(--wait-bg);
	color: var(--muted);
}
.status[data-state="complete"] { background: var(--done-bg); color: var(--done-ink); }
.status[data-state="incomplete"] { background: var(--open-bg); color: var(--open-ink); }
#items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
#items li {
	display: grid;
	grid-template-columns: 1.2em 1fr auto;
	gap: 8px;
	align-items: baseline;
}
#items li .count {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}
#items li[data-optional] .title::after {
	content: "optional";
	margin-left: 8px;
	font-size: 12px;
	color: var(--muted);
	letter-spacing: 0.04em;
}
.row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}
h2 {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}
#messageCount {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
	font-size: 13px;
}
#log {
	font: 12px/1.35 "IBM Plex Mono", ui-monospace, monospace;
	background: var(--code-bg);
	border: 1px solid var(--line);
	padding: 8px 10px;
	max-height: 340px;
	overflow: auto;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	margin: 0;
}
#log:empty::before {
	content: "No messages yet.";
	color: var(--muted);
}
#log .entry + .entry {
	border-top: 1px dashed var(--line);
	margin-top: 8px;
	padding-top: 8px;
}
#log .meta { color: var(--muted); }

.button,
.link-button {
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.button {
	font-weight: 600;
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--panel);
	color: var(--ink);
}
.button:disabled {
	color: var(--muted);
	cursor: default;
}
.link-button {
	border: none;
	background: none;
	padding: 0;
	color: var(--muted);
	text-decoration: underline;
}
.intro-summary {
	align-items: center;
	color: var(--muted);
	font-size: 14px;
}
.stage { position: relative; }
.intro {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgb(0 0 0 / 0.5);
}
.intro[hidden] { display: none; }
.intro-panel {
	width: 100%;
	max-width: 440px;
	max-height: 100%;
	overflow: auto;
	box-sizing: border-box;
	gap: 10px;
}
.intro-title {
	font-size: 18px;
	margin: 0;
}
.intro-body p,
.intro-body ul { margin: 0 0 8px; }
.intro-body ul { padding-left: 1.3em; }
.intro-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
.intro-actions .link-button { margin-right: auto; }
#introNext {
	background: var(--done-bg);
	color: var(--done-ink);
	border-color: transparent;
}