/* ============================================================
   Emoji Match — shared styles for the standalone /privacy and
   /support pages.

   Deliberately NOT styles.css: those pages are plain documents
   with no game views, no board sizing, and no JS, so pulling in
   the full app stylesheet would drag along container queries and
   view state they never use. Palette is copied from styles.css
   so the pages still read as the same product.
   ============================================================ */

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/baloo2-latin.woff2") format("woff2");
}

:root {
  --night: #15122b;
  --night-2: #221d49;
  --edge: #3b3378;
  --cloud: #efecff;
  --dim: #a29ad1;
  --accent: #ff5e5b;
  --accent-2: #ffb03a;
  --display: "Baloo 2", "Trebuchet MS", sans-serif;
  --body: -apple-system, "Segoe UI", Roboto, sans-serif;

  color-scheme: dark;
  background-color: var(--night);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2.5rem 1.25rem 4rem;
  background: var(--night);
  color: var(--cloud);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.doc {
  max-width: 40rem;
  margin: 0 auto;
}

.doc-back {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--dim);
  font-size: 0.9rem;
  text-decoration: none;
}

.doc-back:hover,
.doc-back:focus-visible {
  color: var(--cloud);
}

h1 {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.15;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  margin: 2.5rem 0 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--cloud);
}

h3 {
  margin: 1.85rem 0 0.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--cloud);
}

.updated {
  margin: 0 0 2rem;
  color: var(--dim);
  font-size: 0.875rem;
}

.lede {
  margin: 0 0 2rem;
  font-size: 1.075rem;
  color: var(--cloud);
}

p {
  margin: 0 0 1rem;
  color: var(--cloud);
}

ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.6rem;
}

li::marker {
  color: var(--accent);
}

strong {
  font-weight: 700;
  color: #fff;
}

a {
  color: var(--accent-2);
  text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
  color: var(--accent);
}

.callout {
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--edge);
  border-radius: 0.85rem;
  background: var(--night-2);
}

.callout p:last-child {
  margin-bottom: 0;
}

footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--edge);
  color: var(--dim);
  font-size: 0.85rem;
}

footer a {
  color: var(--dim);
}