/* Палитра мастерской «Сказочники»: зелёный, золото, кремовая бумага */
:root{
  --paper:#faf7f0; --ink:#44504a;
  --green:#365747; --green-dark:#2a4638; --green-soft:#7c8277;
  --gold:#a3762f; --gold-soft:#d4b779;
  --shadow:rgba(54,71,60,.22);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(circle at 50% 30%, #fdfbf5 0%, #f4f0e2 62%, #e9e2cf 100%);
  color:var(--ink); font-family:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent; overflow:hidden;
}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}

/* ---------- Главная: книга слева, описание справа ---------- */
#splash{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:30;
  transition:opacity .6s ease, visibility .6s;
}
#splash.hidden{opacity:0; visibility:hidden}
/* шапка мастерской — левый верхний угол главной */
#brand{
  position:absolute; left:clamp(18px,3vw,40px); top:calc(clamp(16px,2.6vh,30px) + env(safe-area-inset-top,0px));
  width:clamp(170px,17vw,240px); opacity:.95;
}
#brand img{width:100%; height:auto; display:block}
#splashInner{
  display:flex; align-items:center; justify-content:center; gap:clamp(28px,6vw,90px);
  max-width:1150px; width:100%;
}
#coverWrap{perspective:1700px; flex:0 0 auto}
#cover{
  height:min(72vh, 44vw*1.245); aspect-ratio:1389/1730; max-width:44vw;
  background-image:url("img/00.jpg"); background-size:auto 100%; background-position:100% 50%;
  border-radius:6px 14px 14px 6px; cursor:pointer;
  box-shadow:-6px 0 0 -2px #cbb37f, -10px 0 0 -4px #b89b63, 0 18px 45px var(--shadow);
  transform-origin:left center;
  animation:peek 5s ease-in-out infinite;
  transition:transform .45s ease;
}
/* книга «просится открыться»: слегка приоткрывается от корешка */
@keyframes peek{
  0%, 42%, 100%{transform:rotateY(0)}
  8%{transform:rotateY(-12deg)}
  16%{transform:rotateY(-4deg)}
  24%{transform:rotateY(-9deg)}
}
#cover:hover{animation-play-state:paused; transform:rotateY(-16deg)}
#splashText{flex:0 1 460px; min-width:0}
#splashText h1{
  margin:0 0 16px; font-family:Lora,Georgia,serif; font-weight:600;
  font-size:clamp(26px,3.3vw,42px); line-height:1.18; color:var(--green);
}
#splashText p{margin:0 0 24px; font-size:clamp(15px,1.5vw,17px); line-height:1.6; color:#5a6259}
#openBtn{
  background:var(--green); color:#fdfbf5; padding:14px 34px; border-radius:10px;
  font-size:clamp(15px,2.2vw,18px); font-weight:600; letter-spacing:.01em;
  box-shadow:0 5px 14px rgba(54,87,71,.28);
  transition:transform .15s ease, background .2s;
}
#openBtn:hover{background:var(--green-dark); transform:translateY(-2px)}
#splashText .hint{margin-top:14px; font-size:13px; color:var(--green-soft)}
@media (max-width:700px){
  #brand{left:50%; transform:translateX(-50%); width:190px}
  #splash{padding-top:96px; align-items:flex-start}
  #splashInner{flex-direction:column; gap:22px; text-align:center}
  #cover{height:min(52vh, 78vw*1.245); max-width:78vw}
  #splashText{flex-basis:auto}
  #splashText p{margin-bottom:16px}
}

/* ---------- Книга ---------- */
#stage{
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:12px; visibility:hidden;
}
#stage.shown{visibility:visible}
#bookBox{flex:1 1 auto; width:100%; display:flex; align-items:center; justify-content:center; min-height:0}
#book{filter:drop-shadow(0 16px 30px var(--shadow))}
.page{
  background-color:#fff; background-size:200% 100%; background-repeat:no-repeat;
  overflow:hidden;
}
.page.-left{background-position:0 0; border-radius:8px 0 0 8px}
.page.-right{background-position:100% 0; border-radius:0 8px 8px 0}

/* ---------- Кнопки по углам экрана ---------- */
.ui{display:none}
body.reading .ui{display:grid}
.corner{
  position:fixed; z-index:20; width:56px; height:56px; border-radius:50%;
  place-items:center; color:var(--green);
  background:rgba(250,247,240,.55); border:1px solid rgba(163,118,47,.30);
  backdrop-filter:blur(4px); opacity:.62; box-shadow:0 4px 14px rgba(54,71,60,.16);
  transition:opacity .15s, background .15s, transform .1s;
}
.corner:hover{opacity:1; background:rgba(250,247,240,.92)}
.corner:active{transform:scale(.94)}
.corner svg{width:22px; height:22px; display:block}
#prevBtn svg, #nextBtn svg{width:19px; height:19px}
/* на телефоне наведения нет — кнопки видны чуть заметнее */
@media (hover:none){ .corner{opacity:.85} }
#prevBtn{left:14px;  bottom:calc(14px + env(safe-area-inset-bottom,0px))}
#nextBtn{right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px))}
/* ВРЕМЕННО: звук выключен, значок скрыт (2026-10-08) */
#soundBtn{display:none}
#soundBtn{right:14px; top:calc(14px + env(safe-area-inset-top,0px)); font-size:22px}
#logoBtn{
  left:14px; top:calc(14px + env(safe-area-inset-top,0px));
  padding:0; overflow:hidden; background:none; border:0; backdrop-filter:none;
  opacity:.92; box-shadow:0 3px 10px rgba(74,59,42,.25);
}
#logoBtn:hover{background:none}
#logoBtn img{width:100%; height:100%; display:block; border-radius:50%}

