script.js

/**
 * TypeSpeed game logic. Plain browser script, loaded at the end of <body>.
 */

// --- DOM Elements ---
const quoteDisplayElement = document.getElementById('quote-display');
const quoteTextElement = document.getElementById('quote-text');
const typingContainer = document.querySelector('.typing-container');
const typingInputElement = document.getElementById('typing-input');
const timerElement = document.getElementById('timer');
const wpmElement = document.getElementById('wpm');
const accuracyElement = document.getElementById('accuracy');
const mistakesElement = document.getElementById('mistakes');
const highScoreElement = document.getElementById('high-score');
const resetButton = document.getElementById('reset-button');
const containerElement = document.querySelector('.container');
const categorySelect = document.getElementById('category-select');
const quickMode = document.getElementById('quick-mode');
const quickDuration = document.getElementById('quick-duration');
const quickWordCount = document.getElementById('quick-word-count');
const ghostBadge = document.getElementById('ghost-badge');
const storageWarning = document.getElementById('storage-warning');
const updateNotice = document.getElementById('update-notice');
const updateText = document.getElementById('update-text');
const dismissUpdateBtn = document.getElementById('dismiss-update-btn');
const versionLink = document.getElementById('version-link');

// Modals
const resultModal = document.getElementById('result-modal');
const settingsModal = document.getElementById('settings-modal');
const resultTitle = document.getElementById('result-title');
const modalWpmElement = document.getElementById('modal-wpm');
const modalAccuracyElement = document.getElementById('modal-accuracy');
const modalSourceElement = document.getElementById('modal-source');
const modalBestElement = document.getElementById('modal-best');
const modalRawElement = document.getElementById('modal-raw');
const modalCharsElement = document.getElementById('modal-chars');
const modalTimeElement = document.getElementById('modal-time');
const modalKeysElement = document.getElementById('modal-keys');
const practiceBtn = document.getElementById('practice-btn');
const replayBtn = document.getElementById('replay-btn');
const saveImageBtn = document.getElementById('save-image-btn');
const replayModal = document.getElementById('replay-modal');
const replayClock = document.getElementById('replay-clock');
const replayDisplay = document.getElementById('replay-display');
const replaySpeed = document.getElementById('replay-speed');
const replayPauseBtn = document.getElementById('replay-pause-btn');
const closeReplayBtn = document.getElementById('close-replay-btn');
const practiceNote = document.getElementById('practice-note');
const challengeBtn = document.getElementById('challenge-btn');
const modalChallengeElement = document.getElementById('modal-challenge');
const modalProgressElement = document.getElementById('modal-progress');
const dailyBtn = document.getElementById('daily-btn');
const challengeLinkRow = document.getElementById('challenge-link-row');
const challengeLinkInput = document.getElementById('challenge-link');
const shareBtn = document.getElementById('share-btn');
const playAgainBtn = document.getElementById('play-again-btn');
const settingsBtn = document.getElementById('settings-btn');
const closeSettingsBtn = document.getElementById('close-settings-btn');

// Custom text dialog
const customModal = document.getElementById('custom-modal');
const editCustomBtn = document.getElementById('edit-custom-btn');
const codeModal = document.getElementById('code-modal');
const editCodeBtn = document.getElementById('edit-code-btn');
const ownCodeInput = document.getElementById('own-code');
const codeFileBtn = document.getElementById('code-file-btn');
const codeFileInput = document.getElementById('code-file');
const codeFileStatus = document.getElementById('code-file-status');
const closeCodeBtn = document.getElementById('close-code-btn');
const closeCustomBtn = document.getElementById('close-custom-btn');

// Stats dialog
const statsModal = document.getElementById('stats-modal');
const statsBtn = document.getElementById('stats-btn');
const statsSummary = document.getElementById('stats-summary');
const statsTables = document.getElementById('stats-tables');
const statsHeatmap = document.getElementById('stats-heatmap');
const dailyChartContainer = document.getElementById('daily-chart-container');
const dailyChartTitle = document.getElementById('daily-chart-title');
const dailyChart = document.getElementById('daily-chart');
const dailyChartSummary = document.getElementById('daily-chart-summary');
const statsBestsBody = document.getElementById('stats-bests');
const statsRunsBody = document.getElementById('stats-runs');
const statsStatus = document.getElementById('stats-status');
const exportBtn = document.getElementById('export-btn');
const importBtn = document.getElementById('import-btn');
const importInput = document.getElementById('import-input');
const clearBtn = document.getElementById('clear-btn');
const closeStatsBtn = document.getElementById('close-stats-btn');

// Settings inputs
const themeSelector = document.getElementById('theme-selector');
const soundToggle = document.getElementById('sound-toggle-settings');
const soundPackSelect = document.getElementById('sound-pack-select');
const soundPreviewBtn = document.getElementById('sound-preview-btn');
const hardModeToggle = document.getElementById('hard-mode-toggle-settings');
const ghostModeToggle = document.getElementById('ghost-mode-toggle');
const paceSelect = document.getElementById('pace-select');
const paceWpmInput = document.getElementById('pace-wpm');
const fontSelect = document.getElementById('font-select');
const textSizeSelect = document.getElementById('text-size-select');
const lineSpacingSelect = document.getElementById('line-spacing-select');
const caretSelect = document.getElementById('caret-select');
const punctuationToggle = document.getElementById('punctuation-toggle');
const numbersToggle = document.getElementById('numbers-toggle');
const stopOnErrorToggle = document.getElementById('stop-on-error-toggle');
const layoutSelect = document.getElementById('layout-select');
const customTextInput = document.getElementById('custom-text');
const autoIndentToggle = document.getElementById('auto-indent-toggle');
// Main-screen options shown only for the categories they apply to
const punctuationOption = document.getElementById('punctuation-option');
const numbersOption = document.getElementById('numbers-option');
const wordLanguageSelect = document.getElementById('word-language-select');
const autoIndentOption = document.getElementById('auto-indent-option');
const codeLanguageSelect = document.getElementById('code-language-select');
const lessonSelect = document.getElementById('lesson-select');
const bookSelect = document.getElementById('book-select');
const capsWarning = document.getElementById('caps-warning');
const ghostStatus = document.getElementById('ghost-status');

// Chart
const chartContainer = document.getElementById('progress-chart-container');
const runChartContainer = document.getElementById('run-chart-container');
const runChart = document.getElementById('run-chart');
const progressChartTitle = document.getElementById('progress-chart-title');
const progressChart = document.getElementById('progress-chart');

// --- Storage ---
const STORAGE_KEYS = {
    history: 'typingGameHistory',
    bests: 'typingGameBests',
    settings: 'typingGameSettings',
    keyStats: 'typingGameKeyStats',
    daily: 'typingGameDaily',
    lessons: 'typingGameLessons',
    books: 'typingGameBooks',
};

function loadJSON(key, fallback) {
    try {
        const raw = localStorage.getItem(key);
        return raw === null ? fallback : JSON.parse(raw);
    } catch (err) {
        console.warn(`Ignoring unreadable localStorage value for ${key}`, err);
        return fallback;
    }
}

// A failed save (storage full, or blocked in some private modes) shows a
// notice that stays until the page is reloaded.
function saveJSON(key, value) {
    try {
        localStorage.setItem(key, JSON.stringify(value));
    } catch (err) {
        console.warn(`Could not save ${key} to localStorage`, err);
        storageWarning.classList.remove('hidden');
    }
}

// Keystroke timings, {t: ms since start, i: character index} per input
// event, are stored as a flat list of differences, [t1, i1, t2 - t1,
// i2 - i1, ...], about a third of the size in JSON. Bests store them this
// way and challenge links carry them. Bests saved before this hold the
// objects themselves; bestStrokes reads both.
function encodeStrokes(strokes) {
    const deltas = [];
    let t = 0;
    let i = 0;
    for (const stroke of strokes) {
        deltas.push(stroke.t - t, stroke.i - i);
        t = stroke.t;
        i = stroke.i;
    }
    return deltas;
}

function decodeStrokes(deltas) {
    const strokes = [];
    let t = 0;
    let i = 0;
    for (let n = 0; n + 1 < deltas.length; n += 2) {
        t += deltas[n];
        i += deltas[n + 1];
        strokes.push({ t, i });
    }
    return strokes;
}

const bestStrokes = (best) =>
    typeof best.keystrokes[0] === 'object' ? best.keystrokes : decodeStrokes(best.keystrokes);

// --- Game State ---
const DURATIONS = [15, 30, 60];
const WORD_COUNTS = [10, 25, 50];
const DEFAULT_SETTINGS = {
    mode: 'time', // 'time' or 'words'
    duration: 60, // seconds, time mode
    wordCount: 10, // words mode
    category: 'common', // 'common', 'weak', or a key of QUOTES (texts.js)
    isGhostEnabled: false,
    pace: 'off', // pace caret: 'off', 'target', 'average', or 'last'
    paceWpm: 60, // speed of the pace caret when pace is 'target'
    isHardMode: false,
    isSoundEnabled: true,
    soundPack: 'tones', // one of SOUND_PACK_NAMES
    hasPunctuation: false, // common words only
    hasNumbers: false, // common words only
    wordLanguage: 'en', // common words only: 'en' or a key of WORD_LISTS (wordlists.js)
    isStopOnError: false, // wrong keys do not advance the caret
    layout: 'qwerty', // key of LAYOUTS; keys are remapped when it is not qwerty
    customText: '', // passage for the Custom Text category, already normalized
    codeLanguage: 'javascript', // key of CODE_SNIPPETS (texts.js), or OWN_CODE
    ownCode: '', // code for the "Your code" language, already normalized
    isAutoIndent: true, // fill in leading spaces after a new line in code
    theme: 'system', // 'system', 'dark', 'light', or 'contrast'
    passageFont: 'mono', // values of these four in PASSAGE_STYLES
    textSize: 'medium',
    lineSpacing: 'normal',
    caretStyle: 'underline',
    lastSeenVersion: '', // VERSION when the page was last opened
    lessonStage: 1, // stage number in the Lessons category, from 1
    bookId: 'alice', // id in BOOKS, for the Books category
};

const THEMES = ['system', 'dark', 'light', 'contrast'];
const PACES = ['off', 'target', 'average', 'last'];

// --- Lessons ---
// Stages for learning to touch type. Each adds keys to the ones before it.
// A run passes a stage at LESSON_PASS accuracy and WPM and unlocks the next.
const ALL_LETTERS = 'abcdefghijklmnopqrstuvwxyz';
const LESSON_STAGES = [
    { name: 'Home row', letters: 'asdfghjkl' },
    { name: 'Top row', letters: 'asdfghjklqwertyuiop' },
    { name: 'Bottom row', letters: ALL_LETTERS },
    { name: 'Capitals', letters: ALL_LETTERS, capitals: true },
    { name: 'Punctuation', letters: ALL_LETTERS, punctuation: true },
    { name: 'Numbers', letters: ALL_LETTERS, punctuation: true, numbers: true },
];
const LESSON_PASS = { accuracy: 95, wpm: 20 };

// --- Books ---
// Public-domain books in books/<id>.json, built by scripts/build-books.mjs
// as chapters of pages. A Books run is one page; the next run continues
// with the next page. The files load from the site when a book is picked.
const BOOKS = [
    { id: 'alice', title: "Alice's Adventures in Wonderland", author: 'Lewis Carroll' },
    { id: 'carol', title: 'A Christmas Carol', author: 'Charles Dickens' },
    { id: 'time-machine', title: 'The Time Machine', author: 'H. G. Wells' },
    { id: 'sherlock', title: 'The Adventures of Sherlock Holmes', author: 'Arthur Conan Doyle' },
    { id: 'frankenstein', title: 'Frankenstein', author: 'Mary Shelley' },
    { id: 'pride', title: 'Pride and Prejudice', author: 'Jane Austen' },
];

// --- Layouts ---
// Each layout as the characters on the physical keys of a US keyboard, row
// by row: Minus and Equal, then the top, home, and bottom letter rows. The
// key under a character is found by its KeyboardEvent.code in LAYOUT_CODES.
const LAYOUTS = {
    qwerty: ['-=', 'qwertyuiop[]', "asdfghjkl;'", 'zxcvbnm,./'],
    colemak: ['-=', 'qwfpgjluy;[]', "arstdhneio'", 'zxcvbkm,./'],
    'colemak-dh': ['-=', 'qwfpbjluy;[]', "arstgmneio'", 'zxcdvkh,./'],
    dvorak: ['[]', "',.pyfgcrl/=", 'aoeuidhtns-', ';qjkxbmwvz'],
    workman: ['-=', 'qdrwbjfup;[]', "ashtgyneoi'", 'zxmcvkl,./'],
};
const LAYOUT_CODES = [
    ['Minus', 'Equal'],
    ['KeyQ', 'KeyW', 'KeyE', 'KeyR', 'KeyT', 'KeyY', 'KeyU', 'KeyI', 'KeyO', 'KeyP'],
    ['KeyA', 'KeyS', 'KeyD', 'KeyF', 'KeyG', 'KeyH', 'KeyJ', 'KeyK', 'KeyL', 'Semicolon', 'Quote'],
    ['KeyZ', 'KeyX', 'KeyC', 'KeyV', 'KeyB', 'KeyN', 'KeyM', 'Comma', 'Period', 'Slash'],
];
LAYOUT_CODES[1].push('BracketLeft', 'BracketRight');
const SOUND_PACK_NAMES = ['tones', 'mechanical', 'typewriter', 'soft']; // keys of SOUND_PACKS

// How the passage looks. Each is set as a data attribute of the same name on
// <html>, which style.css reads; theme.js does the same before first paint.
const PASSAGE_STYLES = {
    passageFont: ['mono', 'sans', 'dyslexic'],
    textSize: ['medium', 'small', 'large', 'xlarge'],
    lineSpacing: ['normal', 'compact', 'wide'],
    caretStyle: ['underline', 'line', 'block'],
};
const PACE_MIN = 10;
const PACE_MAX = 300;

const CUSTOM_TEXT_LIMIT = 2000;

// Typographic quotes, dashes, and ellipses become the keys people can type,
// and all whitespace runs become single spaces.
function normalizeCustomText(text) {
    return String(text)
        .replace(/[\u2018\u2019\u201a\u2032]/g, "'")
        .replace(/[\u201c\u201d\u201e\u2033]/g, '"')
        .replace(/[\u2013\u2014\u2212]/g, '-')
        .replace(/\u2026/g, '...')
        .replace(/\s+/g, ' ')
        .trim()
        .slice(0, CUSTOM_TEXT_LIMIT)
        .trim();
}

// Short FNV-1a hash, so each custom text keeps its own best scores.
function textHash(text) {
    let hash = 0x811c9dc5;
    for (let n = 0; n < text.length; n++) {
        hash ^= text.charCodeAt(n);
        hash = Math.imul(hash, 0x01000193) >>> 0;
    }
    return hash.toString(36);
}

const CATEGORIES = ['common', 'weak', 'lessons', 'books', 'custom', 'code', ...Object.keys(QUOTES)];
const OWN_CODE = 'own';
const CODE_LANGUAGES = [...Object.keys(CODE_SNIPPETS), OWN_CODE];
const OWN_CODE_LIMIT = 20000; // characters
const OWN_CODE_LINE_MAX = 100;
const OWN_CODE_CHUNK_LINES = 15;

// Code keeps its line breaks and indentation, unlike custom text.
function normalizeOwnCode(text) {
    const lines = String(text)
        .replace(/\r\n?/g, '\n')
        .replace(/\t/g, '    ')
        .replace(/[\u2018\u2019]/g, "'")
        .replace(/[\u201c\u201d]/g, '"')
        .replace(/[\u2013\u2014]/g, '-')
        .split('\n')
        .map((line) => line.replace(/\s+$/, ''))
        .filter((line) => line.length <= OWN_CODE_LINE_MAX);
    let code = lines
        .join('\n')
        .replace(/\n{3,}/g, '\n\n')
        .replace(/^\n+|\n+$/g, '');
    if (code.length > OWN_CODE_LIMIT) {
        code = code.slice(0, OWN_CODE_LIMIT);
        code = code.slice(0, code.lastIndexOf('\n')).replace(/\n+$/, '');
    }
    return code;
}

