/* ---------- Бумага и чернила ----------

   Весь сайт — набросок шариковой ручкой на тетрадном листе: кремовая бумага
   в клетку, тёмно-синие чернила, рукописные подписи. Ровных линий в рисунках
   нет вовсе, их рисует Sketch — здесь только цвета и разлиновка.
*/

:root {
  --paper:      #fdfbf4;
  --paper-edge: #ded7c4;
  --rule:       #cfe0ee;

  --ink:        #22304a;
  --ink-soft:   #6a7a94;
  --ink-faint:  #a8b4c6;

  --sea:        #35749e;
  --sea-soft:   #79aecb;
  --sea-wash:   #e6f1f7;

  --accent:     #d98b3a;
  --accent-soft:#f0c98a;
  --good:       #4f8f5b;
  --bad:        #c25242;

  /* Старые имена оставлены: на них завязано пол-сайта */
  --bg:           var(--paper);
  --bg-glow:      var(--paper);
  --muted:        var(--ink-soft);
  --folder-back:  #c9a227;
  --folder-front: #e8c25a;
  --folder-edge:  #b8891f;
  --sheet:        #fffdf7;
  --sheet-ink:    var(--ink);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    repeating-linear-gradient(0deg, var(--rule) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 26px),
    var(--paper);
  color: var(--ink);
  font-family: "Ink Free", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}

/* ---------- Чернила ---------- */

