/* 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); }

/* back to the selection page of all games */
.to-hub {
  flex: none;
  padding: 3px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.to-hub + .wordmark { margin-right: auto; }

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 open games; it stands out while one waits for 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;
}
.nav-badge.quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }

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); }
/* on/off choices (the help on the start page) show a tick */
.pill[role="checkbox"][aria-checked="true"]::before { content: "✓ "; }
.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);
  grid-template-areas: "board panel";
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.game .board-col { grid-area: board; }
.game .panel { grid-area: panel; }
/* Messages lie on top of the panel, level with the board: nothing moves
   when one comes or goes, and the board stays free. */
.game .toast { grid-area: panel; position: relative; z-index: 5; }
/* as large as the window allows, without pushing the clocks off screen */
.board-col { min-width: 0; max-width: max(320px, calc(100svh - 215px)); 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; }
/* your move: the row lights up and says so */
.player:has(.js-turn:not([hidden])) {
  background: var(--marker-soft);
  border-radius: var(--radius);
  box-shadow: inset 5px 0 0 var(--marker);
  padding-left: 14px;
}
.pl-turn {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--marker);
  color: var(--marker-ink);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.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. */

/* the margin keeps the players' rows clear of the board's shadow */
.board-wrap { position: relative; margin: 4px 0 12px; border-radius: var(--radius); }
/* the moment it becomes your move, a ring runs once around the board */
.board-wrap.your-turn { animation: your-turn 1.1s ease-out; }
@keyframes your-turn {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marker) 70%, transparent); }
  100% { box-shadow: 0 0 0 18px transparent; }
}

.stage {
  position: relative;
  aspect-ratio: 1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; /* no flash over the board on every tap */
}

.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); }
/* where a carried piece would land */
.sq.drop { box-shadow: inset 0 0 0 .7cqi var(--marker); }
/* after checkmate or stalemate: why the king is stuck (the same in board3d.js).
   No moves are marked then, so ::after is free. */
.sq.trap-covered { background: color-mix(in srgb, var(--red) 22%, var(--sq-light)); }
.sq.dark.trap-covered { background: color-mix(in srgb, var(--red) 22%, var(--sq-dark)); }
.sq.trap-covered::after, .sq.trap-check::after, .sq.trap-guard::after, .sq.trap-blocked::after {
  content: "";
  position: absolute;
  border-radius: 8px;
}
.sq.trap-covered::after {
  inset: 28%;
  background:
    linear-gradient(45deg, transparent 44%, color-mix(in srgb, var(--red) 70%, transparent) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, color-mix(in srgb, var(--red) 70%, transparent) 44% 56%, transparent 56%);
}
.sq.trap-check::after { inset: 3%; border: 1cqi solid var(--red); }
.sq.trap-guard::after { inset: 5%; border: .6cqi dashed var(--red); }
.sq.trap-blocked::after { inset: 7%; border: .55cqi dashed color-mix(in srgb, var(--ink) 50%, transparent); }
.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; }
/* carried by the pointer: no glide while moving, above the others */
.pc.dragging { transition: none; z-index: 4; }
.pc.dragging .fig { scale: 1.18; }
.pc.dragging .fig svg { filter: drop-shadow(0 6px 6px rgb(0 0 0 / .35)); }
body.grabbing, body.grabbing * { cursor: grabbing !important; }
.fig {
  position: absolute;
  left: 6%;
  width: 88%;
  bottom: 9%; /* centred in the square, not standing on its edge */
  height: 84%;
  scale: 1; /* a number, not "none", so putting a piece down shrinks smoothly too */
  transform-origin: 50% 90%;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none; /* a finger on a piece carries it; elsewhere it scrolls the page */
  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: safe center;
  gap: 8px;
  overflow-y: auto; /* a small board with a long result: scroll, don't cut */
  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; }
