/* ============================================================
   WERCH — юридические страницы (privacy.html / terms.html).
   Отдельный лёгкий файл: игровой styles.css (2k+ строк, сбросы,
   оверлеи) документу не нужен. Токены — те же значения, что в
   styles.css (:root и дневная тема), чтобы страницы выглядели
   частью игры. Язык и тема ставятся из js/legal.js на <html>.
   ============================================================ */
:root {
  --sea-0: #071c2e;
  --sea-1: #04121f;
  --sea-2: #020a13;
  --sea-3: #01060c;

  --cyan:   #22d3ee;
  --cyan-2: #38f0d6;
  --gold:   #ffd54a;
  --gold-2: #ffb020;

  --fg:      #eaf6ff;
  --fg-dim:  #93b2c7;
  --fg-mute: #5c7a90;

  --panel:   rgba(8, 26, 42, 0.82);
  --panel-b: rgba(120, 220, 255, 0.14);
  --link:    #7fe6f7;
  --mark-bg: rgba(255, 213, 74, 0.14);
  --mark-fg: #ffe28a;

  --radius:   18px;
  --radius-s: 12px;

  --font-disp: 'Orbitron', ui-sans-serif, system-ui, sans-serif;
  --font-ui:   'Rajdhani', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  /* длинный текст: Rajdhani/Orbitron без кириллицы — русский и так падает на системный,
     поэтому тело документа сразу на системном гротеске (ровно и читаемо в обоих языках) */
  --font-text: ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* дневная тема — те же значения, что :root[data-theme="day"] в styles.css */
:root[data-theme="day"] {
  --sea-0: #eaf7fe;
  --sea-1: #cdecfa;
  --sea-2: #a9dcf3;
  --sea-3: #7fc4e6;

  --fg:      #082436;
  --fg-dim:  #2f5b73;
  --fg-mute: #5a7d92;

  --panel:   rgba(255, 255, 255, 0.78);
  --panel-b: rgba(12, 92, 130, 0.20);
  --link:    #0a6f8c;
  --mark-bg: rgba(255, 176, 32, 0.22);
  --mark-fg: #6b4300;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--sea-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* тот же глубинный градиент, что под игрой */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 50% -10%, #0b3350 0%, transparent 55%),
    linear-gradient(180deg, var(--sea-0) 0%, var(--sea-1) 30%, var(--sea-2) 62%, var(--sea-3) 100%);
}
:root[data-theme="day"] body::before {
  background:
    radial-gradient(120% 80% at 50% -10%, #ffffff 0%, transparent 55%),
    linear-gradient(180deg, #eaf7fe 0%, #c6e8f8 34%, #9dd6f0 66%, #74c0e6 100%);
}

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--cyan-2); }
:root[data-theme="day"] a:hover { color: #05506a; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

/* ---------- переключение языка ----------
   legal.js ставит <html data-lang="ru|en">. Без JS атрибута нет —
   видны обе версии подряд, а переключатель прячется. */
:root[data-lang="ru"] [data-block="en"],
:root[data-lang="en"] [data-block="ru"] { display: none !important; }
:root:not([data-lang]) .lg-switch { display: none; }
.lg-fallback { display: none; }
:root.lang-fallback .lg-fallback { display: block; }

/* ---------- шапка ---------- */
.lg-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px max(16px, calc((100vw - 880px) / 2));
  background: rgba(4, 18, 31, .84);
  border-bottom: 1px solid var(--panel-b);
  backdrop-filter: blur(8px);
}
:root[data-theme="day"] .lg-top { background: rgba(215, 240, 252, .86); }
.lg-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg); text-decoration: none;
  font-family: var(--font-disp); font-weight: 700; letter-spacing: 3px; font-size: .95rem;
}
.lg-brand img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.lg-brand:hover { color: var(--cyan); }
.lg-nav { display: flex; align-items: center; gap: 12px; }
.lg-back { font-family: var(--font-ui); font-weight: 600; font-size: .98rem; text-decoration: none; white-space: nowrap; }