// Blocks between blank lines, cut to OWN_CODE_CHUNK_LINES lines, each moved
// left so its least indented line starts at the margin.
function ownCodeChunks(code) {
    const chunks = [];
    for (const block of code.split(/\n\n+/)) {
        const lines = block.split('\n');
        for (let n = 0; n < lines.length; n += OWN_CODE_CHUNK_LINES) {
            const chunk = lines.slice(n, n + OWN_CODE_CHUNK_LINES);
            const indent = Math.min(...chunk.map((line) => line.match(/^ */)[0].length));
            chunks.push(chunk.map((line) => line.slice(indent)));
        }
    }
    return chunks;
}

// The language whose snippets a Code run uses: "Your code" with nothing
// saved uses JavaScript.
const codeLanguage = () =>
    gameState.codeLanguage === OWN_CODE && !gameState.ownCode
        ? 'javascript'
        : gameState.codeLanguage;

const codeSnippets = () =>
    codeLanguage() === OWN_CODE ? ownCodeChunks(gameState.ownCode) : CODE_SNIPPETS[codeLanguage()];

// Custom text and your own code stay on this device: no challenge links.
// Books pages are not drawn from a seed, so they cannot be either.
const isLocalText = () =>
    passageCategory() === 'custom' ||
    passageCategory() === 'books' ||
    (passageCategory() === 'code' && codeLanguage() === OWN_CODE);

function sanitizeSettings(saved) {
    const settings = { ...DEFAULT_SETTINGS };
    if (!saved || typeof saved !== 'object') return settings;
    if (saved.mode === 'words') settings.mode = 'words';
    if (DURATIONS.includes(saved.duration)) settings.duration = saved.duration;
    if (WORD_COUNTS.includes(saved.wordCount)) settings.wordCount = saved.wordCount;
    if (CATEGORIES.includes(saved.category)) settings.category = saved.category;
    if (CODE_LANGUAGES.includes(saved.codeLanguage)) settings.codeLanguage = saved.codeLanguage;
    if (THEMES.includes(saved.theme)) settings.theme = saved.theme;
    if (PACES.includes(saved.pace)) settings.pace = saved.pace;
    if (BOOKS.some((book) => book.id === saved.bookId)) settings.bookId = saved.bookId;
    if (Object.hasOwn(WORD_LISTS, saved.wordLanguage)) settings.wordLanguage = saved.wordLanguage;
    if (Number.isInteger(saved.lessonStage) && LESSON_STAGES[saved.lessonStage - 1]) {
        settings.lessonStage = saved.lessonStage;
    }
    if (Object.hasOwn(LAYOUTS, saved.layout)) settings.layout = saved.layout;
    if (
        typeof saved.lastSeenVersion === 'string' &&
        /^\d+\.\d+\.\d+$/.test(saved.lastSeenVersion)
    ) {
        settings.lastSeenVersion = saved.lastSeenVersion;
    }
    if (SOUND_PACK_NAMES.includes(saved.soundPack)) settings.soundPack = saved.soundPack;
    for (const [setting, values] of Object.entries(PASSAGE_STYLES)) {
        if (values.includes(saved[setting])) settings[setting] = saved[setting];
    }
    if (Number.isInteger(saved.paceWpm) && saved.paceWpm >= PACE_MIN && saved.paceWpm <= PACE_MAX) {
        settings.paceWpm = saved.paceWpm;
    }
    if (typeof saved.ownCode === 'string') settings.ownCode = normalizeOwnCode(saved.ownCode);
    if (typeof saved.customText === 'string') {
        settings.customText = normalizeCustomText(saved.customText);
    }
    for (const flag of [
        'isGhostEnabled',
        'isHardMode',
        'isSoundEnabled',
        'hasPunctuation',
        'hasNumbers',
        'isStopOnError',
        'isAutoIndent',
    ]) {
        if (typeof saved[flag] === 'boolean') settings[flag] = saved[flag];
    }
    return settings;
}

const gameState = sanitizeSettings(loadJSON(STORAGE_KEYS.settings, null));

// Per-run data. Reset by resetGame().
const runtime = {
    isStarted: false,
    startTime: 0,
    endTime: 0,
    interval: null,
    timer: 0, // seconds shown in the HUD
    quoteText: '', // text currently on screen
    quoteSource: '', // attribution of the passage on screen, if known
    quoteBase: 0, // characters in quotes already completed this run (time mode)
    baseCorrect: 0, // correct characters in completed quotes
    baseTyped: 0, // typed characters in completed quotes
    correctChars: 0, // correct characters across the whole run
    typedChars: 0, // typed characters across the whole run
    previousValue: '', // input value after the last input event
    keystrokes: 0, // characters inserted, including ones later deleted
    mistakes: 0, // inserted characters that did not match
    ghostStrokes: [], // {t: ms since start, i: character index} for Ghost Mode
    keyStats: {}, // {[expected character]: {attempts, misses}} for this run
    seed: 0, // passages for the run are drawn from this seed
    random: Math.random, // seeded generator, replaced in resetGame
    weakKeys: [], // letters the Weak Keys category uses this run
    passageHash: '', // textHash of the run's first passage
    textChanged: false, // the replayed run was recorded on a different first passage
    ghostIndex: 0, // character index the ghost has reached
    challenge: null, // decoded challenge link, kept across resets until a run uses it
    indent: [], // per character of quoteText: true for indentation Skip indentation fills in
    ghostTimeouts: [],
    grid: [], // {typed, wrong} per GRID_SECONDS of the run, for the daily's share grid
    replay: { passages: [], events: [] }, // the run's passages and {t, p, value} per input event
    playback: null, // replay dialog state: {interval, position, last, speed, shown}
    cardFile: null, // result image File, built when the result dialog opens
    challengeUrl: '', // link for the finished run, built when the result dialog opens
    books: {}, // book files loaded so far, by id; kept across resets
    bookError: '', // id of a book that could not be loaded
};

const HISTORY_LIMIT = 500;
const CHART_POINTS = 10;

let runHistory = loadJSON(STORAGE_KEYS.history, []);
if (!Array.isArray(runHistory)) runHistory = [];

// Best run per settings combination:
// { [settingsKey]: { wpm, keystrokes, seed, textHash, weakKeys? } }.
let bests = loadJSON(STORAGE_KEYS.bests, {});
if (!bests || typeof bests !== 'object' || Array.isArray(bests)) bests = {};

// Attempts and misses per expected character across all recorded runs.
let keyStats = loadJSON(STORAGE_KEYS.keyStats, {});
if (!keyStats || typeof keyStats !== 'object' || Array.isArray(keyStats)) keyStats = {};

// Where each book continues: { [book id]: { chapter, page } }, from 0.
let bookProgress = validBooks(loadJSON(STORAGE_KEYS.books, null));

// The highest lesson stage unlocked: { unlocked }.
let lessonProgress = validLessons(loadJSON(STORAGE_KEYS.lessons, null));

// The first recorded result of each daily: { [day number]: { wpm, accuracy, grid } }.
let dailyResults = loadJSON(STORAGE_KEYS.daily, {});
if (!dailyResults || typeof dailyResults !== 'object' || Array.isArray(dailyResults)) {
    dailyResults = {};
}

// Keys missed most often, by miss rate, among keys tried at least
// WEAK_MIN_ATTEMPTS times: letters (lowercased), digits, and symbols, but not
// space or new line. Used by the Weak Keys category.
const WEAK_MIN_ATTEMPTS = 5;
const WEAK_KEY_COUNT = 3;
const isWeakKeyCandidate = (key) => /^[!-~]$/.test(key); // printable ASCII, no space

// Key stats are kept per layout: QWERTY under the character, the others
// under '<layout>:<character>'.
const statKey = (character) =>
    gameState.layout === 'qwerty' ? character : `${gameState.layout}:${character}`;

// The current layout's key stats, keyed by character.
function layoutStats() {
    const prefix = gameState.layout === 'qwerty' ? '' : `${gameState.layout}:`;
    const result = {};
    for (const [key, stat] of Object.entries(keyStats)) {
        if (!key.startsWith(prefix)) continue;
        const character = key.slice(prefix.length);
        if (character.length === 1) result[character] = stat;
    }
    return result;
}

function weakestKeys() {
    const keys = Object.entries(layoutStats())
        .filter(([key, stat]) => isWeakKeyCandidate(key) && stat && stat.misses > 0)
        .filter(([, stat]) => stat.attempts >= WEAK_MIN_ATTEMPTS)
        .sort(([, a], [, b]) => b.misses / b.attempts - a.misses / a.attempts)
        .map(([key]) => key.toLowerCase());
    return [...new Set(keys)].slice(0, WEAK_KEY_COUNT);
}

// Custom Text with no text saved uses common words, and is recorded as them.
function passageCategory() {
    return gameState.category === 'custom' && !gameState.customText ? 'common' : gameState.category;
}

// Runs only compete with runs of the same mode, length, category, and
// rules. The defaults (Stop on error off, Skip indentation on) add nothing.
// Books runs end with the page, whatever the mode.
const isTimed = () => gameState.mode === 'time' && gameState.category !== 'books';

function settingsKey() {
    if (gameState.category === 'books') return `page:book:books-${gameState.bookId}`;
    const length = gameState.mode === 'time' ? `${gameState.duration}s` : `${gameState.wordCount}w`;
    let category = passageCategory();
    if (category === 'custom') category = `custom-${textHash(gameState.customText)}`;
    if (category === 'lessons') category = `lessons-${gameState.lessonStage}`;
    if (category === 'code') {
        const language = codeLanguage();
        category =
            language === OWN_CODE ? `code-own-${textHash(gameState.ownCode)}` : `code-${language}`;
    }
    if (category === 'common') {
        if (gameState.wordLanguage !== 'en') category += `-${gameState.wordLanguage}`;
        if (gameState.hasPunctuation) category += '+punctuation';
        if (gameState.hasNumbers) category += '+numbers';
    }
    if (category.startsWith('code-') && !gameState.isAutoIndent) category += '+noindent';
    if (gameState.isStopOnError) category += '+stop';
    if (gameState.layout !== 'qwerty') category += `+${gameState.layout}`;
    return `${gameState.mode}:${length}:${category}`;
}

function currentBest() {
    const best = bests[settingsKey()];
    if (!best || typeof best.wpm !== 'number' || !Array.isArray(best.keystrokes)) return null;
    return best;
}

// --- Audio ---
// Each sound is a recipe: oscillator shape, start and end frequency,
// duration, and volume. A `noise` recipe plays white noise through a
// band-pass filter centered on `freq` instead of an oscillator. `steps`
// lists sub-recipes with start offsets in seconds, for sounds made of
// several parts. Each pack has a click, an error, and a success sound.
const chord = (freqs, gap, recipe) => freqs.map((freq, i) => ({ at: i * gap, freq, ...recipe }));

const SOUND_PACKS = {
    tones: {
        click: { wave: 'sine', freq: 800, toFreq: 400, duration: 0.05, volume: 0.05, jitter: 0.03 },
        error: {
            wave: 'sawtooth',
            freq: 100,
            toFreq: 80,
            slide: 'linear',
            duration: 0.15,
            volume: 0.08,
        },
        // C5, E5, G5, C6
        success: {
            steps: chord([523.25, 659.25, 783.99, 1046.5], 0.1, {
                wave: 'sine',
                duration: 0.5,
                volume: 0.05,
            }),
        },
    },
    // A switch: a short high click and a low thump as the key bottoms out.
    mechanical: {
        click: {
            steps: [
                { noise: true, freq: 4000, duration: 0.025, volume: 0.25, jitter: 0.1 },
                { wave: 'sine', freq: 180, toFreq: 70, duration: 0.05, volume: 0.06, jitter: 0.05 },
            ],
        },
        error: {
            steps: [
                { noise: true, freq: 1200, duration: 0.05, volume: 0.25 },
                { wave: 'square', freq: 110, toFreq: 70, duration: 0.12, volume: 0.04 },
            ],
        },
        success: {
            steps: [
                ...[0, 0.08, 0.16].map((at) => ({
                    at,
                    noise: true,
                    freq: 4000,
                    duration: 0.025,
                    volume: 0.25,
                })),
                { at: 0.3, wave: 'sine', freq: 880, duration: 0.4, volume: 0.04 },
            ],
        },
    },
    // A typebar strike, a dull clunk for a mistake, and the carriage bell.
    typewriter: {
        click: {
            steps: [
                { noise: true, freq: 2200, duration: 0.04, volume: 0.3, jitter: 0.1 },
                { wave: 'triangle', freq: 1400, toFreq: 900, duration: 0.02, volume: 0.03 },
            ],
        },
        error: {
            steps: [
                { noise: true, freq: 600, duration: 0.08, volume: 0.3 },
                { wave: 'triangle', freq: 90, toFreq: 60, duration: 0.1, volume: 0.06 },
            ],
        },
        success: {
            steps: [
                { wave: 'sine', freq: 2093, duration: 0.9, volume: 0.06 },
                { wave: 'sine', freq: 4186, duration: 0.5, volume: 0.02 },
            ],
        },
    },
    // Quiet, low, and rounded.
    soft: {
        click: { wave: 'sine', freq: 420, toFreq: 300, duration: 0.04, volume: 0.03, jitter: 0.05 },
        error: { wave: 'triangle', freq: 200, toFreq: 160, duration: 0.12, volume: 0.05 },
        // C4, E4, G4
        success: {
            steps: chord([261.63, 329.63, 392], 0.12, {
                wave: 'triangle',
                duration: 0.5,
                volume: 0.04,
            }),
        },
    },
};

const MAX_VOICES = 16; // oldest voice is stopped beyond this
const GAIN_FLOOR = 0.0001; // exponential ramps cannot reach 0

// The context is created on the first sound, after a keystroke, so the
// browser does not start it suspended. Every voice goes through one master
// gain node. If Web Audio is missing or blocked, sounds are skipped.
const audio = { context: null, master: null, failed: false, voices: [], noise: null };

function getAudioContext() {
    if (audio.failed) return null;
    if (!audio.context) {
        try {
            const Ctx = window.AudioContext || window.webkitAudioContext;
            audio.context = new Ctx();
            audio.master = audio.context.createGain();
            audio.master.connect(audio.context.destination);
        } catch {
            audio.failed = true;
            audio.context = null;
            return null;
        }
    }
    if (audio.context.state === 'suspended') audio.context.resume().catch(() => {});
    return audio.context;
}

// Half a second of white noise, made once and shared by every noise voice.
function noiseBuffer(ctx) {
    if (!audio.noise) {
        audio.noise = ctx.createBuffer(1, Math.round(ctx.sampleRate / 2), ctx.sampleRate);
        const samples = audio.noise.getChannelData(0);
        for (let n = 0; n < samples.length; n++) samples[n] = Math.random() * 2 - 1;
    }
    return audio.noise;
}

function playVoice(ctx, recipe, at) {
    while (audio.voices.length >= MAX_VOICES) audio.voices.shift().stop();

    // A few percent of random pitch keeps repeated clicks from sounding identical.
    const jitter = recipe.jitter ? 1 + (Math.random() * 2 - 1) * recipe.jitter : 1;
    const duration = recipe.duration > 0 ? recipe.duration : 0.1;
    const gain = ctx.createGain();
    gain.connect(audio.master);
    // `pitch` is the oscillator's frequency, or for noise the filter's center.
    let source;
    let pitch;
    const nodes = [gain];
    if (recipe.noise) {
        source = ctx.createBufferSource();
        source.buffer = noiseBuffer(ctx);
        const filter = ctx.createBiquadFilter();
        filter.type = 'bandpass';
        source.connect(filter);
        filter.connect(gain);
        pitch = filter.frequency;
        nodes.push(filter);
    } else {
        source = ctx.createOscillator();
        source.type = recipe.wave || 'square';
        source.connect(gain);
        pitch = source.frequency;
    }
    nodes.push(source);
    pitch.setValueAtTime(Math.max(recipe.freq * jitter, 1), at);
    if (recipe.toFreq !== undefined) {
        const target = Math.max(recipe.toFreq * jitter, 1);
        if (recipe.slide === 'linear') pitch.linearRampToValueAtTime(target, at + duration);
        else pitch.exponentialRampToValueAtTime(target, at + duration);
    }
    gain.gain.setValueAtTime(Math.max(recipe.volume ?? 0.08, GAIN_FLOOR), at);
    gain.gain.exponentialRampToValueAtTime(GAIN_FLOOR, at + duration);
    source.start(at);
    source.stop(at + duration);

    audio.voices.push(source);
    source.onended = () => {
        nodes.forEach((node) => node.disconnect());
        const index = audio.voices.indexOf(source);
        if (index !== -1) audio.voices.splice(index, 1);
    };
}