/* what this game unlocked, on the result */
.earned { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.earned-title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.earned-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.earned-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-2);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 15px;
  animation: earned-in .45s cubic-bezier(.2, .9, .3, 1.4) backwards;
}
.earned-list li:nth-child(2) { animation-delay: .12s; }
.earned-list li:nth-child(3) { animation-delay: .24s; }
.earned-list li:nth-child(4) { animation-delay: .36s; }
.earned-list li.pure { box-shadow: 3px 3px 0 var(--user); }
.earned-list li.secret { background: var(--ink); color: var(--paper); }
.earned-list li.more { padding-left: 14px; border-style: dashed; box-shadow: none; color: var(--muted); }
.earned-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--marker); color: var(--marker-ink);
  font-weight: 900; font-size: 13px;
}
.earned-link { font-size: 14px; font-weight: 700; }
@keyframes earned-in { from { transform: scale(.6); opacity: 0; } }
.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; }

/* the legend for those marks, next to the result */
.trap { margin-top: 14px; }
/* the opening's name next to "Züge" */
.label .opening { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink-soft); }
.trap-legend { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.trap-legend li { display: flex; align-items: center; gap: 10px; }
.trap-legend li[hidden] { display: none; }
.tl { flex: none; width: 20px; height: 20px; border-radius: 5px; background: var(--sq-light); position: relative; }
.tl.check { box-shadow: inset 0 0 0 3px var(--red); }
.tl.guard { outline: 2px dashed var(--red); outline-offset: -4px; }
.tl.blocked { outline: 2px dashed color-mix(in srgb, var(--ink) 50%, transparent); outline-offset: -4px; }
.tl.covered {
  background:
    linear-gradient(45deg, transparent 42%, var(--red) 42% 58%, transparent 58%) center / 60% 60% no-repeat,
    linear-gradient(-45deg, transparent 42%, var(--red) 42% 58%, transparent 58%) center / 60% 60% no-repeat,
    color-mix(in srgb, var(--red) 22%, var(--sq-light));
}

/* above the board, over the opponent's row; long ones grow upwards */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 50px; /* level with the board, like the panel */
  padding: 12px 8px 12px 16px;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  border-left-width: 8px;
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  box-shadow: 6px 6px 0 var(--ink);
  animation: toast-in .3s cubic-bezier(.2, .9, .3, 1.3);
  line-height: 1.4;
}
.toast[hidden] { display: none; }
.toast-text { flex: 1; align-self: center; }
.toast-close {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: 700 20px/1 var(--font);
  cursor: pointer;
}
.toast-close:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.toast.bad { background: var(--red-soft); color: var(--red); border-left-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 { font-weight: 600; border-left-color: var(--marker); }
.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: translateY(-10px) scale(.97); 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; }

/* touch screens (html.touch, see common.js): the board is tapped, so no
   typed moves and no key hints */
.touch #move-form { display: none; }
.touch :is(button, a, label, .label, summary, .guide-hint) kbd { display: none; }

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

@media (max-width: 900px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* one column: the message right below the board, then the panel */
  .game { grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "panel"; gap: 24px; }
  .game .toast { margin: 0 auto; max-width: 640px; width: 100%; }
  .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) {
  .earned { margin-top: 6px; gap: 6px; }
  .earned-list { gap: 6px; }
  .earned-list li { font-size: 13px; padding: 3px 10px 3px 4px; gap: 6px; box-shadow: 2px 2px 0 var(--ink); }
  .earned-check { width: 20px; height: 20px; font-size: 11px; }
  body { font-size: 17px; }

  header.site { padding: 14px 16px; }
  .wordmark { font-size: 24px; }
  .to-hub { font-size: 13px; padding: 2px 8px; }
  /* six links don't fit one row on a phone: they wrap, centred */
  header nav { flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 15px; }
  header nav a, header nav .linklike { padding: 2px 3px; }
  .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; }
}

/* "how it works" on the start page: a fold-out, closed on phones (home.js) */
details.how > summary { list-style: none; cursor: pointer; }
details.how > summary::-webkit-details-marker { display: none; }
details.how > summary h2 { display: inline; }
details.how > summary::after { content: " ▾"; font-weight: 800; }
details.how[open] > summary::after { content: " ▴"; }
.touch .keys-hint { display: none; }

