/* Shared styling for the legal pages.
   Deliberately self-contained: these pages must render correctly even if the
   game's stylesheet changes, and a court or a store reviewer should be able to
   read them on any device. Same LCD palette as the game so they do not feel
   bolted on, but none of its layout machinery.

   Press Start 2P is used only for the brand mark and headings. It is a pixel
   face with no lowercase depth and very wide advance - readable in short bursts,
   punishing in a paragraph - so body copy is Inter. */

:root {
  --page: #0f380f;
  --surface: #144714;
  --ink: #dff5b8;
  --muted: #8fb85f;
  --line: #2b6b2b;
  --accent: #8bac0f;
  --display: 'Press Start 2P', 'Courier New', monospace;
  --body: 'Inter', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --page: #f2f6e9;
    --surface: #ffffff;
    --ink: #14240d;
    --muted: #4d6b33;
    --line: #d7e3c4;
    --accent: #4e6b09;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px 72px;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 720px; margin: 0 auto; }

header.top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
header.top a.back {
  margin-left: auto;
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 12px;
  white-space: nowrap;
}
header.top a.back:hover { color: var(--ink); border-color: var(--muted); }

/* The snake: three body segments and a head, in the game's own colours. */
.mark { display: flex; gap: 3px; align-items: center; flex: 0 0 auto; }
.mark::before,
.mark::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--accent);
  opacity: .45;
}
.mark::after { opacity: 1; box-shadow: 13px 0 0 var(--accent); margin-right: 13px; }

.brandname {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .5px;
  color: var(--accent);
}

h1 { font-family: var(--display); font-size: 20px; line-height: 1.45; margin: 0 0 14px; }
h2 {
  font-family: var(--display);
  font-size: 13px;
  line-height: 1.6;
  margin: 34px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: 0; padding-top: 0; }
h3 { font-family: var(--display); font-size: 11px; line-height: 1.6; margin: 22px 0 6px; }

.dates { color: var(--muted); font-size: 14.5px; margin: 0 0 26px; }

.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 28px;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 10px; }

ul, ol { padding-left: 22px; }
li { margin: 6px 0; }

a { color: var(--accent); }

table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--body); font-size: 13.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
code { font-size: 14px; background: var(--surface); padding: 1px 5px; border-radius: 5px; word-break: break-all; }

footer.foot {
  margin-top: 46px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
footer.foot a { color: var(--muted); }

/* Tables are the first thing to break on a phone. */
@media (max-width: 520px) {
  body { font-size: 16px; }
  h1 { font-size: 16px; }
  h2 { font-size: 11.5px; }
  .brandname { font-size: 11px; }
  table, thead, tbody, tr, td, th { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  td { border: 0; padding: 2px 0; }
  td::before { content: attr(data-label) ": "; color: var(--muted); font-size: 13.5px; }
}