.lg-switch { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--panel-b); background: var(--panel); }
.lg-switch button {
  font: 700 .72rem/1 var(--font-disp); letter-spacing: 1.5px;
  padding: 7px 12px; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--fg-dim); background: transparent;
  transition: background .2s, color .2s;
}
.lg-switch button:hover { color: var(--fg); }
.lg-switch button[aria-pressed="true"] { color: #04121f; background: linear-gradient(120deg, var(--cyan), var(--cyan-2)); }

/* ---------- документ ---------- */
.lg-doc { max-width: 880px; margin: 0 auto; padding: 28px 16px 40px; }

.lg-draft {
  margin: 0 0 28px; padding: 14px 16px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(255, 176, 32, .55);
  background: var(--mark-bg);
  color: var(--fg);
}
.lg-draft strong { display: block; font-family: var(--font-disp); font-size: .8rem; letter-spacing: 1.5px; color: var(--mark-fg); margin-bottom: 4px; }
.lg-draft p { margin: 0; font-size: .92rem; color: var(--fg-dim); }

.lg-eyebrow { margin: 0 0 6px; font-family: var(--font-disp); font-size: .72rem; letter-spacing: 3px; color: var(--cyan); }
h1 {
  margin: 0 0 8px;
  font-family: var(--font-disp); font-weight: 900; letter-spacing: 1px;
  font-size: clamp(1.5rem, 4.6vw, 2.3rem); line-height: 1.2;
}
.lg-meta { margin: 0 0 22px; color: var(--fg-mute); font-size: .9rem; }
.lg-lead { font-size: 1.05rem; color: var(--fg-dim); margin: 0 0 22px; }

.lg-toc {
  margin: 0 0 30px; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid var(--panel-b); background: var(--panel);
}
.lg-toc b { display: block; font-family: var(--font-disp); font-size: .72rem; letter-spacing: 2px; color: var(--fg-mute); margin-bottom: 8px; }
.lg-toc ol { margin: 0; padding-left: 1.3em; columns: 2 260px; column-gap: 28px; }
.lg-toc li { margin: 2px 0; break-inside: avoid; }
.lg-toc a { text-decoration: none; }
.lg-toc a:hover { text-decoration: underline; }

.lg-doc section { scroll-margin-top: 76px; margin: 0 0 30px; }
h2 {
  margin: 0 0 12px; padding-top: 18px;
  border-top: 1px solid var(--panel-b);
  font-family: var(--font-disp); font-weight: 700; letter-spacing: .5px;
  font-size: clamp(1.05rem, 3vw, 1.3rem); line-height: 1.35;
  color: var(--fg);
}
h3 { margin: 18px 0 6px; font-size: 1.02rem; color: var(--fg); }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 1.3em; }
li { margin: 4px 0; }
li::marker { color: var(--cyan); }
/* на светлом небе чистый циан почти не виден — темнее, как ссылки */
:root[data-theme="day"] .lg-eyebrow, :root[data-theme="day"] li::marker { color: #0a6f8c; }
code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .88em; padding: 1px 5px; border-radius: 6px; background: var(--panel); border: 1px solid var(--panel-b); overflow-wrap: anywhere; }

/* пометки для владельца: жёлтые, чтобы при вычитке не пропустить ни одной */
mark.owner {
  padding: 1px 6px; border-radius: 6px;
  background: var(--mark-bg); color: var(--mark-fg);
  border: 1px dashed rgba(255, 176, 32, .7);
  font-size: .92em; font-weight: 600;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* таблицы: две колонки помещаются и на телефоне; если нет — прокрутка внутри блока, не страницы */
.lg-tbl { margin: 0 0 14px; overflow-x: auto; border-radius: var(--radius-s); border: 1px solid var(--panel-b); background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--panel-b); }
tr:last-child td { border-bottom: 0; }
th { font-family: var(--font-disp); font-size: .7rem; letter-spacing: 1.5px; font-weight: 700; color: var(--fg-mute); text-transform: uppercase; }
td:first-child { width: 38%; font-weight: 600; }
td small { display: block; font-weight: 400; color: var(--fg-mute); font-size: .86rem; margin-top: 2px; }

.lg-note { padding: 12px 14px; border-radius: var(--radius-s); border-left: 3px solid var(--cyan); background: var(--panel); color: var(--fg-dim); }

/* ---------- подвал ---------- */
.lg-foot {
  max-width: 880px; margin: 0 auto; padding: 20px 16px 36px;
  border-top: 1px solid var(--panel-b);
  color: var(--fg-mute); font-size: .9rem;
  display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between;
}
.lg-foot > span:first-child { font-family: var(--font-disp); letter-spacing: 2px; color: var(--fg-dim); }
.lg-foot a { color: var(--fg-dim); }

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .lg-top { gap: 8px; }
}
@media (max-width: 370px) {
  .lg-brand span { display: none; }   /* совсем узкий экран — только значок, место под «В игру» и RU/EN */
  td:first-child { width: 42%; }
  th, td { padding: 9px 10px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* печать: чёрным по белому, без шапки и переключателя (юристы любят бумагу) */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before, .lg-top, .lg-toc { display: none; }
  a { color: #000; }
  .lg-tbl, .lg-draft, .lg-note, code { background: none; border-color: #999; }
  mark.owner { background: #fff3c4; color: #000; }
  h1, h2, th { color: #000; }
}