/* Сказки Лапушат — стили. Анимации только transform/opacity. */

/* Шрифты — свои, из assets/fonts/ (раньше — Google Fonts: лишний сервер и блокировка отрисовки).
   Подмножества кириллица + латиница; латиница нужна и русскому тексту (цифры, «», —, неразрывный пробел).
   Nunito — один переменный файл на подмножество (толщины 200–1000). PT Serif — 400, 700 и курсив 400,
   как было в Google. Файлы кешируются на год без сверки: поменяли шрифт — дайте файлу новое имя
   (и поправьте preload в index.html и FONT_FILES в sw.js). Лицензия — assets/fonts/OFL.txt */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("assets/fonts/nunito-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("assets/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/pt-serif-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/pt-serif-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/pt-serif-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/pt-serif-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/pt-serif-cyrillic-400-italic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/pt-serif-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cream: #FBF1DC;
  --ink: #3a2716;
  --ink-soft: #6b4a2a;
  --gold-1: #f6d58c;
  --gold-2: #b98a3e;
  --wood-dark: #2a180d;
  --f-display: "Nunito", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --f-serif: "PT Serif", Georgia, "Times New Roman", serif;
  --f-ui: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tab-h: calc(55px + var(--safe-b));
  --paper-texture:
    radial-gradient(120% 80% at 70% 15%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%),
    radial-gradient(140% 90% at 50% 115%, rgba(196, 150, 90, .2), rgba(196, 150, 90, 0) 60%),
    repeating-linear-gradient(0deg, rgba(120, 90, 50, .02) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 90, 50, .016) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #140c07;
  overscroll-behavior: none;
}
body {
  font-family: var(--f-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(90% 70% at 50% 100%, #3a2211 0%, #1c110a 60%, #120a05 100%);
}

button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid #ffd27a;
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---------- Каркас приложения ---------- */
.app {
  position: fixed;
  inset: 0;
  margin: 0 auto;
  max-width: 480px;
  overflow: hidden;
  background: #1c110a;
  isolation: isolate;
}
@media (min-width: 520px) {
  .app { box-shadow: 0 0 0 1px rgba(255, 220, 170, .08), 0 30px 80px rgba(0, 0, 0, .7); }
}

.screens { position: absolute; inset: 0; }
.screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.screen.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s;
}
/* На скрытых экранах ничего не крутим */
.screen:not(.is-active) *,
.screen:not(.is-active) *::before,
.screen:not(.is-active) *::after { animation-play-state: paused !important; }

/* Размытая комната как фон для полки, читалки и страницы родителям */
.soft-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #1c110a; }
.soft-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 72%;
  filter: blur(12px) saturate(1.1) brightness(.4);
}
.soft-bg--reader img { filter: blur(14px) saturate(1.05) brightness(.34); }

/* =====================================================================
   ШАПКА ЭКРАНОВ «ДОМ» И «ПРЕДМЕТЫ»
   ===================================================================== */
.room-moon {
  flex: none;
  width: 26px; height: 26px;
  color: #ffd98a;
  filter: drop-shadow(0 0 8px rgba(255, 210, 120, .55));
}
.brand-title {
  margin: 0;
  font: 900 22px/1 var(--f-display);
  letter-spacing: .005em;
  text-shadow: 0 2px 0 rgba(90, 40, 10, .55), 0 6px 18px rgba(0, 0, 0, .45);
}
.brand-sub {
  margin: 2px 0 0;
  font: 700 11.5px/1.2 var(--f-ui);
  color: #f0d49f;
}
.app-head {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--safe-t) + 7px) 12px 7px 16px;
  color: #fff3dc;
  background: linear-gradient(180deg, #2c190d, #20130a);
  box-shadow: 0 1px 0 rgba(255, 220, 170, .08), 0 6px 14px rgba(0, 0, 0, .35);
}
.app-head-text { flex: 1 1 auto; min-width: 0; }
.app-head .brand-title { font-size: 21px; }
.app-head .brand-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-head--items { background: linear-gradient(180deg, rgba(36, 21, 10, .94), rgba(32, 19, 10, .82)); }

/* Счётчик волшебных семечек */
.seed-count {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  margin: 0;
  padding: 0 13px 0 6px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 236, 190, .18), rgba(255, 220, 160, .08));
  box-shadow: inset 0 0 0 1.5px rgba(246, 213, 140, .5), 0 4px 10px rgba(0, 0, 0, .25);
  color: #ffe6b0;
  font: 900 18px/1 var(--f-display);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
span.seed-count { cursor: default; }
.seed-count img {
  width: 24px; height: 29px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 220, 120, .6));
}
.seed-count.is-bump, .tab-ic.is-bump { animation: seed-bump .65s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes seed-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.28) rotate(-4deg); }
  100% { transform: scale(1); }
}
.seed-fly {
  position: absolute;
  z-index: 60;
  width: 34px; height: 34px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 215, 110, .85));
}

/* ---------- Книга: объёмная твёрдая обложка лицом к зрителю ---------- */
.book {
  --t: calc(var(--bw) * .13);
  position: relative;
  flex: none;
  display: block;
  width: var(--bw);
  height: calc(var(--bw) * 1.4);
  font-size: calc(var(--bw) / 10);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  perspective: 62em;
  scroll-snap-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.book:focus-visible { outline-offset: 6px; }
.book::before { /* тень на задней стенке шкафа */
  content: "";
  position: absolute;
  left: .9em; right: -.8em; top: .8em; bottom: .1em;
  border-radius: .7em;
  background: rgba(40, 18, 4, .34);
  box-shadow: 0 0 1.1em .5em rgba(40, 18, 4, .32);
}
.book-shadow {
  position: absolute;
  left: -6%; right: -16%;
  bottom: -.7em;
  height: 1.8em;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 8, 0, .55), rgba(20, 8, 0, 0));
}
.b3d {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transform: rotateY(-19deg) rotateX(5deg);
  transition: transform .4s cubic-bezier(.3, .7, .3, 1.25);
}
@media (hover: hover) {
  .book:hover .b3d { transform: rotateY(-8deg) rotateX(3deg) translateY(-.45em); }
}
.book:focus-visible .b3d { transform: rotateY(-8deg) rotateX(3deg) translateY(-.45em); }
.book:active .b3d { transform: rotateY(-4deg) rotateX(2deg) translateY(-.2em) scale(.97); }

