/* Ordinary UI is viewport-sized; only the composed reader scene retains a fit. */
#ui-root {
  position: relative;
  transform: none;
}

#app-shell {
  z-index: var(--layer-legacy);
}

#novel-container {
  --reader-scene-scale: 1;
  height: calc((100vh - var(--navbar-height)) * var(--reader-scene-scale, 1));
  height: calc((100dvh - var(--navbar-height)) * var(--reader-scene-scale, 1));
}

#reader-scene {
  display: block;
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(100% / var(--reader-scene-scale));
  height: calc(100vh / var(--reader-scene-scale));
  height: calc(100dvh / var(--reader-scene-scale));
  transform: scale(var(--reader-scene-scale));
  transform-origin: top left;
  pointer-events: none;
}

html.mobile #novel-container {
  --reader-scene-scale: 0.5;
}

#ui-safe-area {
  position: fixed;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#ui-surfaces {
  position: fixed;
  inset: 0;
  z-index: var(--layer-surfaces);
  pointer-events: none;
}

#ui-surface-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgb(0 0 0 / 55%);
  pointer-events: auto;
}

#ui-surface-backdrop[hidden] {
  display: none;
}

#ui-hud,
#hud-decoration {
  position: fixed;
  left: var(--usable-left);
  top: var(--usable-top);
  width: var(--usable-width);
  height: var(--usable-height);
  z-index: var(--layer-hud);
  pointer-events: none;
  contain: layout style size;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 600ms ease,
    visibility 0s linear 0s;
}

#ui-hud.records-hud-covered,
#hud-decoration.records-hud-covered {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 600ms ease,
    visibility 0s linear 600ms;
}

/* Covered HUD motion has no visible output while Records owns the viewport. */
#ui-hud.records-hud-covered *,
#ui-hud.records-hud-covered *::before,
#ui-hud.records-hud-covered *::after,
#hud-decoration.records-hud-covered *,
#hud-decoration.records-hud-covered *::before,
#hud-decoration.records-hud-covered *::after {
  animation-play-state: paused;
}

#ui-panels {
  position: fixed;
  left: var(--usable-left);
  top: var(--usable-top);
  width: var(--usable-width);
  height: var(--usable-height);
  z-index: var(--layer-panels);
  pointer-events: none;
}

#ui-imagery,
#ui-reader,
#ui-notices,
#ui-screens,
#ui-transitions,
#ui-system {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#ui-imagery {
  z-index: var(--layer-imagery);
}

#ui-imagery > .image-panel.active {
  pointer-events: auto;
}

#ui-reader {
  left: var(--usable-left);
  top: var(--usable-top);
  width: var(--usable-width);
  height: calc(var(--usable-height) - var(--navbar-height));
  padding: 1rem;
  box-sizing: border-box;
  z-index: var(--layer-reader);
}

#ui-reader > #story-scroll-viewport {
  height: 100%;
  pointer-events: auto;
}

body.cinematic-active #ui-reader > #story-scroll-viewport,
body.combat-active #ui-reader > #story-scroll-viewport {
  pointer-events: none;
}

#ui-reader > #reader-controls,
#ui-reader > #reader-floating-details {
  pointer-events: none;
}

#ui-screens {
  z-index: var(--layer-screens);
}

#ui-notices {
  z-index: var(--layer-notices);
}

#ui-transitions {
  z-index: var(--layer-transitions);
}

#ui-system {
  z-index: var(--layer-system);
}

#ui-screens > *,
#ui-notices > *,
#ui-transitions > *,
#ui-system > * {
  pointer-events: none;
}

@media (max-width: 600px), (max-height: 520px) {
  #ui-reader {
    height: var(--usable-height);
    padding:
      max(6.5rem, calc(env(safe-area-inset-top) + 5.5rem))
      max(0.5rem, env(safe-area-inset-right))
      max(3.5rem, calc(env(safe-area-inset-bottom) + 3rem))
      max(0.5rem, env(safe-area-inset-left));
  }

  #ui-reader > #story-scroll-viewport {
    padding: 0;
  }
}

#ui-screens > .login-screen,
#ui-notices > .zoom-warning.active,
#ui-screens > .novel-screen,
#ui-screens > .start-screen.active,
#ui-screens > .load-menu,
#ui-transitions > .active,
#ui-system > .active,
body.mode-loading #ui-transitions > #mode-loading-overlay {
  pointer-events: auto;
}

#ui-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 55%);
  pointer-events: auto;
}

#ui-panel-backdrop[hidden] {
  display: none;
}

#rotate-warning {
  z-index: 0;
}

#ui-hud[hidden],
#hud-decoration[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #ui-hud,
  #hud-decoration,
  #ui-hud.records-hud-covered,
  #hud-decoration.records-hud-covered {
    transition: none;
  }
}