/* Schiffe versenken — plain, bold, salty. Same family as Schach and Yukendo.

   1. Tokens and colour schemes   6. The seas (flat view and 3D stage)
   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 ==========
   "Brandung" 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 (sea3d.js liest die Werte als fertige Farben,
   light-dark() geht deshalb nicht). Die --sea-*, --lid-*, --ship-* und
   --case-Werte färben das Spielfeld, flach wie in 3D. */

:root {
  --radius: 12px;
  --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; }

/* Brandung (Standard) */
:root {
  --paper: #eef5f4;
  --paper-2: #fbfefe;
  --ink: #0e2a35;
  --ink-soft: #2d4954;
  --muted: #5d7880;
  --line: #cfdfdf;
  --marker: #ffb020;
  --marker-ink: #0e2a35;
  --peer: #e0ecec;
  --marker-soft: #fff0cc;
  --user: #1769aa;
  --red: #d93a24;
  --red-soft: #fde6e1;
  --green: #1f8a5b;
  --dot: #e0412b;
  --sea-deep: #0f5873;
  --sea-shallow: #3a9bb5;
  --sea-line: #d7f0f5;
  --lid: #12313d;
  --lid-line: #3d7d8f;
  --radar: #5fe0b4;
  --hit: #ff5a2a;
  --miss: #f4f8f9;
  --ship: #8996a1;
  --ship-deck: #5b6a75;
  --ship-detail: #2a3640;
  --case: #1b4a5c;
  --cursor: #ff8a1f;
  --ok: #2bb673;
  --edge: #0e2a35;
}
:root[data-mode="dark"] {
  --paper: #08161c;
  --paper-2: #0f232b;
  --ink: #e3f1f2;
  --ink-soft: #b9d0d4;
  --muted: #7f9ca3;
  --line: #24414a;
  --marker: #ffbd3d;
  --marker-ink: #08161c;
  --peer: #15303a;
  --marker-soft: #3a2e10;
  --user: #6cb6ff;
  --red: #ff6b52;
  --red-soft: #3d1c16;
  --green: #4fd18b;
  --dot: #ff6b52;
  --sea-deep: #04293a;
  --sea-shallow: #11607a;
  --sea-line: #7fc3d4;
  --lid: #071a22;
  --lid-line: #2c6273;
  --radar: #5fe0b4;
  --hit: #ff6a33;
  --miss: #e8f2f4;
  --ship: #7d8a95;
  --ship-deck: #4c5a64;
  --ship-detail: #1c262e;
  --case: #123947;
  --cursor: #ffbd3d;
  --ok: #4fd18b;
  --edge: #020b0f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --paper: #08161c;
    --paper-2: #0f232b;
    --ink: #e3f1f2;
    --ink-soft: #b9d0d4;
    --muted: #7f9ca3;
    --line: #24414a;
    --marker: #ffbd3d;
    --marker-ink: #08161c;
    --peer: #15303a;
    --marker-soft: #3a2e10;
    --user: #6cb6ff;
    --red: #ff6b52;
    --red-soft: #3d1c16;
    --green: #4fd18b;
    --dot: #ff6b52;
    --sea-deep: #04293a;
    --sea-shallow: #11607a;
    --sea-line: #7fc3d4;
    --lid: #071a22;
    --lid-line: #2c6273;
    --radar: #5fe0b4;
    --hit: #ff6a33;
    --miss: #e8f2f4;
    --ship: #7d8a95;
    --ship-deck: #4c5a64;
    --ship-detail: #1c262e;
    --case: #123947;
    --cursor: #ffbd3d;
    --ok: #4fd18b;
    --edge: #020b0f;
  }
}

/* Nordsee */
:root[data-theme="nordsee"] {
  --paper: #f0f2ef;
  --paper-2: #fcfcfa;
  --ink: #1f2a2a;
  --ink-soft: #3c4847;
  --muted: #6b7775;
  --line: #d6dbd6;
  --marker: #e94f37;
  --marker-ink: #ffffff;
  --peer: #e4e8e3;
  --marker-soft: #fbe1dc;
  --user: #2c6e8f;
  --red: #c8321f;
  --red-soft: #f8e0dc;
  --green: #2f7d4f;
  --dot: #e94f37;
  --sea-deep: #2f4f57;
  --sea-shallow: #6f8f8f;
  --sea-line: #dfe8e4;
  --lid: #263638;
  --lid-line: #5f7b7a;
  --radar: #9fe870;
  --hit: #ff6a2a;
  --miss: #f5f5f0;
  --ship: #9aa3a3;
  --ship-deck: #616b6b;
  --ship-detail: #2c3434;
  --case: #b8331f;
  --cursor: #2c6e8f;
  --ok: #2f9e5f;
  --edge: #1f2a2a;
}
:root[data-theme="nordsee"][data-mode="dark"] {
  --paper: #121716;
  --paper-2: #1a2120;
  --ink: #e7ece9;
  --ink-soft: #c3ccc8;
  --muted: #8c9894;
  --line: #2f3a38;
  --marker: #ff6a52;
  --marker-ink: #121716;
  --peer: #222b29;
  --marker-soft: #3f201a;
  --user: #7fb8d6;
  --red: #ff6f5c;
  --red-soft: #3e1e19;
  --green: #6fcf8f;
  --dot: #ff6a52;
  --sea-deep: #16272b;
  --sea-shallow: #3a5458;
  --sea-line: #8aa3a0;
  --lid: #0f1716;
  --lid-line: #3e5654;
  --radar: #9fe870;
  --hit: #ff7a3a;
  --miss: #e6ebe8;
  --ship: #7f8a8a;
  --ship-deck: #4d5757;
  --ship-detail: #1e2525;
  --case: #8e2316;
  --cursor: #7fb8d6;
  --ok: #6fcf8f;
  --edge: #070a0a;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="nordsee"]:not([data-mode="light"]) {
    --paper: #121716;
    --paper-2: #1a2120;
    --ink: #e7ece9;
    --ink-soft: #c3ccc8;
    --muted: #8c9894;
    --line: #2f3a38;
    --marker: #ff6a52;
    --marker-ink: #121716;
    --peer: #222b29;
    --marker-soft: #3f201a;
    --user: #7fb8d6;
    --red: #ff6f5c;
    --red-soft: #3e1e19;
    --green: #6fcf8f;
    --dot: #ff6a52;
    --sea-deep: #16272b;
    --sea-shallow: #3a5458;
    --sea-line: #8aa3a0;
    --lid: #0f1716;
    --lid-line: #3e5654;
    --radar: #9fe870;
    --hit: #ff7a3a;
    --miss: #e6ebe8;
    --ship: #7f8a8a;
    --ship-deck: #4d5757;
    --ship-detail: #1e2525;
    --case: #8e2316;
    --cursor: #7fb8d6;
    --ok: #6fcf8f;
    --edge: #070a0a;
  }
}

