/* =========================================================================
   LEGAL PAGES — terms.html, privacy.html, refunds.html
   =========================================================================

   THESE ARE NOT SCREENS, AND THAT IS DELIBERATE.

   Everything else this product shows lives inside one document and is drawn
   by JavaScript. These three do not. They are three separate static HTML
   files, served directly, readable with every script blocked — because the
   people who read them are not always players. A payment provider verifying
   the site, a card issuer working a dispute, a browser's reader mode and a
   regulator all want a URL that answers with the words on it, not with a
   loader that then fetches them. An SPA screen would have made the terms of
   sale depend on twenty-one script tags executing in order, which is a
   strange thing to make a refund policy depend on.

   So there is no js/screen-legal.js, no entry in SCREENS or MODULES, and no
   .mount. What there IS: a rewrite per path in vercel.json (and its mirror in
   tests/server.js), exactly as §5 of the house style demands of any real
   path, because an unrewritten /terms is a 404 from the edge and this is the
   one link on the site that must never be broken.

   LOAD ORDER. Each page links styles.css and then this file, and nothing
   else. It reads the :root tokens, the body sky, .eyebrow, .hint, .num,
   .sr-only, .skip-link and .panel from styles.css and adds only what a
   document of prose needs on top. It is NOT linked from index.html, so the
   "styles/board.css must be last" rule is untouched — this file and that one
   never appear in the same cascade.

   SCOPE. Every selector below starts at .legal. Same contract as a screen
   file: nothing here may land on the app.

   THEME. Dark only. The theme, contrast and text-size swaps in §3 of the
   house style are body classes written by js/app.js, and js/app.js does not
   run here. Rather than ship a preferences system to three static pages,
   these use the default night palette and inherit nothing that needs
   toggling — every colour below is a token, so the day the pages do get a
   theme they will follow it without an edit.
   ========================================================================= */

.legal{
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:var(--s5);
  padding:var(--s4) var(--s4) var(--s7);
}

/* ---- top bar ------------------------------------------------------------
   Not .nav. The app's bar carries screens, an account chip and a coin
   balance, none of which exist on a page you can read signed out. This is a
   way back to the game and a way between the three documents. */
.legal-top{
  width:100%;max-width:var(--page);margin-inline:auto;
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
}
.legal-brand{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-weight:800;font-size:var(--t-lg);letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;
}
/* The CR monogram, reused from favicon.svg rather than added to the sprite —
   these pages never load index.html, so there is no <defs> to <use> from. */
.legal-brand img{width:24px;height:24px;flex:none;border-radius:7px}
.legal-nav{display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap;margin-inline-start:auto}
.legal-nav a{
  display:inline-flex;align-items:center;
  padding:var(--s1) var(--s3);min-height:32px;
  border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:600;
  color:var(--ink-2);text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
/* the page you are on is a state, not a link that happens to be styled */
.legal-nav a[aria-current="page"]{background:var(--surface-2);color:var(--ink);box-shadow:var(--edge)}
.legal-nav a:focus-visible{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .legal-nav a:hover{background:var(--surface);color:var(--ink)}
  .legal-brand:hover{color:var(--brand)}
}

/* ---- the document -------------------------------------------------------
   One .panel and nothing bordered inside it — SURFACE RULE. Sections are
   divided by space and by the hairline on each h2, never by a second box. */
.legal-doc{
  width:100%;max-width:var(--page);margin-inline:auto;
  padding:var(--s6) clamp(var(--s4),4vw,var(--s6));
}
.legal-head{margin-bottom:var(--s5)}
.legal-head h1{
  font-size:var(--t-3xl);font-weight:800;letter-spacing:-.02em;line-height:1.12;
  margin-block:var(--s2) var(--s2);text-wrap:balance;
}
.legal-updated{font-size:var(--t-xs);color:var(--ink-3)}

/* Contents. A list of links, hairline-separated from the prose below it —
   not a card, per the surface rule. */
.legal-toc{
  margin:var(--s5) 0 0;padding:var(--s4) 0 0;
  border-top:1px solid var(--line-soft);
}
.legal-toc h2{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:var(--s2)}
.legal-toc ol{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--s1) var(--s4);counter-reset:toc;
}
.legal-toc li{counter-increment:toc;font-size:var(--t-sm)}
.legal-toc li::before{content:counter(toc) ". ";color:var(--ink-3);font-variant-numeric:tabular-nums}
.legal-toc a{color:var(--ink-2);text-decoration:none}
.legal-toc a:focus-visible{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .legal-toc a:hover{color:var(--brand)} }

