chesspal 0.3.1 → 0.3.3

package/dist/page/guide/guide.js

@@ -1,41 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-// The guide, from the book in the header: how to play, in the page's language (guide/<code>.md), an index of chips, its parts folding, the first two
-// open, and its foot; its anchors are the English guide's, so that a link finds its heading in both languages.
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+// The guide, from the book in the header: how to play, in the page's language (guide/<code>.md), a page at a time, chosen in its index or with the arrows at
+// its foot, the credits the last; its anchors are the English guide's, so that a link finds its heading in both languages.
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { Dialog } from "../dialogs/dialog.js";
 import { anchorOf, markdownBlocks } from "./blocks.js";
-import { GuideFoot } from "./foot.js";
-import { Blocks, Inline } from "./markdown.js";
+import { GuideCredits } from "./credits.js";
+import { Blocks } from "./markdown.js";
 /** The guide in its dialog. */
 export function GuideDialog({ open, onClose, text }) {
     return (_jsx(Dialog, { open: open, title: text.guide.title, onClose: onClose, text: text, children: _jsx(Guide, { text: text }) }));
 }
 function Guide({ text }) {
+    const words = text.guide;
     const guide = useGuide(text.language);
-    const [open, setOpen] = useState(() => new Set([0, 1]));
+    const { lead, pages, anchors } = useMemo(() => guidePages(guide.own, guide.english), [guide]);
+    const [shown, setShown] = useState(0);
+    // The heading to bring into sight once its page is drawn: "" for the page's top.
     const [sought, setSought] = useState();
-    const { lead, parts, anchors } = useMemo(() => guideParts(guide.own, guide.english), [guide]);
-    const toggle = (index, event) => {
-        event.preventDefault();
-        setOpen((before) => new Set(before.has(index) ? [...before].filter((one) => one !== index) : [...before, index]));
+    const top = useRef(null);
+    const title = useRef(null);
+    const titles = [...pages.map((page) => page.heading.text), words.credits];
+    const page = pages[shown];
+    const show = (index, id = "") => {
+        setShown(index);
+        setSought(id);
     };
-    // A chip of the index, or a link to a heading, opens its part and brings the heading into sight.
-    const go = (id) => {
-        const index = parts.findIndex((part) => [part.heading, ...part.blocks].some((block) => anchors.get(block) === id));
+    // A link to a heading shows its page, and the heading in it.
+    const go = (anchor) => {
+        const id = idOf(anchor);
+        const index = pages.findIndex((one) => [one.heading, ...one.blocks].some((block) => anchors.get(block) === id));
         if (index >= 0) {
-            setOpen((before) => new Set([...before, index]));
-            setSought(id);
+            show(index, id);
         }
     };
-    const goToAnchor = (anchor) => go(idOf(anchor));
+    // A page turned: its chip in sight in the index, the focus on its title, which a screen reader says, and its top or the heading sought in sight.
     useEffect(() => {
         if (sought === undefined) {
             return;
         }
         setSought(undefined);
-        document.getElementById(sought)?.scrollIntoView({ block: "start", behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
+        top.current?.querySelector(".guide-chip[aria-current]")?.scrollIntoView({ inline: "center", block: "nearest" });
+        title.current?.focus({ preventScroll: true });
+        const heading = sought === "" ? null : document.getElementById(sought);
+        if (heading === null) {
+            top.current?.closest("dialog")?.scrollTo({ top: 0 });
+        }
+        else {
+            heading.scrollIntoView({ block: "start" });
+        }
     }, [sought]);
-    return (_jsxs("div", { class: "guide", children: [_jsx(Blocks, { blocks: lead, anchors: anchors, go: goToAnchor }), _jsx("nav", { class: "guide-index", "aria-label": text.guide.contents, children: parts.map((part) => (_jsx("button", { type: "button", class: "guide-chip", onClick: () => go(anchors.get(part.heading) ?? ""), children: _jsx(Inline, { text: part.heading.text, go: goToAnchor }) }, part.heading.text))) }), parts.map((part, index) => (_jsxs("details", { id: anchors.get(part.heading), class: "guide-part", open: open.has(index), children: [_jsx("summary", { onClick: (event) => toggle(index, event), children: _jsx("h3", { children: part.heading.text }) }), _jsx(Blocks, { blocks: part.blocks, anchors: anchors, go: goToAnchor })] }, part.heading.text))), _jsx(GuideFoot, { text: text })] }));
+    if (pages.length === 0) {
+        return _jsx("div", { class: "guide", ref: top });
+    }
+    return (_jsxs("div", { class: "guide", ref: top, children: [_jsx("nav", { class: "guide-index", "aria-label": words.contents, children: titles.map((title, index) => (_jsx("button", { type: "button", class: "guide-chip", "aria-current": index === shown ? "page" : undefined, onClick: () => show(index), children: title }, title))) }), _jsxs("article", { class: "guide-page", children: [_jsxs("div", { class: "guide-text", children: [_jsx("h3", { id: page === undefined ? undefined : anchors.get(page.heading), ref: title, tabIndex: -1, children: titles[shown] }), page === undefined ? _jsx(GuideCredits, { text: text }) : (_jsxs(_Fragment, { children: [shown === 0 ? _jsx(Blocks, { blocks: lead, anchors: anchors, go: go }) : null, _jsx(Blocks, { blocks: page.blocks, anchors: anchors, go: go })] }))] }), _jsxs("div", { class: "guide-turn", children: [shown === 0 ? null : _jsx(TurnButton, { back: true, title: titles[shown - 1] ?? "", label: words.previous, onTurn: () => show(shown - 1) }), shown === titles.length - 1 ? null : _jsx(TurnButton, { title: titles[shown + 1] ?? "", label: words.next, onTurn: () => show(shown + 1) })] })] })] }));
+}
+/** An arrow at a page's foot, with the title of the page it shows. */
+function TurnButton({ back = false, title, label, onTurn }) {
+    const arrow = (_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: back ? "M14.5 6L8.5 12L14.5 18" : "M9.5 6L15.5 12L9.5 18" }) }));
+    return (_jsxs("button", { type: "button", class: back ? "back" : "next", "aria-label": `${label}: ${title}`, onClick: onTurn, children: [back ? arrow : null, title, back ? null : arrow] }));
 }
 /** The guide in a language, and in English for its anchors; empty until they are read. */
 function useGuide(language) {
@@ -63,8 +85,8 @@ function guideIn(language) {
         return "";
     });
 }