/* Tropen */
:root[data-theme="tropen"] {
  --paper: #fbf6ea;
  --paper-2: #fffdf7;
  --ink: #10343a;
  --ink-soft: #2f5157;
  --muted: #6e7f7c;
  --line: #e7dcc4;
  --marker: #ff6f61;
  --marker-ink: #ffffff;
  --peer: #f3ead6;
  --marker-soft: #ffe1dc;
  --user: #0f8b8d;
  --red: #d9362f;
  --red-soft: #fde3df;
  --green: #1d9a6c;
  --dot: #ff6f61;
  --sea-deep: #0a7f8c;
  --sea-shallow: #3fc9c3;
  --sea-line: #e9fffb;
  --lid: #0f3c44;
  --lid-line: #3a8f92;
  --radar: #ffe36e;
  --hit: #ff5a2a;
  --miss: #ffffff;
  --ship: #a7b1b6;
  --ship-deck: #6d7a80;
  --ship-detail: #33424a;
  --case: #f2b632;
  --cursor: #0f8b8d;
  --ok: #1d9a6c;
  --edge: #10343a;
}
:root[data-theme="tropen"][data-mode="dark"] {
  --paper: #0b1f22;
  --paper-2: #11292d;
  --ink: #eaf6f2;
  --ink-soft: #c4dcd8;
  --muted: #87a3a0;
  --line: #21424a;
  --marker: #ff8a7c;
  --marker-ink: #0b1f22;
  --peer: #17353a;
  --marker-soft: #3e221f;
  --user: #47c8c4;
  --red: #ff6b62;
  --red-soft: #3e1d1b;
  --green: #4fd1a0;
  --dot: #ff8a7c;
  --sea-deep: #04434d;
  --sea-shallow: #138b8f;
  --sea-line: #a5ece6;
  --lid: #062328;
  --lid-line: #2a6f73;
  --radar: #ffe36e;
  --hit: #ff6a33;
  --miss: #eef8f6;
  --ship: #8b979c;
  --ship-deck: #56636a;
  --ship-detail: #1f2a2f;
  --case: #a87d18;
  --cursor: #47c8c4;
  --ok: #4fd1a0;
  --edge: #031012;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="tropen"]:not([data-mode="light"]) {
    --paper: #0b1f22;
    --paper-2: #11292d;
    --ink: #eaf6f2;
    --ink-soft: #c4dcd8;
    --muted: #87a3a0;
    --line: #21424a;
    --marker: #ff8a7c;
    --marker-ink: #0b1f22;
    --peer: #17353a;
    --marker-soft: #3e221f;
    --user: #47c8c4;
    --red: #ff6b62;
    --red-soft: #3e1d1b;
    --green: #4fd1a0;
    --dot: #ff8a7c;
    --sea-deep: #04434d;
    --sea-shallow: #138b8f;
    --sea-line: #a5ece6;
    --lid: #062328;
    --lid-line: #2a6f73;
    --radar: #ffe36e;
    --hit: #ff6a33;
    --miss: #eef8f6;
    --ship: #8b979c;
    --ship-deck: #56636a;
    --ship-detail: #1f2a2f;
    --case: #a87d18;
    --cursor: #47c8c4;
    --ok: #4fd1a0;
    --edge: #031012;
  }
}

