/* Shared by every page. Same three faces and palette as the game, so the
   site and the app read as one thing. */
:root {
  --bg:#F4F3FA; --surface:#FFFFFF; --border:rgba(0,0,0,0.10);
  --text-hi:#0D0C18; --text-mid:#3C3A58; --text-lo:#7A789A;
  --brand-a:#D81450; --brand-b:#7B5CF0; --brand-accent:#D69C14;
  --font-display:'Fraunces',Georgia,serif;
  --font-ui:'Libre Franklin','Helvetica Neue',Arial,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#05050C; --surface:#121120; --border:rgba(255,255,255,0.12);
    --text-hi:#F2F1FA; --text-mid:#C3C0DA; --text-lo:#8F8CB0;
    --brand-a:#FF2D64; --brand-b:#A78BFA; --brand-accent:#FFC43C;
  }
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text-hi);
  font-family:var(--font-ui); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:660px; margin:0 auto; padding:40px 20px 80px; }
header.site { display:flex; align-items:baseline; gap:14px; margin-bottom:34px; flex-wrap:wrap; }
.mark {
  font-family:var(--font-display); font-size:23px; font-weight:600;
  letter-spacing:-0.01em; text-decoration:none;
  background:linear-gradient(95deg,var(--brand-a),var(--brand-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
header.site nav { margin-left:auto; display:flex; gap:18px; }
header.site nav a { font-size:13px; color:var(--text-lo); text-decoration:none; }
header.site nav a:hover { color:var(--text-hi); }
h1 { font-family:var(--font-display); font-size:clamp(28px,6vw,40px); font-weight:600;
     line-height:1.15; margin:0 0 6px; text-wrap:balance; }
.updated { font-size:13px; color:var(--text-lo); margin:0 0 34px; }
h2 { font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:0.1em;
     text-transform:uppercase; color:var(--text-lo); margin:40px 0 10px; }
h3 { font-size:16px; font-weight:700; margin:26px 0 4px; color:var(--text-hi); }
p, li { color:var(--text-mid); }
p { margin:0 0 14px; }
ul { padding-left:20px; margin:0 0 14px; }
li { margin-bottom:5px; }
a { color:var(--brand-b); }
strong { color:var(--text-hi); }
.lede { font-size:17px; color:var(--text-mid); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px;
        padding:18px 20px; margin:0 0 14px; }
.mail { font-family:var(--font-display); font-size:19px; font-weight:600; word-break:break-all; }
footer.site { margin-top:56px; padding-top:20px; border-top:1px solid var(--border);
              font-size:13px; color:var(--text-lo); display:flex; gap:18px; flex-wrap:wrap; }
footer.site a { color:var(--text-lo); }