// Plays the current pack's sound `delay` seconds from now. Never throws.
function playRecipe(name, delay = 0) {
    const recipe = SOUND_PACKS[gameState.soundPack][name];
    const ctx = getAudioContext();
    if (!recipe || !ctx) return;
    try {
        const now = ctx.currentTime + delay;
        for (const step of recipe.steps || [recipe]) playVoice(ctx, step, now + (step.at || 0));
    } catch {
        // A failed sound must not interrupt typing.
    }
}

// Fire and forget: returns before touching Web Audio when sound is off.
function playSound(name) {
    if (gameState.isSoundEnabled) playRecipe(name);
}

// The Play button in Settings: a few keys, a mistake, and the end of a run,
// whether or not sound is on.
function previewSoundPack() {
    [0, 0.15, 0.3].forEach((delay) => playRecipe('click', delay));
    playRecipe('error', 0.5);
    playRecipe('success', 0.9);
}

// --- Random ---
// Small seeded generator (mulberry32), so the passages of a run can be
// rebuilt from its seed for Ghost Mode and challenge links.
function seededRandom(seed) {
    let state = seed >>> 0;
    return () => {
        state = (state + 0x6d2b79f5) >>> 0;
        let t = state;
        t = Math.imul(t ^ (t >>> 15), t | 1);
        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
    };
}

function newSeed() {
    return Math.floor(Math.random() * 4294967296);
}

// --- Text Selection ---
// Words per passage when Common Words runs in time mode. A new passage is
// loaded each time one is finished.
const COMMON_CHUNK = 25;
// Longest word, with its trailing space, that renderNewQuote groups into a
// .word. A phone screen fits about 20 characters per line.
const WORD_GROUP_MAX = 16;
let lastQuoteIndex = -1;

function pickQuote(categoryQuotes) {
    let index;
    do {
        index = Math.floor(runtime.random() * categoryQuotes.length);
    } while (categoryQuotes.length > 1 && index === lastQuoteIndex);
    lastQuoteIndex = index;
    return categoryQuotes[index];
}

// Random common words with no word twice in a row, plus optional
// punctuation (capitalized sentences, commas, full stops) and numbers.
// Only Common Words shows those options, so other callers turn them off.
// Common Words in the chosen language.
const commonWordList = () =>
    gameState.wordLanguage === 'en' ? COMMON_WORDS : WORD_LISTS[gameState.wordLanguage];

function commonWords(
    count,
    list = commonWordList(),
    { punctuation = gameState.hasPunctuation, numbers = gameState.hasNumbers } = {}
) {
    const words = [];
    let previous = '';
    let sentenceStart = true;
    for (let n = 0; n < count; n++) {
        let word;
        do {
            word = list[Math.floor(runtime.random() * list.length)];
        } while (word === previous);
        previous = word;

        if (numbers && runtime.random() < 0.1) {
            word = String(1 + Math.floor(runtime.random() * 9999));
        }
        if (punctuation) {
            if (sentenceStart) word = word[0].toUpperCase() + word.slice(1);
            sentenceStart = false;
            const roll = runtime.random();
            if (n === count - 1 || roll < 0.1) {
                word += roll < 0.02 ? '?' : '.';
                sentenceStart = true;
            } else if (roll < 0.2) {
                word += ',';
            }
        }
        words.push(word);
    }
    return words.join(' ');
}

// Common words that contain at least one of the given letters. Falls back
// to the whole list when too few words match.
// Words that use only the stage's letters; the first stage adds
// LESSON_HOME_WORDS (texts.js). Capitals start about a third of the words.
function lessonText(count) {
    const stage = LESSON_STAGES[gameState.lessonStage - 1];
    const fits = (word) => [...word].every((character) => stage.letters.includes(character));
    const list = [...new Set([...LESSON_HOME_WORDS, ...COMMON_WORDS])].filter(fits);
    const text = commonWords(count, list, {
        punctuation: Boolean(stage.punctuation),
        numbers: Boolean(stage.numbers),
    });
    if (!stage.capitals) return text;
    return text
        .split(' ')
        .map((word) => (runtime.random() < 0.35 ? word[0].toUpperCase() + word.slice(1) : word))
        .join(' ');
}

// The page the current book continues at, or an empty passage while the
// file loads (or failed to load).
function bookPage() {
    const book = runtime.books[gameState.bookId];
    if (!book) return { text: '', source: '' };
    const { chapter, page } = bookPosition(book);
    const info = BOOKS.find((entry) => entry.id === gameState.bookId);
    return {
        text: book.chapters[chapter].pages[page],
        source: `${info.title} by ${info.author}, ${book.chapters[chapter].title}`,
    };
}

// The stored position, if it still exists in the book.
function bookPosition(book) {
    const saved = bookProgress[book.id];
    if (saved && book.chapters[saved.chapter]?.pages[saved.page] !== undefined) return saved;
    return { chapter: 0, page: 0 };
}

// On failure the note says so; Restart tries again.
async function loadBook(id) {
    runtime.bookError = '';
    try {
        const response = await fetch(`books/${id}.json`);
        if (!response.ok) throw new Error(response.statusText);
        runtime.books[id] = await response.json();
    } catch {
        runtime.bookError = id;
        updateQuickBar();
        return;
    }
    if (gameState.category === 'books' && gameState.bookId === id && !runtime.isStarted) {
        resetGame();
    }
}

// After a finished page: move on, to the next chapter at its end and back
// to the start after the last page. Returns what the result dialog says.
function advanceBook() {
    const book = runtime.books[gameState.bookId];
    const { chapter, page } = bookPosition(book);
    const pages = book.chapters[chapter].pages.length;
    let next = { chapter, page: page + 1 };
    let note = `${book.chapters[chapter].title}, page ${page + 1} of ${pages} done.`;
    if (next.page === pages) {
        next = { chapter: chapter + 1, page: 0 };
        if (next.chapter === book.chapters.length) {
            next = { chapter: 0, page: 0 };
            note += ' That is the end of the book; the next run starts it again.';
        } else {
            note += ` Next: ${book.chapters[next.chapter].title}.`;
        }
    }
    bookProgress[book.id] = next;
    saveJSON(STORAGE_KEYS.books, bookProgress);
    return note;
}

function validBooks(data) {
    const result = {};
    if (!data || typeof data !== 'object' || Array.isArray(data)) return result;
    for (const book of BOOKS) {
        const saved = data[book.id];
        if (saved && Number.isInteger(saved.chapter) && Number.isInteger(saved.page)) {
            if (saved.chapter >= 0 && saved.page >= 0) {
                result[book.id] = { chapter: saved.chapter, page: saved.page };
            }
        }
    }
    return result;
}

function validLessons(data) {
    const unlocked = data && data.unlocked;
    return {
        unlocked:
            Number.isInteger(unlocked) && unlocked >= 1 && unlocked <= LESSON_STAGES.length
                ? unlocked
                : 1,
    };
}

// Records a lesson run: a pass unlocks the next stage. Returns what the
// result dialog says about it.
function recordLesson(wpm, accuracy) {
    const stage = gameState.lessonStage;
    const passed = accuracy >= LESSON_PASS.accuracy && wpm >= LESSON_PASS.wpm;
    if (!passed) {
        return `Stage ${stage} needs ${LESSON_PASS.accuracy}% accuracy and ${LESSON_PASS.wpm} WPM; this run had ${accuracy}% and ${wpm} WPM.`;
    }
    if (stage === LESSON_STAGES.length) return `Stage ${stage} passed. That is the last stage.`;
    if (stage < lessonProgress.unlocked) return `Stage ${stage} passed.`;
    lessonProgress.unlocked = stage + 1;
    saveJSON(STORAGE_KEYS.lessons, lessonProgress);
    return `Stage ${stage} passed. Stage ${stage + 1}, ${LESSON_STAGES[stage].name}, is unlocked.`;
}

function wordsWithKeys(keys) {
    const matching = COMMON_WORDS.filter((word) => keys.some((key) => word.includes(key)));
    return matching.length >= 10 ? matching : COMMON_WORDS;
}

// Weak digits and symbols are practiced on common words: about every other
// word gets one, wrapped around the word for brackets and quotes, as a
// two-digit number for digits, and after the word otherwise.
const SYMBOL_PAIRS = { '(': ')', '[': ']', '{': '}', '<': '>', '"': '"', "'": "'", '`': '`' };

function withSymbols(text, symbols) {
    const closers = Object.fromEntries(Object.entries(SYMBOL_PAIRS).map(([a, b]) => [b, a]));
    return text
        .split(' ')
        .map((word) => {
            if (runtime.random() >= 0.5) return word;
            const symbol = symbols[Math.floor(runtime.random() * symbols.length)];
            if (/\d/.test(symbol)) return `${symbol}${Math.floor(runtime.random() * 10)}`;
            const open = SYMBOL_PAIRS[symbol] ? symbol : closers[symbol];
            if (open) return `${open}${word}${SYMBOL_PAIRS[open]}`;
            return `${word}${symbol}`;
        })
        .join(' ');
}

// Returns { text, source } for the next passage.
function getPassage() {
    if (gameState.category === 'weak') {
        const count = gameState.mode === 'words' ? gameState.wordCount : COMMON_CHUNK;
        const plain = { punctuation: false, numbers: false };
        const letters = runtime.weakKeys.filter((key) => /^[a-z]$/.test(key));
        const symbols = runtime.weakKeys.filter((key) => !/^[a-z]$/.test(key));
        const text = commonWords(count, wordsWithKeys(letters), plain);
        return { text: symbols.length ? withSymbols(text, symbols) : text, source: '' };
    }
    if (gameState.category === 'lessons') {
        const count = gameState.mode === 'words' ? gameState.wordCount : COMMON_CHUNK;
        return { text: lessonText(count), source: '' };
    }
    if (gameState.category === 'books') return bookPage();
    if (gameState.category === 'code') {
        const snippets = codeSnippets();
        if (gameState.mode !== 'words') return { text: pickQuote(snippets).join('\n'), source: '' };
        // Words mode uses whole snippets until there are at least that many words.
        const parts = [];
        let words = 0;
        while (words < gameState.wordCount) {
            const snippet = pickQuote(snippets).join('\n');
            parts.push(snippet);
            words += snippet.split(/\s+/).filter(Boolean).length;
        }
        return { text: parts.join('\n'), source: '' };
    }
    const custom = gameState.customText;
    if (gameState.category === 'custom' && custom) {
        if (gameState.mode !== 'words') return { text: custom, source: '' };
        // Words mode repeats the text from the start until there are enough words.
        const words = [];
        while (words.length < gameState.wordCount) words.push(...custom.split(' '));
        return { text: words.slice(0, gameState.wordCount).join(' '), source: '' };
    }
    if (passageCategory() === 'common') {
        const count = gameState.mode === 'words' ? gameState.wordCount : COMMON_CHUNK;
        return { text: commonWords(count), source: '' };
    }
    const categoryQuotes = QUOTES[gameState.category];
    if (gameState.mode === 'words') {
        const words = [];
        while (words.length < gameState.wordCount) {
            words.push(...pickQuote(categoryQuotes).text.split(' '));
        }
        return { text: words.slice(0, gameState.wordCount).join(' '), source: '' };
    }
    return pickQuote(categoryQuotes);
}

// textHash of the first passage a seed gives under the current settings.
// Bests and challenge links store it, so a replay can tell when a change to
// texts.js has changed the passages a seed gives.
function firstPassageHash(seed, weakKeys) {
    const saved = { random: runtime.random, weakKeys: runtime.weakKeys, lastQuoteIndex };
    runtime.random = seededRandom(seed);
    runtime.weakKeys = weakKeys;
    lastQuoteIndex = -1;
    const hash = textHash(getPassage().text);
    runtime.random = saved.random;
    runtime.weakKeys = saved.weakKeys;
    lastQuoteIndex = saved.lastQuoteIndex;
    return hash;
}

function renderNewQuote() {
    const passage = getPassage();
    runtime.quoteText = passage.text;
    runtime.replay.passages.push(passage.text);
    runtime.quoteSource = passage.source;
    quoteDisplayElement.textContent = '';
    quoteTextElement.textContent = runtime.quoteText;

    const challengeGhost = runtime.challenge && !runtime.challenge.daily;
    if (gameState.isGhostEnabled || challengeGhost || paceSpeed()) {
        const ghostCursor = document.createElement('div');
        ghostCursor.id = 'ghost-cursor';
        ghostCursor.className = 'ghost-cursor';
        quoteDisplayElement.appendChild(ghostCursor);
    }

    // One span per character, grouped by word: each word and the space after
    // it go in a .word element, which the browser paints separately, so a
    // keystroke repaints one word instead of the whole passage. A new line
    // stays outside the words so it breaks the passage's line.
    const fragment = document.createDocumentFragment();
    let word = [];
    const addWord = () => {
        if (word.length === 0) return;
        // A word that may not fit on a phone's line is left ungrouped, so it
        // can still break mid-word like plain text.
        let parent = fragment;
        if (word.length <= WORD_GROUP_MAX) {
            parent = document.createElement('div');
            parent.className = 'word';
            fragment.appendChild(parent);
        }
        word.forEach((span) => parent.appendChild(span));
        word = [];
    };
    for (const character of runtime.quoteText) {
        const span = document.createElement('span');
        if (character === '\n') {
            addWord();
            // Shown as a return arrow, then breaks the line.
            span.textContent = '\u21b5\n';
            span.className = 'newline';
            fragment.appendChild(span);
            continue;
        }
        span.textContent = character;
        word.push(span);
        if (character === ' ') addWord();
    }
    addWord();
    quoteDisplayElement.appendChild(fragment);

    const firstSpan = quoteDisplayElement.querySelector('span');
    if (firstSpan) firstSpan.classList.add('current');
    // A new passage mid-run: show where the ghost is relative to it.
    if (runtime.isStarted && runtime.ghostTimeouts.length > 0) placeGhostCursor();

    typingInputElement.value = '';
    typingInputElement.maxLength = runtime.quoteText.length;
    runtime.previousValue = '';

    // Positions of leading spaces after a new line, which Skip indentation
    // fills in for code.
    runtime.indent = [];
    if (gameState.category === 'code' && gameState.isAutoIndent) {
        let lineStart = true;
        for (const character of runtime.quoteText) {
            lineStart = character === '\n' ? true : lineStart && character === ' ';
            runtime.indent.push(lineStart && character === ' ');
        }
    }
}

