/* Art-directed from Kevin's samplebook.jpg; all reading content stays live. */
body {background:#754321 url('/assets/reader/reference-room-v1.webp') center/cover fixed;}
#reader-wrapper {background:transparent;}
#reader {--reader-ui-height:156px;width:min(1180px,calc(100% - 112px));margin:20px auto 0;padding:0 0 18px;background:transparent;grid-template-columns:1fr auto 1fr;column-gap:16px;}
#reader #book-frame {position:relative;isolation:isolate;justify-self:center;width:min(100%,max(640px,calc((100dvh - var(--reader-ui-height))*2.025287)));margin:0;min-height:0;height:auto;aspect-ratio:1762/870;border:0;border-radius:0;background:url('/assets/reader/reference-hardcover-v1.webp') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 12px 7px #27180d6b);}
#reader #book-frame::before,#reader #book-frame::after,#reader #text-panel::after,#reader #illustration-panel::before,.book-ribbon {display:none;}
#reader #book-frame #text-panel,#reader #book-frame #illustration-panel {border:0;border-radius:0;box-shadow:none;background:transparent;min-height:0;}
#reader #book-frame #text-panel {justify-content:center;padding:12% 8% 49% 28%;}
#reader #story-text {--passage-height:230px;min-height:0;padding:0;position:relative;z-index:2;}
#reader #story-text .sentence {padding:0;}
#reader #story-text .word {padding:0;}
#reader #book-frame #story-text,#reader #book-frame #story-text .sentence {color:#35291f;}
#reader #book-frame #illustration-panel {padding:12% 29% 27% 3%;overflow:hidden;}
#reader #page-illustration {width:100%;height:100%;max-height:none;object-fit:contain;border-radius:0;box-shadow:none;clip-path:none;}
#reader #action-buttons {grid-column:1;grid-row:2;justify-self:start;align-self:center;flex-wrap:nowrap;gap:8px;padding:0;margin:0;}
#reader #action-buttons .action-btn,#reader #btn-practice-words,#reader #reading-tools-open {border-radius:24px!important;box-shadow:0 2px 5px #34200c26;font-size:16px!important;padding:8px 12px!important;background:#fff1d9!important;color:#49351f!important;}
#reader #action-buttons .action-btn .label {font-size:16px!important;}
#reader #page-dots-container {grid-column:2;grid-row:2;align-self:center;flex-wrap:nowrap;gap:10px;margin:0;min-height:48px;}
#reading-position {white-space:nowrap;color:#fff6e4;font-size:16px;text-shadow:0 1px 3px #402511;}
.edge-arrow,.edge-arrow.hidden {min-width:44px;width:44px;height:44px;border-radius:50%;box-shadow:0 2px 5px #34200c26;background:#fff1d9;}
#reader .book-companion {position:absolute;grid-area:auto;right:-48px;bottom:48px;z-index:8;width:164px;height:190px;min-height:0;margin:0;display:block;pointer-events:none;}
#reader .book-companion .character-companion {position:relative;display:block;width:100%;height:100%;padding:0;margin:0;}
#reader .book-companion .genie-svg {position:absolute;bottom:5px;right:0;width:164px!important;height:180px!important;z-index:2;filter:drop-shadow(2px 4px 2px #4f30134d);}
#reader .book-companion [data-character="genie"] .genie-svg {scale:-1 1;}
/* The fixed introductory caption is not contextual help and crowds the scene. */
#reader .book-companion .companion-caption {display:none;}
#reader .book-companion .character-companion[data-character="owl"]::before {content:'';position:absolute;left:-9px;bottom:-7px;width:182px;height:61px;background:url('/assets/reader/owl-perch-v1.webp') center/contain no-repeat;z-index:1;}
#reader .book-companion .character-companion[data-character="genie"]::before {content:'';position:absolute;left:22px;bottom:1px;width:118px;height:18px;background:radial-gradient(ellipse,#41201650,transparent 70%);}
#reader:is(.page-turning-left,.page-turning-right,.page-entering-left,.page-entering-right) #book-frame {animation:none;}
.book-page-curl {position:absolute;right:6%;bottom:16%;width:90px;height:90px;z-index:6;pointer-events:none;opacity:0;transform-origin:bottom right;border-radius:0 0 12px 0;background:linear-gradient(135deg,transparent 48%,#96734766 49%,#fff9e9 52%,#ead4ac 80%,#b59466);clip-path:polygon(100% 0,100% 100%,0 100%);}
#reader.page-turning-left .book-page-curl {animation:paper-curl-forward .35s ease-in both;}
#reader.page-entering-left .book-page-curl {animation:paper-settle .35s ease-out both;}
#reader.page-turning-right .book-page-curl {right:auto;left:6%;transform-origin:bottom left;animation:paper-curl-back .35s ease-in both;}
#reader.page-entering-right .book-page-curl {right:auto;left:6%;transform-origin:bottom left;animation:paper-settle-back .35s ease-out both;}
@keyframes paper-curl-forward {from{opacity:0;transform:scale(.25);}to{opacity:.95;transform:scale(1.6);}}
@keyframes paper-settle {from{opacity:.8;transform:scale(1.6);}to{opacity:0;transform:scale(.25);}}
@keyframes paper-curl-back {from{opacity:0;transform:scaleX(-1) scale(.25);}to{opacity:.95;transform:scaleX(-1) scale(1.6);}}
@keyframes paper-settle-back {from{opacity:.8;transform:scaleX(-1) scale(1.6);}to{opacity:0;transform:scaleX(-1) scale(.25);}}
html[data-theme="dark"] #reader-wrapper {background:#15131099;}
html[data-theme="dark"] #reader #book-frame {background-image:linear-gradient(#17120a66,#17120a66),url('/assets/reader/reference-hardcover-v1.webp');background-blend-mode:multiply;}
html[data-theme="dark"] #reader #book-frame #story-text,html[data-theme="dark"] #reader #book-frame #story-text .sentence {color:#fff6e5;text-shadow:0 1px 2px #23170a;}
@media(min-width:701px) and (max-width:1100px) {
 #reader {--reader-ui-height:208px;width:calc(100% - 72px);grid-template-columns:1fr auto;}
 #reader #book-frame {min-height:0;}
 #reader #book-frame #text-panel {padding:12% 8% 49% 28%;}
 #reader #story-text {font-size:23px;line-height:1.65;}
 #reader .book-companion {right:-28px;bottom:32px;width:124px;height:146px;}
 #reader .book-companion .genie-svg {width:124px!important;height:138px!important;}
 #reader .book-companion .character-companion[data-character="owl"]::before {width:138px;height:46px;left:-6px;bottom:-5px;}
}
@media(max-width:700px) {
 #reader-wrapper {background:#4c2c1029;}
 #reader {width:calc(100% - 40px);margin-top:16px;display:flex;gap:0;}
 #reader #book-frame {width:100%;aspect-ratio:auto;min-height:0;margin:0 0 22px;background:#fbefd7;border:7px solid #185052;border-bottom-width:12px;border-radius:10px;box-shadow:inset 0 0 0 1px #bd994e,0 2px 0 #e5c994,0 4px 0 #97794e,0 6px 0 #e8d7b7,0 10px 12px #29190866;filter:none;}
 #reader #book-frame #illustration-panel {position:relative;height:200px;padding:12px 18px 6px;background:linear-gradient(90deg,#e5d1ad,#fff5e1 20%,#f7e9ce);border-radius:3px 3px 0 0;}
 #reader #page-illustration {height:100%;width:100%;object-fit:contain;clip-path:none;border-radius:5px;}
 #reader #book-frame #text-panel {padding:28px 20px 20px;background:linear-gradient(90deg,#e5d1ad,#fff5e1 10%,#f7e9ce 90%,#e0c89f);border-radius:0 0 3px 3px;}
 #reader #story-text {--passage-height:215px;font-size:22px;line-height:1.65;}
 #reader #action-buttons {width:100%;justify-content:center;flex-wrap:wrap;gap:6px;}
 #reader #page-dots-container {flex:none;width:100%;margin:10px 0 0;gap:12px;flex-wrap:nowrap;}
 #reader .book-companion {right:-14px;top:116px;bottom:auto;width:92px;height:104px;}
 #reader .book-companion .genie-svg {width:92px!important;height:100px!important;bottom:0;}
 #reader .book-companion .character-companion[data-character="owl"]::before {width:104px;height:35px;left:-6px;bottom:-7px;}
 #reader .book-companion .character-companion[data-character="genie"]::before {width:70px;left:12px;bottom:0;}
 .book-page-curl {bottom:0;right:0;}
 html[data-theme="dark"] #reader #book-frame {background:#31271c;}
 html[data-theme="dark"] #reader #book-frame #text-panel {background:#31271c;}
 html[data-theme="dark"] #reader #book-frame #illustration-panel {background:#493925;}
}
@media(max-width:360px) {
 #reader #book-frame #illustration-panel {height:170px;padding:10px 12px 5px;}
 #reader #book-frame #text-panel {padding:26px 16px 18px;}
 #reader #story-text {font-size:21px;}
 #reader .book-companion {top:87px;}
}
@media(prefers-reduced-motion:reduce) {#reader .book-page-curl {display:none;animation:none!important;}}

/* A matching right-hand group; media availability is explained inside the tool. */
.story-extras {grid-column:3;grid-row:2;display:flex;align-items:center;justify-content:flex-end;gap:8px;align-self:center;}
.story-extras button {min-height:44px;border:1px solid #bca079;border-radius:24px;padding:8px 14px;font:16px system-ui;background:#fff1d9;color:#49351f;box-shadow:0 2px 5px #34200c26;}
.story-extras-dialog {width:min(820px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #b49560;border-radius:12px;background:#fff9ee;color:#382d23;}
.story-extras-dialog[open] {display:flex;flex-direction:column;}
.story-extras-dialog::backdrop {background:#20170eb3;}
.story-extras-dialog header {padding:10px 16px;border-bottom:1px solid #decbaa;flex-shrink:0;}
.story-extras-dialog h2 {font:600 20px Georgia,serif;margin:0;}
.story-extras-body {padding:12px 16px;overflow:auto;min-height:0;}
.story-extras-body p {font:16px/1.5 system-ui;margin:8px 0;}
.story-extras-dialog footer {display:flex;justify-content:flex-end;padding:8px 12px;border-top:1px solid #decbaa;flex-shrink:0;}
.story-extras-dialog button {min-height:44px;border:1px solid #b49560;border-radius:9px;background:#fff3d9;color:#382d23;font:16px system-ui;padding:8px 14px;}
.story-extras-dialog button:disabled {opacity:.45;cursor:default;}
.story-extra-picture {display:block;max-width:100%;max-height:calc(100dvh - 230px);margin:0 auto;object-fit:contain;}
.story-extra-picture[hidden] {display:none;}
.story-picture-navigation {display:flex;justify-content:center;align-items:center;gap:12px;}
.story-picture-navigation button {min-width:44px;font-size:24px;padding:0;}
.story-extra-item {width:100%;display:flex;flex-direction:column;text-align:left;gap:5px;margin-bottom:8px;}
.story-extra-item span {font-size:14px;}
@media(min-width:701px) and (max-width:1100px) {.story-extras {grid-column:1/-1;grid-row:3;justify-content:center;margin-top:8px;}}
@media(max-width:700px) {.story-extras {order:-1;width:100%;justify-content:center;margin:0 0 10px;position:sticky;top:0;z-index:10;padding:4px 0;background:#fff1d9;border-radius:12px;}.story-extras button {padding:8px 12px;}.story-extras-body {padding:10px;}}
/* Page edges remain clear of the picture and reading passage. */
.page-media {position:absolute;left:3%;right:29%;bottom:17%;display:flex;justify-content:center;gap:8px;z-index:6;}
#reader .page-media button {position:static;display:inline-flex;gap:6px;align-items:center;justify-content:center;min-height:44px;width:auto;height:auto;padding:6px 10px;border:1px solid #98733f;border-radius:12px;background:#fff4df;color:#513c24;font:16px system-ui;animation:none;box-shadow:0 2px 5px #382c2222;}
#reader .page-media svg {width:20px;height:20px;flex-shrink:0;}
@media(max-width:700px){
 #reader #book-frame #illustration-panel {height:250px;padding-bottom:60px;}
 .page-media {left:6px;right:6px;bottom:8px;}
 #reader .page-media button {font-size:14px;padding:6px 8px;}
}
#reader #book-frame > .edge-arrow {position:absolute;top:45%!important;bottom:auto!important;z-index:5;transform:translateY(-50%);}
#reader #book-frame > #btn-prev-edge {left:5%;}
#reader #book-frame > #btn-next-edge {right:4%;}
#reader #book-frame > .edge-arrow.hidden {visibility:hidden;pointer-events:none;}
@media(max-width:700px){
 #reader #book-frame > .edge-arrow {top:auto!important;bottom:-18px!important;transform:none;}
 #reader #book-frame > #btn-prev-edge {left:-12px;}
 #reader #book-frame > #btn-next-edge {right:-12px;}
}