.b-front, .b-back, .b-edge, .b-bottom { position: absolute; display: block; }
.b-front {
  inset: 0;
  overflow: hidden;
  border-radius: .25em .6em .6em .25em;
  transform: translateZ(calc(var(--t) / 2));
  background-color: var(--c);
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .2)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, rgba(0, 0, 0, .035) 2px 4px);
  box-shadow: inset 0 0 0 .08em rgba(0, 0, 0, .25), inset -.1em 0 .15em rgba(0, 0, 0, .15);
}
.b-back {
  inset: 0;
  border-radius: .25em .6em .6em .25em;
  transform: translateZ(calc(var(--t) / -2));
  background-color: var(--c);
  background-image: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45));
}
.b-edge { /* толщина страниц справа */
  top: .3em; bottom: .3em;
  right: calc(var(--t) / -2 + .22em);
  width: var(--t);
  transform: rotateY(90deg);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .1)),
    repeating-linear-gradient(90deg, #fbf2dc 0 1px, #dcc9a2 1px 2px);
}
.b-bottom { /* толщина страниц снизу */
  left: .3em; right: .35em;
  height: var(--t);
  bottom: calc(var(--t) / -2 + .22em);
  transform: rotateX(-90deg);
  background: repeating-linear-gradient(0deg, #f6ebd1 0 1px, #cfb98d 1px 2px);
}
.b-spine { /* корешок с тиснением */
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1.2em;
  background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(255, 255, 255, .14) 45%, rgba(0, 0, 0, .28));
  box-shadow: 1px 0 0 rgba(0, 0, 0, .28), 2px 0 0 rgba(255, 255, 255, .12);
}
.b-spine::before,
.b-spine::after {
  content: "";
  position: absolute;
  left: .15em; right: .15em;
  height: .24em;
  border-radius: .1em;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
}
.b-spine::before { top: .9em; box-shadow: 0 .45em 0 -.02em rgba(246, 213, 140, .7); }
.b-spine::after { bottom: .9em; box-shadow: 0 -.45em 0 -.02em rgba(246, 213, 140, .7); }
.b-week {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  font: 800 .72em/1 var(--f-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f7dc9c;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}
.b-frame {
  position: absolute;
  left: 1.7em; right: .75em; top: .8em;
  height: 7.1em;
  display: block;
  padding: .24em;
  border-radius: .4em;
  background: linear-gradient(135deg, #fae9c2, #d6ae62 55%, #f5dfae);
  box-shadow: 0 .15em .35em rgba(0, 0, 0, .35);
}
.b-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: .22em;
}
.b-cap {
  position: absolute;
  left: 1.65em; right: .55em;
  top: 8.25em; bottom: .6em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .2em;
  text-align: left;
}
.b-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  hyphens: auto;
  font: 800 1.42em/1.02 var(--f-display);
  color: #fff6e2;
  letter-spacing: -.005em;
  text-shadow: 0 .06em 0 rgba(0, 0, 0, .3);
}
.b-heroes {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 700 .86em/1.18 var(--f-ui);
  color: rgba(255, 246, 226, .9);
  -webkit-line-clamp: 3;
}
.b-dots { display: none; flex-wrap: nowrap; gap: .3em; padding: 0 0 .15em .1em; }
.b-dots i {
  display: block;
  flex: none;
  width: .8em; height: .8em;
  border-radius: 50%;
  box-shadow: 0 0 0 .15em rgba(255, 246, 226, .85);
}
.book--mini .b-heroes { display: none; }
.book--mini .b-dots { display: flex; }
.b-title--long { font-size: 1.12em; line-height: 1.04; -webkit-line-clamp: 3; }
.b-title--xlong { font-size: 1em; }
.book--mini .b-title { flex: none; font-size: 1.6em; line-height: 1.02; }
.book--mini .b-week { font-size: 0; transform: translate(-50%, -50%); }
.book--mini .b-week::after {
  content: attr(data-n);
  font: 800 calc(var(--bw) * .11)/1 var(--f-display);
  letter-spacing: 0;
  color: #f7dc9c;
}
.book--mini::before { opacity: .8; }
.b-gloss {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 32%);
  pointer-events: none;
}
.book-mark { /* ляссе: книга, которую сейчас читаем */
  position: absolute;
  z-index: -1;
  top: -1.25em;
  right: 2em;
  width: 1.05em;
  height: 3em;
  background: linear-gradient(90deg, #b8324f, #e2566f 50%, #b8324f);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  transform: rotate(4deg);
}
.book-badge {
  position: absolute;
  z-index: 2;
  top: -.55em;
  right: -.5em;
  width: 2.1em;
  height: 2.1em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #4e9d34;
  color: #fff;
  border: .18em solid var(--cream);
  box-shadow: 0 .2em .5em rgba(0, 0, 0, .35);
}
.book-badge svg { width: 1.2em; height: 1.2em; }

/* ---------- Облачко с фразой героя ---------- */
.bubble {
  --tail: 50%;
  position: absolute;
  z-index: 6;
  width: max-content;
  max-width: 74%;
  padding: 9px 14px 10px;
  border-radius: 18px;
  background: #fffaf0;
  border: 2.5px solid var(--c);
  color: var(--ink);
  font: 800 14.5px/1.25 var(--f-ui);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(.88);
  transform-origin: var(--tail) 100%;
  transition: opacity .2s ease, transform .32s cubic-bezier(.3, 1.6, .5, 1);
}
.bubble::after {
  content: "";
  position: absolute;
  left: calc(var(--tail) - 8px);
  bottom: -9px;
  width: 15px; height: 15px;
  background: #fffaf0;
  border-right: 2.5px solid var(--c);
  border-bottom: 2.5px solid var(--c);
  border-bottom-right-radius: 4px;
  transform: rotate(45deg);
}
.bubble.is-on { opacity: 1; transform: none; }

/* =====================================================================
   ДОМ: сплошная лента-разрез из трёх комнат, листается по горизонтали
   ===================================================================== */
.screen-home {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--tab-h);
  background: #1c110a;
}
.house {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #031638;          /* ночное небо над лентой, если область выше ленты */
  touch-action: pan-y;          /* горизонталь ведём сами: лента едет за пальцем и мышью */
  user-select: none;
  -webkit-user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .house { cursor: grab; }
  .house.is-dragging { cursor: grabbing; }
}
/* Лента: размер, привязку к низу и сдвиг задаёт House.layout() / setX() */
.house-strip {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
/* Картинки комнат — в одном ряду встык: ширины в целых пикселях от общего масштаба */
.h-imgs { display: flex; height: 100%; }
.h-img {
  flex: none;
  display: block;
  max-width: none;
  height: 100%;
  user-select: none;
  pointer-events: none;
}
/* Живые герои: у каждого героя свой ролик на своём квадрате ленты (место задаёт House.layout()).
   Вырезан по силуэту маской <look>-mask.png (ставит House.setLook): видно только героя с вещью,
   фон квадрата — картинка комнаты. Нет маски или постера — ролик невидим, остаётся картинка. */
.h-vids { position: absolute; inset: 0; pointer-events: none; }
.h-vid {
  position: absolute;
  display: block;
  object-fit: fill;
  background: transparent;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
/* Искры камина: над роликом, под предметами. Точки поднимаются из топки, чуть сносятся вбок
   и гаснут; свет складывается с картинкой (screen). Без размытия; на скрытом «Доме» стоят. */
.h-fire { position: absolute; overflow: hidden; pointer-events: none; }
.h-fire i {
  position: absolute;
  bottom: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c0 0 35%, #ffb347 60%, rgba(255, 140, 40, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: spark-rise var(--t, 2.6s) linear var(--d, 0s) infinite;
}
@keyframes spark-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: 1; }
  55% { opacity: .85; transform: translate(calc(var(--drift) * .7), calc(var(--rise) * .6)) scale(.9); }
  100% { opacity: 0; transform: translate(var(--drift), var(--rise)) scale(.5); }
}
.h-layer { position: absolute; inset: 0; }
.h-sky, .h-items, .h-shelves { position: absolute; inset: 0; pointer-events: none; }
/* .h-sky — небо над крышей: первым в слое (ниже предметов комнат) и без своего z-index,
   чтобы наложение светом (сияние) смешивалось с картинкой ленты */