// --- Core Logic ---
// Accents a dead key shows as composition text before the letter replaces
// them: acute, grave, circumflex, diaeresis, tilde, and caron.
const DEAD_KEY_ACCENT = /^[\u00b4`^\u00a8~\u02c6\u02dc\u02c7]$/;

function handleInput(e) {
    if (isModalOpen(settingsModal) || isModalOpen(customModal) || isModalOpen(codeModal)) return;
    if (!runtime.isStarted) startGame();

    // The interval checks the clock only every 250 ms. Input that arrives
    // after the deadline ends the run instead of counting toward it.
    if (isTimed() && elapsedMs() >= gameState.duration * 1000) {
        endGame(runtime.startTime + gameState.duration * 1000);
        return;
    }

    let typed = typingInputElement.value;
    const quote = runtime.quoteText;
    const spans = quoteDisplayElement.querySelectorAll('span');

    // Count keystrokes and mistakes for the characters past the part of the
    // value that did not change. Diffing against the previous value, instead
    // of trusting e.data, also handles on-screen keyboards that resend the
    // whole word being composed or replace it after autocorrect.
    const previous = runtime.previousValue;
    let unchanged = 0;
    while (
        unchanged < previous.length &&
        unchanged < typed.length &&
        previous[unchanged] === typed[unchanged]
    ) {
        unchanged++;
    }
    const inserted = typed.slice(unchanged);
    // A dead key (Option+E on a Mac, for example) first inserts its accent as
    // composition text, which the accented letter then replaces. The accent
    // is not a keystroke: wait for the letter.
    if (e && e.isComposing && unchanged === previous.length && DEAD_KEY_ACCENT.test(inserted)) {
        return;
    }
    if (inserted.length > 0) {
        const slot = Math.floor(elapsedMs() / (GRID_SECONDS * 1000));
        runtime.grid[slot] = runtime.grid[slot] || { typed: 0, wrong: 0 };
        let wrong = 0;
        let firstWrong = -1;
        for (let k = 0; k < inserted.length; k++) {
            const pos = unchanged + k;
            if (pos >= quote.length) continue;
            runtime.keystrokes++;
            runtime.grid[slot].typed++;
            const expected = quote[pos];
            const stat = runtime.keyStats[expected] || { attempts: 0, misses: 0 };
            runtime.keyStats[expected] = stat;
            stat.attempts++;
            if (inserted[k] !== expected) {
                stat.misses++;
                runtime.grid[slot].wrong++;
                wrong++;
                if (firstWrong === -1) firstWrong = pos;
            }
        }
        if (wrong > 0) {
            runtime.mistakes += wrong;
            mistakesElement.textContent = runtime.mistakes;
            playSound('error');
        } else {
            playSound('click');
        }
        // Stop on error: the mistake is counted, but the caret stays put
        // until the right key is pressed.
        if (gameState.isStopOnError && firstWrong !== -1) {
            typed = typed.slice(0, firstWrong);
            typingInputElement.value = typed;
        }
    }
    // Skip indentation: after a correct new line in code, fill in the next
    // line's leading spaces. Setting the value does not fire an input event,
    // so they are not keystrokes.
    const atNewLine =
        typed.length > 0 && typed[typed.length - 1] === '\n' && quote[typed.length - 1] === '\n';
    if (inserted.length > 0 && atNewLine && runtime.indent[typed.length]) {
        let end = typed.length;
        while (runtime.indent[end]) end++;
        typed += quote.slice(typed.length, end);
        typingInputElement.value = typed;
    }
    runtime.previousValue = typed;

    runtime.replay.events.push({
        t: Math.round(performance.now() - runtime.startTime),
        p: runtime.replay.passages.length - 1,
        value: typed,
    });
    runtime.ghostStrokes.push({
        t: Math.round(performance.now() - runtime.startTime),
        i: runtime.quoteBase + typed.length,
    });

    // Filled-in indentation shows as typed but counts toward neither WPM
    // nor accuracy.
    let correctCount = 0;
    let filled = 0;
    for (let index = 0; index < typed.length; index++) {
        if (typed[index] !== quote[index]) continue;
        if (runtime.indent[index]) filled++;
        else correctCount++;
    }

    // Only spans from the first changed character to the end of the longer
    // of the old and new values can change state. Restyling just those keeps
    // each keystroke from restyling the whole passage.
    const last = Math.min(Math.max(previous.length, typed.length), spans.length - 1);
    for (let index = Math.min(unchanged, typed.length); index <= last; index++) {
        const span = spans[index];
        const isTyped = index < typed.length;
        span.classList.toggle('correct', isTyped && typed[index] === quote[index]);
        span.classList.toggle('incorrect', isTyped && typed[index] !== quote[index]);
        span.classList.toggle('current', index === typed.length);
    }
    // Reading the caret's position costs a layout per keystroke, so only
    // touch screens, where an on-screen keyboard can cover it, pay for it.
    if (coarsePointer.matches) keepCurrentInView();

    updateGhostStatus();

    const countedTyped = typed.length - filled;
    runtime.correctChars = runtime.baseCorrect + correctCount;
    runtime.typedChars = runtime.baseTyped + countedTyped;
    updateMetrics();

    if (typed.length === quote.length) {
        if (isTimed()) {
            // Keep going until the clock runs out.
            runtime.baseCorrect += correctCount;
            runtime.baseTyped += countedTyped;
            runtime.quoteBase += quote.length;
            renderNewQuote();
        } else {
            endGame();
        }
    }
}

// An on-screen keyboard shrinks the visual viewport but not the page, so
// the line being typed can end up behind it. Scroll the page until the
// current character is inside the visible part, with a line of margin.
const coarsePointer = window.matchMedia('(pointer: coarse)');

function keepCurrentInView() {
    const viewport = window.visualViewport;
    const current = quoteDisplayElement.querySelector('.current');
    if (!viewport || !current) return;
    const rect = current.getBoundingClientRect();
    const margin = rect.height;
    const top = viewport.offsetTop + margin;
    const bottom = viewport.offsetTop + viewport.height - margin;
    if (rect.bottom > bottom) window.scrollBy(0, rect.bottom - bottom);
    else if (rect.top < top) window.scrollBy(0, rect.top - top);
}

function elapsedMs() {
    const end = runtime.endTime || performance.now();
    return end - runtime.startTime;
}

function startGame() {
    runtime.isStarted = true;
    runtime.startTime = performance.now();
    runtime.endTime = 0;
    containerElement.classList.add('focus-mode');

    runtime.timer = isTimed() ? gameState.duration : 0;
    timerElement.textContent = runtime.timer;
    runtime.interval = setInterval(tick, 250);

    const best = currentBest();
    // A ghost recorded on other text would not match this passage.
    if (runtime.challenge) {
        runtime.challenge.used = true;
        if (!runtime.textChanged) startGhostPlayback(runtime.challenge.strokes);
    } else if (gameState.isGhostEnabled && best && !runtime.textChanged) {
        startGhostPlayback(bestStrokes(best));
    } else if (paceSpeed()) {
        startGhostPlayback(paceStrokes(paceSpeed()));
    }
    updateGhostStatus();
}

function tick() {
    const elapsedSeconds = Math.floor(elapsedMs() / 1000);
    if (isTimed()) {
        runtime.timer = Math.max(0, gameState.duration - elapsedSeconds);
        setText(timerElement, runtime.timer);
        if (elapsedMs() >= gameState.duration * 1000) {
            endGame(runtime.startTime + gameState.duration * 1000);
            return;
        }
    } else {
        runtime.timer = elapsedSeconds;
        setText(timerElement, runtime.timer);
    }
    updateMetrics();
}

function startGhostPlayback(strokes) {
    if (!document.getElementById('ghost-cursor')) return;
    runtime.ghostTimeouts = strokes.map((stroke) =>
        setTimeout(() => {
            if (!runtime.isStarted) return;
            // Look everything up live: the quote (and its spans) may have
            // been replaced since playback started.
            runtime.ghostIndex = stroke.i;
            updateGhostStatus();
            placeGhostCursor();
        }, stroke.t)
    );
}

// Puts the ghost cursor on the character the ghost has reached. In Time
// mode the ghost can be on a later or earlier passage; then the cursor
// waits at the end or start of this one, with an arrow pointing the way.
function placeGhostCursor() {
    const cursor = document.getElementById('ghost-cursor');
    const spans = quoteDisplayElement.querySelectorAll('span');
    if (!cursor || spans.length === 0) return;
    const index = runtime.ghostIndex - runtime.quoteBase;
    const ahead = index >= spans.length;
    const behind = index < 0;
    const span = spans[Math.min(Math.max(index, 0), spans.length - 1)];
    // offsetLeft/Top are layout coordinates, so the focus-mode scale does not
    // shift them. A span inside a .word is measured from the word, so the
    // word's offset is added.
    let left = span.offsetLeft + (ahead ? span.offsetWidth : 0);
    let top = span.offsetTop;
    if (span.offsetParent !== quoteDisplayElement) {
        left += span.offsetParent.offsetLeft;
        top += span.offsetParent.offsetTop;
    }
    cursor.style.transform = `translate(${left}px, ${top}px)`;
    cursor.style.opacity = 1;
    cursor.classList.toggle('ahead', ahead);
    cursor.classList.toggle('behind', behind);
}

// Before a run: what the ghost is. During a run: how far ahead or behind
// the ghost you are, in characters.
function updateGhostStatus() {
    const challenge = runtime.challenge;
    if (challenge && challenge.daily) {
        updateDailyStatus();
        return;
    }
    if (!gameState.isGhostEnabled && !challenge) {
        updatePaceStatus();
        return;
    }
    ghostStatus.classList.remove('hidden');
    if (runtime.textChanged) {
        ghostStatus.textContent = challenge
            ? 'This challenge was recorded on a different version of the text, so there is no ghost or winner.'
            : 'Your best for these settings was recorded on a different version of the text. Set a new best to race a ghost.';
        return;
    }
    const best = challenge || currentBest();
    if (challenge && !runtime.isStarted) {
        ghostStatus.textContent = `Challenge: beat ${challenge.wpm} WPM on this text`;
        return;
    }
    if (!best) {
        ghostStatus.textContent = 'No ghost yet for these settings: finish a run to record one.';
        return;
    }
    if (!runtime.isStarted) {
        ghostStatus.textContent = `Racing your best: ${best.wpm} WPM`;
        return;
    }
    showRaceDelta('ghost');
}

// How far ahead of or behind the ghost or pace caret you are, in characters.
function showRaceDelta(name) {
    const delta = runtime.quoteBase + typingInputElement.value.length - runtime.ghostIndex;
    if (delta === 0) setText(ghostStatus, `Level with the ${name}`);
    else setText(ghostStatus, `${delta > 0 ? '+' : ''}${delta} chars vs ${name}`);
}

// --- Pace caret ---
// The pace caret is the ghost cursor fed with strokes at a steady speed.
// Returns that speed in WPM, or 0 when there is no pace caret: Ghost Mode
// and challenges take its place, and Average and Last need a recorded run
// at these settings.
function paceSpeed() {
    if (gameState.pace === 'off' || gameState.isGhostEnabled || runtime.challenge) return 0;
    if (gameState.pace === 'target') return gameState.paceWpm;
    const runs = runHistory.filter((h) => h.key === settingsKey());
    if (runs.length === 0) return 0;
    if (gameState.pace === 'last') return runs[0].wpm;
    const recent = runs.slice(0, CHART_POINTS);
    return Math.round(recent.reduce((sum, h) => sum + h.wpm, 0) / recent.length);
}

// At five characters a word, character i is reached at i * 12000 / wpm ms.
// Time mode covers the whole duration, Words mode the passage.
function paceStrokes(wpm) {
    const count = isTimed()
        ? Math.ceil((gameState.duration * wpm * 5) / 60)
        : runtime.quoteText.length;
    return Array.from({ length: count }, (_, n) => ({ t: ((n + 1) * 12000) / wpm, i: n + 1 }));
}

function updatePaceStatus() {
    if (gameState.pace === 'off') {
        ghostStatus.classList.add('hidden');
        return;
    }
    ghostStatus.classList.remove('hidden');
    if (runtime.isStarted && runtime.ghostTimeouts.length > 0) {
        showRaceDelta('pace');
        return;
    }
    const wpm = paceSpeed();
    if (!wpm) {
        ghostStatus.textContent = 'No runs at these settings yet, so there is no pace caret.';
        return;
    }
    const labels = {
        target: `${wpm} WPM`,
        average: `your average, ${wpm} WPM`,
        last: `your last run, ${wpm} WPM`,
    };
    ghostStatus.textContent = `Pace: ${labels[gameState.pace]}`;
}

function stopGhostPlayback() {
    runtime.ghostTimeouts.forEach(clearTimeout);
    runtime.ghostTimeouts = [];
}

// Setting textContent replaces the text node and invalidates layout even
// when the value is unchanged, so values written every keystroke or tick go
// through here.
function setText(element, value) {
    const text = String(value);
    if (element.textContent !== text) element.textContent = text;
}

function updateMetrics() {
    const elapsed = elapsedMs();
    const wpm = elapsed >= 1000 ? Math.round(runtime.correctChars / 5 / (elapsed / 60000)) : 0;
    const accuracy =
        runtime.keystrokes > 0
            ? Math.floor(((runtime.keystrokes - runtime.mistakes) / runtime.keystrokes) * 100)
            : 100;
    setText(wpmElement, wpm);
    setText(accuracyElement, accuracy);
    return { wpm, accuracy };
}

function endGame(endTime = performance.now()) {
    if (!runtime.isStarted) return;
    runtime.isStarted = false;
    runtime.endTime = endTime;
    clearInterval(runtime.interval);
    stopGhostPlayback();
    typingInputElement.disabled = true;
    containerElement.classList.remove('focus-mode');

    const { wpm, accuracy } = updateMetrics();
    const previousBest = currentBest();
    let isNewBest = false;
    let progress = '';
    // A finished page moves the book on, however long it took.
    if (gameState.category === 'books') progress = advanceBook();

    // Runs under a second have no meaningful WPM. Show them, but do not record them.
    if (elapsedMs() >= 1000) {
        const key = settingsKey();
        runHistory.unshift({
            wpm,
            accuracy,
            date: new Date().toISOString(),
            mode: isTimed() ? 'time' : 'words',
            key,
        });
        runHistory.length = Math.min(runHistory.length, HISTORY_LIMIT);
        saveJSON(STORAGE_KEYS.history, runHistory);

        for (const [key, stat] of Object.entries(runtime.keyStats)) {
            const total = keyStats[statKey(key)] || { attempts: 0, misses: 0 };
            keyStats[statKey(key)] = {
                attempts: total.attempts + stat.attempts,
                misses: total.misses + stat.misses,
            };
        }
        saveJSON(STORAGE_KEYS.keyStats, keyStats);

        if (gameState.category === 'lessons') progress = recordLesson(wpm, accuracy);

        // Only the first daily run of the day is the day's result.
        const daily = runtime.challenge && runtime.challenge.daily;
        if (daily && !dailyResults[daily]) {
            dailyResults[daily] = { wpm, accuracy, grid: dailyGrid() };
            for (const day of Object.keys(dailyResults)) {
                if (Number(day) <= daily - DAILY_LIMIT) delete dailyResults[day];
            }
            saveJSON(STORAGE_KEYS.daily, dailyResults);
            runtime.challenge.recorded = true;
        }

        // Each page is new text, so books keep no best to race.
        if (gameState.category !== 'books' && wpm > (previousBest ? previousBest.wpm : 0)) {
            bests[key] = {
                wpm,
                keystrokes: encodeStrokes(runtime.ghostStrokes),
                seed: runtime.seed,
                textHash: runtime.passageHash,
            };
            if (gameState.category === 'weak') bests[key].weakKeys = runtime.weakKeys;
            saveJSON(STORAGE_KEYS.bests, bests);
            isNewBest = true;
        }
    }

    playSound('success');
    updateHighScoreDisplay();
    renderChart();
    renderRunChart();
    updateQuickBar();
    showResultModal(wpm, accuracy, { isNewBest, previousBest, progress });
}

function renderChart() {
    const key = settingsKey();
    const data = runHistory
        .filter((h) => h.key === key)
        .slice(0, CHART_POINTS)
        .map((h) => h.wpm)
        .reverse(); // oldest to newest
    // Two points only draw a line between them, so the chart waits for three.
    chartContainer.classList.toggle('hidden', data.length < 3);
    if (data.length < 3) return;

    drawLineChart(progressChart, data, true, ['oldest', 'latest']);
    progressChartTitle.textContent = `WPM, last ${data.length} runs`;
}

// Draws numbers as a polyline in a 300x100 viewBox, and writes the lowest
// and highest value and the two ends of the x axis into the labels around
// it. Only numbers reach innerHTML.
function drawLineChart(svg, data, withDots, [xStart, xEnd]) {
    const width = 300;
    const height = 100;
    const pad = 6;
    const max = Math.max(...data);
    const min = Math.min(...data);
    const range = max - min || 1;
    const x = (i) => pad + (i / (data.length - 1)) * (width - 2 * pad);
    const y = (v) => pad + (1 - (v - min) / range) * (height - 2 * pad);

    const points = data.map((v, i) => `${x(i)},${y(v)}`).join(' ');
    const circles = withDots
        ? data.map((v, i) => `<circle cx="${x(i)}" cy="${y(v)}" r="3" />`).join('')
        : '';
    svg.innerHTML = `<polyline points="${points}" />${circles}`;

    const plot = svg.parentElement;
    plot.querySelector('.chart-y-max').textContent = max;
    plot.querySelector('.chart-y-min').textContent = min === max ? '' : min;
    plot.querySelector('.chart-x-start').textContent = xStart;
    plot.querySelector('.chart-x-end').textContent = xEnd;
}

// WPM at the end of each whole second, from the recorded input events.
// Counts every typed character, right or wrong.
function wpmBySecond() {
    const seconds = Math.floor(elapsedMs() / 1000);
    const strokes = runtime.ghostStrokes;
    const points = [];
    let k = 0;
    let index = 0;
    for (let s = 1; s <= seconds; s++) {
        while (k < strokes.length && strokes[k].t <= s * 1000) {
            index = strokes[k].i;
            k++;
        }
        points.push(Math.round(index / 5 / (s / 60)));
    }
    return points;
}

function renderRunChart() {
    const data = wpmBySecond();
    runChartContainer.classList.toggle('hidden', data.length < 2);
    if (data.length < 2) return;
    drawLineChart(runChart, data, false, ['1s', `${data.length}s`]);
}

// The run whose passages the next run replays: an open challenge, or with
// Ghost Mode on, the best for these settings if it recorded its seed and
// was recorded on the same text. Otherwise runs start from a new seed.
function replayedRun() {
    const best = currentBest();
    if (runtime.challenge) return runtime.challenge;
    if (runtime.textChanged) return null;
    return gameState.isGhostEnabled && best && Number.isInteger(best.seed) ? best : null;
}

const replayedWeakKeys = (replay) =>
    replay && Array.isArray(replay.weakKeys) ? replay.weakKeys : weakestKeys();

// A replayed run with a stored hash that its seed no longer reproduces was
// recorded before a change to texts.js. Runs without a hash are not checked.
function textChangedSince(replay) {
    if (!replay || typeof replay.textHash !== 'string') return false;
    return replay.textHash !== firstPassageHash(replay.seed, replayedWeakKeys(replay));
}

function resetGame() {
    if (runtime.challenge && runtime.challenge.used) endChallenge();
    clearInterval(runtime.interval);
    stopGhostPlayback();
    stopReplay();
    Object.assign(runtime, {
        isStarted: false,
        startTime: 0,
        endTime: 0,
        interval: null,
        quoteBase: 0,
        baseCorrect: 0,
        baseTyped: 0,
        correctChars: 0,
        typedChars: 0,
        keystrokes: 0,
        mistakes: 0,
        ghostStrokes: [],
        keyStats: {},
        ghostIndex: 0,
        challengeUrl: '',
        textChanged: false,
        grid: [],
        replay: { passages: [], events: [] },
        playback: null,
        cardFile: null,
    });

    // A challenge on changed text is still played, without a ghost or
    // winner. A best on changed text is not replayed.
    runtime.textChanged = textChangedSince(replayedRun());
    const replay = replayedRun();
    runtime.seed = replay ? replay.seed : newSeed();
    runtime.random = seededRandom(runtime.seed);
    runtime.weakKeys = replayedWeakKeys(replay);
    lastQuoteIndex = -1;

    runtime.timer = isTimed() ? gameState.duration : 0;
    timerElement.textContent = runtime.timer;
    wpmElement.textContent = 0;
    accuracyElement.textContent = 100;
    mistakesElement.textContent = 0;

    containerElement.classList.remove('focus-mode');
    typingInputElement.disabled = false;
    resultModal.classList.remove('show');
    settingsModal.classList.remove('show');
    statsModal.classList.remove('show');
    customModal.classList.remove('show');
    codeModal.classList.remove('show');
    replayModal.classList.remove('show');

    updateQuickBar();
    updateHighScoreDisplay();
    const book = gameState.category === 'books' && runtime.books[gameState.bookId];
    if (gameState.category === 'books' && !book) loadBook(gameState.bookId);
    renderNewQuote();
    // Nothing to type until the book has loaded.
    if (gameState.category === 'books' && !book) typingInputElement.disabled = true;
    runtime.passageHash = textHash(runtime.quoteText);
    updateGhostStatus();
    typingInputElement.focus();
}

// The mode and length pills and the category options on the main screen
// mirror gameState. Each category option is shown only where it applies.
function updateQuickBar() {
    setActivePill(quickMode, gameState.mode);
    setActivePill(quickDuration, String(gameState.duration));
    setActivePill(quickWordCount, String(gameState.wordCount));
    // A Books run is a page, so mode and length do not apply.
    const books = gameState.category === 'books';
    quickMode.classList.toggle('hidden', books);
    quickDuration.classList.toggle('hidden', books || gameState.mode !== 'time');
    quickWordCount.classList.toggle('hidden', books || gameState.mode !== 'words');
    bookSelect.classList.toggle('hidden', !books);
    bookSelect.value = gameState.bookId;
    ghostBadge.classList.toggle('hidden', !gameState.isGhostEnabled);
    codeLanguageSelect.classList.toggle('hidden', gameState.category !== 'code');
    lessonSelect.classList.toggle('hidden', gameState.category !== 'lessons');
    // Locked stages stay in the menu, disabled, so the path is visible.
    [...lessonSelect.options].forEach((option, n) => {
        option.disabled = n + 1 > lessonProgress.unlocked && n + 1 !== gameState.lessonStage;
    });
    lessonSelect.value = String(gameState.lessonStage);
    autoIndentOption.classList.toggle('hidden', gameState.category !== 'code');
    punctuationOption.classList.toggle('hidden', gameState.category !== 'common');
    numbersOption.classList.toggle('hidden', gameState.category !== 'common');
    wordLanguageSelect.classList.toggle('hidden', gameState.category !== 'common');
    editCustomBtn.classList.toggle('hidden', gameState.category !== 'custom');
    editCodeBtn.classList.toggle(
        'hidden',
        gameState.category !== 'code' || gameState.codeLanguage !== OWN_CODE
    );
    dailyBtn.setAttribute('aria-pressed', String(Boolean(runtime.challenge?.daily)));

    const weak = runtime.weakKeys;
    const noCustomText = gameState.category === 'custom' && !gameState.customText;
    const noOwnCode =
        gameState.category === 'code' && gameState.codeLanguage === OWN_CODE && !gameState.ownCode;
    const lessons = gameState.category === 'lessons';
    practiceNote.classList.toggle(
        'hidden',
        gameState.category !== 'weak' && !noCustomText && !noOwnCode && !lessons && !books
    );
    if (books) {
        const book = runtime.books[gameState.bookId];
        if (runtime.bookError === gameState.bookId) {
            practiceNote.textContent =
                'Could not load this book. Check the connection and press Restart.';
        } else if (!book) {
            practiceNote.textContent = 'Loading the book.';
        } else {
            const { chapter, page } = bookPosition(book);
            const pages = book.chapters[chapter].pages.length;
            practiceNote.textContent = `${book.chapters[chapter].title}, page ${page + 1} of ${pages}`;
        }
    } else if (lessons) {
        practiceNote.textContent = `Pass: ${LESSON_PASS.accuracy}% accuracy, ${LESSON_PASS.wpm} WPM`;
    } else if (noOwnCode) {
        practiceNote.textContent =
            'No code yet. Add it with Edit code; using JavaScript snippets until then.';
    } else if (noCustomText) {
        practiceNote.textContent =
            'No custom text yet. Add it with Edit text; using common words until then.';
    } else if (!weak.length) {
        practiceNote.textContent = 'Not enough mistakes recorded yet. Using all common words.';
    } else {
        // A replayed run keeps the letters it was typed with.
        const replay = replayedRun();
        let label = 'Practicing';
        if (replay && Array.isArray(replay.weakKeys)) {
            label = runtime.challenge
                ? "Practicing the challenge's letters"
                : "Practicing your best run's letters";
        }
        practiceNote.textContent = `${label}: ${weak.join(', ')}`;
    }
}

function updateHighScoreDisplay() {
    const best = currentBest();
    highScoreElement.textContent = best ? best.wpm : 0;
}

// Focus an element inside a dialog that was shown in this same tick. If the
// browser refuses because the dialog has not rendered yet, retry next frame.
function focusInDialog(element) {
    element.focus();
    if (document.activeElement !== element) {
        requestAnimationFrame(() => element.focus());
    }
}

function showResultModal(wpm, accuracy, { isNewBest, previousBest, progress = '' }) {
    const elapsed = elapsedMs();
    const raw = elapsed >= 1000 ? Math.round(runtime.typedChars / 5 / (elapsed / 60000)) : 0;
    const wrong = runtime.typedChars - runtime.correctChars;
    resultTitle.textContent = settingsLabel(' · ');
    modalWpmElement.textContent = wpm;
    modalAccuracyElement.textContent = `${accuracy}%`;
    modalRawElement.textContent = raw;
    modalCharsElement.textContent = `${runtime.correctChars} / ${wrong}`;
    modalTimeElement.textContent = `${(elapsed / 1000).toFixed(1)}s`;
    if (isNewBest) {
        modalBestElement.textContent = previousBest
            ? `New best for these settings. Previous best: ${previousBest.wpm} WPM.`
            : 'First recorded run for these settings.';
    } else if (elapsed < 1000) {
        modalBestElement.textContent = 'Runs under one second are not recorded.';
    } else if (!previousBest) {
        modalBestElement.textContent = 'No recorded best for these settings yet.';
    } else {
        modalBestElement.textContent = `Best for these settings: ${previousBest.wpm} WPM.`;
    }
    modalBestElement.classList.toggle('new-best', isNewBest && Boolean(previousBest));

    const missed = Object.entries(runtime.keyStats)
        .filter(([, stat]) => stat.misses > 0)
        .sort(([, a], [, b]) => b.misses - a.misses || a.attempts - b.attempts)
        .slice(0, 3)
        .map(
            ([key, stat]) => `${key === ' ' ? 'space' : key} (${stat.misses} of ${stat.attempts})`
        );
    modalKeysElement.textContent = missed.length
        ? `Most missed keys: ${missed.join(', ')}`
        : 'No missed keys.';
    practiceBtn.classList.toggle('hidden', weakestKeys().length === 0);
    replayBtn.classList.toggle('hidden', runtime.replay.events.length === 0);
    // A custom text stays on this device, so it cannot be sent as a challenge.
    const canChallenge = elapsed >= 1000 && !isLocalText();
    challengeBtn.classList.toggle('hidden', !canChallenge);
    challengeBtn.textContent = 'Copy challenge link';
    challengeLinkRow.classList.add('hidden');
    if (canChallenge) prepareChallengeUrl();
    saveImageBtn.textContent = 'Save image';
    prepareResultCard();

    const challenge = runtime.challenge;
    modalChallengeElement.classList.toggle('hidden', !challenge);
    if (challenge && challenge.daily) {
        const result = dailyResults[challenge.daily];
        if (challenge.recorded) {
            modalChallengeElement.textContent = `Daily #${challenge.daily} recorded: ${result.grid}`;
        } else if (result) {
            modalChallengeElement.textContent = `Daily #${challenge.daily} was already played today at ${result.wpm} WPM, so this run was practice.`;
        } else {
            modalChallengeElement.textContent = `Daily #${challenge.daily} not recorded: runs under one second are not recorded.`;
        }
    } else if (challenge) {
        const verdict =
            wpm > challenge.wpm ? 'You won.' : wpm === challenge.wpm ? 'A tie.' : 'They won.';
        const outcome = runtime.textChanged
            ? 'Recorded on a different version of the text: no winner.'
            : verdict;
        modalChallengeElement.textContent = `Challenge: you ${wpm} WPM, them ${challenge.wpm} WPM. ${outcome}`;
    }
    modalProgressElement.textContent = progress;
    modalProgressElement.classList.toggle('hidden', !progress);
    modalSourceElement.textContent = runtime.quoteSource;
    modalSourceElement.classList.toggle('hidden', !runtime.quoteSource);
    resultModal.classList.add('show');
    updateFocusHint();
    focusInDialog(playAgainBtn);
}

