/* раздел «Сказки» (stories): полка с книжками и читалка. Все правила — через #s-stories и с префиксом st-.
   Раскладку читалки (ширина/высота картинки) считает layout() в stories.js: --st-pw (альбомная) / --st-ph (портрет). */
#s-stories{background:#3b2a52}
#s-stories .st-wall{position:absolute;inset:0;z-index:0;background:#3b2a52}
#s-stories .st-wall .bg{object-position:50% 50%;transition:opacity .5s}
#s-stories.st-dark .st-wall .bg{opacity:.35}
/* ---------- полка ---------- */
#s-stories .st-shelf{position:absolute;inset:0;z-index:2;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;justify-content:safe center;padding:calc(2vmin + env(safe-area-inset-top)) 3vw calc(5vh + env(safe-area-inset-bottom))}
#s-stories .st-title{text-align:center;font-size:min(9vmin,56px);font-weight:900;color:#fff;-webkit-text-stroke:.4vmin #b06cff;text-shadow:0 .7vmin 0 #7a3fd0,0 1.2vmin 2vmin rgba(0,0,0,.35);margin:1vmin 16vmin 2vmin;line-height:1.1;letter-spacing:.2vmin}
#s-stories .st-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3vmin;padding:0 calc(4vmin + env(safe-area-inset-right)) 0 calc(4vmin + env(safe-area-inset-left));width:100%;max-width:min(100%,165vmin);margin:0 auto;flex:none}
@media (orientation:portrait){#s-stories .st-grid{grid-template-columns:repeat(2,1fr);gap:3.2vmin;padding:0 1vw}#s-stories .st-title{margin-top:12vmin}}
#s-stories .st-bk{position:relative;border-radius:3.2vmin;overflow:hidden;background:#fff;aspect-ratio:1/1.12;border:.8vmin solid #fff;box-shadow:0 1vmin 0 var(--c),0 1.6vmin 2.6vmin rgba(0,0,0,.3);animation:pop-in .5s backwards,floaty 3.8s ease-in-out infinite;transition:scale .32s cubic-bezier(.3,1.6,.5,1);display:block;width:100%}
#s-stories .st-bk:active{scale:.93}
#s-stories .st-bk:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2.4vmin;background:var(--c);z-index:2;opacity:.92;box-shadow:.4vmin 0 .8vmin rgba(0,0,0,.25)}
#s-stories .st-bk img{width:100%;height:100%;object-fit:cover;display:block}
#s-stories .st-bk .st-nocover{width:100%;height:100%;background:radial-gradient(circle at 50% 35%,#fff3cf,var(--c))}
#s-stories .st-bk-t{position:absolute;left:0;right:0;bottom:0;padding:3vmin 1.4vmin 1.4vmin 3vmin;background:linear-gradient(rgba(40,20,60,0),rgba(40,20,60,.88) 45%);color:#fff;font-weight:900;font-size:min(3.3vmin,20px);line-height:1.1;text-align:center;z-index:3}
@media (orientation:portrait){#s-stories .st-bk-t{font-size:min(4.6vmin,22px)}}
#s-stories .st-bk-t small{display:block;font-size:.74em;color:#ffd87a;font-weight:800;margin-top:.35em}
#s-stories .st-star{position:absolute;right:1.2vmin;top:1.2vmin;width:8vmin;height:8vmin;max-width:48px;max-height:48px;display:none;z-index:4;filter:drop-shadow(0 .4vmin .6vmin rgba(0,0,0,.35))}
#s-stories .st-bk.read .st-star{display:block;animation:st-twinkle 2.2s ease-in-out infinite}
#s-stories .st-star svg{width:100%;height:100%}
@keyframes st-twinkle{50%{scale:1.18;rotate:8deg}}
#s-stories .st-rib{position:absolute;left:4.4vmin;top:-.4vmin;width:4vmin;height:10vmin;background:#ff5b6e;clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%);display:none;z-index:4;box-shadow:0 .3vmin .6vmin rgba(0,0,0,.3)}
#s-stories .st-bk.mark .st-rib{display:block}
/* ночь */
#s-stories .st-night-btn{right:calc(2vmin + env(safe-area-inset-right));top:calc(2vmin + env(safe-area-inset-top));--b1:#9b7bff;--b2:#6a46d8;--b3:#4a2fa0;z-index:60}
#s-stories .st-sun{display:none}
#s-stories.st-dark .st-sun{display:block}
#s-stories.st-dark .st-moon{display:none}
#s-stories.st-dark .st-night-btn{--b1:#ffd166;--b2:#ff9f1c;--b3:#c96500}
/* ---------- книга ---------- */
#s-stories .st-book{position:absolute;inset:0;z-index:3;display:none;background:#f7efe2}
#s-stories.st-open .st-book{display:block}
#s-stories.st-open .st-shelf{display:none}
#s-stories .st-pic{position:absolute;left:0;top:0;right:0;height:var(--st-ph,50%);overflow:hidden;background:#2a2033;perspective:140vmin;touch-action:none}
#s-stories .st-pg{position:absolute;inset:0;display:none;backface-visibility:hidden;translate:var(--px,0) var(--py,0);transition:translate .35s ease-out}
#s-stories .st-pg.on{display:block}
#s-stories .st-pg img{width:100%;height:100%;object-fit:cover;display:block;animation:st-kb 24s ease-in-out infinite alternate}
@keyframes st-kb{from{scale:1.02;translate:-.6% -.4%}to{scale:1.06;translate:.8% .6%}}
#s-stories .st-pg.st-in-r{animation:st-in-r .62s cubic-bezier(.2,.8,.3,1) both;transform-origin:100% 50%}
#s-stories .st-pg.st-in-l{animation:st-in-l .62s cubic-bezier(.2,.8,.3,1) both;transform-origin:0 50%}
#s-stories .st-pg.st-out-r{animation:st-out-r .62s ease-in both;transform-origin:0 50%;z-index:2}
#s-stories .st-pg.st-out-l{animation:st-out-l .62s ease-in both;transform-origin:100% 50%;z-index:2}
@keyframes st-in-r{from{rotate:y -55deg;opacity:0;scale:.96}}
@keyframes st-in-l{from{rotate:y 55deg;opacity:0;scale:.96}}
@keyframes st-out-r{to{rotate:y 70deg;opacity:0}}
@keyframes st-out-l{to{rotate:y -70deg;opacity:0}}
#s-stories .st-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
#s-stories .st-dim{position:absolute;inset:0;pointer-events:none;z-index:4;background:rgba(35,15,30,0);transition:background .5s}
#s-stories.st-dark .st-dim{background:rgba(35,15,30,.3)}
#s-stories .st-page{position:absolute;left:0;right:0;top:calc(var(--st-ph,50%) - 4vmin);bottom:0;background:#fff8ec;border-radius:5vmin 5vmin 0 0;box-shadow:0 -1vmin 3vmin rgba(0,0,0,.28);display:flex;flex-direction:column;padding:2.6vmin 4vmin calc(2vmin + env(safe-area-inset-bottom));z-index:5;transition:background .5s}
#s-stories.st-dark .st-book{background:#241b2e}
#s-stories.st-dark .st-page{background:#2b2135}
#s-stories .st-head{font-size:clamp(11px,3vmin,20px);font-weight:900;color:#a65cff;text-align:center;letter-spacing:.06em;text-transform:uppercase;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s-stories.st-dark .st-head{color:#c9a9ff}
#s-stories .st-textwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:1vmin 0}
#s-stories .st-text{font-size:clamp(18px,6.6vmin,42px);line-height:1.32;font-weight:800;color:#3a2a1f;text-align:center;max-width:900px}
#s-stories .st-text.sm1{font-size:clamp(16px,5.6vmin,36px)}
#s-stories .st-text.sm2{font-size:clamp(15px,4.8vmin,31px);line-height:1.25}
#s-stories .st-text.sm3{font-size:clamp(13px,4vmin,27px);line-height:1.2}
#s-stories.st-dark .st-text{color:#f3e6cf}
#s-stories .st-s{border-radius:.4em;padding:0 .06em;transition:background .3s ease-out,box-shadow .3s ease-out;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#s-stories .st-s.on{background:#ffe08a;box-shadow:0 0 .5em .12em rgba(255,224,138,.8)}
#s-stories.st-dark .st-s.on{background:#7a5a2a;box-shadow:0 0 .5em .12em rgba(122,90,42,.7)}
#s-stories .st-page.st-slide-r .st-textwrap{animation:st-slide-r .5s cubic-bezier(.2,.8,.3,1)}
#s-stories .st-page.st-slide-l .st-textwrap{animation:st-slide-l .5s cubic-bezier(.2,.8,.3,1)}
@keyframes st-slide-r{from{translate:12vw 0;opacity:0}}
@keyframes st-slide-l{from{translate:-12vw 0;opacity:0}}
#s-stories .st-dots{display:flex;gap:1vmin;flex-wrap:wrap;justify-content:center;flex:none;padding:.6vmin 0}
#s-stories .st-dots i{width:2.4vmin;height:2.4vmin;min-width:8px;min-height:8px;max-width:14px;max-height:14px;border-radius:50%;background:#dccbff;transition:scale .3s cubic-bezier(.3,1.6,.5,1),background .25s}
#s-stories .st-dots i.done{background:#b48bff}
#s-stories .st-dots i.on{background:#7f52e8;scale:1.45}
#s-stories .st-ctl{display:flex;align-items:center;justify-content:space-between;gap:2vmin;flex:none;margin-top:.6vmin}
#s-stories .st-arr{width:18vmin;height:18vmin;max-width:104px;max-height:104px;border-radius:50%;background:linear-gradient(#b48bff,#7f52e8);box-shadow:0 .8vmin 0 #5733b0,0 1vmin 2vmin rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .32s cubic-bezier(.3,1.6,.5,1),opacity .3s}
#s-stories .st-arr svg{width:60%;height:60%}
#s-stories .st-arr:active{transform:translateY(.5vmin) scale(.94)}
#s-stories .st-arr.off{opacity:.25;pointer-events:none}
#s-stories .st-next{background:linear-gradient(#7ddf7a,#35b955);box-shadow:0 .8vmin 0 #1f8038,0 1vmin 2vmin rgba(0,0,0,.25)}
#s-stories .st-listen{height:14vmin;max-height:84px;padding:0 3.4vmin;border-radius:8vmin;background:linear-gradient(#ffb347,#ff8a00);box-shadow:0 .7vmin 0 #c96500,0 1vmin 2vmin rgba(0,0,0,.25);color:#fff;font-weight:900;font-size:clamp(13px,3.8vmin,24px);display:flex;align-items:center;gap:1.2vmin;flex:none;transition:transform .32s cubic-bezier(.3,1.6,.5,1)}
#s-stories .st-listen:active{transform:scale(.93)}
#s-stories .st-listen svg{width:7vmin;height:7vmin;max-width:44px;max-height:44px;flex:none}
#s-stories .st-ic-stop{display:none}
#s-stories .st-listen.on .st-ic-stop{display:block}
#s-stories .st-listen.on .st-ic-play{display:none}
#s-stories .st-listen.on{animation:pulse 1.3s infinite ease-in-out;background:linear-gradient(#ff8fb0,#ff4f7d);box-shadow:0 .7vmin 0 #b5203f,0 1vmin 2vmin rgba(0,0,0,.25)}
/* альбомная: разворот — картинка слева во всю высоту, страница справа */
#s-stories.st-land .st-pic{right:auto;bottom:0;height:auto;width:var(--st-pw,50%)}
#s-stories.st-land .st-page{left:calc(var(--st-pw,50%) - 3vmin);top:0;border-radius:5vmin 0 0 5vmin;box-shadow:-1vmin 0 3vmin rgba(0,0,0,.28);padding:calc(2vmin + env(safe-area-inset-top)) calc(3vmin + env(safe-area-inset-right)) calc(2vmin + env(safe-area-inset-bottom)) 4.5vmin}
#s-stories.st-land .st-arr{width:16vmin;height:16vmin}
/* ---------- финал: вопросы и ритуал ---------- */
#s-stories .st-final{position:absolute;inset:0;z-index:8;display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;background:radial-gradient(circle at 50% 15%,#fff7df,#ffe3b0 70%,#ffd38f)}
#s-stories .st-book.fin .st-final{display:block}
#s-stories.st-dark .st-final{background:radial-gradient(circle at 50% 15%,#3a2d45,#241b2e 70%)}
#s-stories .st-fin-in{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.6vmin;padding:calc(15vmin + env(safe-area-inset-top)) 4vw calc(4vmin + env(safe-area-inset-bottom))}
@media (orientation:landscape){#s-stories .st-fin-in{padding-top:calc(4vmin + env(safe-area-inset-top));padding-left:calc(16vmin + env(safe-area-inset-left));padding-right:calc(16vmin + env(safe-area-inset-right))}}
#s-stories .st-fin-title{font-size:min(8vmin,52px);font-weight:900;color:#fff;-webkit-text-stroke:.4vmin #b06cff;text-shadow:0 .7vmin 0 #7a3fd0,0 1.2vmin 2vmin rgba(0,0,0,.25);line-height:1.1}
#s-stories .st-q,#s-stories .st-rit{display:flex;align-items:center;gap:2.6vmin;width:min(94%,760px);background:#fff;border-radius:4vmin;padding:2.4vmin 3vmin;box-shadow:0 .8vmin 0 #e9d7ff,0 1vmin 2vmin rgba(0,0,0,.15);font-size:clamp(15px,4.4vmin,30px);font-weight:800;color:#3a2a1f;text-align:left;line-height:1.25;animation:pop-in .5s backwards}
#s-stories.st-dark .st-q,#s-stories.st-dark .st-rit{background:#3a2d45;color:#f3e6cf;box-shadow:0 .8vmin 0 #1f1727,0 1vmin 2vmin rgba(0,0,0,.3)}
#s-stories .st-rit{background:#fff3f7;border:.6vmin solid #ffb3c8}
#s-stories.st-dark .st-rit{border-color:#7a4a6a}
#s-stories .st-rit b{display:block;color:#d9487a;margin-bottom:.5vmin;font-size:1.05em}
#s-stories .st-rit p{margin:0}
#s-stories .st-spk{flex:none;width:13vmin;height:13vmin;max-width:76px;max-height:76px;border-radius:50%;background:linear-gradient(#7ddf7a,#35b955);box-shadow:0 .6vmin 0 #1f8038,0 .8vmin 1.6vmin rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;transition:transform .32s cubic-bezier(.3,1.6,.5,1)}
#s-stories .st-spk:active{transform:scale(.9)}
#s-stories .st-spk svg{width:62%;height:62%}
#s-stories .st-spk.on{animation:pulse 1s infinite;background:linear-gradient(#ff8fb0,#ff4f7d);box-shadow:0 .6vmin 0 #b5203f}
#s-stories .st-fin-btns{display:flex;gap:4vmin;flex-wrap:wrap;justify-content:center;margin-top:1vmin}
#s-stories .st-big{height:16vmin;max-height:96px;padding:0 6vmin;border-radius:8vmin;font-size:clamp(16px,5vmin,32px);font-weight:900;color:#fff;background:linear-gradient(#7ddf7a,#35b955);box-shadow:0 1vmin 0 #1f8038,0 1.4vmin 2.4vmin rgba(0,0,0,.25);transition:transform .32s cubic-bezier(.3,1.6,.5,1);animation:pulse 1.6s infinite ease-in-out}
#s-stories .st-big:active{transform:translateY(.6vmin) scale(.95)}
#s-stories .st-again{background:linear-gradient(#b48bff,#7f52e8);box-shadow:0 1vmin 0 #5733b0,0 1.4vmin 2.4vmin rgba(0,0,0,.25);animation:none}

/* 05.10: панель управления — точки отдельной строкой над кнопками (в портрете 390 px кнопки+точки не влезали), кнопки крупнее */
#s-stories .st-ctl{flex-wrap:wrap;row-gap:1.2vmin}
#s-stories .st-dots{order:-1;width:100%}
#s-stories .st-arr{width:19vmin;height:19vmin}
#s-stories .st-listen{height:16vmin;max-height:96px}
#s-stories.st-land .st-arr{width:19vmin;height:19vmin}
#s-stories .st-star{width:6.4vmin;height:6.4vmin;right:.8vmin;top:.8vmin}

/* 05.10: вторая десятка — разделы полки и значок «новая» (до первого прочтения); 20 книжек: прокрутка, длинные слова переносятся */
#s-stories .st-sub{grid-column:1/-1;color:#fff;font-weight:900;font-size:min(5.4vmin,30px);text-align:left;padding:1vmin 1vmin 0;text-shadow:0 .5vmin 0 #7a3fd0,0 .8vmin 1.6vmin rgba(0,0,0,.35);letter-spacing:.03em}
#s-stories .st-sub:not(:first-child){margin-top:3vmin}
#s-stories .st-new{position:absolute;right:1vmin;top:1.2vmin;z-index:4;display:none;padding:.5vmin 1.6vmin;border-radius:3vmin;background:linear-gradient(#ff7aa2,#ff3d6e);color:#fff;font-weight:900;font-size:min(3.4vmin,17px);line-height:1.2;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 .4vmin 0 #b5203f,0 .6vmin 1.2vmin rgba(0,0,0,.3);rotate:6deg;animation:st-twinkle 2.4s ease-in-out infinite}
#s-stories .st-bk.new .st-new{display:block}
@media (orientation:landscape){#s-stories .st-new{font-size:min(2.8vmin,15px)}}
#s-stories .st-bk-t{overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}
@media (orientation:portrait) and (min-width:600px){#s-stories .st-grid{grid-template-columns:repeat(3,1fr)}}

/* 11.10 QA: вопросы не слипаются — колонка с отступом */
#s-stories .st-qs{display:flex;flex-direction:column;align-items:center;gap:2.2vmin;width:100%}
/* 11.10 QA: в альбомной (844x390) финал не влезал — кнопки «Ещё раз/Готово» уходили под край: вопросы в ряд, плотнее отступы */
@media (orientation:landscape){
 #s-stories .st-fin-in{gap:1.6vmin;padding-top:calc(2.4vmin + env(safe-area-inset-top));padding-bottom:calc(2.4vmin + env(safe-area-inset-bottom))}
 #s-stories .st-fin-title{font-size:min(7vmin,40px)}
 #s-stories .st-qs{flex-direction:row;gap:2.4vmin;width:min(100%,860px);justify-content:center;align-items:stretch}
 #s-stories .st-q{flex:1 1 0;min-width:0;width:auto;padding:1.8vmin 2.4vmin}
 #s-stories .st-rit{padding:1.8vmin 2.4vmin}
 #s-stories .st-big{height:14vmin;max-height:80px}
 #s-stories .st-fin-btns{margin-top:0}
}

/* ---------- 15.10 полировка: слой эффектов, блики, радуга, стоп-кадр (план agents/polish/stories_plan.md) ---------- */
#s-stories .st-fxl{position:absolute;inset:0;z-index:30;pointer-events:none;overflow:hidden}
#s-stories .st-flash,#s-stories .st-pulse,#s-stories .st-veil{position:absolute;inset:0;opacity:0;pointer-events:none}
#s-stories .st-flash{background:#fff}
#s-stories .st-veil{background:#fff}
#s-stories .st-pulse{background:radial-gradient(circle at 50% 50%,transparent 25%,var(--pc,#ffe27a) 130%)}
#s-stories .st-ringfx{position:absolute;width:16vmin;height:16vmin;margin:-8vmin 0 0 -8vmin;border:1.1vmin solid #ffd23f;border-radius:50%;opacity:0;pointer-events:none}
#s-stories .st-plus{position:absolute;font-weight:900;font-size:7vmin;-webkit-text-stroke:.7vmin #fff;paint-order:stroke fill;text-shadow:0 .5vmin 0 rgba(0,0,0,.18);opacity:0;pointer-events:none;white-space:nowrap}
#s-stories .st-say{position:absolute;left:calc(50% + 8vmin);top:calc(2vmin + env(safe-area-inset-top));font-weight:900;font-size:8vmin;color:#fff;-webkit-text-stroke:.9vmin #ff7a3d;paint-order:stroke fill;text-shadow:0 .8vmin 0 #c9531c,0 0 3vmin rgba(255,230,120,.9);white-space:nowrap;opacity:0;pointer-events:none}
#s-stories .st-say.rec{-webkit-text-stroke-color:#b26cff;text-shadow:0 .8vmin 0 #6a3fb8,0 0 3vmin rgba(255,230,120,.9)}
/* живая стена полки: блики */
#s-stories .st-glints{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#s-stories.st-open .st-glints{display:none}
#s-stories .st-glints i{position:absolute;width:4vmin;height:4vmin;margin:-2vmin 0 0 -2vmin;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,255,255,0) 70%);opacity:0;animation:st-gl 3s ease-in-out infinite}
@keyframes st-gl{50%{opacity:.65;scale:1.5}}
/* блик по обложке (подсказка по простою) */
#s-stories .st-bk:after{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:36%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));z-index:5;pointer-events:none;opacity:0;rotate:18deg}
#s-stories .st-bk.st-shine:after{animation:st-shine 1s ease-in-out}
@keyframes st-shine{0%{translate:0 0;opacity:0}20%{opacity:1}100%{translate:420% 0;opacity:0}}
/* радужная подложка финала: вращающийся конус под вопросами, ≤ 120vmax */
#s-stories .st-rb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:0}
#s-stories .st-rb i{position:absolute;left:50%;top:50%;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;border-radius:50%;opacity:.4;background:conic-gradient(#ff6f91,#ffb347,#ffe27a,#8ad86a,#6ab8ff,#c77dff,#ff6f91);animation:st-spin 7s linear infinite;-webkit-mask-image:radial-gradient(circle,transparent 8%,#000 60%,transparent 72%);mask-image:radial-gradient(circle,transparent 8%,#000 60%,transparent 72%)}
@keyframes st-spin{to{rotate:360deg}}
/* стоп-кадр ≤ 100 мс: замирают анимации (касания живы) */
#s-stories.st-hold *,#s-stories.st-hold *:before,#s-stories.st-hold *:after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){#s-stories .st-glints i,#s-stories .st-rb i,#s-stories .st-bk:after{animation:none}}