/* Touch, safe-area and compact-height refinements shared by preview and release. */
html{height:100%;background:#173d34}body{overscroll-behavior:none}button{touch-action:manipulation}.story-copy{overflow-wrap:break-word}.text-page{overscroll-behavior:contain}dialog{max-width:calc(100vw - 32px);max-height:calc(100dvh - 48px);overflow:auto}header{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}footer{bottom:env(safe-area-inset-bottom)}.chapter-dots{gap:0}.chapter-dot,.chapter-dot.active{width:32px;height:44px;border-radius:0;background:transparent;box-shadow:none}.chapter-dot:after{inset:auto;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#b9b09a;transform:translate(-50%,-50%)}.chapter-dot.active:after{background:#987847;box-shadow:0 0 0 3px #98784722}.round-button,header .sound,.scene-replay{min-width:44px;min-height:44px}.notes-button{min-height:32px}.reader-options{gap:8px}
@media(max-width:700px){#reader{height:calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding-bottom:4px}.reader-bar{gap:0;padding:4px 12px}.reader-options{min-height:44px}.play-button{height:44px}.chapter-dot,.chapter-dot.active{width:28px}.story-copy{font-size:clamp(15px,3.6vw,18px)}header{padding-top:env(safe-area-inset-top);height:calc(66px + env(safe-area-inset-top))}#library{top:calc(66px + env(safe-area-inset-top))}.text-page{scrollbar-width:thin}.auto-label{display:none}.cover-action{max-width:100%}}
@media(pointer:coarse){.chapter-dots{display:none}.reader-options{justify-content:center;gap:18px}.library-back{min-height:44px}.notes-button{min-height:44px}}
@media(max-width:360px){header{gap:6px;padding-left:12px;padding-right:12px}.brand{font-size:18px}.brand>svg{width:24px}.library-back{font-size:10px}.reader-bar{padding-inline:8px}.controls{gap:12px}.play-button{min-width:140px}.chapter-dots{display:none}.spread .text-page,.spread.reversed .text-page{padding:10px 14px}}
@media(max-height:540px) and (orientation:landscape){body{overflow-y:auto}header{height:52px;padding-top:0}#reader{height:auto;min-height:calc(100dvh - 90px);padding:8px 16px 84px}.reading-room{height:470px;width:min(720px,100%)}.reader-bar{position:fixed;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:12;flex-direction:row;flex-wrap:nowrap}.reader-options{display:none}footer{position:relative;height:40px}.story-copy{font-size:17px}#library{position:relative;inset:auto;height:510px}.bookshelf{bottom:125px}.shelf-book .cover{width:180px}.library-intro{top:12px}.library-footnote{bottom:22px}#cover-view{height:auto;min-height:480px;flex-direction:row;gap:35px}.selected-cover{width:200px}.cover-action{width:230px}.selected-cover .cover-lettering h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}.shelf-atmosphere *, .cover-sheen{animation:none!important}}
/* Reset the legacy centered brand so compact header controls never overlap. */
header .brand{position:static;transform:none;max-width:none;flex-shrink:0}header .library-back{margin-left:auto}
@media(max-width:360px){.library-back span{display:none}.library-back{width:44px;justify-content:center}.brand{font-size:18px}}

/* Hand-drawn Bengali lettering, served locally with the story. */
@font-face{font-family:StoryHand;src:url('../shared/fonts/Atma-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:StoryHand;src:url('../shared/fonts/Atma-Medium.ttf') format('truetype');font-weight:500 700;font-display:swap}
.brand,.library-intro h1,.cover-lettering h2,.selected-cover .cover-lettering h2,.welcome-card h1{font-family:StoryHand,Story,serif;font-weight:500}
.text-page h2{font-family:StoryHand,Story,serif!important;font-weight:500!important}
@font-face{font-family:BenSenHandwriting;src:url('../shared/fonts/BenSenHandwriting.ttf') format('truetype');font-weight:400;font-display:swap}
.story-copy{font-family:BenSenHandwriting,Friendly,sans-serif;font-weight:400;line-height:2}
/* Keep the instructions and tilted cover in the same flow. */
#library{display:flex;flex-direction:column;align-items:center;gap:52px;padding:24px 20px max(24px,calc(30dvh - 40px));overflow-y:auto}
.library-intro{position:relative;inset:auto;flex:none;margin:0;text-align:center}
.library-intro h1{line-height:1.5;margin:0 0 20px}
.library-intro p{margin:0;line-height:1.8}
.bookshelf{position:relative;inset:auto;flex:1 0 auto;width:100%;display:flex;align-items:flex-end;justify-content:center}
.shelf-books{width:100%}
.shelf-book .cover{width:min(240px,calc((70dvh - 215px)*.62),58vw);min-width:130px}
.library-footnote{position:relative;inset:auto;flex:none;margin:34px 0 -65px;text-align:center}
@media(max-width:700px){#library{gap:42px;padding-top:20px;padding-bottom:max(35px,calc(30dvh - 34px))}.library-intro h1{font-size:30px}.shelf-book .cover{width:min(225px,calc((70dvh - 210px)*.62),58vw)}.library-footnote{margin-top:32px}.story-copy{line-height:1.95}}
@media(max-height:540px) and (orientation:landscape){#library{height:auto;min-height:520px;padding:14px 20px 80px;gap:28px}.bookshelf{flex:none}.shelf-book .cover{width:155px}.library-footnote{margin:32px 0 0}}
/* Two cover hit areas must fit together, including their tilted page edges. */
@media(max-width:700px){.shelf-books{padding-inline:8px;gap:24px}.shelf-book .cover{width:min(225px,calc((70dvh - 210px)*.62),calc((100vw - 100px)/2));min-width:0}}
@media(max-height:540px) and (orientation:landscape){#library{height:calc(100dvh - 52px);min-height:0;padding:8px 24px 31.5dvh;gap:12px}.library-intro h1{font-size:24px;margin-bottom:2px}.library-intro p{font-size:12px}.bookshelf{flex:1 0 auto}.shelf-book .cover{width:min(155px,calc((70dvh - 125px)*.66));min-width:0}.shelf-book .cover-lettering h2,.shelf-book[data-book="ants"] .cover-lettering h2{font-size:16px}.shelf-book .cover-lettering p{font-size:7px}.book-caption{font-size:11px;top:calc(100% + 16px);gap:7px}.book-caption>span{width:25px;height:25px}.library-footnote{display:none}}

/* The site description belongs with the brand, above the bookshelf. */
header .brand-sub{display:block;max-width:190px;margin-top:6px;font-size:10px;font-weight:400;line-height:1.5;letter-spacing:0;white-space:normal}
@media(max-width:540px){header .brand-sub{max-width:155px;font-size:9px}.library-back span{display:none}.library-back{width:44px;justify-content:center}}