/* ==========================================================================
   Дневник путешественницы — общая дизайн-система кабинета.

   Тёмный «вечерний стол», на нём листы бумаги, единственный акцент — янтарь.
   Фиолетовый и сиреневый не используем: ассоциация с таро. Космос, звёзды,
   свечение и градиентные «орбы» ушли вместе со старой темой.

   Шрифты подключаются в HTML (Google Fonts): Nunito — заголовки (жирный
   округлый гротеск, игра без строгости), Literata — длинный текст
   заданий и писем, Golos Text — интерфейс, Caveat — даты и подписи от руки.

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

:root {
  /* --- Стол: тёмный фон и то, что на нём лежит --- */
  --table: #1B1815;
  --table-raise: #221E19;
  --surface: #2A241E;
  --surface-2: #342C24;
  --line: #3D362E;
  --line-soft: rgba(255, 255, 255, .06);
  --track: #332C25;
  --trail-dim: #4A433B;

  /* --- Бумага --- */
  --paper: #F6F0E4;
  --paper-2: #EADFC8;
  --paper-3: #D8CCB2;
  --paper-rule: #DFD4BF;
  --paper-field: #FBF7EE;
  --paper-hint: #A69B89;           /* подсказка в поле на бумаге */
  --flap: #E2D5BA;                 /* клапан конверта */
  --flap-edge: #D3C3A4;
  --env-inside: #CDBD9E;           /* изнанка конверта: видна, когда клапан открыт */
  --env-inside-flap: #D6C7A9;      /* изнанка откинутого клапана — чуть светлее глубины */

  /* --- Текст на столе, от яркого к тихому --- */
  --text-hi: #F6F0E4;
  --text: #F1E9DC;
  --text-2: #E7DFD2;
  --text-body: #C7BCAC;
  --muted: #A1968A;
  --muted-2: #A0958A;            /* вторичный текст: не темнее, чтобы читался на столе */
  --faint: #6F6559;
  --locked: #7E7468;

  /* --- Текст на бумаге --- */
  --ink: #2B2620;
  --ink-2: #4A4238;
  --ink-3: #5F564B;
  --ink-hand: #7A6B55;
  --ink-hover: #3A332B;            /* тёмная кнопка на бумаге под пальцем */

  /* --- Акцент: янтарь --- */
  --amber: #E3A53B;
  --amber-hi: #F3BE60;
  --amber-ink: #221D17;
  --amber-deep: #8A5A12;          /* янтарь на бумаге — темнее, ради контраста */
  --amber-wash: rgba(227, 165, 59, .16);
  --amber-halo: rgba(227, 165, 59, .45);   /* свечение вокруг 3D-значка */
  --amber-tape: rgba(227, 165, 59, .6);    /* скотч на листе, второй круг свечения */
  --amber-spark: rgba(227, 165, 59, .9);   /* яркая точка: текущая веха, точка опроса */
  --amber-clear: rgba(227, 165, 59, 0);    /* конец пульса «ты здесь» */
  --amber-glow: rgba(227, 165, 59, .22);
  --amber-picked: #2F281F;         /* выбранный вариант ответа */

  /* --- Второй акцент: пыльная роза. Редко: штемпели, пара печатей, подчёркивание --- */
  --rose: #C4918A;
  --rose-ink: #9E5F57;             /* роза на бумаге — чернила штемпеля */
  --rose-wash: rgba(196, 145, 138, .16);

  /* --- Штемпели --- */
  --stamp-green: #5A6E60;
  --stamp-green-line: rgba(90, 110, 96, .6);   /* обводка зелёного штемпеля */
  --stamp-green-ink: rgba(90, 110, 96, .9);    /* надпись зелёного штемпеля */
  --stamp-rose-line: rgba(158, 95, 87, .5);    /* обводка штемпеля пыльной розой */
  --stamp-rose-ink: rgba(158, 95, 87, .85);    /* надпись штемпеля пыльной розой */
  --rose-line: rgba(196, 145, 138, .6);        /* штемпель «отправлено» на шапке шага */
  --done-line: rgba(181, 201, 184, .5);        /* штемпель «пройден» на тёмной шапке */
  --warn-line: rgba(196, 87, 31, .4);          /* рамка пометки-предупреждения */
  --sage-hi: #8A9C8C;              /* светлый край открытки «Курс на цель!» */
  --terracotta: #C4571F;

  /* --- Сургуч: цвет печати по умолчанию и оттиск на ней --- */
  --seal-default: #7E5A3A;
  --seal-text: #F6E6D0;

  /* --- Смысловые: «помогает», «мешает», ошибка, готово --- */
  --good-bg: #22261F;  --good-line: #36402F;  --good-head: #C6DCA9;  --good-ico: #9FBE7E;
  --bad-bg: #2A2220;   --bad-line: #45332F;   --bad-head: #E3B1A5;   --bad-ico: #D99A8E;
  --done-bg: rgba(90, 110, 96, .24);  --done-text: #B5C9B8;
  --warn-bg: rgba(196, 87, 31, .16);  --warn-text: #EBA27F;
  --warn-body: #F1C2A8;
  --error: #EE9A7E;
  --list-text: #D8D2C4;            /* строки «мешает / помогает» */
  --panel-deep: #24201B;           /* плашка «маршрут пройден» */

  /* --- Шрифты --- */
  --f-display: 'Nunito', 'Golos Text', system-ui, sans-serif;
  --f-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --f-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-hand: 'Caveat', 'Segoe Print', cursive;

  /* --- Отступы: шаг 4 px --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
  --gutter: 20px;
  --maxw: 620px;

  /* --- Скругления и тени --- */
  --r-xs: 4px; --r-sm: 10px; --r-md: 14px; --r-lg: 16px; --r-pill: 999px;
  --hair: .5px;                   /* линейки-разделители: тоньше рамок */
  --shadow-paper: 0 14px 34px rgba(0, 0, 0, .45);
  --shadow-lift: 0 3px 10px rgba(0, 0, 0, .35);

  /* Тон «неба» над экраном: задаётся номером шага (см. .tone-N) */
  --glow: rgba(150, 112, 84, .28);
  --ground: var(--table);
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0; overflow-x: hidden;
  background: var(--table); color: var(--text);
  font: 400 15px/1.55 var(--f-ui);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
a { color: var(--amber); }
.hidden { display: none !important; }
.ico { display: inline-block; flex: 0 0 auto; vertical-align: middle; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--s-6) var(--gutter) 48px; min-height: 100%; }

/* Отступы по сетке: mt-N — сверху, mb-N — снизу, sp-N — пустая строка
   высотой N шагов. Шаг — 4 px, как у токенов --s-N. */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--s-1) !important; } .mt-2 { margin-top: var(--s-2) !important; }
.mt-3 { margin-top: var(--s-3) !important; } .mt-4 { margin-top: var(--s-4) !important; }
.mt-5 { margin-top: var(--s-5) !important; } .mt-6 { margin-top: var(--s-6) !important; }
.mt-7 { margin-top: var(--s-7) !important; } .mt-8 { margin-top: var(--s-8) !important; }
.mt-12 { margin-top: 48px !important; } .mt-15 { margin-top: 60px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--s-1) !important; } .mb-2 { margin-bottom: var(--s-2) !important; }
.mb-3 { margin-bottom: var(--s-3) !important; } .mb-4 { margin-bottom: var(--s-4) !important; }
.sp-2 { height: var(--s-2); } .sp-3 { height: var(--s-3); } .sp-4 { height: var(--s-4); }
.sp-5 { height: var(--s-5); } .sp-6 { height: var(--s-6); }

