/* Gelli Belle V61 — consistent facing-page phone reading (all orientations).
 * Only the front/back covers are solo. Fullscreen uses one continuous two-page
 * sheet; in portrait the sheet pans horizontally instead of shrinking the type.
 * IMPORTANT: loaded LAST to override the older, conflicting mobile versions. */
html.gb61-phone .app:not(:fullscreen):not(.focus-mode) .book[data-layout="spread"] {
  display:flex!important; flex:0 1 auto!important;
  width:min(95vw, 990px)!important; max-width:95vw!important;
  height:auto!important; max-height:none!important;
  aspect-ratio:calc(2*var(--page-ratio))!important;
  overflow:hidden!important;
}
html.gb61-phone .app:not(:fullscreen):not(.focus-mode) .book[data-layout="spread"]>.page-left,
html.gb61-phone .app:not(:fullscreen):not(.focus-mode) .book[data-layout="spread"]>.page-right {
  display:flex!important;flex:0 0 50%!important;width:50%!important;min-width:0!important;
  height:100%!important;align-items:center!important;justify-content:center!important;
}
html.gb61-phone .app:not(:fullscreen):not(.focus-mode) .book[data-layout="spread"] .book-spine {display:block!important;}
html.gb61-phone .book[data-layout="spread"] .gelli-visual-frame,
html.gb61-phone .book[data-layout="spread"] .gelli-visual-frame>img {width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;}
/* Regular reader: use the available landscape height and center pages, not a
   tiny book with a fixed dark strip above it. */
@media (orientation:landscape) and (max-height:600px) {
 html.gb61-phone .app:not(:fullscreen):not(.focus-mode) .book[data-layout="spread"]{
   width:min(90vw,calc((100dvh - 151px)*2*var(--page-ratio)))!important;
   max-width:90vw!important;
   max-height:calc(100dvh - 151px)!important;
 }
 html.gb61-phone .app:not(:fullscreen):not(.focus-mode) .stage {align-items:center!important;justify-content:center!important;}
}
/* Fullscreen: image canvas is flush with the view edges; browser chrome is
   outside the page and never creates an internal fake top margin. */
html.gb61-phone :is(.app:fullscreen,.app.focus-mode) .stage{
 position:absolute!important;inset:0!important;display:flex!important;
 justify-content:flex-start!important;align-items:stretch!important;
 width:100vw!important;height:100dvh!important;
 overflow-x:auto!important;overflow-y:hidden!important;
 overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;
 scroll-behavior:auto!important;scrollbar-width:none!important;
 touch-action:pan-x!important;background:#101b28!important;
}
html.gb61-phone :is(.app:fullscreen,.app.focus-mode) .stage::-webkit-scrollbar{display:none;}
html.gb61-phone :is(.app:fullscreen,.app.focus-mode) .book[data-layout="spread"]{
 position:relative!important;display:flex!important;flex:0 0 auto!important;
 justify-content:flex-start!important;align-items:stretch!important;
 width:max(100vw,calc(100dvh * 2 * var(--page-ratio)))!important;
 min-width:max(100vw,calc(100dvh * 2 * var(--page-ratio)))!important;
 height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
 aspect-ratio:calc(2 * var(--page-ratio))!important;
 margin:0!important;padding:0!important;overflow:visible!important;
 touch-action:pan-x!important;
}
html.gb61-phone :is(.app:fullscreen,.app.focus-mode) .book[data-layout="spread"]>.page-left,
html.gb61-phone :is(.app:fullscreen,.app.focus-mode) .book[data-layout="spread"]>.page-right{
 position:relative!important;display:flex!important;align-items:stretch!important;
 justify-content:stretch!important;flex:0 0 50%!important;
 width:50%!important;min-width:0!important;height:100%!important;
 border:0!important;border-radius:0!important;margin:0!important;overflow:hidden!important;
 background:transparent!important;box-shadow:none!important;touch-action:pan-x!important;
}
html.gb61-phone :is(.app:fullscreen,.app.focus-mode) .book[data-layout="spread"] .page>.gelli-visual-frame{
 display:block!important;width:100%!important;height:100%!important;min-width:0!important;flex:0 0 100%!important;
}
html.gb61-phone :is(.app:fullscreen,.app.focus-mode) .book[data-layout="spread"] .page img{
 display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;
}
html.gb61-phone :is(.app:fullscreen,.app.focus-mode) .book[data-layout="spread"] .book-spine{
 display:none!important;
}
/* A cover is still a single image. Previous fullscreen CSS hid the right-hand
   cover page entirely; explicitly restore it for both front and back covers. */
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="solo"] .page-left{display:none!important;}
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="solo"] .page-right{
 display:flex!important;position:relative!important;flex:0 0 100%!important;
 width:100%!important;height:100%!important;align-items:center!important;justify-content:center!important;
 border:0!important;background:transparent!important;box-shadow:none!important;
}
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="solo"] .page-right>.gelli-visual-frame{
 display:block!important;width:min(100vw,125dvh)!important;height:min(100dvh,80vw)!important;
 flex:0 0 auto!important;aspect-ratio:var(--page-ratio)!important;
}
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="solo"] .page-right img{
 width:100%!important;height:100%!important;object-fit:contain!important;
}
/* Panoramas are a true, unified image—not two repeated halves. In fullscreen
   keep native pan + text-aware scanning from V59. Do not add controls. */
html.gb61-phone :is(.app:fullscreen,.app.focus-mode) .book[data-layout="panorama"] {
 flex:0 0 100vw!important;width:100vw!important;min-width:100vw!important;
}
/* In regular phone reader show each entire facing pair, including panoramas. */
html.gb61-phone .app:not(:fullscreen):not(.focus-mode) .book[data-layout="panorama"] {
 width:min(95vw, 990px)!important;max-width:95vw!important;height:auto!important;
 aspect-ratio:calc(2*var(--page-ratio))!important;
}
@media (orientation:landscape) and (max-height:600px){
 html.gb61-phone .app:not(:fullscreen):not(.focus-mode) .book[data-layout="panorama"]{
  width:min(90vw,calc((100dvh - 151px)*2*var(--page-ratio)))!important;
  max-width:90vw!important;
 }
}