.h-item--screen { mix-blend-mode: screen; }
.h-item--float { animation: sky-float 11s ease-in-out infinite; }
.h-item--shimmer { opacity: .8; animation: sky-shimmer 13s ease-in-out infinite; }      /* .8 — и без анимации сияние не слепит */
@keyframes sky-float {      /* шар чуть плывёт и покачивается; вниз не опускается — до крыши не достаёт */
  0%, 100% { transform: translate(0, 0) rotate(-1.5deg); }
  30% { transform: translate(7%, -5%) rotate(1.5deg); }
  60% { transform: translate(-5%, -9%) rotate(-.5deg); }
  82% { transform: translate(-9%, -3%) rotate(1deg); }
}
@keyframes sky-shimmer {
  0%, 100% { opacity: .62; transform: translateX(0); }
  35% { opacity: .95; transform: translateX(-1.2%); }
  70% { opacity: .75; transform: translateX(1%); }
}
.h-items { z-index: 2; }
.h-shelves { z-index: 3; }
.h-item {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

/* Книжный шкаф: корешки книг на полках (место и размер — в % ленты, см. House.renderSpines) */
.h-shelves { pointer-events: none; }
.h-case, .h-spine {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.h-spine {
  border-radius: 1.5px 1.5px .5px .5px;
  background-color: var(--c);
  background-image:
    linear-gradient(180deg, transparent 0 11%, #f1cf86 11% 14.5%, transparent 14.5% 80%, #f1cf86 80% 83.5%, transparent 83.5%),   /* золочёные бинты */
    linear-gradient(90deg, rgba(0, 0, 0, .34), rgba(255, 255, 255, .22) 28%, rgba(255, 255, 255, .04) 55%, rgba(0, 0, 0, .3));   /* округлость корешка */
  box-shadow: 1.5px 0 2px rgba(20, 8, 0, .45), 0 1px 0 rgba(20, 8, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .18s ease;
}
.h-spine > i { /* маленькая эмблема-звёздочка */
  position: absolute;
  left: 50%; top: 46%;
  width: 46%;
  aspect-ratio: 1;
  background: #f6dca0;
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
  transform: translate(-50%, -50%);
  opacity: .9;
}
.h-spine.is-read::before { /* прочитано: ляссе выглядывает сверху */
  content: "";
  position: absolute;
  left: 58%; top: -9%;
  width: 22%; height: 16%;
  min-width: 2px;
  background: #e2566f;
  border-radius: 1px 1px 0 0;
}
@media (hover: hover) { .h-spine:hover { transform: translateY(-6%); } }
.h-spine:focus-visible { outline-offset: 1px; border-radius: 2px; }
.h-shelves.is-nudge { animation: case-nudge .17s ease; }      /* тап по шкафу: вздрогнул — и открываются «Книги» */
@keyframes case-nudge {
  0%, 100% { transform: none; }
  40% { transform: translateY(-.5%) scale(1.012); }
}

/* Падающая звезда: полоса неба закреплена на экране, звезда — короткий яркий росчерк.
   Место (--x, --y), наклон (--a) и сторона (--dir) меняются из JS на границе круга. */
.h-stars {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.h-stars[hidden] { display: none; }
.h-star {
  position: absolute;
  left: var(--x, 50%); top: var(--y, 20%);
  width: 64px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 244, 214, .9) 70%, #fff);
  filter: drop-shadow(0 0 4px rgba(255, 236, 190, .9));
  opacity: 0;
  transform-origin: 100% 50%;
  /* круг постоянный: росчерк — первые ~8 % (≈0,9 с), дальше пусто до следующего круга */
  animation: star-fall 11s linear infinite;
}
.h-star--b { animation-delay: 4.5s; }
@keyframes star-fall {
  0% { opacity: 0; transform: scaleX(var(--dir, 1)) rotate(var(--a, 25deg)) translateX(-70px) scaleX(.3); }
  1.5% { opacity: 1; }
  6% { opacity: .9; transform: scaleX(var(--dir, 1)) rotate(var(--a, 25deg)) translateX(60px) scaleX(1); }
  8.5%, 100% { opacity: 0; transform: scaleX(var(--dir, 1)) rotate(var(--a, 25deg)) translateX(110px) scaleX(.4); }
}

/* Зоны тапа героев и зелёная дверь */
.h-hot, .h-door {
  position: absolute;
  z-index: 6;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 34%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.h-lock {
  position: absolute;
  left: 31%; top: 27%;
  width: 38%;
  aspect-ratio: 1;
  display: block;
  transform-origin: 50% 12%;
  filter: drop-shadow(0 2px 3px rgba(20, 8, 0, .55));
}
.h-lock svg { display: block; width: 100%; height: 100%; }
.h-lock.is-wobble { animation: lock-wobble .9s ease; }
@keyframes lock-wobble {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(15deg); }
  35% { transform: rotate(-11deg); }
  55% { transform: rotate(7deg); }
  75% { transform: rotate(-3deg); }
}

/* Подсветка купленного: мягкий свет и искорки */
.h-spot {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 230, 160, .5), rgba(255, 214, 120, .18) 62%, rgba(255, 200, 100, 0));
  mix-blend-mode: screen;
  animation: spot-pulse 1.5s ease-in-out 2 both;
}
.h-spot i {
  position: absolute;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  background: #fff4c8;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 4px #ffd27a);
  animation: twinkle 1s ease-in-out infinite;
}
.h-spot i:nth-child(1) { left: 12%; top: 18%; }
.h-spot i:nth-child(2) { left: 86%; top: 26%; animation-delay: -.3s; }
.h-spot i:nth-child(3) { left: 22%; top: 84%; animation-delay: -.6s; }
.h-spot i:nth-child(4) { left: 80%; top: 78%; animation-delay: -.15s; }
@keyframes spot-pulse {
  0%, 100% { opacity: 0; transform: scale(.85); }
  45% { opacity: 1; transform: scale(1.06); }
}
@keyframes twinkle {
  0%, 100% { transform: scale(.4) rotate(0); opacity: .3; }
  50% { transform: scale(1.1) rotate(45deg); opacity: 1; }
}

/* Плашка под домом (отдельной строкой, героев не закрывает): стрелки, название комнаты, точки */
.h-navbar {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  justify-content: center;
  padding: 4px 0 3px;
  background: linear-gradient(180deg, #2a180d, #1c110a);
  box-shadow: 0 -1px 0 rgba(255, 220, 170, .08);
}
.h-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(30, 16, 7, .66);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 170, .14), 0 6px 16px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff3dc;
}
.h-arrow {
  flex: none;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 240, 210, .1);
  color: #ffe6b0;
  cursor: pointer;
  transition: opacity .2s ease, transform .15s ease;
}
.h-arrow:active { transform: scale(.9); }
.h-arrow svg { width: 18px; height: 18px; }
.h-arrow.is-end { opacity: .42; }
.h-nav-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 96px;
  padding: 0 6px;
}
.h-room-name { font: 800 12.5px/1 var(--f-display); letter-spacing: .02em; white-space: nowrap; }
.h-dots { display: flex; gap: 2px; }
.h-dot {
  position: relative;
  width: 18px; height: 12px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.h-dot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(255, 240, 210, .42);
  transition: transform .25s ease, background-color .25s ease;
}
.h-dot.is-on::before { background: #ffd27a; transform: scale(1.4); }
/* Облачко живёт на ленте (едет вместе с героем) и слегка подпрыгивает при появлении */
.house .bubble { z-index: 8; }
.house .bubble.is-on { animation: bubble-bounce .7s ease .18s; }
@keyframes bubble-bounce {
  0%, 100% { transform: none; }
  30% { transform: translateY(-7px) rotate(-2deg); }
  55% { transform: translateY(0) rotate(1.5deg); }
  78% { transform: translateY(-3px) rotate(0); }
}

/* =====================================================================
   ПРЕДМЕТЫ: магазин за волшебные семечки
   ===================================================================== */
.screen-items {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--tab-h);
}
.shop-tabs {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  gap: 4px;
  padding: 8px 8px 6px;
}
.shop-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px 5px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 240, 210, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 170, .16);
  color: #f3dcb0;
  font: 800 12px/1.1 var(--f-display);
  cursor: pointer;
  transition: transform .15s ease;
}
.shop-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-tab small { font: 700 10px/1 var(--f-ui); opacity: .75; }
.shop-tab:active { transform: scale(.96); }
.shop-tab.is-on {
  background: linear-gradient(180deg, #f6d58c, #d9a54f);
  box-shadow: 0 3px 0 #9b6a28, 0 6px 14px rgba(0, 0, 0, .3);
  color: #4a2c10;
}
.shop-pager {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}
.shop-pager.is-static { touch-action: pan-y; }
.shop-pager::-webkit-scrollbar { display: none; }
.shop-pager.is-dragging { scroll-snap-type: none; }
.shop-page {
  flex: 0 0 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr));
  gap: 8px;
  padding: 4px 10px 6px;
  scroll-snap-align: start;
}
.shop-note { /* пометка в сетке раздела — на всю ширину */
  grid-column: 1 / -1;
  align-self: start;
  margin: 2px 4px 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(20, 11, 5, .6);
  box-shadow: inset 0 0 0 1px rgba(246, 213, 140, .35);
  color: #f6d58c;
  font: 700 12.5px/1.35 var(--f-ui);
  text-align: center;
}
.dlg-note--warn { margin-bottom: 6px; padding: 7px 10px; border-radius: 10px; background: rgba(224, 160, 60, .16); color: #7a5230; }
.shop-dots { flex: none; display: flex; justify-content: center; gap: 4px; min-height: 6px; }
.shop-dot { width: 16px; height: 12px; padding: 0; border: 0; background: none; position: relative; cursor: pointer; }
.shop-dot::before {
  content: "";
  position: absolute;
  left: 5px; top: 3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 240, 210, .4);
}
.shop-dot.is-on::before { background: #ffd27a; }

.card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 5px 5px 6px;
  border: 0;
  border-radius: 14px;
  background-color: var(--cream);
  background-image: var(--paper-texture);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(150, 100, 40, .18);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.card:active { transform: scale(.97); }
.card-pic {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 36px;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 38%, #fff4da 0%, #f3dcab 58%, #e3c085 100%);
}
.card-pic img {
  position: absolute;
  left: 5%; top: 5%;
  width: 90%; height: 90%;
  object-fit: contain;
}
.card--wear .card-pic { background: radial-gradient(120% 90% at 50% 38%, #fffaf0 0%, #f4e4c4 60%, #e8cd98 100%); }
.card.is-lack .card-pic img { opacity: .78; }
.card-price {
  position: absolute;
  top: 8px; right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px 6px 2px 3px;
  border-radius: 999px;
  background: rgba(58, 34, 18, .84);
  color: #ffe6b0;
  font: 900 12.5px/1 var(--f-display);
}
.seed-ic { width: 13px; height: 16px; object-fit: contain; }
.card-name {
  flex: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
  font: 800 11.5px/1.15 var(--f-display);
  color: #3a2210;
}
.card-act {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 26px;
  padding: 0 4px;
  border-radius: 9px;
  font: 800 11.5px/1 var(--f-ui);
  white-space: nowrap;
}
.card-act .seed-ic { width: 11px; height: 14px; }
.card-act--buy { background: linear-gradient(180deg, #ef8f3f, #d8641e); color: #fff; box-shadow: 0 2px 0 #a8480f; }
.card-act--lack { background: rgba(120, 80, 40, .12); color: #8a6236; }
.card-act--own { background: rgba(78, 157, 52, .16); color: #3b7a25; }
.card-act--wear { background: linear-gradient(180deg, #5b86cf, #4470b8); color: #fff; box-shadow: 0 2px 0 #2f528c; }
.card-act--worn { background: rgba(68, 112, 184, .15); color: #33589a; }
.card-act--worn img { width: 18px; height: 18px; border-radius: 50%; background: #fff; object-fit: contain; }

/* =====================================================================
   ОКОШКО: покупка и выбор героя для одежды
   ===================================================================== */
.dlg {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 14px calc(var(--tab-h) * .5);
}
.dlg[hidden] { display: none; }
.dlg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 8, 3, .66);
  opacity: 0;
  transition: opacity .3s ease;
}
.dlg.is-open .dlg-backdrop { opacity: 1; }
.dlg-panel {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  overflow: hidden;
  padding: 16px 16px 14px;
  border-radius: 20px;
  background-color: var(--cream);
  background-image: var(--paper-texture);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: transform .32s cubic-bezier(.3, 1.4, .5, 1), opacity .2s ease;
}
.dlg.is-open .dlg-panel { opacity: 1; transform: none; }
.dlg-close { position: absolute; top: 6px; right: 6px; z-index: 2; }
.dlg-pic {
  position: relative;
  display: block;
  width: 124px; height: 100px;
  margin: 0 auto 10px;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 38%, #fff4da 0%, #f3dcab 58%, #e3c085 100%);
  box-shadow: inset 0 0 0 1px rgba(150, 100, 40, .2);
}
.dlg-pic img { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; object-fit: contain; }
.dlg-title {
  margin: 0 26px 4px;
  text-align: center;
  font: 900 19px/1.15 var(--f-display);
  color: #3a2210;
}
.dlg-note {
  margin: 0 0 12px;
  text-align: center;
  font: 700 13px/1.35 var(--f-ui);
  color: #8a6236;
}
.dlg-btns { display: flex; flex-direction: column; gap: 8px; }
.dlg-btns .btn { flex-direction: row; gap: 6px; min-height: 46px; }
.dlg-btns .btn .seed-ic { width: 18px; height: 22px; }
.dlg-btns--row { flex-direction: row; }
.dlg-btns--row .btn { flex: 1 1 0; padding-left: 10px; padding-right: 10px; }
.dlg-row { display: flex; align-items: center; gap: 12px; margin-right: 32px; }
.dlg-row .dlg-pic { flex: none; width: 76px; height: 64px; margin: 0; }
.dlg-title--left { margin: 0 0 3px; text-align: left; font-size: 18px; }
.dlg-note--left { margin: 0; text-align: left; font-size: 12.5px; }
.dlg-heroes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  margin: 10px 0;
}
.dlg-hero {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dlg-hero-ava {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff7e6;
  box-shadow: inset 0 0 0 2.5px var(--c), 0 3px 8px rgba(80, 45, 10, .2);
  transition: transform .15s ease;
}
.dlg-hero:active .dlg-hero-ava { transform: scale(.92); }
.dlg-hero-ava img { width: 82%; height: 82%; object-fit: contain; }
.dlg-hero.is-on .dlg-hero-ava { background: var(--c); box-shadow: 0 0 0 3px #fffaf0, 0 0 0 5.5px var(--c); }
.dlg-hero-name { font: 800 11px/1.1 var(--f-ui); color: #5a3d22; }
.dlg-hero-st { font: 700 10px/1.1 var(--f-ui); color: #9a7448; }
.dlg-hero.is-own .dlg-hero-st { color: #4470b8; }
.dlg-hero.is-on .dlg-hero-st { color: #3b7a25; }
.dlg-hero { position: relative; }
/* Галочка: вещь надета на этого героя */
.dlg-hero-check {
  position: absolute;
  right: -1px; bottom: -1px;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #3b7a25;
  box-shadow: 0 0 0 2px #fffaf0;
  font: 900 12px/1 var(--f-ui);
  color: #fff;
}
.dlg-hero-ava { overflow: visible; }
.dlg-hero-ava img { border-radius: 50%; }
/* «Взять у:» — у кого из героев вещь уже есть */
.dlg-sub { margin: 0 0 2px; text-align: center; font: 800 12px/1.2 var(--f-ui); color: #5a3d22; }
.dlg-heroes--from { margin: 4px 0 12px; }
.dlg-for { /* окошко покупки одежды: кому покупаем */
  flex: none;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff7e6;
  box-shadow: inset 0 0 0 2.5px #d6ae62;
}
.dlg-for img { width: 82%; height: 82%; object-fit: contain; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* =====================================================================
   КНИГА РАСКРЫВАЕТСЯ: летит из сетки «Книг» и открывается на первой странице
   ===================================================================== */
.bookfx { position: absolute; inset: 0; z-index: 38; }      /* над меню */
.bookfx[hidden] { display: none; }
.bookfx-dim {
  position: absolute;
  inset: 0;
  background: rgba(15, 8, 3, .8);
  opacity: var(--dim, 0);
}
.bookfx-fly {
  position: absolute;
  left: 0; top: 0;
  width: var(--cw, 280px);
  height: var(--ch, 380px);
  perspective: 1400px;
  perspective-origin: 30% 50%;
  will-change: transform;
}
.bookfx-box { position: absolute; inset: 0; transform-style: preserve-3d; }
/* Первая страница: бумага, как в читалке. Размеры в em от ширины книги (--fs). */
.bookfx-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5em 1.2em 1.1em 1.5em;
  overflow: hidden;
  border-radius: 3px 10px 10px 3px;
  background-color: var(--cream);
  background-image:
    linear-gradient(90deg, rgba(110, 70, 25, .3) 0, rgba(110, 70, 25, .09) 5%, rgba(110, 70, 25, 0) 13%),
    var(--paper-texture);
  box-shadow: 1px 1px 0 #d8c39a, 2px 2px 0 #f4e7c9, 3px 3px 0 #d5bf94, 4px 4px 0 var(--c, #b0743f), 0 18px 40px rgba(0, 0, 0, .55);
  color: var(--ink);
  font-size: var(--fs, 15px);
  text-align: center;
  pointer-events: none;                    /* пока книга летит и открывается, кнопки нажать нельзя */
}
.bookfx.is-settled .bookfx-page { pointer-events: auto; }
.bp-orn { flex: none; width: 7em; height: .95em; color: #c79a55; }
.bp-kicker { margin: .7em 0 .2em; font: 800 .74em/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--c, #b0743f); }
.bp-title { margin: 0 0 .5em; font: 800 1.75em/1.04 var(--f-display); color: #3a2210; }
.bp-ask, .bp-one { margin: auto 0 .6em; font: italic 400 1.02em/1.25 var(--f-serif); color: #4a321c; }
.bp-one { margin-bottom: .2em; font-style: normal; font-weight: 700; font-size: 1.15em; }
.bp-time { margin: 0 0 .9em; font: 700 .8em/1.2 var(--f-ui); color: #9a7448; }
.bp-ages { width: 100%; display: flex; flex-direction: column; gap: .5em; }
.bp-age {
  display: flex;
  align-items: center;
  gap: .6em;
  width: 100%;
  min-height: 3.1em;
  margin: 0;
  padding: .25em .9em .25em .45em;
  border: 0;
  border-radius: .5em 1.4em 1.4em .5em;      /* закладка */
  background-color: var(--rb);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .16), rgba(255, 255, 255, .12) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .14));
  box-shadow: 0 .18em 0 rgba(0, 0, 0, .22);
  color: #fff;
  font-size: 1em;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.bp-age:active { transform: scale(.97); }
.bp-age--green { --rb: #4e9d34; }
.bp-age--blue { --rb: #4470b8; }
.bp-age--rose { --rb: #d6486a; }
.bp-age img { flex: none; width: 2.3em; height: 2.3em; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.bp-age span { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.bp-age b { font: 900 1.12em/1.05 var(--f-display); }
.bp-age small { font: 700 .72em/1.1 var(--f-ui); opacity: .92; white-space: nowrap; }
.bp-age--go { position: relative; justify-content: center; padding: .25em 1em; border-radius: 1.4em; overflow: hidden; }
.bp-age--go span { position: relative; }
/* автозапуск чтения: полоска на кнопке заполняется за 1,1 с (AUTO_READ_MS) */
.bp-age--go.is-auto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .28);
  transform-origin: 0 50%;
  animation: bp-auto 1.1s linear both;
}
@keyframes bp-auto { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* начатая глава: первой — закладка «Продолжить», остальные компактнее */
.bp-age--cont { margin: auto 0 0; box-shadow: 0 .18em 0 rgba(0, 0, 0, .22), 0 0 0 .16em #f6d58c; }
.bookfx-page--cont { padding-top: 1.1em; }
.bookfx-page--cont .bp-title { font-size: 1.5em; margin-bottom: .3em; }
.bookfx-page--cont .bp-kicker { margin-top: .4em; }
.bookfx-page--cont .bp-ask { margin: .8em 0 .45em; font-size: .9em; }
.bookfx-page--cont .bp-ages { gap: .38em; }
.bookfx-page--cont .bp-ages .bp-age { min-height: 2.6em; }
.bookfx-page--cont .bp-ages .bp-age img { width: 1.9em; height: 1.9em; }
.bp-age--go span { font: 900 1.15em/1 var(--f-display); }
.bp-hint { margin: .7em 0 0; font: italic 400 .72em/1.25 var(--f-serif); color: #9a7448; }
.bookfx-page > :last-child { margin-bottom: auto; }      /* блок выбора — по центру свободного места */
/* Обложка на петле у корешка: откидывается влево */
.bookfx-cover {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}
.bookfx-front, .bookfx-inside {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 4px 10px 10px 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bookfx-front {
  overflow: hidden;
  background-color: var(--c, #b0743f);
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, .34) 0, rgba(255, 255, 255, .12) 7%, rgba(0, 0, 0, 0) 12%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .22));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.bookfx-inside { /* форзац — внутренняя сторона обложки */
  transform: rotateY(180deg);
  background-color: #efe0bf;
  background-image: repeating-linear-gradient(45deg, rgba(160, 110, 50, .1) 0 6px, rgba(160, 110, 50, 0) 6px 12px);
  box-shadow: inset 0 0 0 5px var(--c, #b0743f);
}
.bookfx-frame {
  position: absolute;
  left: 13%; right: 7%; top: 5%; bottom: 23%;
  padding: 3px;
  border-radius: 6px;
  background: linear-gradient(135deg, #fae9c2, #d6ae62 55%, #f5dfae);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}
.bookfx-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; border-radius: 4px; }
.bookfx-cap {
  position: absolute;
  left: 13%; right: 6%; bottom: 4%;
  height: 17%;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff6e2;
  font: 800 calc(var(--cw, 280px) * .092)/1.05 var(--f-display);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.bookfx .bookfx-backbtn {
  position: absolute;
  left: 50%;
  top: var(--back-top, 80%);
  width: 180px;
  min-height: 40px;
  margin-left: -90px;
  padding: 6px 16px;
  color: #f3dcb0;
  box-shadow: inset 0 0 0 2px rgba(243, 220, 176, .45);
  opacity: var(--back-o, 0);
  pointer-events: none;
}
.bookfx.is-settled .bookfx-backbtn { pointer-events: auto; }
/* Выбран возраст: страница наезжает на зрителя — дальше читалка, та же книга */
.bookfx.is-entering .bookfx-box { transform: scale(1.9); opacity: 0; transition: transform .34s cubic-bezier(.5, 0, .8, .4), opacity .3s ease .06s; }
.bookfx.is-entering .bookfx-backbtn { opacity: 0; }

/* =====================================================================
   КНИГИ: библиотека
   ===================================================================== */
.screen-books {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--tab-h);
}
/* Полки: вертикальная прокрутка, внутри — ленты обложек с горизонтальной прокруткой */
.lib-scroll {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  padding: 2px 0 10px;
}
.lib-scroll::-webkit-scrollbar { display: none; }
.lib-sec { margin: 0 0 4px; }
.lib-head { /* заголовок полки: как прежняя подпись месяца — золотом, с линией до кнопки «Все» */
  position: relative;
  z-index: 2;
  margin: 10px 14px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f6d58c;
  font: 800 12px/1.2 var(--f-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lib-head::after { content: ""; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(246, 213, 140, .5), rgba(246, 213, 140, 0)); }
.lib-all {
  order: 2;
  flex: none;
  margin: -6px -4px -6px 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 11, 5, .45);
  box-shadow: inset 0 0 0 1px rgba(246, 213, 140, .35);
  color: #f6d58c;
  font: 800 11px/1 var(--f-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.lib-row { /* лента обложек: сверху место под ляссе и значок «прочитано», снизу — под тень */
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 18px 14px 6px;
  scroll-padding-left: 14px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}
.lib-row::-webkit-scrollbar { display: none; }
.lib-row.is-dragging { scroll-snap-type: none; }
.lib-row.is-lazy { min-height: calc(var(--bw) * 1.4 + 52px); }      /* пока лента не построена — держит своё место */
.lib-row .lib-cell { flex: none; width: calc(var(--bw) + 18px); scroll-snap-align: start; }
.lib-cell {
  min-width: 0; min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.lib-row .lib-cap, .lib-grid .lib-cap { max-width: 100%; flex-wrap: wrap; justify-content: center; text-align: center; }
.lib-empty { margin: 40px 24px; text-align: center; color: #fff3dc; font: 700 14px/1.4 var(--f-ui); }
.lib-empty p { margin: 0 0 16px; }
/* Мир целиком: сетка обложек */
.lib-world-head { display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; }
.lib-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px 7px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 11, 5, .55);
  box-shadow: inset 0 0 0 1px rgba(246, 213, 140, .35);
  color: #f6d58c;
  font: 800 12px/1 var(--f-ui);
  cursor: pointer;
}
.lib-back svg { width: 16px; height: 16px; }
.lib-world-title { margin: 0; color: #fff3dc; font: 800 18px/1.2 var(--f-display); }
.lib-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  row-gap: 14px;
  padding: 20px 10px 8px;
}
.lib-cap { margin: 0; display: flex; gap: 8px; align-items: baseline; color: #fff3dc; font: 800 12.5px/1.2 var(--f-display); }
.lib-cap span { font: 700 11px/1.2 var(--f-ui); color: #a9d98f; }
.book--lib .b-heroes { -webkit-line-clamp: 2; }
.book.is-out { visibility: hidden; }      /* книга в руках — её место в сетке пустое */

/* =====================================================================
   ЧИТАЛКА
   ===================================================================== */
.screen-reader {
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-t);
  padding-bottom: var(--tab-h);
}
.reader-bar {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px 2px 4px;
  color: #fff3dc;
}
.reader-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}
.reader-titles h2 {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 800 16px/1.2 var(--f-display);
}
.reader-titles span {
  flex: 0 10 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 700 11px/1.2 var(--f-ui);
  color: #e9c98f;
}
.reader-count {
  flex: none;
  font: 800 12px/1 var(--f-ui);
  color: #f3dcb0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.reader-progress {
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 240, 210, .12);
}
.reader-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f2c26b, var(--ep, #e07a2a));
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform .5s ease;
}
.icon-btn {
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 240, 210, .12);
  color: #fff3dc;
  cursor: pointer;
  transition: transform .15s ease;
}
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn--paper { background: rgba(120, 80, 40, .1); color: #6b4524; }
.icon-btn--sm { /* маленький видимый кружок, но область нажатия 40×40 */
  width: 40px; height: 40px;
  background: none;
}
.icon-btn--sm::before {
  content: "";
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 240, 210, .13);
}
.icon-btn--sm svg { position: relative; width: 14px; height: 14px; }

.reader-stage {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.book-open {
  position: relative;
  width: calc(var(--pw, 300px) + 5px);
  height: calc(var(--ph, 480px) + 4px);
}
.book-board { /* твёрдая обложка под страницами — тонкий кант */
  position: absolute;
  left: -4px; top: -3px; right: -3px; bottom: -4px;
  border-radius: 6px 11px 11px 6px;
  background-color: var(--ep, #b0743f);
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .18) 7px, rgba(255, 255, 255, .12) 8px, rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, .28)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, rgba(0, 0, 0, .03) 2px 4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 5px 12px rgba(0, 0, 0, .4);
}
.book-stack { /* толщина стопки страниц справа и снизу */
  position: absolute;
  left: 1px; top: 0;
  width: var(--pw, 300px);
  height: var(--ph, 480px);
  border-radius: 3px 10px 10px 3px;
  background: #efe0bf;
  box-shadow:
    1px 1px 0 #d8c39a, 2px 1.5px 0 #f4e7c9, 3px 2.5px 0 #d5bf94, 4px 3px 0 #f1e2c2,
    5px 4px 1px #b99e70;
}
.flip-host {
  touch-action: pan-y;
  -webkit-user-select: none;          /* свайп и долгий тап по странице не выделяют текст */
  user-select: none;
  -webkit-touch-callout: none;
  position: absolute;
  left: 0; top: 0;
  width: var(--pw, 300px);
  height: var(--ph, 480px);
}
.flip-root { position: relative; }

/* Страница — лист бумаги */
.paper {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 11px 0 15px;
  overflow: hidden;
  border-radius: 3px 10px 10px 3px;
  background-color: var(--cream);
  background-image:
    linear-gradient(90deg, rgba(110, 70, 25, .28) 0, rgba(110, 70, 25, .09) 12px, rgba(110, 70, 25, 0) 34px),
    linear-gradient(270deg, rgba(120, 80, 30, .1), rgba(120, 80, 30, 0) 14px),
    var(--paper-texture);
  color: var(--ink);
  font-family: var(--f-serif);
}
.pg-art {
  position: relative;
  flex: none;
  width: var(--art-w, 100%);
  height: var(--art-h, 200px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: #e9dcc0;
  box-shadow: 0 0 0 1px rgba(90, 60, 20, .12), 0 3px 10px rgba(80, 50, 20, .2);
}
.pg-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pg-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px rgba(251, 241, 220, .5), inset 0 0 18px rgba(60, 30, 5, .2);
  pointer-events: none;
}
.pg-art--cover {
  width: auto;
  height: calc(var(--title-art-h, 260px) * var(--ka, 1));
  display: flex;
  justify-content: center;
  overflow: visible;
  background: none;
  box-shadow: none;
}
.pg-art--cover::after { display: none; }
.cover-frame {
  display: block;
  width: calc(var(--title-art-w, 195px) * var(--ka, 1));
  height: 100%;
  padding: 6px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8e2b0, #cf9f55 55%, #f3d9a2);
  box-shadow: 0 8px 20px rgba(80, 45, 10, .3);
}
.cover-frame img { border-radius: 8px; }
.pg-art--end, .pg-art--small { height: calc(var(--title-art-h, 260px) * .62 * var(--ka, 1)); }
.pg-art--end .cover-frame, .pg-art--small .cover-frame { width: calc(var(--title-art-w, 195px) * .62 * var(--ka, 1)); padding: 5px; }

/* Ступени ужатия служебных страниц, если на экране не хватает места (см. Reader.paginate) */
.pg.fit-1 { --k: .94; --ka: .86; }
.pg.fit-2 { --k: .88; --ka: .74; }
.pg.fit-3 { --k: .82; --ka: .62; }
.pg.fit-4 { --k: .76; --ka: .5; }
.pg[class*="fit-"] .pg-art:not(.pg-art--cover) {
  width: calc(var(--art-w, 100%) * var(--ka, 1));
  height: calc(var(--art-h, 200px) * var(--ka, 1));
}
.pg[class*="fit-"] .btn { min-height: 40px; padding: 6px 16px; }
.pg[class*="fit-"] .pg-note { padding: 7px 10px 8px; }

/* Невидимая страница для замера нарезки */
.pg-measure {
  position: absolute;
  left: 0; top: 0;
  width: var(--pw, 300px);
  height: var(--ph, 480px);
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.pg-measure > .pg { position: absolute; inset: 0; }

.pg-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 9px;
}
.pg-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
  padding: 0 1px 14px;
  /* затухание снизу: намёк, что текст можно прокрутить */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 16px), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 16px), rgba(0, 0, 0, 0) 100%);
  font-size: calc(var(--fs, 17px) * var(--k, 1));
  line-height: 1.45;
}
.pg-scroll::-webkit-scrollbar { display: none; }
.pg-flow { display: flow-root; }   /* держит поля и буквицу внутри — по нему меряем высоту */
.pg-scroll p { margin: 0 0 .4em; }
/* Текст сказки — по ширине, как в книге, с русскими переносами; последняя строка — влево */
.pg--text .pg-scroll p {
  text-align: justify;
  text-align-last: left;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  word-spacing: -.02em;      /* чуть плотнее базовый пробел — меньше «дыр» при выравнивании */
}
/* Нет нативных переносов — выравнивание по ширине остаётся, но без самодельных переносов */
.no-hyph .pg--text .pg-scroll p { word-spacing: -.03em; }
/* Малыши (3–4 года): крупный текст, как в книжках для самых маленьких, — в 1,65 раза больше, строки
   свободнее, без выключки по ширине (в узкой колонке крупного кегля она даёт дыры между словами).
   Признак ставит читалка; мерилка нарезки лежит внутри читалки и меряет с тем же кеглем. */
[data-reading-age="3-4"] .pg--text .pg-scroll { font-size: calc(var(--fs, 17px) * 1.65); line-height: 1.5; }
[data-reading-age="3-4"] .pg--text .pg-scroll p { text-align: left; word-spacing: normal; }
.pg-scroll p.cont { margin-top: 0; }
.dropcap::first-letter {
  float: left;
  margin: .04em -.04em 0 -.03em;
  font: 800 3.1em/.84 var(--f-display);
  color: var(--ep, #b0743f);
}
.pg-folio {
  flex: none;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10px/1 var(--f-ui);
  letter-spacing: .1em;
  color: #b08a5a;
}
.pg-folio span::before,
.pg-folio span::after {
  content: "";
  display: inline-block;
  width: 14px; height: 1px;
  margin: 0 8px;
  vertical-align: middle;
  background: currentColor;
  opacity: .5;
}

.pg--title .pg-scroll, .pg--end .pg-scroll { text-align: center; }
.pg-kicker {
  margin: 2px 0 4px;
  font: 800 11.5px/1.25 var(--f-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ep, #b0743f);
}
.pg-title {
  margin: 0 0 10px;
  font: 800 calc(30px * var(--k, 1))/1.02 var(--f-display);
  color: #3a2210;
}
.pg-note {
  margin: 4px auto 0;
  padding: 10px 12px 11px;
  border-radius: 12px;
  border: 1px dashed rgba(150, 100, 40, .38);
  background: rgba(160, 110, 50, .08);
  text-align: left;
  font-style: italic;
  font-size: calc(var(--fs, 17px) * .88);
  line-height: 1.45;
  color: #5a3d22;
}
.pg-note p { margin: 0; }
.pg-note-label {
  display: block;
  margin-bottom: 5px;
  font: 800 10.5px/1 var(--f-ui);
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a4743a;
}
.pg-head {
  margin: 2px 0 4px;
  font: 800 calc(23px * var(--k, 1))/1.1 var(--f-display);
  color: #3a2210;
}
.pg-head--try svg {
  width: 22px; height: 22px;
  margin-right: 7px;
  vertical-align: -3px;
  color: #d6486a;
}
.pg-hint {
  margin: 0 0 12px;
  font: 700 13px/1.35 var(--f-ui);
  color: #9a7448;
}
.pg-questions { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.pg-questions li {
  position: relative;
  counter-increment: q;
  margin: 0 0 12px;
  padding-left: 40px;
}
.pg-questions li::before {
  content: counter(q);
  position: absolute;
  left: 0; top: .1em;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ep, #b0743f);
  color: #fff;
  text-align: center;
  font: 800 15px/28px var(--f-ui);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}
.pg-try {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  border-left: 4px solid #e07a2a;
  background: rgba(224, 122, 42, .08);
}
.pg-end { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pg-end-orn { width: 120px; height: 16px; color: #c79a55; }
.pg-title--end { margin: 0; font-size: calc(28px * var(--k, 1)); }
.pg-end .pg-hint { margin: 0 0 6px; }
.pg-end .btn { width: 100%; max-width: 290px; }
.pg-soon { margin: 0 0 4px; font-style: italic; color: var(--ink-soft); }
/* «Конец главы»: волшебное семечко за главу */
.pg-seed {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 290px;
  padding: 7px 10px;
  border-radius: 14px;
  border: 1px dashed rgba(180, 120, 40, .45);
  background: rgba(224, 160, 60, .12);
  text-align: left;
}
.pg-seed-ic {
  flex: none;
  width: 30px; height: 37px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 205, 100, .7));
}
.pg-seed-txt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pg-seed-txt b { font: 800 13.5px/1.2 var(--f-display); color: #3a2210; }
.pg-seed-btn {
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #c4561a;
  font: 800 12.5px/1.2 var(--f-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.pg[class*="fit-"] .pg-seed { padding: 5px 8px; }

/* Кнопки */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 10px 22px;
  border: 0;
  border-radius: 16px;
  font: 800 16px/1.15 var(--f-ui);
  cursor: pointer;
  transition: transform .15s ease;
}
.btn:active { transform: scale(.97); }
.pg button * { pointer-events: none; } /* StPageFlip не должен принимать клик по тексту кнопки за перелистывание */
.btn small { font: 700 12px/1.2 var(--f-ui); opacity: .9; }
.btn--primary {
  background: linear-gradient(180deg, #ef8f3f, #d8641e);
  color: #fff;
  box-shadow: 0 4px 0 #a8480f, 0 8px 18px rgba(170, 70, 10, .32);
}
.btn--ghost {
  background: transparent;
  color: #7a5230;
  box-shadow: inset 0 0 0 2px rgba(122, 82, 48, .35);
}
.btn[disabled] {
  opacity: .5;
  cursor: default;
  box-shadow: 0 4px 0 #9c7a5a;
  background: linear-gradient(180deg, #c9a888, #b08d6c);
}
.btn[disabled]:active { transform: none; }

/* Переворот страницы: лист вертится вокруг корешка (левый край), обратная сторона не видна.
   Тень — на вертящемся листе и на том, что под ним (прозрачность меняет Reader / PageTurn).
   backface-visibility — только у вертящегося листа: на WebKit это свойство само делает элемент
   отдельным слоем, а слой на каждую страницу главы — лишняя память на экранах с DPR 3. */
.flip-root.ff { perspective: 1600px; perspective-origin: 0 50%; touch-action: pan-y; }
.ff-page {
  position: absolute;
  inset: 0;
  visibility: hidden;
  transform-origin: 0 50%;
}
.ff-page.is-under { visibility: visible; z-index: 1; }
.ff-page.is-current { visibility: visible; z-index: 2; }
.ff-page.is-turning { visibility: visible; z-index: 3; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Край возвращающегося листа у корешка — отклик на свайп назад (ширину и прозрачность ведёт PageTurn) */
.ff-edge {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 22px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 50%;
  border-radius: 2px 8px 8px 2px;
  background: linear-gradient(90deg, rgba(110, 70, 25, .22), var(--cream) 45%);
  box-shadow: 3px 0 8px rgba(40, 20, 0, .28);
}
.ff-shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: 3px 12px 12px 3px;
  background: linear-gradient(90deg, rgba(40, 20, 0, .1), rgba(40, 20, 0, .55));
}
.ff-page.is-under > .ff-shade { opacity: .45; background: linear-gradient(90deg, rgba(40, 20, 0, .45), rgba(40, 20, 0, .08) 60%, rgba(40, 20, 0, 0)); }

/* =====================================================================
   РОДИТЕЛЯМ
   ===================================================================== */
.parents-scroll {
  position: absolute;
  left: 0; right: 0; top: 0;
  bottom: var(--tab-h);
  z-index: 1;
  /* Всё рассчитано без прокрутки (375×667 и выше); прокрутка — страховка для совсем низких окон
     (Safari с панелями). Письмо центрируется полями auto: при переполнении верх не обрезается */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-t) + 16px) 12px 10px;
}
.parents-scroll > .letter { margin: auto 0; flex: none; }
.letter {
  position: relative;
  padding: 18px 18px 16px 20px;
  border-radius: 6px 16px 16px 6px;
  background-color: var(--cream);
  background-image:
    linear-gradient(90deg, rgba(110, 70, 25, .2) 0, rgba(110, 70, 25, 0) 22px),
    var(--paper-texture);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  color: var(--ink);
}
.letter-pal {
  position: absolute;
  right: 6px; top: -16px;
  width: 70px;
  transform: rotate(6deg);
  filter: drop-shadow(0 6px 8px rgba(60, 30, 5, .3));
}
.letter-kicker {
  margin: 0;
  font: 800 10.5px/1.2 var(--f-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a4743a;
}
.letter-title {
  margin: 4px 74px 6px 0;
  font: 900 23px/1.05 var(--f-display);
  color: #3a2210;
}
.letter-lead {
  margin: 0 0 10px;
  font: italic 400 15px/1.4 var(--f-serif);
  color: #4a321c;
}
.acc-item {
  position: relative;
  border-top: 1px solid rgba(150, 100, 40, .2);
}
.acc-item:last-child { border-bottom: 1px solid rgba(150, 100, 40, .2); }
.acc-item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 28px 0 16px;
  list-style: none;
  cursor: pointer;
  font: 800 15.5px/1.2 var(--f-display);
  color: #3a2210;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::before { /* цветная метка раздела */
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--c);
}
.acc-item summary::after { /* стрелка */
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -6px;
  border-right: 2px solid #a4743a;
  border-bottom: 2px solid #a4743a;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.acc-item[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.acc-item p {
  margin: -2px 0 10px 16px;
  font: 400 14.5px/1.45 var(--f-serif);
  color: #3a2716;
}
.kids { display: flex; gap: 6px; margin: 0 0 8px 16px; }
.kid { flex: 1 1 0; min-width: 0; position: relative; cursor: pointer; }
.kid input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.kid span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 40px;
  padding: 0 4px;
  border-radius: 12px;
  background: rgba(160, 110, 50, .1);
  box-shadow: inset 0 0 0 1.5px rgba(150, 100, 40, .35);
  color: #5a3d22;
  font: 800 13px/1.1 var(--f-display);
  white-space: nowrap;
}
.kid span::before { /* галочка */
  content: "";
  flex: none;
  width: 14px; height: 14px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px rgba(120, 80, 40, .5);
  background: #fffaf0;
}
.kid input:checked + span { background: #4e9d34; box-shadow: 0 2px 0 #35761f; color: #fff; }
.kid input:checked + span::before {
  box-shadow: none;
  background: #fffaf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%2335761f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/82% no-repeat;
}
.kid input:focus-visible + span { outline: 3px solid #ffd27a; outline-offset: 2px; }
.letter-sign {
  margin: 12px 0 0;
  text-align: right;
  font: 800 18px/1.1 var(--f-display);
  color: #3a2210;
}
.letter-sign span {
  display: block;
  margin-top: 2px;
  font: 700 12px/1.2 var(--f-ui);
  color: #9a7448;
}
/* Подвал письма: слева ссылка на сайт бренда, справа подпись */
.letter-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.letter-foot .letter-sign { margin: 0; }
.letter-brand {
  padding: 6px 0 1px;
  font: 800 12.5px/1.2 var(--f-ui);
  color: #a4743a;
  text-decoration: underline;
  text-decoration-color: rgba(164, 116, 58, .45);
  text-underline-offset: 3px;
}
.acc-item .acc-btn { min-height: 40px; margin: 0 0 10px 16px; padding: 8px 18px; font-size: 14px; }
.acc-item[hidden] { display: none; }

/* Чипы с именами героев (титульная страница главы) */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 5px; }
.chips--center { justify-content: center; margin-bottom: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font: 800 11.5px/1.2 var(--f-ui);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.chip img {
  width: 20px; height: 20px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 250, 235, .9);
}
.chip--sm { padding: 3px 9px; font-size: 11.5px; }

/* =====================================================================
   МЕНЮ — пять кнопок: иллюстрированная иконка и подпись
   ===================================================================== */
.tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  height: var(--tab-h);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding: 0 4px var(--safe-b);
  background: linear-gradient(180deg, #2a180d, #1a0f08);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .12), 0 -6px 16px rgba(0, 0, 0, .35);
}
.tab {
  position: relative;
  flex: 1 1 0;
  min-width: 56px;
  max-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  margin: 0;
  padding: 3px 0 4px;
  border: 0;
  background: none;
  color: #cdb48c;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab-ic {
  position: relative;
  display: block;
  width: 34px; height: 34px;
  opacity: .78;
  filter: saturate(.85);
  transition: transform .28s cubic-bezier(.3, 1.5, .5, 1), opacity .2s ease, filter .2s ease;
}
.tab-ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tab-ic img[hidden] { display: none; }
.tab-ic svg { display: none; width: 24px; height: 24px; margin: 5px; }      /* запасной значок */
.tab-ic img[hidden] + svg { display: block; }
.tab-label { font: 800 10px/1.1 var(--f-ui); letter-spacing: .01em; white-space: nowrap; transition: color .2s ease; }
.tab:active .tab-ic { transform: scale(.94); }
.tab.is-active .tab-ic {
  opacity: 1;
  transform: translateY(-2px) scale(1.16);
  filter: saturate(1) drop-shadow(0 0 7px rgba(255, 196, 96, .7));
}
.tab.is-active .tab-label { color: #ffd98a; }
.tab.is-disabled .tab-ic { opacity: .42; filter: saturate(.4); }
.tab.is-disabled .tab-label { opacity: .6; }
.tab:focus-visible { outline-offset: -3px; border-radius: 12px; }

/* Альбомная ориентация на телефоне: в читалке — мягкая подсказка */
.rotate-hint {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--safe-t) + 58px);
  bottom: var(--tab-h);
  z-index: 4;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 32px;
  text-align: center;
  color: #fff3dc;
}
.rotate-hint svg { width: 56px; height: 56px; color: #f2c26b; }
.rotate-hint p { margin: 0; max-width: 22em; font: 800 17px/1.35 var(--f-ui); }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .rotate-hint { display: flex; }
  .screen-reader .reader-stage { visibility: hidden; pointer-events: none; }
}

/* Подсказка */
.toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tab-h) + 14px);
  z-index: 50;
  width: max-content;
  max-width: 86%;
  padding: 11px 16px;
  border-radius: 14px;
  background: #3a2212;
  color: #fff3dc;
  text-align: center;
  font: 700 14px/1.35 var(--f-ui);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 220, 170, .15);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   УСТАНОВКА: «Добавьте сказки на телефон» и плашка-напоминание
   ===================================================================== */
.inst {
  position: absolute;
  inset: 0;
  z-index: 46;
  display: flex;
  align-items: center;
  justify-content: center;
  /* сверху — место для выглядывающего Яблочка, снизу — для стрелки на панель Safari */
  padding: calc(var(--safe-t) + 58px) 14px calc(var(--safe-b) + 62px);
}
.inst[hidden] { display: none; }
.inst-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 8, 3, .7);
  opacity: 0;
  transition: opacity .3s ease;
}
.inst.is-open .inst-backdrop { opacity: 1; }
.inst-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: transform .32s cubic-bezier(.3, 1.4, .5, 1), opacity .2s ease;
}
.inst.is-open .inst-wrap { opacity: 1; transform: none; }
/* Яблочко выглядывает из-за верхнего края карточки и машет */
.inst-pal {
  position: absolute;
  left: 16px; top: -58px;
  width: 92px;
  transform-origin: 50% 85%;
  transform: rotate(-7deg);
  filter: drop-shadow(0 6px 8px rgba(60, 30, 5, .3));
  animation: inst-wave 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes inst-wave {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: translateY(-3px) rotate(3deg); }
}
.inst-card {
  position: relative;            /* после картинки в разметке — закрывает низ Яблочка */
  outline: none;
  overflow: hidden;              /* пока меняется высота при переходе от приветствия к установке */
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 20px;
  background-color: var(--cream);
  background-image: var(--paper-texture);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  color: var(--ink);
}
/* Шаги карточки: приветствие (первый вход) и установка */
.inst[data-step="welcome"] .inst-main,
.inst:not([data-step="welcome"]) .inst-welcome { display: none; }
.inst-lead--welcome { margin-bottom: 16px; font-size: 16px; line-height: 1.45; }
.inst-dots { display: flex; justify-content: center; gap: 6px; margin: -6px 0 10px; }
.inst-dots[hidden] { display: none; }
.inst-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(150, 100, 40, .25); }
.inst[data-step="welcome"] .inst-dots i:first-child,
.inst[data-step="install"] .inst-dots i:last-child { background: #d8641e; }
/* Прокрутка — только страховка для совсем низких экранов */
.inst-in {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 14px;
}
.inst-title {
  margin: 0 0 6px;
  text-align: center;
  font: 900 22px/1.1 var(--f-display);
  color: #3a2210;
}
.inst-lead {
  margin: 0 0 10px;
  text-align: center;
  font: italic 400 14.5px/1.4 var(--f-serif);
  color: #4a321c;
}
.inst-app {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 6px 14px 6px 6px;
  border-radius: 14px;
  background: rgba(160, 110, 50, .1);
  box-shadow: inset 0 0 0 1px rgba(150, 100, 40, .2);
}
.inst-app img {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(60, 30, 5, .3);
}
.inst-app b { display: block; font: 900 14.5px/1.15 var(--f-display); color: #3a2210; }
.inst-app small { display: block; font: 700 11.5px/1.2 var(--f-ui); color: #9a7448; }
.inst-sub {
  margin: 0 0 6px;
  font: 800 10.5px/1.2 var(--f-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a4743a;
}
.inst-steps {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inst-step {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 5px 10px 5px 6px;
  border-radius: 14px;
  background: rgba(255, 250, 240, .75);
  box-shadow: inset 0 0 0 1px rgba(150, 100, 40, .18);
}
.inst-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #d8641e;
  color: #fff;
  font: 900 12px/1 var(--f-ui);
}
/* Рисунок кнопки браузера: белая «кнопка», как на панели Safari / Chrome */
.inst-ic {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 40px; height: 34px;
  padding: 0 4px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(60, 30, 5, .2), inset 0 0 0 1px rgba(0, 0, 0, .06);
  color: #1c1c1e;
}
.inst-ic svg { width: 24px; height: 24px; }
.inst[data-kind="ios"] .inst-ic { color: #007aff; }       /* до iOS 26 значки Safari синие */
.inst-word { padding: 0 4px; font: 700 13px/1 -apple-system, system-ui, var(--f-ui); color: #007aff; }
.inst-txt { min-width: 0; font: 700 13.5px/1.3 var(--f-ui); color: #3a2716; }
.inst-note {
  margin: -4px 0 12px;
  text-align: center;
  font: 700 13px/1.35 var(--f-ui);
  color: #8a6236;
}
.inst-btns a.btn { text-decoration: none; }
/* Стрелка на панель браузера — у края приложения, мягко покачивается */
.inst-arrow {
  position: absolute;
  z-index: 2;
  display: block;
  width: 36px; height: 50px;
  color: #ffd98a;
  filter: drop-shadow(0 0 8px rgba(255, 196, 96, .75));
  opacity: 0;
  transition: opacity .3s ease .15s;
  pointer-events: none;
  animation: inst-bob 1.3s ease-in-out infinite;
}
.inst-arrow[hidden] { display: none; }
.inst.is-open .inst-arrow { opacity: 1; }
.inst-arrow svg { display: block; width: 100%; height: 100%; }
.inst-arrow--down-right { right: 22px; bottom: calc(var(--safe-b) + 6px); }
.inst-arrow--down-center { left: 50%; margin-left: -18px; bottom: calc(var(--safe-b) + 6px); }
.inst-arrow--up-right { right: 14px; top: calc(var(--safe-t) + 6px); animation-name: inst-bob-up; }
.inst-arrow--up-right svg { transform: rotate(180deg); }
@keyframes inst-bob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(5px); } }
@keyframes inst-bob-up { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-5px); } }

/* Плашка-напоминание над меню */
.inst-nudge {
  position: absolute;
  left: 10px; right: 10px;
  bottom: calc(var(--tab-h) + 10px);
  z-index: 44;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 4px 7px 7px;
  border-radius: 16px;
  background-color: var(--cream);
  background-image: var(--paper-texture);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .25s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.inst-nudge[hidden] { display: none; }
.inst-nudge.is-on { opacity: 1; transform: none; }
.inst-nudge-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 2px 6px rgba(60, 30, 5, .3); }
.inst-nudge-txt {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: 900 13.5px/1.2 var(--f-display);
  color: #3a2210;
}
.inst-nudge-txt small { display: block; margin-top: 1px; font: 700 11.5px/1.2 var(--f-ui); color: #9a7448; }
.btn.inst-nudge-go { flex: none; min-height: 38px; padding: 6px 14px; border-radius: 12px; font-size: 14px; }
.inst-nudge-x { width: 36px; height: 36px; }
.inst-nudge-x svg { width: 14px; height: 14px; }

/* Низкие экраны: чуть компактнее */
@media (max-height: 700px) {
  .brand-title { font-size: 20px; }
  .app-head .brand-title { font-size: 20px; }
  .brand-sub { font-size: 11px; }
  /* «Родителям»: семь разделов должны помещаться без прокрутки */
  .letter { padding-top: 12px; padding-bottom: 10px; }
  .letter-lead { display: none; }
  .acc-item summary { min-height: 40px; }
  .letter-sign { margin-top: 6px; }
  .letter-foot { margin-top: 6px; }
  /* Карточка установки */
  .inst { padding-top: calc(var(--safe-t) + 50px); padding-bottom: calc(var(--safe-b) + 56px); }
  .inst-pal { width: 80px; top: -50px; }
  .inst-in { padding-top: 14px; padding-bottom: 12px; }
  .inst-title { font-size: 20px; }
  .inst-lead { font-size: 13.5px; margin-bottom: 8px; }
  .inst-app { margin-bottom: 8px; }
  .inst-step { min-height: 40px; padding-top: 3px; padding-bottom: 3px; }
  .inst-steps { gap: 5px; margin-bottom: 10px; }
}

/* Уменьшенное движение: всё статично */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}