/* Fantastic Chess — legal + support pages.
   Loaded on top of site.css by privacy / terms / delete-account / support.
   Generated shell lives in build.mjs; this is the design's page-local <style>
   lifted into one shared file so the four pages can't drift apart. */

body.legal{ background:var(--parchment); color:var(--ink); font-family:'Fredoka', system-ui, sans-serif; }

/* top bar */
.legal-nav{ position:sticky; top:0; z-index:20; background:var(--grape); border-bottom:3px solid var(--grape-deep); }
.legal-nav .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; height:auto; }
.legal-nav .logo .wm{ color:#fff; }
.back-link{ display:inline-flex; align-items:center; gap:8px; color:#fff; text-decoration:none;
  font-family:'Lilita One', system-ui; font-size:14px; letter-spacing:.5px;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.25);
  padding:9px 16px; border-radius:12px; transition:background .15s; }
.back-link:hover{ background:rgba(255,255,255,.22); }

/* header */
.legal-head{ padding:64px 0 34px; text-align:center; }
.legal-head .eyebrow{ justify-content:center; }
.legal-head h1{ font-family:'Lilita One', system-ui; font-size:clamp(38px,6vw,60px);
  color:var(--grape); line-height:1.02; margin:6px 0 0; letter-spacing:.5px; }
.legal-head .updated{ margin-top:14px; color:var(--ink-soft); font-size:15px; }

/* document */
.legal-doc{ max-width:760px; margin:0 auto; padding:0 0 90px; }
.legal-card{ background:#fff; border:2.5px solid var(--grape); border-radius:26px;
  padding:44px 46px 48px; box-shadow:0 8px 0 rgba(60,42,110,.16); }
.legal-doc .intro{ font-size:17px; line-height:1.65; color:var(--ink); margin:0 0 6px; }
.legal-doc h2{ font-family:'Lilita One', system-ui; color:var(--grape);
  font-size:22px; letter-spacing:.3px; margin:34px 0 10px; display:flex; gap:12px; align-items:baseline; }
.legal-doc h2:first-of-type{ margin-top:26px; }
.legal-doc h2 .num{ flex:none; font-size:15px; color:#fff; background:var(--coral);
  border:2px solid var(--coral-deep); box-shadow:0 3px 0 var(--coral-deep);
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center; line-height:1; }
.legal-doc h3{ font-family:'Lilita One', system-ui; color:var(--grape);
  font-size:17.5px; letter-spacing:.2px; margin:24px 0 6px; }
.legal-doc p{ font-size:16px; line-height:1.65; color:var(--ink-soft); margin:0 0 12px; }
.legal-doc ul{ margin:0 0 14px; padding:0; list-style:none; display:grid; gap:11px; }
.legal-doc li{ position:relative; padding-left:26px; font-size:16px; line-height:1.6; color:var(--ink-soft); }
.legal-doc ul li::before{ content:''; position:absolute; left:6px; top:10px; width:8px; height:8px;
  border-radius:3px; background:var(--coral); transform:rotate(45deg); }
.legal-doc ol{ margin:0 0 14px; padding:0; list-style:none; counter-reset:step; display:grid; gap:11px; }
.legal-doc ol li{ counter-increment:step; padding-left:36px; }
.legal-doc ol li::before{ content:counter(step); position:absolute; left:0; top:1px;
  width:22px; height:22px; border-radius:7px; background:var(--sun); border:2px solid var(--sun-deep);
  color:#5B3D00; font-family:'Lilita One', system-ui; font-size:12px; display:grid; place-items:center; line-height:1; }
.legal-doc li strong, .legal-doc p strong{ color:var(--grape); font-weight:700; }
.legal-doc a{ color:var(--coral-deep); font-weight:600; }
.legal-doc a:hover{ color:var(--coral); }

/* chunky call-to-action inside a document (email support / deletion request) */
.legal-cta{ display:inline-flex; align-items:center; justify-content:center;
  font-family:'Lilita One', system-ui; font-size:17px; letter-spacing:.6px; color:#fff !important;
  height:50px; padding:0 24px; border-radius:16px; margin:6px 0 4px;
  border:2px solid var(--coral-deep);
  background:linear-gradient(180deg,#FF8163 0%, var(--coral) 55%, var(--coral-deep) 100%);
  box-shadow:0 5px 0 var(--coral-deep), 0 10px 18px rgba(224,74,42,.34), inset 0 2px 0 rgba(255,255,255,.4);
  text-shadow:0 2px 0 rgba(0,0,0,.18); transition:transform .12s ease, box-shadow .12s ease; }
.legal-cta:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--coral-deep), inset 0 2px 0 rgba(255,255,255,.4); }

/* warning callout */
.legal-box{ background:var(--parchment); border:2.5px solid var(--sun-deep); border-radius:18px;
  padding:22px 24px 6px; margin:22px 0 18px; box-shadow:0 4px 0 rgba(232,169,26,.25); }
.legal-box h3{ margin:0 0 8px; color:var(--grape); }

.legal-doc + .footer{ margin-top:0; }

@media (max-width:640px){
  .legal-card{ padding:30px 24px 34px; }
  .legal-head{ padding:44px 0 26px; }
  .legal-doc{ padding-bottom:60px; }
}