/* Shared shell for Sporeline's public legal documents. These pages are static so
   they keep working when the game client is unavailable, and they do not load
   the game's stylesheets or scripts. */

:root {
  color-scheme: dark;
  --ink: #e9f7f7;
  --muted: #a8c3c5;
  --faint: #7f9b9e;
  --gold: #f0d08b;
  --cyan: #8be9f2;
  --line: rgba(139, 233, 242, 0.16);
  --panel: rgba(7, 20, 23, 0.78);
  --bg: #040a0c;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body.legal-page {
  min-width: 280px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(80% 55% at 84% -10%, rgba(240, 208, 139, 0.09), transparent 68%),
    radial-gradient(70% 55% at -10% 18%, rgba(63, 201, 207, 0.08), transparent 66%),
    linear-gradient(180deg, #061114 0%, #040a0c 50%, #030708 100%);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.legal-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    radial-gradient(circle at 16% 14%, rgba(240, 208, 139, 0.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 24%, rgba(139, 233, 242, 0.6) 0 1px, transparent 1.6px),
    radial-gradient(circle at 68% 76%, rgba(240, 208, 139, 0.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 30% 88%, rgba(139, 233, 242, 0.4) 0 1px, transparent 1.6px);
  background-size: 240px 210px, 300px 260px, 270px 310px, 330px 270px;
}

.legal-shell {
  position: relative;
  z-index: 1;
  width: min(1060px, calc(100% - 44px));
  margin: 0 auto;
}

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--line);
}

.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.26em;
}

.legal-mark {
  position: relative;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(240, 208, 139, 0.8);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 247, 220, 0.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 68% 66%, rgba(139, 233, 242, 0.75) 0 1.5px, transparent 2px),
    rgba(240, 208, 139, 0.07);
  box-shadow: 0 0 18px rgba(240, 208, 139, 0.2);
}

.legal-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.legal-nav a {
  color: var(--faint);
  text-decoration: none;
  transition: color 160ms ease;
}

.legal-nav a:hover,
.legal-nav a:focus-visible,
.legal-nav a[aria-current="page"] {
  color: var(--gold);
}

.legal-main {
  padding: clamp(44px, 8vw, 96px) 0 72px;
}

.legal-eyebrow {
  margin: 0 0 14px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.legal-title {
  max-width: 880px;
  margin: 0;
  font-size: clamp(44px, 8vw, 92px);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: #f3fcfc;
}

.legal-lede {
  max-width: 680px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.65;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 24px;
  margin-top: 22px;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.legal-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: start;
  gap: clamp(34px, 6vw, 76px);
  margin-top: clamp(36px, 6vw, 62px);
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.legal-toc {
  position: sticky;
  top: 24px;
  padding: 18px 18px 20px;
  border: 1px solid rgba(139, 233, 242, 0.12);
  border-radius: 12px;
  background: rgba(4, 13, 15, 0.62);
}

.legal-toc-label {
  display: block;
  margin-bottom: 12px;
  color: var(--gold);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.legal-toc ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: legal-toc;
}

.legal-toc li {
  counter-increment: legal-toc;
}

.legal-toc a {
  display: flex;
  gap: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 11.5px;
  line-height: 1.45;
  transition: color 160ms ease;
}

.legal-toc a::before {
  content: counter(legal-toc, decimal-leading-zero);
  flex: 0 0 18px;
  color: rgba(240, 208, 139, 0.5);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: var(--ink);
}

.legal-document {
  min-width: 0;
  max-width: 720px;
}

.legal-document section {
  padding: 0 0 30px;
  scroll-margin-top: 26px;
}

.legal-document section + section {
  padding-top: 30px;
  border-top: 1px solid rgba(139, 233, 242, 0.1);
}

.legal-document h2 {
  display: flex;
  align-items: baseline;
  gap: 13px;
  margin: 0 0 15px;
  color: #f3fcfc;
  font-size: clamp(22px, 2.6vw, 29px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.legal-document h2 span {
  flex: 0 0 auto;
  color: rgba(240, 208, 139, 0.66);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

.legal-document h3 {
  margin: 22px 0 7px;
  color: #eaf8f8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.legal-document p,
.legal-document li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.legal-document p {
  margin: 0 0 12px;
}

.legal-document p:last-child {
  margin-bottom: 0;
}

.legal-document ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 15px;
  padding-left: 20px;
}

.legal-document li::marker {
  color: rgba(240, 208, 139, 0.7);
}

.legal-document strong {
  color: #eaf8f8;
  font-weight: 600;
}

.legal-document a {
  color: var(--cyan);
  text-decoration-color: rgba(139, 233, 242, 0.35);
  text-underline-offset: 3px;
}

.legal-document a:hover,
.legal-document a:focus-visible {
  color: #d3fbff;
  text-decoration-color: currentColor;
}

.legal-callout {
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid rgba(240, 208, 139, 0.19);
  border-radius: 10px;
  background: rgba(240, 208, 139, 0.045);
}

.legal-callout p {
  color: rgba(232, 242, 235, 0.86);
  font-size: 13px;
}

.legal-contact {
  display: inline-block;
  margin-top: 3px;
  padding: 10px 14px;
  border: 1px solid rgba(240, 208, 139, 0.25);
  border-radius: 8px;
  color: var(--gold) !important;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.legal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 34px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.legal-footer a {
  color: var(--muted);
  text-decoration: none;
}

.legal-footer a:hover,
.legal-footer a:focus-visible {
  color: var(--gold);
}

.legal-skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 5;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--gold);
  color: #1d1609;
  font-size: 12px;
  text-decoration: none;
  transition: top 150ms ease;
}

.legal-skip:focus {
  top: 12px;
}

@media (max-width: 760px) {
  .legal-shell {
    width: min(100% - 32px, 1060px);
  }

  .legal-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
    padding-top: 22px;
  }

  .legal-nav {
    gap: 7px 17px;
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .legal-toc {
    position: static;
    padding: 15px 16px 17px;
  }

  .legal-toc ol {
    grid-template-columns: 1fr 1fr;
    gap: 7px 15px;
  }

  .legal-toc a {
    font-size: 11px;
  }

  .legal-main {
    padding-top: 42px;
  }

  .legal-title {
    font-size: clamp(42px, 12vw, 64px);
  }
}

@media (max-width: 430px) {
  .legal-shell {
    width: min(100% - 26px, 1060px);
  }

  .legal-document p,
  .legal-document li {
    font-size: 13.5px;
  }

  .legal-toc ol {
    grid-template-columns: 1fr;
  }

  .legal-document h2 {
    gap: 9px;
    font-size: 21px;
  }

  .legal-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media print {
  body.legal-page {
    background: #fff;
    color: #111;
  }

  body.legal-page::before,
  .legal-toc,
  .legal-skip {
    display: none;
  }

  .legal-shell {
    width: 100%;
  }

  .legal-header,
  .legal-footer {
    border-color: #bbb;
  }

  .legal-brand,
  .legal-title,
  .legal-document h2,
  .legal-document h3,
  .legal-document strong {
    color: #111;
  }

  .legal-lede,
  .legal-document p,
  .legal-document li,
  .legal-footer,
  .legal-meta {
    color: #333;
  }

  .legal-layout {
    display: block;
    border-color: #bbb;
    padding-top: 12px;
  }

  .legal-document section {
    break-inside: avoid;
  }

  .legal-document a {
    color: #111;
  }
}