/* Nachtfahrt */
:root[data-theme="nacht"] {
  --paper: #eceef5;
  --paper-2: #f9faff;
  --ink: #151a33;
  --ink-soft: #343b5a;
  --muted: #687090;
  --line: #d3d7e6;
  --marker: #3ddc97;
  --marker-ink: #0b1020;
  --peer: #e1e5f1;
  --marker-soft: #d4f7e7;
  --user: #5b5fd6;
  --red: #d8384a;
  --red-soft: #fbe0e4;
  --green: #1f9a66;
  --dot: #2fbf80;
  --sea-deep: #1b2550;
  --sea-shallow: #3a4f8a;
  --sea-line: #c9d3f5;
  --lid: #0c1230;
  --lid-line: #2d3d7a;
  --radar: #3ddc97;
  --hit: #ff6a33;
  --miss: #eef1ff;
  --ship: #8790a8;
  --ship-deck: #586078;
  --ship-detail: #262c40;
  --case: #20264a;
  --cursor: #5b5fd6;
  --ok: #2fbf80;
  --edge: #151a33;
}
:root[data-theme="nacht"][data-mode="dark"] {
  --paper: #070a17;
  --paper-2: #0e1326;
  --ink: #e4e8fa;
  --ink-soft: #bfc6e6;
  --muted: #7f88ad;
  --line: #20284a;
  --marker: #3ddc97;
  --marker-ink: #070a17;
  --peer: #161d38;
  --marker-soft: #0f3326;
  --user: #8f94ff;
  --red: #ff6170;
  --red-soft: #3a1720;
  --green: #3ddc97;
  --dot: #3ddc97;
  --sea-deep: #050a24;
  --sea-shallow: #16205a;
  --sea-line: #5f73c9;
  --lid: #03061a;
  --lid-line: #233684;
  --radar: #3ddc97;
  --hit: #ff7038;
  --miss: #dfe5ff;
  --ship: #6c7590;
  --ship-deck: #434b63;
  --ship-detail: #171c2c;
  --case: #141a3c;
  --cursor: #8f94ff;
  --ok: #3ddc97;
  --edge: #01020a;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="nacht"]:not([data-mode="light"]) {
    --paper: #070a17;
    --paper-2: #0e1326;
    --ink: #e4e8fa;
    --ink-soft: #bfc6e6;
    --muted: #7f88ad;
    --line: #20284a;
    --marker: #3ddc97;
    --marker-ink: #070a17;
    --peer: #161d38;
    --marker-soft: #0f3326;
    --user: #8f94ff;
    --red: #ff6170;
    --red-soft: #3a1720;
    --green: #3ddc97;
    --dot: #3ddc97;
    --sea-deep: #050a24;
    --sea-shallow: #16205a;
    --sea-line: #5f73c9;
    --lid: #03061a;
    --lid-line: #233684;
    --radar: #3ddc97;
    --hit: #ff7038;
    --miss: #dfe5ff;
    --ship: #6c7590;
    --ship-deck: #434b63;
    --ship-detail: #171c2c;
    --case: #141a3c;
    --cursor: #8f94ff;
    --ok: #3ddc97;
    --edge: #01020a;
  }
}

/* Karopapier (dunkel: Schultafel) */
:root[data-theme="papier"] {
  --paper: #ffffff;
  --paper-2: #ffffff;
  --ink: #23262e;
  --ink-soft: #44474f;
  --muted: #7a7d85;
  --line: #d7dbe6;
  --marker: #e63027;
  --marker-ink: #ffffff;
  --peer: #eef1f8;
  --marker-soft: #fde2df;
  --user: #2453c7;
  --red: #e63027;
  --red-soft: #fde2df;
  --green: #2b8a3e;
  --dot: #e63027;
  --sea-deep: #c3d3f2;
  --sea-shallow: #eef3fd;
  --sea-line: #6f8dd3;
  --lid: #f4f6fb;
  --lid-line: #9fb2e0;
  --radar: #2453c7;
  --hit: #e63027;
  --miss: #3a3d46;
  --ship: #a0a6b2;
  --ship-deck: #6b707b;
  --ship-detail: #23262e;
  --case: #dfe3ec;
  --cursor: #2453c7;
  --ok: #2b8a3e;
  --edge: #23262e;
}
:root[data-theme="papier"][data-mode="dark"] {
  --paper: #1d2421;
  --paper-2: #242c29;
  --ink: #eef0ea;
  --ink-soft: #cfd3cb;
  --muted: #959b92;
  --line: #3a443f;
  --marker: #ffd166;
  --marker-ink: #1d2421;
  --peer: #2b3430;
  --marker-soft: #3e3a22;
  --user: #8ecae6;
  --red: #ff7b6b;
  --red-soft: #3e241f;
  --green: #7fd18a;
  --dot: #ffd166;
  --sea-deep: #1a2a28;
  --sea-shallow: #2d403c;
  --sea-line: #c9d1c3;
  --lid: #18201d;
  --lid-line: #5f6d66;
  --radar: #ffd166;
  --hit: #ff7b6b;
  --miss: #eef0ea;
  --ship: #8a938c;
  --ship-deck: #5d665f;
  --ship-detail: #1d2421;
  --case: #2f3a35;
  --cursor: #8ecae6;
  --ok: #7fd18a;
  --edge: #0b0f0d;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="papier"]:not([data-mode="light"]) {
    --paper: #1d2421;
    --paper-2: #242c29;
    --ink: #eef0ea;
    --ink-soft: #cfd3cb;
    --muted: #959b92;
    --line: #3a443f;
    --marker: #ffd166;
    --marker-ink: #1d2421;
    --peer: #2b3430;
    --marker-soft: #3e3a22;
    --user: #8ecae6;
    --red: #ff7b6b;
    --red-soft: #3e241f;
    --green: #7fd18a;
    --dot: #ffd166;
    --sea-deep: #1a2a28;
    --sea-shallow: #2d403c;
    --sea-line: #c9d1c3;
    --lid: #18201d;
    --lid-line: #5f6d66;
    --radar: #ffd166;
    --hit: #ff7b6b;
    --miss: #eef0ea;
    --ship: #8a938c;
    --ship-deck: #5d665f;
    --ship-detail: #1d2421;
    --case: #2f3a35;
    --cursor: #8ecae6;
    --ok: #7fd18a;
    --edge: #0b0f0d;
  }
}
/* ========== 2. Base ========== */

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

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

