/* Layout: a wooden bookshelf on a Bosphorus-night wall; a picked book flies off the shelf and becomes a full-screen picture book that turns from its left edge. One deliberate warm look; no dark/light switch. */
:root{
  --desk:#0f2f36;
  --desk-glow:#1d4c55;
  --paper:#fbf2df;
  --paper-edge:#e9d9b8;
  --ink:#3b2414;
  --teal:#1f5d63;
  --mustard:#c9962f;
  --gold:#f3d48a;
  --ru:#24555c;
  --red:#b8432e;
  --wood-hi:#a86d39;
  --wood:#7c4a22;
  --wood-dk:#3a2414;
  --f-display:"Lobster","Georgia",serif;
  --f-story:"Andika","Trebuchet MS","Verdana",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:radial-gradient(120% 90% at 50% 35%,var(--desk-glow),var(--desk) 72%) fixed var(--desk);color:var(--ink);
  font-family:var(--f-story);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
button{font:inherit}
button:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}

/* ---------- shelf ---------- */
.shelf{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,3.2vh,30px);
  padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sh-head{text-align:center}
.sh-head h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(34px,9vmin,76px);text-wrap:balance;line-height:1;color:var(--paper);
  text-shadow:0 4px 18px rgba(0,0,0,.35)}
.sh-head p{margin:.25em 0 0;font-size:clamp(16px,3.4vmin,26px);color:var(--gold);letter-spacing:.08em}
.pick{margin:0;color:var(--paper);opacity:.75;font-size:clamp(14px,2.8vmin,20px);text-align:center}
.add-home{appearance:none;border:0;cursor:pointer;background:var(--mustard);color:var(--desk);font-weight:700;font-size:clamp(14px,2.6vmin,18px);
  padding:10px 20px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
/* inside Telegram full screen, keep clear of Telegram's own close/menu buttons */
.tg .shelf{padding-top:calc(max(16px,env(safe-area-inset-top,0px),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px))}

.case{--rowH:min(44vh,340px,64vw);position:relative;padding:calc(var(--rowH)*.13) calc(var(--rowH)*.16) 0;
  background:
    radial-gradient(70% 55% at 50% 0%,rgba(255,206,120,.28),rgba(255,206,120,0) 70%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 2px,rgba(0,0,0,0) 2px calc(var(--rowH)*.32)),
    linear-gradient(#4a2e18,var(--wood-dk));
  border:calc(var(--rowH)*.045) solid var(--wood);border-bottom:0;border-radius:12px 12px 0 0;
  box-shadow:inset 0 calc(var(--rowH)*.08) calc(var(--rowH)*.12) rgba(0,0,0,.45),0 30px 60px rgba(0,0,0,.45)}
.row{position:relative;display:flex;align-items:flex-end;gap:calc(var(--rowH)*.022);height:var(--rowH)}
.board{position:relative;height:calc(var(--rowH)*.085);margin:0 calc(var(--rowH)*-.205);border-radius:4px;
  background:linear-gradient(var(--wood-hi),var(--wood) 55%,#5a3416);box-shadow:0 12px 20px rgba(0,0,0,.45)}

.spine{appearance:none;border:0;padding:0;cursor:pointer;position:relative;flex:none;container-type:size;
  height:calc(var(--rowH)*var(--h));width:calc(var(--rowH)*.19*var(--w));color:var(--paper);
  background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(0,0,0,0) 16%,rgba(255,255,255,.2) 30%,rgba(255,255,255,0) 52%,rgba(0,0,0,.28)),var(--c);
  border-radius:5px 5px 2px 2px;box-shadow:3px 0 5px rgba(0,0,0,.35);transform-origin:50% 100%;
  transition:transform .25s ease;animation:arrive .7s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i)*70ms)}
.spine:active{transform:translateY(-3%)}
@media (hover:hover){.spine:hover{transform:translateY(-4%)}}
.spine.lean{margin-left:calc(var(--rowH)*.14);transform-origin:0 100%;transform:rotate(-9deg)}
@media (hover:hover){.spine.lean:hover{transform:rotate(-9deg) translateY(-4%)}}
@keyframes arrive{from{transform:translateY(-14%)}}
.spine.lean{animation:none}
.spine .band{position:absolute;left:0;right:0;height:2.2cqh;background:var(--band);opacity:.9;box-shadow:0 -1px 0 rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.25)}
.spine .band.b1{top:6cqh}.spine .band.b2{bottom:6cqh}
.spine .medal{position:absolute;left:50%;top:12cqh;width:72cqw;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 5cqw var(--band),0 2px 4px rgba(0,0,0,.4)}
.spine .medal img{width:100%;height:100%;object-fit:cover;display:block}
.spine .st{position:absolute;left:0;right:0;top:calc(14cqh + 82cqw);bottom:12cqh;display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;font-family:var(--f-display);font-size:38cqw;line-height:1;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.spine.soon .st{top:14cqh;font-family:var(--f-story);font-weight:700;font-size:26cqw;letter-spacing:.12em;opacity:.7}
.spine.wiggle{animation:wiggle .5s ease}
.spine.lean.wiggle{animation:wiggleLean .5s ease}
@keyframes wiggle{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes wiggleLean{25%{transform:rotate(-12deg)}75%{transform:rotate(-6deg)}}
.spine.taken{visibility:hidden}
.spine.back{animation:slideIn .6s cubic-bezier(.3,1.3,.5,1)}
@keyframes slideIn{from{transform:translateY(-18%) scale(1.06)}}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%);z-index:60;
  background:var(--paper);color:var(--ink);font-weight:700;padding:10px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:17px}

