/* =====================================================================
   «Lingua Noctis»: орнаментальный слой поверх базовых правил всех страниц.
   Ночь у готического замка (тёмная тема) и лунный пергамент (светлая): волосяные золотые линии,
   уголки-«оклад» на карточках, ромбы, гравюры-эскизы в углу заданий. Значения — только токены DESIGN.md.
   Подключается последним в index.html.
   ===================================================================== */

/* ---------- Небо страницы: лунный свет справа сверху (только у верха страницы) ----------
   Свет — на html (холст всей страницы), body прозрачный; без background-attachment: fixed —
   неподвижный фон заставляет браузер перерисовывать страницу на каждом шаге прокрутки. */
html {
  background:
    radial-gradient(ellipse 60% 700px at 88% -120px, color-mix(in srgb, var(--moon) 9%, transparent), transparent 70%) no-repeat,
    var(--bg);
}

:root[data-theme='light'] {
  background:
    radial-gradient(ellipse 70% 600px at 50% -100px, color-mix(in srgb, var(--raised) 75%, transparent), transparent 75%) no-repeat,
    var(--bg);
}

body {
  background: transparent;
}

/* ---------- Шапка: волосяная золотая линия, гаснущая к краям ---------- */
.topbar {
  border-bottom-color: var(--frame-soft);
  box-shadow: none;
}

.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--frame) 30%, var(--frame) 70%, transparent);
  pointer-events: none;
}

/* Надпись «Lingua Noctis» — рисунок ChatGPT (public/brand/wordmark.png, чёрный на прозрачном);
   CSS-маска красит его цветом темы: золото ночью, чернила на пергаменте. */
.brand {
  gap: var(--sp-2);
  text-decoration: none;
}

/* Кинжал уже нарисован в самой надписи, отдельный знак LN — только значок сайта и вкладки. */
.brand-wordmark {
  display: block;
  width: 157px;
  height: 42px;
  background: var(--accent);
  mask: url('/brand/wordmark.png') left center / contain no-repeat;
  transition: background-color var(--dur-fast) var(--ease-out);
}

:root[data-theme='light'] .brand-wordmark {
  background: var(--text);
}

.brand:hover .brand-wordmark {
  background: var(--accent-hover);
}

.nav a {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

/* ---------- Подписи и орнамент ---------- */
.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Ромб — маленький квадрат с рамкой, повёрнутый на 45°. */
.ornament {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}

/* Заголовок между двумя линиями, гаснущими наружу. */
.rule-title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-2xl);
  font-weight: 400;
  text-align: center;
}

/* Линия толщиной 1 px и ромб 9 px на конце у заголовка — одна фигура clip-path, залитая градиентом. */
.rule-title::before,
.rule-title::after {
  content: '';
  flex: 1;
  min-width: var(--sp-6);
  height: 9px;
}

.rule-title::before {
  background: linear-gradient(90deg, transparent, var(--accent));
  clip-path: polygon(0 4px, calc(100% - 9px) 4px, calc(100% - 4.5px) 0, 100% 4.5px, calc(100% - 4.5px) 9px, calc(100% - 9px) 5px, 0 5px);
}

.rule-title::after {
  background: linear-gradient(90deg, var(--accent), transparent);
  clip-path: polygon(100% 4px, 9px 4px, 4.5px 0, 0 4.5px, 4.5px 9px, 9px 5px, 100% 5px);
}

/* ---------- Заголовок страницы: антиква без жирности, под ним линия с ромбом ---------- */
.page-head {
  position: relative;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--frame-soft);
}

.page-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--frame);
  background: var(--bg);
  transform: rotate(45deg);
}

.page-head h1,
.auth-card h1,
.play-head h1 {
  font-weight: 400;
  letter-spacing: 0.01em;
}

h2,
.modal-head h2 {
  font-weight: 400;
}

/* Карточки: уголки-оклад рисует правило .card в style.css (раньше остальных файлов, чтобы своё
   оформление компонентов его перекрывало). Здесь — окно с теми же уголками. */
.modal {
  border: 1px solid var(--frame-soft);
  background-image: var(--orn-corners);
  background-repeat: no-repeat;
  background-size: var(--orn-corners-size);
  background-position: var(--orn-corners-pos);
}

/* ---------- Задание: гравюра-эскиз в правом нижнем углу (тонкая, за текстом) ---------- */
.card:has(> .exercise) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.card:has(> .exercise)::after {
  content: '';
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: -1;
  width: 96px;
  height: 96px;
  background: var(--frame-soft);
  mask: var(--sketch, url('/art/sketch-quill.png')) right bottom / contain no-repeat;
  pointer-events: none;
}

.card:has(> .exercise):nth-of-type(6n + 1) {
  --sketch: url('/art/sketch-quill.png');
}

.card:has(> .exercise):nth-of-type(6n + 2) {
  --sketch: url('/art/sketch-moon.png');
}

.card:has(> .exercise):nth-of-type(6n + 3) {
  --sketch: url('/art/sketch-key.png');
}

.card:has(> .exercise):nth-of-type(6n + 4) {
  --sketch: url('/art/sketch-ivy.png');
}

.card:has(> .exercise):nth-of-type(6n + 5) {
  --sketch: url('/art/sketch-gate.png');
}

.card:has(> .exercise):nth-of-type(6n) {
  --sketch: url('/art/sketch-dragon.png');
}

/* Заголовок задания — жирная антиква с ромбом слева: его читают первым. */
.ex-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.35;
}

.ex-title::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px) rotate(45deg);
}

.preview .ex-title::before,
.sample-card .ex-title::before {
  display: none;
}

/* Пропуск — строка-«чернила» с золотой линией. */
input.gap {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-bottom-color: var(--frame);
}

.ex-result {
  font-family: var(--font-display);
}

/* Раздел урока — заголовок между линиями вместо пунктира. */
.section-title.divider {
  border-top: 0;
  background: linear-gradient(90deg, var(--frame), transparent 70%) top left / 100% 1px no-repeat;
}

/* Текст для чтения — страница книги: кегль крупнее, золотая буквица-линия слева. */
.text-block {
  padding-left: var(--sp-4);
  border-left: 1px solid var(--frame);
}

/* ---------- Кнопки: главная — с внутренней тонкой рамкой (двойная линия оклада) ---------- */
.btn {
  border-color: var(--frame);
}

.btn:hover {
  border-color: var(--accent);
}

.btn.primary {
  box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 3px color-mix(in srgb, var(--on-accent) 35%, transparent);
  letter-spacing: 0.02em;
}

.btn.primary:hover {
  box-shadow: inset 0 0 0 2px var(--accent-hover), inset 0 0 0 3px color-mix(in srgb, var(--on-accent) 35%, transparent);
}

.btn.ghost {
  border-color: transparent;
}

/* ---------- Метки, окна ---------- */
.badge.level {
  border: 1px solid var(--frame-soft);
}

.modal::backdrop {
  background: var(--scrim);
  backdrop-filter: blur(2px);
}

.toast {
  border-color: var(--frame);
}

/* ---------- Стартовая: ромб между языками ---------- */
.welcome-langs .ornament {
  width: 6px;
  height: 6px;
}

/* ---------- Телефон ---------- */
@media (max-width: 640px) {
  .brand-wordmark {
    width: 120px;
    height: 32px;
  }

  .card:has(> .exercise)::after {
    width: 64px;
    height: 64px;
  }

  .rule-title {
    font-size: var(--fs-xl);
  }
}