chesspal 0.3.1 → 0.3.3

package/dist/page/guide/drawings/parts.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useContext, useId } from "preact/hooks";
+import { ChosenSet, pieceSymbol } from "../../pieces/pieces.js";
+/** The top-left corner of a square: `file` 0 to 7 from a, `rank` 1 to 8, White at the bottom. */
+export function corner(grid, file, rank) {
+    return { x: grid.x + file * grid.cell, y: grid.y + (8 - rank) * grid.cell };
+}
+/** The centre of a square. */
+export function centre(grid, file, rank) {
+    const { x, y } = corner(grid, file, rank);
+    return { x: x + grid.cell / 2, y: y + grid.cell / 2 };
+}
+/** A card of the page, its corners as the page's. */
+export function Card({ x, y, width, height, class: name = "paper" }) {
+    return _jsx("rect", { class: name, x: x, y: y, width: width, height: height, rx: "6" });
+}
+/** A line of text, as a rounded bar: `strong` for a title or a name. */
+export function Bar({ x, y, width, strong = false, class: name }) {
+    return _jsx("rect", { class: name ?? (strong ? "bar strong" : "bar"), x: x, y: y, width: width, height: "5", rx: "2.5" });
+}
+/** The board's squares, light and dark. */
+export function Board({ grid, children }) {
+    return (_jsxs("g", { children: [_jsx("rect", { class: "light", x: grid.x, y: grid.y, width: grid.cell * 8, height: grid.cell * 8 }), _jsx("path", { class: "dark", d: darkSquares(grid) }), children] }));
+}
+/** A square filled with one of the board's colours: the last move, a hint. */
+export function Square({ grid, file, rank, class: name }) {
+    const { x, y } = corner(grid, file, rank);
+    return _jsx("rect", { class: name, x: x, y: y, width: grid.cell, height: grid.cell });
+}
+/** A piece of the chosen set by its FEN letter, on a square of the board. */
+export function PieceOn({ grid, file, rank, letter, class: name }) {
+    const { x, y } = corner(grid, file, rank);
+    return _jsx(PieceAt, { x: x, y: y, size: grid.cell, letter: letter, class: name });
+}
+/** A piece of the chosen set anywhere in the drawing, `size` wide, coloured by the settings as the board's. */
+export function PieceAt({ x, y, size, letter, class: name = "" }) {
+    const set = useContext(ChosenSet);
+    const side = letter === letter.toUpperCase() ? "white" : "black";
+    return _jsx("use", { href: pieceSymbol(letter, set), x: x, y: y, width: size, height: size, class: `piece ${side} ${name}` });
+}
+/** The pieces of a position, one string a rank from the 8th down, "." for an empty square: "....k..." */
+export function Pieces({ grid, ranks }) {
+    return (_jsx("g", { children: ranks.flatMap((row, index) => [...row].map((letter, file) => letter === "." ? null : _jsx(PieceOn, { grid: grid, file: file, rank: 8 - index, letter: letter }, `${file}${index}`))) }));
+}
+/** An arrow from one point to another, its shaft `width` wide, as the AI draws them on the board. */
+export function Arrow({ from, to, width, class: name }) {
+    return _jsx("polygon", { class: name, points: arrowPoints(from, to, width) });
+}
+/** The Torretta with its neutral face, `size` wide, its top-left corner at x, y; as a `bust`, as on a player's card, in a disc `size` wide, clipped to it. */
+export function Torretta({ x, y, size, bust = false }) {
+    const clip = useId();
+    if (bust) {
+        return (_jsxs("g", { transform: `translate(${x} ${y}) scale(${size / 96}) translate(-16 -8)`, children: [_jsx("clipPath", { id: clip, children: _jsx("circle", { cx: "64", cy: "56", r: "48" }) }), _jsx("circle", { class: "words", cx: "64", cy: "56", r: "48" }), _jsx("g", { "clip-path": `url(#${clip})`, children: _jsx(Figure, {}) })] }));
+    }
+    return (_jsx("g", { transform: `translate(${x} ${y}) scale(${size / 128})`, children: _jsx(Figure, {}) }));
+}
+/** A person's head and shoulders in a disc of `tone`, a class of drawings.css; `ring` draws the accent around it. */
+export function Face({ x, y, r, tone, ring = false }) {
+    const side = r * 0.7;
+    const low = y + r * 0.71;
+    return (_jsxs("g", { children: [ring && _jsx("circle", { class: "chosen", cx: x, cy: y, r: r + 3.5 }), _jsx("circle", { class: tone, cx: x, cy: y, r: r }), _jsx("circle", { class: "person", cx: x, cy: y - r * 0.2, r: r * 0.34 }), _jsx("path", { class: "person", d: `M${x - side} ${low}Q${x - side} ${y + r * 0.22} ${x} ${y + r * 0.22}Q${x + side} ${y + r * 0.22} ${x + side} ${low}A${r} ${r} 0 0 1 ${x - side} ${low}Z` })] }));
+}
+/** A move's badge, a disc and its sign: best (a tick), mistake (?) or blunder (??). */
+export function Badge({ x, y, r, kind }) {
+    return (_jsxs("g", { children: [_jsx("circle", { class: `judgement ${kind}`, cx: x, cy: y, r: r }), kind === "best" && _jsx("path", { class: "sign", style: { strokeWidth: r * 0.28 }, d: `M${x - r * 0.45} ${y + r * 0.02}L${x - r * 0.12} ${y + r * 0.36}L${x + r * 0.45} ${y - r * 0.32}` }), kind === "mistake" && _jsx(Question, { x: x, y: y, size: r }), kind === "blunder" && (_jsxs(_Fragment, { children: [_jsx(Question, { x: x - r * 0.36, y: y, size: r * 0.8 }), _jsx(Question, { x: x + r * 0.36, y: y, size: r * 0.8 })] }))] }));
+}
+/** A small clock face with its two hands. */
+export function Clock({ x, y, r, class: name = "clock" }) {
+    return (_jsxs("g", { class: name, children: [_jsx("circle", { cx: x, cy: y, r: r }), _jsx("path", { d: `M${x} ${y - r * 0.6}V${y}L${x + r * 0.45} ${y + r * 0.3}` })] }));
+}
+/** A chevron pointing left or right, centred on x, y. */
+export function Chevron({ x, y, size, left = false }) {
+    const reach = left ? -size / 2 : size / 2;
+    return _jsx("path", { d: `M${x - reach / 2} ${y - size / 2}L${x + reach / 2} ${y}L${x - reach / 2} ${y + size / 2}` });
+}
+/** The Torretta's figure on its own grid of 128, its disc's frame 16 8 96 96 as the page's bust. */
+function Figure() {
+    return (_jsxs("g", { class: "tower", children: [_jsx("path", { class: "antenna", d: "M64 31V19" }), _jsx("circle", { class: "light-bulb", cx: "64", cy: "16", r: "5" }), _jsx("rect", { class: "shade", x: "29", y: "64", width: "12", height: "26", rx: "2" }), _jsx("rect", { class: "shade", x: "87", y: "64", width: "12", height: "26", rx: "2" }), _jsx("path", { class: "body", d: "M34 30H47V40H57V30H71V40H81V30H94V54L89 58L92 106H36L39 58L34 54Z" }), _jsx("rect", { class: "shade", x: "30", y: "104", width: "68", height: "12", rx: "4" }), _jsx("rect", { class: "screen", x: "44", y: "63", width: "40", height: "32", rx: "7" }), _jsx("circle", { class: "features", cx: "55", cy: "76", r: "4.6" }), _jsx("circle", { class: "features", cx: "73", cy: "76", r: "4.6" }), _jsx("rect", { class: "features", x: "58", y: "85.4", width: "12", height: "3.2", rx: "1.6" })] }));
+}
+/** A question mark on a grid of one, `size` wide, centred on x, y. */
+function Question({ x, y, size }) {
+    return (_jsxs("g", { class: "sign", transform: `translate(${x} ${y}) scale(${size})`, children: [_jsx("path", { style: { strokeWidth: 0.24 }, d: "M-0.3 -0.22Q-0.3 -0.55 0 -0.55Q0.3 -0.55 0.3 -0.25Q0.3 -0.02 0 0.08V0.2" }), _jsx("circle", { class: "dot", cy: "0.48", r: "0.14" })] }));
+}
+function darkSquares(grid) {
+    const steps = [];
+    for (let row = 0; row < 8; row++) {
+        for (let column = 0; column < 8; column++) {
+            if ((row + column) % 2 === 1) {
+                steps.push(`M${grid.x + column * grid.cell} ${grid.y + row * grid.cell}h${grid.cell}v${grid.cell}h${-grid.cell}z`);
+            }
+        }
+    }
+    return steps.join("");
+}
+function arrowPoints(from, to, width) {
+    const length = Math.hypot(to.x - from.x, to.y - from.y);
+    const along = { x: (to.x - from.x) / length, y: (to.y - from.y) / length };
+    const across = { x: -along.y, y: along.x };
+    const head = width * 2.2;
+    const neck = { x: to.x - along.x * head, y: to.y - along.y * head };
+    const at = (base, side) => `${(base.x + across.x * side).toFixed(1)},${(base.y + across.y * side).toFixed(1)}`;
+    return [at(from, width / 2), at(neck, width / 2), at(neck, width * 1.15), `${to.x},${to.y}`, at(neck, -width * 1.15), at(neck, -width / 2), at(from, -width / 2)].join(" ");
+}