body {
  margin: 0;
  /* a faint sea chart behind everything */
  background:
    linear-gradient(color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--paper);
  color: var(--ink);
  font: 18px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* squared paper really is squared paper */
:root[data-theme="papier"] body {
  background:
    linear-gradient(color-mix(in srgb, var(--user) 16%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, color-mix(in srgb, var(--user) 16%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--paper);
}

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: 1320px;
  width: 100%;
  margin: 0 auto;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -.04em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { background: none; color: inherit; }
.wordmark:hover .wm-mark { transform: rotate(-6deg) translateY(-1px); }
.wm-mark {
  width: 38px;
  height: 38px;
  flex: none;
  padding: 3px;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: var(--sea-shallow);
  box-shadow: 3px 3px 0 var(--marker);
  transition: transform .2s cubic-bezier(.3, .7, .3, 1.4);
}
.wm-hull { fill: var(--paper-2); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.wm-top { fill: var(--paper-2); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.wm-wave { fill: none; stroke: var(--paper-2); stroke-width: 2.4; stroke-linecap: round; }
.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 6px; border-radius: 6px; }
header nav a[aria-current="page"] { background: var(--marker); color: var(--marker-ink); }

/* number of correspondence games waiting for you */
.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: 1400px; }
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:not(:disabled) { background: var(--marker); color: var(--marker-ink); }
.pill:disabled { opacity: .4; cursor: not-allowed; }
.pill[aria-checked="true"], .pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* on/off choices 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, transform .1s, box-shadow .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.big:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 2px 2px 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(600px, 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, 620px) minmax(260px, 400px);
  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: 18px;
  background: var(--paper-2);
  box-shadow: 7px 7px 0 var(--sea-shallow), 7px 7px 0 2px 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 svg { display: block; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.seg-icon .fill { fill: currentColor; stroke: none; }

/* level buttons (home and game page) */
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lvl {
  height: 46px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper-2);
  font: 800 19px/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.single { grid-template-columns: minmax(0, 240px); }
.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); }

/* the fleet as little rows of cells */
.fleet-preview { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.mini-ship { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ship-deck); border: 2px solid var(--ink); }
.mini-ship i { width: 12px; height: 12px; border-radius: 3px; background: var(--ship); }
.mini-ship i:first-child { border-radius: 6px 3px 3px 6px; }
.mini-ship i:last-child { border-radius: 3px 8px 8px 3px; }

.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); }

/* the little scene next to the setup (home.html): one cycle of firing takes
   7 s – flash at 20 %, the shell lands at 36 %, the splash fades by 60 % */