/* badges on phones: two compact columns instead of one long list */
@media (max-width: 520px) {
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .badges li { flex-direction: column; gap: 6px; padding: 10px; font-size: 14px; line-height: 1.3; }
  .badges .check { width: 22px; height: 22px; font-size: 12px; }
  .badges .muted { font-size: 13px; }
  .badge-meta { font-size: 12px; margin-top: 2px; }
}


/* ---------- online: waiting line, finder, rating, leaderboard ---------- */
.seg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.three button { text-align: center; }
.queue { display: grid; gap: 10px; padding: 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper-2); }
.queue-stats { margin: 0; font-weight: 700; min-height: 1.5em; }
.queue-wait { display: grid; gap: 10px; }
.queue-time { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 18px; }
.queue-time strong { font: 800 22px var(--font-num); font-variant-numeric: tabular-nums; }
.queue-ping { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--marker); flex: none; }
.queue-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--marker); animation: ping 1.4s ease-out infinite; }
@keyframes ping { to { transform: scale(2.6); opacity: 0; } }

.finder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.finder li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "who act" "rules act";
  align-items: center;
  gap: 2px 12px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
}
.fi-who { grid-area: who; overflow-wrap: anywhere; }
.fi-rules { grid-area: rules; font-size: 14px; color: var(--muted); }
.finder li > a { grid-area: act; }
.fi-yours { font-size: 14px; font-weight: 700; color: var(--muted); }

.rating-card { display: grid; gap: 6px; padding: 16px 18px; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper-2); box-shadow: 5px 5px 0 var(--marker); margin: 12px 0 8px; }
.rc-rank { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
/* the piece of the rank, as a little badge */
.rc-badge { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--marker); color: var(--marker-ink); font-size: 30px; line-height: 1; box-shadow: 2px 2px 0 var(--ink); flex: none; }
.rc-wert, .rc-week { margin: 0; }
.rc-wert strong { font: 800 20px var(--font-num); }
.rc-bar { width: 100%; height: 12px; appearance: none; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--paper); }
.rc-bar::-webkit-progress-bar { background: var(--paper); }
.rc-bar::-webkit-progress-value { background: var(--marker); }
.rc-bar::-moz-progress-bar { background: var(--marker); }
.rc-next { margin: 0; font-size: 15px; }
.rc-public p { margin: 4px 0 0; font-size: 15px; }

.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.board-list li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; }
.board-list li:nth-child(-n+3) { border-color: var(--ink); }
.board-list li.me { background: var(--marker); color: var(--marker-ink); border-color: var(--ink); }
.board-list li.me .muted { color: inherit; opacity: .75; }
.bl-place { font: 800 20px var(--font-num); text-align: center; }
.bl-who, .bl-wert { display: flex; flex-direction: column; line-height: 1.25; }
.bl-who strong { overflow-wrap: anywhere; }
.bl-wert { text-align: right; }
.bl-wert strong { font: 800 18px var(--font-num); }
.bl-who .muted, .bl-wert .muted { font-size: 13px; }
.rank-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.rank-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px; min-width: 0; padding: 6px 10px; border: 2px dashed var(--line); border-radius: 10px; font-weight: 700; }
.rank-list .muted { font-weight: 500; font-size: 14px; }
.rank-list li > span:first-child { white-space: nowrap; }
.rl-glyph { font-size: 22px; line-height: 1; }
@media (max-width: 520px) {
  .seg.three button { font-size: 13px; padding: 10px 4px; }
  .rc-rank { font-size: 24px; }
  .rc-badge { width: 38px; height: 38px; font-size: 26px; }
  .board-list li { gap: 8px; padding: 8px 10px; }
}

/* signed in or not, a pill like on the selection page */
header nav a.account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 11em;
  padding: 3px 11px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.account-name { overflow: hidden; text-overflow: ellipsis; }
.account-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--green, #1a7f37); }
@media (max-width: 520px) { header nav a.account { max-width: 8em; padding: 1px 8px; } }
/* on phones the links wrap to a second row rather than run off the screen */
@media (max-width: 520px) { header nav { flex-wrap: wrap; justify-content: flex-start; column-gap: 14px; row-gap: 8px; } }