-/** The guide's lead, the lines before its first part, its title aside; its parts; and each heading's anchor, the English one at its place. */
-function guideParts(own, english) {
+/** The guide's lead, the lines before its first page, its title aside; its pages; and each heading's anchor, the English one at its place. */
+function guidePages(own, english) {
     const blocks = markdownBlocks(own);
     const headings = blocks.filter((block) => block.kind === "heading");
     const englishHeadings = markdownBlocks(english).filter((block) => block.kind === "heading");
@@ -72,16 +94,16 @@ function guideParts(own, english) {
     const anchors = new Map(headings.map((heading, index) => [heading, idOf(anchorOf((sameShape ? englishHeadings[index] : heading)?.text ?? heading.text))]));
     const first = blocks.findIndex((block) => block.kind === "heading" && block.level === 2);
     const lead = (first < 0 ? blocks : blocks.slice(0, first)).filter((block) => !(block.kind === "heading" && block.level === 1));
-    const parts = [];
+    const pages = [];
     for (const block of first < 0 ? [] : blocks.slice(first)) {
         if (block.kind === "heading" && block.level === 2) {
-            parts.push({ heading: block, blocks: [] });
+            pages.push({ heading: block, blocks: [] });
         }
         else {
-            parts.at(-1)?.blocks.push(block);
+            pages.at(-1)?.blocks.push(block);
         }
     }
-    return { lead, parts, anchors };
+    return { lead, pages, anchors };
 }
 // A heading's id on the page, apart from the page's own.
 function idOf(anchor) {

package/dist/page/guide/it.md

@@ -1,9 +1,11 @@
 # Chesspal: la guida
 
-Con **Chesspal** giochi a scacchi contro un'**AI**, su una scacchiera vera nel browser, e impari con lei. Questa guida è per chi gioca: non serve saper programmare.
+Con **Chesspal** giochi a scacchi contro un'**AI**, su una scacchiera vera, e impari con lei. Questa guida è per chi gioca: non serve saper programmare.
 
 ## Come funziona
 
+![La pagina con la scacchiera e la finestra della chat dell'AI, unite da un filo](how-it-works)
+
 | Chi | Cosa fa |
 |---|---|
 | **Tu** | Muovi sulla scacchiera e parli con l'AI. |
@@ -14,53 +16,65 @@ Le finestre sono due: questa **pagina**, con la scacchiera, e la **chat** dell'A
 
 Nessun motore di scacchi gioca al posto dell'AI: ogni mossa e ogni giudizio sono suoi. Chesspal controlla che ogni mossa sia legale e dice all'AI cosa c'è sulla scacchiera: i pezzi attaccati e difesi, le inchiodature, il nome dell'apertura.
 
-## Avvio rapido
-
-1. Installa **Node.js** da [nodejs.org](https://nodejs.org), la versione consigliata (LTS), e un'AI col tuo abbonamento: **Claude Code** o **Codex**.
-2. Apri un terminale, la finestra dove si scrivono i comandi (su Windows il Prompt dei comandi: tasto Start, scrivi `cmd`, Invio; su macOS il Terminale), e scrivi `npm install -g chesspal`, poi `chesspal`: si apre questa pagina. La prima volta ti propone un'icona sul desktop, per aprirla con un doppio clic.
-3. Premi **Claude Code** o **Codex**: la chat dell'AI si apre in una finestra sua. Tienila aperta mentre giochi.
-4. Premi **Nuova partita**, scegli il colore, l'orologio e il livello dell'AI, e premi **Inizia**.
-
-## Se ti sei perso
-
-- **L'AI non risponde**: guarda la sua finestra. Se ti sta chiedendo qualcosa, rispondi lì; se l'hai chiusa, premi di nuovo **Claude Code** o **Codex**.
-- **La pagina non si apre**: fai doppio clic sull'icona di Chesspal, o aprila come nell'[Avvio rapido](#quick-start).
-- **Le tue partite** stanno in una cartella sul tuo computer: **Chi gioca?**, dalla tua immagine in alto a destra, dice dove, e **Apri la cartella** la apre.
+### Per cominciare
 
-## La chat dell'AI
-
-- La pagina apre la **chat** dell'AI coi suoi pulsanti, in una finestra a parte: lì l'AI pensa e scrive. Accanto ai pulsanti scegli il modello (la versione dell'AI) e quanto ragiona: più ragiona, più gioca lenta.
-- Parli con l'AI nella casella sotto il suo nome, qualche parola a ogni mossa: le legge con la tua mossa. Puoi scriverle anche nella sua finestra.
-- Anche una **mossa scritta** nella chat vale: `e4`, `Nf3`, con le lettere inglesi dei pezzi (K Q R B N), o a parole.
-- A ogni **nuova partita** la chat aperta dalla pagina riparte pulita da sola, se l'AI ha finito di pensare: una chat lunga rende l'AI più lenta.
+1. Clicca il **nome dell'AI**, in alto a sinistra, e scegli la chat fra quelle che hai sul computer: **Claude Code** o **Codex**. Si apre in una finestra sua: tienila aperta mentre giochi.
+2. Premi **Nuova partita**, scegli il colore, l'orologio e il livello dell'AI, e premi **Inizia**.
+3. Muovi: l'AI risponde sulla scacchiera, e con qualche parola sotto il suo nome.
 
 ## La partita
 
+![La scacchiera coi pallini delle mosse legali e un pezzo che si sposta](game)
+
 - **Muovi** trascinando un pezzo, o cliccando il pezzo e poi la sua casa. I pallini segnano le mosse legali; quando una mossa è vietata, la pagina dice perché.
 - **L'orologio**, se ne hai scelto uno, parte con **Inizia**. Anche l'AI ha il suo, e sa quanto tempo le resta.
 - **Proponi patta** nel tuo turno, dopo una mossa a testa; **Abbandona** chiude la partita.
-- **Gli aiuti**: con «L'AI ti insegna mentre giochi», nelle impostazioni, la scheda **Aiuti** mostra i pezzi in pericolo, le inchiodature e i pedoni, e l'AI, da allenatore, ti dà un'idea. L'AI disegna frecce colorate sulla scacchiera: il **?** accanto alle mosse spiega ogni segno.
 - **Gira** volta la scacchiera; **PGN** salva le mosse nel file che leggono tutti i siti di scacchi, da aprire su Lichess o Chess.com.
 
+## Parlare con l'AI
+
+![La casella per scrivere sotto il nome dell'AI, e la sua risposta](talk)
+
+- Parli con l'AI nella **casella sotto il suo nome**, qualche parola a ogni mossa: le legge con la tua mossa. Puoi scriverle anche nella sua finestra.
+- Anche una **mossa scritta** nella chat vale: `e4`, `Nf3`, con le lettere inglesi dei pezzi (K Q R B N), o a parole.
+- **Il nome dell'AI** apre la scelta della chat: Claude Code o Codex, il modello (quale AI: alcune sono più veloci, altre più forti) e quanto ragiona. Più ragiona, più gioca lenta. Se cambi, la chat riparte da capo nella stessa finestra: l'AI dimentica la chiacchierata di prima, la partita resta com'è.
+- A ogni **nuova partita** la chat aperta dalla pagina riparte da capo da sola, se l'AI ha finito di pensare: una chat lunga rende l'AI più lenta.
+
+## Gli aiuti e i segni
+
+![Frecce colorate e bollini sulla scacchiera, accanto alla scheda degli aiuti](helps)
+
+- Con **«L'AI ti insegna mentre giochi»**, nelle impostazioni, la scheda **Aiuti** mostra i pezzi in pericolo, le inchiodature e i pedoni, e l'AI, da allenatore, ti dà un'idea.
+- L'AI disegna **frecce colorate** sulla scacchiera: il **?** accanto alle mosse spiega ogni segno.
+- Nel ripasso, un **bollino** su una mossa dice il giudizio dell'AI: un'ottima mossa, un'imprecisione, un errore grave.
+
 ## Il ripasso e l'analisi
 
-- A partita finita premi **Analizza la partita**: l'AI la ripassa e mette sulle mosse i suoi giudizi e le sue note. Le leggi scorrendo le mosse con le frecce.
+![La barra per scorrere le mosse e i giudizi sulle mosse](analysis)
+
+- A partita finita premi **Analizza la partita**: l'AI la ripassa e mette sulle mosse i suoi giudizi e le sue note. Le leggi scorrendo le mosse con le frecce in fondo alla colonna, o cliccando una mossa.
 - **Analisi**, nell'intestazione, apre le tue analisi e carica una partita giocata altrove: incolla il suo PGN, o scegli un file .pgn.
 - Chiedi all'AI della partita nella casella sotto il suo nome.
 - **PGN annotato** salva la partita coi commenti.
 
 ## I giocatori e il profilo
 
-- **Chi gioca?**: la tua immagine in alto a destra sceglie un giocatore o ne aggiunge uno. Ognuno ha le sue partite e le sue impostazioni.
-- **Il tuo profilo**: un clic sulla tua immagine accanto alla scacchiera, o la matita in **Chi gioca?**, cambia la tua immagine, il nome, come giochi, i tuoi nomi su Lichess e Chess.com e il tuo punteggio FIDE.
+![La tua immagine in alto a destra e la finestra Chi gioca?](players)
+
+- **Chi gioca?**: la tua immagine in alto a destra, o il tuo nome accanto alla scacchiera, apre l'elenco dei giocatori: lì ne scegli uno o ne aggiungi uno. Ognuno ha le sue partite e le sue impostazioni.
+- **Il tuo profilo**: in **Chi gioca?**, la matita accanto al tuo nome cambia la tua immagine, il nome, come giochi, i tuoi nomi su Lichess e Chess.com e il tuo punteggio FIDE.
 - **Il tuo punteggio**: dai tuoi nomi lì, Chesspal legge il tuo punteggio pubblico, quello delle partite rapide se le giochi, e lo dice all'AI. Niente password: quel punteggio lo vede chiunque sul sito. Senza un nome lì, l'AI sa come giochi da **Come giochi?**
 - **Il punteggio FIDE**, se giochi tornei, lo scrivi tu: nessun sito lo dà a Chesspal. L'AI lo legge accanto a quello del sito, ognuno per sé.
 - Se carichi una partita giocata su Lichess o Chess.com, Chesspal sa da che colore giocavi tu.
 
 ## Domande e problemi
 
-- **L'AI è lenta**: ogni mossa la pensa davvero. Scegli un modello più veloce, o meno ragionamento, accanto ai pulsanti della chat.
+- **L'AI non risponde, e il suo orologio corre**: guarda la sua finestra, che può essere finita dietro le altre: cercala nella barra in basso. Se ti sta chiedendo qualcosa, rispondi lì; se l'hai chiusa, clicca il nome dell'AI e aprine un'altra.
+- **L'AI è lenta**: ogni mossa la pensa davvero. Dal suo nome scegli un modello più veloce, o meno ragionamento.
+- **Un pezzo non si muove**: non è il tuo turno, o la mossa è vietata; la pagina dice perché.
+- **Hai chiuso la pagina?** Riaprila dall'icona di Chesspal, sul desktop o nel menu: la partita lasciata a metà è ancora lì.
+- **Le tue partite** stanno in una cartella sul tuo computer: **Chi gioca?**, dalla tua immagine in alto a destra, dice dove, e **Apri la cartella** la apre. Per tenerne una copia di sicurezza, copia la cartella, con la chat e la pagina chiuse.
+- **Una versione nuova di Chesspal**: una freccia in alto te lo dice e la installa, fra una partita e l'altra.
 - **Quanto costa**: Chesspal è gratis; l'AI usa il tuo abbonamento, e non paghi niente in più.
 - **L'AI può fare una mossa illegale?** No: Chesspal controlla ogni mossa. I suoi giudizi però sono suoi, e un'AI può sbagliare, come una persona.
-- **Un backup**: copia la cartella delle tue partite, con la chat e la pagina chiuse.
 - **Qualcosa non va?** Raccontacelo su [GitHub](https://github.com/stefanocaronia/chesspal/issues): cosa hai fatto, cosa ti aspettavi, cosa è successo. GitHub è il sito dove si fa Chesspal: ci scrivi con un account gratuito, e chiunque può leggere.

package/dist/page/guide/markdown.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { drawings } from "./drawings/drawings.js";
 /** Blocks drawn as the page's elements: headings one level under the part's, each with the anchor given by its place among them; a link to an anchor calls go. */
 export function Blocks({ blocks, anchors, go }) {
     return _jsx(_Fragment, { children: blocks.map((block, index) => _jsx(BlockView, { block: block, anchors: anchors, go: go }, index)) });
@@ -47,6 +48,10 @@ function BlockView({ block, anchors, go }) {
             return (_jsx("blockquote", { children: _jsx(Blocks, { blocks: block.blocks, anchors: anchors, go: go }) }));
         case "code":
             return _jsx("pre", { children: _jsx("code", { children: block.text }) });
+        case "drawing": {
+            const Drawing = drawings[block.name];
+            return Drawing === undefined ? null : (_jsx("figure", { class: "guide-drawing", role: "img", "aria-label": block.alt, children: _jsx(Drawing, {}) }));
+        }
         case "rule":
             return null;
     }

package/dist/page/helps/helps.css

@@ -1,4 +1,4 @@
-/* The helps (D-78): their signs on the board, their card, the coach and the strategy's table */
+/* The helps (D-78): their signs on the board, their card, the coach and the strategy's rows */
 
 /* A piece at risk: a corner folded, bottom left, the square's free corner; in ink, or in the player's red and green (D-91) */
 .help-notch {
@@ -238,12 +238,19 @@
     padding: 3px 6px;
 }
 
-/* The coach's words at the top of the card (D-88): its judgment of the player's last move, then its hint, folded until they open it */
+/* The coach's words at the top of the card (D-88), tinted rows as the tactics': each judgment in its badge's colour, the hint in the accent behind a bulb */
 .helps-card .coach {
     display: flex;
     flex-direction: column;
-    gap: 6px;
-    font-size: 14px;
+    gap: 3px;
+    font-size: 13px;
+}
+
+.helps-card .coach .judged,
+.helps-card .coach .coach-hint {
+    --row: var(--accent);
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--row) 10%, transparent);
 }
 
 .coach-hint summary {
@@ -257,6 +264,48 @@
     display: none;
 }
 
+/* A row's head: its icon, its words in ink, the sign of a line that opens on the right */
+.helps-card .coach .head,
+.helps-card .coach summary {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 8px 3px 6px;
+    border-radius: 6px;
+    color: var(--ink);
+}
+
+.helps-card .coach summary {
+    cursor: pointer;
+    list-style: none;
+}
+
+.helps-card .coach summary:hover,
+.helps-card .coach details[open] > summary {
+    background: color-mix(in srgb, var(--row) 16%, transparent);
+}
+
+.helps-card .coach .row-icon {
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: 16px;
+    height: 16px;
+    color: var(--row);
+}
+
+.board-map .coach-hint .row-icon {
+    display: none;
+}
+
+/* A finger needs a taller line (Zoe) */
+@media (pointer: coarse) {
+    .helps-card .coach .head,
+    .helps-card .coach summary {
+        padding-block: 7px;
+    }
+}
+
 /* The same sign on both, so that on a phone, with no pointer, they read as lines that open (Zoe) */
 .helps-card .coach summary::after,
 .board-map .coach-hint summary::after {
@@ -265,12 +314,31 @@
     color: var(--soft);
 }
 
+.helps-card .coach summary::after {
+    margin-left: auto;
+}
+
 .helps-card .coach details[open] > summary::after,
 .board-map .coach-hint[open] > summary::after {
     content: "▾";
 }
 
-.coach-hint .note {
+/* The words opened, under the head's text */
+.helps-card .coach .note {
+    display: block;
+    margin: 0;
+    padding: 2px 8px 6px 28px;
+    color: var(--say-ink);
+    font-size: 13px;
+    line-height: 1.4;
+}
+
+.helps-card .coach .legend {
+    margin: 0;
+    padding: 0 8px 6px 28px;
+}
+
+.board-map .coach-hint .note {
     display: block;
     margin-top: 4px;
     color: var(--say-ink);
@@ -362,17 +430,11 @@
     content: "▾";
 }
 
-/* A finger needs a taller line, and the whole of a strategy's name (Zoe) */
+/* A finger needs a taller line (Zoe) */
 @media (pointer: coarse) {
     .help-rows .line-head {
         padding-block: 7px;
     }
-
-    .strategy-table .term {
-        display: block;
-        width: 100%;
-        padding: 6px 0;
-    }
 }
 
 .help-rows .line-head:hover,
@@ -478,7 +540,8 @@
     color: var(--row);
 }
 
-.help-rows .row-icon svg {
+.help-rows .row-icon svg,
+.coach-hint .row-icon svg {
     width: 14px;
     height: 14px;
     fill: none;
@@ -552,31 +615,81 @@
     border-color: var(--accent);
 }
 
-.strategy-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 12.5px;
+/* The strategy (Stefano): the phases, the bar of the squares controlled, the lines in groups apart only by the gap, each a name and its tile, then the notes */
+.strategy {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+/* The three phases in a row, joined by a thin line; the current one in a pill */
+.phases {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 12px;
     color: var(--soft);
 }
 
-.strategy-table th,
-.strategy-table td {
-    padding: 2px 4px;
-    text-align: left;
-    font-weight: 400;
+.phases li + li {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: 6px;
 }
 
-.strategy-table thead th {
+.phases li + li::before {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--line);
+}
+
+.phases li span {
+    padding: 1px 9px;
+    white-space: nowrap;
+}
+
+.phases li[aria-current="step"] span {
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--accent) 20%, transparent);
     color: var(--ink);
     font-weight: 700;
 }
 
-.strategy-table tbody tr + tr {
-    border-top: 1px solid var(--line);
+/* A group of lines, 3px apart (1px of gap and the heads' 1px of padding), with no line between them */
+.strategy-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 12.5px;
+    color: var(--soft);
+}
+
+.strategy-rows .row-head {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    margin: 0 -4px;
+    padding: 1px 4px;
+    border-radius: 6px;
+}
+
+/* A soft ground under the pointer and on the open line, as the tactics' lines have */
+.strategy-rows .row-head:hover,
+.strategy-rows li.open .row-head {
+    background: color-mix(in srgb, var(--soft) 12%, transparent);
 }
 
 /* A term with its meaning under the pointer, and under its line at a click or a tap (Rosa). */
-.strategy-table .term {
+.strategy-rows .term {
     padding: 0;
     border: 0;
     background: none;
@@ -588,60 +701,32 @@
     cursor: help;
 }
 
-.strategy-table tbody tr.meaning {
-    border-top: 0;
+/* A finger needs the whole of a strategy's name, after the base rule so that it wins */
+@media (pointer: coarse) {
+    .strategy-rows .term {
+        display: block;
+        width: 100%;
+        padding: 6px 0;
+    }
+}
+
+.strategy-rows li.open .term {
+    color: var(--ink);
 }
 
-.strategy-table tr.meaning td {
-    padding-bottom: 4px;
+.strategy-rows .meaning {
+    padding: 2px 0 4px;
     font-size: 12px;
     font-style: italic;
 }
 
 /* Under the meaning, each side's squares or files (Stefano) */
-.strategy-table tr.meaning .listed {
+.strategy-rows .meaning .listed {
     display: block;
     margin-top: 3px;
     font-style: normal;
 }
 
-/* The table's groups under their figure, in the accent; the sides' heads with their pawn */
-.strategy-table tr.group th {
-    padding-top: 7px;
-    color: var(--accent);
-    font-size: 12px;
-    font-weight: 700;
-}
-
-.strategy-table tbody tr.group + tr {
-    border-top: 0;
-}
-
-/* The strategy (Stefano): the phase in a pill and the open files on top, then the bar of the squares controlled, the table in groups, the notes */
-.strategy {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.strategy-head {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4px 10px;
-    margin: 0;
-    font-size: 12px;
-    color: var(--soft);
-}
-
-.strategy .phase {
-    padding: 1px 9px;
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--accent) 20%, transparent);
-    color: var(--ink);
-    font-weight: 700;
-}
-
 /* Squares and files in chips, a count in bold, a yes as a green tick, nothing as a faint dash, no more as a faint cross */
 .strategy .chip {
     display: inline-block;
@@ -689,23 +774,12 @@
 }
 
 /* The squares each side controls: White's in white, both in grey, Black's in black, each as long as its count */
-.control {
-    display: grid;
-    gap: 3px;
-    font-size: 11px;
-    color: var(--soft);
-}
-
-.control-title {
-    font-size: 12px;
-}
-
 .control-bar {
     display: flex;
     height: 18px;
-    border: 1px solid var(--line);
     border-radius: 5px;
     overflow: hidden;
+    font-size: 11px;
     font-weight: 700;
 }
 
@@ -716,28 +790,67 @@
     min-width: 20px;
 }
 
-.control-bar .white {
+/* The thread that keeps the black half in sight on the dark theme, as the lead bar's */
+.control-bar,
+.row-tile {
+    border: 1px solid rgb(138 144 153 / 0.6);
+}
+
+/* The bar's colours, which the lines' tiles share */
+.control-bar .white,
+.row-tile .white {
     background: #f4f6f8;
     color: var(--fixed-ink);
 }
 
-.control-bar .both {
+.control-bar .both,
+.row-tile .both {
     background: #8d98a7;
-    color: #fff;
+    color: var(--fixed-ink);
 }
 
-.control-bar .black {
+.control-bar .black,
+.row-tile .black {
     background: var(--fixed-ink);
     color: #f4f6f8;
 }
 
-.control-legend {
+/* A line's tile: a half for each side, the player's first; the open files in one half as wide as the two */
+.row-tile {
     display: flex;
-    justify-content: space-between;
+    height: 20px;
+    border-radius: 5px;
+    overflow: hidden;
+    font-size: 12px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+.row-tile > span {
+    display: grid;
+    place-items: center;
+    width: 42px;
+}
+
+.row-tile > .both {
+    width: 84px;
 }
 
-.strategy-table .figurine {
-    margin-right: 3px;
+/* In a tile the marks take the half's colour, but the tick, green */
+.strategy .row-tile .count {
+    color: inherit;
+}
+
+.strategy .row-tile .chip {
+    margin: 0;
+    padding: 0;
+    background: none;
+    color: inherit;
+}
+
+.strategy .row-tile .no svg {
+    stroke: currentColor;
+    opacity: 0.6;
 }
 
 /* On a phone, or in a narrow window, the map of the squares and the coach's hint go under the board, out of the helps' card */