// --- Replay ---
// Plays the finished run back in its own dialog from the input value
// recorded after every input event, so wrong characters, corrections, and
// pauses show at the times they happened.
const REPLAY_STEP = 50; // ms between redraws

function openReplay() {
    resultModal.classList.remove('show');
    replayModal.classList.add('show');
    setActivePill(replaySpeed, '1');
    // The dialog may still show an earlier run's passage.
    delete replayDisplay.dataset.passage;
    runtime.playback = { interval: null, position: 0, last: 0, speed: 1, shown: null };
    playReplay();
    focusInDialog(replayPauseBtn);
}

function closeReplay() {
    stopReplay();
    replayModal.classList.remove('show');
    resultModal.classList.add('show');
    focusInDialog(replayBtn);
}

function stopReplay() {
    if (runtime.playback) clearInterval(runtime.playback.interval);
}

function playReplay() {
    const playback = runtime.playback;
    const events = runtime.replay.events;
    // Played to the end: start over.
    if (playback.position > events[events.length - 1].t) {
        playback.position = 0;
        playback.shown = null;
    }
    playback.last = performance.now();
    playback.interval = setInterval(stepReplay, REPLAY_STEP);
    replayPauseBtn.textContent = 'Pause';
    drawReplay();
}

function toggleReplayPause() {
    const playback = runtime.playback;
    if (playback.interval) {
        clearInterval(playback.interval);
        playback.interval = null;
        replayPauseBtn.textContent = 'Resume';
    } else {
        playReplay();
    }
}

function stepReplay() {
    const playback = runtime.playback;
    const now = performance.now();
    playback.position += (now - playback.last) * playback.speed;
    playback.last = now;
    const events = runtime.replay.events;
    if (playback.position > events[events.length - 1].t) {
        clearInterval(playback.interval);
        playback.interval = null;
        replayPauseBtn.textContent = 'Play again';
    }
    drawReplay();
}

// Shows the last event at or before the playback position.
function drawReplay() {
    const playback = runtime.playback;
    const { passages, events } = runtime.replay;
    setText(replayClock, (Math.min(playback.position, elapsedMs()) / 1000).toFixed(1));
    let index = -1;
    while (index + 1 < events.length && events[index + 1].t <= playback.position) index++;
    const event = events[index] || { p: 0, value: '' };
    const quote = passages[event.p];
    if (replayDisplay.dataset.passage !== String(event.p)) {
        playback.shown = null;
        replayDisplay.textContent = '';
        for (const character of quote) {
            const span = document.createElement('span');
            span.textContent = character === '\n' ? '\u21b5\n' : character;
            if (character === '\n') span.className = 'newline';
            replayDisplay.appendChild(span);
        }
        replayDisplay.dataset.passage = event.p;
    }
    if (index === playback.shown) return;
    playback.shown = index;
    replayDisplay.querySelectorAll('span').forEach((span, n) => {
        const isTyped = n < event.value.length;
        span.classList.toggle('correct', isTyped && event.value[n] === quote[n]);
        span.classList.toggle('incorrect', isTyped && event.value[n] !== quote[n]);
        span.classList.toggle('current', n === event.value.length);
    });
}

function handleReplaySpeedClick(e) {
    const pill = e.target.closest('.pill');
    if (!pill || !runtime.playback) return;
    runtime.playback.speed = Number(pill.dataset.value);
    setActivePill(replaySpeed, pill.dataset.value);
}

// --- Sharing ---
const SITE_URL = 'https://tmhsdigital.github.io/Typing-Game/';

function settingsLabel(separator = ' ') {
    if (gameState.category === 'books') {
        return BOOKS.find((book) => book.id === gameState.bookId).title;
    }
    const length =
        gameState.mode === 'time' ? `${gameState.duration}s` : `${gameState.wordCount} words`;
    let category = categorySelect.selectedOptions[0]?.textContent || gameState.category;
    if (gameState.category === 'lessons') category += `, stage ${gameState.lessonStage}`;
    return `${length}${separator}${category}`;
}

// A daily shares the day's recorded result, even after a practice run.
function shareContent() {
    const daily = runtime.challenge && runtime.challenge.daily;
    const result = daily && dailyResults[daily];
    if (result) {
        return {
            text: `TypeSpeed Daily #${daily}: ${result.wpm} WPM, ${result.accuracy}%\n${result.grid}`,
            url: `${SITE_URL}#daily`,
            separator: '\n',
        };
    }
    return {
        text: `${modalWpmElement.textContent} WPM, ${modalAccuracyElement.textContent} accuracy, ${settingsLabel()} on TypeSpeed`,
        url: SITE_URL,
        separator: ' ',
    };
}