/* ---- prose --------------------------------------------------------------
   65ch is the measure; --page is the container. The two are different jobs
   and the narrower of them wins for text. */
.legal-body{max-width:65ch}
.legal-body h2{
  font-size:var(--t-xl);font-weight:700;letter-spacing:-.01em;line-height:1.25;
  margin-block:var(--s6) var(--s3);padding-top:var(--s4);
  border-top:1px solid var(--line-soft);
  scroll-margin-top:var(--s4);
}
.legal-body h3{font-size:var(--t-md);font-weight:700;margin-block:var(--s4) var(--s2)}
.legal-body p{margin-block:var(--s3);color:var(--ink-2);text-wrap:pretty}
.legal-body p:first-child{margin-top:0}
.legal-body strong{color:var(--ink);font-weight:700}
.legal-body ul{margin-block:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.legal-body li{
  position:relative;padding-inline-start:var(--s4);
  color:var(--ink-2);text-wrap:pretty;
}
.legal-body li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--line-strong);
}
.legal-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover) and (pointer:fine){ .legal-body a:hover{color:var(--ink)} }

/* The lead paragraph — the one-sentence answer above the clauses. */
.legal-lead{font-size:var(--t-lg);line-height:1.45;color:var(--ink) !important;text-wrap:pretty}

/* A price/term table without a table: hairline rows, same as .facts. */
.legal-rows{margin-block:var(--s4);display:flex;flex-direction:column}
.legal-rows > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s2) 0;border-bottom:1px solid var(--line-soft);
  font-size:var(--t-sm);
}
.legal-rows > div:first-child{border-top:1px solid var(--line-soft)}
.legal-rows dt,.legal-rows > div > span:first-child{color:var(--ink-2)}
.legal-rows b{color:var(--ink);font-weight:700}

/* ---- page foot ---------------------------------------------------------- */
.legal-foot{
  width:100%;max-width:var(--page);margin-inline:auto;margin-top:auto;
  padding-top:var(--s4);border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  font-size:var(--t-xs);color:var(--ink-3);
}
.legal-foot a{color:var(--ink-2);text-decoration:none}
.legal-foot a:focus-visible{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .legal-foot a:hover{color:var(--brand)} }

/* ---- responsive --------------------------------------------------------- */
@media (max-width:560px){
  .legal{padding:var(--s3) var(--s3) var(--s6);gap:var(--s4)}
  .legal-doc{padding:var(--s5) var(--s4)}
  .legal-head h1{font-size:var(--t-2xl)}
  .legal-nav{margin-inline-start:0;width:100%}
  /* Two columns, not the auto-fill grid: at 390px `minmax(240px,1fr)` gives
     one column, and fifteen rows of contents is the entire first screen of a
     phone — you arrive at a Terms page and cannot see a single term. Halving
     it puts the lead paragraph back above the fold. */
  .legal-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s3)}
  .legal-toc li{font-size:var(--t-xs)}
}

/* This file sets its own control heights, so it owes its own coarse block —
   §7 of the house style.

   THE CONTENTS LINKS ARE DELIBERATELY NOT 44px, and this is the only opt-out
   in the file. 44px is the rule for a CONTROL: the nav pills and the footer
   links below take it in full. A table of contents is fifteen short text
   links in a list, and at 44px apiece it becomes taller than the document it
   indexes — which is how a helpful index turns into the thing standing
   between a reader and the terms. They get 32px, comfortably above the 24px
   WCAG 2.2 target-size minimum, and they are one scroll away from the same
   headings anyway. */
@media (pointer:coarse){
  .legal-nav a{min-height:44px;padding-inline:var(--s4)}
  .legal-foot a{display:inline-flex;align-items:center;min-height:44px}
  .legal-toc a{display:inline-flex;align-items:center;min-height:32px}
}

@media print{
  .legal-top,.legal-nav,.skip-link{display:none}
  .legal-doc{border:0;box-shadow:none;background:none;padding:0;max-width:none}
  .legal-body{max-width:none}
}