/* BigJoker — the pages of words (privacy, terms, help, deleting an
   account), in the site's own look. Their text is the game's own, written
   by tool/legal_pages.py. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; background: #0b0520; color: #fff;
  background-image: radial-gradient(70% 420px at 50% 0, rgba(124, 77, 255, 0.28), transparent 70%);
  background-repeat: no-repeat;
  font: 500 17px/1.65 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 800px; margin: 0 auto; padding: 26px 20px 80px; }
header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { font: 900 26px/1 'Fraunces', serif; color: #fff; text-decoration: none; }
.brand b { font-weight: 900; color: #ffc53d; }
.langs { margin-left: auto; display: flex; padding: 3px; border-radius: 99px; background: rgba(20, 8, 56, 0.6); border: 1px solid rgba(156, 124, 255, 0.28); }
.langs button {
  font: 800 13px 'Nunito', sans-serif; color: #b7a6f2; background: transparent; border: 0; border-radius: 99px; padding: 6px 13px; cursor: pointer;
}
.langs button.on { color: #2b1200; background: linear-gradient(#fff36a, #fcae14); }
h1 {
  margin: 40px 0 4px; font: 900 clamp(32px, 6vw, 52px) / 1.05 'Fraunces', serif; letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffe27a, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 { margin: 34px 0 6px; font: 900 21px/1.25 'Nunito', sans-serif; color: #fff; }
p, li { color: #d9d0f7; }
p { margin: 10px 0; }
ul { padding-left: 22px; }
li { margin: 6px 0; }
.muted { color: #b7a6f2; font-size: 14.5px; }
a { color: #ffc53d; }
nav.links {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(156, 124, 255, 0.28);
  display: flex; gap: 10px 24px; flex-wrap: wrap; font: 800 15px 'Nunito', sans-serif;
}
nav.links a { color: #d9d0f7; text-decoration: none; }
nav.links a:hover { color: #ffc53d; }
[data-lang] { display: none; }
[data-lang].on { display: block; }
:focus-visible { outline: 3px solid #ffc53d; outline-offset: 3px; border-radius: 8px; }