/* Shared shell for /privacy and /terms — 2026-08-05.
   Both pages used to be on their own dark-brown, Fredoka-typeset world while every other page on the
   site (index, status, appeal) was the daytime-overworld cream + Silkscreen language. One stylesheet
   for the twins, so the standing "keep PRIVACY and TERMS in sync" rule covers their look too. */
:root{
  --bg:#f6efdc; --surface:#fdf8ea; --surface2:#f0e8d2; --line:#e3d8bb; --line2:#d0c29a;
  --ink:#2c2414; --body:#5d5338; --mut:#8b7f5f;
  --y:#ffcb05; --y2:#ffdb4d; --on-y:#2a1d00; --gold:#9b7100;
  --dlg:#171d3a; --dlg-line:#e8ecf8;
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --sh-sm:0 16px 30px -20px rgba(70,55,20,.25);
  --disp:"Silkscreen",system-ui,sans-serif; --body-f:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body-f);background:var(--bg);color:var(--body);line-height:1.75;font-weight:500;
  -webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--gold);font-weight:700}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--dlg);outline-offset:3px;border-radius:8px}

/* ~70 characters of measure at the body size, which is where a long policy stays readable */
.wrap{max-width:772px;margin:0 auto;padding:38px 24px 84px}
.top{font-size:.9rem;margin-bottom:24px}
.top a{color:var(--mut);text-decoration:none}
.top a:hover{color:var(--ink)}

/* the games' dialogue box, as the page header — same motif as /appeal */
.dlg{background:var(--dlg);border:3px solid var(--dlg-line);border-radius:12px;padding:18px 22px;color:#fff;
  box-shadow:0 6px 0 rgba(23,29,58,.3)}
.dlg h1{font-family:var(--disp);font-weight:400;font-size:clamp(1.15rem,3.6vw,1.5rem);line-height:1.3;color:#fff;letter-spacing:0}
.dlg h1::after{content:"▾";margin-left:10px;color:var(--y2);animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.dlg h1::after{animation:none}}
.stamp{margin:14px 2px 26px;color:var(--mut);font-size:.9rem;font-weight:700}

/* contents — a long policy is a reference document, so let people jump. Two columns on a wide screen;
   on a phone it collapses (see the inline script) so fifteen links do not eat the whole first screen. */
.toc{background:var(--surface2);border:2px solid var(--line);border-radius:16px;padding:16px 22px;margin-bottom:26px}
.toc summary{list-style:none;cursor:pointer;font-family:var(--disp);font-weight:400;font-size:.8rem;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--gold);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"+";font-family:var(--body-f);font-size:1.4rem;line-height:1;transition:transform .2s var(--bounce)}
.toc[open] summary::after{transform:rotate(45deg)}
.toc ol{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 22px;counter-reset:s;margin-top:10px}
.toc li{counter-increment:s}
.toc a{display:block;padding:3px 0;font-size:.92rem;font-weight:600;color:var(--body);text-decoration:none}
.toc a::before{content:counter(s) ". ";color:var(--mut);font-weight:700}
.toc a:hover{color:var(--ink)}
@media(max-width:620px){.toc ol{grid-template-columns:1fr}}

.doc{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:32px 34px;box-shadow:var(--sh-sm)}
.doc > p + p,.doc > ul + p{margin-top:14px}
.doc h2{font-family:var(--body-f);font-weight:800;color:var(--ink);font-size:1.16rem;line-height:1.35;
  margin:36px 0 10px;scroll-margin-top:20px}
.doc h2:first-of-type{margin-top:28px}
.doc b{color:var(--ink)}
.doc ul{margin:12px 0 0 4px;padding-left:20px}
.doc li{margin:7px 0}
.doc li::marker{color:var(--line2)}
code{background:var(--surface2);border:1px solid var(--line);padding:1px 7px;border-radius:7px;color:var(--gold);
  font-weight:700;font-size:.9em}
hr{border:none;border-top:2px solid var(--line);margin:34px 0 20px}
.disc{color:var(--mut);font-size:.83rem;line-height:1.65;text-align:center;margin-top:26px}
.disc a{color:var(--mut)}

@media(max-width:600px){
  .wrap{padding:28px 16px 64px}
  .doc{padding:24px 22px;border-radius:16px}
}