/* Стили экранов. Значения — только из tokens.css. */

.visually-hidden {
  position: absolute;
  width: var(--space-1);
  height: var(--space-1);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Стол (#/desk) ---------- */

.desk {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4)
    max(var(--space-5), env(safe-area-inset-bottom));
  overflow: hidden;
  background: var(--color-desk);
}

/* Лепестки лежат на столе под предметами */
.desk__petals {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.desk__top,
.desk__book-wrap,
.desk__things {
  position: relative;
}

/* Окно: небо = время дня текущего модуля */
.desk__window {
  position: relative;
  aspect-ratio: 1240 / 600;
  overflow: hidden;
  border: var(--space-2) solid var(--color-surface);
  border-radius: var(--radius-page);
  background: var(--sky-now);
}

.desk__window::after {
  /* перекладина рамы */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--space-1);
  background: var(--color-surface);
}

.desk__window-branch {
  width: 100%;
}

/* Ветка над столом свисает из-за правого края окна */
.desk__corner {
  position: absolute;
  top: 55%;
  right: calc(-1 * var(--space-6));
  width: 46%;
  pointer-events: none;
}

/* Записка Егора на васи-ленте */
.desk__note {
  position: relative;
  width: 70%;
  margin: calc(-1 * var(--space-5)) 0 0 var(--space-2);
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-radius: var(--radius-page);
  background: var(--color-surface);
  transform: rotate(-2deg);
}

.desk__tape {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: var(--color-sakura);
  color: var(--color-text);
  font-size: var(--fs-caption);
  transform: rotate(-3deg);
}

.desk__note-text {
  padding-right: var(--space-6);
  font-family: var(--font-note);
  font-size: var(--fs-note);
  line-height: 1.15;
  color: var(--color-ink);
}

.desk__note-text .placeholder {
  font-family: var(--font-body);
}

.desk__stamp {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  width: var(--space-7);
  height: var(--space-7);
}

/* Открытый скетчбук = текущий модуль */
.desk__book-wrap {
  margin-bottom: var(--space-8);
}

.desk__book {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: thin solid var(--color-line);
  border-radius: var(--radius-page);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transform: rotate(1deg);
}

.desk__page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
}

.desk__page--right {
  justify-content: flex-end;
  border-left: thin solid var(--color-line);
}

.desk__book-caption {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.desk__book-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
}

.desk__sleeper {
  width: 100%;
}

/* Красный плетёный шнурок-закладка свисает из корешка */
.desk__cord {
  position: absolute;
  top: 100%;
  left: calc(50% - var(--space-5));
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: var(--space-8);
  min-width: var(--tap);
  padding-left: var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}

.desk__braid {
  position: relative;
  align-self: stretch;
  width: var(--space-2);
  background: repeating-linear-gradient(
    135deg,
    var(--color-sakura-deep) 0 var(--space-1),
    var(--color-sakura) var(--space-1) calc(var(--space-1) * 1.5)
  );
}

.desk__braid::after {
  /* кисточка */
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--space-2));
  left: calc(-1 * var(--space-1));
  width: var(--space-4);
  height: var(--space-3);
  border-radius: var(--radius-page) var(--radius-page) var(--space-2) var(--space-2);
  background: var(--color-sakura-deep);
}

.desk__label {
  font-size: var(--fs-caption);
  line-height: 1.3;
}

/* Мелкие предметы внизу стола */
.desk__things {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
}

.desk__thing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: var(--tap);
  padding: var(--space-1);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
}

.desk__thing--mug {
  margin-bottom: var(--space-4);
}

.desk__thing--box {
  margin-bottom: var(--space-2);
}

/* Стопка полароидов */
.desk__polaroids {
  position: relative;
  width: calc(var(--space-8) + var(--space-5));
  height: calc(var(--space-8) + var(--space-6));
}

.desk__polaroid {
  position: absolute;
  inset: 0;
  padding: var(--space-1) var(--space-1) var(--space-4);
  border: thin solid var(--color-line);
  border-radius: var(--radius-polaroid);
  background: linear-gradient(var(--color-sakura), var(--color-sakura)) content-box, var(--color-surface);
  transform: rotate(-9deg);
}

.desk__polaroid:nth-child(2) {
  background: linear-gradient(var(--color-accent), var(--color-accent)) content-box, var(--color-surface);
  transform: rotate(6deg);
}

.desk__polaroid:nth-child(3) {
  background: linear-gradient(var(--sky-now), var(--sky-now)) content-box, var(--color-surface);
  transform: rotate(-2deg);
}

