@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;
}

/* Nudge toward the back button on pages with nothing else to click,
   so it's clear there's no more content rather than something just
   failing to respond to taps. Delayed so it doesn't fire mid-navigation,
   only once someone's actually sat on the page with nothing to do. */
.back-btn.dead-end-hint img {
  animation: dead-end-pulse 1.1s ease-in-out 2s infinite;
}
@keyframes dead-end-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 40, 40, 0)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 40, 40, 0.95)); transform: scale(1.12); }
}

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