/* Keep the complete Prism device inside the real mobile viewport. */
:root{--hx-phone-height:100vh}
@supports(height:100dvh){:root{--hx-phone-height:100dvh}}
@media(min-width:0px){
  #reader.active{height:var(--hx-phone-height)!important;min-height:0!important;overflow:hidden!important}
  #reader.active .reader-console,#reader.active.focus-reader .reader-console,
  #reader.active .console-screen,#reader.active.focus-reader .console-screen{height:100%!important;min-height:0!important;width:100%!important;max-width:100%!important}
  #reader.active .stage,#reader.active.focus-reader .stage{
    --fit-top:calc(104px + env(safe-area-inset-top,0px));
    --fit-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    height:100%!important;min-height:0!important;width:100%!important;
    padding:var(--fit-top) max(13px,env(safe-area-inset-right,0px)) var(--fit-bottom) max(13px,env(safe-area-inset-left,0px))!important;
    justify-content:center!important;box-sizing:border-box!important;
  }
  #reader.active .stage .hx-prism{
    display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;
    height:100%;max-height:100%;width:100%;max-width:620px;padding:7px 7px 0;
  }
  #reader.active .stage .hx-prism>.screen,#reader.active.focus-reader .stage .hx-prism>.screen{
    display:flex!important;flex:1 1 0!important;min-height:0!important;height:0!important;
    width:100%!important;max-height:none!important;aspect-ratio:auto!important;overflow:hidden!important;
  }
  #reader.active .stage .hx-prism>.screen>#page,
  body.interior #reader.active .stage .hx-prism>.screen>#page{
    position:relative!important;flex:1 1 0!important;min-height:0!important;height:0!important;
    width:100%!important;aspect-ratio:auto!important;background-size:contain!important;background-position:center!important;
  }
  #reader.active .stage .hx-prism .comic-dialogue{
    flex:0 1 auto!important;min-height:0!important;max-height:32%!important;
    box-sizing:border-box!important;overflow-y:auto!important;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom;
    font-size:1rem!important;line-height:1.45!important;padding:12px 14px!important;
    scrollbar-width:thin;scrollbar-color:#a698da66 transparent;
  }
  #reader.active .hx-prism .hx-astra-nav{flex:0 0 52px;height:52px;min-height:52px;opacity:1!important;grid-template-columns:44px minmax(0,1fr) 44px;gap:4px}
  #reader.active .hx-prism .hx-astra-step{width:44px;height:48px;min-height:44px}
  #reader.active .hx-prism .hx-astra-progress{height:48px;min-height:44px}
  #reader.active .hx-prism-crown{top:-51px;height:51px;width:70%}
  #reader.active .hx-prism-crown svg{width:74px;height:55px}
  #reader .hx-reader-header{top:env(safe-area-inset-top,0px)!important;left:env(safe-area-inset-left,0px)!important;right:env(safe-area-inset-right,0px)!important;min-height:52px!important;padding:3px 7px!important;grid-template-columns:44px minmax(0,1fr) 44px!important}
  #reader .hx-reader-identity{min-width:0;justify-content:center!important}
  #reader .hx-reader-identity b{max-width:100%!important;font-size:12px!important}
  #reader .hx-reader-identity small{font-size:10px!important;letter-spacing:.1em!important}
  #reader .hx-reader-full{display:none!important}
  #reader .hx-reader-wake{bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;right:max(8px,env(safe-area-inset-right,0px))!important}
  #reader.active .issues{top:calc(54px + env(safe-area-inset-top,0px))!important;bottom:0!important;height:auto!important;max-height:calc(var(--hx-phone-height) - 54px - env(safe-area-inset-top,0px))!important}
  #reader .hx-reader-scrim{top:calc(54px + env(safe-area-inset-top,0px))!important}
  #reader.active .stage .screen>#tapPrev,#reader.active .stage .screen>#tapNext{height:var(--hx-art-height,0px)!important;aspect-ratio:auto!important;width:42%!important}
  #reader .hx-reader-page-loader{width:var(--hx-art-width,100%);height:var(--hx-art-height,0px);aspect-ratio:auto}
}
/* A short, wide phone gets artwork and dialogue side by side. */
@media(max-height:600px) and (orientation:landscape) and (pointer:coarse),
       (max-height:450px) and (orientation:landscape) and (max-width:1000px){
  #reader.active .stage,#reader.active.focus-reader .stage{--fit-top:calc(65px + env(safe-area-inset-top,0px));--fit-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  #reader.active .stage .hx-prism{max-width:780px}
  #reader.active .hx-prism-crown{top:-23px;height:23px;width:44%}
  #reader.active .hx-prism-crown svg{width:36px;height:28px}
  #reader.active .stage .hx-prism>.screen:has(.comic-dialogue.show){display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  #reader.active .stage .hx-prism>.screen>#page,body.interior #reader.active .stage .hx-prism>.screen>#page{height:100%!important}
  #reader.active .stage .hx-prism .comic-dialogue{height:100%!important;max-height:100%!important;border-top:0!important;border-left:1px solid #a9a1ff40!important;padding:12px 14px!important}
  #reader.active .stage .screen>#tapPrev,#reader.active .stage .screen>#tapNext{display:none!important}
  #reader.active .hx-prism .hx-astra-nav{flex-basis:48px;height:48px;min-height:48px}
}
@media(max-height:560px) and (orientation:portrait){
  #reader.active .stage,#reader.active.focus-reader .stage{--fit-top:calc(84px + env(safe-area-inset-top,0px));--fit-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  #reader.active .hx-prism-crown{top:-34px;height:34px}
  #reader.active .hx-prism-crown svg{width:50px;height:38px}
}