/*
 * «Свиток» для документов: тёмное дерево, шапка-рассвет с дизерингом, пергамент в рамке пака.
 * Один файл для сайта (экран) и PDF (@media print). Размеры рамок и картинок — в «пикселях арта» × --u:
 * на экране 1 или 2 CSS px (целые — пиксели не «плывут»), в печати 1.5 px (≈ 0.4 мм на пиксель арта).
 * Картинки в img/ заранее увеличены без сглаживания (tools/legal/lib/pixelArt.cjs): срезы 9-slice ниже
 * указаны в пикселях этих увеличенных файлов (исходный срез пака × множитель).
 */

@font-face {
  font-family: 'Tiny5';
  src: url('fonts/Tiny5-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
}

/*
 * Статические экземпляры того же Rubik (tools/legal/lib/fontInstance.cjs) — для печати и PDF:
 * вариативный шрифт Chromium встраивает в PDF как Type 3, статический — обычным TrueType.
 */
@font-face {
  font-family: 'Rubik Static';
  src: url('fonts/Rubik-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Rubik Static';
  src: url('fonts/Rubik-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Rubik Static';
  src: url('fonts/Rubik-SemiBold.ttf') format('truetype');
  font-weight: 600;
}

:root {
  --u: 1px;
  --night: #1a1233;
  --wood: #2c1e1a;
  --wood-text: #fff3dc;
  --wood-muted: #e2c29f;
  --wood-dim: #b8957a;
  --wood-gold: #ffd35c;
  --shadow: #140c24;
  --paper: #f6e6c8;
  --ink: #3a2418;
  --ink-muted: #6b4a36;
  --accent: #a3401f;
  --paper-gold: #7a3f00;
  --rule: rgba(122, 74, 52, 0.32);
  --chip: rgba(122, 74, 52, 0.14);
  --dark-chip: #342422;
  --orange: #f38c4c;
  --font-pixel: 'Tiny5', 'Rubik', system-ui, sans-serif;
  /* Длинный текст — Rubik: у Tiny5 одно начертание 8 px-сетки, абзацы им читать тяжело. */
  --font-text: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --measure: 820px;
  color-scheme: dark;
}

html {
  background: var(--wood) url('img/wood.png') repeat 0 0 / calc(64 * var(--u)) calc(36 * var(--u));
  image-rendering: pixelated;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body {
  margin: 0;
  color: var(--wood-text);
  font: 400 16px/1.55 var(--font-text);
  font-kerning: normal;
  overflow-wrap: break-word;
}

/* У Tiny5 одно начертание: синтетический жирный и курсив ломают пиксели. */
.brand-title,
.brand-sub,
h1,
h2,
.num,
.btn,
.steps > li::before {
  font-synthesis: none;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 2;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--ink);
}

.skip:focus {
  left: 16px;
}

strong {
  font-weight: 600;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--wood-gold);
  outline-offset: 2px;
}

/*
 * --- Шапка: ночь → рассвет, солнце, горы ---
 * Горы повторяются от левого края, поэтому солнце стоит в их долине: центр на 280-м пикселе арта
 * (в печати — на 440-м, справа). Долины — в pixelArt.cjs (минимумы «пиков» дальнего и ближнего хребта).
 */
.dawn {
  background:
    url('img/ridge.png') repeat-x left bottom / calc(480 * var(--u)) calc(44 * var(--u)),
    url('img/sun.png') no-repeat left calc(248 * var(--u)) bottom calc(8 * var(--u)) / calc(64 * var(--u)) calc(40 * var(--u)),
    url('img/sky.png') repeat-x left bottom / calc(480 * var(--u)) calc(112 * var(--u)),
    url('img/stars.png') repeat left top / calc(160 * var(--u)) calc(96 * var(--u)),
    var(--night);
  padding: calc(20 * var(--u)) 16px calc(66 * var(--u));
}

.dawn-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.app-icon {
  flex: none;
  width: 96px;
  height: 96px;
  border: calc(2 * var(--u)) solid var(--shadow);
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(10, 6, 22, 0.6);
}

.brand {
  min-width: 0;
}

.brand-title {
  margin: 0;
  font: 40px/1 var(--font-pixel);
  letter-spacing: 0.02em;
  color: #fff1d6;
  text-shadow: 0 calc(3 * var(--u)) 0 var(--shadow);
}

.brand-sub {
  margin: 8px 0 0;
  font: 13px/1.3 var(--font-pixel);
  color: var(--wood-muted);
}

h1 {
  margin: 14px 0 0;
  font: 26px/1.15 var(--font-pixel);
  color: var(--wood-gold);
  text-shadow: 0 calc(2 * var(--u)) 0 var(--shadow);
}

h1 .sep {
  color: var(--wood-dim);
}

.effective {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--wood-muted);
}

/* --- Навигация сайта: документы и языки — кнопки пака --- */
.topnav {
  max-width: var(--measure);
  margin: 18px auto 0;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.topnav > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn {
  display: inline-block;
  padding: 7px 12px 6px;
  font: 15px/1.1 var(--font-pixel);
  color: var(--wood-text);
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(58, 20, 10, 0.75);
  border-style: solid;
  border-width: calc(4 * var(--u));
  border-image: url('img/btn-wood.png') 36 fill / calc(4 * var(--u));
}

.btn.small {
  padding: 6px 8px 5px;
  font-size: 13px;
}

/* Яркая кнопка: тёмная надпись со светлым тиснением (белая на оранжевом даёт меньше 3:1). */
.btn.on,
.cta .btn,
.actions .btn {
  border-image-source: url('img/btn.png');
  color: #2a1208;
  text-shadow: 0 2px 0 rgba(255, 214, 160, 0.55);
}

/* --- Содержимое --- */
main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 18px 16px 8px;
}

.summary,
.scroll,
.lang-card {
  border-style: solid;
  border-width: calc(12 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));
  border-image: url('img/panel-light.png') 108 90 90 108 fill / calc(12 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.summary {
  border-image-source: url('img/panel-dark.png');
  padding: 6px 14px 8px;
  color: var(--wood-text);
}

.summary h2 {
  margin: 0 0 6px;
  font: 19px/1.2 var(--font-pixel);
  color: var(--wood-gold);
}

.summary a {
  color: var(--wood-gold);
}

.summary strong {
  color: #fff8ea;
}

.stars,
.keys,
.steps {
  list-style: none;
  margin: 0 0 0.7em;
  padding: 0;
}

.stars > li,
.keys > li {
  position: relative;
  margin: 0.35em 0;
  padding-left: calc(12 * var(--u) + 12px);
}

.stars > li::before,
.keys > li::before {
  content: '';
  position: absolute;
  left: 0;
  width: calc(12 * var(--u));
  background: url('img/star.png') center / 100% 100% no-repeat;
}

.stars > li::before {
  top: calc(0.775em - 5 * var(--u));
  height: calc(10 * var(--u));
}

.keys > li::before {
  top: calc(0.775em - 4 * var(--u));
  height: calc(8 * var(--u));
  background-image: url('img/key.png');
}

.cta {
  margin: 10px 0 2px;
}

.scroll {
  margin-top: 18px;
  padding: 10px 16px 6px;
  color: var(--ink);
}

/*
 * Разделитель — снизу у раздела, а не сверху у следующего: если раздел начинается с новой страницы PDF,
 * линия не повисает над ним в начале страницы.
 */
.sec:not(:last-child) {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: calc(2 * var(--u)) dashed var(--rule);
}

.sec h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  font: 21px/1.2 var(--font-pixel);
  color: var(--accent);
}

.num {
  flex: none;
  padding: 3px 6px 2px;
  font: 12px/1.2 var(--font-pixel);
  color: var(--wood-gold);
  background: var(--dark-chip);
  box-shadow: inset 0 0 0 var(--u) var(--shadow);
  position: relative;
  top: -2px;
}

.scroll p {
  margin: 0 0 0.6em;
}

.steps {
  counter-reset: step;
}

.steps > li {
  counter-increment: step;
  position: relative;
  margin: 0.45em 0;
  padding-left: 34px;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 22px;
  height: 22px;
  font: 13px/22px var(--font-pixel);
  text-align: center;
  color: #2a1208;
  background: var(--orange);
  box-shadow: inset 0 0 0 var(--u) var(--shadow), 0 var(--u) 0 var(--shadow);
}

.faq {
  margin: 0.2em 0 0.4em;
}

.qa {
  margin: 0.8em 0;
  padding-left: 12px;
  border-left: calc(3 * var(--u)) solid rgba(163, 64, 31, 0.35);
}

.qa h3 {
  margin: 0 0 0.2em;
  font: 600 1em/1.4 var(--font-text);
  color: var(--paper-gold);
}

.qa .a > :last-child,
.qa .a .keys:last-child > li:last-child {
  margin-bottom: 0;
}

.ui {
  padding: 0 0.3em;
  font-weight: 500;
  white-space: nowrap;
  background: var(--chip);
  box-shadow: inset 0 0 0 var(--u) var(--rule);
}

.summary .ui {
  background: rgba(255, 243, 220, 0.12);
  box-shadow: inset 0 0 0 var(--u) rgba(255, 243, 220, 0.3);
}

/* Подпись кнопки на экране, пока интерфейс игры не переведён: «Settings (Настройки)». Переносится по пробелу. */
.ui-screen {
  font-weight: 400;
  white-space: normal;
}

.ui-screen > span {
  white-space: nowrap;
}

.ui-note {
  margin: 0 0 12px;
  padding: 6px 10px;
  font-size: 0.92em;
  color: var(--ink-muted);
  background: var(--chip);
  box-shadow: inset 0 0 0 var(--u) var(--rule);
}

/* «IP-адрес» и т. п.: без переноса по дефису (неразрывного дефиса U+2011 в Rubik нет). */
.nb {
  white-space: nowrap;
}

.code {
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.px-icon {
  width: 1.45em;
  height: 1.45em;
  vertical-align: -0.38em;
}

.site-footer {
  max-width: var(--measure);
  margin: 8px auto 0;
  padding: 10px 16px 32px;
  font-size: 13px;
  text-align: center;
  color: var(--wood-dim);
}

.site-footer a {
  color: var(--wood-muted);
}

/* --- Страница выбора языка --- */
.picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.lang-card {
  padding: 8px 14px 10px;
  color: var(--ink);
}

.lang-card h2 {
  margin: 0 0 6px;
  font: 21px/1.2 var(--font-pixel);
  color: var(--accent);
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
}

.actions .btn {
  text-align: center;
}

/* Заголовок выбора языка: по строке на язык. */
[data-target='index'] h1 {
  font-size: 18px;
  line-height: 1.35;
}

[data-target='index'] h1 > span[lang] {
  display: block;
}

[data-target='index'] h1 .sep {
  display: none;
}

/* --- Экран: крупнее на широких, плотнее на узких --- */
@media (min-width: 720px) {
  :root {
    --u: 2px;
  }

  body {
    font-size: 17px;
  }

  .app-icon {
    width: 128px;
    height: 128px;
  }

  .brand-title {
    font-size: 52px;
  }

  h1 {
    font-size: 30px;
  }

  .brand-sub {
    font-size: 15px;
  }

  .scroll {
    padding: 14px 26px 10px;
  }

  .summary {
    padding: 8px 20px 10px;
  }
}

@media (max-width: 480px) {
  .dawn-inner {
    gap: 14px;
  }

  .app-icon {
    width: 68px;
    height: 68px;
  }

  .brand-title {
    font-size: 26px;
  }

  .brand-sub {
    font-size: 11px;
  }

  h1 {
    margin-top: 10px;
    font-size: 20px;
  }

  .effective {
    font-size: 12px;
  }

  .sec h2 {
    font-size: 18px;
  }

  .scroll {
    padding: 8px 10px 4px;
  }

  .scroll p,
  .scroll li {
    hyphens: auto;
  }
}

/* --- Печать и PDF: A4, фон в полях страницы, подвал и номера в полях (@page) --- */
@page {
  size: A4;
  margin: 12mm 0 14mm;
  background: #2c1e1a url('img/wood.png') repeat 0 0 / 96px 54px;

  @bottom-left {
    padding-left: 14mm;
    font: 400 7.5pt/1.3 'Rubik Static', 'Rubik', sans-serif;
    font-variant-ligatures: none;
    color: #b8957a;
  }

  @bottom-right {
    padding-right: 14mm;
    font: 400 7.5pt/1.3 'Rubik Static', 'Rubik', sans-serif;
    font-variant-ligatures: none;
    color: #b8957a;
    text-align: right;
  }
}

@page :first {
  margin-top: 0;
}

@media print {
  :root {
    --u: 1.5px;
    --font-text: 'Rubik Static', 'Rubik', system-ui, sans-serif;
  }

  /* text-shadow в PDF — второй слой того же текста: при копировании заголовок удваивался бы. */
  .brand-title,
  h1,
  .btn,
  .btn.on,
  .cta .btn,
  .actions .btn {
    text-shadow: none;
  }

  html {
    background: none;
  }

  /*
   * Без лигатур «fi/fl/ff»: в PDF они копируются и ищутся как отдельный символ (fi — U+FB01), и «dificultad»
   * не находится поиском. !important — потому что шорткат `font:` в отдельных правилах (.qa h3, .num…)
   * сбрасывает font-variant-ligatures обратно в normal. Сборка проверяет PDF (lib/pdfText.cjs).
   */
  *,
  *::before,
  *::after {
    font-variant-ligatures: none !important;
  }

  body {
    font-size: 10.5pt;
    line-height: 1.38;
  }

  .scroll p {
    margin-bottom: 0.4em;
  }

  .stars > li,
  .keys > li {
    margin: 0.18em 0;
  }

  .qa {
    margin: 0.5em 0;
  }

  .qa h3 {
    margin-bottom: 0.1em;
  }

  .steps > li {
    margin: 0.3em 0;
  }

  .ui-note {
    margin-bottom: 2.5mm;
    padding: 1.2mm 2.5mm;
  }

  .skip,
  .topnav,
  .site-footer {
    display: none;
  }

  .dawn {
    padding: 10mm 14mm calc(56 * var(--u));
    background-position: left bottom, left calc(408 * var(--u)) bottom calc(8 * var(--u)), left bottom, left top;
  }

  .dawn-inner {
    max-width: none;
    gap: 7mm;
  }

  .app-icon {
    width: 25mm;
    height: 25mm;
  }

  .brand-title {
    font-size: 30pt;
  }

  .brand-sub {
    margin-top: 2mm;
    font-size: 9.5pt;
  }

  h1 {
    margin-top: 3.5mm;
    font-size: 19pt;
  }

  .effective {
    margin-top: 1.5mm;
    font-size: 9pt;
  }

  main {
    max-width: none;
    padding: 4mm 14mm 0;
  }

  .summary {
    padding: 2.5mm 5mm 3mm;
    break-inside: avoid;
  }

  .summary h2 {
    font-size: 14pt;
  }

  .scroll {
    margin-top: 3.5mm;
    padding: 3mm 5.5mm 1mm;
  }

  .sec h2 {
    margin-bottom: 1.6mm;
    font-size: 15pt;
  }

  /* 9 pt Tiny5 при просмотре на экране читался как «0€» вместо «06». */
  .num {
    padding: 0.6mm 1.4mm 0.3mm;
    font-size: 12pt;
    top: -0.5mm;
  }

  .sec:not(:last-child) {
    margin-bottom: 2.5mm;
    padding-bottom: 2.5mm;
  }

  .effective.latest {
    margin-top: 0.8mm;
  }

  .effective.latest a {
    color: var(--wood-gold);
  }

  .steps > li {
    padding-left: 8.5mm;
  }

  .steps > li::before {
    width: 5.5mm;
    height: 5.5mm;
    font-size: 9.5pt;
    line-height: 5.5mm;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  .sec h2 + *,
  .qa h3 + * {
    break-before: avoid;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }

  li,
  .qa,
  .cta {
    break-inside: avoid;
  }
}