/* 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:min(560px,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}}
/* Keep covers legible as the library grows; narrow shelves scroll horizontally. */
.shelf-book{flex:none}
@media(min-width:701px){.shelf-books{gap:40px}.shelf-book .cover{width:min(240px,calc((70dvh - 215px)*.62),calc((100vw - 200px)/4))}}
@media(max-width:700px){.shelf-books{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;padding:16px 16px 70px;gap:28px;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:thin;scrollbar-color:#d6b77d #173d34}.shelf-book{scroll-snap-align:start}.shelf-book .cover{width:min(225px,calc((70dvh - 210px)*.62),44vw);min-width:125px}.book-caption{white-space:normal}}
@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}}

/* Creator credit remains visible independently of the visitor threshold. */
body[data-view="library"] footer > :not(.visitor-count):not(.creator-credit){display:none}
body:not([data-view="library"]) .visitor-count{display:none}
body[data-view="library"] footer{position:fixed;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));height:auto;min-height:0;padding:0 16px;justify-content:center;text-align:center;background:transparent;pointer-events:none}
body[data-view="library"] .visitor-count:not([hidden]){display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;padding:10px 18px;border:1px solid #c8aa6b80;border-radius:999px;background:#163c32ed;color:#f5e5bb;box-shadow:0 5px 18px #071b1740;font-size:14px;line-height:1.6}
.visitor-count:before{content:"";flex:0 0 20px;width:20px;height:20px;background:currentColor;mask:url('/brand/visitor-book.svg') center/contain no-repeat;color:#d9ba7a}
body:has(.welcome-loader:not([hidden])) .visitor-count{visibility:hidden}
body:has(.welcome-loader[hidden]) .visitor-count:not([hidden]){animation:visitor-arrive .45s cubic-bezier(.16,1,.3,1) both}
@keyframes visitor-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){body:has(.welcome-loader[hidden]) .visitor-count:not([hidden]){animation:none}}
@media(max-width:400px){body[data-view="library"] .visitor-count:not([hidden]){font-size:13px;padding:9px 15px}}


footer .creator-credit{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:4px;line-height:1.5;font-size:11px;text-align:center}
.creator-credit a{display:inline-block;padding:5px 0;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;pointer-events:auto}
.creator-credit a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
body[data-view="library"] footer{flex-direction:column;gap:8px}
@media(max-width:540px){footer{gap:10px}footer .creator-credit{font-size:10px}.creator-credit a{padding:2px 0}}
/* The parent control keeps a 44px target beside the compact brand on small and landscape phones. */
@media(max-width:360px){.parent-control{padding:0 12px;font-size:13px}.parent-account{padding:0}}
@media(max-height:540px) and (orientation:landscape){.parent-slot{align-self:center}.shelf-note{margin-top:0;font-size:12px}}