.ink__stroke {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Второй штрих — тот, что чуть мимо первого */
.ink__stroke--second { opacity: 0.7; }

.ink__fill {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ink__note {
  fill: var(--ink);
  font-family: "Ink Free", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}

/* ---------- Стартовый экран: блокнот ---------- */

.home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

/* Книга раскрывается в разворот: слева оборот прошлого листа, справа лицо
   следующего. Перспектива нужна, чтобы лист уходил вглубь, а не складывался
   плоско, как бумажка. */
.book {
  position: relative;
  width: 720px;
  max-width: 100%;
  height: 460px;
  perspective: 2400px;

  /* Закрытая книга — это одна страница: сдвигаем её в середину экрана,
     а на развороте возвращаем на место. */
  transform: translateX(-25%);
  transition: transform 760ms cubic-bezier(0.3, 0.9, 0.3, 1);
}

.book--open { transform: none; }

/* Дочитанный блокнот закрывается с другой стороны: видна одна последняя
   страница, ровно так же, как в начале была видна одна обложка. */
.book--ended { transform: translateX(25%); }

.book--ended .book__back {
  opacity: 0;
  pointer-events: none;
}

/* Задняя обложка лежит под всеми листами — на ней последняя загадка */
.book__back {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 0;

  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px 255px 12px 255px / 255px 12px 255px 12px;
}

/* Сброс прогресса — в углу поверх любого экрана */
.reset {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 20;
  padding: 7px 16px;

  background: var(--paper);
  border: 2px solid var(--ink-faint);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.reset:hover { border-color: var(--ink); }

/* Лист: правая половина разворота, поворачивается вокруг корешка */
.leaf {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 760ms cubic-bezier(0.3, 0.9, 0.3, 1);
}

.leaf--turned { transform: rotateY(-180deg); }

.leaf__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;

  background: var(--paper);
  border: 2px solid var(--ink);
}

/* Лицевая сторона — правая страница, оборот — левая соседнего разворота */
.leaf__front { border-radius: 4px 255px 12px 255px / 255px 12px 255px 12px; }

.leaf__back {
  transform: rotateY(180deg);
  border-radius: 255px 4px 255px 12px / 12px 255px 12px 255px;
}

/* ---------- Страница ---------- */

.page {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 28px 26px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  background: repeating-linear-gradient(0deg, var(--rule) 0 1px, transparent 1px 30px);
}

/* Поля тетради: у правой страницы слева, у левой — справа */
.page--right { border-left: 2px solid var(--accent-soft); }
.page--left  { border-right: 2px solid var(--accent-soft); }

/* «Тыкни для игры!» — только на первой странице, внизу, со стрелкой к номеру */
.page__poke {
  position: absolute;
  left: 0;
  right: 0;
  /* Повёрнутая подпись занимает по высоте больше обычной строки, поэтому
     её приподняли — иначе нижний угол вылезал бы за край страницы */
  bottom: 44px;

  display: flex;
  justify-content: center;

  pointer-events: none;
}

/* Стрелка начинается слева от подписи и уходит вверх-вправо; размеры
   подобраны так, чтобы остриё пришлось под самую цифру */
.poke__arrow {
  position: absolute;
  /* Отступы отсчитываются от поднятой подписи и подобраны так, чтобы после
     уменьшения остриё осталось на прежнем месте — у самой цифры */
  left: 59px;
  bottom: 14px;
  width: 84px;
  height: 96px;
  /* Поворот вокруг самого острия: тогда наклон уводит хвост, а не цель */
  transform: rotate(-10deg);
  transform-origin: 86% 9%;
  overflow: visible;
}

.poke__line .ink__stroke { stroke: var(--accent); stroke-width: 3; }

.poke__text {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 700;
  transform: rotate(-20deg);
}

/* Предисловие: страница с одним текстом, без номера и входа */
.page--preface { cursor: default; }

/* Текст вступления написан по линейкам: высота строки равна шагу линовки,
   а низ блока отстоит от низа страницы на целое число строк — тогда каждая
   строчка ложится ровно на свою линейку, как в тетради */
.page__preface {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 150px;
  margin: 0;
  max-width: none;

  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 30px;
  text-align: center;
}

/* Смайлик дорисован в конце строки, как на полях тетради */
.preface__smile {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin-left: 0.15em;
  vertical-align: -0.45em;
  overflow: visible;
}

.smile__face .ink__stroke,
.smile__mouth .ink__stroke { stroke: var(--accent); stroke-width: 2.4; }
.smile__eye .ink__fill     { fill: var(--accent); }
.smile__eye .ink__stroke   { stroke: var(--accent); stroke-width: 1.2; }

/* Номер — это и есть вход: он один во всей странице */
.page__spot {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.page__number {
  padding: 6px 26px;
  font-size: 3.75rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

/* Наведение обводит номер кружком — так карандашом обводят дату в календаре.
   Линия не появляется целиком, а рисуется: штрих выезжает из-под пунктира,
   как будто карандаш обходит цифру по кругу. */
.page__ring {
  position: absolute;
  inset: -8px -16px;
  width: calc(100% + 32px);
  height: calc(100% + 16px);
  overflow: visible;
  pointer-events: none;
  transform: rotate(-4deg);
}

.page__ring-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* Толщина не тянется вместе с кружком, иначе на широких номерах линия
     разъезжалась бы по горизонтали */
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 480ms cubic-bezier(0.4, 0, 0.3, 1);
}

.page__spot:hover .page__ring-line { stroke-dashoffset: 0; }

/* Пройденную загадку заново не начинают: номер гаснет под штампом */
.page__spot--done .page__number {
  cursor: default;
  opacity: 0.35;
}

.page__spot--done:hover .page__ring-line,
.page--locked .page__spot:hover .page__ring-line { stroke-dashoffset: 320; }

.page--locked .page__number { cursor: default; }

.page__name {
  font-size: 1.25rem;
  color: var(--ink-soft);
}

/* Пройденная загадка помечена штампом наискось */
.page--done .page__number { opacity: 0.35; }

/* Штамп ложится прямо поверх номера — загадка закрыта */
.page__stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  padding: 3px 12px;
  pointer-events: none;

  color: var(--good);
  font-size: 1.125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 3px solid var(--good);
  border-radius: 255px 12px 225px 12px / 12px 225px 12px 255px;
  opacity: 0.8;
}

/* Обложка и форзац — единственные страницы, по которым не кликают */
.page--cover,

.page--cover { gap: 0; }

.page__title {
  margin: 0;
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page__sub {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

/* ---------- Уголки для перелистывания ---------- */

/* Уголок живёт на самой странице, в её нижнем правом углу — как загнутый
   край, за который страницу и тянут. */
.book__corner {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 20;
  width: 44px;
  height: 36px;

  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: var(--ink);
  cursor: pointer;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.book__corner:hover { transform: translateX(3px); }

.book__corner--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Разворот не дорешали — дальше пока нельзя */
.book__corner--locked {
  opacity: 0.25;
  cursor: default;
}

.book__corner--locked:hover { color: var(--ink-soft); }

/* ---------- Головоломка 1: коридор ---------- */

.maze {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 24px;
}

/* Шапка по ширине доски, чтобы кнопка «к папкам» стояла у её левого края */
.maze__header {
  position: relative;
  width: 700px;
  max-width: 100%;
  text-align: center;
}

/* Кнопка «к папкам» — общая для всех головоломок, живёт в их шапке */
.back-button {
  position: absolute;
  left: 0;
  top: -34px;
  padding: 6px 12px;

  background: transparent;
  border: 1px solid var(--ink-faint);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.back-button:hover { border-color: var(--ink); }

.maze__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.maze__hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.maze__stage {
  max-width: 100%;
  overflow-x: auto;
}

/* Доска — сплошная стена, коридор в ней вырезан */
.maze__board {
  position: relative;
  width: 700px;
  height: 380px;
  background:
    repeating-linear-gradient(45deg, var(--ink-faint) 0 1px, transparent 1px 7px),
    var(--paper);

  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 12px;

  touch-action: none;
  user-select: none;
  overflow: hidden;              /* коридор уходит за край — это и есть выход */
  transition: background 200ms ease, border-color 200ms ease;
}

.maze__board--crashed {
  background: #f7e2dd;
  border-color: var(--bad);
}

/* Коридор — единый контур, построенный по осевой линии змейки */
.maze__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Дорожка — светлый прогал в заштрихованной стене, обведённый карандашом */
.maze__floor {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Второй штрих: тот же край, чуть мимо — как у всех фигур на сайте */
.maze__floor--second {
  fill: none;
  opacity: 0.45;
  transform: translate(0.8px, -0.9px) rotate(0.12deg);
  transform-origin: center;
}

/* Выход подсвечен — до него надо добраться */
.maze__exit {
  fill: var(--good);
  stroke: var(--good);
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: 0.4;
}

/* ---------- Оффер ---------- */

.offer {
  position: absolute;
  left: 0;
  top: 0;

  cursor: grab;
  will-change: transform;
}

.offer__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Коробка обведена потолще, лента и бант — тем же карандашом */
.offer__box .ink__stroke,
.offer__bow .ink__stroke { stroke: var(--ink); stroke-width: 2.4; }
.offer__ribbon .ink__stroke { stroke: var(--accent); stroke-width: 2.6; }

/* Закрашено зигзагом, как карандашом по бумаге: штрих тонкий и не сплошной */
.offer__paint .ink__stroke {
  stroke: var(--accent-soft);
  stroke-width: 2.6;
  opacity: 0.85;
}

.offer--dragged { cursor: grabbing; }

/* Срыв в начало — единственный момент, когда предмет едет сам */
.offer--flying {
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.offer--flying .offer__paint .ink__stroke { stroke: var(--bad); opacity: 0.55; }
.offer--flying .offer__ribbon .ink__stroke { stroke: var(--bad); }

.maze__attempts {
  margin: 0;
  min-height: 1.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* ---------- Плашка победы ---------- */

.win {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(253, 251, 244, 0.86);
  animation: win-in 220ms ease-out;
}

.win__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 28px 44px;

  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 12px;
  box-shadow: 2px 3px 0 rgba(34, 48, 74, 0.18);
}

.win__title {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 600;
}

.win__next {
  padding: 9px 30px;

  background: linear-gradient(180deg, var(--folder-edge), var(--folder-front));
  border: none;
  border-radius: 7px;

  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: filter 150ms ease;
}

.win__next:hover { filter: brightness(1.08); }

@keyframes win-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Оффер вышел наружу */
/* Донёс: предмет больше не берут в руки, а лента зеленеет */
.offer--escaped { cursor: default; }

.offer--escaped .offer__ribbon .ink__stroke,
.offer--escaped .offer__paint .ink__stroke { stroke: var(--good); }

/* ---------- Головоломка 2: погоня ---------- */

.chase {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 24px;
  user-select: none;
}

.chase__header {
  position: relative;
  width: 720px;
  max-width: 100%;
  text-align: center;
}

.chase__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chase__hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.chase__stage {
  position: relative;
  width: 720px;
  max-width: 100%;
  height: 260px;

  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
  border: 1px solid var(--ink-faint);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 300ms ease;
}

.chase__stage--caught { border-color: #3f7a55; }

/* Дорога: полоса разметки едет под камерой со скоростью преследователя */
.chase__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;

  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    90deg,
    #3a4256 0 34px,
    transparent 34px 80px
  );
  background-size: 80px 3px;
  background-repeat: repeat-x;
  background-position: 0 0;
  border-top: 1px solid var(--ink-faint);
}

/* ---------- Человечек ---------- */

.figure {
  --stride: 1s;

  position: absolute;
  left: 0;
  bottom: 42px;
  width: 40px;
  height: 80px;
  will-change: transform;
}

.figure__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke-width: 3.2;
  stroke-linecap: round;
  fill: none;
}

.figure--chaser .figure__svg { stroke: var(--folder-edge); }
.figure--runner .figure__svg { stroke: var(--ink); }
.figure--chaser .figure__head { fill: var(--folder-edge); }
.figure--runner .figure__head { fill: var(--ink); }

/* Ноги и руки качаются вокруг таза и плеч; анимация стоит, пока фигура не движется */
.figure__leg,
.figure__arm {
  animation-duration: var(--stride);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: paused;
}

.figure__leg { transform-origin: 20px 46px; animation-name: figure-leg; }
.figure__arm { transform-origin: 20px 24px; animation-name: figure-arm; }

.figure__leg--r,
.figure__arm--l { animation-delay: calc(var(--stride) * -1); }

.figure--moving .figure__leg,
.figure--moving .figure__arm { animation-play-state: running; }

/* Пятится: идёт спиной вперёд, слегка отклонившись назад и озираясь */
.figure--backward .figure__svg {
  transform: rotate(-9deg);
  transform-origin: 20px 76px;
  transition: transform 400ms ease;
}

.figure--backward .figure__leg,
.figure--backward .figure__arm { animation-direction: alternate-reverse; }

@keyframes figure-leg {
  from { transform: rotate(-32deg); }
  to   { transform: rotate(32deg); }
}

@keyframes figure-arm {
  from { transform: rotate(28deg); }
  to   { transform: rotate(-28deg); }
}

.chase__presses {
  margin: 0;
  min-height: 1.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
  .figure__leg,
  .figure__arm { animation-duration: 1ms; }
}

/* ---------- Головоломка 3: стекло ---------- */

.room {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 24px;
  user-select: none;
}

.room__header {
  position: relative;
  width: 720px;
  max-width: 100%;
  text-align: center;
}

.room__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.room__hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.room__wrap {
  max-width: 100%;
  overflow-x: auto;
}

.room__stage {
  position: relative;
  width: 720px;
  height: 380px;

  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
  border: 1px solid var(--ink-faint);
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
}

.room__floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  background: var(--paper);
  border-top: 1px solid var(--ink-faint);
}

.room__note {
  margin: 0;
  min-height: 1.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* ---------- Стекло ---------- */

/* ---------- Пиньята ---------- */

.pinata {
  position: absolute;
  transform-origin: 50% -70px;
  transition: transform 260ms ease;
}

/* Цепь уходит вверх, за край сцены */
.pinata__chain {
  position: absolute;
  left: 50%;
  top: -72px;
  width: 2px;
  height: 78px;
  margin-left: -1px;
  background: repeating-linear-gradient(180deg, var(--ink) 0 6px, transparent 6px 10px);
}

.pinata__body,
.pinata__cracks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pinata__belly .ink__fill,
.pinata__head .ink__fill { fill: var(--accent-soft); }

.pinata__frill .ink__stroke { stroke: var(--accent); }

.pinata__cracks {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Рвётся сама бумага: всё, что вылезает за бок ослика, обрезается */
  clip-path: ellipse(42px 30px at 74px 58px);
}

/* Файл тащат прямо над ней */
.pinata--target { transform: scale(1.04); }
.pinata--target .pinata__belly .ink__fill { fill: var(--accent); }

/* Удар — качается на цепи */
.pinata--swing { animation: pinata-swing 900ms ease-in-out; }

@keyframes pinata-swing {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-9deg); }
  45%  { transform: rotate(7deg); }
  70%  { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

/* Лопнула: бумага расходится, сыплются сладости */
.pinata--broken .pinata__body { opacity: 0.35; transform: rotate(8deg) translateY(10px); }
.pinata--broken .pinata__cracks { opacity: 0; }

.pinata__candy {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.candy {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--accent-soft);
  opacity: 0;
}

.pinata--broken .candy { animation: candy-fall 1100ms cubic-bezier(0.3, 0, 1, 1) forwards; }

.candy--1 { --dx: -70px; animation-delay: 0ms; }
.candy--2 { --dx: -44px; animation-delay: 60ms; background: var(--accent); }
.candy--3 { --dx: -18px; animation-delay: 30ms; }
.candy--4 { --dx: 10px;  animation-delay: 90ms; background: var(--good); }
.candy--5 { --dx: 36px;  animation-delay: 20ms; }
.candy--6 { --dx: 62px;  animation-delay: 120ms; background: var(--accent); }
.candy--7 { --dx: -30px; animation-delay: 150ms; background: var(--good); }
.candy--8 { --dx: 48px;  animation-delay: 180ms; }

@keyframes candy-fall {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 1; transform: translate(var(--dx), 190px) rotate(320deg); }
}

.person {
  position: absolute;
  left: 540px;
  bottom: 44px;
  width: 120px;
  height: 140px;
}

.person__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
}

.person__chair { stroke: #4a5366; stroke-width: 3; }
.person__head  { fill: var(--ink); stroke: var(--ink); }
.person__body,
.person__arm   { stroke: var(--ink); }

/* Руки вскидываются, когда стекло разбито */
.person__arm {
  transform-origin: 60px 46px;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.person--free .person__arm:nth-of-type(1) { transform: rotate(150deg); }
.person--free .person__arm:nth-of-type(2) { transform: rotate(120deg); }

/* ---------- Предметы ---------- */

.item {
  position: absolute;
  left: 0;
  top: 0;
  cursor: grab;
  will-change: transform;
  z-index: 1;
}

.item--dragged {
  cursor: grabbing;
  z-index: 3;
}

/* Падение на пол — единственный момент, когда предмет едет сам */
.item--falling { transition: transform 420ms cubic-bezier(0.3, 0.6, 0.5, 1); }

.item__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Контур — тот же карандаш, что и у остальных фигур */
.item__line .ink__stroke { stroke: var(--ink); stroke-width: 2.4; }
.item__wire .ink__stroke { stroke: var(--ink-soft); stroke-width: 2; }

/* Закраска зигзагом: у каждого предмета свой карандаш */
.item__paint .ink__stroke {
  stroke-width: 2.6;
  opacity: 0.8;
}

.item--1 .item__paint .ink__stroke { stroke: var(--sea-soft); }
.item--2 .item__paint .ink__stroke { stroke: var(--accent-soft); }
.item--3 .item__paint .ink__stroke { stroke: #9cc7a6; }
.item--4 .item__paint .ink__stroke { stroke: var(--ink-faint); }

/* ---------- Головоломка 4: танец ---------- */

.dance {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 24px;
  user-select: none;
}

.dance__header {
  position: relative;
  width: 720px;
  max-width: 100%;
  text-align: center;
}

.dance__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dance__hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.dance__stage {
  position: relative;
  width: 720px;
  max-width: 100%;
  height: 300px;

  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
  border: 1px solid var(--ink-faint);
  border-radius: 12px;
  overflow: hidden;
}

/* Пол — просто линия, чтобы читались прыжок и присед */
.dance__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  border-top: 1px solid var(--ink-faint);
}

/* Надпись на заднике сцены — она же разгадка */
.dance__backdrop {
  position: absolute;
  left: 0;
  right: 0;
  top: 96px;
  text-align: center;
  font-size: 3.25rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ffffff;
  opacity: 0.07;
  pointer-events: none;
}

.dance__message {
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--good);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.dance__message--angry { color: var(--bad); }

/* ---------- Фигурка танцора ---------- */

.dancer {
  position: absolute;
  bottom: 44px;
  width: 60px;
  height: 120px;
  transform-origin: 50% 100%;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Оба стоят зеркально относительно середины сцены: танцор справа, игрок
   слева — на равном расстоянии от центра */
.dancer--dancer { left: calc(75% - 30px); }
.dancer--player { left: calc(25% - 30px); }

.dancer__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.dancer--dancer .dancer__svg { stroke: var(--ink); }
.dancer--dancer .dancer__head { fill: var(--ink); }
.dancer--player .dancer__svg { stroke: var(--folder-edge); }
.dancer--player .dancer__head { fill: var(--folder-edge); }

/* Лицо рисуется поверх залитой головы тёмным */
.dancer__eye   { fill: var(--paper); stroke: none; }
.dancer__mouth { stroke: var(--paper); stroke-width: 1.6; transition: d 160ms ease; }
.dancer__brow  {
  stroke: var(--paper);
  stroke-width: 1.4;
  opacity: 0;
  transition: opacity 120ms ease, transform 160ms ease;
}

/* Хмурится: брови сдвигаются к переносице */
.dancer--angry .dancer__brow { opacity: 1; }
.dancer--angry .dancer__brow--l { transform: rotate(14deg);  transform-origin: 16.5px 6px; }
.dancer--angry .dancer__brow--r { transform: rotate(-14deg); transform-origin: 23.5px 6px; }

/* Улыбается — глаза чуть прищурены */
.dancer--happy .dancer__eye { transform: scaleY(0.6); transform-origin: center; }

/* Руки и ноги двигаются от плеч и таза */
.dancer__arm { transform-origin: 20px 25px; transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1); }
.dancer__leg { transform-origin: 20px 46px; transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1); }

/* Позы */
.dancer--left  { transform: translateX(-70px) rotate(-12deg); }
.dancer--right { transform: translateX(70px) rotate(12deg); }
.dancer--up    { transform: translateY(-48px); }
.dancer--down  { transform: translateY(14px) scaleY(0.72); }

.dancer--left  .dancer__arm--l { transform: rotate(60deg); }
.dancer--left  .dancer__arm--r { transform: rotate(40deg); }
.dancer--right .dancer__arm--r { transform: rotate(-60deg); }
.dancer--right .dancer__arm--l { transform: rotate(-40deg); }

.dancer--up .dancer__arm--l { transform: rotate(150deg); }
.dancer--up .dancer__arm--r { transform: rotate(-150deg); }
.dancer--up .dancer__leg--l { transform: rotate(18deg); }
.dancer--up .dancer__leg--r { transform: rotate(-18deg); }

.dancer--down .dancer__leg--l { transform: rotate(-22deg); }
.dancer--down .dancer__leg--r { transform: rotate(22deg); }
.dancer--down .dancer__arm--l { transform: rotate(-30deg); }
.dancer--down .dancer__arm--r { transform: rotate(30deg); }

/* ---------- Экранные стрелки ---------- */

.pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pad__row {
  display: flex;
  gap: 6px;
}

.pad__key {
  width: 46px;
  height: 40px;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 120ms ease, transform 80ms ease;
}

.pad__key:hover  { background: var(--paper); }
.pad__key:active { background: var(--paper); transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .dancer,
  .dancer__arm,
  .dancer__leg { transition-duration: 1ms; }
}

/* ---------- Головоломка 5: мозаика ---------- */

.mosaic {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 24px;
  user-select: none;
}

.mosaic__header {
  position: relative;
  width: 720px;
  max-width: 100%;
  text-align: center;
}

.mosaic__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mosaic__hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.mosaic__stage { position: relative; }

.mosaic__board {
  display: grid;
  grid-template-columns: repeat(4, 108px);
  gap: 8px;
}

.mosaic__tile {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;

  /* Плитка лежит на листе и кроет его: клетка сквозь неё просвечивать
     не должна, иначе непонятно, где доска, а где бумага */
  background: var(--sheet);
  border: 1px solid var(--ink-faint);
  border-radius: 10px;

  font-size: 2.25rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: transform 120ms ease, background 120ms ease;
}

.mosaic__tile:hover { background: var(--paper); }
.mosaic__tile:active { transform: scale(0.97); }

/* Вынутая плитка лежит поверх страницы там, где её оставили */
.mosaic__tile--loose {
  position: fixed;
  z-index: 15;
  margin: 0;
  box-shadow: 2px 3px 0 rgba(34, 48, 74, 0.18);
  cursor: grab;
}

.mosaic__tile--held {
  cursor: grabbing;
  transform: scale(1.04);
  box-shadow: 2px 3px 0 rgba(34, 48, 74, 0.18);
}

/* Пока плитку таскают, курсор не должен цеплять текст на странице */
.mosaic { touch-action: none; }

/* Пустая клетка: в неё и двигают соседей */
.mosaic__hole {
  width: 108px;
  height: 108px;
  border: 1px dashed #2c3445;
  border-radius: 10px;
}

/* ---------- Собеседник за стеклом ---------- */

.speech {
  position: absolute;
  right: 16px;
  top: 18px;
  width: 260px;
  padding: 10px 14px;
  background: #1c2233;
  border: 1px solid #39445e;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}

.speech--shown { opacity: 1; transform: none; }

.speech__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.speech__how {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

/* Расшифровка: значки мозаики в порядке, который назвал собеседник */
.decoded {
  width: 720px;
  max-width: 100%;
  margin-top: 4px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 12px;
}

.decoded__title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.decoded__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.decoded__item {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 9px;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 8px;
}

.decoded__symbol { font-size: 1.05rem; }

.decoded__number {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--accent);
}

/* ---------- Переключатель языка ---------- */

.lang {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 20;
  font-size: 0.8125rem;
}

.lang__current {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;

  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 8px;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.lang__current:hover { color: var(--ink); border-color: var(--ink-soft); }

.lang__caret { font-size: 0.6875rem; }

.lang__list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 150px;
  padding: 4px;

  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 10px;
  box-shadow: 2px 3px 0 rgba(34, 48, 74, 0.18);

  display: none;
}

.lang--open .lang__list { display: block; }

.lang__option {
  display: block;
  width: 100%;
  padding: 7px 10px;

  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lang__option:hover { background: var(--paper); }

.lang__option--active { color: var(--folder-edge); }

/* ---------- Головоломка 6: котики ---------- */

.cats {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 24px;
  user-select: none;
}

.cats__header {
  position: relative;
  width: 820px;
  max-width: 100%;
  text-align: center;
}

.cats__title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.cats__score {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Число в заголовке — не текст, а гнездо: его ковыряют, из него забирают */
/* Число в заголовке с самого начала выглядит плиткой из мозаики — так видно,
   что его можно расковырять, и понятно, что встанет на его место. */
.cats__nest {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  height: 52px;
  padding: 0 8px;

  background: linear-gradient(180deg, var(--paper), var(--paper));
  border: 1px solid var(--ink-faint);
  border-radius: 10px;
  color: var(--ink);
  font-size: 1.375rem;
  /* Курсор не меняется: то, что число можно расковырять, — и есть разгадка,
     а рука при наведении выдавала бы её раньше времени */
  cursor: default;
  transition: transform 120ms ease, opacity 120ms ease;
}

/* Два щелчка расшатывают число, третий его отрывает */
.cats__nest--cracked-1 { transform: rotate(-4deg) translateY(2px); }
.cats__nest--cracked-2 {
  transform: rotate(11deg) translateY(7px);
  opacity: 0.7;
  animation: nest-wobble 140ms ease-in-out infinite;
}

@keyframes nest-wobble {
  0%, 100% { transform: rotate(11deg) translateY(7px); }
  50%      { transform: rotate(7deg)  translateY(9px); }
}

/* Пустое гнездо ждёт плитку */
.cats__nest--empty {
  background: rgba(34, 48, 74, 0.05);
  border-style: dashed;
  border-color: var(--ink-soft);
  cursor: default;
}

.cats__nest--filled { cursor: grab; }

.cats__room {
  position: relative;
  display: flex;
  gap: 12px;
}

.cats__field {
  position: relative;
  width: 660px;
  height: 360px;
  max-width: 100%;

  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
  border: 1px solid var(--ink-faint);
  border-radius: 12px;
  overflow: hidden;
}

/* Клетка рядом с полем: сюда садятся пойманные — ненадолго */
.cats__cage {
  width: 150px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;

  background:
    repeating-linear-gradient(90deg, var(--ink-faint) 0 2px, transparent 2px 18px),
    var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 12px;
}

.cat {
  position: absolute;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  cursor: pointer;
  will-change: transform;
}

/* Пойманный уходит со сцены — он теперь сидит в клетке */
.cat--hidden { display: none; }

.cat--caged {
  position: static;
  width: 38px;
  height: 38px;
  cursor: default;
  opacity: 0.85;
}

.cat__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Мелкая рысца: сам рисунок и так дрожит пером, ему хватает лёгкой качки,
     чтобы читаться бегущим, а не плывущим по полю */
  animation: cat-run 360ms ease-in-out infinite;
}

/* Чтобы поле не скакало в такт одним махом, каждый бежит со своей ноги */
.cat:nth-child(4n+1) .cat__svg { animation-delay: -90ms; }
.cat:nth-child(4n+2) .cat__svg { animation-delay: -180ms; }
.cat:nth-child(4n+3) .cat__svg { animation-delay: -270ms; }

@keyframes cat-run {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* В клетке уже никто не бежит */
.cat--caged .cat__svg { animation: none; }

/* Котик обведён потоньше человечков: зверь маленький, и жирный контур
   съедал бы мордочку */
.cat__body .ink__stroke,
.cat__head .ink__stroke,
.cat__ear .ink__stroke,
.cat__muzzle .ink__stroke { stroke-width: 4; }

.cat__tail .ink__stroke,
.cat__leg .ink__stroke { stroke-width: 4.2; }

/* Мордочка — совсем тонким пером */
.cat__eye .ink__stroke,
.cat__nose .ink__stroke,
.cat__smile .ink__stroke { stroke-width: 2.4; }

.cat__whisker .ink__stroke { stroke-width: 1.8; opacity: 0.55; }

.cat--caged .ink__stroke { stroke: var(--ink-soft); }

/* ---------- Головоломка 7: светофор ---------- */

.light {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 16px;
  user-select: none;
}

.light__header {
  position: relative;
  width: 100%;
  text-align: center;
}

.light__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.light__hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  transition: color 160ms ease;
}

.light__hint--caught { color: var(--bad); }

/* Дорога тянется во всю ширину окна — в этом вся соль головоломки */
.light__road {
  position: relative;
  width: 100%;
  height: 240px;
  min-width: 0;

  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
  border: 1px solid var(--ink-faint);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}

.light__road--caught {
  background: #f7e2dd;
  border-color: var(--bad);
}

/* Бордюр, по которому идут */
.light__kerb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  border-top: 1px dashed var(--ink-faint);
}

.walker {
  position: absolute;
  left: 8px;
  bottom: 44px;
  width: 44px;
  height: 80px;
  will-change: transform;
}

.walker__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--folder-edge);
  stroke-width: 3;
  stroke-linecap: round;
}

.walker__head { fill: var(--folder-edge); }

/* ---------- Светофор ---------- */

.tl {
  position: absolute;
  right: 18px;
  bottom: 44px;
  width: 34px;
}

.tl__case {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;

  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 10px;
}

.tl__lamp {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  transition: background 120ms ease, box-shadow 120ms ease;
}

.tl__pole {
  width: 8px;
  height: 56px;
  margin: 0 auto;
  background: var(--paper);
  border-left: 2.5px solid var(--ink);
  border-right: 2.5px solid var(--ink);
}

.tl--red .tl__lamp--red {
  background: var(--bad);
  border-color: var(--ink);
  box-shadow: 0 0 14px rgba(194, 82, 66, 0.55);
}

.tl--yellow .tl__lamp--yellow {
  background: var(--accent);
  box-shadow: 0 0 14px rgba(217, 139, 58, 0.55);
}

.tl--green .tl__lamp--green {
  background: var(--good);
  box-shadow: 0 0 14px rgba(79, 143, 91, 0.55);
}

/* ---------- Головоломка 8: настольный теннис ---------- */

.pong {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 24px;
  user-select: none;
}

.pong__header {
  position: relative;
  width: 760px;
  max-width: 100%;
  text-align: center;
}

.pong__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pong__hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Стол занимает не всё окно: справа остаётся место, куда улетает мяч */
.pong__table {
  position: relative;
  width: 760px;
  max-width: calc(100% - 120px);
  height: 420px;
  background: transparent;

  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
  border: 2px solid var(--ink-faint);
  border-radius: 8px;
}

.pong__net {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: repeating-linear-gradient(180deg, var(--ink-soft) 0 10px, transparent 10px 20px);
  opacity: 0.6;
}

.pong__paddle {
  position: fixed;
  left: 0;
  top: 0;
  width: 12px;
  height: 96px;
  border-radius: 6px;
  z-index: 6;
  will-change: transform;
}

/* Ракетки — обведённые пером дощечки, а не заливки */
.pong__paddle--mine {
  background: var(--accent-soft);
  border: 2.5px solid var(--ink);
}

.pong__paddle--theirs {
  background: var(--paper);
  border: 2.5px solid var(--ink);
}

.pong__ball {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 0 0 10px rgba(34, 48, 74, 0.25);
  z-index: 6;
  will-change: transform;
}

/* Полоса прокрутки во всю высоту окна. Нарисована нами: прокручивать ей
   нечего, она нужна, чтобы по мячу было чем ударить. */
.pong__bar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  /* Настоящая ширина приходит из игры: её снимают с системной полосы, потому
     что при смене масштаба та меняется в пикселях страницы. Здесь — запас на
     случай, если померить не вышло */
  width: 15px;
  background: var(--paper);
  border-left: 1px solid var(--ink-faint);
  z-index: 7;
  cursor: default;
}

.pong__thumb {
  position: absolute;
  /* Отступы долей полосы, а не пикселями: иначе на узкой полосе (страница
     увеличена) от ползунка остаётся ниточка */
  left: 18%;
  right: 18%;
  border-radius: 6px;
  background: var(--ink-faint);
  transition: background 120ms ease;
}

.pong__thumb:hover  { background: var(--ink-soft); }
.pong__thumb:active { background: var(--ink-soft); }

/* ---------- Головоломка 9: забег ---------- */

.run {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 24px;
  user-select: none;
}

.run__header {
  position: relative;
  width: 720px;
  max-width: 100%;
  text-align: center;
}

.run__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.run__hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.run__panel {
  width: 720px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.run__points { font-family: ui-monospace, Consolas, monospace; }

.run__breath {
  display: flex;
  align-items: center;
  gap: 8px;
}

.run__breath-bar {
  width: 180px;
  height: 8px;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 4px;
  overflow: hidden;
}

.run__breath-fill {
  height: 100%;
  background: var(--folder-front);
  transition: width 120ms linear;
}

.run__stage {
  position: relative;
  width: 720px;
  max-width: 100%;
  height: 300px;

  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
  border: 1px solid var(--ink-faint);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

/* В тихом забеге светает */
.run__stage--calm {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 62%, var(--paper) 100%);
}

.run__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
  border-top: 1px solid var(--ink-faint);
}

.runner {
  position: absolute;
  width: 34px;
  height: 64px;
  transition: bottom 60ms linear;
}

.runner__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--folder-edge);
  stroke-width: 3;
  stroke-linecap: round;
}

.runner__head { fill: var(--folder-edge); }

.runner__leg { transform-origin: 17px 38px; }
.runner__arm { transform-origin: 17px 22px; }

.runner--running .runner__leg--l { animation: stride 320ms ease-in-out infinite alternate; }
.runner--running .runner__leg--r { animation: stride 320ms ease-in-out infinite alternate-reverse; }
.runner--running .runner__arm--l { animation: swing 320ms ease-in-out infinite alternate-reverse; }
.runner--running .runner__arm--r { animation: swing 320ms ease-in-out infinite alternate; }

@keyframes stride {
  from { transform: rotate(-24deg); }
  to   { transform: rotate(24deg); }
}

@keyframes swing {
  from { transform: rotate(-18deg); }
  to   { transform: rotate(18deg); }
}

/* Идёт не спеша — шаг вдвое медленнее бегового */
.runner--walking .runner__leg--l { animation: stride 620ms ease-in-out infinite alternate; }
.runner--walking .runner__leg--r { animation: stride 620ms ease-in-out infinite alternate-reverse; }
.runner--walking .runner__arm--l { animation: swing 620ms ease-in-out infinite alternate-reverse; }
.runner--walking .runner__arm--r { animation: swing 620ms ease-in-out infinite alternate; }

/* Дошёл — сел у воды: ноги вперёд, сам пониже */
.runner--sitting { transform: translateY(22px); }
.runner--sitting .runner__leg--l { transform: rotate(-72deg); }
.runner--sitting .runner__leg--r { transform: rotate(-62deg); }
.runner--sitting .runner__arm--l { transform: rotate(28deg); }
.runner--sitting .runner__arm--r { transform: rotate(-16deg); }

.hurdle {
  position: absolute;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
}

/* ---------- Дом у океана ---------- */

.seaside {
  position: absolute;
  right: 24px;
  bottom: 64px;
  width: 260px;
  height: 200px;
  pointer-events: none;
}

.seaside__svg { width: 100%; height: 100%; }

.seaside__sun  { fill: #f3d089; opacity: 0.9; }
.seaside__wave { fill: none; stroke: var(--ink-soft); stroke-width: 2; opacity: 0.55; }
.seaside__roof { fill: #8e5a4a; }
.seaside__wall { fill: #d8cfc0; }
.seaside__door { fill: #6b4a3a; }

/* ---------- Старт и прилавок улучшений ---------- */

.run__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(253, 251, 244, 0.86);
}

.run__start {
  padding: 10px 30px;
  background: var(--folder-front);
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.run__start:hover { background: var(--folder-edge); }

.shop {
  width: 300px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 12px;
  text-align: center;
}

.shop__title {
  margin: 0 0 2px;
  font-weight: 600;
}

.shop__points {
  margin: 0 0 14px;
  color: var(--muted);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8125rem;
}

.shop__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  text-align: left;
}

.shop__name  { flex: 1; font-size: 0.875rem; }
.shop__level { color: var(--folder-edge); letter-spacing: 2px; font-size: 0.75rem; }

/* Минус — цена — плюс: очки видно куда переложить */
.shop__deal {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop__step {
  min-width: 30px;
  padding: 3px 8px;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.1;
  cursor: pointer;
}

.shop__step:hover:not(:disabled) { background: var(--paper); }
.shop__step:disabled { opacity: 0.35; cursor: default; }

/* Цена следующего уровня — она же и возвращается за снятый */
.shop__price {
  min-width: 34px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-family: ui-monospace, Consolas, monospace;
}

.shop .run__start { margin-top: 10px; }


/* ---------- Финальные развороты ----------

   Рисунок шире страницы вдвое и прибит к её краю: на левой странице видна
   его левая половина, на правой — правая, и через сгиб они сходятся в одну
   картинку. Подпись разрезана там же и дочитывается на соседней странице.
*/

.page--scene {
  padding: 0;
  overflow: hidden;
  cursor: default;
}

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.scene__art {
  position: absolute;
  top: 50%;
  width: 200%;
  /* Чуть ниже середины: сверху страницы теперь стоит подпись */
  transform: translateY(-40%);
}

.scene__art--left  { left: 0; }
.scene__art--right { left: -100%; }

.scene__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Подпись написана от руки на полях: собрана в небольшой блок у сгиба и
   чуть завалена, как строчка, написанная на весу */
.scene__line {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 32px;
  max-width: 250px;
  margin: 0;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* Фраза перетекает через сгиб: её начало жмётся к нему справа, а
   продолжение начинается сразу за ним */
.scene__line--left {
  left: auto;
  text-align: right;
  transform: rotate(-0.8deg);
  transform-origin: right top;
}

.scene__line--right {
  right: auto;
  text-align: left;
  transform: rotate(0.6deg);
  transform-origin: left top;
}

/* Чернила сцен: солнце и вода бледнее, остальное — обычный контур */
.scene__sun .ink__stroke,
.scene__ray .ink__stroke  { stroke: var(--accent); }

.scene__horizon .ink__stroke,
.scene__road .ink__stroke,
.scene__ground .ink__stroke { stroke: var(--ink-soft); }

/* Море: заливка от горизонта до песка и синие волны поверх неё */
.scene__water .ink__fill   { fill: var(--sea-wash); }
.scene__water .ink__stroke { stroke: transparent; }

.scene__sea .ink__stroke,
.scene__wave .ink__stroke  { stroke: var(--sea); }

.scene__glint .ink__stroke,
.scene__shore .ink__stroke { stroke: var(--sea-soft); }

.scene__dust .ink__stroke,
.scene__sand .ink__stroke,
.scene__cloud .ink__stroke { stroke: var(--ink-faint); }

/* Пятна жирафа — сплошные, как глаза у котиков */
.scene__spot .ink__fill { fill: var(--ink-soft); }

.scene__wall .ink__fill,
.scene__roof .ink__stroke,
.scene__window .ink__stroke,
.scene__door .ink__stroke { stroke: var(--ink); }

/* Птицы машут: фигура сжимается по высоте вокруг своей верхней точки —
   этого хватает, чтобы крылья читались живыми */
.scene__bird {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: scene-flap 520ms ease-in-out infinite alternate;
}

.scene__bird--b { animation-duration: 620ms; animation-delay: -140ms; }
.scene__bird--c { animation-duration: 450ms; animation-delay: -260ms; }

@keyframes scene-flap {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.4); }
}

/* Пейзаж едет навстречу: кусок нарисован дважды подряд, и когда первый
   уходит на свою ширину, второй оказывается ровно на его месте */
.scene__drift {
  animation: scene-drift linear infinite;
}

.scene__drift--road { animation-duration: 13s; }
.scene__drift--walk { animation-duration: 26s; }

@keyframes scene-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-720px); }
}

/* Машину потряхивает на грунтовке, колёса крутятся */
.scene__ride {
  animation: scene-bump 280ms ease-in-out infinite alternate;
}

@keyframes scene-bump {
  from { transform: translateY(0); }
  to   { transform: translateY(-2.5px); }
}

.scene__wheel {
  transform-box: view-box;
  animation: scene-spin 620ms linear infinite;
}

.scene__wheel--front { transform-origin: 464px 242px; }
.scene__wheel--back  { transform-origin: 558px 242px; }

@keyframes scene-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Шаг: ноги и руки ходят вокруг бедра и плеча — точки заданы в тех же
   координатах, в которых нарисована сцена */
.scene__step,
.scene__swing {
  transform-box: view-box;
  animation: scene-stride 620ms ease-in-out infinite alternate;
}

.scene__step  { transform-origin: 150px 202px; }
.scene__swing { transform-origin: 150px 172px; animation-direction: alternate-reverse; }

.scene__step--b  { animation-direction: alternate-reverse; }
.scene__swing--b { animation-direction: alternate; }

@keyframes scene-stride {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}

/* Тропинка в обход: пунктир, чтобы читалась следом, а не забором */
.scene__trail .ink__stroke {
  stroke: var(--ink-soft);
  stroke-dasharray: 8 10;
}

/* ---------- Записка для телефона ----------

   Ложится поверх всего и держит человека, пока он не решит, читать ли
   историю в свободном режиме.
*/

.gate {
  position: fixed;
  inset: 0;
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;

  background: rgba(253, 251, 244, 0.94);
}

.gate__note {
  max-width: 420px;
  padding: 24px 22px 20px;
  background: var(--paper);
  border: 2px solid var(--ink);
  text-align: center;
}

.gate__title {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 1.5rem;
}

.gate__text {
  margin: 0 0 20px;
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.4;
}

/* ---------- Цвета нарисованных от руки фигур ----------

   Контур всегда чернильный, заливка — бумага: фигура должна выглядеть
   обведённой ручкой, а не закрашенной. Прежние правила красили сами группы,
   поэтому здесь адресуемся к штрихам внутри них.
*/

.ink__fill { fill: var(--paper); }

/* Глаза, носы и прочие точки — наоборот, сплошные чернила */
.cat__eye .ink__fill,
.cat__nose .ink__stroke { fill: var(--ink); }

/* Оба танцора обведены одинаково — как фигурки в погоне, которые читаются
   лучше всего. Отличает их только лёгкая разница в нажиме. */
.dancer--dancer .ink__stroke { opacity: 0.82; }

.cat--caged .ink__stroke { opacity: 0.55; }

/* Солнце и волны у океана — бледнее остального рисунка */
.seaside__sun .ink__stroke  { stroke: var(--accent); }
.seaside__wave .ink__stroke { stroke: var(--ink-soft); }
.seaside__wall .ink__fill,
.seaside__roof .ink__stroke,
.seaside__door .ink__stroke { stroke: var(--ink); }

/* Барьеры в забеге и прочая мелочь на дорожке */
.hurdle {
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 1px;
}

/* Поля игр — тот же лист, только обведённый рамкой */
.dance__stage,
.chase__stage,
.room__stage,
.cats__field,
.light__road,
.run__stage,
.pong__table,
.mosaic__hole,
.cats__cage {
  background: transparent;
  border: 2px solid var(--ink);
}

.pong__net { background: repeating-linear-gradient(180deg, var(--ink) 0 8px, transparent 8px 20px); }

.dance__backdrop { color: var(--ink); opacity: 0.12; }

/* Стена «оффера»: заштрихована, прогал коридора читается на её фоне */
/* Стена заштрихована от руки: два слоя разного размера, чтобы штрих не
   складывался в machine-ровную сетку */
.maze__board {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27'%3E%3Cg fill='none' stroke='%23a8b4c6' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 26 Q7 15 12 1'/%3E%3Cpath d='M13 27 Q20 16 24 3'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='43'%3E%3Cg fill='none' stroke='%23c3cddb' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M4 41 Q12 26 19 6'/%3E%3Cpath d='M26 43 Q33 29 39 12'/%3E%3C/g%3E%3C/svg%3E");
  background-color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 255px 14px 225px 16px / 16px 225px 16px 255px;
}



/* ---------- Обводка от руки ----------

   Приём простой: разные радиусы по углам дают кривой прямоугольник, будто
   его обвели пером. Второй контур поверх, чуть повёрнутый, — это тот самый
   второй штрих, каким обведены и все фигуры.
*/

.drawn,
.back-button,
.win__card,
.shop,
.shop__step,
.run__start,
.pad__key,
.mosaic__tile,
.mosaic__hole,
.cats__nest,
.lang__current,
.lang__list,
.decoded,
.home__reset {
  border-radius: 255px 12px 225px 15px / 15px 225px 15px 255px;
}

.win__next,
.book__reset,
.shop__step,
.run__start,
.back-button,
.pad__key {
  position: relative;
}

.win__next::after,
.shop__step::after,
.run__start::after,
.back-button::after,
.pad__key::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--ink);
  border-radius: 225px 15px 255px 12px / 255px 15px 225px 15px;
  opacity: 0.35;
  transform: rotate(-0.4deg);
  pointer-events: none;
}

