/* Schach — plain, bold. Same family as Yukendo.

   1. Tokens and colour schemes   6. Board
   2. Base                        7. Overlays on the board
   3. Layout                      8. Rulebook
   4. Components                  9. Utilities
   5. Pages                      10. Media queries */

/* ========== 1. Tokens and colour schemes ==========
   "Schiefer" ist der Standard (:root); die anderen wählt man auf der
   Erfolge-Seite (data-theme), dazu hell/dunkel/automatisch (data-mode).
   Jedes Schema setzt dieselben Variablen, einmal hell und einmal dunkel.
   Die dunklen Werte stehen zweimal: für data-mode="dark" und für "auto"
   bei dunklem System (board3d.js liest die Werte als fertige Farben,
   light-dark() geht deshalb nicht). */

:root {
  --radius: 10px;
  --gutter: clamp(16px, 4vw, 48px);
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root[data-mode="light"] { color-scheme: light; }
:root[data-mode="dark"] { color-scheme: dark; }

/* Schiefer */
:root {
  --paper: #f4f5f7;
  --paper-2: #ffffff;
  --ink: #1f2328;
  --ink-soft: #3d444d;
  --muted: #6e7781;
  --line: #d8dee4;
  --marker: #2f81f7;
  --marker-ink: #ffffff;
  --peer: #eaeef2;
  --marker-soft: #ddeaff;
  --user: #8250df;
  --red: #cf222e;
  --red-soft: #ffebe9;
  --green: #1a7f37;
  --dot: #2f81f7;
  --sq-light: #eef1f4;
  --sq-dark: #a5b1bf;
  --sq-last: #b6d4ff;
  --sq-sel: #6aa7ff;
  --coord: #3d444d;
  --cursor: #8250df;
  --pw-fill: #ffffff;
  --pw-line: #1f2328;
  --pb-fill: #1f2328;
  --pb-line: #1f2328;
  --pb-detail: #f4f5f7;
  --edge: #1f2328;
}
:root[data-mode="dark"] {
  --paper: #0d1117;
  --paper-2: #161b22;
  --ink: #e6edf3;
  --ink-soft: #c9d1d9;
  --muted: #8b949e;
  --line: #30363d;
  --marker: #4493f8;
  --marker-ink: #0d1117;
  --peer: #21262d;
  --marker-soft: #12263f;
  --user: #d2a8ff;
  --red: #ff7b72;
  --red-soft: #3d1a1a;
  --green: #56d364;
  --dot: #4493f8;
  --sq-light: #3a434e;
  --sq-dark: #262c34;
  --sq-last: #1f4d7a;
  --sq-sel: #2f6fbf;
  --coord: #9aa4af;
  --cursor: #d2a8ff;
  --pw-fill: #f0f3f6;
  --pw-line: #0d1117;
  --pb-fill: #0d1117;
  --pb-line: #9aa4af;
  --pb-detail: #f0f3f6;
  --edge: #010409;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --paper: #0d1117;
    --paper-2: #161b22;
    --ink: #e6edf3;
    --ink-soft: #c9d1d9;
    --muted: #8b949e;
    --line: #30363d;
    --marker: #4493f8;
    --marker-ink: #0d1117;
    --peer: #21262d;
    --marker-soft: #12263f;
    --user: #d2a8ff;
    --red: #ff7b72;
    --red-soft: #3d1a1a;
    --green: #56d364;
    --dot: #4493f8;
    --sq-light: #3a434e;
    --sq-dark: #262c34;
    --sq-last: #1f4d7a;
    --sq-sel: #2f6fbf;
    --coord: #9aa4af;
    --cursor: #d2a8ff;
    --pw-fill: #f0f3f6;
    --pw-line: #0d1117;
    --pb-fill: #0d1117;
    --pb-line: #9aa4af;
    --pb-detail: #f0f3f6;
    --edge: #010409;
  }
}

/* Original */
:root[data-theme="original"] {
  --paper: #fbf8f1;
  --paper-2: #fffdf8;
  --ink: #1c1b19;
  --ink-soft: #3b3935;
  --muted: #77715f;
  --line: #ddd6c6;
  --marker: #ffe24a;
  --marker-ink: #1c1b19;
  --peer: #f2ecdd;
  --marker-soft: #fff6c4;
  --user: #2457c5;
  --red: #d2382a;
  --red-soft: #fbe3df;
  --green: #2f8a3b;
  --dot: #d2382a;
  --sq-light: #fffdf8;
  --sq-dark: #e4d8bb;
  --sq-last: #fff1a1;
  --sq-sel: #ffe24a;
  --coord: #8a8370;
  --cursor: #2457c5;
  --pw-fill: #fffdf8;
  --pw-line: #1c1b19;
  --pb-fill: #1c1b19;
  --pb-line: #1c1b19;
  --pb-detail: #fbf8f1;
  --edge: #1c1b19;
}
:root[data-theme="original"][data-mode="dark"] {
  --paper: #171614;
  --paper-2: #1f1e1b;
  --ink: #f4efe3;
  --ink-soft: #d8d2c4;
  --muted: #9c9583;
  --line: #3a3832;
  --marker: #f5d530;
  --marker-ink: #171614;
  --peer: #2f2c25;
  --marker-soft: #3a3418;
  --user: #8fb1ff;
  --red: #ff7a68;
  --red-soft: #46241f;
  --green: #7fd18a;
  --dot: #ff7a68;
  --sq-light: #4a463d;
  --sq-dark: #34312a;
  --sq-last: #6b5f22;
  --sq-sel: #a8901a;
  --coord: #a59e8b;
  --cursor: #8fb1ff;
  --pw-fill: #f7f2e6;
  --pw-line: #141311;
  --pb-fill: #24211d;
  --pb-line: #c4bba5;
  --pb-detail: #f7f2e6;
  --edge: #0d0c0b;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="original"]:not([data-mode="light"]) {
    --paper: #171614;
    --paper-2: #1f1e1b;
    --ink: #f4efe3;
    --ink-soft: #d8d2c4;
    --muted: #9c9583;
    --line: #3a3832;
    --marker: #f5d530;
    --marker-ink: #171614;
    --peer: #2f2c25;
    --marker-soft: #3a3418;
    --user: #8fb1ff;
    --red: #ff7a68;
    --red-soft: #46241f;
    --green: #7fd18a;
    --dot: #ff7a68;
    --sq-light: #4a463d;
    --sq-dark: #34312a;
    --sq-last: #6b5f22;
    --sq-sel: #a8901a;
    --coord: #a59e8b;
    --cursor: #8fb1ff;
    --pw-fill: #f7f2e6;
    --pw-line: #141311;
    --pb-fill: #24211d;
    --pb-line: #c4bba5;
    --pb-detail: #f7f2e6;
    --edge: #0d0c0b;
  }
}

