:root{
  /* === РАЗМЕРЫ ВИДЕО === */
  --video-h:      44%;     /* высота всех видео (кроме последнего) */
  --video-h-last: 22%;     /* последнее видео — 50% */
  --video-ar:     1.46;    /* ПРОПОРЦИЯ самих видео-файлов (ширина/высота) */

  /* === БЕЗОПАСНАЯ ЗОНА ===
     Раньше было фиксированных 1cm: на телефоне/планшате это съедало
     до половины страницы — видео и текст отъезжали от краёв, тексту
     не хватало места и он обрезался. Теперь зона пропорциональна
     книге: при эталонной высоте (~800px, ПК) равна тем же ~1cm,
     на мобильных уменьшается вместе с книгой — правила вёрстки
     (pos, --video-h, центрирование) работают на всех экранах. */
  --safe-zone: calc(var(--bookH) * 0.047);

  /* === ОТСТУПЫ === */
  --m-top:    3.5%;
  --m-side:   6%;
  --m-bottom: 5%;

  /* === ТЕКСТ === */
  --text-size: 0.023;
}

/* ---------- база страницы ---------- */
.page{
  width:100%;height:100%;
  background:#fdfdfc;
  background-image:radial-gradient(ellipse at center,#ffffff 0%,#f6f5f2 100%);
  display:flex;flex-direction:column;
  /* безопасная зона: не менее --safe-zone от каждого края */
  padding:
    max(var(--m-top),    var(--safe-zone))
    max(var(--m-side),   var(--safe-zone))
    max(var(--m-bottom), var(--safe-zone));
  position:relative;overflow:hidden;
}
.face.front .page::after{content:'';position:absolute;top:0;left:0;width:7%;height:100%;background:linear-gradient(to right,rgba(0,0,0,.10),transparent);pointer-events:none;z-index:1}
.face.back .page::after{content:'';position:absolute;top:0;right:0;width:7%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.10),transparent);pointer-events:none;z-index:1}

.page-number{position:absolute;bottom:0.8%;left:0;right:0;text-align:center;z-index:2}

