@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
body {
  font-family: 'Roboto Mono', monospace;
  background-color: white;
  color: black;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Plain full-photo pages (no scene-wrapper): fill the frame, scaling up
   or down as needed, without cropping or distorting */
body > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- SCENE WRAPPER ---
   Pages that set an `aspect-ratio` on .scene-wrapper (inline, matching the
   scene-bg image's native dimensions) get letterboxed/pillarboxed to that
   ratio so the background never stretches and .scene-item percentages stay
   pinned to the right spot on the image at any window size. Pages that
   don't set an aspect-ratio (no image to align to) just fill the screen
   like before. */
.scene-wrapper {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

.scene-bg {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
  object-fit: cover;
}

/* --- INTERACTIVE ITEMS --- */
.scene-item {
  position: absolute;
  display: block;
  z-index: 10;
}

.scene-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.3)); 
}

.scene-item:hover {
  transform: scale(1.05);
  filter: drop-shadow(0px 8px 8px rgba(0,0,0,0.5)); 
  cursor: pointer;
}

/* --- CAPTION --- */
.caption {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  z-index: 20;
  pointer-events: none;
}

.caption img {
    max-width: 200px;
    width: 50%;
}

/* --- PAGE SPECIFIC BACKGROUNDS --- */
body.sky-page-bg {
  background: url("images/sky.gif") repeat;
  background-size: 10%; 
}
body.space-page-bg {
  background-color: black;
}
/* Letterbox bars around an aspect-ratio-locked .scene-wrapper */
body.scene-page-bg {
  background-color: #050505;
}

/* Hover warning (shown next to the back button on "point of no return" pages) */
#hover-warning {
  display: none;
  position: fixed;
  bottom: 0;
  left: 7%;
  width: 60%;
  z-index: 10000;
  pointer-events: none;
}

/* Back Button */
.back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80px;
  z-index: 1000;
  transition: transform 0.1s;
}
.back-btn:hover {
  transform: scale(1.1);
  cursor: pointer;
}
.back-btn img {
  width: 100%;
  height: auto;
  display: block;
}