/* Mitternacht */
:root[data-theme="mitternacht"] {
  --paper: #eef1f6;
  --paper-2: #f8fafd;
  --ink: #16213a;
  --ink-soft: #34405c;
  --muted: #66728c;
  --line: #d0d7e4;
  --marker: #ff6b57;
  --marker-ink: #16213a;
  --peer: #e1e7f1;
  --marker-soft: #ffe3de;
  --user: #3a5bd9;
  --red: #d6304a;
  --red-soft: #fbe1e5;
  --green: #1f8a5b;
  --dot: #ff6b57;
  --sq-light: #e6ebf3;
  --sq-dark: #7d8fb3;
  --sq-last: #b7c6ef;
  --sq-sel: #ff8f7f;
  --coord: #4a5672;
  --cursor: #3a5bd9;
  --pw-fill: #f8fafd;
  --pw-line: #16213a;
  --pb-fill: #16213a;
  --pb-line: #16213a;
  --pb-detail: #eef1f6;
  --edge: #16213a;
}
:root[data-theme="mitternacht"][data-mode="dark"] {
  --paper: #0c1222;
  --paper-2: #131b30;
  --ink: #e6ebf5;
  --ink-soft: #c3cbdc;
  --muted: #8c97b0;
  --line: #27324c;
  --marker: #ff7a66;
  --marker-ink: #0c1222;
  --peer: #1c2640;
  --marker-soft: #3a1f24;
  --user: #8fb1ff;
  --red: #ff6b7f;
  --red-soft: #3d1a24;
  --green: #6fd6a0;
  --dot: #ff7a66;
  --sq-light: #3b4868;
  --sq-dark: #26304a;
  --sq-last: #4a5c92;
  --sq-sel: #a8463b;
  --coord: #9aa6c2;
  --cursor: #8fb1ff;
  --pw-fill: #eef1f8;
  --pw-line: #0c1222;
  --pb-fill: #0c1222;
  --pb-line: #a9b8db;
  --pb-detail: #eef1f8;
  --edge: #05080f;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="mitternacht"]:not([data-mode="light"]) {
    --paper: #0c1222;
    --paper-2: #131b30;
    --ink: #e6ebf5;
    --ink-soft: #c3cbdc;
    --muted: #8c97b0;
    --line: #27324c;
    --marker: #ff7a66;
    --marker-ink: #0c1222;
    --peer: #1c2640;
    --marker-soft: #3a1f24;
    --user: #8fb1ff;
    --red: #ff6b7f;
    --red-soft: #3d1a24;
    --green: #6fd6a0;
    --dot: #ff7a66;
    --sq-light: #3b4868;
    --sq-dark: #26304a;
    --sq-last: #4a5c92;
    --sq-sel: #a8463b;
    --coord: #9aa6c2;
    --cursor: #8fb1ff;
    --pw-fill: #eef1f8;
    --pw-line: #0c1222;
    --pb-fill: #0c1222;
    --pb-line: #a9b8db;
    --pb-detail: #eef1f8;
    --edge: #05080f;
  }
}

/* Turnierhalle */
:root[data-theme="turnierhalle"] {
  --paper: #f6f1e4;
  --paper-2: #fbf8ef;
  --ink: #173a2e;
  --ink-soft: #2f5245;
  --muted: #6b7a6f;
  --line: #ddd5c0;
  --marker: #e8902a;
  --marker-ink: #173a2e;
  --peer: #ece5d2;
  --marker-soft: #fbe6c8;
  --user: #24588f;
  --red: #c2412d;
  --red-soft: #f8e0d8;
  --green: #2f7d4f;
  --dot: #e8902a;
  --sq-light: #f3ead2;
  --sq-dark: #5f8a6e;
  --sq-last: #f0cf8a;
  --sq-sel: #e8902a;
  --coord: #2b4a3c;
  --cursor: #24588f;
  --pw-fill: #fbf8ef;
  --pw-line: #173a2e;
  --pb-fill: #173a2e;
  --pb-line: #173a2e;
  --pb-detail: #f6f1e4;
  --edge: #173a2e;
}
:root[data-theme="turnierhalle"][data-mode="dark"] {
  --paper: #0f1a16;
  --paper-2: #15241e;
  --ink: #ece6d4;
  --ink-soft: #cfc8b4;
  --muted: #8e9a90;
  --line: #2a3a33;
  --marker: #f0a040;
  --marker-ink: #0f1a16;
  --peer: #1c2c25;
  --marker-soft: #3a2c14;
  --user: #8fc1e8;
  --red: #ff7f6a;
  --red-soft: #3d1f1a;
  --green: #7fd1a0;
  --dot: #f0a040;
  --sq-light: #4b6b58;
  --sq-dark: #2b4337;
  --sq-last: #7a6a2c;
  --sq-sel: #b07020;
  --coord: #aab8ad;
  --cursor: #8fc1e8;
  --pw-fill: #f4efe0;
  --pw-line: #0f1a16;
  --pb-fill: #0f1a16;
  --pb-line: #b8c7bb;
  --pb-detail: #f4efe0;
  --edge: #070d0b;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="turnierhalle"]:not([data-mode="light"]) {
    --paper: #0f1a16;
    --paper-2: #15241e;
    --ink: #ece6d4;
    --ink-soft: #cfc8b4;
    --muted: #8e9a90;
    --line: #2a3a33;
    --marker: #f0a040;
    --marker-ink: #0f1a16;
    --peer: #1c2c25;
    --marker-soft: #3a2c14;
    --user: #8fc1e8;
    --red: #ff7f6a;
    --red-soft: #3d1f1a;
    --green: #7fd1a0;
    --dot: #f0a040;
    --sq-light: #4b6b58;
    --sq-dark: #2b4337;
    --sq-last: #7a6a2c;
    --sq-sel: #b07020;
    --coord: #aab8ad;
    --cursor: #8fc1e8;
    --pw-fill: #f4efe0;
    --pw-line: #0f1a16;
    --pb-fill: #0f1a16;
    --pb-line: #b8c7bb;
    --pb-detail: #f4efe0;
    --edge: #070d0b;
  }
}

