/* THE LEGAL PAGES (/privacy, /terms) in the game's v2 look. Only the styling
 * lives here: the words in privacy.html and terms.html are the legal text and
 * are edited there, on purpose, never through CSS. The home page has its own
 * sheet (home.css). */

@font-face { font-family: 'Lilita One'; src: url('/fonts/lilita-one.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Baloo 2'; src: url('/fonts/baloo2-800.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --disp: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  --body: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
  --ink: #1c1a33; --dim: #d3d6ec; --gold-text: #ffd84a;
  --bg: #23263d; --bg-deep: #1a1c2f; --panel: #2f3352; --panel-hi: #3b4066;
  --purple: #9a6bff; --purple-lo: #5a2fcf; --purple-edge: #2b166e;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg-deep); }
body {
  margin: 0; min-height: 100vh; color: #fff; font: 700 18px/1.55 var(--body);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 14px, transparent 14px 28px),
    radial-gradient(120% 60% at 50% 0%, #34386a 0%, var(--bg) 45%, var(--bg-deep) 100%);
  background-attachment: fixed;
}
.wrap {
  max-width: 780px; margin: 24px auto 40px; padding: 26px 22px 30px;
  background: linear-gradient(var(--panel-hi), var(--panel));
  border: 3px solid var(--ink); border-radius: 24px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 6px 0 var(--ink);
}
@media (max-width: 820px) { .wrap { margin: 12px 12px 30px; } }
header { margin-bottom: 10px; }
.mark { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 400 24px/1 var(--disp); }
.mark img { width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--ink); }
.mark b { font-weight: 400; }
h1 {
  width: fit-content; margin: 18px 0 6px; padding: 8px 26px 10px;
  font: 400 38px/1 var(--disp); color: #fff;
  border: 3px solid var(--ink); border-radius: 18px;
  background: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 48%), linear-gradient(var(--purple), var(--purple-lo));
  box-shadow: inset 0 -5px 0 var(--purple-edge), 0 5px 0 var(--ink);
  text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink), 0 2px 0 var(--ink);
}
h2 { margin: 30px 0 8px; font: 400 26px/1.15 var(--disp); color: var(--gold-text); }
p, li { color: var(--dim); }
strong { color: #fff; }
ul { padding-left: 1.2em; }
li { margin: 4px 0; }
a { color: var(--gold-text); }
.updated { margin: 8px 0 18px; font-size: 15px; color: #aeb3d6; }
.callout { padding: 12px 16px; border-radius: 14px; background: rgba(10, 12, 28, .35); border: 2px solid var(--ink); }
footer { margin-top: 32px; padding-top: 16px; border-top: 2px solid rgba(255, 255, 255, .1); font-size: 15px; color: #aeb3d6; }
footer a { color: #fff; }