/* Кружка с онигири и коробка Маргопедии — иконки обводкой */
.desk__icon {
  display: block;
  width: calc(var(--space-8) + var(--space-6));
}

.desk__icon svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--color-text);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.desk__svg-paper { fill: var(--color-surface); }
.desk__svg-nori { fill: var(--color-text); }
.desk__svg-tab { fill: var(--color-sakura); }
.desk__svg-box { fill: var(--color-sakura); }
.desk__svg-steam { stroke: var(--color-text-muted); }
.desk__svg-coffee { stroke: var(--color-text-muted); stroke-width: 4; }

/* Отклик на нажатие */
.desk__book,
.desk__cord,
.desk__thing {
  transition: transform 0.15s ease;
}

.desk__thing:active,
.desk__cord:active {
  transform: translateY(var(--space-1));
}

.desk__book:active {
  transform: rotate(1deg) translateY(var(--space-1));
}

/* ---------- Записка Егора (ui/note.js) ---------- */

.note {
  position: relative;
  margin: var(--space-3) 0 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: thin solid var(--color-line);
  border-radius: var(--radius-page);
  background: var(--color-surface);
  transform: rotate(-1deg);
}

.note__tape {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: var(--color-sakura);
  color: var(--color-text);
  font-size: var(--fs-caption);
  transform: rotate(-3deg);
}

.note__text {
  min-height: var(--space-7);
  padding-right: var(--space-7);
  font-family: var(--font-note);
  font-size: var(--fs-note);
  line-height: 1.15;
  color: var(--color-ink);
}

.note__text .placeholder {
  font-family: var(--font-body);
}

.note__voice {
  margin-top: var(--space-3);
}

.note__stamp {
  position: absolute;
  top: var(--space-4);
  right: var(--space-3);
  width: var(--space-7);
  height: var(--space-7);
}

.audio-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-4) 0 var(--space-3);
  border: thin solid var(--color-ink);
  border-radius: var(--radius-button);
  background: none;
  color: var(--color-ink);
  cursor: pointer;
}

.audio-button__icon svg {
  display: block;
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ---------- Модуль (#/module/:id) — страница скетчбука ---------- */

.page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-7);
  border-radius: var(--radius-page);
  background: var(--color-surface);
}

/* Небо модуля над страницей */
.page__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-4)) 0;
  padding: var(--space-2) var(--space-4) var(--space-6);
  border-radius: var(--radius-page) var(--radius-page) 0 0;
  background: var(--sky-now);
}

.page__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--color-text);
}

.page__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-display);
  overflow-wrap: break-word;
}

.page__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.page__h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.page__h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0;
}

.page__muted {
  color: var(--color-text-muted);
}

.page__sub {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: var(--space-1) solid var(--color-sakura);
}

/* «Маргоша притащила»: видео и ссылки одной колонкой */
.page__loot-block {
  scroll-margin-top: var(--space-4);
}

.page__loot {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-2) 0;
}

/* Лёгкий наклон, у соседних — в разные стороны; открытый плеер ровный */
.page__loot > * {
  --tilt: -1.5deg;
}

.page__loot > :nth-child(even) {
  --tilt: 1.2deg;
}

/* Полароид-ссылка: «фото» в линейку и стрелка наружу */
.polaroid {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border: thin solid var(--color-line);
  border-radius: var(--radius-polaroid);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transform: rotate(var(--tilt, 0deg));
}

.polaroid__photo {
  --rule: calc(var(--space-1) / 4);
  --step: calc(var(--space-2) + var(--space-1));
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  aspect-ratio: 1;
  border: thin solid var(--color-line);
  background-color: var(--color-surface);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 var(--step),
    var(--color-desk) var(--step) calc(var(--step) + var(--rule))
  );
}

.polaroid__photo svg {
  width: 45%;
  fill: none;
  stroke: var(--color-sakura-deep);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.polaroid__caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.polaroid__title {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.polaroid__type {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

/* ---------- Мини-плеер (ui/video.js): бумажная тема — модуль и штаб ---------- */

.vslot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.vframe {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--space-3) var(--space-3) 0;
  border: thin solid var(--color-line);
  border-radius: var(--radius-polaroid);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
}

/* Кусочек васи-ленты сверху, как у записки Егора */
.vframe__tape {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: calc(50% - var(--space-7) / 2);
  width: var(--space-7);
  height: var(--space-5);
  background: var(--color-sakura);
  transform: rotate(-4deg);
}

/* «Фото» 16:9, залитое небом модуля */
.vframe__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sky-now);
}

