/* The legal pages (impressum.html, datenschutz.html; launch prep 21 Oct; English with a German switch since 25 Oct): static pages next to the game, its faces and colours,
   everything from this origin (tools/third-party-check.mjs). Dark like the game. */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(fonts/unbounded-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700-latin.woff2) format('woff2'); }
:root {
  color-scheme: dark;
  --ink: #0b0a14; --ink-3: #1f1c3d; --paper: #f6f3ea; --paper-dim: #c9c5d8; --volt: #d4ff3a;
  --display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --body: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 500 19px/1.45 var(--body); }
main { max-width: 720px; margin: 0 auto; padding: 28px 16px 64px; }
.top { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; margin-bottom: 36px; }
.mark { font: 900 18px/1 var(--display); letter-spacing: .01em; color: var(--paper); text-decoration: none; }
.mark span { color: var(--volt); }
/* the language switch (25 Oct): legal.js sets html[data-lang] before the page paints and the CSS shows that text only; without the
   script the switch hides and both texts show, English first */
.switch { display: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ink-3); }
html[data-lang] .switch { display: flex; }
.switch button { min-width: 52px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--paper-dim); font: 700 15px/1 var(--body); letter-spacing: .12em; cursor: pointer; transition: background-color .15s, color .15s; }
.switch button[aria-pressed="true"] { background: var(--volt); color: var(--ink); }
.switch button:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
@media (pointer: coarse) { .switch button { min-height: 48px; } }
html[data-lang="en"] .l[lang="de"], html[data-lang="de"] .l[lang="en"] { display: none; }
html:not([data-lang]) .l + .l { margin-top: 56px; padding-top: 8px; border-top: 2px solid var(--ink-3); }
h1 { margin: 0 0 8px; font: 800 clamp(30px, 7vw, 46px)/1.05 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.lede { margin: 0 0 12px; color: var(--paper-dim); text-wrap: pretty; }
h2 { margin: 40px 0 10px; font: 700 17px/1.25 var(--display); letter-spacing: .02em; color: var(--volt); }
h3 { margin: 22px 0 6px; font: 700 19px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; }
p, ul { margin: 0 0 12px; text-wrap: pretty; }
ul { padding-left: 20px; }
li { margin-bottom: 4px; }
address { font-style: normal; margin: 0 0 12px; }
a { color: var(--volt); text-underline-offset: 3px; overflow-wrap: anywhere; }
b { font-weight: 700; }
.note { margin: 0 0 32px; font-size: 16px; color: var(--paper-dim); }
.foot { margin-top: 56px; padding-top: 16px; border-top: 2px solid var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 16px; color: var(--paper-dim); }