/*
 * Общая основа сайта: шрифты со своего хостинга, цвета из интерфейса игры, сброс стилей.
 * Поверх неё: desk.css (стол), night.css (афиша), home.css (главная), dialogs.css (окна).
 */

/* Шрифт вывесок игры. Обрезан до латиницы и кириллицы (tools/prepare_assets.py), лицензия OFL рядом. */
@font-face {
  font-family: "Yuji Syuku";
  src: url("../fonts/YujiSyuku-subset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* Основной текст — Noto Sans (переменная толщина 100–900), лицензия OFL рядом. */
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Цвета блокнота из главного меню игры */
  --ink: #2B1F14;          /* чернила, основной текст */
  --ink-soft: #614D38;     /* мягкие чернила, подписи */
  --link: #1F336B;         /* ссылка */
  --link-hover: #9E1F14;   /* ссылка при наведении, штамп */
  --heading: #732112;      /* заголовок на бумаге */
  --tab-red: #C75242;      /* закладки блокнота */
  --tab-green: #5C8C61;
  --tab-blue: #5C7AB3;
  --tab-gold: #D1A84D;
  --tab-red-deep: #9E3A2C; /* те же закладки в тени — под светлый текст (контраст ≥ 4.5) */
  --tab-green-deep: #46704B;
  --tab-blue-deep: #3F5A8C;
  --light: #F5EBD4;        /* светлый текст на тёмном */
  --night: #0D0D0F;        /* почти чёрный фон заставки */
  --paper: #EBC48E;        /* бумага, пипеткой с menu_notebook.webp */
  --paper-light: #F3E2C2;  /* бумага под самым светом лампы */
  --paper-shade: #D8AA79;  /* край страницы в тени */
  --wood: #3A2219;         /* тёмное дерево стола */

  --muted: #C9BBA0;        /* приглушённый светлый текст на ночном фоне, контраст 10:1 */
  --lantern: var(--tab-gold); /* свет фонаря */
  --torii: #9E3A2C;        /* кнопка цвета тории, светлый текст на ней — 5.7:1 */
  --torii-hover: #AA4232;
  --shadow-ink: 18, 8, 2;  /* тёплая тень от лампы (r, g, b) */
  /* бумажное зерно: готовая плитка (tools/prepare_assets.py), браузеру не нужно рисовать шум */
  --grain: url("../media/ui/grain.webp");

  --font-sign: "Yuji Syuku", "Hiragino Mincho ProN", "Noto Serif", Georgia, serif;
  --font-body: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--light);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }

:focus-visible { outline: 3px solid var(--tab-gold); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Боковые поля страницы: не меньше 16 px и не под вырезом телефона */
.gutter {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important;
  }
}