/* Holz */
:root[data-theme="holz"] {
  --paper: #f5ede1;
  --paper-2: #fbf6ee;
  --ink: #3a2418;
  --ink-soft: #5a3d2c;
  --muted: #8a7262;
  --line: #e2d3bf;
  --marker: #c8323c;
  --marker-ink: #fff8f0;
  --peer: #ede2d1;
  --marker-soft: #f6dcd8;
  --user: #2f6f9f;
  --red: #b3261e;
  --red-soft: #f6dcd5;
  --green: #4a7d3a;
  --dot: #c8323c;
  --sq-light: #ecd5b0;
  --sq-dark: #a8744c;
  --sq-last: #e6b866;
  --sq-sel: #d9893a;
  --coord: #5a3d2c;
  --cursor: #2f6f9f;
  --pw-fill: #fbf3e4;
  --pw-line: #3a2418;
  --pb-fill: #3a2418;
  --pb-line: #3a2418;
  --pb-detail: #f5ede1;
  --edge: #3a2418;
}
:root[data-theme="holz"][data-mode="dark"] {
  --paper: #1a120d;
  --paper-2: #231912;
  --ink: #f1e6d6;
  --ink-soft: #d6c6b0;
  --muted: #a08c78;
  --line: #3b2b20;
  --marker: #e05a5f;
  --marker-ink: #1a120d;
  --peer: #2c2018;
  --marker-soft: #3d1d1c;
  --user: #8fc1e8;
  --red: #ff7f6a;
  --red-soft: #3d1f1a;
  --green: #9fd17f;
  --dot: #e05a5f;
  --sq-light: #b48a5e;
  --sq-dark: #6e4a2e;
  --sq-last: #c99a3e;
  --sq-sel: #d9893a;
  --coord: #2c1d12;
  --cursor: #8fc1e8;
  --pw-fill: #fbf3e4;
  --pw-line: #1a120d;
  --pb-fill: #1a120d;
  --pb-line: #1a120d;
  --pb-detail: #f1e6d6;
  --edge: #0d0805;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="holz"]:not([data-mode="light"]) {
    --paper: #1a120d;
    --paper-2: #231912;
    --ink: #f1e6d6;
    --ink-soft: #d6c6b0;
    --muted: #a08c78;
    --line: #3b2b20;
    --marker: #e05a5f;
    --marker-ink: #1a120d;
    --peer: #2c2018;
    --marker-soft: #3d1d1c;
    --user: #8fc1e8;
    --red: #ff7f6a;
    --red-soft: #3d1f1a;
    --green: #9fd17f;
    --dot: #e05a5f;
    --sq-light: #b48a5e;
    --sq-dark: #6e4a2e;
    --sq-last: #c99a3e;
    --sq-sel: #d9893a;
    --coord: #2c1d12;
    --cursor: #8fc1e8;
    --pw-fill: #fbf3e4;
    --pw-line: #1a120d;
    --pb-fill: #1a120d;
    --pb-line: #1a120d;
    --pb-detail: #f1e6d6;
    --edge: #0d0805;
  }
}

/* Papier */
:root[data-theme="papier"] {
  --paper: #ffffff;
  --paper-2: #ffffff;
  --ink: #111111;
  --ink-soft: #333333;
  --muted: #707070;
  --line: #dddddd;
  --marker: #e63027;
  --marker-ink: #ffffff;
  --peer: #f1f1f1;
  --marker-soft: #fde3e1;
  --user: #0057b8;
  --red: #c4161c;
  --red-soft: #fde3e1;
  --green: #1d7a3a;
  --dot: #e63027;
  --sq-light: #ffffff;
  --sq-dark: #c9c9c9;
  --sq-last: #f7c7c3;
  --sq-sel: #e63027;
  --coord: #555555;
  --cursor: #0057b8;
  --pw-fill: #ffffff;
  --pw-line: #111111;
  --pb-fill: #111111;
  --pb-line: #111111;
  --pb-detail: #ffffff;
  --edge: #111111;
}
:root[data-theme="papier"][data-mode="dark"] {
  --paper: #111111;
  --paper-2: #1a1a1a;
  --ink: #f2f2f2;
  --ink-soft: #d0d0d0;
  --muted: #9a9a9a;
  --line: #333333;
  --marker: #ff4d42;
  --marker-ink: #111111;
  --peer: #222222;
  --marker-soft: #3a1614;
  --user: #7fb2ff;
  --red: #ff6b62;
  --red-soft: #3a1614;
  --green: #6fd08f;
  --dot: #ff4d42;
  --sq-light: #5a5a5a;
  --sq-dark: #333333;
  --sq-last: #7a2a26;
  --sq-sel: #c4302a;
  --coord: #bbbbbb;
  --cursor: #7fb2ff;
  --pw-fill: #f5f5f5;
  --pw-line: #111111;
  --pb-fill: #111111;
  --pb-line: #aaaaaa;
  --pb-detail: #f5f5f5;
  --edge: #000000;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="papier"]:not([data-mode="light"]) {
    --paper: #111111;
    --paper-2: #1a1a1a;
    --ink: #f2f2f2;
    --ink-soft: #d0d0d0;
    --muted: #9a9a9a;
    --line: #333333;
    --marker: #ff4d42;
    --marker-ink: #111111;
    --peer: #222222;
    --marker-soft: #3a1614;
    --user: #7fb2ff;
    --red: #ff6b62;
    --red-soft: #3a1614;
    --green: #6fd08f;
    --dot: #ff4d42;
    --sq-light: #5a5a5a;
    --sq-dark: #333333;
    --sq-last: #7a2a26;
    --sq-sel: #c4302a;
    --coord: #bbbbbb;
    --cursor: #7fb2ff;
    --pw-fill: #f5f5f5;
    --pw-line: #111111;
    --pb-fill: #111111;
    --pb-line: #aaaaaa;
    --pb-detail: #f5f5f5;
    --edge: #000000;
  }
}

/* ========== 2. Base ========== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--marker); color: var(--marker-ink); text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--user); outline-offset: 2px; }
[hidden] { display: none !important; }

mark {
  color: var(--marker-ink);
  background:
    linear-gradient(100deg, transparent 0, var(--marker) .12em, var(--marker) calc(100% - .12em), transparent 100%);
  padding: 0 .12em;
  margin: 0 -.04em;
  border-radius: .25em .5em .3em .45em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

kbd {
  font: 600 .72em/1 var(--font);
  border: 1.5px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 5px;
  padding: .15em .4em;
  color: var(--ink-soft);
  background: var(--paper-2);
}

code { font: .88em var(--font-mono); background: var(--peer); padding: .1em .35em; border-radius: 4px; }

input:focus { outline: none; box-shadow: 4px 4px 0 var(--marker); }

/* ========== 3. Layout ========== */

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--gutter);
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

.wordmark {
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -.04em;
  text-decoration: none;
}
.wordmark:hover { background: none; color: inherit; }
.dot { color: var(--dot); }

header nav { display: flex; align-items: center; gap: clamp(10px, 2.5vw, 28px); font-weight: 600; }
header nav a { text-decoration: none; padding: 2px 4px; border-radius: 4px; }
header nav a[aria-current="page"] { background: var(--marker); color: var(--marker-ink); }

/* number of correspondence games where it's your move */
.nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 .4em;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--dot);
  color: #fff;
  font: 800 12px/1 var(--font-num);
  vertical-align: 2px;
}
.logout { display: flex; align-items: center; gap: 10px; margin: 0; }
.who { color: var(--muted); font-weight: 500; }

footer.site {
  margin-top: auto;
  padding: 48px 16px 32px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}
footer.site .legal { margin-top: 6px; }
footer.site .legal a {
  color: var(--muted);
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent);
  transition: color .15s, text-decoration-color .15s, text-decoration-thickness .15s;
}
footer.site .legal a:hover {
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--marker);
  text-decoration-thickness: 3px;
}