.vframe__play svg {
  display: block;
  width: var(--space-8);
  height: var(--space-8);
}

.vframe__play-bg { fill: var(--color-sakura-deep); }
.vframe__play-fg { fill: var(--color-surface); }

/* Толстое нижнее поле: название и сервис */
.vframe__caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-1) var(--space-5);
}

.vframe__title {
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.vframe__site {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

/* Открытый плеер: та же рамка, ровно, мягкое появление */
.vslot.is-open .vframe {
  cursor: default;
  transform: none;
  animation: vframe-in 0.18s ease-out;
}

@keyframes vframe-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vslot.is-open .vframe {
    animation: none;
  }
}

.vframe__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Пока iframe грузится — небо и подпись, без спиннера */
.vframe__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sky-now);
  color: var(--color-text);
  font-size: var(--fs-caption);
  pointer-events: none;
}

/* «×» в правом верхнем углу рамки; позиция — от ячейки, чтобы пиксельный clip-path её не срезал */
.vframe__close {
  position: absolute;
  top: calc(-1 * var(--space-3));
  right: calc(-1 * var(--space-2));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: thin solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.vframe__close svg {
  display: block;
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Без интернета: спящий котёнок и подсказка внутри рамки */
.vframe__photo--offline {
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  text-align: center;
}

.vframe__kitten {
  width: calc(var(--space-8) + var(--space-5));
  height: auto;
}

.vframe__note {
  color: var(--color-text);
  font-size: var(--fs-caption);
}

.vslot__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  min-height: var(--tap);
  padding: 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

/* Перерыв */
.page__break {
  padding: var(--space-4);
  border-radius: var(--radius-page);
  background: var(--color-desk);
}

/* Задания */
.task {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: thin solid var(--color-line);
  border-radius: var(--radius-page);
}

.task__kind {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.task--training {
  --cell: var(--space-4);
  --cell-line: calc(var(--space-1) / 4);
  background-color: var(--color-surface);
  background-image:
    linear-gradient(var(--color-desk) var(--cell-line), transparent var(--cell-line)),
    linear-gradient(90deg, var(--color-desk) var(--cell-line), transparent var(--cell-line));
  background-size: var(--cell) var(--cell);
}

.task__tag {
  padding: var(--space-1) var(--space-3);
  background: var(--color-sakura);
  font-size: var(--fs-caption);
  transform: rotate(-2deg);
}

.task__minutes {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.task--card {
  border-color: var(--color-accent);
}

.task__done-button {
  min-height: var(--tap);
  margin-top: var(--space-2);
  padding: 0 var(--space-5);
  border: thin solid var(--color-accent);
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
}

.task__done-button.is-done {
  background: none;
  border-color: var(--color-line);
  color: var(--color-text-muted);
  font-weight: 400;
}

.task__result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.task__result:empty {
  display: none;
}

.task__findings {
  margin: 0;
  padding-left: var(--space-5);
}

.task__link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
  min-height: var(--tap);
}

/* Самопроверка */
.page__self-check {
  padding: var(--space-4);
  border: thin dashed var(--color-sakura-deep);
  border-radius: var(--radius-page);
}

.task__track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
  min-height: var(--tap);
}

/* ---------- Штаб «М.А.Р.Г.О.» (модуль с room = "nerv") ----------
   Только оформление: разметка та же, что у обычного модуля.
   Записка Егора и полароиды остаются бумажными — «бумага на пульте». */

body:has(.page--nerv)[data-tod] {
  background: var(--nerv-bg);
}

.page--nerv {
  --hazard: repeating-linear-gradient(
    -45deg,
    var(--nerv-accent) 0 var(--space-2),
    var(--nerv-bg) var(--space-2) var(--space-4)
  );
  --scan-line: calc(var(--space-1) / 4);
  margin: 0;
  border-radius: 0;
  color: var(--nerv-text);
  background-color: var(--nerv-bg);
  /* строки развёртки поверх фона, без движения */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--nerv-panel) 0 var(--scan-line),
    transparent var(--scan-line) var(--space-1)
  );
}

.page--nerv a {
  color: var(--nerv-accent);
}

.page--nerv :focus-visible {
  outline-color: var(--nerv-accent);
}

.page--nerv .page__head {
  position: relative;
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-4)) 0;
  padding-bottom: var(--space-6);
  border-radius: 0;
  background: transparent;
}