/* ---------- flying book ---------- */
.fly-layer{position:fixed;inset:0;pointer-events:none;z-index:40;perspective:1800px}
.flyer{position:absolute;transform-style:preserve-3d;will-change:transform}
.flyer .f-front,.flyer .f-spine{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flyer .f-front{inset:0;transform:translateZ(calc(var(--d)/2));border-radius:calc(var(--u)*.5) calc(var(--u)*1) calc(var(--u)*1) calc(var(--u)*.5);
  overflow:hidden;background:var(--paper);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.flyer .f-spine{top:0;height:100%;width:var(--d);left:calc(50% - var(--d)/2);transform:rotateY(-90deg) translateZ(calc(var(--bw)/2))}
.flyer .f-spine .spine{width:100%;height:100%;animation:none;transform:none;margin:0}

/* ---------- reader ---------- */
/* Reader sizing is pure CSS so it never waits for the phone to report a rotation.
   --W/--H: the reader's own width/height. On a phone held upright the reader is drawn
   turned 90° (landscape), so the child only has to turn the phone. */
:root{
  --vh:100vh;
  --W:100vw;--H:var(--vh);
  --padL:max(12px,env(safe-area-inset-left,0px));--padR:max(12px,env(safe-area-inset-right,0px));
  --padT:max(4px,env(safe-area-inset-top,0px));--padB:max(4px,env(safe-area-inset-bottom,0px));
  --u:min(calc((var(--W) - var(--padL) - var(--padR) - 64px) / 104), calc((var(--H) - var(--padT) - var(--padB) - 4px) / 70.7));
}
@supports (height:100dvh){:root{--vh:100dvh}}
@media (orientation:portrait) and (max-width:599px){
  :root{--W:var(--vh);--H:100vw;
    --padL:calc(max(10px,env(safe-area-inset-top,0px),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px));
    --padR:max(10px,env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px));--padT:4px;--padB:4px}
}
@media (orientation:landscape){
  :root{--padL:max(12px,env(safe-area-inset-left,0px),var(--tg-safe-area-inset-left,0px));
    --padR:max(12px,env(safe-area-inset-right,0px),var(--tg-safe-area-inset-right,0px))}
}
@media (orientation:portrait) and (min-width:600px){
  :root{--u:min(calc((var(--W) - var(--padL) - var(--padR) - 8px) / 104), calc((var(--H) - var(--padT) - var(--padB) - 64px) / 70.7))}
}
.reader{position:fixed;inset:0;z-index:30;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%,var(--desk-glow),var(--desk) 70%) var(--desk)}
.reader.prep{opacity:0}
.r-wrap{position:absolute;left:0;top:0;width:var(--W);height:var(--H);display:flex;flex-direction:row;align-items:center;gap:8px;
  padding:var(--padT) var(--padR) var(--padB) var(--padL)}
