/* The room is the stage. Reading controls stay outside the illustrated scene. */
body:has(.has-shelf),body.reader-active{background:#a48f70}
body:has(.has-shelf) .site-header,.reader-active .site-header{position:fixed;inset:0 0 auto;z-index:20;height:72px;max-width:none;border:0;padding:12px 26px;pointer-events:none;gap:12px;background:linear-gradient(#fff9e226,transparent)}
body:has(.has-shelf) .site-header>*,.reader-active .site-header>*{pointer-events:auto}
body:has(.has-shelf) .brand,.reader-active .brand{color:#fff1b6;text-shadow:0 2px 3px #3a281b80;flex:0 0 auto;margin-right:auto}
body:has(.has-shelf) .header-note,.reader-active .header-note{display:none}
body:has(.has-shelf) .quiet-button,.reader-active .quiet-button{background:#faf3df;border-color:#c0aa75;box-shadow:0 3px 7px #382b2b25;color:#302b40}
.has-shelf .shelf-stage{position:fixed;inset:0;height:100dvh;border-radius:0;z-index:0}
.round-navigation{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;min-width:48px;padding:0;border:0;border-radius:50%;background:url('/assets/public/ui/round.png') center/100% 100%;color:#6c5029;box-shadow:0 3px 8px #37251e30}
.round-navigation svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.round-navigation:disabled{opacity:.4;box-shadow:none}
.shelf-navigation{justify-content:center;gap:20px}
.shelf-navigation>span{min-width:125px;text-align:center}
.has-shelf .shelf-controls{position:fixed;left:24px;right:24px;bottom:max(12px,env(safe-area-inset-bottom));z-index:4;max-width:1100px;margin:auto;display:flex;flex-direction:column;gap:12px}
.has-shelf .books{position:static;gap:16px;margin:0;max-width:none}
.has-shelf .book-card{background:#fff7dfed;border:2px solid #c5ae77;border-radius:12px;box-shadow:0 5px 15px #31221826;color:#302b40}
.has-shelf .book-details{height:100%;display:flex;flex-direction:column;padding:12px 18px}
.has-shelf .book-details h2{font-size:20px;min-height:46px;margin-bottom:8px}
.has-shelf .book-bottom{margin-top:auto;padding-top:8px;flex-direction:row;border-color:#ccbe9e}
.has-shelf .book-meta{color:#716652;font-size:10px}.has-shelf .open-label{font-size:12px}
.has-shelf .shelf-navigation{position:static;margin:0}
.has-shelf #shelf-page{color:#fff4cf;text-shadow:0 1px 4px #36241a;font-size:13px}
.has-shelf .reading-note,body:has(.has-shelf) footer{display:none}
.has-shelf .library-notice{order:-1;margin:0;background:#fff8e8;color:#403c31;box-shadow:0 6px 20px #31262640;text-align:center}
.reader-active .reader{max-width:none;padding:0;height:100dvh}
.reader-active .reader-toolbar{position:fixed;top:77px;left:26px;right:26px;z-index:10;justify-content:flex-start;margin:0;gap:12px;pointer-events:none}
.reader-toolbar>*{pointer-events:auto}.reader-active .reader-book-title{display:none}
.reader-active .back-link{background:#fff5dc;color:#302b40;border:1px solid #c3ad7f;border-radius:99px;padding:4px 17px;box-shadow:0 3px 8px #30231c30}
.reader-active .open-book{position:fixed;inset:0;height:100dvh;min-height:0;display:block;border:0;border-radius:0;box-shadow:none;background:#be925a}
.reader-active .scene-panel{position:absolute;inset:0;height:100%;min-height:0;border-radius:0}
.reader-active .page-panel{position:absolute;left:3.5%;top:48%;transform:translateY(-50%);width:35%;max-width:480px;max-height:calc(100dvh - 270px);overflow:auto;margin:0;padding:35px 38px 28px;display:block;border:2px solid #d0b879;border-radius:10px;background:#fff4d7 url('/assets/public/textures/paper.jpg') center/cover;color:#302b40;box-shadow:0 10px 28px #34272748;scrollbar-width:thin;transition:opacity .25s ease,transform .3s ease}
.reader-active .page-panel:before,.reader-active .page-panel:after{content:'';position:absolute;width:58px;height:58px;background:url('/assets/public/ui/corner.png') center/contain no-repeat;pointer-events:none;opacity:.85}
.reader-active .page-panel:before{top:7px;left:7px}.reader-active .page-panel:after{right:7px;bottom:7px;transform:rotate(180deg)}
.reader-active .page-top{margin-bottom:12px}.reader-active .page-top .eyebrow{font-size:11px;color:#897040;letter-spacing:.14em}.reader-active .small-star{display:none}
.reader-active .page-panel h1{font-size:clamp(25px,2.3vw,34px);margin-bottom:20px;color:#6c5029}
.reader-active .story-text{font-size:clamp(21px,2.18vw,30px);line-height:1.6;margin-bottom:19px;font-weight:400}
.story-word{font:inherit;line-height:inherit;background:transparent;border:0;padding:1px 0;color:inherit;display:inline;white-space:normal;text-align:left;vertical-align:baseline;border-radius:5px;transition:background-color .12s,box-shadow .12s}
.story-word.linked-word{text-decoration:underline dotted #b39b68;text-underline-offset:7px;text-decoration-thickness:2px}
.story-word.highlight{background:#f5c75c;box-shadow:3px 3px 0 #b8883370,-2px 0 #f5c75c;color:#302718}
.word-hint{font-size:11px;color:#988458;letter-spacing:.03em;border-top:1px solid #cbb88466;padding-top:12px}
.reader-active .reader-dock{position:fixed;bottom:15px;left:auto;right:7%;transform:none;z-index:12;width:min(440px,50%);max-width:calc(100% - 24px);text-align:center;color:#473321}
.reader-transport{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:12px}
.reader-transport #next{grid-column:3}
.reader-active .audio-controls{justify-content:center;gap:10px;margin:0;min-width:0;flex-wrap:nowrap}
.reader-active .play-button{background:url('/assets/public/ui/pill.png') center/100% 100%;border:0;min-height:62px;width:auto;min-width:0;flex:1;color:#302b40;font-family:Baloo,Andika,sans-serif;font-size:22px;text-shadow:0 1px #fff;padding:12px 32px;filter:drop-shadow(0 4px 3px #39251940)}
.reader-active .play-button:active{background-image:url('/assets/public/ui/pill-pressed.png')}
.reader-active .repeat-button{display:block;width:44px;height:44px;flex:0 0 44px;background:url('/assets/public/ui/round.png') center/100% 100%;color:#70532d;border:0}
.reader-active .audio-track{max-width:240px;padding-top:0;margin:0 auto}.reader-active .audio-track input{height:12px;accent-color:#ad7530}.reader-active .audio-times{color:#5d452b;font-size:10px;text-shadow:0 1px #fff6c9}
.playback-status{font-size:11px;margin:0 auto 2px;padding:2px 9px;display:table;min-height:20px;background:#fff7ddce;border-radius:20px;color:#786445}
.reading-modes{display:flex;justify-content:center;gap:9px;margin-top:4px}
.reading-modes button,.room-tools button{font-size:12px;background:#fff4d7;border:1px solid #bfa36e;border-radius:99px;padding:6px 13px;color:#685236;box-shadow:0 2px 5px #39291c25;min-height:36px}
.reading-modes button[aria-pressed=true]{background:#c96c48;color:#fff7e9;border-color:#ad573a}
.reader-active .autoplay{justify-content:center;font-size:10px;margin:7px 0 0;color:#5c4327;text-shadow:0 1px #fff4d1;white-space:nowrap}
.reader-active .audio-error{background:#fff8e6;padding:5px;border-radius:7px;font-size:12px}
.reader-active .page-dots{position:fixed;top:20px;left:38%;right:34%;margin:0;pointer-events:auto}
.reader-active .page-dot:before{background:#fff0c67a}.reader-active .page-dot[aria-current=page]:before{background:#f3c964}
.reader-active .keyboard-note{display:none}.reader-active .scene-caption{left:55%;right:7%;bottom:220px}.reader-active .scene-status{top:125px;left:55%;right:7%}
.reader-active .scene-tag{display:none}.reader-active .scene-caption>span:last-child{background:#fff6d6d9;font-size:12px}
.room-view .page-panel{opacity:0;pointer-events:none;transform:translate(-30px,-50%)}
.room-view .scene-caption{display:none}.room-tools{position:fixed;left:20%;right:20%;bottom:225px;z-index:12;display:flex;justify-content:center;gap:8px}
.reader-active.large-text .story-text{font-size:32px}.reader-active.night .page-panel{background-image:linear-gradient(#202e42ed,#202e42ed),url('/assets/public/textures/paper.jpg');color:#f6ebd0}.reader-active.night .page-panel h1{color:#e4bd79}
@media(max-width:1000px){.reader-active .page-panel{left:3%;width:39%;padding:29px;max-height:calc(100dvh - 280px)}.reader-active .story-text{font-size:24px}.has-shelf .books{gap:13px}.has-shelf .book-details{padding:10px 12px}.has-shelf .book-details h2{font-size:19px}.has-shelf .book-meta{display:none}}
@media(max-width:760px){
  body:has(.has-shelf) .site-header,.reader-active .site-header{height:62px;padding:8px 14px;gap:7px}.reader-active .brand,body:has(.has-shelf) .brand{font-size:21px}.reader-active .theme-copy,body:has(.has-shelf) .theme-copy{display:none}.reader-active .quiet-button,body:has(.has-shelf) .quiet-button{min-height:38px;padding:6px 11px}
  .has-shelf .shelf-controls{left:12px;right:12px;gap:10px}.has-shelf .books{gap:7px}.has-shelf .book-details h2{font-size:16px;min-height:58px;overflow-wrap:anywhere}.has-shelf .book-details{padding:10px 8px}.has-shelf .open-label{font-size:11px}.has-shelf .library-notice{font-size:13px}
  .reader-active .reader-toolbar{top:68px;left:12px;right:12px;gap:7px}.reader-toolbar .quiet-button{font-size:11px}.reader-active .back-link{font-size:12px;padding:3px 10px}.reader-toolbar #font-size{margin-left:auto}.reader-toolbar #font-size>span:last-child{display:none}
  /* The dock occupies its own row; only the story panel scrolls. */
  body.reader-active{overflow:hidden}
  .reader-active .reader{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100dvh;min-height:0;overflow:hidden}
  .reader-active .open-book{position:relative;inset:auto;display:grid;grid-template-rows:clamp(190px,36dvh,330px) minmax(0,1fr);height:auto;min-height:0;padding:0 0 10px;background:#a88f66;border-radius:0;overflow:hidden}
  .reader-active .scene-panel{position:relative;inset:auto;height:auto;min-height:0;grid-row:1}
  .reader-active .page-panel{position:relative;inset:auto;transform:none;margin:0 12px;width:auto;min-height:0;max-width:none;max-height:none;padding:22px 23px;overflow:auto;overscroll-behavior:contain;scroll-padding:20px;grid-row:2}
  .reader-active .page-panel:focus-visible{outline:3px solid var(--focus);outline-offset:-4px}
  .reader-active .page-panel h1{font-size:25px;margin-bottom:12px}.reader-active .story-text{font-size:22px;line-height:1.6;margin-bottom:16px}.reader-active .page-panel:before,.reader-active .page-panel:after{width:43px;height:43px}.word-hint{font-size:10px}
  .reader-active .reader-dock{position:relative;inset:auto;width:100%;max-width:none;transform:none;padding:6px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#fff0cc;border-top:1px solid #bba16a}
  .reader-transport{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;max-width:440px;margin:auto}.reader-transport .round-navigation{width:44px;height:44px;min-width:44px}
  .reader-active .play-button{min-height:52px;font-size:20px;padding:10px 15px}.reader-active .reader-dock .audio-controls{gap:6px}.reader-active .audio-track{max-width:240px}.reader-active .autoplay{font-size:10px;margin-top:2px;min-height:30px;white-space:normal}.reading-modes{margin-top:2px}.reading-modes button{min-height:36px;padding:4px 12px;font-size:11px}.playback-status{font-size:10px;min-height:17px}
  .reader-active .page-navigation{display:none}.reader-active .scene-caption{left:16px;right:16px;bottom:10px}.reader-active .scene-caption>span:last-child{font-size:11px}.reader-active .scene-status{left:12%;right:12%;top:115px}
  .room-tools{position:absolute;top:130px;bottom:auto;left:12px;right:12px;gap:6px;flex-wrap:wrap}.room-tools button{font-size:11px}.room-view .page-panel{display:none}.room-view .scene-panel{height:100%;grid-row:1 / -1}.room-view .open-book{padding:0;background:transparent}

}
@media(min-width:761px) and (max-height:700px){.reader-active .page-panel{top:44%;padding:25px 30px;max-height:calc(100dvh - 240px)}.reader-active .story-text{font-size:23px}.reader-active .reader-toolbar{top:68px}.reader-active .reader-dock{bottom:7px}.reader-active .scene-caption{bottom:211px}}
@media(min-width:761px) and (max-height:500px){.reader-active .page-panel{top:128px;bottom:16px;transform:none;max-height:none}}
@media(max-width:760px) and (max-height:500px){
  body.reader-active{overflow:auto}
  .reader-active .reader{display:block;height:auto;min-height:100dvh;overflow:visible}
  .reader-active .open-book{grid-template-rows:240px auto;overflow:visible}
  .reader-active .page-panel{overflow:visible}
  .room-view .scene-panel{height:100dvh}
}
@media(prefers-reduced-motion:reduce){.reader-active .page-panel{transition:none}}