/* Also Known As — self-contained, no dependencies. */

:root {
	--bg: #0f141b;
	--surface: #171f2a;
	--primary: #5b8def;
	--silver: #9aaac4;
	--text: #edf1f7;
	--muted: #a7b2c1;
	--border: #2a3441;
	--right: #3dbe8b;
	--wrong: #e07a6a;
	--gold: #d8b45f;

	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--font-display: "Space Grotesk", "Inter", -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
	margin: 0;
	background:
		radial-gradient(ellipse 90% 55% at 50% -10%, rgba(91, 141, 239, 0.2), transparent 70%),
		var(--bg);
	color: var(--text);
	font-family: var(--font);
	display: grid;
	place-items: start center;
	padding: clamp(1rem, 4vw, 2.5rem);
	overflow-x: hidden;
	color-scheme: dark;
}

.stage { width: 100%; max-width: 40rem; }

.screen { text-align: center; }
.screen[hidden] { display: none; }

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

h1 {
	font-family: var(--font-display);
	font-size: clamp(1.875rem, 1rem + 4.4vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 0.75rem;
	text-wrap: balance;
}

.title {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 1rem + 2vw, 2rem);
	letter-spacing: -0.02em;
	margin: 0 0 0.4rem;
}

.lede {
	color: var(--muted);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
	margin: 0 auto 1.25rem;
	max-width: 34ch;
	text-wrap: pretty;
}

.sub {
	color: var(--muted);
	font-size: 0.9375rem;
	margin: 0 auto 1.25rem;
	max-width: 44ch;
	text-wrap: pretty;
}

.progress {
	color: var(--silver);
	font-size: 0.875rem;
	margin: 0 0 1.5rem;
	min-height: 1.4em;
}

/* ---- start: mode picker ---- */