/* Полоса опасности под шапкой */
.page--nerv .page__head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--space-2);
  background: var(--hazard);
}

.hq {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
}

.hq__emblem svg {
  display: block;
  width: var(--space-7);
  height: auto;
  fill: none;
  stroke: var(--nerv-accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hq__text {
  display: flex;
  flex-direction: column;
}

.hq__title {
  font-family: var(--font-nerv);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  color: var(--nerv-accent);
}

.hq__place {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--nerv-muted);
}

.page--nerv .page__back {
  font-family: var(--font-mono);
}

.page--nerv .page__title {
  font-family: var(--font-nerv);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--nerv-text);
}

.page--nerv .page__h2 {
  font-family: var(--font-nerv);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--nerv-accent);
}

.page--nerv .page__h3 {
  font-family: var(--font-nerv);
  font-weight: 500;
}

.page--nerv .page__muted,
.page--nerv .task__kind,
.page--nerv .task__minutes {
  font-family: var(--font-mono);
  color: var(--nerv-muted);
}

/* Панели терминала: урок, задания, самопроверка */
.page--nerv .page__lesson,
.page--nerv .task,
.page--nerv .page__self-check {
  position: relative;
  padding: calc(var(--space-4) + var(--space-2)) var(--space-4) var(--space-4);
  border: thin solid var(--nerv-accent);
  border-radius: 0;
  background-color: var(--nerv-panel);
}

.page--nerv .page__lesson::before,
.page--nerv .task::before,
.page--nerv .page__self-check::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--space-1);
  background: var(--hazard);
}

.page--nerv .task--training {
  background-image:
    linear-gradient(var(--nerv-bg) var(--cell-line), transparent var(--cell-line)),
    linear-gradient(90deg, var(--nerv-bg) var(--cell-line), transparent var(--cell-line));
}

.page--nerv .page__sub {
  border-left-color: var(--nerv-accent);
}

.page--nerv .task__tag {
  background: var(--nerv-accent);
  color: var(--nerv-bg);
  font-family: var(--font-mono);
  font-weight: 700;
}

.page--nerv .page__break {
  border: thin dashed var(--nerv-muted);
  border-radius: 0;
  background: var(--nerv-panel);
}

.page--nerv .task__done-button {
  border-color: var(--nerv-accent);
  border-radius: 0;
  background: var(--nerv-accent);
  color: var(--nerv-bg);
  font-family: var(--font-nerv);
  font-weight: 500;
  text-transform: uppercase;
}

.page--nerv .task__done-button.is-done {
  border-color: var(--nerv-muted);
  background: transparent;
  color: var(--nerv-muted);
}

.page--nerv .placeholder {
  border-color: var(--nerv-muted);
  color: var(--nerv-muted);
  font-family: var(--font-mono);
}

/* Бумага на пульте: записка и полароиды как в обычном модуле */
.page--nerv .note .placeholder,
.page--nerv .polaroid .placeholder,
.page--nerv .vframe .placeholder {
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
  font-family: var(--font-body);
}

.page--nerv .polaroid {
  color: var(--color-text);
}

.page--nerv .vslot__link {
  color: var(--nerv-muted);
}

.page--nerv .audio-button {
  color: var(--color-ink);
}

/* ---------- Общая шапка экранов (карта, Маргопедия) ---------- */

.screen-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: max(var(--space-2), env(safe-area-inset-top)) var(--space-4) var(--space-4);
}

.screen-head__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.screen-head__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-display);
}

/* ---------- Карта (#/map) ---------- */

.map {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: var(--space-8);
  overflow: hidden;
  background: var(--color-bg);
}

/* Ветка за бирками; вторая копия зеркальная, чтобы хватило на все модули */
.map__branch {
  position: absolute;
  top: var(--space-7);
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.map__branch-img {
  width: 100%;
}

.map__branch-img--flip {
  transform: scaleX(-1);
}

.map__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin: 0;
  padding: var(--space-6) var(--space-4) 0;
  list-style: none;
}

.map__item {
  position: relative;
  width: 58%;
  transform: rotate(-2deg);
}

.map__item:nth-child(even) {
  align-self: flex-end;
  transform: rotate(2deg);
}

.map__item.is-current {
  margin-top: var(--space-6);
}

/* Бирка: дырочка и ниточка к ветке */
.map-tag {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--tap);
  padding-bottom: var(--space-3);
  border: thin solid var(--color-line);
  border-radius: var(--radius-page);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.map-tag::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: calc(var(--space-1) / 2);
  height: var(--space-6);
  background: var(--color-text-muted);
}