/* ---------- Типографика ---------- */
h1, .h1 {
  margin: 0; font: 800 30px/1.2 var(--f-display); letter-spacing: 0; color: var(--text-hi);
}
.h2 { margin: 0; font: 800 25px/1.25 var(--f-display); color: var(--text-hi); }
.h3 { margin: 0; font: 800 20px/1.3 var(--f-display); color: var(--text-hi); }
/* Длинное название шага — мельче, чтобы шапка не съедала полэкрана */
h1.long, .h1.long { font-size: 25px; line-height: 1.25; }
/* «или» между действиями в заголовке шага — от руки, отдельной строкой */
.or-hand {
  display: block; margin: 2px 0; font: 500 .8em/1.1 var(--f-hand); color: var(--muted);
}
.sheet .or-hand { color: var(--ink-hand); }
/* Вопрос опроса — крупно, но легче заголовка экрана */
.question { margin: var(--s-8) 2px 0; font: 500 23px/1.42 var(--f-display); color: var(--text-hi); }
/* Длинный авторский вопрос — мельче, чтобы поле ответа было на первом экране */
.question.long { font-size: 19.5px; line-height: 1.45; }
.sub { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.small { font-size: 14.5px; line-height: 1.55; color: var(--muted-2); }
/* Подчёркивание от руки розой — изредка, под подписью или датой */
.rose-line {
  text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 1.5px;
  text-underline-offset: .22em; text-decoration-skip-ink: auto;
}
.center { text-align: center; }
.kicker, .label {
  display: block; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--muted-2);
}
.hand { font-family: var(--f-hand); font-size: 19px; font-weight: 500; color: var(--muted); }
/* Текст заданий и бонусов — книжный, с сохранением переносов автора */
.task-body {
  font: 400 16px/1.75 var(--f-serif); color: var(--text-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.task-body b { font-weight: 700; color: var(--text-hi); }

/* ---------- Поверхности ---------- */
/* Карточка на столе */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; margin-bottom: var(--s-3);
}
/* Лист бумаги: главное на экране */
.sheet {
  position: relative; background: var(--paper); color: var(--ink);
  border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--shadow-paper);
}
.sheet .kicker, .sheet .label { color: var(--amber-deep); }
.sheet h1, .sheet .h1, .sheet .h2, .sheet .h3 { color: var(--ink); }
.sheet .sub { color: var(--ink-3); }
.sheet .task-body { color: var(--ink-2); }
.sheet .task-body b { color: var(--ink); }
.sheet .hand { color: var(--ink-hand); }
/* Шапка экрана шага — прямо на «небе», без листа: бумажными на этом экране
   остаются вклеенные фотографии действий, и два светлых прямоугольника
   подряд не спорят друг с другом. */
.step-head { padding: var(--s-2) 2px 0; }
/* Шапка вехи со своим значком (карта желаний, Секретный шаг): значок со
   свечением над названием, без подписей «Подготовка…» и «Финал пути» */
.step-head.emo-head .b-emo { margin: 0 0 var(--s-3); width: 72px; height: 72px; }
.step-head.emo-head .b-emo .emo { width: 72px; height: 72px; }
.step-head .kicker { color: var(--amber); }
/* Метка уровня «Шаг 3» — янтарный контур со следами, как уровень в игре */
.lvl { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border: 2px solid var(--amber);
  border-radius: 999px; font: 800 15px/1 var(--f-display); color: var(--amber); }
.lvl .feet { width: 18px; height: 18px; fill: var(--amber); }
.step-head .sheet-head .num { color: var(--muted); }
.step-head .lead { margin: 14px 0 0; font: 400 15.5px/1.7 var(--f-serif); color: var(--text-body); }
.step-head .stamp.green { border-color: var(--done-line); color: var(--done-text); }

/* Кусочек малярного скотча на углу листа */
.sheet.taped::before {
  content: ''; position: absolute; right: 18px; top: -10px; width: 46px; height: 22px;
  border-radius: 3px; background: var(--amber-tape); transform: rotate(5deg);
}
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.sheet-head .num { font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.sheet .lead { margin: 14px 0 0; font: 400 15.5px/1.7 var(--f-serif); color: var(--ink-2); }

/* Вторая бумага: открытка, записка куратора */
.note-paper {
  position: relative; background: var(--paper-2); color: var(--ink-2);
  border-radius: var(--r-md); padding: 18px 20px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
}
.note-paper .hand { display: block; font-size: 20px; color: var(--ink-hand); }
.note-paper .text { margin-top: 8px; font: 400 15.5px/1.7 var(--f-serif); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.note-paper.tilt { transform: rotate(-.8deg); }
/* Круглый штемпель на открытке */
.stamp {
  position: absolute; right: 14px; top: 12px; width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid var(--stamp-rose-line); color: var(--stamp-rose-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-11deg); text-align: center; line-height: 1.15; pointer-events: none;
}
.stamp b { font-size: 8.5px; letter-spacing: .6px; }
.stamp span { font-size: 11px; font-weight: 700; }
.stamp.green { border-color: var(--stamp-green-line); color: var(--stamp-green-ink); }

/* Отметка «пройден» на листе шага: тот же штемпель, что на открытках,
   только в потоке — у правого края под заголовком */
.done-mark { display: flex; justify-content: flex-end; margin: -6px -4px -8px 0; }
.done-mark .stamp { position: static; width: 72px; height: 72px; transform: rotate(-9deg); }
.done-mark .stamp b { font-size: 9px; }
.done-mark .stamp span { font-size: 12px; }

/* Записка на столе: комментарий куратора, «твой подарок» */
.comment {
  margin-top: var(--s-4); background: var(--table-raise); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px; font-size: 15px; line-height: 1.65;
  color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere;
}
.comment .hand { display: block; font-size: 19px; color: var(--amber); margin-bottom: 2px; white-space: normal; }

/* ---------- Кнопки ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; padding: 14px 18px; border: 0; border-radius: var(--r-md);
  background: var(--amber); color: var(--amber-ink);
  font: 700 16px/1.25 var(--f-ui); text-align: center; text-decoration: none;
  transition: transform .12s, background-color .2s, opacity .2s;
}
.btn:hover { background: var(--amber-hi); }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 3px; }
/* Вторичная — на столе */
.btn.ghost { background: var(--surface); border: 1px solid var(--line); color: var(--text); font-weight: 600; }
.btn.ghost:hover { background: var(--surface-2); }
/* На бумаге — тёмная */
.btn.ink { background: var(--ink); color: var(--paper); font-weight: 600; min-height: 46px; border-radius: var(--r-sm); font-size: 15px; }
.btn.ink:hover { background: var(--ink-hover); }
.btn.small { min-height: 44px; font-size: 14.5px; padding: 10px 14px; }
/* «Дальше» — указатель на следующий пункт: куда — слева, стрелка справа */
.btn.next-btn { justify-content: space-between; text-align: left; padding: 14px 20px; gap: var(--s-4); }
.next-btn .nb-text { display: flex; flex-direction: column; min-width: 0; }
.next-btn .nb-k { font-size: 14px; font-weight: 600; opacity: .75; }
.next-btn .nb-t { font-size: 16px; font-weight: 700; line-height: 1.3; }

/* Круглая «назад» */
.back {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; padding: 0;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-2);
  display: grid; place-items: center;
}
.back:hover { background: var(--surface-2); }

/* ---------- Поля ввода ---------- */
.field {
  display: block; width: 100%; padding: 14px 16px; border-radius: 12px;
  background: var(--table-raise); border: 1.5px solid var(--line); color: var(--text);
  font: 400 16px/1.5 var(--f-ui); outline: none; resize: vertical;
}
.field::placeholder { color: var(--faint); }
.field:focus { border-color: var(--amber); }
.sheet .field { background: var(--paper-field); border-color: var(--paper-3); color: var(--ink); }
.sheet .field::placeholder { color: var(--paper-hint); }
.sheet .field:focus { border-color: var(--amber-deep); }
/* Дата рождения: крупно и по центру */
.field.date { font: 600 22px/1.3 var(--f-serif); letter-spacing: 3px; text-align: center; }
.field.date::placeholder { letter-spacing: 2px; font-weight: 400; }

/* Лист дневника с линовкой: сюда пишут ответы */
.diary {
  background: var(--paper); border-radius: var(--r-md); padding: var(--s-4) var(--s-4) 14px;
  box-shadow: var(--shadow-paper); color: var(--ink);
}
.diary label, .diary .hand { display: block; font-family: var(--f-hand); font-size: 19px; color: var(--ink-hand); margin-bottom: 6px; }
.diary textarea {
  display: block; width: 100%; min-height: 140px; border: 0; outline: none; resize: none; padding: 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--paper-rule) 27px, var(--paper-rule) 28px);
  font: 400 16px/28px var(--f-serif); color: var(--ink); overflow: hidden;
}
.diary textarea::placeholder { color: var(--paper-hint); }
.diary.short textarea { min-height: 56px; }
/* Ответ не принят — рамка поля терракотой, ошибка прямо под ним */
.diary.bad { box-shadow: var(--shadow-paper), 0 0 0 2px var(--terracotta); }
.err.at-field { margin: 10px 4px 0; text-align: left; }

/* Варианты ответа — строками, как список в дневнике: тонкая линия между
   строками, отметка слева. Выбранная — янтарная отметка и светлый текст. */
