@import url("../../../assets/stylesheets/loader.css");
@import url("../../../assets/stylesheets/navigation.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap");

@font-face {
  font-family: localArial;
  src: local("Arial");
  unicode-range: U+0030-0039;
}

html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  color: white;
  background-color: black;
  font-family: localArial, "IBM Plex Sans", "MFW-YuGoPr6N-Medium",
    "Sawarabi Gothic", sans-serif;
  font-weight: 400;
}

@supports (-webkit-touch-callout: none) {
  /* iOS devices */

  body {
    perspective: 200px;
  }
}

nav div.menu {
  transform: none;
}

nav label {
  transform: none;
}

nav label div {
  background-color: aqua;
}

#viewer {
  width: 100vw;
  height: 100dvh;
}

/* No WebXR on the tours for now: hyper-floor-map disables vr-mode-ui, but a
   scene that initialized the button before the component ran keeps it — hide
   it unconditionally (A-Frame injects its own stylesheet, hence important). */
.a-enter-vr,
.a-enter-ar {
  display: none !important;
}

#scope {
  position: absolute;
  transform-origin: 50% 50%;
  pointer-events: none;
}

#scopeStage {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: 300ms;
  /* The scope must scale WITH the map: under the 512px media query the map
     stretches to the viewport, and a fixed 80px scope (and the × close
     control riding in it) no longer agrees with the point markers' size.
     80/357 of the map's width equals the authored 80px at natural scale
     (map svgs are 354.69–357 units wide; the 0.6% spread is invisible). */
  width: calc( 80 / 357 * 100% );
  height: auto;
}

/* Still-photo credit (built by hyper-floor-map): a spine caption down the
   right screen edge, in the gap between the global menu toggle (48px plus
   its margin) and the collapsed information panel, sharing that panel's
   5vmin edge margin with a tap-safe 16px toward each control. The bottom
   offset mirrors theater.css's collapsed-panel transform (a 100vw square
   scaled 0.1 / 0.2 and translated 47vw / 42.5vw). vertical-rl reads top to
   bottom and wraps its next column inward; pure-CSS geometry follows every
   window resize by itself. Visibility (opacity) is driven inline. */
#stillCredit {
  position: fixed;
  top: calc(48px + 8px + 16px);
  /* Centred on the global menu toggle's line: its 48px box sits 8px off the
     edge, so the centre is 32px in; translateX centres this element's own
     (possibly multi-column) width on it — capped so a many-column caption
     on a short viewport never slides past the screen edge (it grows
     leftward instead). */
  right: 32px;
  transform: translateX(min(50%, 30px));
  bottom: calc(5vmin + 8vw + 16px);
  writing-mode: vertical-rl;
  font-size: 9px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.65);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}

@media screen and (max-width: 767px) {
  #stillCredit {
    top: calc(48px + 16px);
    right: 24px;
    transform: translateX(min(50%, 22px));
    bottom: calc(5vmin + 17.5vw + 16px);
  }
}

.map {
  display: block;
  position: fixed;
  left: 2em;
  bottom: 2em;
  pointer-events: none;
}

#mapStage {
  display: block;
  height: auto;
  pointer-events: none;
  /* Viewpoint markers sit at the plan's own edges; the SVG viewport must not
     clip the ones that ride right on the border. */
  overflow: visible;
  /* The map is an interactive surface: without this, a phone treats a
     Fly-mode drag as browser panning and cancels the pointer stream after
     the first tap (html is touch-action: manipulation). */
  touch-action: none;
}

/* Layer switches fade the markers in and out (hyper-floor-map drives their
   opacity) instead of snapping them. */
#mapStage>* {
  transition: opacity 300ms;
}

/* The floor map is raised to z-index 9500 at runtime (hyper-floor-map) so it
   stays usable over the 360 overlay. The information panel — and, crucially,
   its collapsed open handle — must sit above the map, or a full-width map on
   a phone hides the handle and the panel can't be opened. */
#information {
  z-index: 9600;
}

/* The global menu must keep working in pano mode too: navigation.css authors
   the toggle/sheet at z 101/100, far below the 360 overlay (#panopoint-viewer,
   z 9000). Lift them over everything page-level (map 9500, information 9600),
   keeping the toggle above the sheet so the menu can be closed. */
nav div.menu {
  z-index: 9650;
}

nav label {
  z-index: 9700;
}

#mapStage g[class^="floor"] {
  opacity: .3;
}

#mapStage g[class^="floor"].current {
  opacity: 1;
}

@media screen and (max-width:512px) {
  .map {
    width: calc(100% - 4em);
  }

  #mapStage {
    width: 100%;
  }
}

.shootPoint {
  stroke: rgba(0, 0, 0, 0);
  fill: aqua;
  stroke-width: 16px;
  cursor: pointer;
  transform-origin: 50% 50%;
  pointer-events: all;
}

.shootPointB {
  stroke: rgba(0, 0, 0, 0);
  fill: aqua;
  stroke-width: 16px;
  cursor: pointer;
  pointer-events: all;
}

@media screen and (max-width:512px) {
  .shootPoint {
    stroke-width: 24px;
  }
}

.shootPoint.current {
  stroke: aqua;
  stroke-width: 1px;
  fill: none;
  pointer-events: none;
  animation: current 4s infinite;
}

@keyframes current {
  0% {
    stroke-width: 1px;
  }

  50% {
    stroke-width: 4px;
  }

  100% {
    stroke-width: 1px;
  }
}

.shootPoint {
  transition: all 0.3s;
}

