/* Home Row Hero */
:root {
	--bg: #171a1e;
	--card: #22272e;
	--border: #343b45;
	--text: #e8e6e0;
	--muted: #9a978e;
	--accent: #4ade80;
	--accent-dark: #22c55e;
	--accent-soft: rgba(74, 222, 128, 0.16);
	--error: #f472b6;
	--gold: #fbbf24;
}
* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem 1rem;
}
.wrap { width: 100%; max-width: 860px; }
h1 { margin: 0 0 0.25rem; font-size: 2rem; text-align: center; }
h2 { margin: 0 0 0.35rem; font-size: 1.25rem; color: var(--accent-dark); }
.tagline { margin: 0 0 1.5rem; color: var(--muted); text-align: center; }
code { background: var(--border); padding: 0.1rem 0.35rem; border-radius: 6px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

/* screens */
.screen { display: none; }
.screen.active { display: block; }
.back {
	display: inline-block;
	margin-top: 1.5rem;
	color: var(--muted);
	text-decoration: none;
	font-size: 0.95rem;
}
.back:hover { color: var(--text); }

/* progress card */
.progress-card {
	background: var(--card);
	border: 2px solid var(--border);
	border-radius: 14px;
	padding: 1rem 1.3rem;
	margin: 0 auto 1.5rem;
	max-width: 480px;
	text-align: center;
}
.level-line { margin: 0 0 0.5rem; font-weight: 600; }
.xp-bar {
	height: 10px; background: var(--border); border-radius: 5px; overflow: hidden;
}
.xp-fill { height: 100%; background: var(--accent); width: 0; transition: width 0.4s ease; }
#home-xp, #home-progress { margin: 0.5rem 0 0; font-size: 0.9rem; }

/* mode cards */
.mode-list {
	display: flex; flex-direction: column; gap: 1rem;
	max-width: 480px; margin: 0 auto;
}
.mode-card {
	display: block; width: 100%; text-align: left;
	background: var(--card); border: 2px solid var(--border); border-radius: 14px;
	padding: 1.1rem 1.3rem; cursor: pointer;
	font: inherit; color: var(--text);
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.mode-card:hover, .mode-card:focus-visible {
	transform: translateY(-2px); border-color: var(--accent);
}
.mode-card p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.4; }
/* Locked Falling Letters: the .locked class lives on the #arcade-card wrapper */
#arcade-card.locked .mode-card { opacity: 0.45; cursor: default; filter: grayscale(1); }
#arcade-card.locked .mode-card:hover { transform: none; border-color: var(--border); }
.padlock { display: none; }
#arcade-card.locked .padlock { display: inline; }

/* lesson list */
.lesson-list {
	display: flex; flex-direction: column; gap: 0.6rem;
	max-width: 560px; margin: 0 auto;
}
.lesson-item {
	display: flex; align-items: center; gap: 0.8rem; width: 100%;
	background: var(--card); border: 2px solid var(--border); border-radius: 12px;
	padding: 0.7rem 1rem; cursor: pointer; text-align: left;
	font: inherit; color: var(--text);
}
.lesson-item:hover:not(:disabled) { border-color: var(--accent); }
.lesson-item.locked { opacity: 0.5; cursor: default; }
.lesson-item.done { border-color: #b2e0ba; }
.lesson-num { font-weight: 700; min-width: 2ch; color: var(--accent-dark); }
.lesson-title { flex: 1; }
.lesson-meta { color: var(--muted); font-size: 0.85rem; }
.stars { color: var(--gold); margin-left: 0.5rem; letter-spacing: 0.1em; }

/* HUD */
.hud {
	display: flex; gap: 1.5rem; justify-content: center; align-items: center;
	margin: 0 auto 1rem; max-width: 720px; font-size: 0.95rem; color: var(--muted);
}
.hud strong { color: var(--text); font-size: 1.1rem; }

/* typer */
.typer-lines {
	background: var(--card); border: 2px solid var(--border); border-radius: 14px;
	padding: 1.2rem 1.4rem; max-width: 720px; margin: 0 auto 0.5rem;
	font-family: "SF Mono", "Cascadia Mono", Consolas, monospace;
	font-size: 1.35rem; line-height: 1.9; min-height: 9.5em;
	letter-spacing: 0.04em;
}
.typer-line { white-space: pre-wrap; opacity: 0.35; }
.typer-line.current { opacity: 1; }
.typer-line.done { opacity: 0.55; }
.typer-line span.typed { color: var(--accent-dark); }
.typer-line span.cursor {
	background: var(--text); color: var(--bg); border-radius: 3px;
	animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { background: var(--accent); color: var(--bg); } }
.typer-lines.shake { animation: shake 0.2s ease; }
@keyframes shake {
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}
#typer-status { text-align: center; min-height: 1.4em; margin: 0 0 1rem; }

/* on-screen keyboard */
.kb {
	max-width: 720px; margin: 0 auto 1rem; user-select: none;
	display: flex; flex-direction: column; gap: 5px; align-items: center;
}
.kb-row { display: flex; gap: 5px; }
.kb-key {
	display: flex; align-items: center; justify-content: center;
	min-width: 2.2rem; height: 2.4rem; padding: 0 0.4rem;
	background: var(--card); border: 1.5px solid var(--border); border-radius: 7px;
	font-size: 0.85rem; color: var(--muted);
	/* same serif treatment as falling letters: i/l/I/L stay distinguishable */
	font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;
}
.kb-key.next {
	border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark);
	font-weight: 700; box-shadow: 0 0 0 2px var(--accent-soft);
}
.kb-space { min-width: 18rem; }
.kb-shift { min-width: 4.5rem; }

/* results */
.results-body { text-align: center; margin: 1rem 0 1.5rem; }
.results-stars { font-size: 3rem; color: var(--gold); letter-spacing: 0.1em; }
.results-xp { color: var(--accent-dark); font-weight: 700; }

/* free type */
#freetype-text {
	display: block; width: 100%; max-width: 560px; margin: 0 auto 1rem;
	padding: 0.9rem 1rem; border: 2px solid var(--border); border-radius: 12px;
	font: inherit; resize: vertical; background: var(--card);
}