.options { display: flex; flex-direction: column; margin-top: 20px; border-top: 1px solid var(--line); }
.option {
  position: relative; display: flex; align-items: flex-start; gap: 14px; cursor: pointer;
  padding: 14px 4px; border-bottom: 1px solid var(--line);
  color: var(--text-2); font-size: 16px; line-height: 1.5; transition: color .15s;
}
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option .mark {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--faint); display: grid; place-items: center; color: transparent;
}
.option.multi .mark { border-radius: 5px; }
.option:has(input:checked), .option.on { color: var(--text-hi); }
.option:has(input:checked) .mark, .option.on .mark { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.option:has(input:focus-visible) { outline: 2px solid var(--amber-hi); outline-offset: 2px; }
/* Поле «Другое» — клочок бумаги под выбранным вариантом */
.other { margin: 10px 0 6px 34px; }

/* ---------- Метки состояния ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .1px;
}
.badge.open { background: var(--amber-wash); color: var(--amber); }
.badge.review { background: var(--surface-2); color: var(--text-2); }
.badge.done { background: var(--done-bg); color: var(--done-text); }
.badge.warn { background: var(--warn-bg); color: var(--warn-text); }
.badge.locked { background: transparent; color: var(--muted-2); padding-left: 0; }

/* ---------- Прогресс ---------- */
.prog-wrap { display: flex; align-items: center; gap: 10px; }
.prog { flex: 1; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.prog > i { display: block; height: 100%; border-radius: 3px; background: var(--amber); transition: width .5s; }
.prog-num { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* ---------- Экран поверх тропинки ---------- */
.screen {
  position: fixed; inset: 0; z-index: 30; overflow: hidden; display: flex; flex-direction: column;
  background: radial-gradient(420px 300px at 20% 0%, var(--glow) 0%, rgba(0, 0, 0, 0) 70%), var(--ground);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.screen.show { transform: translateX(0); }
/* Скролл — на screen-inner, а не на .screen: .screen имеет transform (для анимации),
   а transform на предке превращает его в containing block для position:fixed потомков —
   если бы скроллился сам .screen, кнопка .dock (fixed) скроллилась бы вместе с текстом
   вместо того, чтобы быть прибитой к низу экрана. */
.screen-inner {
  max-width: var(--maxw); width: 100%; margin: 0 auto; flex: 1;
  padding: var(--s-4) var(--gutter) 120px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.topbar { display: flex; align-items: center; gap: var(--s-3); padding: 2px 0 var(--s-3); }
.topbar .t { font-size: 14px; font-weight: 600; color: var(--muted); }
.topbar .grow { flex: 1; }
.topbar .aside { font-size: 14px; color: var(--muted-2); white-space: nowrap; }

/* Тон неба по номеру шага: от холодного вечера на первом к рассвету на шестом.
   Под текстом всегда та же бумага — меняется только фон стола. */
.tone-0 { --glow: rgba(150, 112, 84, .22); --ground: #1B1815; }
.tone-1 { --glow: rgba(84, 96, 118, .26); --ground: #15161A; }
.tone-2 { --glow: rgba(110, 100, 110, .24); --ground: #181619; }
.tone-3 { --glow: rgba(150, 112, 84, .28); --ground: #1B1815; }
.tone-4 { --glow: rgba(178, 126, 74, .30); --ground: #1E1914; }
.tone-5 { --glow: rgba(222, 164, 84, .26); --ground: #201A14; }
.tone-6 { --glow: rgba(243, 190, 96, .28); --ground: #211B14; }
.tone-7 { --glow: rgba(243, 190, 96, .32); --ground: #211B14; }

/* Кнопка, прибитая к низу экрана */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  padding: 18px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(27, 24, 21, 0) 0%, var(--ground) 38%);
}
.dock-inner { max-width: var(--maxw); margin: 0 auto; }

/* ---------- Сообщения ---------- */
.err { margin-top: var(--s-3); color: var(--error); font-size: 14px; line-height: 1.45; text-align: center; }
.status-note { margin-top: var(--s-5); text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
/* Миниатюра картинки действия в строке выбора */
.thumb {
  display: block; max-width: 100%; max-height: 200px; margin: 0 auto var(--s-2);
  border-radius: var(--r-sm); border: 1px solid var(--line);
}

/* Пометки к тексту бонуса: предупреждение, справка, пояснение.
   Значок — буква в кружке, без эмодзи. */
.note-warn, .note-info, .note-muted {
  position: relative; margin-top: var(--s-4); padding: 14px 16px 14px 46px; border-radius: var(--r-md);
  font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.note-warn::before, .note-info::before, .note-muted::before {
  position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid currentColor; display: grid; place-items: center;
  font: 700 12px/1 var(--f-ui);
}
.note-warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-body); }
.note-warn::before { content: '!'; color: var(--warn-text); }
.note-info { background: var(--table-raise); border: 1px solid var(--line); color: var(--text-2); }
.note-info::before { content: 'i'; color: var(--amber); font-family: var(--f-serif); font-style: italic; }
.note-muted { background: var(--table-raise); border: 1px solid var(--line); color: var(--text-body); }
.note-muted::before { content: '?'; color: var(--muted); }

/* Экран-заглушка на время загрузки */
.spin { text-align: center; padding: 96px 20px; color: var(--muted); }
.loader {
  width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--track); border-top-color: var(--amber); animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Задание шага ---------- */
/* На телефоне действия идут одно под другим во всю ширину — между ними
   «или»; две колонки только на широком экране. */
.tc-opts { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s-3); }
.tc-or {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  font: 500 22px/1 var(--f-hand); color: var(--muted);
}
.tc-or::before, .tc-or::after { content: ''; flex: 1; height: var(--hair); background: var(--line); }
/* Действие — белая карточка на тёмном, как игровая карта */
.tc-opt { background: var(--paper); border: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lift); }
/* Картинку показываем целиком, в её собственных пропорциях: обрезка по 16:9
   срезала у квадратных иллюстраций верх и низ — головы, подписи. */
.tc-opt img { display: block; width: 100%; height: auto; }
.tc-opt .tc-in { padding: 20px 20px 22px; }
/* Название действия — по центру, под картинкой; текст задания ниже остаётся
   слева: длинный абзац по центру читается тяжело. */
.tc-opt .tc-t { font: 800 22px/1.25 var(--f-display); color: var(--ink); margin-bottom: 10px; text-align: center; }
.tc-opt .tc-b { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .tc-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .tc-or { display: none; }
}
/* «Что мешает» / «Что помогает» — две плитки рядом: значок, название, число */
.tc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.tc-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 14px;
  background: var(--surface-2); border: 1.5px solid var(--line); border-bottom-width: 4px; border-radius: 20px; color: var(--text); cursor: pointer;
  font: inherit; text-align: center; transition: transform .12s ease, border-color .15s ease; }
.tc-tile:active { transform: scale(.97); }
.tc-tile .emo { width: 44px; height: 44px; margin-bottom: 4px; }
.tc-tile b { font: 800 16px/1.2 var(--f-display); color: var(--text-hi); }
/* «Смотреть N пунктов ⌄» — видно, что плитка раскрывается; открыта — «Свернуть ⌃» */
.tc-n { font-size: 13px; color: var(--muted); }
.tc-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--table); font-size: 13px; font-weight: 600; color: var(--text-2); }
.tc-more .ico { transform: rotate(90deg); transition: transform .2s ease; }
.tc-more .c { display: none; }
.tc-tile[aria-expanded="true"] .tc-more .o { display: none; }
.tc-tile[aria-expanded="true"] .tc-more .c { display: inline; }
.tc-tile[aria-expanded="true"] .tc-more .ico { transform: rotate(-90deg); }
.tc-tile.bad[aria-expanded="true"] { border-color: var(--bad-ico); }
.tc-tile.good[aria-expanded="true"] { border-color: var(--good-ico); }
/* «Что мешает» и «что помогает» — по карточке на блок, внутри список
   строками: значок слева в ровной колонке, строки через тонкую линию. */
.tc-box { margin-top: var(--s-4); border-radius: var(--r-lg); padding: 20px 20px 8px; }
.tc-box.bad { background: var(--bad-bg); border: 1px solid var(--bad-line); border-left: 3px solid var(--bad-ico); }
.tc-box.good { background: var(--good-bg); border: 1px solid var(--good-line); border-left: 3px solid var(--good-ico); }
/* Заголовок блока тише заголовка шага: антиква обычного веса, цвет текста.
   Цвет «мешает / помогает» несут полоса слева и значки списка. */
.tc-h { font: 500 19px/1.35 var(--f-display); color: var(--text-hi); }
.tc-hint { margin: 6px 0 4px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.tc-list { list-style: none; margin: 8px 0 0; padding: 0; }
.tc-list li {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 0;
  border-top: var(--hair) solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--list-text);
}
.tc-ico { flex: 0 0 24px; min-width: 0; height: 23px; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; }
.tc-ico .dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.tc-box.bad .tc-ico { color: var(--bad-ico); }
.tc-box.good .tc-ico { color: var(--good-ico); }

/* Раздел экрана: подпись и отступ сверху */
.section { margin-top: var(--s-8); }
.section > .kicker { margin-bottom: var(--s-3); }

/* Для отчёта — три плитки в ряд: значок и одно слово */
.need-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.need { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px 12px;
  background: var(--surface); border-radius: 18px; text-align: center; }
.need .emo { width: 40px; height: 40px; margin-bottom: 4px; }
.need b { font: 800 15px/1.2 var(--f-display); color: var(--text-hi); }
.need span { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
/* Что нужно для отчёта — список без галочек, просто перечень */
.checklist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 16px; }
.checklist .row {
  display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-bottom: var(--hair) solid var(--line); font-size: 15px; color: var(--text-2);
}
.checklist .row:last-child { border-bottom: 0; }
.checklist .row .ico { color: var(--amber); }
.checklist .row .st { margin-left: auto; }

/* ---------- Раскрывашки: правила карты желаний, разделы бонусов ---------- */
.rule { margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.rule summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.rule summary::-webkit-details-marker { display: none; }
.rule .r-num {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; background: var(--table); border: 2px solid var(--amber); color: var(--amber);
}
.rule.read .r-num { background: var(--amber); color: var(--amber-ink); }
.rule .r-main { flex: 1; min-width: 0; }
.rule .r-title { font-weight: 600; font-size: 15.5px; color: var(--text); }
.rule summary > .ico:last-child { color: var(--muted-2); transition: transform .2s; }
.rule[open] summary > .ico:last-child { transform: rotate(90deg); }
.rule .task-body { padding: 0 16px 18px; font-size: 15.5px; }
.lock-note {
  margin-top: var(--s-4); padding: 14px; border: 1px dashed var(--line); border-radius: var(--r-lg);
  text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5;
}
.chev { color: var(--muted-2); flex: 0 0 auto; }

/* ---------- Шапка конверта: сургучная печать ---------- */
.envelope-head { text-align: center; padding: var(--s-5) 0 var(--s-2); }
.envelope-head .h1 { margin-top: var(--s-2); }
.seal { width: 72px; height: 72px; margin: 0 auto var(--s-4); transform: rotate(-6deg); }
/* Сама печать (и на шапке, и на конверте): натёкший сургуч, вдавленный
   ободок, выдавленная эмблема. Тень — по форме капли, а не кругом. */
.seal svg, .envelope .wax svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4));
}
.wax-blob { fill: var(--seal, var(--seal-default)); }
.wax-ring { fill: none; stroke: rgba(0, 0, 0, .28); stroke-width: 2.4; }
.wax-ring-lit { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.wax-emblem {
  fill: none; stroke: var(--seal-text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: .9; filter: drop-shadow(0 -.6px 0 rgba(0, 0, 0, .35));
}
.wax-shine { fill: rgba(255, 255, 255, .18); }

/* ==========================================================================
   Тропинка на главной
   ========================================================================== */
/* Шапка: заголовок и день от руки. Полосы прогресса нет — его показывает
   сама тропинка. */
.route-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.route-head .hand { font-size: 20px; }
/* Дата рождения под шапкой маршрута; что делать, если неверная, — под «?» */
.route-bd { display: flex; align-items: center; gap: 8px; margin-top: var(--s-1); font-size: 14.5px; color: var(--muted-2); }
.help-btn {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1.5px solid currentColor;
  background: none; color: var(--muted); font: 700 12px/1 var(--f-ui); cursor: pointer;
}
.route-help { margin: var(--s-2) 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* Карта уровня: две колонки, вехи по две на витке (места задаёт кабинет) */
.trail { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px;
  margin-top: var(--s-6); padding: 0 6px var(--s-2); }
.trail-line { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.trail .signpost { grid-column: 1 / 3; }

/* Таблички на дороге: «Подготовка» в начале, «Старт» на месте вехи */
.signpost { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 0 var(--s-4) 14px; }
.plate {
  display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 12px;
  border-radius: var(--r-xs); background: var(--paper); color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px; transform: rotate(-3deg); box-shadow: var(--shadow-lift);
}
/* «Старт»: дорога идёт сквозь табличку, пятно фона под значком не нужно */
.node.sign { width: auto; }
.node.sign::before { display: none; }
.mile.start .m-body { padding-top: 0; }
.mile.start .m-sub { margin-top: 0; font-size: 14px; }

/* Веха: значок на дороге, подпись под ним. Чуть сдвинута (--dx/--dy) —
   тропинка нарисована от руки */
.mile {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18px 0 22px; transform: translate(var(--dx, 0), var(--dy, 0));
}
.mile.tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mile.tap:active .node { transform: scale(.92); }
/* Значок без кружка; пятно фона под ним — чтобы дорога не шла сквозь */
.node { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center;
  transition: transform .12s ease; }
.node::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--table); z-index: -1; }
.node .emo { width: 34px; height: 34px; display: block; }
/* Следы шага — свой значок янтарём */
.node .feet { width: 34px; height: 34px; display: block; fill: var(--amber); }
/* Будущее — серое и бледное */
.mile.locked .node > * { filter: grayscale(1); opacity: .32; }
/* Текущее и новый бонус — мягкое янтарное свечение вокруг значка */
.node.now > *, .node.wait > *, .node.env.fresh > * {
  filter: drop-shadow(0 0 6px var(--amber-spark)) drop-shadow(0 0 14px var(--amber-tape)); }
/* Подпись лежит поверх дороги, как на карте */
.m-body { position: relative; z-index: 2; max-width: 150px; padding-top: 8px; }
.m-title { display: inline; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--text);
  background: var(--table); box-shadow: 0 0 0 4px var(--table); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mile.current .m-title { color: var(--text-hi); }
.mile.locked .m-title { color: var(--locked); }
/* «Бонус» над названием */
.m-kick { font-size: 12px; line-height: 1.2; color: var(--muted); margin-bottom: 2px; }
.mile.locked .m-kick { color: var(--locked); }
.m-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--muted-2); }
.mile.locked .m-sub { color: var(--muted-2); }
/* «Распечатать» у нового бонуса — действие, а не состояние */
.m-go { display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--table); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text-hi); }

/* Письмо в конце пути — ответы «Точки А» */
.capsule {
  display: flex; align-items: center; gap: 14px; margin-top: var(--s-6);
  background: var(--table-raise); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px;
}
.capsule .main { flex: 1; min-width: 0; }
.capsule .t { font-size: 15px; font-weight: 600; color: var(--text); }
.capsule .s { margin-top: 2px; font-size: 14px; color: var(--muted-2); }
.capsule .badge { margin-top: 7px; }
.capsule.tap { cursor: pointer; }
.capsule.tap:hover { border-color: var(--amber); }
.capsule > .ico:last-child { color: var(--faint); }

/* ==========================================================================
   Открытки «Привет из Точки А!»: ответы «Точки А» — открытки-сувениры.
   Куда они уходят, не говорим: на Секретном шаге возвращаются сюрпризом.
   ========================================================================== */
/* Оборот открытки: бумага, янтарная полоса-заголовок, наклейка-значок */
.pcb {
  position: relative; display: block; padding: 0 18px 16px; border-radius: 14px; overflow: visible;
  background: var(--paper); box-shadow: var(--shadow-paper); transform: rotate(-1deg); color: var(--ink); text-align: left;
}
.pcb-band {
  display: block; margin: 0 -18px 14px; padding: 14px 18px 12px; border-radius: 14px 14px 0 0;
  background: linear-gradient(120deg, var(--amber-hi), var(--amber) 60%, var(--terracotta));
  font: 900 21px/1.1 var(--f-display); color: var(--amber-ink);
}
.pcb-band small { display: block; margin-top: 3px; font: 600 17px/1 var(--f-hand); opacity: .75; }
.pcb-sticker { position: absolute; right: -6px; top: -22px; transform: rotate(12deg); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.pcb-sticker .emo { width: 56px; height: 56px; display: block; }
.pcb label { display: block; margin-bottom: 4px; font: 500 18px/1.25 var(--f-hand); color: var(--ink-hand); }
.pcb textarea {
  display: block; width: 100%; min-height: 140px; border: 0; outline: none; resize: none; padding: 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--paper-rule) 27px, var(--paper-rule) 28px);
  font: 400 16px/28px var(--f-serif); color: var(--ink); overflow: hidden;
}
.pcb p { margin: 0; font: 400 16px/1.7 var(--f-serif); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.pcb-sign { display: block; margin-top: 10px; text-align: right; font: 600 22px/1 var(--f-hand); color: var(--ink-hand); }
.pcb.bad { box-shadow: var(--shadow-paper), 0 0 0 2px var(--terracotta); }
.pcb.mini { background: var(--paper-2); transform: rotate(.8deg); }
.pcb.mini .pcb-band { padding: 10px 18px 9px; font-size: 16px; }
.pcb.mini p { font-size: 15px; line-height: 1.65; }
.pcb.mini .pcb-sign { font-size: 19px; }
/* Длинная открытка над вопросом — пять строк и «дочитать» */
.pcb p.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
  -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); }
