/* Gelli Belle V39: Fullscreen layout repair + seamless panoramic spreads.
 * Individual images never move; all decorative motion remains in transparent overlays. */
.book[data-layout="panorama"]{
 width:min(81vw,1460px,calc((100svh - 257px)*2*var(--page-ratio)));
 aspect-ratio:2.5!important;
}
.book[data-layout="panorama"] .page-left{display:flex;flex:0 0 100%;width:100%;height:100%;border-radius:6px;box-shadow:none}
.book[data-layout="panorama"] .page-right,.book[data-layout="panorama"] .book-spine{display:none!important}
.book[data-layout="panorama"] .page::after{display:none!important}
.gelli-panorama-viewport{width:100%;height:100%;min-width:0;max-width:100%;overflow:hidden;position:relative}
.gelli-panorama-viewport .gelli-visual-frame{width:100%;height:100%;aspect-ratio:5/2;overflow:hidden;isolation:isolate}
.gelli-panorama-viewport .gelli-visual-frame>img{width:100%;height:100%;object-fit:contain;display:block;transform:none!important}
/* Embeds retain a proportional, full-width panoramic image without a center seam. */
.reader-embedded .app:not(:fullscreen):not(.focus-mode) .book[data-layout="panorama"]{
 width:min(100%,1460px)!important;max-width:100%!important;
 aspect-ratio:2.5!important;height:auto!important;
}
@media(max-width:900px){
 .book[data-layout="panorama"]{width:min(95vw,960px);aspect-ratio:2.5!important}
}
/* The former blank-right fullscreen bug was caused by conflicting 50% page flex
   rules and sizing overrides from earlier versions. Force exactly one centered page. */
html.reader-focus,html.reader-focus body{overflow:hidden!important;height:100%!important}
.app.focus-mode{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-height:0!important;max-width:none!important;margin:0!important;overflow:hidden!important;padding:0!important;z-index:99999!important}
:is(.app:fullscreen,.app.focus-mode) .stage{
 position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;
 justify-content:center!important;gap:0!important;width:100vw!important;height:100dvh!important;
 min-height:0!important;margin:0!important;padding:0!important;
 background:#101b28!important;overflow:hidden!important;
}
:is(.app:fullscreen,.app.focus-mode) .book,
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="single"],
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="panorama"]{
 position:relative!important;display:flex!important;flex:0 0 100%!important;
 align-items:center!important;justify-content:center!important;
 width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;
 min-width:0!important;min-height:0!important;aspect-ratio:auto!important;
 margin:0!important;padding:0!important;filter:none!important;box-shadow:none!important;
 transform:none!important;perspective:none!important;transition:none!important;overflow:hidden!important;
}
:is(.app:fullscreen,.app.focus-mode) .book .page.page-left,
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="single"] .page.page-left,
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="panorama"] .page.page-left{
 display:flex!important;position:relative!important;flex:0 0 100%!important;
 align-items:center!important;justify-content:center!important;
 width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;
 overflow:hidden!important;border:0!important;margin:0!important;padding:0!important;
 box-shadow:none!important;border-radius:0!important;background:transparent!important;
}
:is(.app:fullscreen,.app.focus-mode) .book .page.page-right,
:is(.app:fullscreen,.app.focus-mode) .book .book-spine,
:is(.app:fullscreen,.app.focus-mode) .book .flip-layer{display:none!important}
/* Normal fullscreen pages: original 5:4 artwork centered, fitted without cropping. */
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="single"] .page-left>.gelli-visual-frame{
 display:block!important;position:relative!important;flex:none!important;
 width:min(100vw,125dvh)!important;height:min(100dvh,80vw)!important;
 max-width:100vw!important;max-height:100dvh!important;aspect-ratio:5/4!important;
 margin:auto!important;overflow:hidden!important;
}
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="single"] .page-left>.gelli-visual-frame>img{
 display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
 object-fit:contain!important;object-position:center!important;transform:none!important;
}
/* Special spreads: full HEIGHT, not forced to fit WIDTH. Swipe horizontally
   to reveal all original artwork, with no destructive cropping or stretching. */
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="panorama"] .gelli-panorama-viewport{
 position:relative!important;display:block!important;flex:0 0 100%!important;
 width:100vw!important;height:100dvh!important;max-width:100vw!important;max-height:100dvh!important;
 overflow-x:auto!important;overflow-y:hidden!important;touch-action:pan-x!important;
 overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;
 scrollbar-width:none!important;scroll-behavior:smooth;
}
:is(.app:fullscreen,.app.focus-mode) .gelli-panorama-viewport::-webkit-scrollbar{display:none}
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="panorama"] .gelli-panorama-viewport>.gelli-visual-frame{
 position:relative!important;display:block!important;flex:none!important;
 width:250dvh!important;min-width:250dvh!important;max-width:none!important;
 height:100dvh!important;max-height:100dvh!important;aspect-ratio:5/2!important;
 overflow:hidden!important;margin:0!important;
}
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="panorama"] .gelli-visual-frame>img{
 display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
 object-fit:fill!important;transform:none!important;
}
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="panorama"]{touch-action:auto!important}
:is(.app:fullscreen,.app.focus-mode) .book[data-layout="panorama"] .page-left{touch-action:auto!important}
/* Fully invisible interactive chrome. No buttons, labels, or floating controls. */
:is(.app:fullscreen,.app.focus-mode) :is(.topbar,.intro,.arrow,.footer,.soundtrack-bar,.thumbnail-panel,.help-panel,.rotate-tip,.install-sheet,.install-backdrop,.gb38-motion-toggle,.error,.loading-notice){display:none!important}
:is(.app:fullscreen,.app.focus-mode) .stage.book-enchanted::after{display:none!important}
@media(prefers-reduced-motion:reduce){
 :is(.app:fullscreen,.app.focus-mode) .gelli-panorama-viewport{scroll-behavior:auto!important}
}

:is(.app:fullscreen,.app.focus-mode) .gelli-panorama-viewport{cursor:grab}
:is(.app:fullscreen,.app.focus-mode) .gelli-panorama-viewport.is-dragging{cursor:grabbing;scroll-behavior:auto}