// Phones get the system share sheet. Desktops, where navigator.share opens
// an OS dialog people do not expect, copy to the clipboard.
async function shareResult() {
    const { text, url, separator } = shareContent();
    const touch = window.matchMedia('(pointer: coarse)').matches;
    if (touch && navigator.share) {
        try {
            await navigator.share({ title: 'TypeSpeed', text, url });
        } catch {
            // Dismissing the share sheet rejects; nothing to report.
        }
        return;
    }
    try {
        await navigator.clipboard.writeText(`${text}${separator}${url}`);
        shareBtn.textContent = 'Copied!';
    } catch {
        shareBtn.textContent = 'Copy failed';
    }
    setTimeout(() => {
        shareBtn.textContent = 'Share result';
    }, 2000);
}

// --- Result image ---
// A 1200x630 PNG of the result dialog's numbers and run chart, in the
// current theme's colors, for posting where a link preview is not enough.
const CARD_WIDTH = 1200;
const CARD_HEIGHT = 630;

// The theme's colors, read from the custom properties in style.css.
function cardPalette() {
    const style = getComputedStyle(document.documentElement);
    const color = (name) => style.getPropertyValue(name).trim();
    return {
        background: color('--bg-dark'),
        text: color('--text-main'),
        muted: color('--text-muted'),
        accent: color('--accent-secondary'),
    };
}

const localDate = () => new Date().toLocaleDateString('en-CA'); // YYYY-MM-DD