.pcb-more { display: block; margin: 4px 0 0; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: 600 20px/1 var(--f-hand); color: var(--amber-deep); }

/* Три открытки — три цвета: янтарь, бумага, шалфей. Полоса на обороте
   и лицо открытки берут цвет отсюда. */
.t-amber { --pc-bg: linear-gradient(135deg, var(--amber-hi) 0%, var(--amber) 55%, var(--terracotta) 120%);
  --pc-ink: var(--amber-ink); --pc-line: var(--paper); }
.t-paper { --pc-bg: linear-gradient(135deg, var(--paper) 0%, var(--paper-2) 70%, var(--paper-3) 120%);
  --pc-ink: var(--ink); --pc-line: var(--amber); }
.t-sage { --pc-bg: linear-gradient(135deg, var(--sage-hi) 0%, var(--stamp-green) 90%);
  --pc-ink: var(--paper); --pc-line: var(--paper); }
.pcb .pcb-band { background: var(--pc-bg, linear-gradient(120deg, var(--amber-hi), var(--amber) 60%, var(--terracotta))); color: var(--pc-ink, var(--amber-ink)); }
.pcb.t-paper .pcb-band { border-bottom: 2px dashed var(--paper-3); }

/* Лицо открытки: цвет по открытке, рамка пунктиром, узор и значок */
.pc-front {
  position: relative; display: block; height: 230px; border-radius: 16px; overflow: hidden; text-align: left;
  background: var(--pc-bg); color: var(--pc-ink); box-shadow: 0 22px 46px rgba(0, 0, 0, .55); transform: rotate(-2deg);
}
.pc-front svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--pc-line); opacity: .9; }
.pc-front svg .fill { fill: var(--pc-line); stroke: none; }
.pc-front .frame { position: absolute; inset: 8px; border: 2px dashed currentColor; opacity: .25; border-radius: 11px; }
.pc-front .t { position: absolute; left: 18px; top: 16px; right: 90px; font: 900 30px/1.02 var(--f-display); }
.pc-front .t span { display: block; margin-top: 4px; font: 700 22px/1 var(--f-hand); opacity: .8; }
.pc-front .e { position: absolute; right: 18px; bottom: 16px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.pc-front .e .emo { width: 64px; height: 64px; display: block; }
.pc-front.wide { height: 170px; transform: none; box-shadow: none; }
.pc-front.wide .t { font-size: 26px; right: 18px; }
/* Веер из трёх открыток: «открытки готовы» */
.pc-fan { position: relative; height: 250px; }
.pc-fan .pc-front.sm { position: absolute; width: 230px; height: 150px; }
.pc-fan .pc-front.sm .t { font-size: 21px; left: 14px; top: 12px; right: 60px; }
.pc-fan .pc-front.sm .e .emo { width: 46px; height: 46px; }
.pc-fan .pc-front.sm:nth-child(1) { left: 0; top: 8px; transform: rotate(-9deg); }
.pc-fan .pc-front.sm:nth-child(2) { right: 0; top: 30px; transform: rotate(7deg); }
.pc-fan .pc-front.sm:nth-child(3) { left: 50%; top: 92px; margin-left: -115px; transform: rotate(-2deg); }
/* «3 из 3 собраны» — счётчик коллекции */
.pc-count { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-5); padding: 6px 14px 6px 8px; border-radius: 999px;
  background: var(--amber-wash); border: 2px solid var(--amber); font: 800 15px/1 var(--f-display); color: var(--amber); }