package/dist/page/guide/drawings/players.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The players: the player's face in the header, ringed, and under it the window of the players, the one in use ticked, with the pencil to their profile
+import { Bar, Card, Face, Torretta } from "./parts.js";
+/** The players in the window, from the top: the player's own is the second. */
+const players = [{ tone: "tone-2", name: 58 }, { tone: "tone-player", name: 46 }, { tone: "tone-6", name: 66 }];
+const own = 1;
+const row = { x: 136, y: 102, width: 298, height: 28, step: 34 };
+/** A strip of the header with the player's face at its end, and the window «Chi gioca?» it opens. */
+export function Players() {
+    return (_jsxs("svg", { class: "guide-art", viewBox: "0 0 480 220", "aria-hidden": "true", children: [_jsx(Card, { x: 16, y: 10, width: 448, height: 36 }), _jsx(Torretta, { x: 22, y: 11, size: 34 }), _jsx("rect", { class: "quote", x: "64", y: "19", width: "60", height: "18", rx: "9" }), [350, 376, 402].map((x) => _jsx("rect", { class: "field", x: x, y: "18", width: "20", height: "20", rx: "5" }, x)), _jsx(Face, { x: 442, y: 28, r: 11, tone: "tone-player", ring: true }), _jsx("rect", { class: "lift-shadow", x: "121", y: "63", width: "330", height: "150", rx: "6" }), _jsx(Card, { x: 120, y: 60, width: 330, height: 150 }), _jsx(Bar, { x: 136, y: 73, width: 62, strong: true }), _jsx("path", { class: "soft-line", d: "M426 70L434 78M434 70L426 78" }), _jsx(Bar, { x: 136, y: 88, width: 120 }), players.map((player, index) => _jsx(PlayerRow, { index: index, tone: player.tone, name: player.name }, player.tone))] }));
+}
+/** A line of the window: a face and a name; the player's own is ticked and has the pencil beside it. */
+function PlayerRow({ index, tone, name }) {
+    const y = row.y + index * row.step;
+    const middle = y + row.height / 2;
+    const mine = index === own;
+    const width = mine ? row.width - row.height - 6 : row.width;
+    return (_jsxs("g", { children: [_jsx(Card, { x: row.x, y: y, width: width, height: row.height }), _jsx(Face, { x: row.x + 16, y: middle, r: 9, tone: tone }), _jsx(Bar, { x: row.x + 32, y: middle - 2.5, width: name, strong: true }), mine && (_jsxs(_Fragment, { children: [_jsx("path", { class: "tick", d: `M${row.x + width - 26} ${middle}l4 4l7 -8` }), _jsx(Card, { x: row.x + row.width - row.height, y: y, width: row.height, height: row.height }), _jsxs("g", { class: "pencil", transform: `translate(${row.x + row.width - row.height + 6} ${y + 6}) scale(0.667)`, children: [_jsx("path", { d: "M4 20L5 15L15.5 4.5L19.5 8.5L9 19Z" }), _jsx("path", { d: "M13.5 6.5L17.5 10.5" })] })] }))] }));
+}