function drawResultCard() {
    const canvas = document.createElement('canvas');
    canvas.width = CARD_WIDTH;
    canvas.height = CARD_HEIGHT;
    const ctx = canvas.getContext('2d');
    const palette = cardPalette();
    const ui = getComputedStyle(document.documentElement).getPropertyValue('--font-ui');
    const code = getComputedStyle(document.documentElement).getPropertyValue('--font-code');
    const text = (value, x, y, font, color, align = 'left') => {
        ctx.font = font;
        ctx.fillStyle = color;
        ctx.textAlign = align;
        ctx.fillText(value, x, y);
    };

    ctx.fillStyle = palette.background;
    ctx.fillRect(0, 0, CARD_WIDTH, CARD_HEIGHT);

    text('TypeSpeed', 60, 90, `700 40px ${ui}`, palette.text);
    text(resultTitle.textContent, 60, 140, `600 28px ${ui}`, palette.muted);

    const wpm = modalWpmElement.textContent;
    text(wpm, 60, 330, `700 180px ${code}`, palette.accent);
    ctx.font = `700 180px ${code}`;
    text('WPM', 60 + ctx.measureText(wpm).width + 20, 330, `40px ${code}`, palette.muted);

    const details = [
        ['Accuracy', modalAccuracyElement.textContent],
        ['Raw WPM', modalRawElement.textContent],
        ['Correct / wrong', modalCharsElement.textContent],
        ['Time', modalTimeElement.textContent],
    ];
    details.forEach(([label, value], n) => {
        const x = 60 + n * 260;
        text(label, x, 420, `24px ${ui}`, palette.muted);
        text(value, x, 470, `36px ${code}`, palette.text);
    });

    // Raw WPM by second, scaled to its own range like the dialog's chart.
    const data = wpmBySecond();
    if (data.length >= 2) {
        const left = 700;
        const top = 120;
        const width = 440;
        const height = 200;
        const max = Math.max(...data);
        const min = Math.min(...data);
        const range = max - min || 1;
        ctx.strokeStyle = palette.accent;
        ctx.lineWidth = 4;
        ctx.lineJoin = 'round';
        ctx.beginPath();
        data.forEach((value, n) => {
            const x = left + (n / (data.length - 1)) * width;
            const y = top + height - ((value - min) / range) * height;
            if (n === 0) ctx.moveTo(x, y);
            else ctx.lineTo(x, y);
        });
        ctx.stroke();
        text('Raw WPM by second', left, top - 24, `22px ${ui}`, palette.muted);
    }

    text(localDate(), 60, 580, `24px ${ui}`, palette.muted);
    text(
        SITE_URL.replace(/^https:\/\//, ''),
        CARD_WIDTH - 60,
        580,
        `24px ${ui}`,
        palette.muted,
        'right'
    );
    return canvas;
}

function buildResultCard() {
    const canvas = drawResultCard();
    return new Promise((resolve, reject) => {
        canvas.toBlob((blob) => {
            if (blob)
                resolve(new File([blob], `typespeed-${localDate()}.png`, { type: 'image/png' }));
            else reject(new Error('Could not draw the image'));
        }, 'image/png');
    });
}

// Like the challenge link, the image is made when the dialog opens: phones
// allow the share sheet only during the click itself.
function prepareResultCard() {
    const replay = runtime.replay;
    buildResultCard()
        .then((file) => {
            if (runtime.replay === replay) runtime.cardFile = file;
        })
        .catch(() => {});
}

// Phones with file sharing get the share sheet with the image and the
// result text; everywhere else the PNG is downloaded.
async function saveResultImage() {
    let file = runtime.cardFile;
    try {
        if (!file) file = await buildResultCard();
    } catch {
        saveImageBtn.textContent = 'Could not make image';
        return;
    }
    const touch = window.matchMedia('(pointer: coarse)').matches;
    if (touch && navigator.canShare && navigator.canShare({ files: [file] })) {
        const { text, url } = shareContent();
        try {
            await navigator.share({ files: [file], title: 'TypeSpeed', text, url });
        } catch {
            // Dismissing the share sheet rejects; nothing to report.
        }
        return;
    }
    const link = document.createElement('a');
    link.href = URL.createObjectURL(file);
    link.download = file.name;
    link.click();
    setTimeout(() => URL.revokeObjectURL(link.href), 1000);
    saveImageBtn.textContent = 'Image saved';
}

// --- Challenge Links ---
// A link carries a finished run's settings, seed, first passage hash, WPM,
// and keystroke timings in the URL hash. Opening it plays those passages
// with the run as the ghost, without changing the receiver's saved
// settings. Version 1 links have no passage hash and are not checked.
const CHALLENGE_VERSION = 2;
const CHALLENGE_MAX_LENGTH = 20000; // characters in the hash
const CHALLENGE_MAX_STROKES = 5000;
const CHALLENGE_SETTINGS = [
    'mode',
    'duration',
    'wordCount',
    'category',
    'hasPunctuation',
    'hasNumbers',
    'codeLanguage',
    'isStopOnError',
    'isAutoIndent',
    'lessonStage',
    'wordLanguage',
];

function toBase64Url(bytes) {
    let binary = '';
    bytes.forEach((byte) => {
        binary += String.fromCharCode(byte);
    });
    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

function fromBase64Url(text) {
    const binary = atob(text.replace(/-/g, '+').replace(/_/g, '/'));
    return Uint8Array.from(binary, (char) => char.charCodeAt(0));
}

// Runs bytes through a (de)compression stream. Reading the stream directly,
// with the writer's rejections caught, keeps a corrupt link from logging
// stream errors; the read rejects instead and the caller ignores the link.
async function pipeBytes(bytes, stream) {
    const writer = stream.writable.getWriter();
    writer.write(bytes).catch(() => {});
    writer.close().catch(() => {});
    const reader = stream.readable.getReader();
    const chunks = [];
    let length = 0;
    for (;;) {
        const { done, value } = await reader.read();
        if (done) break;
        chunks.push(value);
        length += value.length;
    }
    const result = new Uint8Array(length);
    let offset = 0;
    for (const chunk of chunks) {
        result.set(chunk, offset);
        offset += chunk.length;
    }
    return result;
}

// 'z' + deflated JSON where CompressionStream exists, otherwise 'j' + JSON.
async function encodeChallenge(payload) {
    const json = new TextEncoder().encode(JSON.stringify(payload));
    if (typeof CompressionStream === 'function') {
        return `z${toBase64Url(await pipeBytes(json, new CompressionStream('deflate-raw')))}`;
    }
    return `j${toBase64Url(json)}`;
}

async function decodeChallenge(text) {
    let bytes = fromBase64Url(text.slice(1));
    if (text[0] === 'z') {
        if (typeof DecompressionStream !== 'function') return null;
        bytes = await pipeBytes(bytes, new DecompressionStream('deflate-raw'));
    } else if (text[0] !== 'j') {
        return null;
    }
    return JSON.parse(new TextDecoder().decode(bytes));
}

// Checks every field of a decoded payload. Returns null if anything is off.
function parseChallenge(data) {
    if (!data || ![1, CHALLENGE_VERSION].includes(data.v)) return null;
    if (!data.s || typeof data.s !== 'object') return null;
    if (data.v === CHALLENGE_VERSION && !isTextHash(data.h)) return null;
    if (!Number.isInteger(data.seed) || data.seed < 0 || data.seed >= 4294967296) return null;
    if (!isNumber(data.wpm) || data.wpm < 0 || data.wpm > 1000) return null;
    if (!Array.isArray(data.d) || data.d.length % 2 !== 0) return null;
    if (data.d.length > CHALLENGE_MAX_STROKES * 2 || !data.d.every(Number.isInteger)) return null;

    const strokes = [];
    let t = 0;
    let i = 0;
    for (let n = 0; n < data.d.length; n += 2) {
        t += data.d[n];
        i += data.d[n + 1];
        if (data.d[n] < 0 || t > 600000 || i < 0 || i > 100000) return null;
        strokes.push({ t, i });
    }

    const sanitized = sanitizeSettings(data.s);
    if (['custom', 'books'].includes(sanitized.category)) return null;
    if (sanitized.codeLanguage === OWN_CODE) return null;
    const settings = {};
    for (const name of CHALLENGE_SETTINGS) settings[name] = sanitized[name];
    const weakKeys = Array.isArray(data.k)
        ? data.k.filter(isWeakKeyCandidate).slice(0, WEAK_KEY_COUNT)
        : [];
    const challenge = {
        settings,
        seed: data.seed,
        wpm: Math.round(data.wpm),
        weakKeys,
        strokes,
        used: false,
    };
    if (data.v === CHALLENGE_VERSION) challenge.textHash = data.h;
    return challenge;
}

function challengePayload() {
    const deltas = encodeStrokes(runtime.ghostStrokes.slice(0, CHALLENGE_MAX_STROKES));
    const settings = {};
    for (const name of CHALLENGE_SETTINGS) settings[name] = gameState[name];
    settings.category = passageCategory();
    return {
        v: CHALLENGE_VERSION,
        s: settings,
        seed: runtime.seed,
        h: runtime.passageHash,
        wpm: Number(modalWpmElement.textContent),
        k: gameState.category === 'weak' ? runtime.weakKeys : [],
        d: deltas,
    };
}

async function buildChallengeUrl() {
    const code = await encodeChallenge(challengePayload());
    return `${location.origin}${location.pathname}#c=${code}`;
}

// Safari allows clipboard writes and the share sheet only during the click
// itself, and encoding is async. So the link is built when the result
// dialog opens, and the click uses it without waiting.
function prepareChallengeUrl() {
    const strokes = runtime.ghostStrokes;
    buildChallengeUrl()
        .then((url) => {
            if (runtime.ghostStrokes === strokes) runtime.challengeUrl = url;
        })
        .catch(() => {});
}

// Like Share result: the share sheet on phones, the clipboard elsewhere. If
// neither works, the link is shown so it can be copied by hand.
async function copyChallengeLink() {
    let url = runtime.challengeUrl;
    try {
        if (!url) url = await buildChallengeUrl();
    } catch {
        challengeBtn.textContent = 'Copy failed';
        return;
    }
    const touch = window.matchMedia('(pointer: coarse)').matches;
    if (touch && navigator.share) {
        try {
            await navigator.share({ title: 'TypeSpeed challenge', url });
            return;
        } catch (err) {
            // Dismissing the share sheet rejects; anything else falls through.
            if (err && err.name === 'AbortError') return;
        }
    }
    try {
        await navigator.clipboard.writeText(url);
        challengeBtn.textContent = 'Link copied';
    } catch {
        challengeBtn.textContent = 'Copy failed';
        challengeLinkInput.value = url;
        challengeLinkRow.classList.remove('hidden');
        challengeLinkInput.focus();
        challengeLinkInput.select();
    }
}

function clearChallengeHash() {
    if (location.hash) history.replaceState(null, '', location.pathname + location.search);
}

async function loadChallengeFromHash() {
    if (location.hash === '#daily') {
        startDaily();
        return;
    }
    const match = location.hash.match(/^#c=([A-Za-z0-9_-]+)$/);
    if (!match || match[1].length > CHALLENGE_MAX_LENGTH) return;
    let challenge;
    try {
        challenge = parseChallenge(await decodeChallenge(match[1]));
    } catch {
        challenge = null;
    }
    if (!challenge) {
        clearChallengeHash();
        return;
    }
    runtime.challenge = challenge;
    Object.assign(gameState, challenge.settings);
    applySettingsToUI();
    resetGame();
}

// After a challenge run, go back to the receiver's own saved settings.
function endChallenge() {
    runtime.challenge = null;
    Object.assign(gameState, sanitizeSettings(loadJSON(STORAGE_KEYS.settings, null)));
    applySettingsToUI();
    clearChallengeHash();
}

// --- Daily ---
// One passage a day, the same for everyone: fixed settings, and a seed from
// the UTC date. It is played like a challenge without a ghost, so the
// player's saved settings come back after the run.
const DAILY_SETTINGS = {
    mode: 'time',
    duration: 30,
    category: 'common',
    hasPunctuation: true,
    hasNumbers: false,
    wordLanguage: 'en',
    isStopOnError: false,
};
const DAY_MS = 86400000;
const DAILY_FIRST_DAY = Date.UTC(2026, 9, 25) / DAY_MS; // Daily #1
const DAILY_LIMIT = 400; // days of results kept
const GRID_SECONDS = 5; // one square of the share grid

const dailyNumber = (now = Date.now()) => Math.floor(now / DAY_MS) - DAILY_FIRST_DAY + 1;

// The seed is the hash of 'daily-' and the day's UTC date, as YYYY-MM-DD.
function dailySeed(number) {
    const date = new Date((DAILY_FIRST_DAY + number - 1) * DAY_MS).toISOString().slice(0, 10);
    return parseInt(textHash(`daily-${date}`), 36);
}

function startDaily() {
    const number = dailyNumber();
    runtime.challenge = {
        settings: { ...DAILY_SETTINGS },
        seed: dailySeed(number),
        daily: number,
        wpm: 0,
        weakKeys: [],
        strokes: [],
        used: false,
    };
    Object.assign(gameState, DAILY_SETTINGS);
    applySettingsToUI();
    resetGame();
}

// The Daily button starts today's daily, or while it is open, leaves it.
function toggleDaily() {
    if (runtime.challenge && runtime.challenge.daily) {
        endChallenge();
        resetGame();
    } else {
        startDaily();
    }
}

function updateDailyStatus() {
    const number = runtime.challenge.daily;
    const result = dailyResults[number];
    ghostStatus.classList.remove('hidden');
    setText(
        ghostStatus,
        result
            ? `Daily #${number}: already played today at ${result.wpm} WPM. This run is practice.`
            : `Daily #${number}: the same passage for everyone today. Your first run is the one recorded.`
    );
}

// One square per GRID_SECONDS: green at 95% accuracy or more, yellow at
// 85% or more, red below, white when nothing was typed.
function dailyGrid() {
    const slots = Math.ceil(
        Math.min(elapsedMs(), DAILY_SETTINGS.duration * 1000) / (GRID_SECONDS * 1000)
    );
    let grid = '';
    for (let slot = 0; slot < slots; slot++) {
        const cell = runtime.grid[slot];
        if (!cell || cell.typed === 0) {
            grid += '\u2b1c';
            continue;
        }
        const accuracy = (cell.typed - cell.wrong) / cell.typed;
        grid += accuracy >= 0.95 ? '\u{1f7e9}' : accuracy >= 0.85 ? '\u{1f7e8}' : '\u{1f7e5}';
    }
    return grid;
}

// --- Settings ---
// Changing a setting by hand ends a challenge; the visible settings,
// including the change, become the saved ones.
function saveSettings() {
    if (runtime.challenge) {
        runtime.challenge = null;
        clearChallengeHash();
    }
    saveJSON(STORAGE_KEYS.settings, gameState);
}

function setActivePill(selector, value) {
    selector.querySelectorAll('.pill').forEach((pill) => {
        const active = pill.dataset.value === value;
        pill.classList.toggle('active', active);
        pill.setAttribute('aria-pressed', String(active));
    });
}

// Push gameState into the settings controls and the quote display.
function applySettingsToUI() {
    setActivePill(themeSelector, gameState.theme);
    categorySelect.value = gameState.category;
    soundToggle.checked = gameState.isSoundEnabled;
    soundPackSelect.value = gameState.soundPack;
    hardModeToggle.checked = gameState.isHardMode;
    ghostModeToggle.checked = gameState.isGhostEnabled;
    paceSelect.value = gameState.pace;
    paceWpmInput.value = gameState.paceWpm;
    paceWpmInput.hidden = gameState.pace !== 'target';
    fontSelect.value = gameState.passageFont;
    textSizeSelect.value = gameState.textSize;
    lineSpacingSelect.value = gameState.lineSpacing;
    caretSelect.value = gameState.caretStyle;
    punctuationToggle.checked = gameState.hasPunctuation;
    wordLanguageSelect.value = gameState.wordLanguage;
    numbersToggle.checked = gameState.hasNumbers;
    stopOnErrorToggle.checked = gameState.isStopOnError;
    layoutSelect.value = gameState.layout;
    autoIndentToggle.checked = gameState.isAutoIndent;
    codeLanguageSelect.value = gameState.codeLanguage;
    customTextInput.value = gameState.customText;
    quoteDisplayElement.classList.toggle('blurred', gameState.isHardMode);
    applyTheme();
    applyPassageStyle();
}

// Settings changes reset the game on close anyway, so a run in progress is
// abandoned here instead of letting its clock run out behind the dialog.
function openSettings() {
    if (runtime.isStarted) resetGame();
    typingInputElement.blur();
    settingsModal.classList.add('show');
    updateFocusHint();
    focusInDialog(stopOnErrorToggle);
}

// Toggle and pill changes update gameState immediately; the new settings
// take effect when the modal closes and the game resets.
function closeSettings() {
    settingsModal.classList.remove('show');
    saveSettings();
    resetGame();
}

// Like Settings, the custom text dialog abandons a run in progress.
function openCustomText() {
    if (runtime.isStarted) resetGame();
    typingInputElement.blur();
    customTextInput.value = gameState.customText;
    customModal.classList.add('show');
    updateFocusHint();
    focusInDialog(customTextInput);
}

// Like custom text, editing your code abandons a run in progress.
function openOwnCode() {
    if (runtime.isStarted) resetGame();
    typingInputElement.blur();
    ownCodeInput.value = gameState.ownCode;
    codeFileStatus.textContent = '';
    codeModal.classList.add('show');
    updateFocusHint();
    focusInDialog(ownCodeInput);
}

function closeOwnCode() {
    codeModal.classList.remove('show');
    gameState.ownCode = normalizeOwnCode(ownCodeInput.value);
    saveSettings();
    resetGame();
}

// The file is read in the browser and never uploaded.
async function loadCodeFile(file) {
    if (file.size > 1000000) {
        codeFileStatus.textContent = 'That file is over 1 MB.';
        return;
    }
    try {
        ownCodeInput.value = normalizeOwnCode(await file.text());
        codeFileStatus.textContent = `Loaded ${file.name}.`;
    } catch {
        codeFileStatus.textContent = 'Could not read that file.';
    }
}

function closeCustomText() {
    customModal.classList.remove('show');
    gameState.customText = normalizeCustomText(customTextInput.value);
    customTextInput.value = gameState.customText;
    saveSettings();
    resetGame();
}

// --- Theme ---
const prefersLight = window.matchMedia('(prefers-color-scheme: light)');
const prefersContrast = window.matchMedia('(prefers-contrast: more)');

// Same rules as theme.js, which runs before the first paint.
function applyTheme() {
    let theme = gameState.theme;
    if (theme === 'system') {
        if (prefersContrast.matches) theme = 'contrast';
        else theme = prefersLight.matches ? 'light' : 'dark';
    }
    document.documentElement.dataset.theme = theme;
}

function applyPassageStyle() {
    for (const setting of Object.keys(PASSAGE_STYLES)) {
        document.documentElement.dataset[setting] = gameState[setting];
    }
}

function applyPill(group, value) {
    if (group === 'mode') {
        gameState.mode = value === 'words' ? 'words' : 'time';
    } else if (group === 'duration') {
        gameState.duration = parseInt(value, 10);
    } else if (group === 'wordCount') {
        gameState.wordCount = parseInt(value, 10);
    }
}

function handleThemeClick(e) {
    const pill = e.target.closest('.pill');
    if (!pill) return;
    setActivePill(themeSelector, pill.dataset.value);
    gameState.theme = THEMES.includes(pill.dataset.value) ? pill.dataset.value : 'system';
    applyTheme();
}

// Main-screen pills change the setting and start a fresh run at once, like
// the category select.
function handleQuickPillClick(e, group) {
    const pill = e.target.closest('.pill');
    if (!pill) return;
    applyPill(group, pill.dataset.value);
    saveSettings();
    applySettingsToUI();
    resetGame();
}

// --- Stats ---
const KEY_EXTRA_LABELS = {
    stop: 'stop on error',
    noindent: 'indentation typed',
    colemak: 'Colemak',
    'colemak-dh': 'Colemak-DH',
    dvorak: 'Dvorak',
    workman: 'Workman',
};

// "time:60s:common+punctuation" -> "60s, Common Words, punctuation"
function describeKey(key) {
    const [mode, length, category = ''] = String(key).split(':');
    const [base, ...extras] = category.split('+');
    const book = base.startsWith('books-') && BOOKS.find((entry) => `books-${entry.id}` === base);
    if (book) return `Books, ${book.title}`;
    const value = base.replace(/-.*$/, '');
    const option = categorySelect.querySelector(`option[value="${CSS.escape(value)}"]`);
    const lengthLabel = mode === 'words' ? `${parseInt(length, 10)} words` : length;
    let label = option ? option.textContent : base;
    const language = value === 'code' && base.slice(5).replace(/-.*$/, '');
    const languageOption =
        language && codeLanguageSelect.querySelector(`option[value="${CSS.escape(language)}"]`);
    if (languageOption) label += ` (${languageOption.textContent})`;
    if (value === 'lessons') label += `, stage ${base.slice('lessons-'.length)}`;
    const wordLanguage =
        value === 'common' &&
        wordLanguageSelect.querySelector(`option[value="${CSS.escape(base.slice(7))}"]`);
    if (wordLanguage) label += ` (${wordLanguage.textContent})`;
    const extraLabels = extras.map((extra) => KEY_EXTRA_LABELS[extra] || extra);
    return [lengthLabel, label, ...extraLabels].join(', ');
}

function tableRow(cells) {
    const row = document.createElement('tr');
    for (const text of cells) {
        const cell = document.createElement('td');
        cell.textContent = text;
        if (/^\d+%?$/.test(String(text))) cell.className = 'num';
        row.appendChild(cell);
    }
    return row;
}

// A US QWERTY layout. Each key counts the character on it and its shifted
// one (a letter's capital, or the symbol above a digit or punctuation key).
// The keyboard of the current layout, with the digits and backslash of a
// US keyboard.
function heatmapRows() {
    const [numbers, top, home, bottom] = LAYOUTS[gameState.layout];
    return [`\`1234567890${numbers}`, `${top}\\`, home, bottom, ' '];
}
const SHIFTED = '~!@#$%^&*()_+{}|:"<>?';
const UNSHIFTED = "`1234567890-=[]\\;',./";

const shiftOf = (key) => (/[a-z]/.test(key) ? key.toUpperCase() : SHIFTED[UNSHIFTED.indexOf(key)]);

function keyStat(key, stats = layoutStats()) {
    const total = { attempts: 0, misses: 0 };
    for (const character of [key, shiftOf(key)]) {
        const stat = stats[character];
        if (!stat) continue;
        total.attempts += stat.attempts;
        total.misses += stat.misses;
    }
    return total;
}

// Keys shaded by miss rate, relative to the most missed key. Each key's
// accessible name carries its rate and attempts.
function renderHeatmap() {
    const current = layoutStats();
    const stats = heatmapRows().map((row) => [...row].map((key) => [key, keyStat(key, current)]));
    const rates = stats
        .flat()
        .filter(([, stat]) => stat.attempts >= WEAK_MIN_ATTEMPTS)
        .map(([, stat]) => stat.misses / stat.attempts);
    const worst = Math.max(0, ...rates);
    statsHeatmap.textContent = '';
    for (const row of stats) {
        const rowElement = document.createElement('div');
        rowElement.className = 'heatmap-row';
        for (const [key, stat] of row) {
            const cell = document.createElement('span');
            cell.className = key === ' ' ? 'heat-key space' : 'heat-key';
            cell.textContent = key === ' ' ? 'space' : key;
            cell.setAttribute('role', 'img');
            const name = key === ' ' ? 'space' : key;
            if (stat.attempts < WEAK_MIN_ATTEMPTS) {
                cell.classList.add('no-data');
                cell.setAttribute('aria-label', `${name}: not enough data`);
            } else {
                const rate = stat.misses / stat.attempts;
                const percent = Math.round(rate * 100);
                cell.style.setProperty('--heat', worst ? rate / worst : 0);
                cell.setAttribute(
                    'aria-label',
                    `${name}: ${percent}% missed of ${stat.attempts} attempts`
                );
            }
            cell.title = cell.getAttribute('aria-label');
            rowElement.appendChild(cell);
        }
        statsHeatmap.appendChild(rowElement);
    }
}

// Local calendar day of an ISO date, as YYYY-MM-DD.
function dayOf(iso) {
    const date = new Date(iso);
    if (isNaN(date)) return '';
    const pad = (n) => String(n).padStart(2, '0');
    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
}

// Average WPM per day at the current settings, oldest first.
function renderDailyChart() {
    const key = settingsKey();
    const days = new Map();
    for (const run of runHistory) {
        const day = dayOf(run.date);
        if (run.key !== key || !day) continue;
        const total = days.get(day) || { sum: 0, count: 0 };
        total.sum += run.wpm;
        total.count++;
        days.set(day, total);
    }
    const entries = [...days.entries()].sort(([a], [b]) => (a < b ? -1 : 1));
    dailyChartContainer.classList.toggle('hidden', entries.length < 2);
    if (entries.length < 2) return;
    const data = entries.map(([, total]) => Math.round(total.sum / total.count));
    const first = entries[0][0];
    const last = entries[entries.length - 1][0];
    drawLineChart(dailyChart, data, true, [first, last]);
    dailyChartTitle.textContent = `WPM by day, ${settingsLabel(' · ')}`;
    dailyChartSummary.textContent = `Daily average WPM from ${first} to ${last}: ${data.join(', ')}.`;
}

// Days in a row, ending today or yesterday, with at least one recorded run.
function currentStreak(now = new Date()) {
    const days = new Set(runHistory.map((run) => dayOf(run.date)));
    const day = new Date(now);
    if (!days.has(dayOf(day.toISOString()))) day.setDate(day.getDate() - 1);
    let streak = 0;
    while (days.has(dayOf(day.toISOString()))) {
        streak++;
        day.setDate(day.getDate() - 1);
    }
    return streak;
}

function renderStats() {
    const recent = runHistory.slice(0, 10);
    const streak = currentStreak();
    const streakText = streak > 1 ? ` Practiced ${streak} days in a row.` : '';
    statsSummary.textContent = recent.length
        ? `${runHistory.length} recorded ${runHistory.length === 1 ? 'run' : 'runs'}. Average of the last ${recent.length}: ${Math.round(recent.reduce((sum, run) => sum + run.wpm, 0) / recent.length)} WPM.${streakText}`
        : 'No runs yet. Finish a run of a second or longer to see it here.';
    renderHeatmap();
    renderDailyChart();
    // Empty tables with headers say nothing the line above does not.
    statsTables.classList.toggle('hidden', recent.length === 0 && !Object.keys(bests).length);

    statsBestsBody.textContent = '';
    Object.entries(bests)
        .filter(([, best]) => best && typeof best.wpm === 'number')
        .sort(([, a], [, b]) => b.wpm - a.wpm)
        .forEach(([key, best]) =>
            statsBestsBody.appendChild(tableRow([describeKey(key), best.wpm]))
        );

    statsRunsBody.textContent = '';
    runHistory.forEach((run) => {
        const date = new Date(run.date);
        const when = isNaN(date)
            ? ''
            : date.toLocaleString([], { dateStyle: 'short', timeStyle: 'short' });
        statsRunsBody.appendChild(
            tableRow([when, describeKey(run.key), run.wpm, `${run.accuracy}%`])
        );
    });
}

// Like Settings, the dialog abandons a run in progress.
function openStats() {
    if (runtime.isStarted) resetGame();
    typingInputElement.blur();
    statsStatus.textContent = '';
    clearBtn.textContent = 'Clear data';
    renderStats();
    statsModal.classList.add('show');
    updateFocusHint();
    focusInDialog(closeStatsBtn);
}

function closeStats() {
    statsModal.classList.remove('show');
    resetGame();
}

function exportData() {
    const data = {
        app: 'TypeSpeed',
        version: 1,
        exported: new Date().toISOString(),
        [STORAGE_KEYS.settings]: gameState,
        [STORAGE_KEYS.history]: runHistory,
        [STORAGE_KEYS.bests]: bests,
        [STORAGE_KEYS.keyStats]: keyStats,
        [STORAGE_KEYS.daily]: dailyResults,
        [STORAGE_KEYS.lessons]: lessonProgress,
        [STORAGE_KEYS.books]: bookProgress,
    };
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'typespeed-data.json';
    link.click();
    setTimeout(() => URL.revokeObjectURL(link.href), 1000);
    statsStatus.textContent = 'Exported typespeed-data.json.';
}

const isNumber = (value) => typeof value === 'number' && Number.isFinite(value);
// textHash output: a 32-bit number in base 36.
const isTextHash = (value) => typeof value === 'string' && /^[0-9a-z]{1,7}$/.test(value);

function validHistory(list) {
    if (!Array.isArray(list)) return [];
    return list
        .filter(
            (run) =>
                run && isNumber(run.wpm) && isNumber(run.accuracy) && typeof run.key === 'string'
        )
        .map((run) => ({
            wpm: run.wpm,
            accuracy: run.accuracy,
            date: typeof run.date === 'string' ? run.date : '',
            mode: run.mode === 'words' ? 'words' : 'time',
            key: run.key,
        }))
        .slice(0, HISTORY_LIMIT);
}

function validBests(map) {
    const result = {};
    if (!map || typeof map !== 'object' || Array.isArray(map)) return result;
    for (const [key, best] of Object.entries(map)) {
        if (!best || !isNumber(best.wpm) || !Array.isArray(best.keystrokes)) continue;
        // Either form is accepted; both are stored as differences.
        const list = best.keystrokes;
        const keystrokes = list.every(isNumber)
            ? list.slice(0, list.length - (list.length % 2))
            : encodeStrokes(list.filter((s) => s && isNumber(s.t) && isNumber(s.i)));
        result[key] = { wpm: best.wpm, keystrokes };
        if (Number.isInteger(best.seed)) result[key].seed = best.seed;
        if (isTextHash(best.textHash)) result[key].textHash = best.textHash;
        if (Array.isArray(best.weakKeys)) {
            result[key].weakKeys = best.weakKeys.filter(isWeakKeyCandidate).slice(0, 3);
        }
    }
    return result;
}

const DAILY_GRID = /^(\u2b1c|\u{1f7e9}|\u{1f7e8}|\u{1f7e5}){0,12}$/u;

function validDaily(map) {
    const result = {};
    if (!map || typeof map !== 'object' || Array.isArray(map)) return result;
    for (const [day, run] of Object.entries(map)) {
        if (!/^[1-9]\d{0,5}$/.test(day) || !run || !isNumber(run.wpm)) continue;
        if (!isNumber(run.accuracy) || typeof run.grid !== 'string' || !DAILY_GRID.test(run.grid)) {
            continue;
        }
        result[day] = { wpm: run.wpm, accuracy: run.accuracy, grid: run.grid };
    }
    return result;
}

function validKeyStats(map) {
    const result = {};
    if (!map || typeof map !== 'object' || Array.isArray(map)) return result;
    for (const [key, stat] of Object.entries(map)) {
        if (stat && isNumber(stat.attempts) && isNumber(stat.misses)) {
            result[key] = { attempts: stat.attempts, misses: stat.misses };
        }
    }
    return result;
}

// Replaces the stored data with a file from Export. Anything malformed is
// dropped rather than trusted.
async function importData(file) {
    let text;
    try {
        text = await file.text();
    } catch {
        statsStatus.textContent = 'Could not read that file.';
        return;
    }
    let data;
    try {
        data = JSON.parse(text);
    } catch {
        statsStatus.textContent = 'That file is not valid JSON.';
        return;
    }
    if (!data || data.app !== 'TypeSpeed') {
        statsStatus.textContent = 'That file is not a TypeSpeed export.';
        return;
    }
    runHistory = validHistory(data[STORAGE_KEYS.history]);
    bests = validBests(data[STORAGE_KEYS.bests]);
    keyStats = validKeyStats(data[STORAGE_KEYS.keyStats]);
    dailyResults = validDaily(data[STORAGE_KEYS.daily]);
    lessonProgress = validLessons(data[STORAGE_KEYS.lessons]);
    bookProgress = validBooks(data[STORAGE_KEYS.books]);
    Object.assign(gameState, sanitizeSettings(data[STORAGE_KEYS.settings]));
    saveJSON(STORAGE_KEYS.history, runHistory);
    saveJSON(STORAGE_KEYS.bests, bests);
    saveJSON(STORAGE_KEYS.keyStats, keyStats);
    saveJSON(STORAGE_KEYS.daily, dailyResults);
    saveJSON(STORAGE_KEYS.lessons, lessonProgress);
    saveJSON(STORAGE_KEYS.books, bookProgress);
    saveSettings();
    applySettingsToUI();
    updateHighScoreDisplay();
    renderStats();
    statsStatus.textContent = `Imported ${runHistory.length} ${runHistory.length === 1 ? 'run' : 'runs'} and ${Object.keys(bests).length} best scores.`;
}

// Two clicks: the first asks, the second clears.
function clearData() {
    if (clearBtn.textContent !== 'Click again to clear') {
        clearBtn.textContent = 'Click again to clear';
        statsStatus.textContent =
            'This removes run history, best scores, key stats, daily results, and lesson and book progress.';
        return;
    }
    runHistory = [];
    bests = {};
    keyStats = {};
    dailyResults = {};
    lessonProgress = validLessons(null);
    bookProgress = {};
    for (const key of [
        STORAGE_KEYS.history,
        STORAGE_KEYS.bests,
        STORAGE_KEYS.keyStats,
        STORAGE_KEYS.daily,
        STORAGE_KEYS.lessons,
        STORAGE_KEYS.books,
    ]) {
        try {
            localStorage.removeItem(key);
        } catch {
            // Storage unavailable; the in-memory copies are already empty.
        }
    }
    clearBtn.textContent = 'Clear data';
    statsStatus.textContent = 'Cleared.';
    updateHighScoreDisplay();
    renderStats();
}

// --- Keyboard ---
// Keys that would move the caret or select text inside the input. Typing
// always happens at the end of the value.
const CARET_KEYS = [
    'ArrowLeft',
    'ArrowRight',
    'ArrowUp',
    'ArrowDown',
    'Home',
    'End',
    'PageUp',
    'PageDown',
];

// The character the chosen layout puts on the physical key, or '' when the
// key is not remapped. Caps Lock works on letters as on a real keyboard.
function layoutCharacter(e) {
    const rows = LAYOUTS[gameState.layout];
    for (let row = 0; row < LAYOUT_CODES.length; row++) {
        const index = LAYOUT_CODES[row].indexOf(e.code);
        if (index === -1) continue;
        const character = rows[row][index];
        const caps = /[a-z]/.test(character) && e.getModifierState('CapsLock');
        return e.shiftKey !== caps ? shiftOf(character) : character;
    }
    return '';
}

// With a layout other than QWERTY, a remapped key types its character here
// instead of the system's, through the same path as any other input.
function typeWithLayout(e) {
    if (gameState.layout === 'qwerty' || e.ctrlKey || e.metaKey || e.altKey || e.isComposing) {
        return;
    }
    const character = layoutCharacter(e);
    if (!character) return;
    e.preventDefault();
    if (typingInputElement.value.length >= typingInputElement.maxLength) return;
    typingInputElement.value += character;
    handleInput();
}

function handleInputKeydown(e) {
    updateCapsWarning(e);
    typeWithLayout(e);
    const selectAll = (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a';
    if (CARET_KEYS.includes(e.key) || selectAll) e.preventDefault();
}

// With Caps Lock on, every letter is wrong. Warn before the run is wasted.
function updateCapsWarning(e) {
    if (typeof e.getModifierState !== 'function') return;
    capsWarning.classList.toggle('hidden', !e.getModifierState('CapsLock'));
}

function pinCaretToEnd() {
    const end = typingInputElement.value.length;
    typingInputElement.setSelectionRange(end, end);
}

// A click would place the caret where it lands. Focus without moving it.
function handleInputMousedown(e) {
    e.preventDefault();
    typingInputElement.focus();
    pinCaretToEnd();
}

function isModalOpen(modal) {
    return modal.classList.contains('show');
}

function openModal() {
    return (
        [settingsModal, customModal, codeModal, statsModal, resultModal, replayModal].find(
            isModalOpen
        ) || null
    );
}

// Keep Tab and Shift+Tab inside the open dialog.
function trapFocus(e, modal) {
    const focusable = Array.from(
        modal.querySelectorAll('button, input, select, textarea, [tabindex]:not([tabindex="-1"])')
    ).filter((el) => !el.disabled && el.offsetParent !== null);
    if (focusable.length === 0) return;
    const first = focusable[0];
    const last = focusable[focusable.length - 1];
    if (!modal.contains(document.activeElement)) {
        e.preventDefault();
        first.focus();
    } else if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
    }
}

// Show the "press any key" hint while nothing would receive typing. Runs
// after focus has settled, so opening a dialog does not flash it.
function updateFocusHint() {
    const lost = document.activeElement !== typingInputElement && !openModal();
    typingContainer.classList.toggle('unfocused', lost);
}

// A printable key pressed while focus is elsewhere goes to the input. Form
// controls keep their own keys, and Space still presses a focused button.
function refocusOnType(e) {
    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
    const active = document.activeElement;
    if (active === typingInputElement || typingInputElement.disabled) return;
    if (active && ['INPUT', 'SELECT', 'TEXTAREA'].includes(active.tagName)) return;
    if (e.key === ' ' && active && active.tagName === 'BUTTON') return;
    typingInputElement.focus();
    // This key was pressed elsewhere, so the input's own handler missed it.
    typeWithLayout(e);
}

function handleKeydown(e) {
    const modal = openModal();
    if (e.key === 'Escape') {
        if (modal === settingsModal) closeSettings();
        else if (modal === customModal) closeCustomText();
        else if (modal === codeModal) closeOwnCode();
        else if (modal === statsModal) closeStats();
        else if (modal === resultModal) resetGame();
        else if (modal === replayModal) closeReplay();
        return;
    }
    if (e.key === 'Tab' && modal) {
        trapFocus(e, modal);
        return;
    }

    if (e.key !== 'Tab') {
        if (!modal) refocusOnType(e);
        return;
    }

    // Tab restarts only while typing. Elsewhere, and for Shift+Tab, it
    // moves focus as usual so the page stays keyboard-navigable.
    if (e.shiftKey || document.activeElement !== typingInputElement) return;
    e.preventDefault();
    resetGame();
}

// --- Init ---
function init() {
    applySettingsToUI();
    updateHighScoreDisplay();

    typingInputElement.addEventListener('input', handleInput);
    typingInputElement.addEventListener('keydown', handleInputKeydown);
    typingInputElement.addEventListener('keyup', updateCapsWarning);
    typingInputElement.addEventListener('mousedown', handleInputMousedown);
    typingInputElement.addEventListener('select', pinCaretToEnd);
    typingInputElement.addEventListener('focus', pinCaretToEnd);
    typingInputElement.addEventListener('focus', updateFocusHint);
    typingInputElement.addEventListener('blur', () => setTimeout(updateFocusHint, 0));
    typingInputElement.addEventListener('paste', (e) => e.preventDefault());
    typingInputElement.addEventListener('drop', (e) => e.preventDefault());
    resetButton.addEventListener('click', resetGame);

    settingsBtn.addEventListener('click', openSettings);
    statsBtn.addEventListener('click', openStats);
    closeStatsBtn.addEventListener('click', closeStats);
    exportBtn.addEventListener('click', exportData);
    importBtn.addEventListener('click', () => importInput.click());
    // Cleared after the import finishes, so picking the same file again
    // still fires change.
    importInput.addEventListener('change', async () => {
        if (importInput.files[0]) await importData(importInput.files[0]);
        importInput.value = '';
    });
    clearBtn.addEventListener('click', clearData);
    closeSettingsBtn.addEventListener('click', closeSettings);
    editCustomBtn.addEventListener('click', openCustomText);
    editCodeBtn.addEventListener('click', openOwnCode);
    closeCodeBtn.addEventListener('click', closeOwnCode);
    codeFileBtn.addEventListener('click', () => codeFileInput.click());
    // Cleared after reading, so picking the same file again still fires change.
    codeFileInput.addEventListener('change', async () => {
        if (codeFileInput.files[0]) await loadCodeFile(codeFileInput.files[0]);
        codeFileInput.value = '';
    });
    closeCustomBtn.addEventListener('click', closeCustomText);
    themeSelector.addEventListener('click', handleThemeClick);
    prefersLight.addEventListener('change', applyTheme);
    prefersContrast.addEventListener('change', applyTheme);
    quickMode.addEventListener('click', (e) => handleQuickPillClick(e, 'mode'));
    quickDuration.addEventListener('click', (e) => handleQuickPillClick(e, 'duration'));
    quickWordCount.addEventListener('click', (e) => handleQuickPillClick(e, 'wordCount'));

    categorySelect.addEventListener('change', (e) => {
        gameState.category = e.target.value;
        saveSettings();
        resetGame();
    });

    soundToggle.addEventListener('change', (e) => {
        gameState.isSoundEnabled = e.target.checked;
    });
    soundPackSelect.addEventListener('change', (e) => {
        gameState.soundPack = e.target.value;
    });
    soundPreviewBtn.addEventListener('click', previewSoundPack);
    hardModeToggle.addEventListener('change', (e) => {
        gameState.isHardMode = e.target.checked;
        quoteDisplayElement.classList.toggle('blurred', gameState.isHardMode);
    });
    ghostModeToggle.addEventListener('change', (e) => {
        gameState.isGhostEnabled = e.target.checked;
    });
    paceSelect.addEventListener('change', (e) => {
        gameState.pace = e.target.value;
        paceWpmInput.hidden = gameState.pace !== 'target';
    });
    // Shown behind the dialog at once; saved when it closes.
    const passageSelects = [
        [fontSelect, 'passageFont'],
        [textSizeSelect, 'textSize'],
        [lineSpacingSelect, 'lineSpacing'],
        [caretSelect, 'caretStyle'],
    ];
    for (const [select, setting] of passageSelects) {
        select.addEventListener('change', (e) => {
            gameState[setting] = e.target.value;
            applyPassageStyle();
        });
    }
    paceWpmInput.addEventListener('change', (e) => {
        const wpm = Math.round(Number(e.target.value));
        if (Number.isFinite(wpm)) gameState.paceWpm = Math.min(PACE_MAX, Math.max(PACE_MIN, wpm));
        paceWpmInput.value = gameState.paceWpm;
    });
    stopOnErrorToggle.addEventListener('change', (e) => {
        gameState.isStopOnError = e.target.checked;
    });
    layoutSelect.addEventListener('change', (e) => {
        gameState.layout = e.target.value;
    });
    // Category options on the main screen save and reset at once.
    const optionToggles = [
        [punctuationToggle, 'hasPunctuation'],
        [numbersToggle, 'hasNumbers'],
        [autoIndentToggle, 'isAutoIndent'],
    ];
    for (const [toggle, flag] of optionToggles) {
        toggle.addEventListener('change', (e) => {
            gameState[flag] = e.target.checked;
            saveSettings();
            resetGame();
            // WebKit focuses the checkbox after its change event, which would
            // leave typing going to the checkbox.
            requestAnimationFrame(() => typingInputElement.focus());
        });
    }
    LESSON_STAGES.forEach((stage, n) => {
        const option = document.createElement('option');
        option.value = String(n + 1);
        option.textContent = `${n + 1}. ${stage.name}`;
        lessonSelect.appendChild(option);
    });
    for (const book of BOOKS) {
        const option = document.createElement('option');
        option.value = book.id;
        option.textContent = book.title;
        bookSelect.appendChild(option);
    }
    bookSelect.addEventListener('change', (e) => {
        gameState.bookId = e.target.value;
        saveSettings();
        resetGame();
    });
    lessonSelect.addEventListener('change', (e) => {
        gameState.lessonStage = Number(e.target.value);
        saveSettings();
        resetGame();
    });
    wordLanguageSelect.addEventListener('change', (e) => {
        gameState.wordLanguage = e.target.value;
        saveSettings();
        resetGame();
    });
    codeLanguageSelect.addEventListener('change', (e) => {
        gameState.codeLanguage = e.target.value;
        saveSettings();
        resetGame();
    });

    shareBtn.addEventListener('click', shareResult);
    playAgainBtn.addEventListener('click', resetGame);
    practiceBtn.addEventListener('click', () => {
        gameState.category = 'weak';
        categorySelect.value = 'weak';
        saveSettings();
        resetGame();
    });

    challengeBtn.addEventListener('click', copyChallengeLink);
    replayBtn.addEventListener('click', openReplay);
    saveImageBtn.addEventListener('click', saveResultImage);
    closeReplayBtn.addEventListener('click', closeReplay);
    replayPauseBtn.addEventListener('click', toggleReplayPause);
    replaySpeed.addEventListener('click', handleReplaySpeedClick);
    dailyBtn.addEventListener('click', toggleDaily);
    dismissUpdateBtn.addEventListener('click', dismissUpdateNotice);

    document.addEventListener('keydown', handleKeydown);
    // A link opened in a tab that already has the page only changes the
    // hash. clearChallengeHash uses replaceState, which does not fire this.
    window.addEventListener('hashchange', loadChallengeFromHash);
    // The on-screen keyboard opening or closing resizes the visual viewport.
    if (window.visualViewport) {
        window.visualViewport.addEventListener('resize', () => {
            if (document.activeElement === typingInputElement) keepCurrentInView();
        });
    }

    showUpdateNotice(loadJSON(STORAGE_KEYS.settings, null) !== null);
    resetGame();
    loadChallengeFromHash();
    registerServiceWorker();
}

// --- Version ---
// Bump VERSION together with a new section in CHANGELOG.md, the cache name
// in sw.js, and the version in package.json.
const VERSION = '1.1.0';
const RELEASE_NOTE = 'daily run, pace caret, replay, result image, sound sets, and passage fonts';

// Returning visitors (saved settings from an older version, or from before
// versions were recorded) see one line about the release, once. A first
// visit writes nothing; the version is saved with the first settings change.
function showUpdateNotice(isReturning) {
    versionLink.textContent = VERSION;
    if (gameState.lastSeenVersion === VERSION) return;
    gameState.lastSeenVersion = VERSION;
    if (!isReturning) return;
    updateText.textContent = `Updated to ${VERSION}: ${RELEASE_NOTE}.`;
    updateNotice.classList.remove('hidden');
    saveJSON(STORAGE_KEYS.settings, gameState);
}

function dismissUpdateNotice() {
    updateNotice.classList.add('hidden');
    typingInputElement.focus();
}

// --- Offline ---
// sw.js saves the app's files so the page loads offline. Service workers
// only run over HTTPS or on localhost, so file:// and other origins skip it.
function registerServiceWorker() {
    if (!('serviceWorker' in navigator) || !window.isSecureContext) return;
    // Offline use is optional: if registration fails (blocked by the
    // browser or its settings), the page works the same without it.
    navigator.serviceWorker.register('sw.js').catch(() => {});
}

init();