/* Styles for the static legal pages (privacy.html; the impressum in legal/ uses it too). Same look as the game, no build step. */
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('/fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url('/fonts/dm-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-weight: 500; font-display: swap; src: url('/fonts/dm-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --bg: #f4efe4; --surface: #fffdf7; --ink: #1b2540; --text: #1b2540; --muted: #565e75; --line: #1b2540; --shadow: #1b2540;
  --page-grid: rgba(226, 104, 36, 0.07); --cobalt: #2447d8; --lime: #cdf03a; --btn-bg: #1b2540; --btn-fg: #cdf03a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0b2350; --surface: #113067; --ink: #eaf1ff; --text: #eaf1ff; --muted: #b7c7ee; --line: #eaf1ff; --shadow: #051330;
    --page-grid: rgba(200, 222, 255, 0.05); --cobalt: #7fd4ff; --lime: #d7f23c; --btn-bg: #d7f23c; --btn-fg: #0b2350;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0b2350; --surface: #113067; --ink: #eaf1ff; --text: #eaf1ff; --muted: #b7c7ee; --line: #eaf1ff; --shadow: #051330;
  --page-grid: rgba(200, 222, 255, 0.05); --cobalt: #7fd4ff; --lime: #d7f23c; --btn-bg: #d7f23c; --btn-fg: #0b2350;
}

* { box-sizing: border-box; }
html, body { background-color: var(--bg); color: var(--text); }
body {
  margin: 0; min-height: 100vh; font: 400 16px/1.6 'DM Sans', system-ui, sans-serif;
  background-image: linear-gradient(var(--page-grid) 1px, transparent 1px), linear-gradient(90deg, var(--page-grid) 1px, transparent 1px);
  background-size: 20px 20px;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; }
.wm { display: flex; gap: 3px; margin: 0; text-decoration: none; }
.wm span {
  display: flex; align-items: center; justify-content: center; width: 20px; height: 26px;
  font: 700 15px/1 'Space Grotesk', system-ui, sans-serif; color: var(--ink);
  background: var(--surface); border: 2px solid var(--line); border-radius: 5px; box-shadow: 2px 2px 0 var(--shadow);
}
.wm span.on { background: var(--btn-bg); color: var(--btn-fg); }
a.back, .lang a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font: 700 14px 'Space Grotesk', system-ui, sans-serif;
  color: var(--text); text-decoration: none; background: var(--surface); border: 2px solid var(--line); border-radius: 10px; box-shadow: 2px 2px 0 var(--shadow);
}
.lang { display: flex; gap: 8px; margin: 0 0 16px; }
main.card { background: var(--surface); border: 2px solid var(--line); border-radius: 12px; box-shadow: 4px 4px 0 var(--shadow); padding: 22px 22px 8px; margin-bottom: 20px; }
h1, h2, h3 { font-family: 'Space Grotesk', system-ui, sans-serif; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 30px; margin: 0 0 4px; }
h2 { font-size: 20px; margin: 26px 0 6px; }
.eyebrow { font: 500 12px 'DM Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
p, ul { margin: 0 0 12px; }
ul { padding-left: 22px; }
a { color: var(--text); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--cobalt); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.todo { background: var(--lime); color: #1b2540; padding: 0 5px; border-radius: 3px; font-weight: 700; }
.muted { color: var(--muted); font-size: 14px; }
hr { border: 0; border-top: 2px dashed var(--line); margin: 28px 0 8px; opacity: 0.4; }
footer.bottom { font-size: 13px; color: var(--muted); }
footer.bottom a { color: var(--muted); }
@media (max-width: 480px) { main.card { padding: 18px 16px 4px; } h1 { font-size: 26px; } }