.map-tag::after {
  content: "";
  position: absolute;
  top: var(--space-1);
  left: calc(50% - var(--space-1));
  width: var(--space-2);
  height: var(--space-2);
  border: thin solid var(--color-text-muted);
  border-radius: 50%;
  background: var(--color-bg);
}

.map-tag__sky {
  height: var(--space-5);
  border-bottom: thin solid var(--color-line);
  border-radius: var(--radius-page) var(--radius-page) 0 0;
  background: var(--tag-sky, var(--sky-dawn));
}

.map-tag__number {
  padding: var(--space-2) var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.map-tag__title {
  padding: 0 var(--space-7) 0 var(--space-3);
  font-weight: 700;
  line-height: 1.3;
}

.map-tag__stamp {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  width: var(--space-6);
  height: var(--space-6);
}

/* Маргоша сидит на бирке текущего модуля */
.map-tag__margo {
  position: absolute;
  bottom: calc(100% - var(--space-3));
  left: var(--space-2);
  z-index: 1;
  width: var(--space-8);
}

/* ---------- Маргопедия (#/margopedia) ---------- */

.margopedia {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: var(--space-7);
  background: var(--color-bg);
}

.margopedia__count {
  font-weight: 700;
}

/* Коробка-картотека */
.margopedia__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0 var(--space-3);
  padding: var(--space-5) var(--space-3);
  border-radius: var(--radius-page);
  background: var(--color-desk);
}

/* Разделитель: бумажная карточка с язычком */
.mp-section {
  display: flex;
  flex-direction: column;
}

.mp-section__tab {
  --tab-color: var(--color-sakura);
  align-self: flex-start;
  margin: 0;
  padding: var(--space-1) var(--space-4);
  border-top: var(--space-1) solid var(--tab-color);
  border-radius: var(--radius-page) var(--radius-page) 0 0;
  background: var(--color-surface);
  font-size: var(--fs-body);
  font-weight: 700;
}

.mp-section--loot .mp-section__tab { --tab-color: var(--color-accent); }
.mp-section--coupon .mp-section__tab { --tab-color: var(--sky-sunset); }
.mp-section--accessory .mp-section__tab { --tab-color: var(--color-sakura-deep); }

.mp-section__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: 0 var(--radius-page) var(--radius-page) var(--radius-page);
  background: var(--color-surface);
}

.mp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-height: calc(var(--space-8) + var(--space-6));
  padding: var(--space-3);
  border: thin solid var(--color-line);
  border-radius: var(--radius-polaroid);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mp-card__img {
  width: 100%;
  margin-bottom: var(--space-1);
}

.mp-card__title {
  font-weight: 700;
  line-height: 1.3;
}

.mp-card__caption {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

/* Неоткрытая: силуэт с «?», без серого «заблокировано» */
.mp-card--hidden {
  border: thin dashed var(--color-sakura-deep);
  background: var(--color-surface);
}

.mp-card__silhouette {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  border-radius: 50%;
  background: var(--color-sakura);
  color: var(--color-text);
  font-size: var(--fs-h2);
  font-weight: 900;
}

.mp-card__hint {
  font-size: var(--fs-caption);
  line-height: 1.35;
}

/* Крупная карточка */
.mp-dialog {
  width: calc(100% - var(--space-6));
  max-width: calc(var(--space-8) * 7);
  padding: var(--space-5);
  border: none;
  border-radius: var(--radius-page);
  background: var(--color-surface);
  color: var(--color-text);
}

.mp-dialog::backdrop {
  background: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.mp-dialog__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mp-dialog__img {
  width: 100%;
}

.mp-dialog__title {
  font-size: var(--fs-h2);
}

.mp-dialog__close {
  min-height: var(--tap);
  margin-top: var(--space-5);
  padding: 0 var(--space-5);
  border: none;
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Вечерний сад (#/evening) ----------
   Тёмная пиксельная комната: цвета только --evening-*, заголовки и метки — Pixelify Sans,
   текст заданий — Zen Maru Gothic. Пиксельные углы — clip-path, без теней и фильтров. */

.pixel-frame {
  --px: var(--space-1);
  clip-path: polygon(
    0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px))
  );
}

.pixel-frame:focus-visible {
  outline-offset: calc(-1 * var(--space-2));
}

body:has(.garden) {
  background: var(--evening-bg);
}

.garden {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-4) var(--space-7);
  background: var(--evening-bg);
  color: var(--evening-muted);
}

.garden a {
  color: var(--evening-muted);
}

.garden :focus-visible {
  outline-color: var(--evening-muted);
}

.garden__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-3) var(--space-2);
}