.shootPoint:hover {
  fill: white;
}

.timeSelector {
  display: flex;
  gap: 1em;
  position: absolute;
  top: 2em;
  left: 2em;
  width: calc(100vh - 250px - 4em);
  max-width: 512px;
  transform: rotateZ(-90deg) translateX(-100%);
  transform-origin: 0 0;
}

.timeSelector .shootPoint {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #ffffff33;
  background-color: rgba(255, 255, 255, 0);
  animation: 0.3s;
  text-align: center;
  white-space: nowrap;
  border-radius: 1em;
}

.timeSelector .shootPoint::before {
  display: inline-block;
  content: "";
  width: 100%;
  margin: 0;
  border-top: 1px solid #ffffff33;
  vertical-align: middle;
  animation: 0.3s;
}

.timeSelector .shootPoint::after {
  display: inline-block;
  content: "";
  width: 100%;
  margin: 0;
  border-top: 1px solid #ffffff33;
  vertical-align: middle;
  animation: 0.3s;
}

.timeSelector .shootPoint.current {
  color: white;
}

.timeSelector .shootPoint.current::before {
  border-color: white;
}

.timeSelector .shootPoint.current::after {
  border-color: white;
}

.timeSelector .shootPoint:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

.timeSelector .shootPoint:hover::before {
  border-color: white;
}

.timeSelector .shootPoint:hover::after {
  border-color: white;
}

@media screen and (max-width:512px) {
  .timeSelector {
    top: 1.5em;
    gap: 1.5em;
    font-size: 0.85em;
  }
}

@media screen and (max-height:767px) {
  .timeSelector {
    transform: rotateZ(0deg) translateX(0);
    width: calc(100vw - 4em);
  }
}

.asynchronousPointSelector {
  position: absolute;
  width: 125px;
  bottom: 240px;
  top: 2em;
  left: calc(2em + 9px);
  display: flex;
  gap: 1em;
  height: 0px;
  transform: rotateZ(-90deg) translateX(-100%);
  transform-origin: 0 0;
}

.asynchronousPointSelector:has(+.timeSelector),
.timeSelector+.asynchronousPointSelector {
  left: calc(4em + 9px);
}

.asynchronousPointSelector .shootPoint {
  height: 3px;
  background-color: aqua;
  position: relative;
  flex-shrink: 5;
  flex-basis: 100%;
}

.asynchronousPointSelector .shootPoint::before {
  position: absolute;
  bottom: -9px;
  height: 21px;
  content: "";
  display: block;
  width: 100%;
  background-color: rgba(255, 255, 255);
  opacity: 0;
}

.asynchronousPointSelector .shootPoint:hover {
  flex-shrink: 5;
  opacity: 1;
  background-color: white;
}

.asynchronousPointSelector .shootPoint.current {
  background-color: white;
  opacity: 1;
  flex-shrink: 5;
}

.asynchronousPointSelector .shootPoint:hover::before {
  background-color: rgba(255, 255, 255);
  opacity: .1;
}

.asynchronousPointSelector .shootPoint.current::before {
  background-color: rgba(255, 255, 255, 0);
}

.asynchronousPointSelector .shootPoint:first-child::before {
  border-radius: 10px 0 0 10px;
}

.asynchronousPointSelector .shootPoint:last-child::before {
  border-radius: 0 10px 10px 0;
}

@media screen and (max-width:512px) {
  .asynchronousPointSelector {
    top: 1.5em;
    left: calc(2.35291em + 9px);
    font-size: 0.85em;
  }

  .asynchronousPointSelector:has(+.timeSelector),
  .timeSelector+.asynchronousPointSelector {
    top: 1.5em;
  }
}

@media screen and (max-height:767px) {
  .asynchronousPointSelector {
    transform: rotateZ(0deg) translateX(0);
    top: calc(2em + 9px);
    left: 2em;
  }

  .asynchronousPointSelector:has(+.timeSelector),
  .timeSelector+.asynchronousPointSelector {
    left: 2em;
    top: calc(4em + 9px);
  }
}

@media screen and (max-width:512px) and (max-height:767px) {
  .asynchronousPointSelector {
    top: 1.5em;
    font-size: 0.85em;
  }

  .asynchronousPointSelector:has(+.timeSelector),
  .timeSelector+.asynchronousPointSelector {
    top: calc(3.4em + 9px);
  }
}

.caption {
  position: absolute;
  color: white;
  font-size: 0.8em;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.8em;
  padding: 0.8em;
  text-align: center;
  width: 19px;
  height: 19px;
  user-select: none;
  opacity: 0;
  transition: opacity 300ms;
}

.caption:hover {
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.caption>div {
  display: block;
  position: absolute;
  white-space: nowrap;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  opacity: 0;
  transition: 300ms;
}

.caption img {
  width: 19px;
  height: 19px;
}

.caption.audioplayer>div {
  bottom: -110px;
}

.caption:hover>div {
  opacity: 1;
}

.caption>div div,
.caption>div audio {
  display: block;
  margin: 0.66em 0;
}

.caption a,
.caption a:visited {
  display: inline-block;
  color: white;
  padding: 0.5em;
  border: aqua 2px solid;
  transition: 300ms;
  text-decoration: none;
  border-radius: 1em;
  width: 19px;
  height: 19px;
}

.caption a:hover {
  background-color: rgba(50, 255, 255, 0.5);
}

.psv-container {
  background: none;
}

.psv-navbar {
  display: none;
}

.psv-loader-container {
  display: none;
}