/* «Затея» — фетр. Слой поверх style.css: раскладка остаётся оттуда, здесь —
   облик. Всё нажимаемое — нашивка: фетр (текстура multiply поверх цвета),
   обмёточный край (косые стежки в рамке), объём и глубокая тень. Пунктира по
   контуру нет — шов и есть край. Тёмной темы у фетра нет: всегда светлый.
   Картинки — /img: фон тремя полосами, ракета, игрушки ожидания, булавки. */

:root, :root.dark {
  --paper: #e8d7bc;
  --ink: #3b2a1e;
  --ink-2: #5a4332;
  --ink-3: #8b6a52;
  --paper-0: rgba(232, 215, 188, 0);

  --card: #fffdf6;
  --card-2: #f3e8d4;
  --card-ink: #3b2a1e;
  --card-ink-2: #5a4332;
  --card-ink-3: #8b6a52;
  --line: #d8c6a8;
  --line-2: #3b2a1e;
  --line-paper: #c9b391;
  --edge: #3b2a1e;

  --brand: #d8383e;
  --brand-press: #b92c32;
  --brand-ink: #d8383e;
  --on-brand: #ffffff;
  --soft: #f6c3c5;
  --soft-2: #fbe3e4;
  --ban: #d8383e;

  --tex: url(/img/tex.webp);
  --tex-light: url(/img/tex-light.webp);
  --shade: 0 1px 0 rgba(0, 0, 0, .12), 0 6px 11px rgba(60, 30, 10, .32);
}

/* ------------------------------------------------------------ фон */

body {
  background: #e8d7bc url(/img/bg-mid.webp) center top / 100% auto repeat-y;
  color: var(--ink);
}

/* небо с солнцем и холмами — сверху страницы, уезжает при прокрутке */
body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  aspect-ratio: 736 / 360;
  z-index: 0;
  pointer-events: none;
  background: url(/img/bg-top.webp) center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}

/* ------------------------------------------------------------ нашивка */

.sticker, .btn-primary, .btn-ghost, .slot, .clip-btn, .tab, .mk, .opt, .say, .safety, .mk-empty,
.wordmark, .turn, .side, .card-kind, .facts li, .steps li::before, .name-in,
#back, #marks-back, #folder-new {
  --c: #fffdf6;
  --e: #e6d9c3;
  --e2: #c9b89c;
  border: 4px solid transparent;
  border-radius: 14px;
  background:
    var(--tex) center / 260px padding-box,
    linear-gradient(var(--c), var(--c)) padding-box,
    repeating-linear-gradient(60deg, var(--e) 0 2px, var(--e2) 2px 3px, var(--e) 3px 4px) border-box;
  background-blend-mode: multiply, normal, normal;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .35),
    inset 0 -3px 5px rgba(0, 0, 0, .14),
    var(--shade);
}

