/* 0) Reset the “white border” (default browser margin) */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

:root{
  --banner-h: 65px;      /* your banner height */
  --scene-bg: #000;      /* side bars */
}

/* 1) Page layout: header + middle + footer */
.page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--scene-bg);
}

/* 2) Fixed-height banners */
.banner{
  height: var(--banner-h);
  overflow: hidden;
  flex: 0 0 auto;
}

.banner img{
  width: 100%;
  height: 100%;
  object-fit: fill; /* you chose distortion; OK */
  display: block;
}

/* 3) Middle fills the remaining space */
.middle{
  flex: 1 1 auto;
  min-height: 0; /* IMPORTANT: allows child overflow areas to work correctly */
  background: var(--scene-bg);
}

/* 4) The scroll container (only on mobile) */
.scene-viewport{
  position: relative;   /* add this */
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  background: #000;
}

/* 5) Stage centers when there’s extra space */
.stage{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;     /* vertical centering */
  justify-content: center; /* horizontal centering */
}


/* 6) Scene is our “native pixel canvas” */
.scene{
  position: relative;      /* IMPORTANT: makes the scene a positioning parent for hotspots + base */
  transform-origin: center center;
  image-rendering: pixelated;
}


/* Base image fills the native canvas */
.scene-base{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

/* 7) Hotspots: positioned in native pixels inside .scene */
.hotspot{
  position: absolute;
  display: block;
}

.hotspot img{
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
  image-rendering: pixelated;
}

.hotspot .open{ opacity: 0; }
.hotspot:hover .open,
.hotspot:focus-visible .open{ opacity: 1; }

.hotspot:hover .closed,
.hotspot:focus-visible .closed{ opacity: 0; }

/* Nice focus outline for keyboard users */
.hotspot:focus-visible{
  outline: 2px dashed white;
  outline-offset: 2px;
}

/* 8) Mobile behavior: allow horizontal scroll in the middle only */
@media (max-width: 768px){
  .scene-viewport{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Optional: keep centering vertically, but let width overflow if needed */
  .stage{
    justify-content: flex-start; /* start at left; user can scroll right */
  }
}

/* 9) Desktop behavior: no horizontal scroll */
@media (min-width: 769px){
  .scene-viewport{
    overflow-x: hidden;
  }
}