/* Picture-first leaves. Text flows into tap-through columns, never a scroll box. */
.reader-dialog{width:min(1460px,98vw);height:98dvh;max-height:98dvh;position:fixed}
.reader-top{min-height:52px;padding:4px 18px}
.reader-tools{padding:0 18px;min-height:44px}
.reader-panel-position{display:grid;gap:3px;min-width:0}
.reader-tools .reader-panel-position{display:flex;align-items:center;gap:8px}
#panel-count{font-size:10px;color:#718069;min-height:12px}
#panel-count:not(:empty){border-left:1px solid #d7ddca;padding-left:8px}
.book-spread{grid-template-columns:minmax(0,59%) minmax(0,41%);margin:0 12px 8px}
.picture-page img{object-position:center;object-fit:contain}
.picture-page{background:#ede9dc}
.text-page,.book-spread.text-only .text-page{position:relative;padding:0;overflow:hidden;scroll-padding:0;scrollbar-gutter:auto;scroll-behavior:auto;touch-action:manipulation}
.reader-flow{--leaf-inset:24px;width:calc(100% - var(--leaf-inset)*2);height:calc(100% - 40px);margin:20px var(--leaf-inset);column-count:1;column-gap:calc(var(--leaf-inset)*2);column-fill:auto;overflow:visible}
.reader-flow h2{font-size:26px;line-height:1.2;margin:0 0 15px;break-after:avoid}
.reader-flow #chapter-number{display:none}
.reader-flow .story-text{font-size:23px;line-height:1.65;overflow-wrap:anywhere}
.reader-flow .story-text.large{font-size:29px;line-height:1.65}
.reader-flow .word{box-decoration-break:clone;-webkit-box-decoration-break:clone}
#translation-toggle,#translation,#reader-hint{display:none!important}
.reader-flow .monthly-choice{break-before:column;break-after:column;break-inside:avoid;margin:0;padding:0;background:none;border:0;border-radius:0}
.reader-flow .monthly-choice h3{font:28px/1.2 var(--serif);margin:0 0 20px}
.reader-flow .monthly-choice .monthly-memory,.reader-flow .monthly-choice .small-note{display:none}
.reader-flow .story-path-choices{grid-template-columns:minmax(0,1fr);gap:12px;margin:14px 0;break-inside:avoid}
.reader-flow .story-path-choices button{min-height:52px;padding:14px 17px;font-size:16px;line-height:1.4;white-space:normal}
.reader-flow .story-ending{break-before:column;background:none;max-width:none;padding:0;margin:0;border-radius:0}
.reader-flow .story-ending h3{font-size:25px;line-height:1.25;margin:20px 0 12px;break-after:avoid}
.reader-flow .story-ending ul{padding-left:20px}
.reader-flow .story-ending li{font-size:16px;line-height:1.6;margin:10px 0;break-inside:avoid}
.reader-flow .story-ending button{white-space:normal;min-height:44px;max-width:100%}
.reader-flow .story-ending .small-note{font-size:12px;line-height:1.6}
.reader-bottom{padding:5px 16px 8px;min-height:62px;gap:10px}
.reader-bottom .playback{display:flex;flex-wrap:nowrap;gap:8px;grid-template-columns:none}
.reader-bottom .playback .primary-button{min-width:145px}
.reader-bottom #page-count{display:none}
.speech-status{position:absolute;bottom:75px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);max-height:80px;border-radius:10px;background:#fffef5f5;box-shadow:0 2px 12px #203d2a20;padding:10px 15px;font-size:12px;z-index:2;pointer-events:none}
.reader-option-list>.speed-label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border:1px solid #d9e1ce;border-radius:10px;font-size:14px}
.reader-option-list .speed-label select{min-width:0;width:165px;font-size:16px}
@media(max-width:1000px) and (min-width:701px){
 .book-spread{grid-template-columns:minmax(0,54%) minmax(0,46%)}
 .reader-flow{--leaf-inset:20px}
 .reader-flow .story-text{font-size:22px}
 .reader-flow .story-text.large{font-size:28px}
}
@media(orientation:portrait) and (max-width:1000px) and (min-width:701px){
 .book-spread{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,min(46dvh,64vw)) minmax(0,1fr)}
 .picture-page{border-bottom:1px solid #dfe3d5}
 .text-page{border-left:0}
 .book-spread.text-only{grid-template-rows:minmax(0,1fr)}
}
@media(max-width:700px){
 .reader-dialog{width:100vw;height:100dvh;max-height:100dvh}
 .reader-top{min-height:50px;padding:3px 9px}
 .reader-tools{padding:0 12px;min-height:42px}
 .reader-tools button{padding:7px 11px;min-height:40px;font-size:12px}
 .book-spread{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,min(40dvh,64vw)) minmax(0,1fr);margin:0 7px 3px}
 .picture-page{min-height:0}
 .reader-flow{--leaf-inset:19px;margin:16px var(--leaf-inset);height:calc(100% - 32px)}
 .reader-flow h2{font-size:21px;line-height:1.2;margin:0 0 12px}
 .reader-flow .story-text{font-size:22px;line-height:1.55}
 .reader-flow .story-text.large{font-size:28px;line-height:1.55}
 .reader-flow .monthly-choice h3{font-size:25px;margin:0 0 13px}
 .reader-flow .story-path-choices{gap:10px;margin:12px 0}
 .reader-flow .story-path-choices button{font-size:15px;line-height:1.35;padding:12px 14px;min-height:48px}
 .reader-flow .story-ending h3{font-size:23px;margin:14px 0 10px}
 .reader-flow .story-ending li{font-size:15px;margin:8px 0}
 .reader-bottom{min-height:60px;padding:5px 9px calc(5px + env(safe-area-inset-bottom));grid-template-columns:44px minmax(0,1fr) 44px}
 .reader-bottom .playback{gap:5px;justify-content:center}
 .reader-bottom .playback .primary-button{min-width:0;min-height:44px;padding:10px 13px;font-size:13px}
 .reader-bottom .playback #replay-button{font-size:12px;padding:8px;min-height:44px}
 .speech-status{bottom:72px;font-size:11px}
 .book-spread.text-only{grid-template-rows:minmax(0,1fr)}
}
@media(max-height:650px) and (orientation:portrait){
 .reader-dialog:has(.monthly-choice:not([hidden])) .book-spread{grid-template-rows:minmax(64px,min(27dvh,calc(100dvh - 410px))) minmax(0,1fr)}
 .book-spread.text-only{grid-template-rows:minmax(0,1fr)}
 .reader-flow h2{display:none}
 .reader-flow{margin:12px var(--leaf-inset);height:calc(100% - 24px)}
 .reader-flow .monthly-choice h3{font-size:23px;margin-bottom:10px}
 .reader-flow .story-path-choices{gap:8px;margin:10px 0}
 .reader-flow .story-path-choices button{padding:10px 12px;font-size:14px;min-height:44px}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 .reader-dialog{width:100vw;height:100dvh;max-height:100dvh}
 .reader-top{min-height:44px;padding:0 10px}
 .reader-tools{min-height:40px}
 .reader-tools button{min-height:36px;padding:5px 10px}
 .reader-panel-position{display:flex;align-items:center;gap:9px}
 .book-spread{grid-template-columns:minmax(0,52%) minmax(0,48%);grid-template-rows:minmax(0,1fr);margin:0 8px 2px}
 .reader-flow{--leaf-inset:17px;margin:10px var(--leaf-inset);height:calc(100% - 20px)}
 .reader-flow h2{display:none}
 .reader-flow .story-text{font-size:21px;line-height:1.5}
 .reader-flow .story-text.large{font-size:27px;line-height:1.5}
 .reader-flow .monthly-choice h3{font-size:21px;margin:0 0 9px}
 .reader-flow .story-path-choices{gap:7px;margin:8px 0}
 .reader-flow .story-path-choices button{font-size:14px;line-height:1.3;padding:9px 11px;min-height:44px}
 .reader-bottom{display:flex;min-height:54px;padding:3px 12px}
 .reader-bottom .playback{display:flex;flex:1;justify-content:center}
 .reader-bottom .playback .primary-button{min-width:130px}
}
@media(orientation:landscape) and (max-height:380px){
 .reader-dialog:has(.monthly-choice:not([hidden])) .book-spread{grid-template-columns:minmax(0,35%) minmax(0,65%)}
 .reader-flow .monthly-choice h3{font-size:20px;line-height:1.2;margin-bottom:7px}
 .reader-flow .monthly-choice .story-path-choices{gap:7px;margin:8px 0}
 .reader-flow .monthly-choice .story-path-choices button{font-size:13px;line-height:1.3;padding:8px 10px;min-height:44px}
}

/* Keep reading speed visible without adding another toolbar row. */
.reader-tools .reader-speed{display:flex;align-items:center;margin:0}.reader-speed select{min-height:40px;width:136px;font-size:16px;background:#eef2e5;border:1px solid #d6dfc9;border-radius:9px;padding:7px 9px;color:#315e50}.reader-speed .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:700px){.reader-tools .reader-panel-position{display:grid;gap:1px;min-width:0;flex-shrink:1}#panel-count:not(:empty){border-left:0;padding-left:0;font-size:9px;white-space:nowrap}.reader-tools>div{gap:4px}.reader-tools>div:last-child{flex-shrink:0}.reader-speed select{width:136px;font-size:16px;padding:7px 6px}.reader-tools #text-size,.reader-tools #reader-more{padding:7px 6px;white-space:nowrap}.reader-tools{gap:5px}}