.pc-count i { width: 22px; height: 16px; border-radius: 3px; background: var(--amber); }
.pt-done { padding-top: 48px; }
/* «Твой маршрут построен» — личные числа шагов сразу после даты рождения */
.reveal { padding-top: 40px; text-align: center; }
.reveal-note { display: inline-flex; align-items: flex-end; gap: 4px; color: var(--amber); }
.reveal-note .scribble { width: 26px; height: 22px; }
.code-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.code-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 10px;
  border-radius: var(--r-md, 14px); background: var(--surface); border: 2px solid var(--amber); }
.code-cell b { font: 800 26px/1 var(--f-display); color: var(--amber); }
.code-cell span { font-size: 11.5px; line-height: 1; color: var(--muted); }
/* Открытка на Секретном шаге: нажатие переворачивает её */
.pc-flip { position: relative; display: grid; grid-template-columns: 100%; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1200px;
  font: inherit; color: inherit; transform: rotate(-1deg); }
.pc-flip:nth-of-type(even) { transform: rotate(1deg); }
.pc-flip .side { display: block; width: 100%; box-sizing: border-box; grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.3, .7, .3, 1); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
/* Высота — по видимой стороне: пока лицом вверх, оборот (он бывает
   длинным) лежит поверх и не раздувает открытку; перевернули — наоборот */
.pc-flip .rev { transform: rotateY(180deg); min-height: 170px; position: absolute; top: 0; left: 0; }
.pc-flip.on .rev { position: relative; }
.pc-flip.on .face { position: absolute; top: 0; left: 0; }
.pc-flip.on .face { transform: rotateY(-180deg); }
.pc-flip.on .rev { transform: rotateY(0); }
.pc-flip .rev.pcb { box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
/* Мини-открытки на плашке тропинки и Секретного шага */
.capsule .pcs { position: relative; width: 58px; height: 48px; flex: 0 0 58px; }
.capsule .pcs i { position: absolute; width: 44px; height: 30px; border-radius: 4px;
  background: linear-gradient(135deg, var(--amber-hi), var(--amber)); box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.capsule .pcs i:nth-child(1) { left: 2px; top: 4px; transform: rotate(-10deg); opacity: .7; }
.capsule .pcs i:nth-child(2) { left: 12px; top: 14px; transform: rotate(8deg); opacity: .85; }
.capsule .pcs i:nth-child(3) { left: 7px; top: 9px; transform: rotate(-2deg); }

/* Путь пройден: итоги плитками — крупное число и подпись, как счёт в игре */
.need-tiles.score .need b { font-size: 30px; line-height: 1.05; color: var(--amber); }
.need-tiles.score .need .feet { width: 40px; height: 40px; margin-bottom: 4px; fill: var(--amber); }
/* Последний бонус — плашка со значком, нажимается целиком */
.last-bonus { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--amber); border-radius: var(--r-lg); color: var(--text-hi);
  font: inherit; cursor: pointer; box-shadow: 0 0 0 4px var(--amber-glow); }
.last-bonus .b-emo { width: 52px; height: 52px; margin: 0; flex: 0 0 52px; }
.last-bonus .b-emo .emo { width: 52px; height: 52px; }
.last-bonus .lb-t { flex: 1; min-width: 0; }
.last-bonus b { display: block; font: 800 18px/1.25 var(--f-display); }
.last-bonus > .ico { color: var(--amber); }

/* Пояснение со значком слева */
.aside-note {
  display: flex; gap: 12px; margin-top: var(--s-5); padding: 15px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  font-size: 14.5px; line-height: 1.5; color: var(--muted);
}
.aside-note .ico { color: var(--amber); margin-top: 1px; }

/* ==========================================================================
   Привал: запечатанный конверт с сургучной печатью
   ========================================================================== */
/* Тон фона берётся от печати и живёт только в шапке экрана */
.screen.env-screen {
  background: radial-gradient(360px 260px at 50% 14%, var(--glow) 0%, rgba(0, 0, 0, 0) 72%), var(--table);
}
.envelope { position: relative; width: 268px; height: 176px; margin: 30px auto 0; perspective: 800px; }
/* Конверт в разрезе, снизу вверх: изнанка (видна, когда клапан открыт),
   письмо внутри, передняя сторона с вырезом под клапан, сам клапан. */
.envelope .body {
  position: absolute; inset: 0; border-radius: 8px; background: var(--env-inside);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}
.envelope .sheet-in {
  position: absolute; left: 16px; right: 16px; top: 12px; height: 150px; z-index: 1;
  border-radius: 4px; background: var(--paper); box-shadow: 0 -2px 8px rgba(0, 0, 0, .12);
  padding: 22px 22px 0;
}
/* Строчки письма — намёк, что внутри текст */
.envelope .sheet-in i { display: block; height: 3px; margin-bottom: 12px; border-radius: 2px; background: var(--paper-3); }
.envelope .sheet-in i:nth-child(1) { width: 46%; margin-bottom: 16px; background: var(--ink-3); opacity: .35; }
.envelope .sheet-in i:nth-child(3) { width: 88%; }
.envelope .sheet-in i:nth-child(4) { width: 72%; }
.envelope .pocket {
  position: absolute; inset: 0; z-index: 2; border-radius: 8px; background: var(--paper-2);
  clip-path: polygon(0 0, 50% 92px, 100% 0, 100% 100%, 0 100%);
}
.envelope .folds { position: absolute; inset: 0; width: 100%; height: 100%; }
.envelope .flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 92px; z-index: 3;
  background: var(--flap); clip-path: polygon(4px 0, calc(100% - 4px) 0, 50% 100%);  /* не вылезать за скруглённые углы */
  transform-origin: 50% 0;
}
.envelope .flap::after {
  content: ''; position: absolute; inset: 0; background: var(--flap-edge);
  clip-path: polygon(0 0, 1.2% 0, 50% 97.8%, 98.8% 0, 100% 0, 50% 100%);
}
.envelope .wax {
  position: absolute; left: 50%; top: 58px; z-index: 4; width: 66px; height: 66px; margin-left: -33px;
  transform: rotate(-6deg);
}