.modes {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.mode {
	font-family: var(--font);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.2rem 1rem;
	text-align: left;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 1.1rem 1.25rem;
	cursor: pointer;
	width: 100%;
	position: relative;
}

.mode:hover {
	border-color: var(--silver);
	background: #1d2734;
}

.mode:active { transform: translateY(1px); }

/*
   The first mode is the call to action. It was a muted card like the others
   and read as inert — nothing on the screen looked pressable, which is the
   one thing a start screen has to get right.
*/
.mode--primary {
	background: linear-gradient(180deg, #6d9bf2, var(--primary));
	border-color: transparent;
	color: #0b1017;
	box-shadow: 0 6px 20px -8px rgba(91, 141, 239, 0.9);
}

.mode--primary:hover {
	background: linear-gradient(180deg, #82abf6, #6b98f1);
	border-color: transparent;
}

.mode--primary .mode__desc,
.mode--primary .mode__stat { color: rgba(11, 16, 23, 0.72); }

.mode__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1875rem;
	letter-spacing: -0.01em;
}

.mode__desc {
	grid-column: 1;
	color: var(--muted);
	font-size: 0.875rem;
	line-height: 1.45;
}

.mode__stat {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	color: var(--silver);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.progress--error {
	color: var(--wrong);
	max-width: 40ch;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
}

.link {
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--silver);
	background: none;
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	cursor: pointer;
}

.link:hover { color: var(--text); border-color: var(--silver); }

.back {
	font: inherit;
	font-size: 0.875rem;
	color: var(--muted);
	background: none;
	border: 0;
	padding: 0.35rem 0;
	margin-bottom: 0.75rem;
	cursor: pointer;
	float: left;
}

.back:hover { color: var(--text); }
.back--inline { float: none; margin: 0; padding: 0; }

/* ---- gauntlet lenses ---- */

.lenses {
	display: grid;
	gap: 0.5rem;
	clear: both;
}

.lens {
	font-family: var(--font);
	display: grid;
	gap: 0.15rem;
	text-align: left;
	color: var(--text);
	background: rgba(23, 31, 42, 0.8);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 0.85rem 1rem;
	cursor: pointer;
	width: 100%;
}

.lens:hover { border-color: var(--silver); }

.lens__name {
	font-family: var(--font-display);
	font-weight: 600;
}

.lens__blurb {
	color: var(--muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.lens__stat {
	color: var(--silver);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: 0.2rem;
}

/* ---- score bar ---- */

.scorebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 4vw, 2rem);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.hearts {
	font-size: 1.125rem;
	letter-spacing: 0.15em;
	color: var(--wrong);
	text-transform: none;
}

.score strong {
	font-family: var(--font-display);
	font-size: 1.125rem;
	color: var(--text);
	margin-left: 0.35rem;
	font-variant-numeric: tabular-nums;
}

.toast {
	background: rgba(91, 141, 239, 0.12);
	border: 1px solid rgba(91, 141, 239, 0.4);
	border-radius: 999px;
	color: var(--text);
	font-size: 0.8125rem;
	margin: -0.5rem auto 1rem;
	padding: 0.4rem 0.9rem;
	max-width: 34ch;
}

.toast[hidden] { display: none; }

/* ---- question ---- */

.eyebrow {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 0.5rem;
}

.known {
	font-family: var(--font-display);
	font-size: clamp(1.625rem, 1rem + 3.6vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 0.75rem;
	text-wrap: balance;
}

.hint {
	display: inline-block;
	font-size: 0.8125rem;
	color: var(--muted);
	background: rgba(23, 31, 42, 0.8);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.25rem 0.85rem;
	margin: 0 0 clamp(1.25rem, 4vw, 2rem);
}

/* ---- answers ---- */

.answers {
	display: grid;
	gap: 0.625rem;
	margin-bottom: 1rem;
}

.answer {
	font-family: var(--font);
	font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
	font-weight: 500;
	color: var(--text);
	background: rgba(23, 31, 42, 0.8);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 0.95rem 1.1rem;
	cursor: pointer;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
}

.answer:hover:not(:disabled) { border-color: var(--silver); }

.answer:disabled { cursor: default; }

/*
   State is never carried by colour alone — each marked answer also gets a
   glyph, so it reads correctly without colour vision.
*/
.answer__mark {
	flex: none;
	width: 1.5rem;
	font-weight: 700;
	opacity: 0;
}

.answer--right {
	border-color: var(--right);
	background: rgba(61, 190, 139, 0.12);
}

.answer--right .answer__mark { opacity: 1; color: var(--right); }

.answer--wrong {
	border-color: var(--wrong);
	background: rgba(224, 122, 106, 0.12);
}

.answer--wrong .answer__mark { opacity: 1; color: var(--wrong); }

.answer--dim { opacity: 0.45; }

/* Eliminated by a hint — kept in the layout so the options do not jump. */
.answer--gone {
	opacity: 0.25;
	pointer-events: none;
	text-decoration: line-through;
}

/* ---- hints ---- */

.hints {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

.hints[hidden] { display: none; }

.hintbtn {
	font-family: var(--font);
	font-size: 0.8125rem;
	color: var(--silver);
	background: none;
	border: 1px dashed var(--border);
	border-radius: 999px;
	padding: 0.4rem 0.85rem;
	cursor: pointer;
}

.hintbtn:hover:not(:disabled) { color: var(--text); border-color: var(--silver); }
.hintbtn:disabled { opacity: 0.35; cursor: default; }

.hintbtn__cost {
	color: var(--gold);
	font-size: 0.75rem;
	margin-left: 0.25rem;
}

/* ---- result ---- */

.result[hidden] { display: none; }

.verdict {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 0.35rem;
	text-wrap: balance;
}

.verdict--right { color: var(--right); }
.verdict--wrong { color: var(--wrong); }

.gain {
	color: var(--gold);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	margin: 0 0 0.6rem;
	min-height: 1.2em;
	font-variant-numeric: tabular-nums;
}

.fact {
	color: var(--muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 auto 1rem;
	max-width: 46ch;
	text-wrap: pretty;
}

.more {
	text-align: left;
	max-width: 46ch;
	margin: 0 auto 1.25rem;
	border-top: 1px solid var(--border);
	padding-top: 0.75rem;
}

.more summary {
	font-size: 0.8125rem;
	color: var(--silver);
	cursor: pointer;
	list-style: none;
}

.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "＋ "; }
.more[open] summary::before { content: "－ "; }

.more__body {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--muted);
	padding-top: 0.5rem;
}

.more__bio { margin: 0 0 0.6rem; }

.more__list { margin: 0; padding-left: 1.1rem; }
.more__list li { margin-bottom: 0.3rem; }

/* ---- recap ---- */

.bigscore {
	font-family: var(--font-display);
	font-size: clamp(3rem, 2rem + 8vw, 5rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0.25rem 0 0.5rem;
	font-variant-numeric: tabular-nums;
}

.share { margin-bottom: 1.5rem; }

.grid {
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	margin: 0 0 0.75rem;
	font-family: var(--font);
}

.share__fallback {
	display: block;
	font-size: 0.8125rem;
	color: var(--muted);
	margin-top: 0.75rem;
}

.share__fallback[hidden] { display: none; }

.share__fallback textarea {
	display: block;
	width: 100%;
	margin-top: 0.35rem;
	font: inherit;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0.5rem;
	resize: vertical;
}

.recaplist, .codexlist {
	display: grid;
	gap: 0.5rem;
	text-align: left;
	margin-bottom: 1.5rem;
}

.actions {
	display: flex;
	gap: 0.625rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

/* ---- person card, shared by recap and codex ---- */

.person {
	background: rgba(23, 31, 42, 0.7);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 0.7rem 0.9rem;
}

.person__head {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
	margin: 0;
}

.person__head::-webkit-details-marker { display: none; }

.person__mark { flex: none; font-weight: 700; }
.person__mark--right { color: var(--right); }
.person__mark--wrong { color: var(--wrong); }

.person__names { text-wrap: pretty; }
.person__arrow { color: var(--muted); }

.person__body {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--muted);
	border-top: 1px solid var(--border);
	margin-top: 0.6rem;
	padding-top: 0.6rem;
}

.person__body p { margin: 0 0 0.5rem; }
.person__body ul { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.person__body li { margin-bottom: 0.25rem; }

.person__meta {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--silver);
}

.person__story { color: var(--text); }

.person--locked { opacity: 0.5; }
.person--locked .person__head { cursor: default; }
.person--locked .person__meta { margin: 0.2rem 0 0; }

/* ---- codex filters ---- */

.filters {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
	clear: both;
}

.filters input, .filters select {
	font: inherit;
	font-size: 0.9375rem;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 0.55rem 0.7rem;
	min-width: 0;
}

.filters input { flex: 1 1 auto; }
.filters select { flex: 0 1 auto; }

/* ---- buttons ---- */

.btn {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	color: #0b1017;
	background: var(--primary);
	border: 0;
	border-radius: 12px;
	padding: 0.85rem 1.75rem;
	cursor: pointer;
}

.btn:hover { background: #7da3f5; }

.btn--ghost {
	color: var(--text);
	background: none;
	border: 1px solid var(--border);
}

.btn--ghost:hover { background: rgba(23, 31, 42, 0.8); border-color: var(--silver); }

.btn[hidden] { display: none; }

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.btn, .answer, .mode, .lens, .hintbtn {
		transition: background-color 140ms ease, border-color 140ms ease, opacity 140ms ease;
	}

	.answer--right { animation: pulse 200ms ease-out; }
	.answer--wrong { animation: nudge 160ms ease-in-out; }

	@keyframes pulse {
		50% { transform: scale(1.02); }
	}

	@keyframes nudge {
		25% { transform: translateX(-3px); }
		75% { transform: translateX(3px); }
	}
}