.home-art { border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); }
.home-art .art { display: block; width: 100%; height: auto; }
.art * { transform-box: view-box; }
.sky-a { stop-color: color-mix(in srgb, var(--lid) 80%, #000); }
.sky-b { stop-color: color-mix(in srgb, var(--sea-shallow) 45%, var(--lid)); }
.art-frame { fill: none; stroke: var(--ink); stroke-width: 3; }

.art-radar circle { fill: none; stroke: var(--radar); stroke-width: 1; opacity: .3; }
.art-radar .art-sweep { fill: var(--radar); opacity: .22; transform-origin: 262px 44px; animation: art-spin 5s linear infinite; }
.art-radar .art-blip { fill: var(--radar); stroke: none; opacity: 1; animation: art-blink 5s ease-out infinite; }
.art-far path { fill: color-mix(in srgb, var(--ship) 45%, var(--lid)); stroke: none; }
.art-far { animation: art-far 30s linear infinite alternate; }

.art-wave { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.art-wave.back { fill: var(--sea-deep); animation: art-drift-40 7s linear infinite; }
.art-wave.mid { fill: color-mix(in srgb, var(--sea-shallow) 75%, var(--sea-deep)); animation: art-drift-48 5s linear infinite reverse; }
.art-wave.front { fill: var(--sea-shallow); animation: art-drift-56 3.6s linear infinite; }

.art-ship { transform-origin: 150px 152px; animation: art-bob 4.2s ease-in-out infinite; }
.art-ship path, .art-ship rect { stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.art-ship .hull { fill: var(--ship); }
.art-ship .boot { fill: none; stroke: var(--hit); stroke-width: 3; }
.art-ship .deck { fill: var(--ship-deck); }
.art-ship .glass { fill: var(--sea-line); stroke-width: 1.5; }
.art-ship .cap { fill: var(--ship-detail); }
.art-ship .mast { fill: none; stroke-width: 2; }
.art-ship .gun { fill: none; stroke-width: 3.6; }
.art-ship .flag { fill: var(--marker); stroke-width: 1.8; }
.art-flash path { fill: #ffd45a; stroke: var(--hit); stroke-width: 1.6; }
.art-flash { transform-box: fill-box; transform-origin: center; animation: art-flash 7s linear infinite; }
.art-smoke circle { fill: color-mix(in srgb, var(--paper) 70%, var(--muted)); opacity: 0; transform-box: fill-box; transform-origin: center; animation: art-smoke 3.6s ease-out infinite; }
.art-smoke circle:nth-child(2) { animation-delay: 1.2s; }
.art-smoke circle:nth-child(3) { animation-delay: 2.4s; }
.art-bow { fill: none; stroke: var(--miss); stroke-width: 2.5; stroke-linecap: round; animation: art-bow 4.2s ease-in-out infinite; }

.art-shell { fill: var(--marker); stroke: var(--ink); stroke-width: 1.5; animation: art-shell 7s linear infinite; }
.art-splash .col { fill: var(--miss); stroke: var(--ink); stroke-width: 2; }
.art-splash .drop { fill: var(--miss); stroke: var(--ink); stroke-width: 1.5; }
.art-splash .ring { fill: none; stroke: var(--sea-line); stroke-width: 2; }
.art-splash .col, .art-splash .drop { transform-box: fill-box; transform-origin: 50% 100%; animation: art-splash 7s ease-out infinite; }
.art-splash .ring { transform-box: fill-box; transform-origin: center; animation: art-ring 7s ease-out infinite; }
.art-splash .ring.r2 { animation-name: art-ring2; }

.art-peri { animation: art-peri 12s ease-in-out infinite; }
.art-peri .tube, .art-peri .head { fill: var(--ship-detail); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.art-peri .collar { fill: var(--ship-deck); stroke: var(--ink); stroke-width: 1.6; }
.art-peri .lens { fill: var(--radar); stroke: var(--ink); stroke-width: 1.4; animation: art-glint 12s linear infinite; }
.art-wake path { fill: none; stroke: var(--miss); stroke-width: 2.4; stroke-linecap: round; animation: art-wake 1.4s ease-in-out infinite; }

@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-blink { 0%, 8% { opacity: 1; } 40%, 100% { opacity: .15; } }
@keyframes art-far { to { transform: translateX(26px); } }
@keyframes art-drift-40 { to { transform: translateX(-40px); } }
@keyframes art-drift-48 { to { transform: translateX(-48px); } }
@keyframes art-drift-56 { to { transform: translateX(-56px); } }
@keyframes art-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(2.5px) rotate(1.4deg); }
  70% { transform: translateY(-1px) rotate(-1.2deg); }
}
@keyframes art-bow { 50% { transform: translate(3px, 1px); opacity: .6; } }
@keyframes art-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: .85; }
  100% { opacity: 0; transform: translate(-26px, -38px) scale(2.8); }
}
@keyframes art-flash {
  0%, 19.5% { opacity: 0; transform: scale(.2); }
  20.5% { opacity: 1; transform: scale(1.4); }
  25%, 100% { opacity: 0; transform: scale(.6); }
}
@keyframes art-shell { 0%, 19.9% { opacity: 0; } 20%, 35.9% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes art-splash {
  0%, 35.9% { opacity: 0; transform: scaleY(0); }
  40% { opacity: 1; transform: scaleY(1.1); }
  52% { opacity: 1; transform: scaleY(.9) translateY(2px); }
  62%, 100% { opacity: 0; transform: scaleY(.3) translateY(6px); }
}
@keyframes art-ring {
  0%, 36% { opacity: 0; transform: scale(.4); }
  40% { opacity: 1; }
  70%, 100% { opacity: 0; transform: scale(3.2); }
}
@keyframes art-ring2 {
  0%, 44% { opacity: 0; transform: scale(.4); }
  48% { opacity: .8; }
  80%, 100% { opacity: 0; transform: scale(2.6); }
}
@keyframes art-peri {
  0%, 8% { transform: translate(0, 76px); }
  20% { transform: translate(0, 0); }
  64% { transform: translate(-30px, 0); }
  76%, 100% { transform: translate(-34px, 76px); }
}
@keyframes art-glint { 0%, 30%, 34%, 100% { fill: var(--radar); } 32% { fill: #fff; } }
@keyframes art-wake { 50% { transform: translateX(3px); opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .art-shell, .art-flash, .art-splash, .art-smoke { display: none; }
}

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

.game {
  display: grid;
  grid-template-columns: minmax(0, 940px) minmax(270px, 340px);
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
/* as large as the window allows, without pushing the player rows off screen */
.board-col { min-width: 0; width: 100%; justify-self: center; }
.gl .board-col { max-width: max(320px, calc((100svh - 160px) / 1.02)); }

.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(--ok); }
.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 shot: 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;
}
/* which ships still float: one little hull per ship */
.pl-fleet { flex: 1; min-width: 0; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pl-fleet i { height: 9px; border-radius: 2px 6px 6px 2px; background: var(--ship); border: 1.5px solid var(--ink); }
.pl-fleet i.down { background: var(--hit); opacity: .35; border-style: dashed; }

.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: 3.6em;
  text-align: right;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
/* the time left for this shot, as a bar that empties */
.clock::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: calc(var(--left, 1) * 100%);
  background: var(--marker);
}
.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; animation: tick .5s steps(2) infinite; }
.clock.low::after { background: #fff; }
@keyframes tick { 50% { filter: brightness(1.25); } }

/* the panel next to the board */
.panel { display: flex; flex-direction: column; gap: 26px; 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; }

.invite { box-shadow: 5px 5px 0 var(--marker); }
.invite-note { margin: 0; font-size: 16px; color: var(--ink-soft); }

/* the dock with the ships to place */
.dock { padding: 16px; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper-2); box-shadow: 5px 5px 0 var(--sea-shallow), 5px 5px 0 2px var(--ink); }
.dock-note { margin: -4px 0 0; font-size: 15px; color: var(--ink-soft); line-height: 1.45; }
.dock-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dock-list button {
  display: grid;
  grid-template-columns: 1.4em 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  text-align: left;
  font-weight: 700;
  font-size: 15px;
}
.dock-list button:hover { border-color: var(--ink); }
.dock-list .num { font: 800 13px var(--font-num); color: var(--muted); }
.dock-list .placed { opacity: .55; }
.dock-list .placed .dock-name::after { content: " ✓"; color: var(--green); }
.dock-list [aria-pressed="true"] { border-color: var(--ink); background: var(--marker); color: var(--marker-ink); opacity: 1; box-shadow: 3px 3px 0 var(--ink); }
.dock-list [aria-pressed="true"] .num { color: inherit; }
.dock-list .mini-ship { padding: 2px; border-width: 1.5px; }
.dock-list .mini-ship i { width: 9px; height: 9px; }
.dock-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ready-note { margin: 0; font-weight: 700; }

/* the fleets side by side */
.fleets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fleet-head { margin: 0 0 6px; font-size: 14px; color: var(--ink-soft); }
.fleet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14px; }
.fleet-list li { display: flex; align-items: center; gap: 7px; line-height: 1.2; }
.fleet-list .fl-bar { display: inline-flex; gap: 2px; flex: none; }
.fleet-list .fl-bar i { width: 8px; height: 10px; border-radius: 2px; background: var(--ship); border: 1px solid var(--ink); }
.fleet-list .fl-bar i.hit { background: var(--hit); }
.fleet-list li.down { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--hit); text-decoration-thickness: 2px; }
.fleet-list li.down .bar i { background: var(--hit); opacity: .5; }

.move-input { display: flex; gap: 8px; flex-wrap: wrap; }
.move-input input { flex: 1; min-width: 5em; font: 800 19px var(--font-num); letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; background: var(--paper-2); }
.move-input input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 16px; }
.move-input input:disabled { opacity: .5; }

.shot-log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border-top: 2px solid var(--ink);
  font: 600 15px/1.2 var(--font-num);
  font-variant-numeric: tabular-nums;
}
.shot-log li { display: grid; grid-template-columns: 2.4em 5.6em 3em 1fr; gap: 6px; padding: 6px 2px; border-bottom: 1px solid var(--line); align-items: center; }
.shot-log .n { color: var(--muted); font-weight: 500; }
.shot-log .cell { font-weight: 800; }
.shot-log .res.hit { color: var(--hit); font-weight: 800; }
.shot-log .res.miss { color: var(--muted); }
.shot-log li.mine { background: color-mix(in srgb, var(--marker-soft) 60%, transparent); }
.shot-log li.newest { box-shadow: inset 4px 0 0 var(--marker); }
.shot-log:empty::before { content: attr(data-empty); display: block; padding: 10px 0; color: var(--muted); font: 500 15px var(--font); }

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