/* Печать из двух половинок по линии трещины. Целая лежит поверх, пока
   конверт закрыт, — на шве половинок не видно волоска. */
.seal { position: relative; }
.seal .half, .envelope .wax .half, .envelope .wax .whole { position: absolute; inset: 0; }
/* Края — за квадратом, чтобы не срезать тень сургуча */
.half.l { clip-path: polygon(-30% -30%, 53% -30%, 53% 0, 47% 28%, 56% 50%, 45% 73%, 51% 100%, 51% 130%, -30% 130%); }
.half.r { clip-path: polygon(53% -30%, 130% -30%, 130% 130%, 51% 130%, 51% 100%, 45% 73%, 56% 50%, 47% 28%, 53% 0); }
.envelope .wax .half { opacity: 0; }
/* Распечатанный конверт: печать на шапке письма так и остаётся сломанной */
.seal.broken .half.l { transform: translate(-2px, 1px) rotate(-4deg); }
.seal.broken .half.r { transform: translate(2px, -1px) rotate(3deg); }

/* Распечатали. Порядок: печать трескается и разваливается → клапан
   откидывается, показывая изнанку, → конверт съезжает ниже, освобождая
   место, → письмо выходит из конверта → экран переходит в письмо.
   Название конверта остаётся на месте, гаснут только кнопка и подпись. */
.envelope.open .wax .whole { opacity: 0; }
.envelope.open .wax .half { opacity: 1; }
.envelope.open .wax .half.l { animation: wax-l .42s cubic-bezier(.3, .6, .4, 1) .08s forwards; }
.envelope.open .wax .half.r { animation: wax-r .42s cubic-bezier(.3, .6, .4, 1) .08s forwards; }
.envelope.open .flap { animation: flap-open .5s cubic-bezier(.4, 0, .2, 1) .3s forwards; }
.envelope.open .sheet-in { animation: sheet-out .55s cubic-bezier(.2, .7, .2, 1) .72s forwards; }
.env-stage { transition: transform .45s cubic-bezier(.4, 0, .2, 1) .25s, opacity .22s ease; }
.env-screen.opening .env-stage { transform: translateY(84px); }
.env-screen.leaving .env-stage { opacity: 0; transition-delay: 0s; }
@keyframes wax-l {
  0% { transform: none; }
  20% { transform: translate(-1px, 0) rotate(-3deg); }
  100% { transform: translate(-16px, 26px) rotate(-28deg); opacity: 0; }
}
@keyframes wax-r {
  0% { transform: none; }
  20% { transform: translate(1px, 0) rotate(3deg); }
  100% { transform: translate(15px, 30px) rotate(24deg); opacity: 0; }
}
/* На ребре клапан уходит за письмо и дальше виден изнанкой */
@keyframes flap-open {
  0% { transform: rotateX(0); z-index: 3; background: var(--flap); }
  49% { z-index: 3; }
  50% { z-index: 0; background: var(--env-inside-flap); }
  100% { transform: rotateX(180deg); z-index: 0; background: var(--env-inside-flap); }
}
@keyframes sheet-out { to { transform: translateY(-112px); } }

.env-screen .fades { transition: opacity .25s ease; }
.env-screen.opening .fades { opacity: 0; }

/* Письмо после конверта проявляется снизу вверх, по очереди */
.reveal > :not(.topbar) { animation: reveal-in .45s cubic-bezier(.2, .7, .2, 1) both; }
.reveal > :nth-child(3) { animation-delay: .08s; }
.reveal > :nth-child(n+4) { animation-delay: .16s; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(14px); } }

/* На чём считаем — от руки на самом конверте, как адрес: в полосе под
   печатью, между линиями сгиба */
.envelope .addr {
  position: absolute; left: 0; right: 0; bottom: 7px; z-index: 2; text-align: center;
  font: 500 17px/1.2 var(--f-hand); color: var(--ink-hand); pointer-events: none;
}

/* Главный результат конверта — крупно под названием */
/* Бонус: крупный 3D-значок наверху, «Бонус» над названием */
.b-emo { position: relative; width: 84px; height: 84px; margin: 0 auto var(--s-3);
  filter: drop-shadow(0 0 14px var(--amber-halo)); }
.b-emo .emo { width: 84px; height: 84px; display: block; }
.b-kick { display: block; font-size: 13px; font-weight: 600; color: var(--amber); margin-bottom: 2px; }
.b-btn-emo { width: 24px; height: 24px; display: inline-block; vertical-align: -6px; margin-right: 4px; }
/* Главный результат — янтарный жетон: число, код или месяц */
.env-num { display: flex; flex-direction: column; align-items: center; margin-top: var(--s-4); }
.env-num .n { min-width: 76px; padding: 8px 20px; border: 2.5px solid var(--amber); border-radius: 999px;
  background: var(--amber-wash); font: 800 36px/1.1 var(--f-display); color: var(--amber-hi); }
.env-num .l { margin-top: 6px; font-size: 14px; color: var(--muted); }
/* Конфетти из-под значка, когда бонус только что открыли */
.confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; opacity: 0;
  animation: confetti-burst 1.3s cubic-bezier(.15, .7, .3, 1) forwards; }
.confetti i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }
@keyframes confetti-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(.6); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) + 60px)) rotate(var(--r)) scale(1); }
}

/* Письмо из конверта: один лист, разделы через тонкую линию.
   Порядок у всех конвертов один: вступление, разделы, вывод. */
.letter { margin-top: var(--s-6); padding: 26px 22px 24px; }
.letter .task-body { font-size: 16px; line-height: 1.75; }
.letter > :first-child { margin-top: 0; }
.l-sec:not(:first-child) { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--paper-rule); }
/* Текст раздела письма: абзацы с воздухом между ними и списки, где
   значок автора стоит в своей колонке, а перенос — под текстом */
.l-text { font: 400 16px/1.75 var(--f-serif); color: var(--ink-2); overflow-wrap: anywhere; }
.l-text p { margin: 0; }
.l-text p + .l-list, .l-text .l-list + p { margin-top: var(--s-3); }
.l-text p + p { margin-top: var(--s-4); }
.l-list { list-style: none; margin: 0; padding: 0; }
.l-list li { display: flex; gap: 10px; padding: 7px 0; line-height: 1.55; }
.l-list li + li { border-top: 1px dashed var(--paper-rule); }
.l-list .mk { flex: 0 0 22px; font-size: 15px; line-height: 1.55; text-align: center; }
/* Напутствие в конце письма — выделенная мысль: антиква курсивом,
   подчёркнута от руки розой */
.l-quote {
  margin: var(--s-6) 0 0; padding: var(--s-5) var(--s-2) 0; border-top: 1px solid var(--paper-rule);
  font: italic 500 18px/1.55 var(--f-display); color: var(--ink); text-align: center; white-space: pre-wrap;
}
.l-quote::after {
  content: ''; display: block; width: 56px; height: 2px; margin: var(--s-4) auto 0; border-radius: 2px; background: var(--rose);
}
/* Оглавление длинного письма — содержание сверху листа: строки через
   тонкую линию, стрелка вниз — «к разделу» */