/* ---------- заголовок и текст (потоковый формат, книга 1) ---------- */
.page h2{
  font-family:var(--font-title,Georgia,serif);
  color:#1f1f1f;font-weight:700;text-align:center;
  text-transform:uppercase;letter-spacing:.12em;
  font-size:calc(var(--bookH)*0.024);
  margin:0 0 2.5%;flex:0 0 auto;
}
.page .txt{font-family:var(--font-text,Georgia,serif);color:#222;flex:1 1 auto;min-height:0;overflow:hidden}
.page .txt p{
  font-size:calc(var(--bookH)*0.021);
  line-height:1.5;
  text-align:justify;text-indent:1.4em;
  margin:0;hyphens:auto;overflow-wrap:break-word;
}
.page .txt p.cont{text-indent:0}

/* ---------- видео в потоке текста (книга 1) ---------- */
.vslot{position:relative}
.vslot .frame{position:absolute;inset:0;overflow:hidden;background:#e9e7e2}
.vslot .frame video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.vslot.big{width:100%;aspect-ratio:16/9;margin:2% 0}
.vslot.small{float:left;width:46%;aspect-ratio:1/1;margin:.5% 4% 1% 0}
.vslot.small.right{float:right;margin:.5% 0 1% 4%}
.frame.novideo::after{content:'видео не найдено';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-family:system-ui,sans-serif;font-size:calc(var(--bookH)*0.02)}

/* ---------- СТРАНИЦА-СТИХИ ----------
   Все видео одинаковые: --video-h.
   Последнее видео: --video-h-last (50%).
   flex-shrink:0 — видео НЕ сжимается текстом.
   Текст центрирован между видео и краем. */
.type-verse .txt{
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  flex:1 1 auto;min-height:0;overflow:hidden;
  font-family:var(--font-text,Georgia,serif);color:#222;
}
.type-verse .vslot.verse{
  flex:0 0 var(--video-h);
  flex-shrink:0;
  height:var(--video-h);
  aspect-ratio:var(--video-ar);   /* рамка повторяет пропорцию видео — щели исчезают */
  align-self:center;
  max-width:100%;
  margin:0;
}
.type-verse .vslot.verse.last-video{
  flex:0 0 var(--video-h-last);
  height:var(--video-h-last);
}
.type-verse .vslot.verse .frame{background:transparent}
.type-verse .vslot.verse .frame video{object-fit:contain;object-position:center}
.type-verse.pos-top .vslot.verse{margin-bottom:calc(var(--bookH)*0.008)}
.type-verse.pos-bottom .vslot.verse{margin-top:calc(var(--bookH)*0.008)}
.type-verse .stanza{margin:0}
.type-verse .stanza+.stanza{margin-top:calc(var(--bookH)*0.006)}
.type-verse .txt p{
  font-size:calc(var(--bookH)*var(--text-size));
  line-height:1.32;
  text-align:center;text-indent:0;
  margin:0;hyphens:none;overflow-wrap:break-word;
}

/* ---------- СТРАНИЦА ВЫХОДНЫХ ДАННЫХ (info) ---------- */
.type-info{justify-content:center}
.type-info .txt{
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  flex:1 1 auto;min-height:0;overflow:hidden;
  font-family:var(--font-text,Georgia,serif);color:#333;
}
.type-info .txt p{
  font-size:calc(var(--bookH)*var(--info-size,0.0135));
  line-height:var(--info-lh,1.45);
  text-align:center;text-indent:0;
  margin:0 0 2%;hyphens:auto;overflow-wrap:break-word;
}
.type-info .txt p:first-child{font-weight:700}

/* ---------- обложка-финал ---------- */
.type-cover{align-items:center;justify-content:center;text-align:center}
.type-cover h2{font-size:calc(var(--bookH)*0.033);letter-spacing:.06em;text-transform:none;margin:0}
.type-cover .txt{flex:0 0 auto;margin-top:3%;overflow:visible}
.type-cover .txt p{text-align:center;text-indent:0;font-size:calc(var(--bookH)*0.016);color:#2e2e2e}

/* ---------- титул ---------- */
.type-cover-video{align-items:center;text-align:center}
.type-cover-video .author{
  font-family:var(--font-text,Georgia,serif);
  color:#1f1f1f;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  font-size:calc(var(--bookH)*0.017);
  margin-top:auto;
  margin-bottom:6%;
}
.type-cover-video h2{
  font-family:var(--font-title,Georgia,serif);
  color:#1f1f1f;font-weight:700;text-align:center;
  text-transform:none;letter-spacing:.05em;
  font-size:calc(var(--bookH)*0.036);
  margin:0 0 1%;
}
.type-cover-video .sub{
  font-family:var(--font-text,Georgia,serif);color:#2e2e2e;
  font-size:calc(var(--bookH)*0.018);letter-spacing:.1em;
  margin:0;
}
.type-cover-video .txt{flex:0 0 auto;overflow:visible}
.type-cover-video .txt p{text-align:center;text-indent:0}
.type-cover-video .vslot{
  width:62%;aspect-ratio:3/4;
  margin:auto auto 4%;
  border:1px solid rgba(107,74,53,.35);
  padding:calc(var(--bookH)*0.012);
  background:rgba(255,255,255,.4);
}
.type-cover-video .vslot .frame{inset:calc(var(--bookH)*0.012)}

/* ========== каратэ-подсветка ========== */
.type-verse .txt p{transition:color .25s}
.type-verse .txt p.lit{border-radius:4px;
  background-image:linear-gradient(to right,rgba(138,90,51,.32) 0,rgba(138,90,51,.32) var(--kp,0%),transparent var(--kp,0%));
  color:#3a2408}
.type-verse .txt p.lit.c-yellow{
  background-image:linear-gradient(to right,rgba(255,193,7,.52) 0,rgba(255,193,7,.52) var(--kp,0%),transparent var(--kp,0%));
  color:#4a3a00}
.type-verse .txt p.lit.c-green{
  background-image:linear-gradient(to right,rgba(46,160,67,.45) 0,rgba(46,160,67,.45) var(--kp,0%),transparent var(--kp,0%));
  color:#123f1a}
.type-verse .txt p.lit.c-red{
  background-image:linear-gradient(to right,rgba(229,57,53,.40) 0,rgba(229,57,53,.40) var(--kp,0%),transparent var(--kp,0%));
  color:#5e1210}
.type-verse .txt p.lit.c-cyan{
  background-image:linear-gradient(to right,rgba(3,155,229,.40) 0,rgba(3,155,229,.40) var(--kp,0%),transparent var(--kp,0%));
  color:#063a54}
/* стр. 9: видео уменьшено (26.4% вместо общих --video-h) */
.face.back .page[data-spread="5"] .vslot.verse{
  flex:0 0 26.4% !important;
  height:26.4% !important;
}
/* ---------- фото в режиме «без видео» ---------- */
.vslot .frame .photo{display:none;width:100%;height:100%;object-fit:contain}
body.novideo .vslot .frame video{display:none}
body.novideo .vslot .frame .photo{display:block}
body.novideo .vslot .frame .photo.nophoto{display:none}
/* ========== цвета персонажей (каратэ) ==========
   yellow=рассказчик · green=старик · red=старуха и прочие · cyan=золотая рыбка */
.type-verse .txt p.lit.c-yellow{
  background-image:linear-gradient(to right,rgba(255,193,7,.52) 0,rgba(255,193,7,.52) var(--kp,0%),transparent var(--kp,0%));
  color:#4a3a00}
.type-verse .txt p.lit.c-green{
  background-image:linear-gradient(to right,rgba(46,160,67,.45) 0,rgba(46,160,67,.45) var(--kp,0%),transparent var(--kp,0%));
  color:#123f1a}
.type-verse .txt p.lit.c-red{
  background-image:linear-gradient(to right,rgba(229,57,53,.40) 0,rgba(229,57,53,.40) var(--kp,0%),transparent var(--kp,0%));
  color:#5e1210}
.type-verse .txt p.lit.c-cyan{
  background-image:linear-gradient(to right,rgba(3,155,229,.40) 0,rgba(3,155,229,.40) var(--kp,0%),transparent var(--kp,0%));
  color:#063a54}
/* ---------- титул: видео на всю страницу, без надписей ----------
   Блок идёт ПОСЛЕДНИМ, поэтому перебивает старые правила
   .type-cover-video (width:62%, aspect-ratio:3/4, рамка, отступы). */
.type-cover-video{padding:0;align-items:stretch;text-align:left}
.type-cover-video .vslot{
  width:100%;height:100%;flex:1 1 auto;min-height:0;
  aspect-ratio:auto;margin:0;border:none;padding:0;background:transparent;
}
.type-cover-video .vslot .frame{inset:0;background:transparent}
.type-cover-video .frame video{object-fit:cover;object-position:center}
.type-cover-video .frame .photo{object-fit:cover}