.garden__back {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: var(--space-1) solid var(--evening-muted);
  font-family: var(--font-pixel);
  text-decoration: none;
}

.garden__kitten {
  grid-column: 2;
  grid-row: 1;
  width: calc(var(--space-8) + var(--space-7));
}

.garden__title {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--font-pixel);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1;
}

.garden__label {
  font-family: var(--font-pixel);
}

.garden__playing {
  padding: var(--space-3) var(--space-4);
  border: var(--space-1) solid var(--evening-line);
}

.garden__track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
  min-height: var(--tap);
}

.garden__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.garden-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--evening-line);
}

.garden-card__title {
  font-family: var(--font-pixel);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.2;
}

.garden-card__text {
  line-height: var(--lh-body);
}

.garden-card__loot {
  margin: 0;
  padding-left: var(--space-5);
}

.garden-card__loot .garden-card__video {
  margin: var(--space-4) 0 var(--space-3) calc(-1 * var(--space-5));
  list-style: none;
}

/* Мини-плеер в саду: пиксельная рамка, цвета --evening-*, Pixelify Sans */
.vslot--pixel .vframe {
  padding: var(--space-2) var(--space-2) 0;
  border: var(--space-1) solid var(--evening-muted);
  border-radius: 0;
  background: var(--evening-bg);
  color: var(--evening-muted);
  transform: none;
}

.vslot--pixel .vframe__photo {
  background: var(--evening-line);
}

.vslot--pixel .vframe__play-fg {
  fill: var(--evening-muted);
}

.vslot--pixel .vframe__caption {
  padding: var(--space-2) var(--space-1) var(--space-3);
  font-family: var(--font-pixel);
}

.vslot--pixel .vframe__site,
.vslot--pixel .vframe__loading,
.vslot--pixel .vframe__note {
  color: var(--evening-muted);
  font-family: var(--font-pixel);
}

.vslot--pixel .vframe__loading {
  background: var(--evening-line);
}

.vslot--pixel .vframe__close {
  border: var(--space-1) solid var(--evening-muted);
  border-radius: 0;
  background: var(--evening-bg);
  color: var(--evening-muted);
}

.vslot--pixel .vframe__close svg {
  fill: currentColor;
  stroke: none;
}

.vslot--pixel .vslot__link {
  color: var(--evening-muted);
  font-family: var(--font-pixel);
}

.garden-card__loot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.garden .placeholder {
  border-color: var(--evening-muted);
  color: var(--evening-muted);
}

/* ---------- Приветствие (#/welcome) ---------- */

.welcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(var(--space-6), env(safe-area-inset-top)) var(--space-4) var(--space-6);
}

.welcome__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-display);
}

.welcome__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--space-4);
}

.welcome__egor {
  width: 100%;
}

.welcome__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

.welcome__track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
  min-height: var(--tap);
}

.welcome__start {
  min-height: var(--tap);
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Живые персонажи (ui/character.js) ----------
   Слои — полный холст позы, лежат друг на друге. Точки вращения и тайминги — из _reference/anim.
   Анимируются только transform и opacity. */

.char {
  position: relative;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.char img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.char__part {
  position: absolute;
  inset: 0;
}

.char:focus-visible {
  outline: medium solid var(--color-sakura-deep);
  outline-offset: var(--space-1);
  border-radius: var(--radius-page);
}

/* Вне экрана и в скрытой вкладке — всё стоит */
.char.is-paused .char__part,
.char.is-paused img {
  animation-play-state: paused;
}

.char--margo-sit { aspect-ratio: 310 / 400; }
.char--margo-sleep { aspect-ratio: 250 / 210; }
.char--kitten-sit { aspect-ratio: 220 / 244; }
.char--kitten-sleep { aspect-ratio: 230 / 200; }
.char--egor-wave,
.char--egor-note { aspect-ratio: 300 / 440; }

/* Глаза, рот, записка: сменные слои */
.char__v-blink,
.char__v-happy,
.char__v-yawn,
.char__v-note,
.char__marks {
  opacity: 0;
}

.is-blink .char__v-blink { opacity: 1; }
.is-blink .char__v-open { opacity: 0; }
.is-happy .char__v-happy { opacity: 1; }
.is-happy .char__v-open,
.is-happy .char__v-blink { opacity: 0; }
.is-yawn .char__v-yawn { opacity: 1; }
.is-yawn .char__v-mouth { opacity: 0; }
.is-note .char__v-note { opacity: 1; }
.is-note .char__v-mouth,
.is-note .char__v-yawn { opacity: 0; }

/* Маргоша сидит */
.char--margo-sit .char__tail {
  transform-origin: 77% 86%;
  animation: char-margo-tail 3.8s ease-in-out infinite;
  will-change: transform;
}

.char--margo-sit .char__upper,
.char--margo-sit .char__upper2 {
  transform-origin: 50% 88%;
  animation: char-margo-breathe 4.2s ease-in-out infinite;
  will-change: transform;
}

.char--margo-sit .char__head {
  transform-origin: 48.4% 37.5%;
  transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.char--margo-sit .char__head.is-tilt { transform: rotate(-5deg); }
.char--margo-sit .char__ear-l { transform-origin: 38.4% 17.75%; }
.char--margo-sit .char__ear-r { transform-origin: 58.4% 17.75%; }

@keyframes char-margo-tail {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2.2deg); }
}

@keyframes char-margo-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.008, 1.014); }
}