/* ---------- Естественный сгиб разворота ---------- */
body.two #book .stf__block::before{
  content:""; position:absolute; z-index:3; pointer-events:none;
  left:50%; top:0; bottom:0; width:110px; transform:translateX(-55px);
  background:linear-gradient(90deg, rgba(94,64,35,0) 0%, rgba(94,64,35,.08) 38%,
    rgba(94,64,35,.17) 50%, rgba(94,64,35,.08) 62%, rgba(94,64,35,0) 100%);
}
body.two #book .stf__block::after{
  content:""; position:absolute; z-index:3; pointer-events:none;
  left:50%; top:0; bottom:0; width:0;
  border-left:1px solid rgba(94,64,35,.30);
}

@media (max-width:600px){
  .corner{width:46px; height:46px}
  .corner svg{width:20px; height:20px}
  #logoBtn{width:52px; height:52px}
}

/* ---------- Базовые правила StPageFlip ----------
   Библиотека вставляет их сама тегом <style>, но CSP сайта (style-src 'self') такие теги блокирует. */
.stf__parent{position:relative; display:block; box-sizing:border-box; transform:translateZ(0); touch-action:pan-y}
.stf__parent canvas{position:absolute; width:100%; height:100%; left:0; top:0}
.stf__block{position:absolute; width:100%; height:100%; box-sizing:border-box; perspective:2000px}
.stf__item{display:none; position:absolute; transform-style:preserve-3d}
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow{position:absolute; left:0; top:0}

/* ---------- Фоны страниц: img/NN.jpg, 01 форзац, 03–05, 23 нахзац ---------- */
.s01{background-image:url('img/01.jpg')}
.s03{background-image:url('img/03.jpg')}
.s04{background-image:url('img/04.jpg')}
.s05{background-image:url('img/05.jpg')}
.s23{background-image:url('img/23.jpg')}

/* ---------- Призыв на нахзаце: в ночном небе левой страницы, правее луны ----------
   размеры в cqw — от ширины страницы, чтобы надпись росла и мельчала вместе с книгой */
.page.s23.-left{container-type:inline-size}
.cta{
  position:absolute; right:6cqw; top:6cqw; width:56cqw; text-align:center;
  color:#fdf6e3; text-shadow:0 0 1.2cqw rgba(10,18,50,.9);
}
.cta h2{margin:0 0 1.6cqw; font-family:Lora,Georgia,serif; font-weight:600; font-size:6.2cqw; line-height:1.15; color:#f6dc9c}
.cta p{margin:0 0 3.2cqw; font-size:3.5cqw; line-height:1.4}
.cta a{
  display:inline-block; padding:2.2cqw 4.4cqw; border-radius:2cqw;
  background:var(--paper); color:var(--green); text-decoration:none; text-shadow:none;
  font-size:3.4cqw; font-weight:700; box-shadow:0 0 3cqw rgba(246,220,156,.55);
}
.cta a:hover{background:#fff}

/* ---------- Окно «Напишите нам»: как на главной сайта, в шрифтах книги ---------- */
#orderDialog{
  background:var(--paper); border:1px solid #d8decb; border-radius:18px; color:#304a3d;
  width:min(500px,calc(100% - 32px)); padding:40px; box-shadow:0 25px 100px #172b3655;
}
#orderDialog::backdrop{background:#182e2cc4; backdrop-filter:blur(5px)}
#orderDialog .eyebrow{margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:2.4px; font-weight:600; color:#8c7955}
#orderDialog h2{margin:0; font-family:Lora,Georgia,serif; font-weight:500; font-size:35px; line-height:1.2; color:var(--green)}
#orderDialog h2:focus{outline:none}   /* фокус при открытии — на заголовке, а не на «×» */
.close-dialog{position:absolute; top:27px; right:28px; display:grid; width:40px; height:40px; place-items:center; font-size:30px; line-height:1}
.close-dialog:hover{color:var(--gold)}
.messengers{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px}
.messenger{
  display:flex; flex-direction:column; align-items:center; gap:9px; padding:20px 14px;
  border:1px solid #dbe0d2; border-radius:10px; background:#fffcf5; color:#304a3d; text-decoration:none;
  transition:border-color .2s, transform .2s;
}
.messenger:hover{border-color:#bd8e4e; transform:translateY(-2px)}
.messenger__icon{display:grid; width:46px; height:46px; place-items:center; border-radius:50%; background:#eef1e8; color:var(--green)}
.messenger__icon svg{width:24px; height:24px; fill:currentColor}
.messenger__icon--max{font:600 19px Lora,Georgia,serif}
.messenger__name{font-size:14px}
@media (hover:none){ .messenger:hover{transform:none; border-color:#dbe0d2} }
@media (max-width:600px){
  #orderDialog{padding:33px 25px}
  .close-dialog{top:19px; right:13px}
  #orderDialog h2{font-size:31px}
}