/* Shared game viewport: all SugarCube screens, not just Records/Heroes.
   The browser document must never scroll past the active game screen.
   Long legacy screens scroll in their own passage; approved modern screens
   keep their existing internal scrollers. Published ChapterRuntime mounts
   separately on document.body and keeps its own page scroll + saves. */

html,body{
  width:100%!important;
  height:100vh!important;
  height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

#story{
  height:100vh!important;
  height:100dvh!important;
  max-height:100dvh!important;
  margin-top:0!important;
  margin-bottom:0!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
#passages{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
/* Canonical scroll owner for EVERY SugarCube screen.
   Do not vertically center a passage: when its child is taller than
   the viewport, centering places the title and close control ABOVE scroll 0.
   Keep the black browser document locked, but scroll the passage from its
   real top to the last pixel of its decorated content. */
#passages>.passage{
  box-sizing:border-box!important;
  display:block!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  padding:0!important;
  margin:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:none!important;
  -webkit-overflow-scrolling:touch;
}
/* One decorated document extending to its footer, whether it contains a
   compact menu, long records, inventory, portraits or a relationship diagram.
   Its PARENT passage alone scrolls: no frozen black bars or hidden close X. */
#passages>.passage .tg-records-modern{
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  align-self:stretch!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow:visible!important;
  /* The footer is the actual end of every framed page; no blank strip below it. */
  padding-bottom:0!important;
}
#passages>.passage .tg-records-modern .tg-r-footer{
  position:relative!important;
  inset:auto!important;
  flex:0 0 70px!important;
  height:70px!important;
  min-height:70px!important;
  margin:4px 0 0!important;
  padding:0!important;
  pointer-events:none!important;
}
#passages>.passage .tg-records-modern .tg-r-footer img{
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  width:var(--tg-records-emblem-size,67.2px)!important;
  height:auto!important;
  transform:translateX(-50%) scaleY(-1)!important;
}
/* The portrait catalogue is part of the same passage scroll, rather than
   a second fixed-height viewport nested inside it. */
#passages>.passage>#heroes-records-screen.tg-records-modern .tg-r-main{
  flex:0 0 auto!important;
  display:block!important;
  min-height:0!important;
  overflow:visible!important;
  padding-bottom:20px!important;
}
#passages>.passage>#heroes-records-screen.tg-records-modern #heroes-records-viewport{
  display:block!important;
  width:calc(100% - 12px)!important;
  height:auto!important;
  overflow:visible!important;
  flex:none!important;
}
/* The portrait rail follows the same passage scrollTop as the content.
   It stays inside the visible viewport while the gallery is scrolled. */
#passages>.passage>#heroes-records-screen.tg-records-modern #heroes-records-scroll-track{
  display:block!important;
  position:fixed!important;
  top:146px!important;
  bottom:64px!important;
  right:15px!important;
  height:auto!important;
}

/* Keep section popups and full-screen overlays on top; never change
   their own layout, image dimensions, tap targets, or internal scrolling. */

/* Mobile/touch artwork is often a transparent PNG over a rectangular hit
   target. Suppress the BROWSER'S rectangular tap flash for game controls,
   but keep the author's own hover, pressed and discovery animations. */
html,
body,
button,
a,
area,
summary,
input,
select,
[role="button"],
[role="link"],
[tabindex],
.link-internal {
  -webkit-tap-highlight-color:transparent!important;
}

/* A pointer tap must not leave the UA focus rectangle behind. Keyboard
   focus-visible remains untouched (including the gold menu focus rings). */
:where(button,a,summary,[role="button"],[role="link"],[tabindex]):focus:not(:focus-visible) {
  outline:none;
}

/* SugarCube's stock button:hover paints a bright blue rectangle (#57c),
   even on invisible PAGE hotspot buttons placed over transparent art.
   Only these artwork hit targets bypass that default button paint. */
.tzrt-shell:not(.tzrt-preview) .tzrt-hotspot:is(:hover,:active,:focus) {
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.tzrt-shell:not(.tzrt-preview) .tzrt-hotspot:focus:not(:focus-visible) {
  outline:none!important;
}
.tzrt-shell:not(.tzrt-preview) .tzrt-hotspot:focus-visible {
  outline:2px solid #dfbd7e!important;
  outline-offset:2px;
}