/* Gelli Belle — V61 orientation refinement (approved):
   PORTRAIT: one page; LANDSCAPE: two facing pages; covers always solo.
   Original panorama artwork remains seamless; portrait presents one page-width
   of that artwork at a time with native horizontal exploration. */

/* V61 spread styles are restricted to landscape using the gb61-phone class.
   Standard .single styling from V60 is retained in portrait. */
html.gb62-phone-portrait .app:not(:fullscreen):not(.focus-mode) .book[data-layout="single"],
html.gb62-phone-portrait .app:not(:fullscreen):not(.focus-mode) .book[data-layout="solo"] {
  aspect-ratio:var(--page-ratio)!important;
  width:min(calc(100vw - 88px),calc((100dvh - 210px)*var(--page-ratio)))!important;
  max-width:calc(100vw - 88px)!important;
  height:auto!important;
  flex:0 1 auto!important;
}
/* A panorama consists of two neighboring pages. Present only one page's
   horizontal width in portrait while retaining the uncropped continuous art. */
html.gb62-phone-portrait .app:not(:fullscreen):not(.focus-mode) .book[data-layout="panorama"] {
  aspect-ratio:var(--page-ratio)!important;
  width:min(calc(100vw - 88px),calc((100dvh - 210px)*var(--page-ratio)))!important;
  max-width:calc(100vw - 88px)!important;
  height:auto!important;
  flex:0 1 auto!important;
}
html.gb62-phone-portrait .book[data-layout="panorama"] .gelli-panorama-viewport {
  width:100%!important;height:100%!important;overflow-x:auto!important;
  overflow-y:hidden!important;touch-action:pan-x!important;
  -webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;
}
html.gb62-phone-portrait .book[data-layout="panorama"] .gelli-panorama-viewport::-webkit-scrollbar{display:none;}
html.gb62-phone-portrait .book[data-layout="panorama"] .gelli-panorama-viewport>.gelli-visual-frame {
  width:200%!important;min-width:200%!important;max-width:none!important;
  height:100%!important;aspect-ratio:calc(2 * var(--page-ratio))!important;
}
html.gb62-phone-portrait .book[data-layout="panorama"] .gelli-visual-frame>img {
  width:100%!important;height:100%!important;object-fit:fill!important;
}
/* Portrait immersive view keeps one page centered with original proportions. */
html.gb62-phone-portrait :is(.app:fullscreen,.app.focus-mode) .book[data-layout="panorama"] .gelli-panorama-viewport{
  position:relative!important;width:min(100vw,125dvh)!important;
  max-width:100vw!important;height:min(100dvh,80vw)!important;
  max-height:100dvh!important;flex:none!important;margin:auto!important;
}
html.gb62-phone-portrait :is(.app:fullscreen,.app.focus-mode) .book[data-layout="panorama"] .gelli-panorama-viewport>.gelli-visual-frame {
  width:200%!important;min-width:200%!important;max-width:none!important;
  height:100%!important;min-height:100%!important;aspect-ratio:calc(2 * var(--page-ratio))!important;
}
/* In LANDSCAPE fullscreen show the full two-page pair simultaneously, as a
   fitted 2.5:1 image rather than forcing a horizontally clipped oversized sheet. */
html.gb61-phone :is(.app:fullscreen,.app.focus-mode) .stage {
  justify-content:center!important;align-items:center!important;
  overflow-x:hidden!important;
}
html.gb61-phone :is(.app:fullscreen,.app.focus-mode) .book[data-layout="spread"] {
  width:min(100vw,calc(100dvh * 2 * var(--page-ratio)))!important;
  min-width:0!important;max-width:100vw!important;
  height:min(100dvh,calc(100vw / (2 * var(--page-ratio))))!important;
  min-height:0!important;max-height:100dvh!important;
  aspect-ratio:calc(2 * var(--page-ratio))!important;
  flex:0 1 auto!important;
}
/* All front/back covers remain one entire image, including phone landscape. */
html.gb61-phone :is(.app:fullscreen,.app.focus-mode) .book[data-layout="solo"] {
  width:min(100vw,calc(100dvh * var(--page-ratio)))!important;
  min-width:0!important;max-width:100vw!important;
  height:min(100dvh,calc(100vw / var(--page-ratio)))!important;
  min-height:0!important;max-height:100dvh!important;
  aspect-ratio:var(--page-ratio)!important;
  flex:0 1 auto!important;
}
/* Use more of the narrow phone screen for portrait artwork. Put the page-turn
   arrows above the edges of the page instead of reserving 88px beside it. */
html.gb62-phone-portrait .app:not(:fullscreen):not(.focus-mode) .stage {
  position:relative!important;width:100%!important;
  justify-content:center!important;gap:0!important;padding:0!important;
}
html.gb62-phone-portrait .app:not(:fullscreen):not(.focus-mode) .stage>.arrow {
  position:absolute!important;top:50%!important;transform:translateY(-50%)!important;
  z-index:15!important;width:38px!important;height:50px!important;
  border-radius:18px!important;opacity:.9!important;
}
html.gb62-phone-portrait .app:not(:fullscreen):not(.focus-mode) .stage>.arrow-prev{left:1px!important;}
html.gb62-phone-portrait .app:not(:fullscreen):not(.focus-mode) .stage>.arrow-next{right:1px!important;}
html.gb62-phone-portrait .app:not(:fullscreen):not(.focus-mode) .book[data-layout="single"],
html.gb62-phone-portrait .app:not(:fullscreen):not(.focus-mode) .book[data-layout="solo"],
html.gb62-phone-portrait .app:not(:fullscreen):not(.focus-mode) .book[data-layout="panorama"] {
  width:min(95vw,calc((100dvh - 205px)*var(--page-ratio)))!important;
  max-width:95vw!important;
}