.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-brandung { background: linear-gradient(135deg, #eef5f4 0 33%, #0e2a35 33% 55%, #ffb020 55% 75%, #3a9bb5 75%); }
.sw-nordsee { background: linear-gradient(135deg, #f0f2ef 0 33%, #1f2a2a 33% 55%, #e94f37 55% 75%, #6f8f8f 75%); }
.sw-tropen { background: linear-gradient(135deg, #fbf6ea 0 33%, #10343a 33% 55%, #ff6f61 55% 75%, #3fc9c3 75%); }
.sw-nacht { background: linear-gradient(135deg, #0e1326 0 33%, #e4e8fa 33% 55%, #3ddc97 55% 75%, #16205a 75%); }
.sw-papier { background: linear-gradient(135deg, #ffffff 0 33%, #23262e 33% 55%, #e63027 55% 75%, #2453c7 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-sea {
  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; }

/* --- sea diagrams: rulebook and error pages (diagram.go) --- */
.sg-sea { fill: var(--sea-shallow); stroke: var(--ink); stroke-width: 2.5; }
.sg-shadow { fill: var(--ink); }
.sg-line { stroke: var(--sea-line); stroke-width: 1; opacity: .7; }
.sg-coord { fill: var(--muted); font: 700 11px/1 var(--font-num); text-anchor: middle; }
.sg-ship { fill: var(--ship); stroke: var(--ink); stroke-width: 2.2; }
.sg-ship.sunk { fill: color-mix(in srgb, var(--hit) 30%, var(--ship)); stroke-dasharray: 4 3; }
.sg-glow { fill: var(--marker); opacity: .85; }
.sg-bad { fill: var(--red); opacity: .55; }
.sg-water { fill: var(--sea-line); }
.sg-miss { fill: var(--miss); stroke: var(--ink); stroke-width: 1.5; }
.sg-hit circle { fill: var(--hit); stroke: var(--ink); stroke-width: 1.8; }
.sg-hit path { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.sg-ghost { fill: var(--red-soft); stroke: var(--red); stroke-width: 2; stroke-dasharray: 5 4; }
.sg-ghost-label { fill: var(--red); font: 800 11px/1 var(--font-num); text-anchor: middle; }
.sg-splash path, .sg-splash circle { fill: var(--miss); stroke: var(--ink); stroke-width: 1.6; }
.sg-arrow { stroke: var(--user); stroke-width: 4; stroke-linecap: round; opacity: .85; }
.sg-arrow-tip { fill: var(--user); }

/* ========== 6. The seas ==========
   The flat view is plain DOM: two grids, the enemy sea and your own. The
   3D view is drawn by sea3d.js on a canvas on top; the grids then stay in
   the page, invisible, for screen readers and the keyboard. */

.board-wrap { position: relative; border-radius: var(--radius); }
/* the moment it becomes your shot, 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; }
}
.top-row { position: relative; }

.stage {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.gl .stage { aspect-ratio: 1 / 1.02; }

.sea-gl {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  transition: opacity .3s ease;
}
.gl .sea-gl, .morph .sea-gl { display: block; }
.flat .sea-gl { opacity: 0; pointer-events: none; }
.sea-gl.pointing { cursor: crosshair; }
.sea-gl.placing { cursor: copy; }
.gl .stage:has(.grid:focus-visible) .sea-gl { outline: 3px solid var(--cursor); outline-offset: 2px; }

/* the two flat seas: side by side when there is room, else stacked */
/* the two flat seas one above the other: the enemy's on top, like the lid */
.flat-seas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  transition: opacity .3s ease;
}
.flat .board-col { max-width: max(320px, calc((100svh - 150px) / 2.05)); }
.gl .flat-seas { position: absolute; inset: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.flat-sea { min-width: 0; }
.sea-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.flat-sea.active .sea-title { color: var(--ink); }
.flat-sea.active .sea-title::after { content: " ◂"; color: var(--marker); }

.grid {
  --n: 11;
  position: relative;
  display: grid;
  grid-template-columns: .7fr repeat(10, minmax(0, 1fr));
  grid-template-rows: .7fr repeat(10, minmax(0, 1fr));
  aspect-ratio: 10.7 / 10.7;
  container-type: inline-size;
}
.grid:focus-visible { outline: none; }
.grid:focus-visible::before {
  content: "";
  position: absolute;
  inset: calc(100% / 10.7 * .7 - 4px) -4px -4px calc(100% / 10.7 * .7 - 4px);
  border: 3px solid var(--cursor);
  border-radius: 12px;
  pointer-events: none;
}
.grid .hd {
  display: grid;
  place-items: center;
  font: 800 3.2cqi/1 var(--font-num);
  color: var(--muted);
}
/* the water: one panel behind the cells, with the frame and shadow */
.grid .water-bg {
  grid-column: 2 / -1;
  grid-row: 2 / -1;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--sea-shallow) 85%, #fff 15%), transparent 60%),
    linear-gradient(160deg, var(--sea-shallow), var(--sea-deep));
  box-shadow: 5px 5px 0 var(--ink);
}
.flat-sea.target .grid .water-bg {
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 9.5%, color-mix(in srgb, var(--radar) 18%, transparent) 9.5% 10%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--lid-line) 60%, var(--lid)), var(--lid));
}
.cell {
  position: relative;
  border-right: 1px solid color-mix(in srgb, var(--sea-line) 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--sea-line) 35%, transparent);
  cursor: pointer;
}
.flat-sea.target .cell { border-color: color-mix(in srgb, var(--lid-line) 55%, transparent); }
.cell.c9 { border-right: 0; }
.cell.r9 { border-bottom: 0; }
.cell:hover { background: color-mix(in srgb, var(--marker) 22%, transparent); }
.grid.locked .cell { cursor: default; }
.grid.locked .cell:hover { background: none; }

/* shots: a dot for water, a burning cross for a hit */
.cell.miss::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: var(--miss);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 60%, transparent);
}
.cell.hit::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 43%, #fff 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #fff 43% 57%, transparent 57%),
    radial-gradient(circle, #ffd45a 0 20%, var(--hit) 55%);
  box-shadow: 0 0 0 1.5px var(--ink), 0 0 2cqi color-mix(in srgb, var(--hit) 80%, transparent);
  z-index: 3;
}
.cell.sunk::after { box-shadow: 0 0 0 1.5px var(--ink); filter: saturate(.6) brightness(.85); }
.cell.water::before {
  content: "";
  position: absolute;
  inset: 44%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sea-line) 75%, transparent);
}
.cell.fresh::after { animation: land .45s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes land { from { transform: scale(2.2); opacity: 0; } }
.cell.last { box-shadow: inset 0 0 0 .5cqi var(--marker); }
.cell.cursor::before, .cell.hint::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 6px;
  z-index: 4;
}
.cell.cursor::before { border: .8cqi solid var(--cursor); }
.cell.hint::before { border: .8cqi dashed var(--user); animation: hint-pulse 1.2s ease-in-out infinite; }
@keyframes hint-pulse { 50% { transform: scale(.86); } }
/* placing: where the held ship would go */
.cell.ghost-ok { background: color-mix(in srgb, var(--ok) 55%, transparent); }
.cell.ghost-bad { background: color-mix(in srgb, var(--red) 55%, transparent); }

/* ships on the flat grids (own fleet, sunk enemies, everything at the end),
   drawn from above as SVG (shipShape in common.js) */
.ship {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
  pointer-events: none;
  transition: transform .2s;
}
.ship path { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ship .hull { fill: var(--ship); stroke: var(--ink); stroke-width: 2px; }
.ship .deck { fill: var(--ship-deck); stroke: color-mix(in srgb, var(--ink) 60%, transparent); stroke-width: 1px; }
.ship .gun { fill: none; stroke: var(--ink); stroke-width: 2px; }
.ship.sunk .hull { fill: color-mix(in srgb, var(--hit) 30%, var(--ship)); stroke-dasharray: 4 3; }
.ship.sunk { opacity: .85; }
/* the enemy's: sunk ones in the colour of fire, the rest (at the end) as dashed outlines */
.ship.enemy .hull { fill: color-mix(in srgb, var(--hit) 45%, transparent); stroke: var(--hit); stroke-dasharray: none; }
.ship.enemy .deck { fill: color-mix(in srgb, var(--hit) 70%, var(--ink)); }
.ship.enemy .gun { stroke: var(--hit); }
.ship.revealed .hull { fill: color-mix(in srgb, var(--ship) 30%, transparent); stroke: var(--ship); stroke-dasharray: 5 4; }
.ship.revealed .deck { fill: color-mix(in srgb, var(--ship) 55%, transparent); stroke: none; }
.ship.revealed .gun { stroke: var(--ship); }
.ship.lifted { transform: scale(1.04); filter: drop-shadow(0 4px 4px rgb(0 0 0 / .35)); }
.ship.lifted.ok .hull { fill: color-mix(in srgb, var(--ok) 55%, var(--ship)); }
.ship.lifted.bad .hull { fill: color-mix(in srgb, var(--red) 55%, var(--ship)); }

/* ========== 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) 92%, transparent);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  z-index: 5;
}
.cover.soft { background: color-mix(in srgb, var(--paper) 70%, transparent); font-weight: 700; border-style: dashed; }
/* the result: a card at the top of the panel, so the board with the
   revealed fleets stays in full view */
.result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 18px 18px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--paper-2);
  box-shadow: 5px 5px 0 var(--marker), 5px 5px 0 2px var(--ink);
}
.result .cover-title { font-size: clamp(32px, 4vw, 44px); animation: rise .45s cubic-bezier(.2, .9, .3, 1.3); }
.result .cover-time { font-size: 22px; }
.result .cover-note { margin: 2px 0 6px; font-size: 16px; }
.result .cover-small { margin: 4px 0 0; }
.result .cover-actions { justify-content: flex-start; margin-top: 6px; }

