* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: #140c08;
}

body {
  overflow: hidden;
}

.room {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse 80% 55% at 50% 18%, rgba(255, 196, 120, 0.16), transparent 58%),
    linear-gradient(180deg, #1c120c 0%, #2a1b12 42%, #17100b 100%);
}

.book-shell {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.5));
}

#book {
  width: 100%;
  height: 100%;
  cursor: grab;
}

#book:active,
body.is-turning #book {
  cursor: grabbing;
}

.page {
  background: #f6f0e4;
  overflow: hidden;
}

.page img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.stf__item.--left::after,
.stf__item.--right::after {
  content: "";
  position: absolute;
  top: 0;
  width: 8%;
  max-width: 46px;
  height: 100%;
  pointer-events: none;
}

.stf__item.--left::after {
  right: 0;
  background: linear-gradient(to left, rgba(40, 22, 10, 0.18), transparent);
}

.stf__item.--right::after {
  left: 0;
  background: linear-gradient(to right, rgba(40, 22, 10, 0.18), transparent);
}

.stf__item.--hard {
  background: #3a2216;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #140c08;
}

.loader.is-gone {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

@media (max-width: 720px) {
  .book-shell {
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45));
  }
}