/*
  Shared styling for the public pages: the landing page, the privacy policy, the terms, and
  the account deletion request form.

  Colours are lifted from MetaPalette.Dark, the same source the auth handler uses, so every
  page a player reaches from the game or the store listing looks like it came from the game.

  No fonts are loaded and no scripts run here. These pages are read by store reviewers on
  unpredictable connections and by players who are already annoyed about something; the
  fewer things that can fail to load, the better.
*/

:root {
  --bg-top:         #0e101f;
  --bg-bottom:      #080912;
  --surface:        #1b2037;
  --surface-raised: #252b47;
  --text:           #f8faff;
  --text-muted:     #909cbf;
  --accent:         #7c6df5;
  --accent-deep:    #5245d4;
  --success:        #2ec782;
  --rule:           #2c3352;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 80px;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom)) no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font: 400 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.page { max-width: 680px; margin: 0 auto; }

/* ── header ─────────────────────────────────────────────────── */

header {
  padding: 44px 0 26px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 34px;
}

.brand {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

nav { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 18px; }

nav a {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

nav a:hover, nav a:focus-visible { color: var(--text); border-bottom-color: var(--accent); }
nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* ── type ───────────────────────────────────────────────────── */

h1 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

h2 {
  font-size: 19px;
  line-height: 1.3;
  margin: 40px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

h2:first-of-type { border-top: none; padding-top: 0; }

h3 { font-size: 16px; margin: 26px 0 8px; color: var(--text); }

p, li { color: var(--text-muted); }
p { margin: 0 0 15px; }
strong { color: var(--text); font-weight: 600; }
ul, ol { margin: 0 0 15px; padding-left: 22px; }
li { margin-bottom: 7px; }

.updated {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 30px;
}

a { color: var(--accent); }
a:hover { color: var(--text); }

.lede {
  font-size: 17.5px;
  color: var(--text);
  margin-bottom: 26px;
}

.note {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 16px 18px;
  margin: 0 0 24px;
}

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

/* ── landing tiles ──────────────────────────────────────────── */

.tiles { display: grid; gap: 12px; margin: 28px 0 0; }

.tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.tile:hover, .tile:focus-visible { background: var(--surface-raised); border-color: var(--accent); }
.tile b { display: block; color: var(--text); font-size: 16.5px; margin-bottom: 4px; }
.tile span { color: var(--text-muted); font-size: 14.5px; }

/* ── deletion form ──────────────────────────────────────────── */

.steps { counter-reset: step; list-style: none; padding: 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 40px;
  margin-bottom: 18px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mailto {
  display: inline-block;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 10px;
  margin: 6px 0 10px;
}

.mailto:hover, .mailto:focus-visible { color: #fff; filter: brightness(1.1); }

.address {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 10px 13px;
  display: inline-block;
  word-break: break-all;
}

/* ── footer ─────────────────────────────────────────────────── */

footer {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--text-muted);
}

footer a { color: var(--text-muted); }
footer a:hover { color: var(--text); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 520px) {
  body { padding: 0 16px 60px; }
  h1 { font-size: 25px; }
  header { padding-top: 32px; }
}