/* Оглавление длинного письма — таблетки-кнопки: касание ведёт к разделу */
.l-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--paper-rule); }
.l-toc .kicker { flex-basis: 100%; margin-bottom: 0; }
.l-toc-i { display: inline-flex; align-items: baseline; padding: 8px 14px; border: 0; border-radius: 999px;
  background: var(--paper-2); font: 600 14px/1.25 var(--f-ui); color: var(--ink); cursor: pointer; text-align: left; }
.l-toc-i:active { transform: scale(.96); }
.l-toc-i .l-num { margin-right: 6px; }
/* Значок у раздела «что мешает / что помогает» */
.l-emo { width: 26px; height: 26px; display: inline-block; vertical-align: -6px; margin-right: 8px; }
.l-toc + .l-sec { margin-top: 0; padding-top: 0; border-top: 0; }
.l-sec { scroll-margin-top: var(--s-4); }
.l-h { display: block; margin: 0 0 8px; font: 800 19px/1.3 var(--f-display); color: var(--ink); }
.l-h-sub { display: block; margin-top: 2px; font: 400 14px/1.45 var(--f-ui); color: var(--ink-3); }
.l-num { margin-right: 8px; color: var(--amber-deep); }
.l-soon { color: var(--ink-3); font-style: italic; }
/* Вступление к тексту по числу: начало письма, антиква мельче и тише */
.l-lead { font: 400 15px/1.7 var(--f-serif); color: var(--ink-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.l-lead + .l-sec, .l-lead + .task-body { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--paper-rule); }
/* Сноска в конце письма — мелко, под короткой линией */
.l-foot {
  margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--paper-rule); width: 100%;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-3); white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Число по дате партнёра — крупно на листе, как число в шапке конверта */
.l-result { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--s-5); }
.l-result .n { min-width: 72px; padding: 6px 18px; border: 2.5px solid var(--amber); border-radius: 999px;
  background: var(--amber-wash); font: 800 32px/1.1 var(--f-display); color: var(--amber-deep); text-align: center; }
.l-result .l { margin-top: 2px; font-size: 14px; color: var(--ink-3); }
/* Шапка конверта по дате партнёра: своего числа нет — от руки, на чём считаем */
.env-by { margin-top: var(--s-2); font: 500 20px/1.2 var(--f-hand); color: var(--muted); }
.letter #pres:empty { display: none; }
/* Результат по партнёру — под формой, тоже через линию */
.letter #pres > .l-sec:first-child, .letter #pres > .l-result {
  display: flex; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--paper-rule);
}
.letter #pres > .l-sec:first-child { display: block; }
.letter .l-result + .l-sec { margin-top: 0; padding-top: 0; border-top: 0; }
/* Пометки к тексту — на бумаге, без тёмной подложки */
.letter .note-muted, .letter .note-info, .letter .note-warn {
  margin-top: var(--s-5); background: var(--paper-2); border: 0; color: var(--ink-2);
}
.letter .note-muted::before, .letter .note-info::before { color: var(--ink-3); }
.letter .note-warn::before { color: var(--terracotta); }
.sheet .err { color: var(--terracotta); }

/* ---------- Прогресс в опросах: вопросы уровнями ① ② ③ ---------- */
/* Пройденный — залит янтарём, текущий — янтарный контур со свечением,
   будущий — серый контур. .many — длинный опрос, кружки мельче. */
.q-lv { margin-left: auto; display: flex; gap: 6px; }
.q-lv i { width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid var(--line);
  border-radius: 50%; font: 800 12.5px/1 var(--f-display); font-style: normal; color: var(--muted-2); }
.q-lv i.done { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.q-lv i.on { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 0 4px var(--amber-glow); }
.q-lv.many { gap: 4px; }
.q-lv.many i { width: 21px; height: 21px; font-size: 10.5px; border-width: 1.5px; }
.q-lv.many i.on { box-shadow: 0 0 0 3px var(--amber-glow); }
/* Последний вопрос — флажок финиша; только что пройденный — «подпрыгивает» */
.q-lv i.fin { border: 0; }
.q-lv i.fin .emo { width: 100%; height: 100%; display: block; filter: grayscale(.2); }
.q-lv i.just { animation: lv-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes lv-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
/* Ответы в опросах — плитки: скруглённые, нажимаются как кнопки в игре.
   Выбранная — янтарная рамка и подсветка. .row — короткие «Да / Нет» в ряд. */
.options.tiles { gap: var(--s-2); border-top: 0; }
.options.tiles .option { padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px;
  background: var(--surface); transition: border-color .15s, background .15s, transform .1s; }
.options.tiles .option:active { transform: scale(.98); }
.options.tiles .option.on { border-color: var(--amber); background: var(--amber-wash); }
.options.tiles.row { flex-direction: row; }
.options.tiles.row .option { flex: 1; flex-direction: column; align-items: center; gap: 10px; padding: 22px 8px;
  font: 800 20px/1.2 var(--f-display); }
.options.tiles.row .mark { display: none; }
/* Вступление к опросу историями: полоски сверху, абзац — экран */
.story-bar { flex: 1; display: flex; gap: 4px; }
.story-bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.story-bar i.done, .story-bar i.on { background: var(--amber); }
.story-card { cursor: pointer; animation: reveal-in .35s cubic-bezier(.2, .7, .2, 1) both; }
.story-card .task-body { font-size: 18px; line-height: 1.7; }
/* ---------- Мастер отчёта ---------- */
/* Шапка: «Фото — Дневник — Опрос», текущая часть янтарная, пройденные с галочкой */
.w-parts { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--muted-2); }
.w-parts span { display: inline-flex; align-items: center; gap: 4px; }
.w-parts .emo { width: 20px; height: 20px; }
.w-parts span:not(.on):not(.done) .emo { filter: grayscale(1); opacity: .4; }
.w-parts .on { color: var(--amber); }
.w-parts .done { color: var(--muted); }
.w-parts .done .ico { color: var(--amber); }
.w-parts i { width: 10px; height: 2px; border-radius: 1px; background: var(--line); }
.w-frame-emo { width: 64px; height: 64px; }
/* Фото задания: пусто — рамка под снимок во всю ширину, нажимается целиком */
.w-frame {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; aspect-ratio: 4 / 3; padding: var(--s-4);
  background: transparent; border: 2px dashed var(--line); border-radius: var(--r-lg);
  color: var(--text-2); font-size: 16px; font-weight: 600; text-align: center;
}
.w-frame:hover, .w-frame:focus-visible { border-color: var(--amber); outline: none; }
.w-frame .s { font-size: 14.5px; font-weight: 400; color: var(--muted); }
.w-frame.bad { border-color: var(--terracotta); }
/* Выбрано — сам снимок крупно, без имени файла */
.w-shot { display: block; width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-paper); }
.link-btn { display: inline-flex; margin-top: var(--s-3); padding: 6px 2px; background: none; border: 0; color: var(--amber); font-weight: 600; font-size: 15px; }
/* Фото страницы — внизу самого листа дневника */
.w-attach { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--paper-rule); }
.w-attach img { width: 52px; height: 68px; object-fit: cover; border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transform: rotate(-3deg); }
.w-attach .t { font-size: 14px; color: var(--ink-2); }
.w-attach .t b { display: block; font-weight: 600; color: var(--ink); }
.w-attach button { background: none; border: 0; padding: 4px 0; font-weight: 600; font-size: 14px; color: var(--amber-deep); }
.w-attach .add { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-align: left; }
.w-attach .a, .w-attach .opt { margin-left: auto; }
.w-attach .opt { font-size: 14px; color: var(--ink-3); }
/* Отчёт отправлен — штемпель пыльной розой на шапке шага */
.done-mark .stamp.sent { width: 88px; height: 88px; border-color: var(--rose-line); color: var(--rose); }
.done-mark .stamp.sent b { font-size: 8.5px; letter-spacing: .3px; }

/* Выбор действия прямо на карточке шага: кнопка внизу карточки,
   выбранная карточка — янтарная рамка, кнопка становится отметкой */
.tc-pick { padding: 0 20px 20px; }
.tc-pick .btn { width: 100%; }
/* Выбор на белой карточке: тёмная кнопка; выбранная карточка — в янтарной
   рамке, кнопка становится янтарной «Твой выбор» */