/* ---------- Читаемость ----------

   Рукописный шрифт мельче обычного при том же кегле, поэтому весь служебный
   текст поднят на пару пунктов и пишется чернилами, а не полутоном.
*/

.win__next,
.shop__step,
.run__start,
.pad__key,
.lang__current,
.lang__option,
.shop__name {
  font-size: 1rem;
  color: var(--ink);
}

.dance__hint,
.maze__hint,
.chase__hint,
.room__hint,
.cats__score,
.light__hint,
.pong__hint,
.run__hint,
.mosaic__hint,
.page__name,
.page__sub,
.maze__attempts,
.room__note {
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.shop__title,
.shop__points,
.run__points,
.run__breath { font-size: 1rem; }

/* Заголовки экранов — заметно крупнее, это же надписи от руки */
.dance__title,
.maze__title,
.chase__title,
.room__title,
.cats__title,
.light__title,
.pong__title,
.run__title,
.mosaic__title { font-size: 1.75rem; }

/* ---------- Подтверждение сброса ---------- */

.confirm {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(253, 251, 244, 0.72);
}

.confirm__card {
  min-width: 300px;
  padding: 22px 26px;
  text-align: center;

  background: var(--paper);
  border: 2.5px solid var(--ink);
  box-shadow: 3px 4px 0 rgba(34, 48, 74, 0.18);
}

.confirm__text {
  margin: 0 0 18px;
  font-size: 1.25rem;
}

.confirm__row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirm__yes,
.confirm__no {
  padding: 7px 22px;
  background: var(--paper);
  border: 2px solid var(--ink);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.confirm__yes { background: var(--accent-soft); }
.confirm__yes:hover,
.confirm__no:hover { border-color: var(--accent); }

/* ---------- Подсказки и стираемый ответ ---------- */

.hint {
  position: fixed;
  left: 22px;
  top: 18px;
  z-index: 30;
}

.hint__ask {
  width: 40px;
  height: 40px;
  padding: 0;

  background: var(--paper);
  border: 2px solid var(--ink-faint);
  color: var(--ink);
  font: inherit;
  font-size: 1.375rem;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.hint__ask:hover { border-color: var(--ink); }

/* Намёк приходит сам и лежит рядом со знаком вопроса */
.hint__whisper {
  position: absolute;
  left: 52px;
  top: 4px;
  width: 280px;
}

/* Слово, на которое подсказка нажимает голосом */
.hint__loud {
  font-weight: 700;
}

.hint__line {
  margin: 0;
  padding: 8px 12px;

  background: var(--paper);
  border: 1px dashed var(--ink-faint);
  border-radius: 255px 12px 225px 15px / 15px 225px 15px 255px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  animation: hint-in 320ms ease-out;
}

@keyframes hint-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Карточка с ответом под защитным слоем */
.hint__sheet {
  position: absolute;
  left: 0;
  top: 52px;
  width: 460px;
  padding: 18px 20px;

  background: var(--paper);
  border: 2.5px solid var(--ink);
  box-shadow: 3px 4px 0 rgba(34, 48, 74, 0.18);
}

.hint__title {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--ink-soft);
}

.hint__scratch {
  position: relative;
  width: 420px;
  height: 150px;
  max-width: 100%;
}

.hint__answer {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 10px 12px;

  display: flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  font-size: 1.0625rem;
  line-height: 1.45;
}

.hint__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: none;
  transition: opacity 420ms ease;
}

/* Стёрли достаточно — остатки слоя сходят сами */
.hint__cover--gone {
  opacity: 0;
  pointer-events: none;
}

/* Монетка: её возят по полю */
.hint__coin {
  width: 46px;
  height: 46px;
  margin: 14px auto 0;

  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 2.5px solid var(--accent);
  border-radius: 50%;
  color: var(--ink);
  font-size: 1.125rem;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.hint__coin:active { cursor: grabbing; transform: scale(0.96); }

.hint__close {
  display: block;
  margin: 14px auto 0;
  padding: 6px 18px;

  background: transparent;
  border: 2px solid var(--ink-faint);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.hint__close:hover { border-color: var(--ink); }

/* Строчка, которой открывается загадка на странице блокнота */
.page__story {
  margin: 0 18px 18px;
  max-width: 280px;
  color: var(--ink);
  font-size: 1.1875rem;
  line-height: 1.5;
  text-align: center;
}

/* Мечта — то самое «она», за которым всё и гонится */
.page__dream {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Закрытая загадка: до неё ещё не дошли по порядку */
.page--locked {
  cursor: default;
}

.page--locked .page__number,
.page--locked .page__name,
.page--locked .page__story {
  opacity: 0.3;
}

.photo {
  width: 232px;
  padding: 10px 10px 26px;
  background: var(--sheet);
  border: 1px solid var(--ink-faint);
  box-shadow: 2px 3px 0 rgba(34, 48, 74, 0.18);
  transform: rotate(-2deg);
}

.photo { cursor: pointer; }

/* Окошко рамки: в нём лежат оба кадра, один поверх другого */
.photo__shot {
  position: relative;
  width: 100%;
  height: 146px;
  background: var(--paper);
  overflow: hidden;
}

.photo__take {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Кадры вклеены в рамку: если пропорции не совпадут, обрежется по краям,
     а не расплющится */
  object-fit: cover;
  transition: opacity 520ms ease;
}

/* Проявляется один сквозь другой, а не подменяется рывком */
.photo__take--gone { opacity: 0; }

.page__thanks {
  margin: 20px 0 14px;
  font-size: 1.375rem;
  text-align: center;
}

/* Подпись в конце письма: адрес просто строчкой, ничем не выделен */
.page__contact {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.page__again {
  padding: 8px 20px;
  background: var(--accent-soft);
  border: 2px solid var(--ink);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

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

.page__again-note {
  margin: 10px 18px 0;
  max-width: 250px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  text-align: center;
}