/* Маргоша спит */
.char--margo-sleep .char__body {
  transform-origin: 50% 92%;
  animation: char-margo-sleepbreath 4.6s ease-in-out infinite;
  will-change: transform;
}

.char--margo-sleep .char__head {
  transform-origin: 35% 55%;
  animation: char-margo-headbob 4.6s ease-in-out infinite;
  will-change: transform;
}

.char--margo-sleep .char__ear-l { transform-origin: 22.8% 37.6%; }
.char--margo-sleep .char__ear-r { transform-origin: 44.4% 34.3%; }

.char--margo-sleep .char__z {
  animation: char-z 3.2s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes char-margo-sleepbreath {
  0%, 100% { transform: scale(1, 1); }
  45% { transform: scale(1.012, 1.035); }
}

@keyframes char-margo-headbob {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-1.2%); }
}

@keyframes char-z {
  0% { transform: translate(0, 4%); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(2%, -6%); opacity: 0; }
}

/* Маргоша: подёргивание уха */
.char--margo-sit .is-twitch-l,
.char--margo-sleep .is-twitch-l { animation: char-margo-twl 0.32s ease-in-out; }
.char--margo-sit .is-twitch-r,
.char--margo-sleep .is-twitch-r { animation: char-margo-twr 0.32s ease-in-out; }

@keyframes char-margo-twl {
  0%, 100% { transform: rotate(0); }
  40% { transform: rotate(-14deg); }
  70% { transform: rotate(4deg); }
}

@keyframes char-margo-twr {
  0%, 100% { transform: rotate(0); }
  40% { transform: rotate(14deg); }
  70% { transform: rotate(-4deg); }
}

/* Котёнок сидит */
.char--kitten-sit .char__tail {
  transform-origin: 59% 91%;
  animation: char-kitten-tail 2.8s ease-in-out infinite;
  will-change: transform;
}

.char--kitten-sit .char__all {
  transform-origin: 50% 95%;
  animation: char-kitten-breathe 3.6s ease-in-out infinite;
  will-change: transform;
}

.char--kitten-sit .char__hop { transform-origin: 50% 95%; }
.char--kitten-sit .char__hop.is-go { animation: char-kitten-hop 0.55s cubic-bezier(0.3, 1.3, 0.5, 1); }

.char--kitten-sit .char__head {
  transform-origin: 45.5% 49%;
  transition: transform 0.5s ease;
}

.char--kitten-sit .char__head.is-yawning { transform: rotate(-4deg) translateY(-1%); }
.char--kitten-sit .char__ear-l { transform-origin: 33.2% 20.9%; }
.char--kitten-sit .char__ear-r { transform-origin: 57.7% 20.9%; }

@keyframes char-kitten-tail {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(6deg); }
}

@keyframes char-kitten-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.008, 1.016); }
}