.f-red, .btn-primary, .card-kind, #slot-child { --c: #e0393f; --e: #b82329; --e2: #8a181d; }
.f-blue, #slot-age { --c: #2ab5c8; --e: #1a8a99; --e2: #126571; }
.f-yellow, #slot-place, .safety { --c: #f6c530; --e: #d49e12; --e2: #9f760a; }
.f-pink, #slot-minutes { --c: #f08aa8; --e: #cf5f80; --e2: #a2445f; }
.f-green, #slot-adult { --c: #8cc63f; --e: #5f9a22; --e2: #467318; }
.f-kraft { --c: #f3e4c8; --e: #cdb48a; --e2: #a88f64; }

/* включённое — светло-жёлтая нашивка с золотым краем */
.sticker.on, .opt.on, .tab.on { --c: #fff3c4; --e: #e0b84a; --e2: #b18a22; }

/* ------------------------------------------------------------ шапка и кнопки */

#app { padding-left: 20px; padding-right: 20px; }

.wordmark {
  width: max-content;
  margin-left: auto;
  padding: 5px 13px 5px 8px;
  font-size: 21px;
  letter-spacing: .14em;
  color: var(--ink);
  transform: rotate(1.5deg);
}

.ctx-top .clip-btn { margin-left: 12px; order: -1; }
.ctx-top .wordmark { order: 0; }

img.rk { display: block; height: auto; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.rk-mark { width: 21px; transform: rotate(-8deg); }
.rk-stand { width: 32px; }
.rk-fly { width: 60px; }
.rk-down { width: 84px; }

.btn { font-size: 24px; min-height: 62px; }
.btn-primary { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); border-radius: 18px; border-width: 5px; }
.btn-ghost { color: var(--ink); border-radius: 18px; border-width: 5px; }
.btn-quiet { color: var(--ink-3); }

.go-badge { width: auto; height: auto; background: none; border: none; transform: rotate(12deg); }
.btn-go:active .go-badge { transform: rotate(4deg) translateY(-5px); }
.btn-go[disabled]:active .go-badge { transform: rotate(12deg); }

#back, #marks-back, #folder-new {
  width: auto;
  min-height: 0;
  padding: 3px 14px 4px 11px;
  font-family: var(--script);
  font-size: 18px;
  color: var(--ink);
  transform: rotate(-1.5deg);
}

#folder-new { color: var(--brand-ink); transform: rotate(1.5deg); }

.clip-btn { padding: 4px 11px 5px; color: var(--ink-2); border-radius: 12px; transform: rotate(1deg); }

/* ------------------------------------------------------------ 1. ситуация */

.phrase { margin-top: 64px; font-size: 29px; line-height: 1.72; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }

.slot {
  padding: 0 10px;
  margin: 0 1px;
  border-radius: 13px;
  color: #fff;
  font-weight: normal;
  line-height: 1.12;
  vertical-align: baseline;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

#slot-place, #slot-adult { color: #3b2a1e; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
#slot-age { transform: rotate(-1.2deg); }
#slot-place { transform: rotate(1deg); }
#slot-minutes { transform: rotate(-.8deg); }
#slot-adult { transform: rotate(1.3deg); }
#slot-child { transform: rotate(-1.2deg); }
.slot.pulse { animation: nudge-f 1.5s ease-in-out infinite; }
@keyframes nudge-f {
  0%, 100% { transform: rotate(-1.2deg) scale(1); }
  50% { transform: rotate(-1.2deg) scale(1.07); }
}

.ctx-hint { font-size: 18px; color: var(--ink-3); }

/* прорези в фетре — не нашивка, а дырка под ней: вдавленный край и тень внутрь */
.gaps { gap: 8px; margin-top: 12px; }
.gap:nth-child(odd) { transform: rotate(-1deg); }
.gap:nth-child(even) { transform: rotate(1deg); }
.gap {
  font-size: 18px;
  color: #9d8a6c;
  padding: 2px 11px 3px;
  border: 2px dashed #c3ae8c;
  border-radius: 13px;
  background: rgba(96, 66, 28, .07);
  box-shadow: inset 0 2px 4px rgba(84, 56, 22, .13);
  text-shadow: none;
}

.limits { gap: 10px 8px; }
.ban { padding: 5px 12px 6px 8px; font-size: 17px; color: var(--ink); border-radius: 15px; }
.ban:nth-child(1) { transform: rotate(-1.2deg); }
.ban:nth-child(2) { transform: rotate(1deg); }
.ban:nth-child(3) { transform: rotate(.8deg); }
.ban:nth-child(4) { transform: rotate(-1deg); }
.ban:nth-child(5) { transform: rotate(1.4deg); }
.ban-ic { color: var(--ink-3); }
.ban-ic::after { box-shadow: 0 0 0 1.3px var(--c); }
.ban.on, .ban.on .ban-ic { color: var(--brand); }
.have.on, .have.on .ban-ic { color: #8a5a00; }

/* луг с цветами и ракетой — под главной кнопкой, до низа экрана */
.ctx-go { position: relative; padding-top: 170px; }
.ctx-go::before {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: calc(-1 * (var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 22px));
  aspect-ratio: 736 / 434;
  z-index: -2;
  pointer-events: none;
  background: url(/img/s/meadow.webp?v=5) center bottom / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 24%);
  mask-image: linear-gradient(transparent, #000 24%);
}
#screen-ctx { position: relative; z-index: 0; }
.ctx-go .btn-go { position: relative; transform: rotate(-.6deg); margin-bottom: 4px; }

/* незакрытая затея */
.recap { border-radius: 18px; }

/* ------------------------------------------------------------ 2. ожидание */

.flight { width: 280px; height: 170px; }
.track { border-bottom: 3px dashed #b99a74; opacity: .8; }
.rk-fly { margin-left: -30px; bottom: 20px; }
img.die { width: 52px; height: auto; bottom: 12px; filter: drop-shadow(0 3px 3px rgba(60, 30, 10, .3)); }
.die-1 { left: 80px; }
.die-2 { left: 146px; }
img.boat { width: 100px; height: auto; margin-left: -50px; bottom: 12px; }
img.plane { width: 86px; height: auto; margin-left: -43px; }
img.ball { width: 54px; height: auto; margin-left: -27px; }
img.top { width: 62px; height: auto; margin-left: -31px; }
img.kite { width: 62px; height: auto; margin-left: -31px; }
.wave { width: 280px; }
.wait p { font-size: 19px; color: var(--ink-2); }

/* ------------------------------------------------------------ 3. карточка */

.card-top { gap: 10px; }
.card-top .clip-btn { margin-left: auto; }
.stage { margin-top: 30px; }

.side {
  padding: 20px 18px 22px;
  border-width: 5px;
  border-radius: 24px;
  background-image:
    var(--tex-light),
    linear-gradient(var(--c), var(--c)),
    repeating-linear-gradient(60deg, var(--e) 0 2px, var(--e2) 2px 3px, var(--e) 3px 4px);
  background-size: 560px, auto, auto;
  --c: #fffaee;
}

.mark-row { gap: 8px; }
.mark { color: var(--brand); }
.card-kind {
  display: inline-block;
  /* у заглавных нет хвостов вниз, и строка ставит их выше середины нашивки —
     держим ровно по центру сами: своя высота строки и больший верхний отступ */
  padding: 6px 11px 4px;
  line-height: 1;
  border-width: 3px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  transform: rotate(-2deg);
}

.card-title { font-size: 33px; margin-top: 14px; }
.card-sub { font-size: 18px; }

.facts { gap: 9px 8px; }
.facts li { padding: 3px 11px 4px 9px; border-width: 3px; border-radius: 11px; font-size: 15.5px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); }
.facts .ic { color: inherit; }
.facts li:nth-child(5n+1) { --c: #2ab5c8; --e: #1a8a99; --e2: #126571; transform: rotate(-1deg); }
.facts li:nth-child(5n+2) { --c: #f6c530; --e: #d49e12; --e2: #9f760a; color: #3b2a1e; text-shadow: none; transform: rotate(1.2deg); }
.facts li:nth-child(5n+3) { --c: #8cc63f; --e: #5f9a22; --e2: #467318; color: #243a10; text-shadow: none; transform: rotate(-.8deg); }
.facts li:nth-child(5n+4) { --c: #f08aa8; --e: #cf5f80; --e2: #a2445f; transform: rotate(1deg); }
.facts li:nth-child(5n+5) { --c: #e0393f; --e: #b82329; --e2: #8a181d; transform: rotate(-1.2deg); }

/* «скажите так» — пузырь-нашивка с хвостиком */
.say { margin: 22px 0 14px; padding: 12px 16px 14px; border-radius: 20px; transform: rotate(.5deg); }
.say::after {
  content: "";
  position: absolute;
  left: 30px;
  bottom: -13px;
  width: 20px;
  height: 20px;
  background: var(--tex) center / 260px, #fffdf6;
  background-blend-mode: multiply;
  border-right: 4px solid #e6d9c3;
  border-bottom: 4px solid #e6d9c3;
  border-radius: 0 0 5px 0;
  transform: rotate(45deg);
  box-shadow: 4px 4px 5px rgba(60, 30, 10, .18);
}
.say-text { font-size: 22px; }

.need { margin-top: 20px; }

.turn {
  display: inline-flex;
  width: auto;
  margin-top: 20px;
  padding: 4px 16px 5px;
  font-size: 19px;
  color: var(--brand);
  border-top-width: 4px;
  border-radius: 13px;
  transform: rotate(-1deg);
}
.turn-back { margin-top: 0; padding: 4px 16px 5px; border-bottom-width: 4px; }

.back-label, .ex-label {
  display: inline-block;
  padding-bottom: 5px;
  background: linear-gradient(90deg, var(--brand) 55%, transparent 0) left bottom / 8px 2px repeat-x;
}
.back-label { margin-top: 18px; }

/* схема — тетрадный листок, приколотый двумя булавками-цветочками */
.fig {
  position: relative;
  margin: 26px -4px 14px;
  padding: 10px 8px 6px;
  border-radius: 3px;
  background: #fff repeating-linear-gradient(transparent 0 23px, rgba(80, 140, 200, .13) 23px 24px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 7px 13px rgba(60, 30, 10, .26);
  transform: rotate(-1deg);
}
.fig svg { color: #3b2a1e; }
.fig svg .sk-paper { fill: #fff; }
.fig svg.fig-old { border: none; }
.fig::before, .fig::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -32px;
  width: 86px;
  height: 99px;
  background: var(--pin-l, url(/img/pin-red.webp)) left top / contain no-repeat;
  filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, .35));
  -webkit-mask-image: linear-gradient(to bottom right, #000 0 50%, transparent 52% 90%, #000 92%);
  mask-image: linear-gradient(to bottom right, #000 0 50%, transparent 52% 90%, #000 92%);
  pointer-events: none;
}
.fig::before { left: -28px; transform: rotate(4deg); }
.fig::after { right: -28px; background-image: var(--pin-r, url(/img/pin-blue.webp)); transform: scaleX(-1) rotate(4deg); }

.steps { margin-top: 16px; }
.steps li { padding-left: 46px; padding-bottom: 16px; font-size: 18px; }
.steps li::before {
  top: -4px;
  width: 34px;
  height: 34px;
  border-width: 3px;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.steps li:nth-child(5n+1)::before { --c: #f08aa8; --e: #cf5f80; --e2: #a2445f; }
.steps li:nth-child(5n+2)::before { --c: #2ab5c8; --e: #1a8a99; --e2: #126571; }
.steps li:nth-child(5n+3)::before { --c: #f6c530; --e: #d49e12; --e2: #9f760a; color: #3b2a1e; text-shadow: none; }
.steps li:nth-child(5n+4)::before { --c: #8cc63f; --e: #5f9a22; --e2: #467318; color: #243a10; text-shadow: none; }
.steps li:nth-child(5n+5)::before { --c: #e0393f; --e: #b82329; --e2: #8a181d; }

.ex { margin-top: 22px; }
.ex p { font-size: 18px; }

.safety { margin-top: 24px; padding: 13px 16px 14px; border-radius: 16px; transform: rotate(.5deg); }
.safety .ex-label { color: #3b2a1e; background: none; padding-bottom: 0; }
.safety p { color: #3b2a1e; }

/* нижняя панель лежит на том же фетре */
.dock { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; background: #e8d7bc url(/img/bg-mid.webp) center top / 100% auto repeat-y; }
.dock::before { background: linear-gradient(to bottom, rgba(232, 215, 188, 0), #e8d7bc); }
.dock-main .btn-primary { transform: rotate(-1deg); }
.dock-main .btn-ghost { transform: rotate(.8deg); }
.dock-main .btn-never { color: var(--ink-3); }

.fb { color: var(--ink-2); border-radius: 15px; }
.fb.tilt-1 { transform: rotate(-1.2deg); }
.fb.tilt-2 { transform: rotate(1deg); }
.fb.tilt-3 { transform: rotate(-.6deg); }

/* ------------------------------------------------------------ пусто, закладки */

.empty-head { padding-top: 60px; }
.rk-down { margin: 0 auto 26px; transform: rotate(102deg) translateY(6px); }

#screen-marks .title { margin-top: 110px; }
.tab { padding: 4px 11px 5px; border-radius: 12px; color: var(--ink-2); }
.tab:nth-child(odd) { transform: rotate(-1deg); }
.tab:nth-child(even) { transform: rotate(1deg); }
.mk { border-radius: 16px; }
.mk-empty { border-radius: 16px; color: var(--ink-3); }

/* ------------------------------------------------------------ шторка */

.veil { background: rgba(40, 24, 10, .45); }
.dark .veil { background: rgba(40, 24, 10, .45); }

.sheet {
  border-top: none;
  border-radius: 22px 22px 0 0;
  background: var(--tex) center / 260px, #f3e8d4;
  background-blend-mode: multiply;
  box-shadow: 0 -8px 20px rgba(40, 24, 10, .28);
}
/* шторка — тот же фетр, что у страницы (со строчками по бокам), строчка и сверху;
   не выше окна под шапкой Telegram, длинный список прокручивается внутри */
.sheet {
  background: url(/img/bg-mid.webp) center top / 100% auto repeat-y, #e8d7bc;
  background-blend-mode: normal;
  max-height: calc(100vh - var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) - var(--tg-content-safe-area-inset-top, 0px) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 22px;
}
@supports (height: 100dvh) {
  .sheet { max-height: calc(100dvh - var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) - var(--tg-content-safe-area-inset-top, 0px) - 12px); }
}
.sheet::before { content: none; }
.sheet-grip { width: 48px; height: 5px; background: #c9b391; }
.sheet-title { font-size: 19px; color: var(--ink-3); }
.opt { border-radius: 15px; }
.opt:nth-child(odd) { transform: rotate(-.5deg); }
.opt:nth-child(even) { transform: rotate(.5deg); }
.opts.grid .tick { background: #fffdf6; }
.tick { border-color: #b18a22; color: #b18a22; }
.opt.on { color: var(--ink); }

.name-in { border-radius: 14px; border-width: 4px; }
.name-in:focus { border-color: transparent; --e: #e0b84a; --e2: #b18a22; }

/* ------------------------------------------------------------ ошибка сети */

.snack, .dark .snack {
  border: 4px solid #2a1d14;
  border-radius: 16px;
  background: var(--tex) center / 260px, #4a3426;
  background-blend-mode: multiply;
  color: #fbf3e3;
  box-shadow: var(--shade);
}
.snack button, .dark .snack button { color: #ffb4a8; }

@media (max-width: 344px) {
  #app { padding-left: 14px; padding-right: 14px; }
  .dock { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .phrase, .slot { font-size: 25px; }
  .flight { width: 250px; }
}

/* неактивная главная кнопка — без прозрачности, чтобы луг не просвечивал */
.btn-primary[disabled] { opacity: 1; --c: #f1e6d2; --e: #d8c6a8; --e2: #bba789; color: #a08670; text-shadow: none; }
.turn-back { display: flex; width: max-content; }

/* ============ нашивки из фото. Заготовка FLUX (красный фетр с белой строчкой и бежевый с коричневой; остальные цвета — перекраска фетра, нитка своя)
   перекрашена в цвета интерфейса и нарезана на 9 частей (img/p, сборка —
   screens/zateya/felt-shov/build.py): углы как на фото, стороны
   растягиваются, середина прозрачная — под ней фетр того же тона из CSS.
   Поэтому нашивка любого размера на любом телефоне, без растянутой картинки. */
.sticker, .btn-primary, .btn-ghost, .slot, .clip-btn, .tab, .mk, .opt, .say, .safety, .mk-empty,
.wordmark, .turn, .side, .card-kind, .facts li, .name-in,
#back, #marks-back, #folder-new {
  --pi: url(/img/p/a-cream.webp?v=3); --pc: #fff8ec;
  --pw: 18px;
  border: 4px solid transparent;
  border-radius: calc(var(--pw) * 1.25);
  /* fill: середина — тот же фетр из фото, без подложки другого тона */
  border-image: var(--pi) 90 fill / var(--pw) round;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .10)) drop-shadow(0 5px 5px rgba(60, 30, 10, .30));
}
.f-red, .btn-primary, .card-kind, #slot-child, .facts li:nth-child(5n+5) { --pi: url(/img/p/a-red.webp?v=3); --pc: #e3363a; }
.f-blue, #slot-age, .facts li:nth-child(5n+1) { --pi: url(/img/p/a-blue.webp?v=3); --pc: #2ebacd; }
.f-yellow, #slot-place, .safety, .facts li:nth-child(5n+2) { --pi: url(/img/p/a-yellow.webp?v=3); --pc: #faca35; }
.f-pink, #slot-minutes, .facts li:nth-child(5n+4) { --pi: url(/img/p/a-pink.webp?v=3); --pc: #f58fad; }
.f-green, #slot-adult, .facts li:nth-child(5n+3) { --pi: url(/img/p/a-green.webp?v=3); --pc: #92cb43; }
.f-kraft { --pi: url(/img/p/a-kraft.webp?v=3); --pc: #f8e4be; }
.side { --pi: url(/img/p/a-card.webp?v=3); --pc: #fef6ea; }
.sticker.on, .opt.on, .tab.on { --pi: url(/img/p/a-on.webp?v=3); --pc: #fff2a6; }
.btn-primary[disabled] { --pi: url(/img/p/a-mute.webp?v=3); --pc: #f6ecdc; filter: drop-shadow(0 3px 4px rgba(60, 30, 10, .2)); }
.ban-ic::after { box-shadow: 0 0 0 1.3px var(--pc); }

.side, .say, .mk, .recap, .opt, .safety, .btn { --pw: 22px; }
.side { --pw: 26px; }
.slot, .facts li, .card-kind, .tab, .clip-btn { --pw: 14px; }
.say::after { background: url(/img/tex-soft.webp) center / 260px, #fff8ec; background-blend-mode: multiply; border-color: #e0d0b2; box-shadow: none; }

/* номера шагов — круглые нашивки */
.steps li::before { border: none; box-shadow: none; background: url(/img/p/c-pink.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 3px 3px rgba(60, 30, 10, .3)); }
.steps li:nth-child(5n+2)::before { background-image: url(/img/p/c-blue.webp); }
.steps li:nth-child(5n+3)::before { background-image: url(/img/p/c-yellow.webp); }
.steps li:nth-child(5n+4)::before { background-image: url(/img/p/c-green.webp); }
.steps li:nth-child(5n+5)::before { background-image: url(/img/p/c-red.webp); }

/* светлый фетр — бежевый, светлее фона, но не белый */

.opts.grid .tick { background: #fff8ec; }

/* ============ шрифт один на всё приложение: рукописный убран */
:root, :root.dark { --script: var(--body); }

/* в Telegram «назад» — системная кнопка в шапке */
.tg-back #back, .tg-back #marks-back { display: none; }

/* фраза: ровно три строки, размер шрифта ставит fitPhrase() */
.phrase { font-size: 30px; line-height: 1.75; }
.ph-line { display: block; width: max-content; white-space: nowrap; }
.phrase .slot { font-size: 1em; }
.phrase .slot { padding: 0 .32em; }

/* ============ главная: шесть кнопок сеткой 2×3, «Подобрать» сразу под ними,
   луг с ракетой — отдельно внизу экрана, кнопка его не закрывает */
.limits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.limits .ban { justify-content: flex-start; min-width: 0; font-size: clamp(14px, 4.3vw, 17px); line-height: 1.15; text-align: left; }
/* фраза, шесть кнопок, «Подобрать» и верх ракеты — равные просветы: авто-поля делят
   свободное место поровну, padding-top — наименьший просвет на коротком экране */
.ctx-go { margin-top: auto; margin-bottom: auto; padding-top: 18px; position: static; }
.ctx-go .btn-go { min-height: 58px; }
.ctx-go::before { content: none; }
/* низ экрана — верх ракеты: луг шириной экран+4px, ракета на .459 ширины от низа луга,
   низ луга ниже экрана на safe+22px; плюс наименьший просвет 18px */
#screen-ctx.on { padding-bottom: calc((min(100vw, 560px) + 4px) * .459 - var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 4px); }
#screen-ctx::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: calc(-1 * (var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 22px));
  aspect-ratio: 736 / 434;
  z-index: -2;
  pointer-events: none;
  background: url(/img/s/meadow.webp?v=5) center bottom / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 24%);
  mask-image: linear-gradient(transparent, #000 24%);
}


/* главная влезает в экран обычного айфона вместе с шапкой Telegram */
#screen-ctx .phrase { margin-top: max(40px, calc(60px + (100vw - 390px) * .5)); }
/* под последней строкой фразы — полуинтерлиньяж 1.75, на глаз просвет больше; вычитаем */
#screen-ctx .phrase { margin-bottom: -10px; }
#screen-ctx .limits { margin-top: auto; padding-top: 18px; }
.limits .ban { padding-top: 3px; padding-bottom: 4px; }
/* небо: верхняя строчка на месте, солнце и всё нашитое ниже на ~26px (bg-top-low —
   вставлена полоса фетра под строчкой), чтобы кнопки шапки Telegram не закрывали глаза;
   низ холмов обрезан коротко, без тумана над фразой */
body::before { aspect-ratio: 736 / 390; background-image: url(/img/bg-top-low.webp?v=2); -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); }

/* шапка главной: «Затея» целиком на тёмно-зелёном холме, закладки — на светло-зелёном */
.ctx-top { margin-top: 4px; }
/* нашивки «Затея» нет: на её месте (тёмный холм справа) — закладки, если они есть;
   высота строки держится и без них, чтобы фраза не прыгала */
.ctx-top { min-height: 50px; }
.ctx-top .wordmark { display: none; }
.ctx-top .clip-btn { margin-left: auto; margin-right: 3px; order: 0; padding: 7px 14px 8px; font-size: 18px; transform: rotate(1.5deg); }
.ctx-top .clip-btn .ic { width: 20px; height: 20px; }

/* карточка: невидимая сторона (оборот длиннее лица) не растягивает страницу вниз */
.stage { overflow-x: visible; overflow-y: clip; overflow-clip-margin: 30px; }
/* карточка под небом: «В закладки» — на тёмно-зелёном холме (его середина на .33 ширины
   экрана, небо тянется по ширине), сама карточка — ниже холмов, чуть заходит на облако
   (.45 ширины); экран не короче окна, панель кнопок со строчкой — у низа окна */
#screen-card.on {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) - var(--tg-content-safe-area-inset-top, 0px) - var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 36px);
}
@supports (height: 100dvh) {
  #screen-card.on {
    min-height: calc(100dvh - var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) - var(--tg-content-safe-area-inset-top, 0px) - var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 36px);
  }
}
#screen-card .card-top {
  flex: none;
  height: 36px;
  margin: max(0px, calc(100vw * .33 - 18px - var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) - var(--tg-content-safe-area-inset-top, 0px) - 14px)) 0 0;
}
#screen-card .card-top .clip-btn { margin-right: 0; }
/* «Почему она» на карточке не показываем — лишнее */
.card-why { display: none; }
/* обрез оборота — на 40px ниже карточки, иначе её тень срезается ровной тёмной полосой */
#screen-card .stage { flex: none; margin: max(10px, calc(100vw * .12 - 18px)) 0 -40px; padding-bottom: 40px; box-sizing: content-box; }
/* панель без подложки: кнопки лежат прямо поверх карточки, каждая со своей тенью;
   сквозь пустые места панели карточку можно листать и нажимать */
#screen-card .dock {
  margin-top: auto;
  padding-top: 16px;
  background: none;
  pointer-events: none;
}
#screen-card .dock::before { content: none; }
/* нижняя строчка карточки — не на панели, а в самом конце страницы: видна, только когда
   докрутили до низа (или карточка короткая и влезает целиком) */
#screen-card .dock::after { content: none; }
#screen-card { position: relative; }
#screen-card::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: calc(-1 * (var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 22px));
  z-index: 6;
  height: 14px;
  background: url(/img/stitch-bottom.webp) center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
#screen-card .dock .btn, #screen-card .dock .sticker { pointer-events: auto; }
#screen-card .dock .btn { box-shadow: 0 6px 14px -4px rgba(70, 45, 20, .45), 0 2px 4px rgba(70, 45, 20, .2); }

/* нижняя строчка по краю экрана: на карточке — по низу панели кнопок,
   на остальных экранах (кроме главной, там луг) — по низу страницы */
.dock { padding-bottom: calc(var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 22px); }
/* нижний отступ #app под панелью съеден: страница кончается ровно по строчке */
.dock { margin-bottom: calc(-1 * (var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 22px)); }
.dock::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: url(/img/stitch-bottom.webp) center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
/* закладки, «пусто», ожидание: экран не короче окна, строчка прилипает к низу окна
   в самом конце страницы (видна, когда докрутили) — отрицательный низ съедает нижний отступ #app */
#screen-marks.on, #screen-empty.on, #screen-wait.on {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  min-height: calc(100vh - var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) - var(--tg-content-safe-area-inset-top, 0px) - var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 36px);
}
@supports (height: 100dvh) {
  #screen-marks.on, #screen-empty.on, #screen-wait.on {
    min-height: calc(100dvh - var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) - var(--tg-content-safe-area-inset-top, 0px) - var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 36px);
  }
}
#screen-marks::after, #screen-empty::after, #screen-wait::after {
  content: "";
  display: block;
  flex: none;
  position: relative;
  z-index: 3;
  box-sizing: content-box;
  height: 14px;
  margin: auto -20px calc(-1 * (var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 22px));
  border-top: 24px solid transparent;
  background: url(/img/stitch-bottom.webp) center bottom / 100% 14px no-repeat;
  background-origin: content-box;
  pointer-events: none;
}

/* низкий экран: кнопка может лечь на макушку ракеты, зато всё влезает без прокрутки */
@media (max-height: 720px) {
  #screen-ctx.on { padding-bottom: calc((100vw + 40px) * .378 - 48px); }
  #screen-ctx .limits, .ctx-go { padding-top: 12px; }
}

/* переход между экранами — быстрая смена (поворот убран везде по просьбе Алёши) */
.screen { animation: quick-in .16s ease-out backwards; }
@keyframes turn-in {
  from { opacity: 0; transform: perspective(1500px) rotateY(-80deg); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

/* ============ заставки ожидания: земля и вода — фетр (FLUX), вместо пунктира и нарисованных волн */
.flight .track, .scene[data-scene="boat"] .wave { display: none; }
.scene::before {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: 0;
  z-index: 0;
  background: center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.scene > * { z-index: 1; }
.scene[data-scene="rocket"]::before { height: 49px; background-image: url(/img/g-luna.webp); }
.scene[data-scene="kite"]::before { height: 50px; background-image: url(/img/g-cvety.webp); }
.scene[data-scene="dice"]::before, .scene[data-scene="top"]::before { height: 44px; background-image: url(/img/g-pol.webp); }
.scene[data-scene="plane"]::before { height: 56px; background-image: url(/img/g-trava.webp); }
.scene[data-scene="ball"]::before { height: 43px; background-image: url(/img/g-pesok.webp); }
.scene[data-scene="boat"]::before { height: 51px; background-image: url(/img/g-voda.webp); }
.scene[data-scene="dice"] .die { bottom: 36px; }
.scene[data-scene="top"] .top { bottom: 36px; }
.scene[data-scene="ball"] .ball { bottom: 37px; }
.scene[data-scene="ball"] .shadow { bottom: 34px; }
.scene[data-scene="boat"] .boat { bottom: 30px; }
.scene[data-scene="rocket"] .rk-fly { bottom: 44px; }
.scene[data-scene="plane"] .plane { bottom: 62px; }
.scene[data-scene="kite"] .kite { bottom: 42px; }

/* ============ шторки выбора — полноэкранной страницей, как закладки: небо с солнцем
   сверху, выбор ниже, появляется тем же разворотом; закрывает «Назад» Telegram */
.veil { display: none !important; }
.sheet {
  top: 0;
  display: flex;
  flex-direction: column;
  max-height: none;
  padding: max(calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px) + 14px), calc(100vw * .53)) 18px calc(var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 22px);
  border-radius: 0;
  box-shadow: none;
  background: url(/img/bg-mid.webp) center top / 100% auto repeat-y, #e8d7bc;
  background-attachment: local;
  transform: none;
  opacity: 0;
  transition: opacity .2s ease;
}
@supports (height: 100dvh) { .sheet { max-height: none; } }
.sheet.on { transform: none; opacity: 1; }
/* фетр и небо шторки на месте (совпадают со страницей), разворачивается только содержимое */
.sheet { transition: none; }
.sheet.on > * { animation: quick-in .16s ease-out backwards; }
.sheet::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  aspect-ratio: 736 / 390;
  z-index: -1;
  background: url(/img/bg-top-low.webp?v=2) center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(#000 90%, transparent);
  mask-image: linear-gradient(#000 90%, transparent);
  pointer-events: none;
}
.sheet > * { position: relative; }
.sheet-grip { display: none; }
.sheet-title { margin-bottom: 16px; font-family: var(--head); font-size: 30px; line-height: 1.12; color: var(--ink); }
.sheet::after {
  content: "";
  display: block;
  flex: none;
  position: relative;
  z-index: 3;
  box-sizing: content-box;
  height: 14px;
  margin: auto -18px calc(-1 * (var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 22px));
  border-top: 24px solid transparent;
  background: url(/img/stitch-bottom.webp) center bottom / 100% 14px no-repeat;
  background-origin: content-box;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .sheet.on > * { animation: none; } }

/* в заставку и из неё — без разворота, быстрая смена */
.screen.quick { animation: quick-in .16s ease-out backwards; }
@keyframes quick-in { from { opacity: 0; } to { opacity: 1; } }

/* плашка «Как прошла …» на главной не нужна */
#recap { display: none !important; }

/* закладки на главной — под тёмно-зелёным холмом (низ холма на .42 ширины экрана),
   из потока вынесены: высота шапки прежняя, фраза не сдвигается */
.ctx-top { position: relative; }
.ctx-top .clip-btn {
  position: absolute;
  right: 3px;
  /* на 12px ниже низа холма, но не налезая на первую строку фразы
     (шапка 50px + её нижний отступ 18px + отступ фразы − высота кнопки − зазор) */
  top: min(calc(100vw * .42 + 12px - var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) - var(--tg-content-safe-area-inset-top, 0px) - 18px),
    calc(68px + max(40px, calc(60px + (100vw - 390px) * .5)) - 42px));
  padding: 2px 14px 3px;
  margin: 0;
}

/* низ карточки: «Другую» (главная) · «Не моё» · «В закладки» — поровну */
.dock-main #swap { flex: 1 1 30%; }
.dock-main .btn-ghost { flex: 1 1 30%; font-size: 17px; }
.dock-main .btn-never { font-size: 17px; }
.btn-mark { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.btn-mark[hidden] { display: none; }
.btn-mark .ic { flex: none; width: 17px; height: 17px; }
.dock-main .btn-mark { transform: rotate(-.6deg); }
#mark.on { --pi: url(/img/p/a-on.webp?v=3); --pc: #fff2a6; }
.dock-main .btn { font-size: 18px; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.back-fb { margin-top: 22px; }
.back-fb .fbs { margin-top: 8px; }

/* кубики: второй до старта не лежит на полу (fill backwards), в конце круга —
   не пропадают разом, а подлетают и тают, затем снова падают */
.die-1, .die-2 { animation-name: dice-f; animation-duration: 2s; animation-fill-mode: backwards; }
@keyframes dice-f {
  0% { transform: translateY(-80px) rotate(-200deg); opacity: 0; }
  10% { opacity: 1; }
  45% { transform: translateY(0) rotate(0deg); }
  56% { transform: translateY(-14px) rotate(-18deg); }
  66% { transform: translateY(0) rotate(0deg); }
  84% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-60px) rotate(160deg); opacity: 0; }
}
.screen.still { animation: none; }

/* схема затеи во весь экран */
.fig { cursor: zoom-in; }
.figview {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px) + 12px) 12px calc(var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 12px);
  background: rgba(40, 24, 10, .82);
  touch-action: none;
  overflow: hidden;
  animation: quick-in .16s ease-out;
  -webkit-user-select: none;
  user-select: none;
}
.figview[hidden] { display: none; }
.figview-sheet {
  width: 100%;
  max-width: 560px;
  padding: 12px 10px 8px;
  border-radius: 3px;
  background: #fff repeating-linear-gradient(transparent 0 23px, rgba(80, 140, 200, .13) 23px 24px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transform-origin: 0 0;
  will-change: transform;
}
.figview-sheet svg { display: block; width: 100%; height: auto; color: #3b2a1e; }
.figview-sheet svg .sk-paper { fill: #fff; }
.figview-x {
  position: absolute;
  top: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px) + 6px);
  right: 12px;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 248, 236, .92);
  color: #3b2a1e;
  font-size: 28px;
  line-height: 40px;
  text-align: center;
}

/* оборот карточки — без поворота: лицо и оборот сменяются быстро, как экраны */
.flip, .flip.flipped { -webkit-transform: none; transform: none; transform-style: flat; transition: height .2s ease; }
.side-back { -webkit-transform: none; transform: none; }
.side { -webkit-backface-visibility: visible; backface-visibility: visible; transition: opacity .16s ease-out, visibility 0s linear .16s; }
.side-back, .flip.flipped .side-face { opacity: 0; visibility: hidden; }
.flip.flipped .side-back, .side-face { opacity: 1; visibility: visible; transition: opacity .16s ease-out, visibility 0s; }
.flip.flipped .side-face { transition: opacity .16s ease-out, visibility 0s linear .16s; }

/* свайп по карточке — та же быстрая смена */
.stage.swap-in { animation: quick-in .16s ease-out; }
html, body { overscroll-behavior-x: none; }

/* хвостик облачка «Скажите так» не нужен */
.say::after { content: none; display: none; }

/* ═══ луг: качаются соцветия ══════════════════════════════════════════
   Полотно луга — meadow.webp: то же bg-bottom, только соцветия вместе с их
   тенью стёрты по форме, стебли дотянуты под цветок (tools/felt/flowers.py).
   Головки лежат сверху нашивками 2× с запечённой мягкой тенью и качаются
   вокруг места, где стебель входит в цветок. Позиции — из img/s/heads.json. */
.meadow {
  position: absolute;
  left: -20px; right: -20px;
  bottom: calc(-1 * (var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 22px));
  aspect-ratio: 736 / 434;
  z-index: -1;
  pointer-events: none;
}
.meadow img { position: absolute; display: block; }
.m-h1 { left:  2.72%; top: 15.21%; width: 20.92%; transform-origin: 46.3% 83.1% }
.m-h2 { left: 17.93%; top: 27.65%; width: 21.20%; transform-origin: 50.0% 75.3% }
.m-h3 { left: 63.99%; top: 21.43%; width: 20.92%; transform-origin: 47.7% 78.5% }
.m-h4 { left: 79.48%; top: 16.36%; width: 20.52%; transform-origin: 52.0% 86.1% }

@keyframes fl-sway { 0%, 100% { rotate: -2.5deg } 50% { rotate: 2.5deg } }
#screen-ctx.on .m-h1 { animation: fl-sway 5.4s ease-in-out infinite; }
#screen-ctx.on .m-h2 { animation: fl-sway 6.1s ease-in-out -1.3s infinite; }
#screen-ctx.on .m-h3 { animation: fl-sway 4.9s ease-in-out -2.6s infinite; }
#screen-ctx.on .m-h4 { animation: fl-sway 5.7s ease-in-out -3.9s infinite; }

/* ═══ заставка запуска — стили лежат инлайном в <head> index.html: заставка рисуется сразу,
   не дожидаясь ни этого файла, ни скрипта Telegram ═══ */
@media (prefers-reduced-motion: reduce) { #screen-ctx.on .meadow img { animation: none; } }