/* Shared look for the plain text pages (privacyPolicy.html and friends).
   The game library keeps its own styles inside index.html, so a theme
   change there needs repeating in :root here. See "Adding a page" in the
   README. */

:root {
  --grad-top: #111478;
  --grad-bottom: #da7c81;
  --ink: #242023;
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, .74);
  --panel: rgba(24, 22, 42, .58);
  --hairline: rgba(255, 255, 255, .38);
  --radius: 7.33px;
  --shadow-lg: -6.01px 4.21px 1.83px var(--ink);
  --shadow-sm: -2.6px 1.9px 1.1px rgba(36, 32, 35, .85);
  --edge: clamp(20px, 5vw, 60px);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 300 16px/1.75 "Lexend Deca", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: url(pattern.svg) fixed, linear-gradient(var(--grad-top) 1%, var(--grad-bottom) 100%) fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- header ---------- */

.site-header {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 34px var(--edge) 26px;
}

.titles { display: flex; flex-direction: column; gap: 2px; }

.wordmark {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  text-shadow: var(--shadow-lg);
}

.tagline {
  margin: 0;
  font-size: 14px;
  color: var(--text-dim);
}

.site-header .spacer { flex: 1 1 auto; }

.btn {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--text);
  border-color: var(--text);
  color: var(--grad-top);
  outline: none;
}

/* ---------- page body ---------- */

main {
  width: min(820px, calc(100% - 2 * var(--edge)));
  margin: 6px auto 72px;
  padding: 30px clamp(20px, 4vw, 44px) 36px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--panel);
  backdrop-filter: blur(6px);
}

main h1 {
  margin: 0 0 4px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: var(--shadow-sm);
}

main h2 {
  margin: 32px 0 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

main h3 {
  margin: 24px 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

main p, main ul { margin: 0 0 14px; }

main ul { padding-left: 22px; }

main li { margin-bottom: 8px; }

main strong { font-weight: 700; }

/* Long URLs in the legal text would otherwise push the page sideways. */
main a { overflow-wrap: anywhere; }

/* Anchor targets land clear of the top edge of the window. */
main [id] { scroll-margin-top: 16px; }

.updated {
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--text-dim);
}

.toc { padding-left: 0; list-style: none; }

.toc li { margin-bottom: 4px; }

/* Wide tables scroll inside the panel on a phone, not the whole page. */
.table-wrap {
  margin: 0 0 14px;
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}

th, td {
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

th { font-weight: 700; }

.credit {
  margin: 32px 0 0;
  font-size: 13px;
  color: var(--text-dim);
}

/* ---------- footer ---------- */

footer {
  padding: 26px var(--edge) 46px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: var(--text-dim);
  font-size: 13px;
}

@media (max-width: 760px) {
  .wordmark { font-size: 27px; }
  main h1 { font-size: 26px; }
}