/* step 1: setting up the fleet – only your sea and the dock */
.step-place #p-top,
.step-place .panel > :not(#dock-block):not(#invite-block) { display: none !important; }
.step-place .panel { padding-top: 34px; }
/* placing in the flat view: only your own sea, the enemy's has nothing to show yet */
.step-place .flat-sea.target { display: none; }
.flat.step-place .board-col { max-width: max(320px, calc(100svh - 160px)); }
.dock-step { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dock-title { margin: -4px 0 0; font-size: 30px; line-height: 1.1; font-weight: 900; letter-spacing: -.03em; }
.dock-cancel { align-self: center; font-size: 15px; color: var(--muted); }
.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: 36ch; }
.cover-note.small { font-size: 15px; margin-top: -6px; }
.cover-small { margin: 10px 0 0; font-size: 15px; color: var(--muted); max-width: 42ch; }
.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: 100%; }
.copy-field { font: 600 14px var(--font); flex: 1; }
.token-big {
  flex: 1;
  font: 800 clamp(18px, 3vw, 24px)/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;
  white-space: nowrap;
}

/* a line across the top of the stage: what the game waits for */
.banner {
  position: absolute;
  left: 50%;
  top: 10px;
  translate: -50% 0;
  z-index: 4;
  max-width: calc(100% - 20px);
  padding: 6px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-2);
  font-weight: 800;
  font-size: 15px;
  box-shadow: 3px 3px 0 var(--ink);
  text-align: center;
  pointer-events: none;
}
.flat .banner { position: static; translate: none; margin: 0 auto 12px; width: fit-content; display: block; }

