/* ============================================================
   Apogeo — legal pages stylesheet
   Matches the in-game design language (SpaceMono, void palette,
   cyan/gold accents, glass panels, soft glows).
   ============================================================ */

@font-face {
  font-family: "SpaceMono";
  src: url("fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SpaceMono";
  src: url("fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Brand palette (from lib/theme/palette.dart) */
  --void-0: #07040f;
  --void-1: #160e30;
  --bg-top: #0a0620;
  --bg-mid: #0b0718;
  --star: #ffc46b;     /* gold accent */
  --ship: #8ff7ff;     /* cyan primary */
  --ghost: #c77dff;    /* purple */
  --ink: #e9e4ff;      /* primary text */
  --muted: #8b82b8;    /* secondary text */
  --boost: #ffd98a;
  --bg-star: #cfd8ff;
  --danger: #ff5a5a;

  --panel: rgba(14, 10, 31, 0.92);
  --line: rgba(143, 247, 255, 0.18);   /* faint cyan hairline */
  --line-strong: rgba(143, 247, 255, 0.32);
  --glass: color-mix(in srgb, var(--ship) 7%, rgba(7, 4, 15, 0.72));

  --mono: "SpaceMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
  background:
    radial-gradient(120% 90% at 50% -15%, rgba(17, 10, 46, 0.55) 0%, rgba(7, 4, 15, 0) 60%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--void-0) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* faint starfield overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(207, 216, 255, 0.55), transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(207, 216, 255, 0.45), transparent),
    radial-gradient(1.6px 1.6px at 34% 68%, rgba(255, 196, 107, 0.35), transparent),
    radial-gradient(1.1px 1.1px at 64% 82%, rgba(207, 216, 255, 0.4), transparent),
    radial-gradient(1.3px 1.3px at 88% 54%, rgba(143, 247, 255, 0.35), transparent),
    radial-gradient(1px 1px at 22% 88%, rgba(207, 216, 255, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 50% 36%, rgba(207, 216, 255, 0.3), transparent);
  opacity: 0.7;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 46px 22px 90px;
}

/* ---- Header / hero ---- */
header { padding-bottom: 26px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.brand h1 {
  margin: 0;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-weight: 700;
  letter-spacing: 1.5px;
  background: linear-gradient(180deg, #ffffff 0%, var(--ship) 62%, #5fa9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(143, 247, 255, 0.25);
}
.brand .sub {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--star);
  text-shadow: 0 0 18px rgba(255, 196, 107, 0.35);
}
.meta {
  margin-top: 12px;
  font-size: 0.72rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.langswitch { margin-top: 16px; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.langswitch a { color: var(--ship); text-decoration: none; }
.langswitch a:hover { text-shadow: 0 0 12px rgba(143, 247, 255, 0.6); }
.langswitch strong { color: var(--ink); }

/* ---- Table of contents (glass pill panel) ---- */
nav.toc {
  margin: 30px 0;
  padding: 20px 24px;
  background: var(--glass);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 0 40px rgba(143, 247, 255, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
nav.toc strong {
  display: block;
  margin-bottom: 12px;
  font-size: 0.62rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--star);
}
nav.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 30px; }
nav.toc li { margin: 5px 0; }
nav.toc a { color: var(--ship); text-decoration: none; }
nav.toc a:hover { text-shadow: 0 0 10px rgba(143, 247, 255, 0.55); }

/* ---- Headings ---- */
h2 {
  margin: 44px 0 12px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink);
}
h2:first-of-type { border-top: 0; }
h3 {
  margin: 24px 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--star);
}

/* ---- Body copy ---- */
p, li { color: var(--ink); }
a { color: var(--ship); text-decoration: none; border-bottom: 1px solid rgba(143, 247, 255, 0.3); }
a:hover { text-shadow: 0 0 10px rgba(143, 247, 255, 0.5); border-bottom-color: var(--ship); }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
strong { color: #fff; }
em { color: var(--muted); font-style: italic; }

/* ---- Tables ---- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0;
  font-size: 0.86rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
th, td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th {
  background: rgba(143, 247, 255, 0.06);
  color: var(--star);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.72rem;
}
td { color: var(--ink); }

/* ---- Note / callout (kicker accent bar) ---- */
.note {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--glass);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--star);
  border-radius: 0 14px 14px 0;
  color: var(--muted);
  font-size: 0.88rem;
  box-shadow: 0 0 30px rgba(255, 196, 107, 0.05);
}
.note strong { color: var(--star); }
.muted { color: var(--muted); }

code {
  font-family: var(--mono);
  background: rgba(143, 247, 255, 0.08);
  color: var(--ship);
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 0.9em;
}

/* ---- Footer ---- */
footer {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
footer a { color: var(--ship); }

@media (max-width: 600px) {
  nav.toc ol { columns: 1; }
  .wrap { padding: 32px 16px 64px; }
  body { font-size: 14px; }
}