.tc-opt .tc-pick .btn { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tc-opt.chosen { box-shadow: 0 0 0 3px var(--amber), var(--shadow-lift); }
.tc-opt.chosen .tc-pick .btn { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.tc-pick-hint:empty { display: none; }
.tc-pick-hint.bad { color: var(--error); }
/* В мастере выбранное действие — одной строкой с миниатюрой */
.w-act { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.w-act .thumb { flex: 0 0 48px; width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-sm); }
.w-act .t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.w-act .t b { color: var(--text-hi); font-size: 16px; }
.w-act .link-btn { margin: 0; }
body.preview .tc-pick .btn { pointer-events: none; }
/* То же на листе доработки: бумажные цвета вместо стола */
.sheet .w-act { background: var(--paper-field); border-color: var(--paper-3); }
.sheet .w-act .t b { color: var(--ink); }
.sheet .w-act .small { color: var(--ink-3); }
.sheet .w-act .link-btn { color: var(--amber-deep); }
.sheet .pick-act, .sheet .pick-act .option { border-color: var(--paper-3); color: var(--ink-2); }
.sheet .pick-act .option.on { color: var(--ink); }
.sheet .pick-act .option .mark { border-color: var(--paper-3); }

/* Выбор действия в мастере: строка списка с миниатюрой картинки задания */
.pick-act .option { align-items: center; }
.pick-act .thumb { flex: 0 0 52px; width: 52px; height: 52px; object-fit: cover; border-radius: var(--r-sm); }
.pick-act .act { flex: 1; font-weight: 600; }
.pick-act.bad { border-top-color: var(--terracotta); }
.pick-act.bad .option:last-child { border-bottom-color: var(--terracotta); }
/* Подзаголовок второй половины экрана мастера — мельче главного вопроса */
.question.small-q { font-size: 19px; }

/* Отчёт отправлен: штемпель крупно над заголовком, что ушло — списком */
/* Отправлено — праздник: хлопушка, уровень, плитки с галочками */
.sent-screen { padding-top: 64px; text-align: center; }
.sent-emo { width: 104px; height: 104px; }
.sent-emo .emo { width: 104px; height: 104px; }
.sent-head { display: flex; flex-direction: column; align-items: center; }
.sent-lead { margin: 10px 0 0; font-size: 16px; color: var(--text-body); }
.sent-tile { position: relative; }
.sent-tile > .ico { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; padding: 3px; border-radius: 50%;
  background: var(--amber); color: var(--amber-ink); }
.sent-mark { justify-content: flex-start; margin: 0 0 var(--s-5) 0; }
.sent-mark .stamp.sent { width: 104px; height: 104px; }
.sent-mark .stamp.sent b { font-size: 10px; }
.sent-mark .stamp.sent span { font-size: 13px; }
.checklist .row .sent-what { color: var(--muted); font-size: 14px; text-align: right; max-width: 55%; }

/* Низ экрана вопроса: «Назад» узкой вторичной кнопкой, «Дальше» — на
   остальную ширину. Без «Дальше» (ответ одним нажатием) «Назад» один. */
.q-nav { display: flex; gap: var(--s-3); }
.q-nav .btn { flex: 1; }
.q-nav .btn.ghost { flex: 0 0 auto; width: auto; padding-left: 20px; padding-right: 22px; }
.q-nav.solo .btn.ghost { flex: 1; }

/* «Выбери одно действие» — заголовком над карточками, а не мелкой подписью */
.tc-title { margin: 0; }

/* Доработка на листе: рамка под фото и подписи — бумажными цветами */
.sheet .w-frame { aspect-ratio: 16 / 9; border-color: var(--paper-3); color: var(--ink-2); }
.sheet .w-frame .s { color: var(--ink-3); }
.sheet .w-frame:hover, .sheet .w-frame:focus-visible { border-color: var(--amber-deep); }
.sheet .w-frame.bad { border-color: var(--terracotta); }
.sheet .link-btn { color: var(--amber-deep); }
.sheet .rw-text { min-height: 96px; resize: none; }
/* На листе доработки строка «Прикрепить фото страницы» переносится, а не вылезает */
.sheet .w-attach { flex-wrap: wrap; row-gap: 4px; }

/* Место кнопки «назад», когда её нет: строка не прыгает между вопросами */
.back-slot { width: 40px; height: 40px; flex: 0 0 40px; }

/* Подсказка под вопросом */
.q-hint { margin: 12px 2px 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* Вход: кусочек карты — «ты здесь» (пульсирующая точка) и пунктир к первой вехе */
.here-art { position: relative; height: 96px; margin-top: 4px; }
.here-art svg { position: absolute; left: 0; top: 0; width: 100%; height: 96px; }
.here-art .here { position: absolute; left: 10px; top: 58px; }
.here-art .here i { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 6px var(--amber-glow); animation: here-pulse 2s ease-out infinite; }
.here-art .here b { position: absolute; left: -4px; top: -32px; white-space: nowrap; font-size: 22px; color: var(--amber); }
.here-art .goal { position: absolute; right: 0; top: 28px; filter: drop-shadow(0 0 12px var(--amber-halo)); }
.here-art .goal .emo { width: 52px; height: 52px; display: block; }
@keyframes here-pulse { 0% { box-shadow: 0 0 0 0 var(--amber-tape); } 100% { box-shadow: 0 0 0 16px var(--amber-clear); } }

/* Вход: приветствие на «небе», на листе — только дата и кнопка */
.onb-head { margin-top: var(--s-5); padding: 0 2px; }
.onb-sheet { padding-top: var(--s-5); }
/* Пометка от руки над полем даты с каракулей-стрелкой к нему */
.onb-note { display: flex; align-items: flex-end; gap: 4px; margin: 0 0 var(--s-1) var(--s-2); font-size: 21px; }
.scribble { width: 34px; height: 30px; color: var(--amber-deep); flex: 0 0 auto; margin-bottom: -10px; }
/* Вступление к опросу: значок и название по центру, напутствие на листе */
.s-intro { margin-top: var(--s-6); text-align: center; }

/* Предпросмотр из панели: всё видно, но ничего не нажимается */
body.preview .dock button, body.preview .next-btn, body.preview .back,
body.preview #pgo { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .screen, .env-stage { transition: none; }
  .reveal > :not(.topbar) { animation: none; }
  .loader { animation-duration: 2.4s; }
  .here-art .here i, .q-lv i.just, .story-card { animation: none; }
  .pc-flip .side { transition: none; }
}

/* ---------- Мелочи, которые раньше жили в style="" ---------- */
/* Над шапкой запечатанного конверта — воздух под печать */
.envelope-head.sealed { padding-top: 22px; }
/* «Отчёт у куратора»: часы янтарём и подпись — одной строкой */
.wait-row { display: flex; align-items: center; gap: 10px; color: var(--amber); }
.wait-row b { color: var(--text); }
/* Чек-лист отчёта на столе, а не на листе */
.checklist.raised { background: var(--table-raise); }
/* Записка куратора внутри карточки — без своей тени */
.note-paper.flat { box-shadow: none; }
/* Линии тропинки: пройденное янтарём, впереди — тускло */
.trail-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 9; stroke: var(--trail-dim); }
.trail-line.done { stroke: var(--amber); }
/* Сгиб клапана на конверте */
.env-fold { stroke: var(--paper-3); stroke-width: 1.5; }
/* Экран поверх другого экрана (опрос поверх тропинки, мастер отчёта) */
.screen.over { z-index: 40; }

/* Карта желаний: сколько правил открыто — кружками, пока форма закрыта */
.wm-lock { display: flex; align-items: center; gap: 12px; margin-top: var(--s-5); padding: 14px 16px;
  border: 1.5px dashed var(--line); border-radius: var(--r-lg); font-size: 15px; color: var(--muted); }
.wm-lock .q-lv { margin: 0; position: relative; }
/* Форма открылась — выезжает, как новый уровень */
.reveal-gate { animation: reveal-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .reveal-gate { animation: none; } }

/* Кружки вопросов рядом с подписью от руки: вступление и шапка еженедельного опроса */
.lv-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.lv-row.start { justify-content: flex-start; }
.lv-row .q-lv { margin: 0; }
.lv-row .hand { font-size: 20px; }
/* Доработка: что именно вернули — значком и названием части */
.rw-head { display: flex; align-items: center; gap: 10px; font: 800 18px/1.25 var(--f-display); color: var(--ink); }
.rw-head .emo { width: 32px; height: 32px; }

/* «что сдать» от руки янтарём над плитками отчёта, стрелка-каракуля к ним */
.needs-hand { display: flex; align-items: flex-end; gap: 4px; margin: 0 0 var(--s-1) var(--s-2); font-size: 22px; color: var(--amber); }
.needs-hand .scribble { color: var(--amber); }