/* page widths */
main.home, main.play, main.rules-page, main.narrow {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
main.play { max-width: 1320px; }
main.narrow { max-width: 760px; }

/* ========== 4. Components ========== */

.headline {
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 900;
  margin: 12px 0 36px;
  text-wrap: balance;
}

/* small caps labels */
.label, .section-title, .err-code, .store-where, .kbd-help h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.label { color: var(--muted); margin: 0 0 12px; }
.section-title {
  margin: 56px 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
}
.section-title .count { float: right; letter-spacing: .04em; color: var(--muted); }

/* boxes */
.card, .note, .datum, .rb-rule {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.explain, .confirm, .rb-none {
  border: 2px dashed var(--ink);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.card { padding: 18px 20px 20px; }
.note { padding: 4px 20px; box-shadow: 5px 5px 0 var(--marker); }

.explain { padding: 4px 22px 10px; }
.explain h2 { font-size: 22px; margin: 18px 0 6px; letter-spacing: -.01em; }
.explain h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 20px 0 6px; }
.explain ul { padding-left: 1.2em; }
.explain li { margin: 8px 0; font-size: 16px; line-height: 1.45; }
main.narrow > .explain { margin-top: 48px; }

.confirm { padding: 12px 14px; }
.confirm p { margin: 0 0 10px; font-weight: 700; }
.confirm .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.block { display: flex; flex-direction: column; gap: 12px; }
.block .label { margin-bottom: 0; }

/* --- pills --- */
.pill {
  border: 2px solid var(--ink);
  background: transparent;
  border-radius: 999px;
  padding: 6px 15px;
  font-weight: 700;
  font-size: 16px;
  transition: background-color .1s, transform .1s;
}
.pill:hover { background: var(--marker); color: var(--marker-ink); }
.pill[aria-checked="true"], .pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pill.small { padding: 3px 12px; font-size: 14px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.row-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  transition: background-color .1s, color .1s;
}
a.btn { text-decoration: none; }
.btn:hover { background: var(--marker); color: var(--marker-ink); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { background: var(--ink); color: var(--paper); }
.btn.small { padding: 7px 16px; font-size: 15px; }
.btn.wide { width: 100%; }
.btn.big { padding: 16px 26px; font-size: 19px; box-shadow: 5px 5px 0 var(--marker); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--marker); color: var(--marker-ink); }
.btn kbd { color: inherit; background: transparent; border-color: currentColor; margin-left: 4px; opacity: .7; }
.danger-btn { background: var(--red); border-color: var(--red); color: #fff; }
.danger-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.js-copy.copied { background: var(--green); border-color: var(--green); color: #fff; }

.linklike {
  background: none; border: 0; padding: 2px 4px; border-radius: 4px;
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.linklike:hover { background: var(--marker); color: var(--marker-ink); text-decoration: none; }

/* --- tools: the visible ones share one row --- */
.tools { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
.tool:hover { background: var(--peer); }
.tool:disabled { opacity: .35; cursor: default; background: none; }
.tool kbd { font-size: 10px; margin-top: 2px; }
.tool-icon { font-size: 22px; line-height: 1.1; }
.tool[aria-pressed="true"] { border-color: var(--ink); background: var(--marker); color: var(--marker-ink); }
.tool[aria-pressed="true"] kbd { color: var(--marker-ink); background: transparent; border-color: currentColor; }

/* --- forms and messages --- */
.error {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--red-soft);
  color: var(--red);
  font-weight: 700;
}
.form-note { margin: 0; font-size: 15px; color: var(--muted); }
.hint { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.9; }

input[type="number"], .token-form input, .copy-field, .form input, .move-input input {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
}
input[type="number"], .token-form input, .copy-field {
  font: 600 18px var(--font-num);
  padding: 10px 12px;
  background: var(--paper);
  width: 100%;
  min-width: 0;
}

.form { display: flex; flex-direction: column; gap: 18px; max-width: 420px; margin: 28px 0; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.form label .muted { font-weight: 500; }
.form input { font: 500 18px var(--font); padding: 12px 14px; background: var(--paper-2); }
.form .btn { align-self: flex-start; margin-top: 6px; }
.form-page .lede { font-size: 20px; color: var(--ink-soft); margin-top: -16px; max-width: 34em; }

/* --- keyboard help --- */
.kbd-help-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.kbd-help-btn:hover { background: var(--marker); color: var(--marker-ink); }

.kbd-help {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--paper-2);
  color: var(--ink);
  padding: 22px 26px;
  box-shadow: 8px 8px 0 var(--ink);
}
.kbd-help::backdrop { background: color-mix(in srgb, var(--paper) 60%, transparent); backdrop-filter: blur(2px); }
.kbd-help h2 { margin: 0 0 6px; font-size: 28px; letter-spacing: -.03em; font-weight: 900; }
.kbd-help h3 { margin: 20px 0 8px; color: var(--muted); }
.kbd-help form { margin-top: 22px; }
.keys { margin: 0; display: grid; gap: 4px; }
.keys > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.keys dt { white-space: nowrap; }
.keys dd { margin: 0; font-size: 16px; }
.keys kbd { font-size: 13px; }
.keys-note { margin: 0 0 8px; font-size: 15px; color: var(--ink-soft); line-height: 1.45; }

/* ========== 5. Pages ========== */

/* ---------- home ---------- */

.flash-note { margin: -20px 0 28px; padding: 10px 16px; border-radius: var(--radius); background: var(--marker); color: var(--marker-ink); font-weight: 700; display: inline-block; }

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(260px, 380px);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.setup {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: clamp(18px, 3vw, 30px);
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--paper-2);
  box-shadow: 6px 6px 0 var(--ink);
}

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
}
.seg button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 10px;
  border: 0;
  background: transparent;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
}
.seg button + button { border-left: 2px solid var(--ink); }
.seg button:hover { background: var(--marker-soft); }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.seg-icon { font-size: 28px; line-height: 1; }

/* level buttons (home and game page) */
.level-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.lvl {
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  font: 800 17px/1 var(--font-num);
  padding: 0;
  transition: background-color .1s, transform .08s;
}
.lvl:hover:not(:disabled) { background: var(--marker); color: var(--marker-ink); }
.lvl:disabled { opacity: .35; cursor: not-allowed; }
.lvl.below { background: var(--marker-soft); }
.lvl[aria-checked="true"] { background: var(--ink); color: var(--paper); transform: translateY(-2px); box-shadow: 0 3px 0 var(--marker); }
.level-rule { margin: 6px 0 0; font-size: 14px; color: var(--muted); line-height: 1.4; }
.level-desc { margin: 0; min-height: 1.5em; font-size: 16px; }

.mode-note { margin: 0; color: var(--ink-soft); }

.time-fields { display: flex; flex-direction: column; gap: 12px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1.5px solid var(--line);
  background: var(--paper);
  border-radius: 8px;
  padding: 3px 10px;
  font: 700 14px/1.4 var(--font-num);
}
.chip:hover, .chip.on { border-color: var(--ink); background: var(--marker); color: var(--marker-ink); }
.time-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.time-inputs label, .token-form { display: flex; gap: 6px; font-weight: 700; font-size: 15px; }
.time-inputs label { flex-direction: column; }
.corr-login { padding: 10px 14px; border: 2px dashed var(--ink); border-radius: var(--radius); color: var(--ink-soft); }

.home-side { display: flex; flex-direction: column; gap: 28px; }
.token-form { gap: 8px; }
.token-form input { letter-spacing: .06em; text-transform: uppercase; }
.token-form input::placeholder { text-transform: none; letter-spacing: 0; color: var(--muted); }

/* ---------- game ---------- */

.game {
  display: grid;
  grid-template-columns: minmax(0, 860px) minmax(260px, 330px);
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
/* as large as the window allows, without pushing the clocks off screen */
.board-col { min-width: 0; max-width: max(320px, calc(100svh - 150px)); width: 100%; justify-self: center; }

.player {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 4px 2px;
}
.pl-name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; white-space: nowrap; }
.pl-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; flex: none; }
.player.online .pl-dot { background: var(--marker); }
.player.offline .js-name::after { content: " · " attr(data-offline); font-weight: 500; color: var(--muted); }
.player.turn .pl-name { text-decoration: underline; text-decoration-color: var(--marker); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.pl-away {
  flex: none;
  padding: 1px 9px;
  border: 1.5px dashed var(--muted);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.pl-captured { flex: 1; min-width: 0; font-size: 20px; line-height: 1; letter-spacing: -.12em; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: clip; }
.pl-captured b { letter-spacing: 0; font: 700 14px var(--font-num); color: var(--ink-soft); margin-left: .5em; }

.clock {
  font: 800 24px/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  padding: 7px 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  min-width: 4.4em;
  text-align: right;
  background: var(--paper-2);
}
.clock.running { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--marker); }
.clock.low { color: var(--red); border-color: var(--red); }
.clock.running.low { background: var(--red); color: #fff; }
.clock.out { background: var(--red-soft); color: var(--red); border-color: var(--red); }

/* the panel next to the board */
.panel { display: flex; flex-direction: column; gap: 28px; padding-top: 50px; }
.status-text { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 900; letter-spacing: -.025em; text-wrap: balance; }
.mode-line { margin: 0; color: var(--muted); font-size: 15px; font-weight: 600; }
.token-inline { font-family: var(--font-mono); letter-spacing: .05em; color: var(--ink); }
.watchers { margin-left: 8px; }
.abandon-text { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
#abandon-claim { align-self: flex-start; }
.new-game { align-self: flex-start; font-size: 15px; }

.moves {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 2.6em 1fr 1fr;
  font: 600 16px/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  border-top: 2px solid var(--ink);
}
.moves li { display: contents; }
.moves span { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.moves .fg { font-style: normal; font-size: 1.3em; line-height: 0; margin-right: .05em; vertical-align: -.04em; }
.moves .n { color: var(--muted); font-weight: 500; }
.moves .cur { background: var(--marker); color: var(--marker-ink); border-radius: 4px; }
.moves:empty::before { content: attr(data-empty); grid-column: 1 / -1; padding: 10px 0; color: var(--muted); font: 500 15px var(--font); }

.move-input { display: flex; gap: 8px; }
.move-input input { flex: 1; min-width: 0; font: 700 17px var(--font-num); padding: 8px 12px; background: var(--paper-2); }
.move-input input:disabled { opacity: .5; }
.notation { font-size: 14px; color: var(--muted); }
.notation summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); width: fit-content; }
.notation p { margin: 8px 0 6px; line-height: 1.4; }
.notation table { width: 100%; border-collapse: collapse; }
.notation td { padding: 4px 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.notation td:first-child { width: 5.2em; white-space: nowrap; }
.notation code { font-size: 13px; }

/* ---------- my games, recent games ---------- */

.game-list, .recent { list-style: none; padding: 0; margin: 0; }
.game-list li, .recent li {
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--line);
  line-height: 1.35;
}
.game-list li.win, .recent li.win { border-left-color: var(--marker); }
.game-list li.draw, .recent li.draw { border-left-color: var(--user); }
.game-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 12px 14px;
}
.game-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.game-link { font-weight: 800; font-size: 18px; width: fit-content; }
.game-note { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.game-list .row-buttons, .game-list .btn { flex: none; }
.games-none { margin-top: 40px; }
.games-rules { margin-top: 48px; }

.recent li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 10px 0 10px 14px;
}
.recent li > :last-child { text-align: right; white-space: nowrap; }

/* ---------- achievements ---------- */

.big-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.big-numbers > div { display: flex; flex-direction: column; }
.num { font: 900 clamp(44px, 9vw, 80px)/1 var(--font); letter-spacing: -.05em; }
.num small { font-size: .4em; color: var(--muted); letter-spacing: 0; }
.cap { color: var(--muted); font-weight: 600; margin-top: 6px; }

.levels-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.levels-table th { text-align: left; font-size: 14px; color: var(--muted); font-weight: 600; padding: 6px 0; }
.levels-table td { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.levels-table td:first-child { font-weight: 800; }
.levels-table tr.empty td:first-child { color: var(--muted); font-weight: 600; }
.levels-table th:not(:first-child), .levels-table td:not(:first-child) { text-align: right; }

.group-note { margin: -2px 0 16px; color: var(--muted); font-size: 16px; }
.badge-group.pure .section-title::before { content: "◇ "; }
.badge-group.timed .section-title::before { content: "◷ "; }
.badge-group.secret .section-title::before { content: "✦ "; }

/* In badge groups the line under the title is a progress bar: one segment
   per badge, unlocked ones first. They fill one after another on load. */
.badge-group .section-title { border-bottom: 0; margin-bottom: 0; }
.bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 6px;
  margin: 0 0 16px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--line);
}
.bar i { background: linear-gradient(var(--ink), var(--ink)) left / 0 100% no-repeat; }
.bar i.on { background-size: 100% 100%; animation: fill-up .08s linear backwards; }
.badge-group.complete .bar i.on { background-image: linear-gradient(var(--marker), var(--marker)); }
.badge-group.complete .bar { box-shadow: inset 0 0 0 1px var(--ink); }
@keyframes fill-up { from { background-size: 0 100%; } }
.bar i:nth-child(1) { animation-delay: 0.20s; }
.bar i:nth-child(2) { animation-delay: 0.28s; }
.bar i:nth-child(3) { animation-delay: 0.36s; }
.bar i:nth-child(4) { animation-delay: 0.44s; }
.bar i:nth-child(5) { animation-delay: 0.52s; }
.bar i:nth-child(6) { animation-delay: 0.60s; }
.bar i:nth-child(7) { animation-delay: 0.68s; }
.bar i:nth-child(8) { animation-delay: 0.76s; }
.bar i:nth-child(9) { animation-delay: 0.84s; }
.bar i:nth-child(10) { animation-delay: 0.92s; }
.bar i:nth-child(11) { animation-delay: 1.00s; }
.bar i:nth-child(12) { animation-delay: 1.08s; }
.bar i:nth-child(13) { animation-delay: 1.16s; }
.bar i:nth-child(14) { animation-delay: 1.24s; }
.bar i:nth-child(15) { animation-delay: 1.32s; }
.bar i:nth-child(16) { animation-delay: 1.40s; }
.bar i:nth-child(17) { animation-delay: 1.48s; }
.bar i:nth-child(18) { animation-delay: 1.56s; }
.bar i:nth-child(19) { animation-delay: 1.64s; }
.bar i:nth-child(20) { animation-delay: 1.72s; }
.bar i:nth-child(21) { animation-delay: 1.80s; }
.bar i:nth-child(22) { animation-delay: 1.88s; }
.bar i:nth-child(23) { animation-delay: 1.96s; }
.bar i:nth-child(24) { animation-delay: 2.04s; }

.badges {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.badges li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  line-height: 1.35;
  font-size: 16px;
}
.badges li:not(.done) strong { color: var(--muted); }
.badges li.done { border: 2px solid var(--ink); background: var(--paper-2); }
.badge-body { display: flex; flex-direction: column; gap: 2px; }
.badge-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.badges .check {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: grid; place-items: center;
  font-weight: 900; font-size: 15px;
}
.done .check { background: var(--marker); border-color: var(--ink); color: var(--marker-ink); }
.badge-group.pure .badges li.done { box-shadow: 4px 4px 0 var(--user); }
.badges li.hidden { background: repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, var(--line) 35%, transparent) 8px 16px); }
.badges li.hidden strong { letter-spacing: .2em; }
.badges li.hidden .muted { font-style: italic; }
.badge-group.secret .badges li.done { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.badge-group.secret .badges li.done .muted, .badge-group.secret .badges li.done .badge-meta { color: color-mix(in srgb, var(--paper) 75%, transparent); }

/* colour scheme picker */
.theme-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.theme-picker .pill { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; padding: 6px 14px 6px 7px; }
.theme-picker .pill.plain { padding: 6px 14px; }
.theme-picker .pill[aria-checked="true"] .swatch { border-color: var(--paper); }
.swatch { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; }
.sw-schiefer { background: linear-gradient(135deg, #f4f5f7 0 33%, #1f2328 33% 55%, #2f81f7 55% 75%, #a5b1bf 75%); }
.sw-original { background: linear-gradient(135deg, #fbf8f1 0 33%, #1c1b19 33% 55%, #ffe24a 55% 75%, #e4d8bb 75%); }
.sw-mitternacht { background: linear-gradient(135deg, #eef1f6 0 33%, #16213a 33% 55%, #ff6b57 55% 75%, #7d8fb3 75%); }
.sw-turnierhalle { background: linear-gradient(135deg, #f6f1e4 0 33%, #173a2e 33% 55%, #e8902a 55% 75%, #5f8a6e 75%); }
.sw-holz { background: linear-gradient(135deg, #f5ede1 0 33%, #3a2418 33% 55%, #c8323c 55% 75%, #a8744c 75%); }
.sw-papier { background: linear-gradient(135deg, #ffffff 0 33%, #111111 33% 55%, #e63027 55% 75%, #c9c9c9 75%); }

.danger { margin-top: 24px; }
.danger summary { cursor: pointer; font-weight: 700; color: var(--red); }
.danger .form { margin-top: 12px; }

/* ---------- imprint, privacy ---------- */

.prose h2 { font-size: 22px; letter-spacing: -.01em; margin: 40px 0 8px; }
.prose p, .prose li { max-width: 40em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 6px 0; }
.prose .stand { margin-top: 40px; font-size: 15px; }
.todo { background: var(--red-soft); color: var(--red); font-weight: 700; padding: 0 .25em; border-radius: 4px; }

.store-group { margin-top: 28px; }
.store-where { display: flex; align-items: center; gap: 10px; color: var(--ink); margin: 0 0 12px; }
.where-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--marker); border: 2px solid var(--ink); flex: none; }
.datum { padding: 16px 20px 18px; margin-bottom: 12px; }
.datum h4 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.datum-what { margin: 2px 0 14px; color: var(--muted); font-size: 16px; }
.datum dl {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 18px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.datum dt { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.datum dd { margin: 0; font-size: 16px; line-height: 1.45; }

/* ---------- error pages ---------- */

.error-page {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 72px) var(--gutter) 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.err-board {
  display: block;
  width: clamp(230px, 32vw, 340px);
  height: auto;
  overflow: visible;
  transform: rotate(-3deg);
}
.err-code { margin: 0 0 4px; color: var(--muted); }
.err-text .headline { margin: 0 0 18px; }
.err-lede { font-size: 20px; color: var(--ink-soft); margin: 0 0 30px; max-width: 32em; }
.err-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* ---------- rules page (the book itself: section 8) ---------- */

.rules-lede { font-size: 20px; color: var(--ink-soft); margin: -16px 0 18px; max-width: 34em; }

/* ========== 6. Board ==========
   The flat board is plain DOM. The 3D view is drawn by board3d.js on a
   canvas on top; the DOM board then stays in the page, invisible, for
   screen readers and the keyboard. Both views share one stage of the same
   square, so switching between them is a smooth camera move: the flat
   board fills the stage, and the 3D board is just as wide. */

.board-wrap { position: relative; }

.stage {
  position: relative;
  aspect-ratio: 1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.board3d {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 1;
  translate: -50% 0;
  transition: opacity .28s ease;
}
.gl .board3d { opacity: 0; pointer-events: none; }
.board3d:focus-visible { outline: none; }
.board3d:focus-visible .squares { outline: 3px solid var(--cursor); outline-offset: 4px; }

.board-gl {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .28s ease;
}
.gl .board-gl, .morph .board-gl { display: block; }
.flat .board-gl { opacity: 0; pointer-events: none; }
.board-gl.over-square { cursor: pointer; }
.gl .stage:has(.board3d:focus-visible) .board-gl { outline: 3px solid var(--cursor); outline-offset: 2px; border-radius: var(--radius); }

.squares {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}

.sq {
  position: relative;
  background: var(--sq-light);
  cursor: pointer;
}
.sq.dark { background: var(--sq-dark); }
.sq.last { background: var(--sq-last); }
.sq.sel { background: var(--sq-sel); }
/* the king in check: a red frame and a red tint, gently breathing */
.sq.check { background: color-mix(in srgb, var(--red) 30%, var(--sq-light)); }
.sq.dark.check { background: color-mix(in srgb, var(--red) 30%, var(--sq-dark)); }
.sq.check::before, .sq.cursor::before {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: 6px;
}
.sq.check::before { border: .7cqi solid var(--red); animation: check-breathe 1.8s ease-in-out infinite; }
@keyframes check-breathe { 50% { opacity: .45; } }
/* the keyboard cursor */
.sq.cursor::before { border: .75cqi solid var(--cursor); z-index: 1; }
.sq.target::after {
  content: "";
  position: absolute;
  inset: 37%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}
.sq.target.capture::after { inset: 5%; background: none; border: .9cqi solid color-mix(in srgb, var(--ink) 30%, transparent); }
.sq.target:hover { background: var(--marker-soft); }
.sq.hint { box-shadow: inset 0 0 0 .7cqi var(--user); }
.coord {
  position: absolute;
  font: 700 1.7cqi/1 var(--font);
  color: var(--coord);
  pointer-events: none;
}
.coord.rank { left: 5%; top: 5%; }
.coord.file { right: 6%; bottom: 4%; }

.pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pc {
  --x: 0;
  --y: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 12.5%;
  height: 12.5%;
  transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%));
  transition: transform .34s cubic-bezier(.3, .7, .25, 1);
}
.pc.instant { transition: none; }
.fig {
  position: absolute;
  left: 6%;
  width: 88%;
  bottom: 5%;
  height: 90%;
  transform-origin: 50% 90%;
  pointer-events: auto;
  cursor: pointer;
  transition: scale .15s;
}
.fig svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / .3)); }
.pc.sel .fig { scale: 1.08; }
.pc.moving .fig { animation: hop .34s ease-out; }
.pc.jump .fig { animation: jump .42s ease-out; }
@keyframes hop { 50% { scale: 1.12; } }
@keyframes jump { 45% { scale: 1.3; translate: 0 -12%; } }
.pc.gone { z-index: 2; animation: taken .45s ease-in forwards; }
@keyframes taken {
  0% { opacity: 1; }
  30% { transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%)) scale(1.1) rotate(-8deg); }
  100% { opacity: 0; transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%)) scale(.3) rotate(40deg); }
}

/* piece colours: the board (.pc) and the SVG boards (.eb-fig) */
.fig .body { stroke-width: 4; stroke-linejoin: round; }
.fig .line { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.pc.w .body, .eb-fig.w .body { fill: var(--pw-fill); stroke: var(--pw-line); }
.pc.w .det, .eb-fig.w .det { fill: var(--pw-line); }
.pc.w .line, .eb-fig.w .line { stroke: var(--pw-line); }
.pc.b .body, .eb-fig.b .body { fill: var(--pb-fill); stroke: var(--pb-line); }
.pc.b .det, .eb-fig.b .det { fill: var(--pb-detail); }
.pc.b .line, .eb-fig.b .line { stroke: var(--pb-detail); }
/* a soft highlight on the dark pieces; on white ones it would vanish */
.fig .shine { fill: none; stroke-width: 3; stroke-linecap: round; }
.pc.w .fig .shine { stroke: none; }
.pc.b .fig .shine { stroke: var(--pb-detail); opacity: .3; }

/* --- SVG boards: the error page and the rulebook diagrams (rules.go) --- */
.err-board .light, .rb-board .light { fill: var(--sq-light); }
.err-board .dark, .rb-board .dark { fill: var(--sq-dark); }
.eb-shadow, .rb-shadow { fill: var(--ink); }
.eb-frame { fill: none; stroke: var(--ink); stroke-width: 3; }
.eb-coord { fill: var(--muted); font: 700 11px/1 var(--font-num); text-anchor: middle; }
.eb-ghost { fill: var(--red-soft); stroke: var(--red); stroke-width: 2; stroke-dasharray: 5 4; }
.eb-ghost-label { fill: var(--red); font: 700 10px/1 var(--font-num); text-anchor: middle; }
.eb-fig .body { stroke-width: 5; stroke-linejoin: round; }
.eb-fig .line { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.eb-arrow { stroke: var(--marker); stroke-width: 5; stroke-linecap: round; opacity: .9; }
.eb-arrow.bad { stroke: var(--red); }
.arrow-tip { fill: var(--marker); }
.arrow-tip.bad { fill: var(--red); }
.eb-cross { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; paint-order: stroke; }
.eb-note { fill: var(--red); stroke: var(--paper); stroke-width: 2; }
.eb-note-text { fill: #fff; font: 800 11px/1 var(--font-num); text-anchor: middle; }

.rb-frame { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.rb-last { fill: var(--sq-last); }
.rb-glow { fill: var(--marker); opacity: .6; }
.rb-warn { fill: var(--red); opacity: .5; }
.rb-line { fill: var(--red); opacity: .2; }
.rb-dot { fill: color-mix(in srgb, var(--ink) 35%, transparent); }
.rb-ring { fill: none; stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-width: 3.5; }
.rb-arrow { opacity: .9; }
.rb-arrow .shaft { fill: none; stroke: var(--user); stroke-width: 5; stroke-linecap: round; }
.rb-arrow .tip { fill: var(--user); }
.rb-arrow.bad .shaft, .rb-arrow.attack .shaft { stroke: var(--red); }
.rb-arrow.bad .tip, .rb-arrow.attack .tip { fill: var(--red); }
.rb-cross { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; }

/* ========== 7. Overlays on the board ========== */

.cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink); /* covers the flat board's shadow too */
  z-index: 5;
}
.cover.soft { background: color-mix(in srgb, var(--paper) 70%, transparent); font-weight: 700; border-style: dashed; }
.cover-title { font-size: clamp(36px, 8vw, 64px); font-weight: 900; letter-spacing: -.04em; margin: 0; line-height: 1.05; text-wrap: balance; }
.cover-title.small { font-size: clamp(26px, 5vw, 38px); }
.cover-time { font: 800 clamp(24px, 5vw, 38px)/1.2 var(--font-num); margin: 4px 0 0; }
.cover-note { margin: 4px 0 10px; font-size: 18px; color: var(--ink-soft); max-width: 34ch; }
.cover-small { margin: 10px 0 0; font-size: 15px; color: var(--muted); max-width: 40ch; }
.cover-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#cover-over .cover-title { animation: rise .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes rise { from { transform: translateY(14px) rotate(-3deg); opacity: 0; } }

/* the invitation */
.copy-row { display: flex; gap: 8px; align-items: center; width: min(100%, 460px); }
.copy-field { font: 600 15px var(--font); flex: 1; }
.token-big {
  flex: 1;
  font: 800 clamp(20px, 4.4vw, 30px)/1 var(--font-mono);
  letter-spacing: .08em;
  padding: 10px 12px;
  border: 2px dashed var(--ink);
  border-radius: var(--radius);
  background: var(--marker-soft);
  user-select: all;
}

/* promotion */
.promo-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 90px)); gap: 10px; margin: 8px 0; }
.promo-choices button {
  aspect-ratio: .85;
  padding: 8px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: 3px 3px 0 var(--ink);
}
.promo-choices button:hover { background: var(--marker); }
.promo-choices .pc, .promo-choices .fig { position: static; width: 100%; height: 100%; transform: none; }

.toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 6;
  max-width: calc(100% - 32px);
  width: max-content;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 3px 3px 0 var(--ink);
  animation: toast-in .25s cubic-bezier(.2, .9, .3, 1.3);
  text-align: center;
}
.toast.bad { background: var(--red-soft); color: var(--red); }
.toast.badge { background: var(--marker); color: var(--marker-ink); }
/* why a move is not allowed, with a link into the rulebook */
.toast.why {
  width: min(460px, calc(100% - 32px));
  border-radius: var(--radius);
  text-align: left;
  font-weight: 600;
  line-height: 1.4;
  padding: 12px 16px;
}
.toast-rule {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--marker);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@keyframes toast-in { from { transform: translate(-50%, 10px); opacity: 0; } }

/* ========== 8. Rulebook ==========
   /regeln and the drawer on the game page share the markup
   (rulebook.html). Container queries, because the same book is wide on
   the page and narrow in the drawer. */

.rb { container: rulebook / inline-size; }
.rb-search {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 0 14px;
  background: var(--paper);
}
.rb-search .label { margin-bottom: 8px; }
.rb-field { position: relative; display: flex; align-items: center; }
.rb-field input {
  width: 100%;
  min-width: 0;
  font: 600 19px var(--font);
  padding: 12px 118px 12px 16px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.rb-field input::placeholder { color: var(--muted); font-weight: 500; }
.rb-field input:focus { box-shadow: 5px 5px 0 var(--marker); }
.rb-count {
  position: absolute;
  right: 16px;
  font: 700 14px var(--font-num);
  color: var(--muted);
  pointer-events: none;
}
.rb-none { margin: 8px 0 0; padding: 14px 18px 4px; }
.rb-none p { margin: 0 0 12px; }

.rb-layout { position: relative; display: grid; gap: 24px; margin-top: 18px; }

/* contents: compact chips; a sidebar when there is room */
.rb-toc > .label { margin-bottom: 6px; }
.rb-toc h3 { margin: 12px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rb-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rb-toc a {
  display: block;
  padding: 2px 10px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.rb-toc a:hover { border-color: var(--ink); }
.rb-toc .rb-num { display: none; }

@container rulebook (min-width: 820px) {
  .rb-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
  .rb-toc { position: sticky; top: 112px; max-height: calc(100vh - 130px); overflow-y: auto; padding: 2px 4px 8px 2px; }
  .rb-toc ol { display: block; }
  .rb-toc a { border: 0; border-radius: 4px; padding: 3px 6px; font-size: 15px; font-weight: 500; }
  .rb-toc .rb-num { display: inline; }
}

/* the pages of the book */
.rb-group .section-title { margin: 0 0 14px; }
.rb-group + .rb-group .section-title { margin-top: 40px; }
.rb-rule {
  container: rule / inline-size;
  display: flow-root;
  scroll-margin-top: 124px;
  margin-bottom: 18px;
  padding: 18px 22px 10px;
}
.rb-rule:focus { outline: none; }
.rb-rule h3 { margin: 0 0 10px; font-size: 25px; line-height: 1.15; letter-spacing: -.025em; font-weight: 900; }
.rb-num { font: 700 .58em/1 var(--font-num); color: var(--muted); letter-spacing: 0; margin-right: .25em; vertical-align: .18em; }
.rb-body p { margin: 0 0 12px; max-width: 40em; }
.rb-body ul, .rb-body ol { margin: 0 0 12px; padding-left: 1.3em; max-width: 38em; }
.rb-body li { margin: 5px 0; }
.rb-body a[data-rule] { font-weight: 600; }
.rb-body kbd { font-size: 13px; }
.rb-table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 16px; }
.rb-table td { padding: 6px 0; border-bottom: 1px dashed var(--line); vertical-align: top; line-height: 1.4; }
.rb-table td:first-child { width: 1%; white-space: nowrap; padding-right: 16px; }
mark.rb-hit { color: var(--marker-ink); }
.rb-rule.rb-flash { animation: rb-flash 1.8s ease-out; }
@keyframes rb-flash {
  0%, 35% { box-shadow: 7px 7px 0 var(--marker); border-color: var(--ink); background: var(--marker-soft); }
  100% { box-shadow: 0 0 0 var(--marker); }
}

/* diagrams (rules.go; their colours are with the SVG boards in section 6) */
.rb-fig { margin: 2px 0 14px; }
.rb-fig svg { display: block; max-width: 100%; height: auto; }
.rb-fig figcaption { margin-top: 6px; max-width: 26em; font-size: 14px; line-height: 1.4; color: var(--muted); }
@container rule (min-width: 600px) {
  .rb-fig { float: right; max-width: 44%; margin: 4px 0 14px 28px; }
}

/* the drawer on the game page: opens like the cover of a book */
.rulebook {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(760px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  border-left: 3px solid var(--ink);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 9%, transparent), transparent 16px), var(--paper);
  color: var(--ink);
  box-shadow: -8px 0 0 color-mix(in srgb, var(--ink) 15%, transparent);
}
.rulebook[open] {
  display: flex;
  flex-direction: column;
  transform-origin: 0 50%;
  animation: rb-open .55s cubic-bezier(.2, .8, .25, 1);
}
.rulebook::backdrop { background: color-mix(in srgb, var(--paper) 55%, transparent); backdrop-filter: blur(2px); animation: rb-fade .3s ease-out; }
@keyframes rb-open {
  from { transform: perspective(1600px) rotateY(-75deg); opacity: .2; }
  45% { opacity: 1; }
  to { transform: perspective(1600px) rotateY(0); }
}
@keyframes rb-fade { from { opacity: 0; } }
.rb-bar { flex: none; display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 2px solid var(--ink); }
.rb-bar-title { flex: 1; margin: 0; font-size: 30px; font-weight: 900; letter-spacing: -.035em; }
.rb-bar form { margin: 0; }
.rb-as-page { font-size: 15px; }
.rulebook .rb { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rulebook .rb-search { position: static; padding: 14px 24px 8px; background: none; }
.rulebook .rb-none { margin: 6px 24px 0; }
.rulebook .rb-layout { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 12px 24px 48px; }

/* ========== 9. Utilities ========== */

.muted { color: var(--muted); }
.small { font-size: 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ========== 10. Media queries ========== */

@media (max-width: 900px) {
  .home-grid, .game { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .setup, .home-side { max-width: 640px; width: 100%; margin: 0 auto; }
  .board-col { max-width: 640px; width: 100%; margin: 0 auto; }
  .panel { padding-top: 0; max-width: 640px; width: 100%; margin: 0 auto; gap: 22px; }
  .squares { box-shadow: 4px 4px 0 var(--ink); }
  .error-page { grid-template-columns: 1fr; justify-items: start; }
  .err-board { width: 230px; }
}

/* the nav gets a row of its own */
@media (max-width: 720px) {
  header.site { flex-wrap: wrap; row-gap: 10px; }
  header nav { flex: 1 1 100%; justify-content: space-between; }
}

@media (max-width: 520px) {
  body { font-size: 17px; }

  header.site { padding: 14px 16px; }
  .wordmark { font-size: 24px; }
  header nav { gap: 6px; font-size: 15px; }
  header nav a, header nav .linklike { padding: 2px 3px; }
  .who { display: none; }
  .kbd-help-btn { display: none; } /* phones rarely have a keyboard */
  .keys > div { grid-template-columns: 7em 1fr; }

  .seg button { flex-direction: column; gap: 2px; font-size: 15px; padding: 10px 6px; }
  .level-grid { grid-template-columns: repeat(5, 1fr); }
  .time-inputs { grid-template-columns: 1fr; }

  .clock { font-size: 20px; min-width: 4em; }
  .pl-name { font-size: 16px; }
  .cover { padding: 14px; }
  .cover-note { font-size: 16px; }
  .copy-row { flex-direction: column; align-items: stretch; }

  .game-list li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .big-numbers { grid-template-columns: repeat(2, 1fr); row-gap: 24px; gap: 8px; }
  .levels-table td { font-size: 16px; }
  .datum { padding: 14px 16px 16px; }
  .datum dl { grid-template-columns: 1fr; gap: 12px; }

  .rules-lede { font-size: 17px; }
  .rb-field input { font-size: 17px; padding-right: 14px; }
  .rb-count { top: -30px; right: 2px; }
  .rb-rule { padding: 14px 16px 6px; }
  .rb-rule h3 { font-size: 22px; }
  .rulebook { border-left: 0; box-shadow: none; }
  .rb-bar { padding: 12px 16px; }
  .rb-bar-title { font-size: 24px; }
  .rb-as-page { display: none; }
  .rulebook .rb-search { padding: 12px 16px 8px; }
  .rulebook .rb-none { margin: 6px 16px 0; }
  .rulebook .rb-layout { padding: 10px 16px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}