/* arcade */
.arcade-field {
	position: relative; width: 100%; max-width: 720px; height: 60vh;
	min-height: 320px; margin: 0 auto; overflow: hidden;
	background: linear-gradient(#1d232a, #232c34);
	border: 2px solid var(--border); border-radius: 14px;
}
.fall-letter {
	position: absolute; top: -8%;
	width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center;
	background: var(--card); border: 2px solid var(--accent); border-radius: 10px;
	/* Serif face so lowercase l (curl), i (dot), I and L (serifs) are visually
	   distinct — sans-serif faces render them near-identically. */
	font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;
	font-size: 1.4rem; font-weight: 700; color: var(--accent-dark);
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.arcade-field.miss-flash { background: #3d1e2a; }
#arcade-lives { letter-spacing: 0.15em; }

@media (max-width: 560px) {
	.typer-lines { font-size: 1.05rem; }
	.kb-key { min-width: 1.5rem; height: 1.9rem; font-size: 0.65rem; }
	.kb-space { min-width: 8rem; }
	.kb-shift { min-width: 2.6rem; }
	body::before {
		content: "This game needs a physical keyboard.";
		display: block; text-align: center; color: var(--error);
		font-size: 0.85rem; margin-bottom: 1rem;
	}
}

/* progress code card */
.code-card {
	background: var(--card); border: 2px solid var(--border); border-radius: 14px;
	padding: 0.9rem 1.2rem; margin: 0 auto 1.5rem; max-width: 480px;
}
.code-card summary { cursor: pointer; font-weight: 600; color: var(--accent-dark); }
.code-card p { margin: 0.5rem 0; }
.code-line { display: flex; gap: 0.5rem; align-items: center; margin: 0.4rem 0; }
.code-display {
	flex: 1; font-size: 0.85rem; word-break: break-all;
	background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px;
	padding: 0.4rem 0.6rem; color: var(--accent);
}
.code-input {
	flex: 1; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.9rem;
	background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px;
	color: var(--text);
}
.code-btn {
	padding: 0.45rem 0.8rem; font: inherit; font-size: 0.85rem; cursor: pointer;
	background: var(--accent-soft); color: var(--accent-dark);
	border: 1.5px solid var(--border); border-radius: 8px;
}
.code-btn:hover { border-color: var(--accent); }
.code-error { color: var(--error); font-size: 0.85rem; margin: 0.4rem 0 0; }
.code-error.hidden { display: none; }

/* toast */
.toast {
	position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(20px);
	background: var(--card); color: var(--text); border: 2px solid var(--accent-dark);
	border-radius: 10px; padding: 0.6rem 1rem; font-size: 0.95rem;
	opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 1000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* lesson progress bar */
.lesson-progress {
	height: 8px; background: var(--border); border-radius: 4px;
	overflow: hidden; max-width: 720px; margin: 0.6rem auto 0.2rem;
}
.lesson-progress-fill {
	height: 100%; width: 0; background: var(--accent);
	transition: width 0.2s ease;
}
.center { text-align: center; }

/* keyboard navigation focus */
.mode-card:focus-visible, .lesson-item:focus-visible, .back:focus-visible,
.code-btn:focus-visible, summary:focus-visible {
	outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px;
}
.mode-card:focus, .lesson-item:focus, .back:focus,
.code-btn:focus, summary:focus {
	outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px;
}

/* Keyclick Notes toggle */
.settings-card {
	border: 2px dashed rgba(255, 255, 255, 0.25);
}
.settings-card.key-sounds-on {
	border-color: #34d399;
}
.settings-card h2 {
	font-size: 1.05rem;
}

/* Colemak mode: physical QWERTY key hint in each key's corner */
.kb-key { position: relative; }
.kb-alt {
	position: absolute; right: 3px; bottom: 1px;
	font-size: 0.52rem; opacity: 0.55; font-family: inherit;
}

/* Finger guidance under the on-screen keyboard (both layouts) */
.finger-hint {
	margin: 0.45rem auto 0; text-align: center;
	font-size: 0.78rem; color: var(--muted); font-weight: 600;
}

/* Visual hands for finger guidance */
.finger-guide {
	display: flex; align-items: flex-end; justify-content: center;
	gap: 1.6rem; margin-top: 0.4rem;
}
.hand { width: 52px; height: 66px; }
.hand .palm { fill: #d7dbe0; }
.hand .finger { fill: #e3e6ea; stroke: #b9bfc7; stroke-width: 1; transition: fill 0.12s; }
.hand .finger.active { fill: var(--accent, #2563eb); stroke: var(--accent, #2563eb); }

/* Active layout name, beside the on-screen keyboard (left) */
.kb { position: relative; }
.kb-layout-label {
	position: absolute;
	right: calc(100% + 14px);
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--muted);
	white-space: nowrap;
}
@media (max-width: 900px) {
	.kb-layout-label { position: static; transform: none; display: block; text-align: center; margin-bottom: 2px; }
}

/* Colemak-track lessons grayed out in QWERTY mode */
.lesson-item.wrong-layout { opacity: 0.4; filter: grayscale(1); cursor: default; }
.lesson-item.wrong-layout:hover { transform: none; }
.layout-hint { text-align: center; margin: 0.5rem 0 0; }