package/dist/page/guide/drawings/talk.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// Talking to the AI: under its name, the player's question, its answer, and the box where the player writes, beside the board
+import { Bar, Board, Card, Chevron, Pieces, Torretta } from "./parts.js";
+const grid = { x: 256, y: 10, cell: 30 };
+const position = [".....rk.", ".....ppp", "..n.....", "....p...", "..B.P...", ".....N..", ".....PPP", "......K."];
+/** The AI's card, the talk under it and the box with its send button, the board cut by the drawing's edge. */
+export function Talk() {
+    return (_jsxs("svg", { class: "guide-art", viewBox: "0 0 480 220", "aria-hidden": "true", children: [_jsx(Board, { grid: grid, children: _jsx(Pieces, { grid: grid, ranks: position }) }), _jsx(Card, { x: 16, y: 10, width: 220, height: 46 }), _jsx(Torretta, { x: 18, y: 13, size: 36, bust: true }), _jsx(Bar, { x: 58, y: 24, width: 56, strong: true }), _jsx(Bar, { x: 58, y: 35, width: 34 }), _jsx(Card, { x: 86, y: 66, width: 150, height: 24 }), _jsx(Bar, { x: 96, y: 75.5, width: 110, strong: true }), _jsx(Card, { x: 16, y: 100, width: 200, height: 42, class: "words" }), _jsx(Bar, { x: 26, y: 111, width: 170, class: "bar on-words" }), _jsx(Bar, { x: 26, y: 123, width: 120, class: "bar on-words" }), _jsx(Card, { x: 16, y: 154, width: 220, height: 56, class: "paper focused" }), _jsx(Bar, { x: 28, y: 168, width: 104 }), _jsx("rect", { class: "caret", x: "136", y: "163", width: "2", height: "15", rx: "1" }), _jsx("rect", { class: "accent", x: "176", y: "187", width: "50", height: "16", rx: "8" }), _jsx(Bar, { x: 186, y: 192.5, width: 18, class: "bar on-accent" }), _jsx("g", { class: "on-accent-line", children: _jsx(Chevron, { x: 213, y: 195, size: 7 }) })] }));
+}