/* "Treffer!" / "Versenkt!" flies across the stage for a moment */
.big-word {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 4;
  translate: -50% -50%;
  font: 900 clamp(40px, 9vw, 96px)/1 var(--font);
  letter-spacing: -.05em;
  color: var(--paper-2);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--ink);
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
}
.big-word.show { animation: big-word 1.3s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.big-word.hit { color: var(--hit); }
.big-word.sunk { color: var(--marker); }
@keyframes big-word {
  0% { opacity: 0; transform: scale(.4) rotate(-8deg); }
  18% { opacity: 1; transform: scale(1.08) rotate(-3deg); }
  30% { transform: scale(1) rotate(-3deg); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04) rotate(-3deg) translateY(-12px); }
}

/* above the board, over the opponent's row; long ones grow upwards */
.toast {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
  width: max-content;
  padding: 8px 8px 8px 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[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); }
.toast.badge, .toast.sunk { background: var(--marker); color: var(--marker-ink); }
.toast.lost { background: var(--ink); color: var(--paper); }
/* why something is not allowed, with a link into the rulebook */
.toast.why {
  width: min(540px, 100%);
  border-radius: var(--radius);
  text-align: left;
  font-weight: 600;
  line-height: 1.4;
  padding: 10px 8px 10px 16px;
}
.toast-rule {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--user);
  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: 230px 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: 8px 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: 18px; }
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 (diagram.go; their colours are with the sea diagrams in section 5) */
.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: rolls in like a chart from the side */
.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(--sea-shallow) 60%, transparent);
}
.rulebook[open] {
  display: flex;
  flex-direction: column;
  transform-origin: 100% 50%;
  animation: rb-open .5s 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: translateX(40%) skewY(-2deg); opacity: .2; }
  to { transform: none; }
}
@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: 1000px) {
  .home-grid, .game { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .setup, .home-side { max-width: 660px; width: 100%; margin: 0 auto; }
  .board-col, .gl .board-col { max-width: 700px; width: 100%; margin: 0 auto; }
  .panel { padding-top: 0; max-width: 700px; width: 100%; margin: 0 auto; gap: 22px; }
  .error-page { grid-template-columns: 1fr; justify-items: start; }
  .err-sea { width: 230px; }
}

/* the nav gets a row of its own */
@media (max-width: 760px) {
  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: 22px; gap: 8px; }
  .wm-mark { width: 32px; height: 32px; }
  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; }
  .time-inputs { grid-template-columns: 1fr; }

  .gl .stage { aspect-ratio: 1 / 1.18; }
  .clock { font-size: 20px; min-width: 3.4em; }
  .pl-name { font-size: 16px; }
  .cover { padding: 14px; }
  .cover-note { font-size: 16px; }
  .copy-row { flex-direction: column; align-items: stretch; }
  .fleets { grid-template-columns: 1fr; }

  .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; }
}