@keyframes char-kitten-hop {
  0% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(0) scale(1.04, 0.95); }
  55% { transform: translateY(-9%) scale(0.98, 1.03); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* Котёнок спит */
.char--kitten-sleep .char__body {
  transform-origin: 50% 90%;
  animation: char-kitten-sb 4s ease-in-out infinite;
  will-change: transform;
}

.char--kitten-sleep .char__head {
  transform-origin: 35% 55%;
  animation: char-kitten-hb 4s ease-in-out infinite;
  will-change: transform;
}

.char--kitten-sleep .char__ear-l { transform-origin: 23.9% 36.5%; }
.char--kitten-sleep .char__ear-r { transform-origin: 43.9% 32.5%; }

@keyframes char-kitten-sb {
  0%, 100% { transform: scale(1, 1); }
  45% { transform: scale(1.014, 1.04); }
}

@keyframes char-kitten-hb {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-1.4%); }
}

/* Котёнок: подёргивание уха */
.char--kitten-sit .is-twitch-l,
.char--kitten-sleep .is-twitch-l { animation: char-kitten-twl 0.3s ease-in-out; }
.char--kitten-sit .is-twitch-r,
.char--kitten-sleep .is-twitch-r { animation: char-kitten-twr 0.3s ease-in-out; }

@keyframes char-kitten-twl {
  0%, 100% { transform: rotate(0); }
  40% { transform: rotate(-16deg); }
  70% { transform: rotate(5deg); }
}

@keyframes char-kitten-twr {
  0%, 100% { transform: rotate(0); }
  40% { transform: rotate(16deg); }
  70% { transform: rotate(-5deg); }
}

/* Егор (машет и с запиской) */
.char--egor-wave .char__all,
.char--egor-note .char__all {
  transform-origin: 50% 96%;
  animation: char-egor-breathe 4s ease-in-out infinite;
  will-change: transform;
}

.char--egor-wave .char__all.is-hop { animation: char-egor-hop 0.5s cubic-bezier(0.3, 1.3, 0.5, 1); }

.char--egor-wave .char__head,
.char--egor-note .char__head {
  transform-origin: 50% 36.5%;
  transition: transform 0.5s ease;
}

.char--egor-wave .char__head.is-lean { transform: rotate(3deg); }

.char--egor-wave .char__hairf,
.char--egor-note .char__hairf { transform-origin: 50% 10%; }
.char--egor-wave .is-hop .char__hairf { animation: char-egor-hair 0.5s ease-out; }

.char--egor-wave .char__arm {
  transform-origin: 58.9% 40.9%;
  animation: char-egor-armidle 4s ease-in-out infinite;
  will-change: transform;
}

.char--egor-wave .char__arm.is-waving { animation: char-egor-wave 0.9s ease-in-out 2; }

.char--egor-wave .char__marks { transition: opacity 0.2s; }
.char--egor-wave .is-waving .char__marks { opacity: 1; }

.char--egor-note .char__hands {
  animation: char-egor-noteb 4s ease-in-out infinite;
  will-change: transform;
}

.char--egor-note .char__hands.is-show { animation: char-egor-show 1s ease-in-out; }

@keyframes char-egor-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.004, 1.009); }
}

@keyframes char-egor-hop {
  0% { transform: translateY(0); }
  25% { transform: scale(1.02, 0.97); }
  60% { transform: translateY(-4%); }
  100% { transform: translateY(0); }
}

@keyframes char-egor-hair {
  0%, 100% { transform: none; }
  55% { transform: translateY(-0.6%) scaleY(0.99); }
  80% { transform: translateY(0.4%); }
}

@keyframes char-egor-armidle {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-2deg); }
}

@keyframes char-egor-wave {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-11deg); }
  75% { transform: rotate(9deg); }
}

@keyframes char-egor-noteb {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.5%); }
}

@keyframes char-egor-show {
  0%, 100% { transform: translateY(0); }
  40%, 70% { transform: translateY(-3%) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .char,
  .char * {
    animation: none !important;
    transition: none !important;
  }
}

/* Маргоша ведёт урок: маленькая, рядом с заголовком */
.page__lesson-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.page__lesson-margo {
  flex: none;
  width: calc(var(--space-8) + var(--space-2));
}

/* Стол: Маргоша спит поверх правой страницы скетчбука, но не внутри ссылки */
.desk__sleeper-space {
  display: block;
  width: 100%;
  aspect-ratio: 250 / 210;
}

.desk__sleeper-layer {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
  transform: rotate(1deg);
}

.desk__sleeper-layer .desk__sleeper {
  grid-column: 2;
  align-self: end;
  width: auto;
  margin: 0 var(--space-3) var(--space-4);
  pointer-events: auto;
}

/* Без анимации Маргоша — просто картинка, нажатие проходит к скетчбуку */
.desk__sleeper-layer .char-still {
  pointer-events: none;
}