package/dist/page/guide/en.md

@@ -1,9 +1,11 @@
 # Chesspal: the guide
 
-With **Chesspal** you play chess against an **AI**, on a real board in your browser, and learn with it. This guide is for players: you do not need to know how to program.
+With **Chesspal** you play chess against an **AI**, on a real board, and learn with it. This guide is for players: you do not need to know how to program.
 
 ## How it works
 
+![The page with the board and the AI's chat window, joined by a thread](how-it-works)
+
 | Who | What they do |
 |---|---|
 | **You** | You move on the board and talk with the AI. |
@@ -14,53 +16,65 @@ There are two windows: this **page**, with the board, and the AI's **chat**, in
 
 No chess engine plays for the AI: every move and every judgment is its own. Chesspal checks that each move is legal and tells the AI what is on the board: the pieces attacked and defended, the pins, the opening's name.
 
-## Quick start
-
-1. Install **Node.js** from [nodejs.org](https://nodejs.org), the recommended (LTS) version, and an AI with your own subscription: **Claude Code** or **Codex**.
-2. Open a terminal, the window where you type commands (on Windows, Command Prompt: press Start, type `cmd`, press Enter; on macOS, Terminal), and type `npm install -g chesspal`, then `chesspal`: this page opens. The first time it offers an icon on your desktop, to open it with a double click.
-3. Press **Claude Code** or **Codex**: the AI's chat opens in a window of its own. Keep it open while you play.
-4. Press **New game**, choose your colour, the clock and the AI's level, and press **Start**.
-
-## If you are lost
-
-- **The AI does not answer**: look at its window. If it is asking you something, answer there; if you closed it, press **Claude Code** or **Codex** again.
-- **The page does not open**: double-click Chesspal's icon, or open it as in the [Quick start](#quick-start).
-- **Your games** are in a folder on your computer: **Who's playing?**, from your picture at the top right, shows where, and **Open the folder** opens it.
+### Getting started
 
-## The AI's chat
-
-- The page opens the AI's **chat** with its buttons, in a window of its own: there the AI thinks and writes. Beside the buttons you choose its model (the version of the AI) and how much it reasons: the more it reasons, the slower it plays.
-- You talk with the AI in the box under its name, a few words with each move: it reads them with your move. You can also write to it in its window.
-- A **move written** in the chat counts too: `e4`, `Nf3`, with the English letters of the pieces (K Q R B N), or in words.
-- At each **new game**, the chat the page opened starts again clean by itself, once the AI has stopped thinking: a long chat makes the AI slower.
+1. Click the **AI's name**, at the top left, and choose its chat among those on your computer: **Claude Code** or **Codex**. It opens in a window of its own: keep it open while you play.
+2. Press **New game**, choose your colour, the clock and the AI's level, and press **Start**.
+3. Move: the AI answers on the board, and with a few words under its name.
 
 ## The game
 
+![The board with the dots of the legal moves and a piece moving](game)
+
 - **Move** by dragging a piece, or by clicking the piece and then its square. The dots show the legal moves; when a move is not allowed, the page says why.
 - **The clock**, if you chose one, starts with **Start**. The AI has its own and knows how much time it has left.
 - **Offer a draw** on your turn, once each side has moved; **Resign** ends the game.
-- **The helps**: with "The AI teaches as you play", in the settings, the **Helps** card shows the pieces in danger, the pins and the pawns, and the AI, as your coach, gives you an idea. The AI draws coloured arrows on the board: the **?** beside the moves explains every mark.
 - **Flip** turns the board round; **PGN** saves the moves in the file every chess site reads, to open on Lichess or Chess.com.
 
+## Talking with the AI
+
+![The box to write in under the AI's name, and its answer](talk)
+
+- You talk with the AI in the **box under its name**, a few words with each move: it reads them with your move. You can also write to it in its window.
+- A **move written** in the chat counts too: `e4`, `Nf3`, with the English letters of the pieces (K Q R B N), or in words.
+- **The AI's name** opens the choice of its chat: Claude Code or Codex, the model (which AI: some are faster, others stronger) and how much it reasons. The more it reasons, the slower it plays. If you change them, the chat starts afresh in the same window: the AI forgets what you talked about, and the game stays as it is.
+- At each **new game**, the chat the page opened starts afresh by itself, once the AI has stopped thinking: a long chat makes the AI slower.
+
+## Helps and marks
+
+![Coloured arrows and badges on the board, beside the helps' card](helps)
+
+- With **"The AI teaches as you play"**, in the settings, the **Helps** card shows the pieces in danger, the pins and the pawns, and the AI, as your coach, gives you an idea.
+- The AI draws **coloured arrows** on the board: the **?** beside the moves explains every mark.
+- In the review, a **badge** on a move gives the AI's judgment: a great move, an inaccuracy, a blunder.
+
 ## Review and analysis
 
-- When the game is over, press **Analyse the game**: the AI goes over it and puts its judgments and notes on the moves. Read them by stepping through the moves with the arrows.
+![The bar that steps through the moves, and the judgments on the moves](analysis)
+
+- When the game is over, press **Analyse the game**: the AI goes over it and puts its judgments and notes on the moves. Read them by stepping through the moves with the arrows at the foot of the column, or by clicking a move.
 - **Analyses**, in the header, opens your analyses, and loads a game played elsewhere: paste its PGN, or choose a .pgn file.
 - Ask the AI about the game in the box under its name.
 - **Annotated PGN** saves the game with its comments.
 
 ## Players and profile
 
-- **Who's playing?**: your picture at the top right chooses a player or adds one. Each has their own games and settings.
-- **Your profile**: a click on your picture beside the board, or the pencil in **Who's playing?**, changes your picture, your name, how you play, your names on Lichess and Chess.com and your FIDE rating.
+![Your picture at the top right and the Who's playing? window](players)
+
+- **Who's playing?**: your picture at the top right, or your name beside the board, opens the list of the players: there you choose one or add one. Each has their own games and settings.
+- **Your profile**: in **Who's playing?**, the pencil beside your name changes your picture, your name, how you play, your names on Lichess and Chess.com and your FIDE rating.
 - **Your rating**: from your names there, Chesspal reads your public rating, the one of your rapid games if you play them, and tells the AI. No passwords: anyone can see that rating on the site. Without a name there, the AI knows how you play from **How do you play?**
 - **Your FIDE rating**, if you play tournaments, you type yourself: no site gives it to Chesspal. The AI reads it beside the site's, each on its own.
 - If you load a game played on Lichess or Chess.com, Chesspal knows which colour you played.
 
 ## Questions and problems
 
-- **The AI is slow**: it really thinks over each move. Choose a faster model, or less reasoning, beside the chat's buttons.
+- **The AI does not answer, and its clock runs**: look at its window, which may have gone behind the others: find it in the bar at the bottom. If it is asking you something, answer there; if you closed it, click the AI's name and open another.
+- **The AI is slow**: it really thinks over each move. From its name, choose a faster model, or less reasoning.
+- **A piece does not move**: it is not your turn, or the move is not allowed; the page says why.
+- **Closed the page?** Open it again from Chesspal's icon, on the desktop or in the menu: the game you left halfway is still there.
+- **Your games** are in a folder on your computer: **Who's playing?**, from your picture at the top right, shows where, and **Open the folder** opens it. For a backup copy it, with the chat and the page closed.
+- **A new version of Chesspal**: an arrow at the top tells you, and installs it between games.
 - **What it costs**: Chesspal is free; the AI uses your own subscription, and you pay nothing more.
 - **Can the AI play an illegal move?** No: Chesspal checks every move. Its judgments are its own, though, and an AI can be wrong, like a person.
-- **A backup**: copy the folder of your games, with the chat and the page closed.
 - **Something does not work?** Tell us on [GitHub](https://github.com/stefanocaronia/chesspal/issues): what you did, what you expected, what happened. GitHub is the site where Chesspal is made: you write there with a free account, and anyone can read it.

package/dist/page/guide/guide.css

@@ -1,11 +1,19 @@
-/* The guide: a tall dialog, an index of chips, each part folding under its title, and the foot with who made Chesspal and the credits (Zoe) */
+/* The guide: a wide dialog, the index of its pages beside the page shown, and at the dialog's foot, on every page, the arrows to the one before and after
+   (Zoe) */
 
 .dialog:has(> .guide) {
+    width: min(900px, calc(100vw - 32px));
     height: calc(100vh - 48px);
     max-height: 90vh;
 }
 
+/* As tall as the dialog under its title, so that a short page keeps its arrows at the foot */
 .guide {
+    display: grid;
+    grid-template-columns: 200px minmax(0, 1fr);
+    gap: 28px;
+    align-items: start;
+    min-height: calc(100% - 60px);
     font-size: 14px;
     line-height: 1.55;
 }
@@ -36,76 +44,69 @@
     font-size: 13px;
 }
 
-/* A heading a chip or a link brings into sight stays under the dialog's own title */
+/* A heading a link brings into sight stays under the dialog's own title */
 .guide [id] {
     scroll-margin-top: 64px;
 }
 
+/* The index: the pages' titles, the one shown marked by a bar at its start; it stays in sight while the page scrolls */
 .guide-index {
+    position: sticky;
+    top: 60px;
     display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 4px 0 14px;
+    flex-direction: column;
+    gap: 2px;
+    margin-top: 4px;
 }
 
 .guide-chip {
     min-height: 32px;
-    padding: 5px 12px;
-    border: 1px solid var(--line);
-    border-radius: 999px;
-    background: var(--card);
-    color: var(--ink);
+    padding: 6px 12px;
+    border: 0;
+    border-radius: 0 8px 8px 0;
+    background: none;
+    color: var(--soft);
     font: inherit;
-    font-size: 13px;
+    font-size: 13.5px;
+    text-align: start;
+    cursor: pointer;
 }
 
 .guide-chip:hover {
-    border-color: var(--accent);
-    color: var(--accent);
+    color: var(--ink);
 }
 
-/* A part: its title, a chevron that turns when it opens */
-.guide-part {
-    border-top: 1px solid var(--line);
+.guide-chip[aria-current="page"] {
+    background: var(--quote);
+    box-shadow: inset 3px 0 0 var(--accent);
+    color: var(--ink);
+    font-weight: 600;
 }
 
-.guide-part summary {
+.guide-page {
     display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 0;
-    cursor: pointer;
-    list-style: none;
-}
-
-.guide-part summary::-webkit-details-marker {
-    display: none;
+    flex-direction: column;
+    align-self: stretch;
 }
 
-.guide-part summary::before,
-.credits summary::before {
-    content: "";
-    width: 7px;
-    height: 7px;
-    border-right: 1.7px solid var(--soft);
-    border-bottom: 1.7px solid var(--soft);
-    transform: rotate(-45deg);
-    transition: transform 0.15s;
+/* The page's text grows to push the arrows to the foot */
+.guide-text {
+    flex: 1 0 auto;
+    margin-bottom: 22px;
 }
 
-.guide-part[open] summary::before,
-.credits[open] summary::before {
-    transform: rotate(45deg);
-}
-
-.guide-part h3 {
-    margin: 0;
-    font-size: 16px;
+/* The page's title takes the focus when the page turns, for a screen reader: no ring, since no key brought it there */
+.guide-page h3 {
+    margin: 4px 0 12px;
+    font-size: 19px;
     font-weight: 600;
+    outline: none;
 }
 
-.guide-part[open] {
-    padding-bottom: 6px;
+.guide-page h4 {
+    margin: 16px 0 6px;
+    font-size: 15px;
+    font-weight: 600;
 }
 
 .guide-table {
@@ -125,68 +126,99 @@
     vertical-align: top;
 }
 
-/* The foot: who made Chesspal, where it lives, the heart that supports it; the credits folded under it */
-.guide-foot {
-    display: grid;
-    gap: 6px;
-    margin-top: 18px;
-    padding-top: 14px;
+/* The arrows to the page before and after, each with its title: at the foot of a short page, and at the dialog's foot over a long one */
+.guide-turn {
+    position: sticky;
+    bottom: 0;
+    display: flex;
+    gap: 12px;
+    padding: 14px 0 4px;
     border-top: 1px solid var(--line);
-    color: var(--soft);
-    font-size: 12.5px;
-    text-align: center;
-}
-
-.guide-foot p {
-    margin: 0;
+    background: var(--card);
 }
 
-.foot-own {
-    display: flex;
-    flex-wrap: wrap;
+.guide-turn button {
+    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    gap: 6px 14px;
+    gap: 6px;
+    min-height: 36px;
+    padding: 6px 12px;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: var(--card);
+    color: var(--ink);
+    font: inherit;
+    font-size: 13.5px;
+    cursor: pointer;
 }
 
-.guide .foot-own a {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    color: inherit;
-    text-decoration: none;
+.guide-turn button:hover {
+    border-color: var(--accent);
+    color: var(--accent);
 }
 
-.guide .foot-own a:hover,
-.guide .foot-own a:focus-visible {
-    color: var(--ink);
+.guide-turn .next {
+    margin-inline-start: auto;
 }
 
-.foot-own .icon {
+.guide-turn .icon {
     width: 16px;
     height: 16px;
-}
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+/* On a narrow screen the index is one row of chips over the page, scrolled sideways, its end fading where more follow; the arrows share the page's
+   width at its foot, each title by its arrow */
+@media (max-width: 640px) {
+    .guide {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: auto 1fr;
+        gap: 14px;
+    }
 
-.foot-support .icon {
-    color: var(--low-time);
-}
+    .guide-index {
+        position: static;
+        flex-direction: row;
+        gap: 6px;
+        overflow-x: auto;
+        scrollbar-width: none;
+        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
+    }
 
-.credits summary {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    cursor: pointer;
-    list-style: none;
-}
+    .guide-index::-webkit-scrollbar {
+        display: none;
+    }
 
-.credits summary::-webkit-details-marker {
-    display: none;
-}
+    .guide-chip {
+        flex: none;
+        border: 1px solid var(--line);
+        border-radius: 999px;
+        font-size: 13px;
+        white-space: nowrap;
+    }
 
-.credits ul {
-    margin: 8px auto 0;
-    max-width: 60ch;
-    text-align: start;
+    .guide-chip[aria-current="page"] {
+        box-shadow: none;
+        border-color: var(--accent);
+    }
+
+    .guide-turn {
+        position: static;
+    }
+
+    .guide-turn button {
+        flex: 1 1 0;
+        min-width: 0;
+    }
+
+    .guide-turn .next {
+        justify-content: flex-end;
+        text-align: end;
+    }
 }
 
 @media (max-width: 600px) {