@media (orientation:portrait) and (max-width:599px){
  .r-wrap{transform-origin:0 0;transform:translateX(100vw) rotate(90deg)}
}
@media (orientation:portrait) and (min-width:600px){
  .r-wrap{flex-direction:column}
  .r-wrap .bar{flex-direction:row}
}
.r-stage{flex:1;min-width:0;min-height:0;align-self:stretch;display:grid;place-items:center;touch-action:none}
.bar{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--paper);font-size:15px}
.bar button{appearance:none;border:0;background:rgba(251,242,223,.14);color:var(--paper);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none}
.bar button:disabled{opacity:.3}
.bar svg{width:20px;height:20px}
#home{background:var(--mustard);color:var(--desk)}
.count{min-width:56px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.04em;opacity:.85}

.book{--lk:0;--rk:0;--ls:calc(var(--u)*var(--lk));--rs:calc(var(--u)*var(--rk));position:relative;width:calc(var(--u)*100);height:calc(var(--u)*70.7);perspective:calc(var(--u)*260)}
/* page stacks: already-read pages on the left, unread pages on the right */
.book::before,.book::after{content:"";position:absolute;top:calc(var(--u)*.35);bottom:calc(var(--u)*.35);z-index:0;
  background:repeating-linear-gradient(90deg,#fffaf0 0 2px,#d9c7a2 2px 3px);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:width .3s ease}
.book::before{left:calc(var(--ls)*-1);width:var(--ls);border-radius:6px 0 0 6px}
.book::after{right:calc(var(--rs)*-1);width:var(--rs);border-radius:0 6px 6px 0}
.leaf{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;visibility:hidden;z-index:1}
.leaf.show{visibility:visible}
.leaf.top{z-index:3}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper);
  border-radius:calc(var(--u)*.5) calc(var(--u)*1) calc(var(--u)*1) calc(var(--u)*.5);overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.face::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--u)*4);background:linear-gradient(90deg,rgba(80,50,20,.18),rgba(80,50,20,0));z-index:5;pointer-events:none}
.face.back{transform:rotateY(180deg);background:linear-gradient(270deg,var(--paper),var(--paper-edge))}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,20,5,0),rgba(40,20,5,.35));opacity:0;pointer-events:none;z-index:6}
.leaf.out{animation:out .95s cubic-bezier(.45,.05,.3,1) forwards}
.leaf.in{animation:in .95s cubic-bezier(.45,.05,.3,1) forwards}
.leaf.out .front .shade{animation:shadeOn .95s forwards}
.leaf.in .front .shade{animation:shadeOff .95s forwards}
/* the turned page lies down onto the left stack instead of vanishing */
@keyframes out{0%{transform:rotateY(0)}55%{transform:rotateY(-110deg) scaleX(.85)}100%{transform:rotateY(-180deg) scaleX(.012)}}
@keyframes in{0%{transform:rotateY(-180deg) scaleX(.012)}45%{transform:rotateY(-110deg) scaleX(.85)}100%{transform:rotateY(0)}}
@keyframes shadeOn{to{opacity:1}}
@keyframes shadeOff{from{opacity:1}to{opacity:0}}

.story{display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--u)*3)}
.art{position:relative;width:calc(var(--u)*89);height:calc(var(--u)*59.33);border-radius:calc(var(--u)*1.2);overflow:hidden;flex:none;
  box-shadow:0 0 0 calc(var(--u)*.25) var(--paper-edge),0 calc(var(--u)*.4) calc(var(--u)*1.2) rgba(60,35,10,.25)}
.art img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}
.tr{position:absolute;background:rgba(253,247,233,.9);border-radius:calc(var(--u)*1.6);
  padding:calc(var(--u)*1.1) calc(var(--u)*1.7);color:var(--ink);font-weight:700;font-size:calc(var(--u)*2.05*var(--fs,1));line-height:1.36;
  box-shadow:0 0 0 calc(var(--u)*.22) rgba(201,150,47,.6),0 calc(var(--u)*.5) calc(var(--u)*1.4) rgba(60,30,10,.2);text-wrap:pretty}
