chesspal 0.1.0 → 0.2.0

package/dist/page/style.css

@@ -1,4398 +1,9 @@
-/* The page in Zoe's Salotto azzurro (D-46), in three columns (D-53): the talk, the board, the game; one column on a phone; light and dark. */
-:root {
-    --page: color-mix(in oklab, var(--dark-square) 12%, #fbfbfa);
-    --card: color-mix(in oklab, var(--dark-square) 3%, #ffffff);
-    --ink: #1d2733;
-    --soft: #626d7b;
-    --line: color-mix(in oklab, var(--dark-square) 24%, #f1f1ef);
-    --accent: #2d6aa8;
-    --on-accent: #ffffff;
-    --quote: color-mix(in oklab, var(--dark-square) 9%, #fafafa);
-    --say: color-mix(in oklab, var(--dark-square) 38%, #fafafa);
-    --say-ink: #1d2733;
-    --warn-back: #fff4d6;
-    --light-square: #eaf1f8;
-    --dark-square: #86abd0;
-    --last-move: rgba(255, 196, 80, 0.5);
-    --selected: rgba(255, 196, 80, 0.7);
-    --mark: #f07c1e;
-    --mark-square: rgba(240, 124, 30, 0.65);
-    --mated: rgba(214, 40, 40, 0.8);
-    --low-time: #c62828;
-    --hint: rgba(0, 0, 0, 0.14);
-    --hover-edge: #f4c84c;
-    --explain-ink: #1d2733;
-    --lift-shadow: rgba(16, 28, 44, 0.32);
-    --ghost: 0.35;
-    --white-piece: #fff;
-    --black-piece: #000;
-    --torretta-body: #6d9fd1;
-    --torretta-shade: #4b7cb0;
-    --torretta-screen: #16263a;
-    --torretta-face: #f2f7fc;
-    --torretta-light: #f4c84c;
-    --torretta-alarm: #ef6a4c;
-    --torretta-ponder: #8f9a8a;
-    /* The badges of the moves (D-69, T-41): white signs, dark on the yellow one; each disc at least 3:1 with its sign */
-    --badge-ink: #fff;
-    --badge-note: #7b8794;
-    --badge-brilliant: #0f9a9e;
-    --badge-great: #2f74c8;
-    --badge-best: #3c9a3a;
-    --badge-excellent: #6b9c2c;
-    --badge-good: #7d9a62;
-    --badge-book: #94704c;
-    --badge-inaccuracy: #e6b422;
-    --badge-inaccuracy-ink: #3b2c00;
-    --badge-mistake: #d4650f;
-    --badge-miss: #c2407d;
-    --badge-blunder: #d22c2c;
-    --shadow: 0 1px 2px rgba(29, 39, 51, 0.06), 0 6px 18px rgba(29, 39, 51, 0.06);
-    /* On a light page the board keeps a thin edge in its dark squares colour, and a deeper shadow, so its light squares do not melt into the page (T-83) */
-    --board-shadow: 0 0 0 1px color-mix(in oklab, var(--dark-square) 55%, transparent), 0 2px 4px rgba(29, 39, 51, 0.1), 0 10px 28px rgba(29, 39, 51, 0.12);
-    --gap: 20px;
-    --left: 300px;
-    --right: 300px;
-    /* The board's least size beside the talk: room for the AI's words, the box and both cards; a lower window scrolls (T-103) */
-    --least: 440px;
-    --tab: 16px;
-    --rail: 56px;
-    --coin: 40px;
-    /* How far from the board's top and bottom edges the faces sit, in the cards and folded, and the tabs */
-    --ear: 36px;
-    --tuck: 10px;
-    --bar: 36px;
-    /* The cards' corners, as the board's; the room between the cards, and between them and the board */
-    --radius: 6px;
-    --between: 10px;
-    --bubble: 14px;
-    color-scheme: light;
-}
-
-:root[data-theme="dark"] {
-    --page: color-mix(in oklab, var(--dark-square) 13%, #0b0d10);
-    --card: color-mix(in oklab, var(--dark-square) 16%, #14171b);
-    --ink: #e6ebf1;
-    --soft: #8d98a7;
-    --line: color-mix(in oklab, var(--dark-square) 24%, #1b1f24);
-    --accent: #7cb0e4;
-    --on-accent: #0f1a28;
-    --low-time: #ff6b6b;
-    --quote: color-mix(in oklab, var(--dark-square) 20%, #1a1d22);
-    --say: color-mix(in oklab, var(--dark-square) 34%, #15181c);
-    --say-ink: #e6ebf1;
-    --warn-back: #2a2616;
-    --light-square: #a9bccd;
-    --dark-square: #61809e;
-    --hint: rgba(0, 0, 0, 0.17);
-    --lift-shadow: rgba(0, 0, 0, 0.5);
-    --torretta-screen: #0f1a28;
-    --badge-great: #3577c9;
-    --badge-book: #9c7650;
-    --badge-miss: #c9478a;
-    --badge-blunder: #d93434;
-    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.25);
-    --board-shadow: var(--shadow);
-    color-scheme: dark;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    margin: 0;
-    min-height: 100vh;
-    background: var(--page);
-    color: var(--ink);
-    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
-    font-size: 15px;
-    -webkit-font-smoothing: antialiased;
-}
-
-button,
-textarea {
-    font: inherit;
-    color: inherit;
-}
-
-button {
-    cursor: pointer;
-}
-
-/* The header */
-.top {
-    grid-area: head;
-    height: var(--bar);
-    margin-top: var(--between);
-    container-type: inline-size;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 0 var(--gap);
-}
-
-/* In the page's grid the header spans the board, edge to edge, as far from it as the cards */
-.app .top {
-    margin: 0;
-    padding: 0;
-}
-
-.title {
-    flex: 1;
-    font-size: 17px;
-    font-weight: 600;
-    letter-spacing: 0.01em;
-}
-
-/* A game over says how it ended by the new game, which stands out in the accent (T-77) */
-.verdict {
-    margin: 0;
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    border-radius: 999px;
-    padding: 6px 12px;
-    background: color-mix(in srgb, var(--accent) 14%, transparent);
-    color: var(--ink);
-    font-size: 14px;
-    font-weight: 600;
-    animation: appear 200ms;
-}
-
-.verdict:empty {
-    display: none;
-}
-
-/* The chip's icon says what it is about; the game in analysis stands out in the accent's colour (D-69) */
-.verdict:has(.icon) {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-
-.verdict .icon {
-    flex: none;
-    width: 16px;
-    height: 16px;
-    stroke-width: 2;
-}
-
-.verdict.analysis {
-    background: color-mix(in srgb, var(--accent) 22%, transparent);
-    color: var(--ink);
-}
-
-.icon {
-    width: 17px;
-    height: 17px;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.7;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-
-.command {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    background: none;
-    border: 1px solid transparent;
-    border-radius: 8px;
-    padding: 7px 11px;
-    font-size: 14px;
-    color: var(--soft);
-}
-
-.command:hover,
-.command[aria-pressed="true"] {
-    color: var(--ink);
-    border-color: var(--line);
-    background: var(--card);
-}
-
-.command.primary {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: var(--on-accent);
-}
-
-.command.primary:hover {
-    background: color-mix(in oklab, var(--accent) 85%, var(--ink));
-    border-color: transparent;
-    color: var(--on-accent);
-}
-
-/* A draw the player cannot offer now: before a move each, on the AI's turn, or with an offer standing (D-65); their own offer stands pressed, at full strength */
-.command[aria-disabled="true"]:not([aria-pressed="true"]) {
-    cursor: default;
-    opacity: 0.5;
-}
-
-.command[aria-disabled="true"]:not([aria-pressed="true"]):hover {
-    color: var(--soft);
-    border-color: transparent;
-    background: none;
-}
-
-/* The answer to the AI's offer: accepting and declining weigh the same */
-.command.answer {
-    color: var(--ink);
-    border-color: var(--line);
-}
-
-/* While the AI's draw offer stands, the answer keeps its words and the other commands only their icons; in a game going on, a narrow board keeps icons alone */
-.top:has(.answer) .command:not(.answer) span {
-    display: none;
-}
-
-@container (max-width: 800px) {
-    .top:has(.icon.resign) .command:not(.answer) span {
-        display: none;
-    }
-
-    /* Beside a narrow board the offer and its answer take the room of the other commands, which come back once it is answered */
-    .top:has(.answer) .command:not(.answer) {
-        display: none;
-    }
-}
-
-/* The AI's name gives way before its verb (D-65) */
-.verdict:has(.ai-name) {
-    display: flex;
-    gap: 0.3em;
-}
-
-.verdict .ai-name {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.verdict .ai-name + span {
-    flex-shrink: 0;
-}
-
-.top .torretta {
-    flex-shrink: 0;
-}
-
-/* The header's buttons never wrap or shrink: the word on a game over gives way */
-.top .command,
-.top .theme {
-    flex-shrink: 0;
-    white-space: nowrap;
-}
-
-:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-}
-
-.theme {
-    display: grid;
-    place-items: center;
-    width: 36px;
-    height: 36px;
-    background: none;
-    border: 1px solid var(--line);
-    border-radius: 8px;
-    color: var(--soft);
-}
-
-.theme:hover {
-    color: var(--ink);
-}
-
-:root[data-theme="dark"] .theme .sun,
-:root:not([data-theme="dark"]) .theme .moon {
-    display: none;
-}
-
-/* Three columns: the talk, the board, the game, under the header, which spans the board. The side columns take the board's height and scroll inside it; folded,
-   they slide under the board, which grows into the room */
-.app {
-    --left-now: var(--left);
-    --right-now: var(--right);
-    --rows: var(--between);
-    display: grid;
-    gap: var(--rows) var(--between);
-    padding: var(--between) var(--gap);
-    grid-template-columns: var(--left-now) auto var(--right-now);
-    transition: grid-template-columns 200ms cubic-bezier(0.2, 0, 0, 1);
-    grid-template-rows: auto minmax(var(--least), auto);
-    grid-template-areas: ". head ." "talk board side";
-    justify-content: center;
-}
-
-/* Beside a narrow board the header's buttons keep only their icons */
-@container (max-width: 560px) {
-    .command span {
-        display: none;
-    }
-}
-
-/* Beside the word on a game over, the Torretta alone stands for the name, and the flip keeps only its icon; a phone gives the word a line of its own */
-@media (min-width: 841px) {
-    @container (max-width: 720px) {
-        .top:has(.verdict:not(:empty)) .title,
-        .top:has(.verdict:not(:empty)) .command:not(.primary):not(.answer) span {
-            display: none;
-        }
-
-        .top:has(.verdict:not(:empty)) .verdict {
-            margin-right: auto;
-        }
-    }
-}
-
-.app.talk-rail {
-    --left-now: var(--rail);
-}
-
-.app.talk-folded {
-    --left-now: 0px;
-}
-
-.app.folded {
-    --right-now: 0px;
-}
-
-.board-wrap {
-    grid-area: board;
-    position: relative;
-    /* 12.5cqw is a square, for the lifted piece too */
-    container-type: inline-size;
-    width: min(calc(100vw - var(--left-now) - var(--right-now) - 2 * var(--gap) - 2 * var(--between)), max(var(--least), calc(100vh - var(--bar) - 3 * var(--between))));
-    transition: width 200ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.talk {
-    grid-area: talk;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    gap: var(--between);
-    contain: size;
-    min-height: 0;
-}
-
-/* Narrowing, the talk fades into its card of faces while it slides under the board, in the same 200ms */
-.app.talk-rail .talk,
-.app.talk-folded .talk {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 120ms 80ms, visibility 0s 200ms;
-}
-
-/* A column's tab (T-84), a drawer's handle at the top: open, on the outer edge of the column's first card; folded, the column slides under the board and the
-   tab peeks out from under it */
-.fold-tab {
-    align-self: start;
-    position: relative;
-    display: flex;
-    width: var(--tab);
-    height: 48px;
-    margin-top: calc(var(--ear) - 24px);
-    transition: width 200ms cubic-bezier(0.2, 0, 0, 1), margin 200ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.fold-tab.folded {
-    width: calc(var(--tab) + var(--tuck));
-}
-
-.fold-tab.of-talk {
-    grid-area: talk;
-    justify-self: start;
-    margin-left: calc(-1 * var(--tab));
-}
-
-.fold-tab.of-talk.folded {
-    margin-left: calc(var(--between) - var(--tab));
-}
-
-.fold-tab.of-game {
-    grid-area: side;
-    justify-self: end;
-    margin-right: calc(-1 * var(--tab));
-}
-
-.fold-tab.of-game.folded {
-    margin-right: calc(var(--between) - var(--tab));
-}
-
-.fold-tab button {
-    flex: 1;
-    position: relative;
-    display: grid;
-    place-items: center;
-    padding: 0;
-    background: var(--card);
-    border: 1px solid var(--line);
-    box-shadow: var(--shadow);
-    color: var(--soft);
-}
-
-.fold-tab button:hover {
-    color: var(--ink);
-}
-
-.fold-tab .icon {
-    width: 14px;
-    height: 14px;
-    stroke-width: 2;
-}
-
-/* Rounded on the outer side, its icon clear of the board; the card it leans on gives its inner edge */
-.fold-tab.of-talk button {
-    border-right: 0;
-    border-radius: var(--radius) 0 0 var(--radius);
-}
-
-.fold-tab.of-game button {
-    border-left: 0;
-    border-radius: 0 var(--radius) var(--radius) 0;
-}
-
-.fold-tab.of-talk.folded button {
-    padding-right: var(--tuck);
-}
-
-.fold-tab.of-game.folded button {
-    padding-left: var(--tuck);
-}
-
-/* The talk narrowed to a card beside the board, with two equal coins where the faces sat in the cards: the Torretta above and the player below, once the talk
-   has slid under the board */
-.faces {
-    grid-area: talk;
-    justify-self: start;
-    display: none;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    gap: 16px;
-    width: var(--rail);
-    min-height: 0;
-    overflow: hidden;
-    padding: calc(var(--ear) - var(--coin) / 2 - 1px) 0;
-    background: var(--card);
-    border: 1px solid var(--line);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow);
-}
-
-.app.talk-rail .faces {
-    display: flex;
-    animation: faces-in 120ms 80ms both;
-}
-
-/* Folding, the card of faces slides under the board in its turn */
-.app.talk-folded .faces {
-    display: flex;
-    visibility: hidden;
-    transition: visibility 0s 200ms;
-}
-
-.app.flipped .faces {
-    flex-direction: column-reverse;
-}
-
-@keyframes faces-in {
-    from {
-        opacity: 0;
-    }
-}
-
-/* Each face with the name and side written down the card from it: the lower one's run up to it */
-.rail-player {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    min-height: 0;
-}
-
-.rail-player.you,
-.app.flipped .rail-player.ai {
-    flex-direction: column-reverse;
-}
-
-.app.flipped .rail-player.you {
-    flex-direction: column;
-}
-
-/* The lower name reads upwards, its letters' tops to the left */
-.rail-player.you .rail-name,
-.app.flipped .rail-player.ai .rail-name {
-    rotate: 180deg;
-}
-
-.app.flipped .rail-player.you .rail-name {
-    rotate: none;
-}
-
-.rail-name {
-    min-height: 0;
-    overflow: hidden;
-    writing-mode: vertical-rl;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: 13px;
-    font-weight: 600;
-}
-
-.face {
-    flex: none;
-    position: relative;
-    display: grid;
-    place-items: center;
-    width: var(--coin);
-    height: var(--coin);
-    border-radius: 50%;
-    background: var(--say);
-}
-
-/* Both faces fill their circle, with no edge */
-.face svg,
-.face img {
-    width: var(--coin);
-    height: var(--coin);
-    clip-path: circle(50%);
-}
-
-/* Who moves: their name in the accent */
-.rail-player.moving .rail-name {
-    color: var(--accent);
-}
-
-/* The AI spoke while the talk was narrowed or folded: on the Torretta, or on the tab */
-.face.unread::after,
-.fold-tab button.unread::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: var(--accent);
-    box-shadow: 0 0 0 2px var(--page);
-}
-
-.fold-tab button.unread::after {
-    top: -4px;
-    right: auto;
-    left: -4px;
-}
-
-/* A long name or model goes to its ellipsis instead of widening the page on a phone (Zoe, round of T-118) */
-.ai-block,
-.you-block {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    min-width: 0;
-}
-
-/* Each side's talk has half the column at most: past it, its words scroll; the box and the cards never give way. */
-.ai-block,
-.you-block {
-    flex: 0 1 auto;
-    max-height: calc(50% - var(--between) / 2);
-}
-
-.you-block > .compose,
-.you-block > .player {
-    flex: none;
-}
-
-/* The board */
-/* Above the columns' tabs, which slide under it */
-.board {
-    position: relative;
-    z-index: 1;
-    display: grid;
-    grid-template-columns: repeat(8, 1fr);
-    grid-template-rows: repeat(8, 1fr);
-    aspect-ratio: 1;
-    border-radius: var(--radius);
-    overflow: hidden;
-    box-shadow: var(--board-shadow);
-    user-select: none;
-    container-type: inline-size;
-}
-
-.square {
-    position: relative;
-}
-
-.square.light {
-    background-color: var(--light-square);
-}
-
-.square.dark {
-    background-color: var(--dark-square);
-}
-
-.square.last {
-    background-image: linear-gradient(var(--last-move), var(--last-move));
-}
-
-.square.selected {
-    background-image: linear-gradient(var(--selected), var(--selected));
-}
-
-/* The king checkmated (T-77): its square red, over the last move's colour */
-.square.mated {
-    background-image: linear-gradient(var(--mated), var(--mated));
-}
-
-/* The player's marks with the right button (T-73): orange squares and arrows, gone at a left click */
-.square.marked {
-    background-image: linear-gradient(var(--mark-square), var(--mark-square));
-}
-
-/* The square the player points at in the AI's words (T-111): a white ring with a dark edge, which reads on every board and over the rings the AI draws */
-.square.pointed {
-    outline: max(4px, 0.8cqw) solid #fff;
-    outline-offset: calc(-1 * max(4px, 0.8cqw));
-    box-shadow: inset 0 0 0 calc(max(4px, 0.8cqw) + 2px) rgba(0, 0, 0, 0.55);
-}
-
-/* On a square the AI marked, the pointer's ring takes the place of the AI's while it lasts */
-.square.noted.pointed::after {
-    box-shadow: inset 0 0 0 max(4px, 0.8cqw) #fff, inset 0 0 0 calc(max(4px, 0.8cqw) + 2px) rgba(0, 0, 0, 0.55);
-}
-
-.arrows {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    aspect-ratio: 1;
-    /* Over every square, the sliding piece's too (z-index 1) */
-    z-index: 2;
-    pointer-events: none;
-    opacity: 0.7;
-}
-
-.arrows path {
-    fill: none;
-    stroke: var(--mark);
-    stroke-width: 0.2;
-}
-
-.arrows polygon {
-    fill: var(--mark);
-}
-
-/* What the AI draws with its note in an analysis (D-69): arrows and squares in the four colours of PGN's %cal and %csl */
-.arrows g.green {
-    --mark: #15a34a;
-}
-
-.arrows g.red {
-    --mark: #dc2626;
-}
-
-.arrows g.yellow {
-    --mark: #eab308;
-}
-
-.arrows g.blue {
-    --mark: #2563eb;
-}
-
-/* The AI's arrows have a white edge, as its rings do (D-78): they read as its own whatever colour the player marks in */
-.arrows .edge {
-    stroke: #fff;
-}
-
-.arrows path.edge {
-    stroke-width: 0.3;
-}
-
-.arrows polygon.edge {
-    fill: #fff;
-    stroke-width: 0.1;
-    stroke-linejoin: round;
-}
-
-/* The AI's squares are rings (Zoe, T-40): the last move's fill and the player's marks stay seen under them */
-.square.noted::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    box-shadow: inset 0 0 0 max(3px, 0.6cqw) var(--ring), inset 0 0 0 calc(max(3px, 0.6cqw) + 1.5px) rgba(255, 255, 255, 0.8);
-}
-
-.square.noted.green {
-    --ring: #15a34a;
-}
-
-.square.noted.red {
-    --ring: #dc2626;
-}
-
-.square.noted.yellow {
-    --ring: #eab308;
-}
-
-.square.noted.blue {
-    --ring: #2563eb;
-}
-
-/* Moving a piece (T-70, Zoe's design): dots for the legal moves, rings on captures, a gold edge on the square a dragged piece would land on */
-.square.hint::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    margin: auto;
-    width: 33%;
-    height: 33%;
-    border-radius: 50%;
-    background: var(--hint);
-    pointer-events: none;
-}
-
-.square.hint.capture::before {
-    inset: 4%;
-    width: auto;
-    height: auto;
-    margin: 0;
-    background: none;
-    border: 1cqw solid var(--hint);
-}
-
-.square.over {
-    box-shadow: inset 0 0 0 max(2px, 0.625cqw) var(--hover-edge);
-}
-
-@media (hover: hover) {
-    .board.playable .square.hint:hover,
-    .board.playable .square.target:hover {
-        box-shadow: inset 0 0 0 max(2px, 0.625cqw) var(--hover-edge);
-    }
-}
-
-.square.from .piece {
-    opacity: var(--ghost);
-}
-
-.board {
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-}
-
-.board.playable .square.own {
-    cursor: grab;
-    touch-action: none;
-}
-
-.board.playable .square.hint,
-.board.playable .square.target {
-    cursor: pointer;
-}
-
-:root.dragging,
-:root.dragging * {
-    cursor: grabbing !important;
-}
-
-/* The lifted piece follows the pointer without a transition; the piece inside it rises. Fixed to the window, it never gives the page a scrollbar */
-.lifted {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 12.5cqw;
-    height: 12.5cqw;
-    z-index: 10;
-    pointer-events: none;
-    translate: var(--x) var(--y);
-}
-
-.lifted .piece {
-    display: block;
-    width: 100%;
-    height: 100%;
-    transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
-    filter: drop-shadow(0 0 0 transparent);
-}
-
-.lifted.up .piece {
-    transform: scale(1.1);
-    filter: drop-shadow(0.375cqw 1cqw 0.75cqw var(--lift-shadow));
-}
-
-.lifted.up.touch .piece {
-    transform: translateY(-75%) scale(1.25);
-}
-
-.lifted.back {
-    transition: translate 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-.lifted.back .piece {
-    transform: none;
-    filter: drop-shadow(0 0 0 transparent);
-    transition-duration: 180ms;
-}
-
-/* A move not dragged slides from its square, in 12.5cqw a square, and a king in check rings like a bell struck (T-74) */
-.square.slide {
-    z-index: 1;
-}
-
-/* The square's own piece only: one taken or fading on it keeps its own animation */
-.square.slide > .piece {
-    animation: slide 220ms cubic-bezier(0.25, 0.8, 0.35, 1);
-}
-
-.square.shake > .piece {
-    animation: ring 320ms cubic-bezier(0.3, 0, 0.2, 1) 200ms;
-}
-
-/* The piece taken stays under the one that takes it until it arrives */
-.square .taken-piece .piece {
-    animation: taken 220ms step-end forwards;
-}
-
-/* A jump through the game (T-88): a piece no longer there fades, one that was not there appears */
-.square .gone-piece .piece {
-    animation: taken 220ms forwards;
-}
-
-.square.appear > .piece {
-    animation: appear 220ms;
-}
-
-@keyframes appear {
-    from {
-        opacity: 0;
-    }
-}
-
-@keyframes taken {
-    to {
-        opacity: 0;
-    }
-}
-
-@keyframes slide {
-    from {
-        translate: calc(var(--dx) * 12.5cqw) calc(var(--dy) * 12.5cqw);
-    }
-}
-
-/* The hammer's blow, then a vibration that dies away: each swing smaller, eased at both ends */
-@keyframes ring {
-    12% {
-        translate: -2.5% 0;
-    }
-
-    34% {
-        translate: 1.8% 0;
-    }
-
-    56% {
-        translate: -1.1% 0;
-    }
-
-    78% {
-        translate: 0.5% 0;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .lifted .piece,
-    .lifted.back {
-        transition: none;
-    }
-
-    .square.slide > .piece,
-    .square.shake > .piece,
-    .square.appear > .piece {
-        animation: none;
-    }
-
-    .square .taken-piece,
-    .square .gone-piece {
-        display: none;
-    }
-}
-
-/* The end of the game (T-77): the kings' badges and the loser's king laid down stay; the effects play once, when the game ends under the player's eyes */
-/* The king laid down keeps its size and lies on the base the other pieces stand on, in the middle of its square: it turns about the point that puts it
-   there, which each set's drawing places */
-.square.fallen .piece {
-    rotate: -90deg;
-    transform-origin: var(--fallen-pivot, 50% 50%);
-}
-
-:root[data-set="nitida"] {
-    --fallen-pivot: 53.7% 54.8%;
-}
-
-:root[data-set="torretta"] {
-    --fallen-pivot: 52% 50.8%;
-}
-
-:root[data-set="cburnett"] {
-    --fallen-pivot: 50.2% 50.9%;
-}
-
-.badge {
-    position: absolute;
-    top: 2.5%;
-    right: 2.5%;
-    z-index: 2;
-    display: grid;
-    place-items: center;
-    width: clamp(14px, 3.8cqw, 30px);
-    height: clamp(14px, 3.8cqw, 30px);
-    border-radius: 50%;
-    color: #fff;
-    font-size: clamp(9px, 2.5cqw, 19px);
-    font-weight: 800;
-    line-height: 1;
-    /* Edged in white, to stand out on any square, the red one too */
-    box-shadow: 0 0 0 max(1.5px, 0.25cqw) #fff, 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.4);
-    pointer-events: none;
-}
-
-.badge svg {
-    width: 66%;
-    height: 66%;
-    fill: currentColor;
-    stroke: currentColor;
-    stroke-width: 2;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-}
-
-.badge.crown {
-    background: #e0a526;
-    color: #3b2a00;
-}
-
-/* The mate white on the red square, edged in red */
-.badge.mate {
-    background: #fff;
-    color: #c81e1e;
-    box-shadow: 0 0 0 max(1.5px, 0.25cqw) #c81e1e, 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.4);
-}
-
-.badge.flag {
-    background: #4a4f57;
-}
-
-.badge.half {
-    background: #69727d;
-}
-
-/* A move's badge (D-69, T-41): 16px beside a move, a third of a square in the corner of its arrival, edged in white as the kings' badges */
-.move-badge {
-    flex: none;
-    width: 16px;
-    height: 16px;
-    vertical-align: -3px;
-}
-
-.square .move-badge {
-    position: absolute;
-    top: 2.5%;
-    right: 2.5%;
-    z-index: 2;
-    width: clamp(16px, 4.25cqw, 30px);
-    height: clamp(16px, 4.25cqw, 30px);
-    border-radius: 50%;
-    box-shadow: 0 0 0 max(1.5px, 0.25cqw) #fff, 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.4);
-    pointer-events: none;
-}
-
-/* With the king's badge on the same square, at the end, the move's stands beside it (Zoe, T-40) */
-.square:has(.badge) .move-badge {
-    right: calc(2.5% + clamp(14px, 3.8cqw, 30px) + max(4px, 0.6cqw));
-}
-
-/* Checkmate: the king rings with the check, its square fills with red from the edges, then it falls */
-@media (prefers-reduced-motion: no-preference) {
-    .board.fresh.by-checkmate .square.mated {
-        background-image: none;
-        animation: mate-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) 450ms forwards;
-    }
-}
-
-.board.fresh.by-checkmate .square.fallen .piece {
-    animation: ring 320ms cubic-bezier(0.3, 0, 0.2, 1) 200ms, fall 450ms 800ms backwards;
-}
-
-/* A resignation: the king is laid down slowly, as a player lays theirs */
-.board.fresh.by-resignation .square.fallen .piece {
-    animation: lay 1000ms cubic-bezier(0.45, 0, 0.55, 1) 250ms backwards;
-}
-
-/* Stalemate: the king darts one way and the other, and finds no square */
-.board.fresh.by-stalemate .square.stalled .piece {
-    animation: dart 700ms cubic-bezier(0.4, 0, 0.2, 1) 250ms;
-}
-
-/* The other draws: both kings light up together */
-.board.fresh:not(.by-stalemate) .square.drawn {
-    animation: draw-glow 1000ms ease-in-out 200ms;
-}
-
-/* The badges come once the kings have taken the end */
-.board.fresh .badge {
-    animation: badge-in 320ms cubic-bezier(0.3, 1.4, 0.5, 1) 800ms backwards;
-}
-
-.board.fresh.by-checkmate .badge {
-    animation-delay: 1350ms;
-}
-
-.board.fresh.by-resignation .badge {
-    animation-delay: 1200ms;
-}
-
-.board.fresh.by-stalemate .badge {
-    animation-delay: 950ms;
-}
-
-/* The player won: a narrow golden sheen crosses the board once, after the badges; a loss needs no more than the king and its badge */
-.board.fresh.player-won::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: 3;
-    pointer-events: none;
-    background: linear-gradient(115deg, transparent 44%, rgba(255, 230, 150, 0.6) 50%, transparent 56%) 0 0 / 300% 100% no-repeat;
-    mix-blend-mode: screen;
-    animation: sheen 900ms cubic-bezier(0.45, 0, 0.55, 1) 1600ms backwards;
-}
-
-@keyframes mate-in {
-    from {
-        box-shadow: inset 0 0 0 0 var(--mated);
-    }
-
-    to {
-        box-shadow: inset 0 0 0 7cqw var(--mated);
-    }
-}
-
-/* Falling, the king drops fast, bounces once off the board and settles */
-@keyframes fall {
-    from {
-        rotate: 0deg;
-        animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
-    }
-
-    45% {
-        rotate: -90deg;
-        animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
-    }
-
-    68% {
-        rotate: -74deg;
-        animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
-    }
-
-    86% {
-        rotate: -90deg;
-        animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
-    }
-
-    94% {
-        rotate: -86deg;
-        animation-timing-function: ease-in;
-    }
-}
-
-@keyframes lay {
-    from {
-        rotate: 0deg;
-    }
-}
-
-@keyframes dart {
-    20% {
-        translate: 6% -3%;
-    }
-
-    40%,
-    80% {
-        translate: 0 0;
-    }
-
-    60% {
-        translate: -6% -3%;
-    }
-}
-
-@keyframes draw-glow {
-    40%,
-    60% {
-        /* A ring in the skin's colour, much darker than its squares, to show on the light and the dark ones */
-        box-shadow: inset 0 0 0 0.6cqw color-mix(in oklab, var(--dark-square) 50%, #1d2733), inset 0 0 2.5cqw 0.4cqw color-mix(in oklab, var(--dark-square) 40%, transparent);
-    }
-}
-
-@keyframes badge-in {
-    from {
-        scale: 0;
-        opacity: 0;
-    }
-}
-
-@keyframes sheen {
-    from {
-        background-position: 100% 0;
-    }
-
-    to {
-        background-position: 0 0;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .board.fresh,
-    .board.fresh .square,
-    .board.fresh .piece,
-    .board.fresh .badge {
-        animation: none;
-    }
-
-    .board.fresh::after {
-        display: none;
-    }
-}
-
-/* The ranks and files grow with the board, as 13 points on 800, tucked into the corners the pieces leave free */
-.coordinate {
-    position: absolute;
-    font-size: clamp(9px, 1.6cqw, 13px);
-    font-weight: 700;
-    line-height: 1;
-    pointer-events: none;
-}
-
-.coordinate.rank {
-    top: 3%;
-    left: 4%;
-}
-
-.coordinate.file {
-    right: 4%;
-    bottom: 2.5%;
-}
-
-.square.light .coordinate,
-.square.light .square-name {
-    color: var(--dark-square);
-}
-
-.square.dark .coordinate,
-.square.dark .square-name {
-    color: var(--light-square);
-}
-
-/* The square's name in the corner of the file, under the pointer or the piece dragged, in its place on the bottom rank (T-76) */
-.square-name {
-    position: absolute;
-    right: 4%;
-    bottom: 2.5%;
-    z-index: 2;
-    display: none;
-    font-size: clamp(9px, 1.6cqw, 13px);
-    font-weight: 700;
-    line-height: 1;
-    pointer-events: none;
-}
-
-.square.over .square-name {
-    display: block;
-}
-
-.square.over .coordinate.file {
-    visibility: hidden;
-}
-
-@media (hover: hover) {
-    .square:hover .square-name {
-        display: block;
-    }
-
-    .square:hover .coordinate.file {
-        visibility: hidden;
-    }
-}
-
-.square .piece {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-}
-
-/* The pieces: one shape each, in the colour of its side with a black edge (D-49) */
-.piece {
-    --piece-edge-width: 6.5px;
-}
-
-/* How much of its colours a piece keeps against the page: all of them, but on a board that is off (D-77). Opaque, so no square shows through it */
-@property --kept {
-    syntax: "<percentage>";
-    inherits: true;
-    initial-value: 100%;
-}
-
-.piece.white {
-    --piece-fill: color-mix(in oklab, var(--white-piece) var(--kept), var(--page));
-    --piece-edge: color-mix(in oklab, #000 var(--kept), var(--page));
-}
-
-.piece.black {
-    --piece-fill: color-mix(in oklab, var(--black-piece) var(--kept), var(--page));
-    --piece-edge: color-mix(in oklab, #000 var(--kept), var(--page));
-    --piece-detail: color-mix(in oklab, var(--white-piece) var(--kept), var(--page));
-}
-
-/* Why a move was refused (T-11): a bubble over the square it went to, its tail on the square; a ring on the piece that forbids it */
-.notice {
-    --shift: -50%;
-    position: absolute;
-    z-index: 3;
-    left: calc((var(--column) + 0.5) * 12.5cqw);
-    top: calc(var(--row) * 12.5cqw);
-    transform: translate(var(--shift), calc(-100% - 8px));
-    display: flex;
-    align-items: center;
-    gap: 9px;
-    width: max-content;
-    max-width: min(78cqw, 340px);
-    margin: 0;
-    padding: 8px 12px;
-    border-radius: 7px;
-    /* Ink in both themes (T-91), as the arrows that explain */
-    background: var(--explain-ink);
-    color: #f4f6f9;
-    font-size: 13.5px;
-    line-height: 1.35;
-    box-shadow: var(--shadow);
-    pointer-events: none;
-    animation: notice-in 160ms ease-out;
-}
-
-.notice::after {
-    content: "";
-    position: absolute;
-    left: calc(-1 * var(--shift) - 6px);
-    top: 100%;
-    border: 6px solid transparent;
-    border-top-color: var(--explain-ink);
-}
-
-/* The kind of reason (T-91): a light tile with the piece, a pin, a bar, castling; the player's king on red */
-.explain-icon {
-    flex: none;
-    display: grid;
-    place-items: center;
-    width: 28px;
-    height: 28px;
-    padding: 2px;
-    border-radius: 6px;
-    background: #e3e9f0;
-}
-
-.explain-icon.king {
-    background: #f3c4c4;
-}
-
-.explain-icon .piece {
-    width: 100%;
-    height: 100%;
-}
-
-.explain-icon svg {
-    width: 20px;
-    height: 20px;
-    fill: none;
-    stroke: var(--explain-ink);
-    stroke-width: 2.2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-
-.explain-icon .bar {
-    stroke-width: 3;
-}
-
-/* The arrow that explains a refused move: ink, apart from the player's orange ones */
-.arrows.explain {
-    opacity: 0.78;
-}
-
-.arrows.explain path {
-    stroke: var(--explain-ink);
-}
-
-.arrows.explain polygon {
-    fill: var(--explain-ink);
-}
-
-.notice.start {
-    --shift: 0%;
-    left: calc(var(--column) * 12.5cqw + 4px);
-}
-
-.notice.start::after {
-    left: calc(6.25cqw - 10px);
-}
-
-.notice.end {
-    --shift: -100%;
-    left: calc((var(--column) + 1) * 12.5cqw - 4px);
-}
-
-.notice.end::after {
-    left: auto;
-    right: calc(6.25cqw - 10px);
-}
-
-.notice.below {
-    top: calc((var(--row) + 1) * 12.5cqw);
-    transform: translate(var(--shift), 8px);
-}
-
-.notice.below::after {
-    top: auto;
-    bottom: 100%;
-    border-top-color: transparent;
-    border-bottom-color: var(--explain-ink);
-}
-
-/* Where the bubble hides neither the culprit nor the arrow's point (T-91, Zoe): under the whole board on a phone, beside the piece on a wide board */
-.notice.under-board {
-    top: 100cqw;
-    transform: translate(var(--shift), 8px);
-}
-
-.notice.under-board::after {
-    top: auto;
-    bottom: 100%;
-    border-top-color: transparent;
-    border-bottom-color: var(--explain-ink);
-}
-
-.notice.right,
-.notice.left {
-    top: calc((var(--row) + 0.5) * 12.5cqw);
-    max-width: min(calc((var(--room) * 12.5cqw) - 12px), 340px);
-}
-
-.notice.right {
-    --room: calc(7 - var(--column));
-    left: calc((var(--column) + 1) * 12.5cqw + 8px);
-    transform: translateY(-50%);
-}
-
-.notice.left {
-    --room: var(--column);
-    left: calc(var(--column) * 12.5cqw - 8px);
-    transform: translate(-100%, -50%);
-}
-
-.notice.right::after,
-.notice.left::after {
-    top: calc(50% - 6px);
-}
-
-.notice.right::after {
-    left: auto;
-    right: 100%;
-    border-top-color: transparent;
-    border-right-color: var(--explain-ink);
-}
-
-.notice.left::after {
-    left: 100%;
-    right: auto;
-    border-top-color: transparent;
-    border-left-color: var(--explain-ink);
-}
-
-/* On a phone's board the bubble takes its width, in two lines, its tail on the piece's column */
-@container (max-width: 519px) {
-    .board-wrap .notice:not(.centre) {
-        left: 4px;
-        width: calc(100cqw - 8px);
-        max-width: none;
-        --shift: 0%;
-    }
-
-    .board-wrap .notice:not(.centre)::after {
-        left: calc((var(--column) + 0.5) * 12.5cqw - 10px);
-        right: auto;
-    }
-}
-
-.notice.centre {
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.notice.centre::after {
-    content: none;
-}
-
-@keyframes notice-in {
-    from {
-        opacity: 0;
-    }
-}
-
-/* The choice of the piece a pawn becomes (T-11): four round buttons in a column from its square, over a shade */
-.promotion {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 4;
-    width: 100%;
-    aspect-ratio: 1;
-}
-
-.promotion-shade {
-    position: absolute;
-    inset: 0;
-    border-radius: var(--radius);
-    background: rgba(0, 0, 0, 0.35);
-}
-
-.promotion-piece {
-    position: absolute;
-    left: calc(var(--column) * 12.5cqw);
-    top: calc(var(--row) * 12.5cqw);
-    width: 12.5cqw;
-    height: 12.5cqw;
-    padding: 0.6cqw;
-    border: 0;
-    border-radius: 50%;
-    background: var(--light-square);
-    box-shadow: var(--shadow);
-    cursor: pointer;
-}
-
-.promotion-piece:hover {
-    box-shadow: var(--shadow), inset 0 0 0 max(2px, 0.625cqw) var(--hover-edge);
-}
-
-/* White inside dark reads on every square and every theme. */
-.promotion-piece:focus-visible,
-.square:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4.5px #1d2733;
-}
-
-.promotion-piece .piece {
-    display: block;
-    width: 100%;
-    height: 100%;
-}
-
-.square.culprit {
-    box-shadow: inset 0 0 0 max(2.5px, 0.5cqw) var(--explain-ink), inset 0 0 0 calc(max(2.5px, 0.5cqw) + 1.5px) rgba(255, 255, 255, 0.85);
-}
-
-/* The players' cards */
-.card {
-    background: var(--card);
-    border: 1px solid var(--line);
-    border-radius: var(--radius);
-    padding: 12px 14px;
-    box-shadow: var(--shadow);
-}
-
-/* The picture stays at the card's top left, however many lines the card has; the clock in the middle */
-.player-line {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-}
-
-.player-line > .clock {
-    align-self: center;
-}
-
-.player-line > svg {
-    flex: none;
-}
-
-.who {
-    flex: 1;
-    min-width: 0;
-    line-height: 1.25;
-}
-
-.name {
-    font-weight: 600;
-}
-
-.note {
-    color: var(--soft);
-    font-size: 13px;
-    font-weight: 400;
-}
-
-/* The AI's name, which the player may choose long, stays on one line: whole in its tooltip */
-.player.ai .name {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-/* Under the AI's name, the model it plays with (D-82): one line, whole in its tooltip */
-.player .signed {
-    color: var(--soft);
-    font-size: 12px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.turn {
-    color: var(--accent);
-    font-weight: 600;
-    white-space: nowrap;
-}
-
-/* A player's clock, in Zoe's pill (T-37): the running one in the accent colour, red in the last seconds */
-.player .clock {
-    flex: none;
-    padding: 4px 10px;
-    border-radius: 7px;
-    background: var(--page);
-    font-size: 20px;
-    font-weight: 600;
-    font-variant-numeric: lining-nums tabular-nums;
-    letter-spacing: 0.01em;
-}
-
-.player .clock.running {
-    background: var(--accent);
-    color: var(--on-accent);
-}
-
-.player .clock.low {
-    color: var(--low-time);
-}
-
-.player .clock.running.low {
-    background: var(--low-time);
-    color: #fff;
-}
-
-/* The clocks wait for the player (Zoe): the button that starts them takes a line of the player's card, under the clock it starts, off the board's squares;
-   between games the new game takes the same line, in the clock's place (D-77) */
-.player-line:has(> .start-clocks, > .next-game) {
-    flex-wrap: wrap;
-    row-gap: 10px;
-}
-
-.start-clocks,
-.next-game {
-    flex: 1 0 100%;
-    justify-content: center;
-    padding: 8px 14px;
-    font-size: 15px;
-    font-weight: 600;
-}
-
-.start-clocks .icon {
-    width: 14px;
-    height: 14px;
-    fill: currentColor;
-}
-
-.next-game .icon {
-    width: 16px;
-    height: 16px;
-    stroke-width: 2.2;
-}
-
-/* Between games a card has no side under the name (D-77): the name alone, in the middle of the picture */
-.player-line > .who:not(:has(.note)) {
-    align-self: center;
-}
-
-.player-line > .who:not(:has(.note)) .taken:empty {
-    display: none;
-}
-
-/* The pieces taken overlap within a kind, close enough that all fifteen and the score stay on one line */
-.taken {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    gap: 0;
-    white-space: nowrap;
-    min-height: 20px;
-    margin-top: 3px;
-}
-
-.taken .group {
-    display: inline-flex;
-}
-
-/* A kind starts close to the one before: the piece's own margin is the gap */
-.taken .group + .group {
-    margin-left: -3px;
-}
-
-/* The pieces taken are the set's small ones (T-94), whose colours and edges are their own */
-.taken .piece {
-    width: 20px;
-    height: 20px;
-}
-
-/* Pawns comb tight; the other pieces show more of themselves, a pair of rooks or bishops two pieces still (Zoe, T-40) */
-.taken .piece + .piece {
-    margin-left: -11px;
-}
-
-.taken .pawns .piece + .piece {
-    margin-left: -15px;
-}
-
-.balance {
-    flex: none;
-    margin-left: 2px;
-    color: var(--soft);
-    font-size: 13px;
-    font-weight: 600;
-}
-
-/* The player's face, masked by a circle */
-.avatar {
-    clip-path: circle(50%);
-}
-
-.avatar .back {
-    fill: var(--say);
-}
-
-.avatar .shirt {
-    fill: var(--accent);
-}
-
-.avatar .skin {
-    fill: #f1c6a0;
-}
-
-.avatar .hair {
-    fill: #4a3426;
-}
-
-.avatar .eye {
-    fill: #2b2420;
-}
-
-.avatar .smile {
-    fill: none;
-    stroke: #2b2420;
-    stroke-width: 1.6;
-    stroke-linecap: round;
-}
-
-/* The Torretta, whose eyes blink now and then, and its moods (D-70): a new face that pops in, never fading out, a red light when worried, out when sad, a light that breathes when
-   thoughtful */
-.torretta .antenna {
-    fill: none;
-    stroke: var(--torretta-shade);
-    stroke-width: 4;
-    stroke-linecap: round;
-}
-
-.torretta .light {
-    fill: var(--torretta-light);
-    transition: fill 0.2s;
-}
-
-.torretta.mood-worried .light {
-    fill: var(--torretta-alarm);
-}
-
-.torretta.mood-thoughtful .light {
-    animation: ponder 2.4s ease-in-out infinite;
-}
-
-.torretta.mood-sad .light {
-    fill: var(--torretta-shade);
-}
-
-@keyframes ponder {
-    50% {
-        fill: var(--torretta-ponder);
-    }
-}
-
-.torretta .expression.changed {
-    transform-box: fill-box;
-    transform-origin: center;
-    animation: face-in 0.16s ease-out;
-}
-
-@keyframes face-in {
-    from {
-        transform: scale(0.8);
-    }
-}
-
-.torretta .shade {
-    fill: var(--torretta-shade);
-}
-
-.torretta .body {
-    fill: var(--torretta-body);
-}
-
-.torretta .screen {
-    fill: var(--torretta-screen);
-}
-
-.torretta .eyes,
-.torretta .mouth {
-    fill: var(--torretta-face);
-}
-
-.torretta .expression .line,
-.torretta .brows {
-    fill: none;
-    stroke: var(--torretta-face);
-    stroke-width: 3.4;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-
-.torretta .eyes {
-    transform-box: fill-box;
-    transform-origin: center;
-    animation: blink 6s infinite;
-}
-
-@keyframes blink {
-    0%,
-    95%,
-    100% {
-        transform: scaleY(1);
-    }
-
-    97% {
-        transform: scaleY(0.1);
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .torretta .eyes,
-    .torretta .expression.changed,
-    .torretta.mood-thoughtful .light {
-        animation: none;
-    }
-
-    .torretta .light {
-        transition: none;
-    }
-}
-
-/* The bubbles: the AI's under its card, the tail under the Torretta's centre (14 px of padding, 48 px picture), and the player's above their box */
-.says,
-.sent {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-/* The bubbles never scroll: those that do not fit whole are hidden, and on the side away from the card they overflow toward */
-.says {
-    overflow: hidden;
-    min-height: 0;
-    padding-top: 12px;
-}
-
-.says:empty {
-    display: none;
-}
-
-.say {
-    position: relative;
-    background: var(--say);
-    color: var(--say-ink);
-    border-radius: var(--bubble);
-    padding: 10px 13px;
-    font-size: 14.5px;
-    line-height: 1.45;
-    text-wrap: pretty;
-    overflow-wrap: anywhere;
-}
-
-.say:first-child::before {
-    content: "";
-    position: absolute;
-    left: 29px;
-    top: -10px;
-    border: 10px solid transparent;
-    border-top: 0;
-    border-bottom-color: var(--say);
-}
-
-.sent {
-    align-items: flex-end;
-    justify-content: flex-end;
-    margin-bottom: 8px;
-    overflow: hidden;
-    min-height: 0;
-}
-
-.sent li {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    max-width: 88%;
-}
-
-.said {
-    margin: 0;
-    background: var(--accent);
-    color: var(--on-accent);
-    border-radius: var(--bubble) var(--bubble) 4px var(--bubble);
-    padding: 8px 12px;
-    font-size: 14.5px;
-    line-height: 1.4;
-    text-wrap: pretty;
-    overflow-wrap: anywhere;
-}
-
-.status {
-    display: inline-flex;
-    align-items: center;
-    gap: 3px;
-    margin-top: 3px;
-    font-size: 12px;
-    color: var(--soft);
-}
-
-.status .icon {
-    width: 15px;
-    height: 15px;
-    stroke-width: 2;
-}
-
-.status.read {
-    color: var(--accent);
-    font-weight: 600;
-}
-
-/* The box the player writes in: a bubble whose tail points at their picture */
-.compose {
-    position: relative;
-    background: var(--card);
-    border: 1px solid var(--line);
-    border-radius: var(--bubble);
-    padding: 8px 8px 8px 12px;
-    margin: 0 0 12px;
-    box-shadow: var(--shadow);
-}
-
-.compose::after {
-    content: "";
-    position: absolute;
-    left: 31px;
-    bottom: -8px;
-    width: 14px;
-    height: 14px;
-    background: var(--card);
-    border-right: 1px solid var(--line);
-    border-bottom: 1px solid var(--line);
-    transform: rotate(45deg);
-    border-bottom-right-radius: 3px;
-}
-
-.compose:focus-within,
-.compose:focus-within::after {
-    border-color: var(--accent);
-}
-
-.compose textarea {
-    display: block;
-    width: 100%;
-    resize: none;
-    border: 0;
-    background: none;
-    padding: 2px 0;
-    font-size: 14.5px;
-    line-height: 1.45;
-    min-height: 44px;
-    max-height: 96px;
-    field-sizing: content;
-    outline: none;
-}
-
-.compose textarea::placeholder {
-    color: var(--soft);
-}
-
-.foot {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    margin-top: 4px;
-}
-
-.hint,
-.count {
-    font-size: 12px;
-    color: var(--soft);
-}
-
-.count {
-    font-variant-numeric: tabular-nums;
-}
-
-.send {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    border: 0;
-    border-radius: 8px;
-    padding: 6px 10px 6px 12px;
-    background: var(--accent);
-    color: var(--on-accent);
-    font-size: 13.5px;
-    font-weight: 600;
-}
-
-.send .icon {
-    width: 15px;
-    height: 15px;
-    stroke-width: 2;
-}
-
-.send:disabled {
-    background: var(--quote);
-    color: var(--soft);
-    cursor: default;
-}
-
-.limit {
-    margin: 0 4px 6px 0;
-    padding: 7px 10px;
-    border-radius: 8px;
-    background: var(--warn-back);
-    color: var(--ink);
-    font-size: 13px;
-    line-height: 1.4;
-}
-
-.limit:empty {
-    display: none;
-}
-
-/* Turned round: the player on top, the AI below; the tails turn with them */
-.flipped .talk,
-.flipped .ai-block,
-.flipped .you-block {
-    flex-direction: column-reverse;
-}
-
-.flipped .says {
-    justify-content: flex-end;
-    padding: 0 0 12px;
-}
-
-.flipped .say:first-child::before {
-    content: none;
-}
-
-.flipped .say:last-child::after {
-    content: "";
-    position: absolute;
-    left: 29px;
-    bottom: -10px;
-    border: 10px solid transparent;
-    border-bottom: 0;
-    border-top-color: var(--say);
-}
-
-.flipped .compose {
-    margin: 12px 0 0;
-}
-
-.flipped .compose::after {
-    bottom: auto;
-    top: -8px;
-    transform: rotate(225deg);
-}
-
-.flipped .sent {
-    justify-content: flex-start;
-    margin: 8px 0 0;
-}
-
-/* The game's column, folded from the header */
-.side {
-    grid-area: side;
-    display: flex;
-    flex-direction: column;
-    gap: var(--between);
-    contain: size;
-    min-height: 0;
-}
-
-/* The game's card, as tall as a player's across the board: a little board where the player's card has their face, round people, a square game */
-.game-card {
-    margin: 0;
-    min-height: 74px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: 13px;
-}
-
-.tile {
-    position: relative;
-    flex: none;
-    display: grid;
-    place-items: center;
-    width: 48px;
-    height: 48px;
-    border-radius: var(--radius);
-    /* A board of four squares in the skin's colours, the dark one at the bottom left as on a board */
-    background: conic-gradient(var(--dark-square) 0 25%, var(--light-square) 0 50%, var(--dark-square) 0 75%, var(--light-square) 0);
-    overflow: hidden;
-}
-
-.tile .piece {
-    --piece-edge-width: 7px;
-    width: 40px;
-    height: 40px;
-}
-
-/* The king to move, edged in the accent like the coin of whoever moves */
-.tile.moving {
-    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
-}
-
-/* At the end both kings: side by side in a draw, the loser laid at the winner's feet */
-.tile.over {
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    padding-bottom: 4px;
-}
-
-.tile.over .piece {
-    --piece-edge-width: 8px;
-    width: 30px;
-    height: 30px;
-}
-
-.tile.draw .piece + .piece {
-    margin-left: -12px;
-}
-
-.tile.win > span {
-    position: absolute;
-    display: grid;
-}
-
-.tile.win .piece {
-    width: 100%;
-    height: 100%;
-}
-
-.tile.win .up {
-    right: 5px;
-    bottom: 4px;
-    width: 28px;
-    height: 28px;
-}
-
-/* Laid down, the king is as wide as it was tall: it drops 5px to rest where the other stands */
-.tile.win .down {
-    left: 4px;
-    bottom: -1px;
-    width: 24px;
-    height: 24px;
-    rotate: -90deg;
-}
-
-.game-card .what {
-    min-width: 0;
-    line-height: 1.25;
-}
-
-.game-card p {
-    margin: 0;
-}
-
-.game-card .head,
-.game-card .when {
-    color: var(--soft);
-}
-
-.game-card .big {
-    color: var(--ink);
-    font-size: 20px;
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    letter-spacing: -0.01em;
-}
-
-.game-card .when {
-    margin-top: 2px;
-}
-
-/* The game ended under the player's eyes: once the board has shown it, with the kings' badges, the card lights up in the accent and fades back */
-.game-card.lit {
-    animation: lit 1200ms ease-out 1350ms;
-}
-
-@keyframes lit {
-    20% {
-        box-shadow: 0 0 0 2px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
-    }
-}
-
-.opening {
-    display: grid;
-    gap: 2px;
-    font-size: 13px;
-}
-
-.opening p {
-    margin: 0;
-}
-
-.opening .family {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-}
-
-.opening .book {
-    display: grid;
-    align-self: center;
-    color: var(--accent);
-}
-
-.opening .book .icon {
-    width: 21px;
-    height: 21px;
-    stroke-width: 2.3;
-}
-
-.opening .book.out {
-    color: var(--ink);
-}
-
-.opening .variation {
-    color: var(--ink);
-}
-
-.opening .out {
-    color: var(--soft);
-    font-size: 12px;
-}
-
-/* A game in analysis (D-69): the AI's word on the whole game above the moves, and its note on the move shown in the talk, under the Torretta */
-.review {
-    display: grid;
-    gap: 4px;
-    font-size: 13.5px;
-    line-height: 1.45;
-}
-
-.review.waiting {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: 0;
-    color: var(--soft);
-}
-
-.review ul {
-    margin: 0;
-    padding-left: 18px;
-}
-
-/* In analysis nothing in the talk gives way: on a short screen the talk scrolls whole */
-.talk.studied {
-    overflow-y: auto;
-}
-
-.talk.studied > section,
-.talk.studied > section > * {
-    flex: none;
-}
-
-.spinner {
-    flex: none;
-    width: 14px;
-    height: 14px;
-    border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
-    border-top-color: var(--accent);
-    border-radius: 50%;
-    animation: spin 900ms linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .spinner {
-        animation-duration: 3s;
-    }
-}
-
-/* The badges of a side's moves, in its card under the pieces taken */
-.badge-counts {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px 10px;
-    list-style: none;
-    margin: 6px 0 0;
-    padding: 0;
-    font-size: 13px;
-}
-
-.badge-counts li {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.review p,
-.ai-note p {
-    margin: 0;
-}
-
-.review .head {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    color: var(--soft);
-    font-size: 12px;
-}
-
-.ai-note {
-    display: grid;
-    gap: 6px;
-    margin-top: 12px;
-}
-
-.ai-note .who {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: var(--soft);
-    font-size: 13px;
-}
-
-/* Who made the analysis, signed under the Torretta's name in the Torretta's height (D-81, Zoe's sketch A) */
-.ai-note .signed {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    line-height: 1.25;
-}
-
-.ai-note .signed small {
-    font-size: 12px;
-    overflow-wrap: anywhere;
-}
-
-/* Only the note's last bubble has a tail, pointing down at the Torretta beside the AI's name, the board turned round or not */
-.ai-note > .say::before,
-.ai-note > .say::after {
-    content: none;
-}
-
-.ai-note > .say:has(+ .who)::after {
-    content: "";
-    position: absolute;
-    left: 8px;
-    bottom: -9px;
-    border: 10px solid transparent;
-    border-bottom: 0;
-    border-top-color: var(--say);
-}
-
-.ai-note > .say + .who {
-    margin-top: 4px;
-}
-
-/* In analysis the board turned round changes which side's card is on top, never the order of the talk */
-.flipped .talk.studied,
-.flipped .talk.studied > section {
-    flex-direction: column;
-}
-
-.move-note .head {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-
-/* The note is the bubble's content: in the bubble's own ink, not the soft one of a side note (Zoe, T-40) */
-/* The AI's judgment of the player's last move, with the helps on (D-78): a line that opens on its note */
-.move-note.judged summary {
-    cursor: pointer;
-    list-style: none;
-}
-
-.move-note.judged summary::-webkit-details-marker {
-    display: none;
-}
-
-.move-note .note {
-    display: block;
-    margin-top: 4px;
-    color: var(--say-ink);
-    font-size: 14.5px;
-}
-
-/* The words the AI put in bold, in the titles' colour; the squares and moves in its words in the accent too, to find on the board */
-.say b {
-    color: var(--ink);
-    font-weight: 700;
-}
-
-.say .on-board {
-    color: var(--accent);
-}
-
-/* What the colours drawn with the note mean, the ones it uses */
-.move-note .legend {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2px 12px;
-    margin-top: 6px;
-    color: var(--soft);
-    font-size: 12px;
-}
-
-.move-note .legend > span {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.move-note .legend i {
-    width: 14px;
-    height: 3px;
-    border-radius: 2px;
-    background: var(--ring);
-}
-
-.legend .green {
-    --ring: #15a34a;
-}
-
-.legend .red {
-    --ring: #dc2626;
-}
-
-.legend .yellow {
-    --ring: #eab308;
-}
-
-.legend .blue {
-    --ring: #2563eb;
-}
-
-/* The move's number, which the list far below gives on a phone */
-.move-note .move-number {
-    display: none;
-    margin-right: 2px;
-    color: var(--soft);
-    font-size: 12px;
-    font-weight: 400;
-}
-
-.board-steps,
-.board-map {
-    display: none;
-}
-
-.app.folded .side {
-    visibility: hidden;
-    transition: visibility 0s 200ms;
-}
-
-/* Positioned, so that the moves' hidden names scroll with the list instead of stretching the page */
-.moves {
-    position: relative;
-    flex: 1;
-    min-height: 90px;
-    /* It scrolls with no scrollbar, kept on the move shown */
-    overflow: hidden auto;
-    scrollbar-width: none;
-    padding: 8px 10px;
-    font-size: 14px;
-}
-
-.moves ol {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.moves li {
-    display: grid;
-    grid-template-columns: 30px 1fr 1fr;
-    padding: 3px 6px;
-    border-radius: 5px;
-}
-
-.moves li:nth-child(even) {
-    background: var(--page);
-}
-
-.moves .number {
-    color: var(--soft);
-}
-
-/* A move is a button that shows it on the board (T-88) */
-.moves .ply {
-    justify-self: start;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 0 3px;
-    margin-left: -3px;
-    background: none;
-    border: 0;
-    border-radius: 3px;
-    color: inherit;
-    font: inherit;
-    cursor: pointer;
-}
-
-.moves .ply:hover {
-    background: color-mix(in srgb, var(--accent) 14%, transparent);
-}
-
-.moves .current {
-    font-weight: 700;
-    box-shadow: inset 0 -2px 0 var(--accent);
-}
-
-/* The buttons that step through the moves, under them as on Lichess and chess.com */
-.steps {
-    display: flex;
-    gap: 4px;
-    padding: 4px;
-}
-
-.steps button {
-    flex: 1;
-    display: grid;
-    place-items: center;
-    padding: 6px 0;
-    background: none;
-    border: 1px solid transparent;
-    border-radius: 6px;
-    color: var(--ink);
-    cursor: pointer;
-}
-
-.steps button:hover:not(:disabled) {
-    background: var(--page);
-    border-color: var(--line);
-}
-
-.steps button:disabled {
-    color: var(--soft);
-    opacity: 0.5;
-    cursor: default;
-}
-
-.steps .icon {
-    width: 20px;
-    height: 20px;
-    stroke-width: 2;
-}
-
-/* A piece in a move: the set's small one (T-94), White's white and Black's black, edged so either shows on either theme */
-.figurine {
-    display: inline-block;
-    width: 1.15em;
-    height: 1.15em;
-    margin-right: 0.05em;
-    vertical-align: -0.22em;
-}
-
-/* A capture's x is grey, so the squares of a move read first */
-.takes {
-    color: var(--soft);
-    font-weight: 400;
-}
-
-.visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-}
-
-.moves .result {
-    margin: 6px;
-    font-weight: 600;
-}
-
-.empty {
-    margin: 0;
-    color: var(--soft);
-}
-
-/* With no game, the game's column opens with this note, as tall as the game's card, so the column's tab sits in its middle */
-.side > .card.empty {
-    min-height: 74px;
-    display: flex;
-    align-items: center;
-}
-
-.problem {
-    max-width: 40em;
-    margin: 24px auto;
-    padding: 0 16px;
-}
-
-/* The page without its server, after /clear in Claude's app (Zoe): a card in the middle of the window, over the page that waits under it, dimmed and still;
-   its light breathes while the page tries again */
-.offline {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    z-index: 20;
-    width: min(400px, calc(100vw - 32px));
-    margin: 0;
-    padding: 20px 24px;
-    transform: translate(-50%, -50%);
-    border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line));
-    border-radius: var(--radius);
-    background: var(--card);
-    color: var(--ink);
-    /* The dialogs' backdrop, over the whole window */
-    box-shadow: 0 0 0 100vmax rgba(16, 22, 29, 0.5), 0 16px 40px rgb(0 0 0 / 22%);
-    font-size: 15px;
-    line-height: 1.5;
-    text-align: center;
-    text-wrap: pretty;
-}
-
-.offline::before {
-    content: "";
-    display: block;
-    width: 10px;
-    height: 10px;
-    margin: 0 auto 12px;
-    border-radius: 50%;
-    background: var(--accent);
-    animation: reconnecting 1.6s ease-in-out infinite;
-}
-
-@keyframes reconnecting {
-    50% {
-        opacity: 0.25;
-    }
-}
-
-/* Grey, darker and a little blurred, so it reads as stopped even when the board's theme is already grey */
-.offline + .app {
-    filter: grayscale(1) brightness(0.85) blur(2px);
-}
-
-/* No chat hears the player (Zoe): a note under the AI's card, by its stopped clock, on a page still in use. The AI's words below it lose their tail */
-.asleep {
-    flex: none;
-    margin: var(--between) 0 0;
-    padding: 10px 12px;
-    border: 1px solid color-mix(in oklab, var(--hover-edge) 55%, var(--line));
-    border-radius: var(--radius);
-    background: var(--warn-back);
-    color: var(--ink);
-    font-size: 13.5px;
-    line-height: 1.45;
-    text-wrap: pretty;
-}
-
-.flipped .asleep {
-    margin: 0 0 var(--between);
-}
-
-.ai-block:has(> .asleep) .say::before,
-.ai-block:has(> .asleep) .say::after {
-    content: none;
-}
-
-/* With the talk folded, the same note and the button that starts the clocks over the board's edge on the AI's side, away from the squares of the player's
-   first move (Stefano); clicks go through the note to the squares, and both step aside for a lifted piece, a promotion and a refused move */
-.over-board {
-    position: absolute;
-    top: 12px;
-    left: 50%;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    width: min(460px, calc(100% - 24px));
-    transform: translateX(-50%);
-    pointer-events: none;
-    animation: appear 200ms;
-}
-
-.flipped .over-board {
-    top: auto;
-    bottom: 12px;
-    flex-direction: column-reverse;
-}
-
-.over-board > .asleep {
-    margin: 0;
-    box-shadow: 0 2px 6px rgb(0 0 0 / 14%), 0 10px 28px rgb(0 0 0 / 20%);
-}
-
-.over-board > .start-clocks {
-    flex: none;
-    padding: 9px 22px;
-    box-shadow: 0 2px 6px rgb(0 0 0 / 14%), 0 8px 20px rgb(0 0 0 / 22%);
-    pointer-events: auto;
-}
-
-:root.dragging .over-board,
-.board-wrap:has(.promotion, .notice) > .over-board {
-    visibility: hidden;
-}
-
-/* A phone shows the talk whatever its fold: the note and the button stay in the cards */
-@media (max-width: 840px) {
-    .over-board {
-        display: none;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .offline::before,
-    .over-board {
-        animation: none;
-    }
-}
-
-/* Between games the board goes off (D-77): the squares sink toward the page and the pieces fade, the table set and nobody playing. A game the page saw end
-   keeps its final position less off, once its effects are over, with the kings' badges and the last move in full. A thin line keeps its edge, which the
-   light squares would lose in the page */
-.board-wrap.off > .board {
-    box-shadow: 0 0 0 1px var(--line);
-}
-
-.board-wrap.off .square.light {
-    background-color: color-mix(in oklab, var(--light-square) 40%, var(--page));
-}
-
-.board-wrap.off .square.dark {
-    background-color: color-mix(in oklab, var(--dark-square) 40%, var(--page));
-}
-
-/* The pieces fade toward the page and never turn see-through, so each side keeps one colour on every square; cburnett, which ignores the variables, loses
-   contrast instead, opaque as well */
-.board-wrap.off .piece {
-    --kept: 45%;
-}
-
-:root[data-set="cburnett"] .board-wrap.off .piece {
-    filter: grayscale(0.5) contrast(0.55);
-}
-
-:root[data-set="cburnett"] .board-wrap.off > .ended .piece {
-    filter: grayscale(0.3) contrast(0.8);
-}
-
-:root[data-set="cburnett"] .board-wrap.off > .ended .badge .piece {
-    filter: none;
-}
-
-.board-wrap.off .coordinate {
-    opacity: 0.4;
-}
-
-.board-wrap.off > .ended .square.light {
-    background-color: color-mix(in oklab, var(--light-square) 62%, var(--page));
-}
-
-.board-wrap.off > .ended .square.dark {
-    background-color: color-mix(in oklab, var(--dark-square) 62%, var(--page));
-}
-
-.board-wrap.off > .ended .piece {
-    --kept: 75%;
-}
-
-.board-wrap.off > .ended .badge .piece {
-    --kept: 100%;
-}
-
-/* It goes off gently, and comes back at once with the next game */
-@media (prefers-reduced-motion: no-preference) {
-    .board-wrap.off .square {
-        transition: background-color 400ms ease;
-    }
-
-    .board-wrap.off .piece,
-    .board-wrap.off .coordinate {
-        transition: opacity 400ms ease, --kept 400ms ease;
-    }
-}
-
-/* The header's chip when no game goes on: neutral, not the accent, with a pause sign (D-77) */
-.verdict.idle {
-    background: var(--card);
-    box-shadow: inset 0 0 0 1px var(--line);
-    color: var(--ink);
-}
-
-.verdict.idle .icon {
-    color: var(--soft);
-    stroke-width: 2.4;
-}
-
-/* Between games the chip is never cut: beside it the Torretta stands for the name at every width, and the flip keeps only its icon */
-@media (min-width: 841px) {
-    .top:has(.verdict.idle, .verdict.over) .title {
-        display: none;
-    }
-
-    .top:has(.verdict.idle, .verdict.over) .verdict {
-        margin-right: auto;
-    }
-}
-
-.top:has(.verdict.idle, .verdict.over) .command:has(.icon.flip) span {
-    display: none;
-}
-
-/* On a phone the player's card is under the board, below the fold: between games the header's new game stands out too, on the first screen */
-@media (max-width: 840px) {
-    .top:has(.verdict.idle, .verdict.over) .command:has(.icon.new) {
-        background: var(--accent);
-        border-color: var(--accent);
-        color: var(--on-accent);
-    }
-}
-
-/* The settings (D-56): a dialog over the page; each choice shows at once */
-.settings {
-    width: min(440px, calc(100vw - 32px));
-    max-height: calc(100vh - 48px);
-    padding: 0 20px 20px;
-    border: 1px solid var(--line);
-    border-radius: var(--radius);
-    background: var(--card);
-    color: var(--ink);
-    box-shadow: var(--shadow);
-}
-
-.settings::backdrop {
-    background: rgba(16, 22, 29, 0.4);
-}
-
-.settings header {
-    position: sticky;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 0 8px;
-    background: var(--card);
-}
-
-.settings h2 {
-    margin: 0;
-    font-size: 17px;
-    font-weight: 600;
-}
-
-.settings h3 {
-    margin: 18px 0 8px;
-    font-size: 12px;
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--soft);
-}
-
-.choices {
-    margin-bottom: 12px;
-}
-
-.choices .label {
-    display: block;
-    margin-bottom: 6px;
-    font-size: 13px;
-    color: var(--soft);
-}
-
-.options {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-}
-
-.choice {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 10px;
-    border: 1px solid var(--line);
-    border-radius: 8px;
-    background: none;
-    font-size: 14px;
-}
-
-.choice:hover {
-    border-color: var(--soft);
-}
-
-.choice[aria-checked="true"] {
-    border-color: var(--accent);
-    box-shadow: inset 0 0 0 1px var(--accent);
-}
-
-.sample {
-    display: inline-flex;
-}
-
-.sample .piece {
-    width: 26px;
-    height: 26px;
-}
-
-/* A swatch: the board's two squares and its highlight, the pieces' two colours, or the marks' one */
-.swatch {
-    display: inline-flex;
-    border-radius: 4px;
-    overflow: hidden;
-    box-shadow: 0 0 0 1px var(--line);
-}
-
-.swatch i {
-    width: 14px;
-    height: 20px;
-}
-
-.swatch[data-board] i:first-child {
-    background: var(--light-square);
-}
-
-.swatch[data-board] i:nth-child(2) {
-    background: var(--dark-square);
-}
-
-.swatch[data-board] i:nth-child(3) {
-    background: var(--dark-square) linear-gradient(var(--last-move), var(--last-move));
-}
-
-.swatch[data-pieces] i:first-child {
-    background: var(--white-piece);
-}
-
-.swatch[data-pieces] i:last-child {
-    background: var(--black-piece);
-}
-
-.swatch[data-marks] i {
-    background: var(--mark);
-}
-
-.toggle {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 6px 0;
-    font-size: 14px;
-}
-
-.toggle input {
-    width: 18px;
-    height: 18px;
-    accent-color: var(--accent);
-}
-
-/* The profiles (D-23, D-45): the player's picture, which a click changes, their name, which opens the profiles, the wizard and the profiles' dialogs */
-.avatar.photo {
-    clip-path: none;
-    border-radius: 50%;
-    object-fit: cover;
-    box-shadow: 0 0 0 1px var(--line);
-}
-
-/* A drawn avatar, its colour in the picture: the page's colour while it loads */
-.avatar.drawn {
-    background: var(--say);
-}
-
-.me {
-    position: relative;
-    flex: none;
-    padding: 0;
-    border: 0;
-    border-radius: 50%;
-    background: none;
-    line-height: 0;
-    cursor: pointer;
-}
-
-.me-cover {
-    position: absolute;
-    inset: 0;
-    display: grid;
-    place-items: center;
-    border-radius: 50%;
-    background: rgba(0, 0, 0, 0.45);
-    color: #fff;
-    opacity: 0;
-    transition: opacity 0.12s;
-}
-
-.me-cover .icon {
-    width: 45%;
-    height: 45%;
-}
-
-.me:hover .me-cover,
-.me:focus-visible .me-cover {
-    opacity: 1;
-}
-
-/* Where nothing hovers, a camera in the corner says the picture changes */
-.me-badge {
-    position: absolute;
-    right: -2px;
-    bottom: -2px;
-    display: none;
-    place-items: center;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: var(--accent);
-    color: var(--on-accent);
-    box-shadow: 0 0 0 2px var(--card);
-}
-
-.me-badge .icon {
-    width: 12px;
-    height: 12px;
-}
-
-@media (hover: none) {
-    .me-badge {
-        display: grid;
-    }
-}
-
-.profile-name {
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-    min-width: 0;
-    max-width: 100%;
-    padding: 0;
-    border: 0;
-    background: none;
-    color: inherit;
-    font: inherit;
-    text-align: left;
-    cursor: pointer;
-}
-
-.profile-name span {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.profile-name .icon {
-    flex: none;
-    width: 15px;
-    height: 15px;
-    color: var(--soft);
-}
-
-.profile-name:hover,
-.profile-name:hover .icon {
-    color: var(--accent);
-}
-
-.wizard {
-    max-width: 480px;
-    margin: 32px auto;
-    padding: 28px;
-    border: 1px solid var(--line);
-    border-radius: var(--radius);
-    background: var(--card);
-    box-shadow: var(--shadow);
-}
-
-.wizard h1 {
-    margin: 12px 0 4px;
-    font-size: 24px;
-}
-
-.wizard .lead {
-    margin: 0 0 24px;
-    color: var(--soft);
-}
-
-.wizard .lead span {
-    display: block;
-    margin-top: 4px;
-}
-
-.profile-form fieldset {
-    min-width: 0;
-    margin: 0 0 20px;
-    padding: 0;
-    border: 0;
-}
-
-.profile-form legend,
-.profile-form .field > span {
-    display: block;
-    margin-bottom: 8px;
-    padding: 0;
-    font-size: 15px;
-    font-weight: 600;
-}
-
-.profile-form legend small {
-    font-weight: 400;
-    color: var(--soft);
-}
-
-.profile-form .field {
-    display: block;
-    margin-bottom: 20px;
-}
-
-.profile-form input[type="text"],
-.profile-form input[type="number"],
-.profile-form select {
-    box-sizing: border-box;
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid var(--line);
-    border-radius: 8px;
-    background: var(--page);
-    color: var(--ink);
-    font: inherit;
-    font-size: 16px;
-}
-
-.study textarea {
-    box-sizing: border-box;
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid var(--line);
-    border-radius: 8px;
-    background: var(--page);
-    color: var(--ink);
-    font: 13px/1.4 ui-monospace, monospace;
-    resize: vertical;
-}
-
-.study .file input {
-    font: inherit;
-    font-size: 14px;
-    color: var(--soft);
-}
-
-/* The file button as our secondary buttons, in both themes */
-.study .file input::file-selector-button {
-    margin-right: 10px;
-    padding: 6px 12px;
-    border: 1px solid var(--line);
-    border-radius: 8px;
-    background: var(--card);
-    color: var(--ink);
-    font: inherit;
-    cursor: pointer;
-}
-
-.study .note {
-    margin: 0 0 16px;
-}
-
-/* In analysis, the game's own commands in the right column (T-106): save its PGN with the review, open the other analyses */
-.analysis-actions {
-    display: flex;
-    gap: 8px;
-    padding: 8px;
-}
-
-.analysis-actions button {
-    flex: 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    padding: 7px 10px;
-    border: 1px solid var(--line);
-    border-radius: 8px;
-    background: transparent;
-    color: var(--ink);
-    font: inherit;
-    font-size: 13px;
-    cursor: pointer;
-}
-
-.analysis-actions button:hover {
-    border-color: var(--accent);
-}
-
-/* The analyses to open again (T-106): a line each, who played and how it ended, then when, the opening and how long, and whether the AI has reviewed it */
-.study h3 {
-    margin: 0 0 8px;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--soft);
-}
-
-.analyses ul {
-    display: grid;
-    gap: 6px;
-    max-height: 40vh;
-    overflow-y: auto;
-    margin: 0 0 18px;
-    padding: 0;
-    list-style: none;
-}
-
-.analyses button {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 2px 10px;
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid var(--line);
-    border-radius: 8px;
-    background: var(--card);
-    color: var(--ink);
-    font: inherit;
-    font-size: 14px;
-    text-align: left;
-    cursor: pointer;
-}
-
-.analyses button:hover {
-    border-color: var(--accent);
-}
-
-.analyses b {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.analyses .note {
-    margin: 0;
-    font-size: 12px;
-}
-
-.analyses .state {
-    color: var(--soft);
-    font-size: 12px;
-    text-align: right;
-}
-
-.analyses .state.reviewed {
-    color: var(--accent);
-}
-
-.profile-form textarea:focus-visible,
-.profile-form input:focus-visible,
-.profile-form select:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: -1px;
-}
-
-/* The drawn avatars: always two rows of five, smaller on a narrow screen (Zoe, T-102) */
-.avatars {
-    display: grid;
-    grid-template-columns: repeat(5, minmax(0, 62px));
-    justify-content: space-between;
-    gap: 8px;
-    justify-items: center;
-}
-
-.avatars .avatar-choice {
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.avatar-choice {
-    position: relative;
-    padding: 3px;
-    border: 2px solid transparent;
-    border-radius: 50%;
-    background: none;
-    line-height: 0;
-    cursor: pointer;
-}
-
-.avatar-choice input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    opacity: 0;
-}
-
-.avatar-choice:has(input:checked),
-.avatar-choice[aria-pressed="true"],
-.avatar-choice.on {
-    border-color: var(--accent);
-}
-
-.avatar-choice:has(input:focus-visible) {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-}
-
-.avatar-choice .avatar {
-    display: block;
-    width: 100%;
-    height: auto;
-}
-
-/* The player's own photo: a line of its own under the drawn avatars, at every width */
-.avatar-choice.upload {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    width: fit-content;
-    margin-top: 10px;
-    padding-right: 14px;
-    border-radius: 30px;
-    color: var(--accent);
-    font-size: 14px;
-    line-height: 1.2;
-}
-
-.avatar-choice.upload .avatar {
-    width: 36px;
-    height: 36px;
-}
-
-.ring {
-    display: grid;
-    place-items: center;
-    width: 36px;
-    height: 36px;
-    border: 2px dashed var(--line);
-    border-radius: 50%;
-    box-sizing: border-box;
-    color: var(--soft);
-}
-
-.ring .icon {
-    width: 18px;
-    height: 18px;
-}
-
-/* How the player plays: two by two, each with its note under it */
-.levels {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-}
-
-.level {
-    position: relative;
-    cursor: pointer;
-}
-
-.level input {
-    position: absolute;
-    opacity: 0;
-}
-
-.level > span {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    height: 100%;
-    box-sizing: border-box;
-    padding: 9px 12px;
-    border: 1px solid var(--line);
-    border-radius: 8px;
-    background: var(--page);
-}
-
-.level small {
-    color: var(--soft);
-    font-size: 13px;
-}
-
-.level:has(input:checked) > span {
-    border-color: var(--accent);
-    box-shadow: inset 0 0 0 1px var(--accent);
-}
-
-.level:has(input:focus-visible) > span {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-}
-
-.rating {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-}
-
-.profile-form .start {
-    width: 100%;
-    padding: 13px;
-    border: 0;
-    border-radius: 8px;
-    background: var(--accent);
-    color: var(--on-accent);
-    font: inherit;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-}
-
-.profile-form .start:disabled {
-    opacity: 0.6;
-    cursor: default;
-}
-
-.profile-form .problem,
-.profiles .problem {
-    margin: 0 0 12px;
-    padding: 0;
-    color: var(--low-time);
-    font-size: 14px;
-}
-
-.profiles header {
-    justify-content: flex-start;
-    gap: 4px;
-}
-
-.profiles header h2 {
-    flex: 1;
-    min-width: 0;
-}
-
-.profiles .avatars {
-    margin-top: 8px;
-}
-
-.profiles .avatar-choice.upload {
-    margin-bottom: 12px;
-}
-
-.profile-list {
-    display: grid;
-    gap: 6px;
-    margin: 8px 0 12px;
-}
-
-.profile-list .choice {
-    min-width: 0;
-    font-size: 15px;
-    text-align: left;
-}
-
-/* The profile in use: a tick at the end of its line, not the ring of a field being typed in */
-.profile-list .choice[aria-checked="true"] {
-    border-color: var(--line);
-    box-shadow: none;
-}
-
-.profile-list .choice span {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.profile-list .in-use {
-    flex: none;
-    width: 18px;
-    height: 18px;
-    color: var(--accent);
-}
-
-.profile-list .choice:disabled {
-    opacity: 0.6;
-    cursor: default;
-}
-
-.profile-list .avatar {
-    flex: none;
-    width: 32px;
-    height: 32px;
-}
-
-.profiles .note {
-    margin: 0 0 12px;
-}
-
-.profiles .new-profile {
-    border-color: var(--line);
-    color: var(--ink);
-}
-
-.profiles .new-profile:disabled {
-    color: var(--soft);
-    cursor: default;
-}
-
-/* Where the games are (T-119), under the wizard's form and the players' menu, with the button that opens it */
-.data-folder {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px 12px;
-    margin-top: 20px;
-    padding-top: 16px;
-    border-top: 1px solid var(--line);
-}
-
-.data-folder .note {
-    flex: 1 1 220px;
-    margin: 0;
-}
-
-.data-folder b {
-    color: var(--ink);
-    font-weight: 600;
-    overflow-wrap: anywhere;
-}
-
-.data-folder .command {
-    border-color: var(--line);
-    color: var(--ink);
-}
-
-.data-folder .command:disabled {
-    color: var(--soft);
-    cursor: default;
-}
-
-/* The account's name suggested in the wizard (T-120): Chrome's arrow, quieter than the selects' chevron, is the only sign of it */
-.profile-form input::-webkit-calendar-picker-indicator {
-    opacity: 0.45;
-}
-
-.data-folder .problem {
-    flex-basis: 100%;
-    margin: 0;
-}
-
-/* The new game (T-58): the colours and the clocks in a row, the levels two by two with what the AI sees under them */
-.new-game .row {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
-    gap: 8px;
-}
-
-.new-game .row .level > span {
-    align-items: center;
-    gap: 4px;
-    padding: 9px 4px;
-}
-
-/* Each colour by its king, either by both, and each clock by its minutes as a slice of the hour */
-.new-game .row .piece {
-    width: 30px;
-    height: 30px;
-    margin: -3px 0;
-}
-
-.new-game .kings {
-    display: flex;
-}
-
-.new-game .kings .piece + .piece {
-    margin-left: -8px;
-}
-
-.new-game .clock-icon {
-    width: 24px;
-    height: 24px;
-}
-
-.new-game .clock-icon .slice {
-    fill: currentColor;
-    stroke: none;
-}
-
-.new-game .sees {
-    margin: 10px 0 0;
-    color: var(--soft);
-    font-size: 13px;
-}
-
-.new-game .levels {
-    grid-auto-rows: 1fr;
-}
-
-/* The AI's level on its card: a button that shows what it sees, under it where the browser anchors popovers, else in the middle */
-.level-name {
-    margin: -4px -2px;
-    padding: 4px 2px;
-    border: 0;
-    border-radius: 4px;
-    background: none;
-    color: inherit;
-    font: inherit;
-    cursor: help;
-    text-decoration: underline dotted;
-    text-underline-offset: 3px;
-    anchor-name: --ai-level;
-}
-
-.level-name:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-}
-
-.level-tip {
-    max-width: min(280px, calc(100vw - 32px));
-    padding: 8px 10px;
-    border: 1px solid var(--line);
-    border-radius: 8px;
-    background: var(--card);
-    color: var(--ink);
-    font-size: 13px;
-    line-height: 1.35;
-    box-shadow: var(--shadow);
-}
-
-@supports (position-area: bottom) {
-    .level-tip {
-        position-anchor: --ai-level;
-        position-area: bottom span-right;
-        position-try-fallbacks: flip-block, flip-inline;
-        inset: auto;
-        margin: 6px 16px 6px 0;
-    }
-}
-
-@media (max-width: 520px) {
-    .wizard {
-        margin: 0;
-        padding: 20px 16px;
-        border: 0;
-        border-radius: 0;
-        box-shadow: none;
-    }
-}
-
-/* Zoe's palettes (T-82): on the page's root and on each swatch of the settings. Board skins, each with its own highlights */
-:root[data-board="azzurro"],
-[data-board="azzurro"] {
-    --light-square: #eaf1f8;
-    --dark-square: #86abd0;
-    --last-move: rgba(255, 206, 70, 0.65);
-    --selected: rgba(255, 190, 50, 0.85);
-    --hover-edge: #f4c84c;
-}
-
-:root[data-theme="dark"][data-board="azzurro"],
-:root[data-theme="dark"] [data-board="azzurro"] {
-    --light-square: #a9bccd;
-    --dark-square: #61809e;
-    --last-move: rgba(255, 206, 70, 0.65);
-    --selected: rgba(255, 190, 50, 0.85);
-    --hover-edge: #f4c84c;
-}
-
-:root[data-board="verde"],
-[data-board="verde"] {
-    --light-square: #eeeed2;
-    --dark-square: #769656;
-    --last-move: rgba(255, 255, 51, 0.5);
-    --selected: rgba(255, 236, 40, 0.75);
-    --hover-edge: #f6f669;
-}
-
-:root[data-theme="dark"][data-board="verde"],
-:root[data-theme="dark"] [data-board="verde"] {
-    --light-square: #c3c7a8;
-    --dark-square: #5f7c45;
-    --last-move: rgba(255, 255, 51, 0.5);
-    --selected: rgba(255, 236, 40, 0.75);
-    --hover-edge: #f6f669;
-}
-
-:root[data-board="noce"],
-[data-board="noce"] {
-    --light-square: #e9d8bd;
-    --dark-square: #a6866a;
-    --last-move: rgba(200, 212, 40, 0.55);
-    --selected: rgba(185, 205, 20, 0.75);
-    --hover-edge: #cdd26a;
-}
-
-:root[data-theme="dark"][data-board="noce"],
-:root[data-theme="dark"] [data-board="noce"] {
-    --light-square: #c4b096;
-    --dark-square: #80654d;
-    --last-move: rgba(200, 212, 40, 0.55);
-    --selected: rgba(185, 205, 20, 0.75);
-    --hover-edge: #cdd26a;
-}
-
-:root[data-board="ardesia"],
-[data-board="ardesia"] {
-    --light-square: #dfe3e8;
-    --dark-square: #8b97a4;
-    --last-move: rgba(255, 206, 70, 0.6);
-    --selected: rgba(255, 190, 50, 0.8);
-    --hover-edge: #f4c84c;
-}
-
-:root[data-theme="dark"][data-board="ardesia"],
-:root[data-theme="dark"] [data-board="ardesia"] {
-    --light-square: #a7b0ba;
-    --dark-square: #65707c;
-    --last-move: rgba(255, 206, 70, 0.6);
-    --selected: rgba(255, 190, 50, 0.8);
-    --hover-edge: #f4c84c;
-}
-
-:root[data-board="grigio"],
-[data-board="grigio"] {
-    --light-square: #ededed;
-    --dark-square: #9a9a9a;
-    --last-move: rgba(255, 206, 70, 0.6);
-    --selected: rgba(255, 190, 50, 0.8);
-    --hover-edge: #f4c84c;
-}
-
-:root[data-theme="dark"][data-board="grigio"],
-:root[data-theme="dark"] [data-board="grigio"] {
-    --light-square: #b9b9b9;
-    --dark-square: #707070;
-    --last-move: rgba(255, 206, 70, 0.6);
-    --selected: rgba(255, 190, 50, 0.8);
-    --hover-edge: #f4c84c;
-}
-
-:root[data-board="lavanda"],
-[data-board="lavanda"] {
-    --light-square: #ece6f2;
-    --dark-square: #9a86b8;
-    --last-move: rgba(255, 214, 90, 0.6);
-    --selected: rgba(255, 200, 60, 0.8);
-    --hover-edge: #f4c84c;
-}
-
-:root[data-theme="dark"][data-board="lavanda"],
-:root[data-theme="dark"] [data-board="lavanda"] {
-    --light-square: #b8adc6;
-    --dark-square: #6f5e8c;
-    --last-move: rgba(255, 214, 90, 0.6);
-    --selected: rgba(255, 200, 60, 0.8);
-    --hover-edge: #f4c84c;
-}
-
-:root[data-board="ciliegio"],
-[data-board="ciliegio"] {
-    --light-square: #ecd3b6;
-    --dark-square: #9a5a3e;
-    --last-move: rgba(230, 220, 70, 0.55);
-    --selected: rgba(220, 210, 40, 0.75);
-    --hover-edge: #e6dc46;
-}
-
-:root[data-theme="dark"][data-board="ciliegio"],
-:root[data-theme="dark"] [data-board="ciliegio"] {
-    --light-square: #c6ab8f;
-    --dark-square: #73412c;
-    --last-move: rgba(230, 220, 70, 0.55);
-    --selected: rgba(220, 210, 40, 0.75);
-    --hover-edge: #e6dc46;
-}
-
-:root[data-board="menta"],
-[data-board="menta"] {
-    --light-square: #e9f3ec;
-    --dark-square: #7cb396;
-    --last-move: rgba(255, 218, 80, 0.6);
-    --selected: rgba(255, 204, 50, 0.8);
-    --hover-edge: #f4c84c;
-}
-
-:root[data-theme="dark"][data-board="menta"],
-:root[data-theme="dark"] [data-board="menta"] {
-    --light-square: #b3c6b9;
-    --dark-square: #58876d;
-    --last-move: rgba(255, 218, 80, 0.6);
-    --selected: rgba(255, 204, 50, 0.8);
-    --hover-edge: #f4c84c;
-}
-
-:root[data-board="carta"],
-[data-board="carta"] {
-    --light-square: #f3f1ea;
-    --dark-square: #b8b2a2;
-    --last-move: rgba(110, 165, 225, 0.5);
-    --selected: rgba(80, 145, 215, 0.7);
-    --hover-edge: #4a8ad0;
-}
-
-:root[data-theme="dark"][data-board="carta"],
-:root[data-theme="dark"] [data-board="carta"] {
-    --light-square: #c9c5b9;
-    --dark-square: #8a8577;
-    --last-move: rgba(110, 165, 225, 0.5);
-    --selected: rgba(80, 145, 215, 0.7);
-    --hover-edge: #4a8ad0;
-}
-
-/* Piece colours for Nitida and Torretta */
-:root[data-pieces="classico"],
-[data-pieces="classico"] {
-    --white-piece: #fff;
-    --black-piece: #000;
-}
-
-:root[data-pieces="avorio"],
-[data-pieces="avorio"] {
-    --white-piece: #f4ead3;
-    --black-piece: #2a1c12;
-}
-
-:root[data-pieces="notte"],
-[data-pieces="notte"] {
-    --white-piece: #fff;
-    --black-piece: #1a3050;
-}
-
-:root[data-pieces="bordeaux"],
-[data-pieces="bordeaux"] {
-    --white-piece: #fff;
-    --black-piece: #5e161c;
-}
-
-/* Marks with the right button */
-:root[data-marks="arancione"],
-[data-marks="arancione"] {
-    --mark: #f07c1e;
-    --mark-square: rgba(240, 124, 30, 0.65);
-}
-
-:root[data-marks="rosso"],
-[data-marks="rosso"] {
-    --mark: #d6342c;
-    --mark-square: rgba(214, 52, 44, 0.6);
-}
-
-:root[data-marks="blu"],
-[data-marks="blu"] {
-    --mark: #2335a8;
-    --mark-square: rgba(35, 53, 168, 0.62);
-}
-
-:root[data-marks="verde"],
-[data-marks="verde"] {
-    --mark: #0f6b30;
-    --mark-square: rgba(15, 107, 48, 0.7);
-}
-
-/* Beside the board, a column's content keeps its width and its outer edge while the column folds: it slides under the board, the text never flows again */
-@media (min-width: 841px) {
-    .talk > * {
-        width: var(--left);
-    }
-}
-
-@media (min-width: 1100px) {
-    .side {
-        align-items: flex-end;
-    }
-
-    .side > * {
-        width: var(--right);
-    }
-}
-
-/* Where three columns would leave the board small, the game's column goes under the board, always open */
-@media (min-width: 841px) and (max-width: 1099px) {
-    .app,
-    .app.folded {
-        --right-now: 0px;
-        grid-template-columns: var(--left-now) auto;
-        grid-template-rows: auto minmax(var(--least), auto) auto;
-        grid-template-areas: ". head" "talk board" ". side";
-        /* The page scrolls here: the board measures the page without its scroll bar */
-        container-type: inline-size;
-    }
-
-    .board-wrap {
-        width: min(calc(100cqw - var(--left-now) - var(--between)), max(var(--least), calc(100vh - var(--bar) - 3 * var(--between))));
-    }
-
-    .side,
-    .app.folded .side {
-        visibility: visible;
-        contain: none;
-    }
-
-    .fold-tab.of-game {
-        display: none;
-    }
-
-    .moves ol {
-        columns: 2;
-        column-gap: 12px;
-    }
-
-    .moves li {
-        break-inside: avoid;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .app,
-    .board-wrap,
-    .fold-tab,
-    .app.talk-rail .talk {
-        transition: none;
-    }
-
-    .app.talk-rail .faces,
-    .verdict,
-    .game-card.lit {
-        animation: none;
-    }
-}
-
-/* A phone, or a narrow window: one column. The AI above the board, the player's words and card below it, then the game */
-@media (max-width: 840px) {
-    :root {
-        --gap: 12px;
-    }
-
-    .command span {
-        display: none;
-    }
-
-    /* The header has no room for the word on a game over: it takes a line of its own under the buttons */
-    .top {
-        height: auto;
-        min-height: var(--bar);
-        flex-wrap: wrap;
-        gap: var(--between) 8px;
-    }
-
-    /* The name gives way to the buttons, which keep to the first line */
-    .title {
-        min-width: 0;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-
-    .verdict {
-        order: 1;
-        flex-basis: 100%;
-        text-align: center;
-        justify-content: center;
-    }
-
-    /* The AI's draw offer and its answer share the second line */
-    .answer {
-        order: 1;
-    }
-
-    .top:has(.answer) .verdict {
-        flex: 1 0 60%;
-    }
-
-    .app,
-    .app.folded,
-    .app.talk-rail,
-    .app.talk-folded {
-        grid-template-columns: 1fr;
-        grid-template-rows: none;
-        grid-template-areas: "head" "ai" "board" "you" "side";
-    }
-
-    .app.flipped {
-        grid-template-areas: "head" "you" "board" "ai" "side";
-    }
-
-    /* The helps' map right under the board, by the thumb, so the board stays in sight while it shows (D-78, Zoe) */
-    .app:has(.board-map) {
-        grid-template-areas: "head" "ai" "board" "map" "you" "side";
-    }
-
-    .app.flipped:has(.board-map) {
-        grid-template-areas: "head" "you" "board" "map" "ai" "side";
-    }
-
-    .board-map {
-        display: flex;
-        justify-content: flex-end;
-        grid-area: map;
-    }
-
-    .helps-card .map-button {
-        display: none;
-    }
-
-    .talk,
-    .app.talk-rail .talk,
-    .app.talk-folded .talk {
-        display: contents;
-        visibility: visible;
-        opacity: 1;
-    }
-
-    .ai-block {
-        grid-area: ai;
-    }
-
-    .you-block {
-        grid-area: you;
-    }
-
-    .board-wrap {
-        width: 100%;
-    }
-
-    .says,
-    .sent {
-        max-height: 30vh;
-    }
-
-    .side,
-    .app.folded .side {
-        display: flex;
-        visibility: visible;
-        contain: none;
-    }
-
-    .fold-tab,
-    .app.talk-rail .faces,
-    .app.talk-folded .faces {
-        display: none;
-    }
-
-    .moves ol {
-        columns: 2;
-        column-gap: 12px;
-    }
-
-    .moves li {
-        break-inside: avoid;
-    }
-
-    /* A game in analysis, turned round or not: the card on top, the board, its steps under the thumb, the Torretta's note, the card below, the moves (Zoe, T-40) */
-    .app:has(.talk.studied),
-    .app.flipped:has(.talk.studied) {
-        grid-template-areas: "head" "ai" "board" "steps" "note" "you" "side";
-    }
-
-    .talk.studied > .ai-block {
-        display: contents;
-    }
-
-    .talk.studied > .ai-block > :not(.ai-note) {
-        grid-area: ai;
-    }
-
-    .talk.studied .ai-note {
-        grid-area: note;
-        margin-top: 0;
-    }
-
-    /* With no chat listening, its note comes before the Torretta's (Zoe) */
-    .app:has(.talk.studied > .ai-block > .asleep),
-    .app.flipped:has(.talk.studied > .ai-block > .asleep) {
-        grid-template-areas: "head" "ai" "board" "steps" "asleep" "note" "you" "side";
-    }
-
-    .talk.studied > .ai-block > .asleep {
-        grid-area: asleep;
-        margin: 0;
-    }
-
-    .board-steps {
-        display: block;
-        grid-area: steps;
-    }
-
-    .app:has(.talk.studied) .side .steps {
-        display: none;
-    }
-
-    .move-note .move-number {
-        display: inline;
-    }
-}
-
-/* The helps (D-78, Zoe's sketch B): one ink for all they draw, never one of the AI's colours, a fill or a ring. The board says where, the card says what. */
-:root {
-    --help-ink: #11161d;
-    --help-on: #fff;
-    --help-line: rgba(17, 22, 29, 0.78);
-    --help-halo: rgba(255, 255, 255, 0.85);
-}
-
-/* A piece at risk: a corner folded in ink, bottom left, the square's free corner */
-.help-notch {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    z-index: 2;
-    display: block;
-    width: clamp(14px, 6.5cqw, 44px);
-    height: clamp(14px, 6.5cqw, 44px);
-    pointer-events: none;
-}
-
-.help-notch svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-}
-
-.help-notch path {
-    fill: var(--help-ink);
-    stroke: var(--help-halo);
-    stroke-width: 0.9;
-    stroke-linejoin: round;
-}
-
-.help-notch circle {
-    fill: var(--help-on);
-}
-
-/* A pin: a thin dashed ink line from the pinner to what stands behind, under the arrows; without a head, never an arrow */
-.helps-layer {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    aspect-ratio: 1;
-    z-index: 1;
-    pointer-events: none;
-}
-
-.helps-layer line.halo {
-    stroke: rgba(255, 255, 255, 0.35);
-    stroke-width: 0.13;
-}
-
-.helps-layer line:not(.halo) {
-    stroke: var(--help-line);
-    stroke-width: 0.065;
-    stroke-dasharray: 0.16 0.12;
-    stroke-linecap: round;
-}
-
-/* The map (Zoe, after the round): every square on one neutral ground, then light where only White reaches, dark where only Black does, half and half
-   when both do; the two counts together in the middle, as a domino. The drawings and the pieces step back */
-.board.mapping ~ .arrows,
-.board.mapping .move-badge {
-    opacity: 0.12;
-}
-
-.board.mapping .square.noted::after {
-    opacity: 0.15;
-}
-
-.board.mapping .piece {
-    opacity: 0.45;
-}
-
-.control-ground {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    background: #8d96a1;
-}
-
-.control-ground.white {
-    background: #eef1f4;
-}
-
-.control-ground.black {
-    background: #2b323c;
-}
-
-.control-ground.both {
-    background: linear-gradient(135deg, #eef1f4 50%, #2b323c 50%);
-}
-
-.control-count {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    z-index: 1;
-    display: flex;
-    translate: -50% -50%;
-    border-radius: 4px;
-    overflow: hidden;
-    box-shadow: 0 0 0 1px rgba(17, 22, 29, 0.55);
-    pointer-events: none;
-    font: 800 clamp(10px, 2.2cqw, 17px) / 1 "Segoe UI", system-ui, sans-serif;
-}
-
-.control-count b {
-    min-width: 1.35em;
-    padding: 0.2em 0.25em;
-    text-align: center;
-}
-
-.control-count .white {
-    background: #fff;
-    color: #11161d;
-}
-
-.control-count .black {
-    background: #11161d;
-    color: #fff;
-}
-
-/* The helps' card in the game's column */
-.helps-card {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    font-size: 13px;
-    min-height: 0;
-    flex: 0 1 auto;
-    /* No scrollbar in the page (Stefano): the card fits its column's width, and a column too short for it scrolls it under the wheel or the finger */
-    overflow: hidden auto;
-    scrollbar-width: none;
-}
-
-.helps-title {
-    margin: 0;
-    font-size: 13px;
-    font-weight: 700;
-    color: var(--ink);
-}
-
-.help-rows {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    color: var(--soft);
-}
-
-.help-rows li {
-    position: relative;
-    padding: 3px 6px 3px 26px;
-    border-radius: 6px;
-    line-height: 1.35;
-}
-
-.help-rows li.points:hover {
-    background: color-mix(in srgb, var(--accent) 16%, transparent);
-    color: var(--ink);
-}
-
-.help-rows li.quiet {
-    font-size: 12px;
-}
-
-.help-rows .square-name {
-    color: var(--ink);
-}
-
-/* The checks and the loose pieces in figures, as the move list draws them; the loose ones White's first, then Black's. */
-.help-rows .help-move {
-    margin-right: 0.5em;
-    color: var(--ink);
-    font-weight: 600;
-    white-space: nowrap;
-}
-
-.help-rows .help-pieces + .help-pieces {
-    margin-left: 0.4em;
-    padding-left: 0.6em;
-    border-left: 1px solid var(--line);
-}
-
-.help-rows .help-notch {
-    left: 6px;
-    top: 4px;
-    bottom: auto;
-    width: 14px;
-    height: 14px;
-}
-
-.help-rows .help-notch path {
-    fill: var(--ink);
-    stroke: none;
-}
-
-.help-rows .help-notch circle {
-    fill: var(--card);
-}
-
-.help-rows .row-icon {
-    position: absolute;
-    left: 6px;
-    top: 3px;
-    width: 14px;
-    height: 16px;
-    display: grid;
-    place-items: center;
-    color: var(--ink);
-    font-weight: 800;
-}
-
-.helps-card .tabs {
-    display: flex;
-    gap: 4px;
-    border-bottom: 1px solid var(--line);
-}
-
-.helps-card .tabs [role="tab"] {
-    border: 0;
-    background: none;
-    color: var(--soft);
-    font: inherit;
-    font-weight: 600;
-    padding: 4px 8px 6px;
-    border-bottom: 2px solid transparent;
-    margin-bottom: -1px;
-    cursor: pointer;
-}
-
-.helps-card .tabs [role="tab"][aria-selected="true"] {
-    color: var(--ink);
-    border-bottom-color: var(--accent);
-}
-
-/* The map's button: in the card's tabs, or under the board on a phone */
-.map-button {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    border: 1px solid var(--line);
-    border-radius: 6px;
-    padding: 2px 8px;
-    background: var(--card);
-    color: var(--soft);
-    font: inherit;
-    font-size: 13px;
-    font-weight: 600;
-    cursor: pointer;
-    touch-action: none;
-    user-select: none;
-}
-
-.tabs .map-button {
-    margin: 0 0 4px auto;
-}
-
-.board-map .map-button {
-    padding: 6px 12px;
-}
-
-.map-button svg {
-    width: 13px;
-    height: 13px;
-    fill: currentColor;
-}
-
-.map-button small {
-    font-weight: 400;
-}
-
-.map-button[aria-pressed="true"] {
-    background: var(--accent);
-    color: var(--on-accent);
-    border-color: var(--accent);
-}
-
-.profile-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 12.5px;
-    color: var(--soft);
-}
-
-.profile-table th,
-.profile-table td {
-    padding: 2px 4px;
-    text-align: left;
-    font-weight: 400;
-}
-
-.profile-table thead th {
-    color: var(--ink);
-    font-weight: 700;
-}
-
-.profile-table tbody tr + tr {
-    border-top: 1px solid var(--line);
-}
-
-/* A term with its meaning under the pointer, and under its line at a click or a tap (Rosa, T-117). */
-.profile-table .term {
-    padding: 0;
-    border: 0;
-    background: none;
-    color: inherit;
-    font: inherit;
-    text-align: left;
-    text-decoration: underline dotted color-mix(in srgb, var(--soft) 60%, transparent);
-    text-underline-offset: 3px;
-    cursor: help;
-}
-
-.profile-table tbody tr.meaning {
-    border-top: 0;
-}
-
-.profile-table tr.meaning td {
-    padding-bottom: 4px;
-    font-size: 12px;
-    font-style: italic;
-}
-
-.profile-foot {
-    margin: 6px 0 0;
-    font-size: 12px;
-    color: var(--soft);
-}
+/* The page's style, a sheet for each of its parts, in the order of the cascade */
+@import "theme.css";
+@import "base.css";
+@import "layout/layout.css";
+@import "board/board.css";
+@import "talk/talk.css";
+@import "game/game.css";
+@import "helps/helps.css";
+@import "dialogs/dialogs.css";