.tr::first-letter{font-family:var(--f-display);font-weight:400;color:var(--teal);font-size:1.45em;line-height:1}
.big{font-family:var(--f-display);font-weight:400;color:var(--red);font-size:1.5em;letter-spacing:.02em}
.strip{flex:1;width:calc(var(--u)*89);display:flex;align-items:center;justify-content:center;position:relative}
.ru{max-width:calc(var(--u)*76);text-align:center;color:var(--ru);font-size:calc(var(--u)*1.8);line-height:1.32;text-wrap:balance}
.num{position:absolute;right:0;top:50%;transform:translateY(-50%);width:calc(var(--u)*3.4);height:calc(var(--u)*3.4);border-radius:50%;
  display:grid;place-items:center;background:var(--teal);color:var(--paper);font-family:var(--f-display);font-size:calc(var(--u)*1.7)}
.orn{position:absolute;left:0;top:50%;width:calc(var(--u)*5);height:2px;background:linear-gradient(90deg,var(--mustard),transparent)}

.cover img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.title{position:absolute;left:0;right:0;top:calc(var(--u)*3.2);text-align:center;z-index:2}
.title h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:calc(var(--u)*9);line-height:1;color:var(--teal);
  text-shadow:0 0 calc(var(--u)*1.2) var(--paper),0 0 calc(var(--u)*.3) var(--paper)}
.title p{margin:calc(var(--u)*.6) 0 0;font-weight:700;font-size:calc(var(--u)*3.1);color:#8a5a1c;letter-spacing:.03em;text-shadow:0 0 calc(var(--u)*.8) var(--paper)}
.ribbon{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:calc(var(--u)*1.4) calc(var(--u)*4);text-align:center;
  background:linear-gradient(0deg,rgba(15,47,54,.88),rgba(15,47,54,.7));color:var(--paper);font-size:calc(var(--u)*2.2)}
.ribbon b{font-family:var(--f-display);font-weight:400;font-size:1.35em;color:var(--gold);margin-right:.35em}
.hint{position:absolute;right:calc(var(--u)*2.2);top:46%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.4);
  color:var(--paper);font-weight:700;font-size:calc(var(--u)*1.5);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.hint i{width:calc(var(--u)*5.4);height:calc(var(--u)*5.4);border-radius:50%;background:var(--mustard);display:grid;place-items:center;
  box-shadow:0 0 0 calc(var(--u)*.5) rgba(251,242,223,.55);animation:pulse 1.8s ease-in-out infinite}
.hint svg{width:45%;height:45%}
@keyframes pulse{50%{transform:translateX(calc(var(--u)*.8));box-shadow:0 0 0 calc(var(--u)*1) rgba(251,242,223,.25)}}
.flyer .hint{display:none}

.end{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2.2);text-align:center}
.end .medal{width:calc(var(--u)*30);height:calc(var(--u)*20);border-radius:50%;overflow:hidden;box-shadow:0 0 0 calc(var(--u)*.5) var(--mustard),0 0 0 calc(var(--u)*1.1) var(--paper-edge)}
.end .medal img{width:100%;height:100%;object-fit:cover}
.end h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:calc(var(--u)*6.5);color:var(--teal);line-height:1}
.end h3 span{color:var(--mustard)}
.note{max-width:calc(var(--u)*62);display:grid;gap:calc(var(--u)*1)}
.note p{margin:0;font-size:calc(var(--u)*1.9);line-height:1.4}
.note p+p{color:var(--ru);font-size:calc(var(--u)*1.65)}
.ded .medal{width:calc(var(--u)*22);height:calc(var(--u)*15)}
.ded h3{font-size:calc(var(--u)*7.5)}
.ded .note p{font-size:calc(var(--u)*2.2);font-style:italic}
.ded .note p+p{font-size:calc(var(--u)*1.95)}

.rotate{position:absolute;inset:0;z-index:20;transition:opacity .4s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(15,47,54,.96);color:var(--paper);text-align:center;padding:24px}
.rotate p{margin:0;font-size:22px;font-weight:700}
.rotate p[lang="ru"]{font-size:18px;font-weight:400;color:var(--gold)}
.phone{width:54px;height:92px;border:4px solid var(--paper);border-radius:12px;margin-bottom:18px;position:relative;animation:turn 2.4s ease-in-out infinite}
.phone span{position:absolute;left:50%;bottom:6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--paper)}
@keyframes turn{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}

@media (prefers-reduced-motion:reduce){
  .leaf.out{animation:fadeOut .4s forwards}.leaf.in{animation:fadeIn .4s forwards}
  @keyframes fadeOut{to{opacity:0}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .spine{animation:none}.hint i,.phone{animation:none}
}