* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #000;
  color: #fff;
}

a, a:hover, a:active, a:visited {
  text-decoration: none;
  color: inherit;
}

#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Let Marzipano handle all touch gestures (incl. two-finger pinch zoom)
     rather than the browser scrolling/zooming the page. */
  touch-action: none;
}

#titleBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  height: 40px;
  text-align: center;
}

.mobile #titleBar {
  height: 50px;
  right: 50px;
}

/* If there is a fullscreen button the title bar must make space for it */
body.fullscreen-enabled #titleBar {
  right: 80px;
}

body.fullscreen-enabled.mobile #titleBar {
  right: 100px;
}

/* If there are multiple scenes the title bar must make space for the scene list toggle */
body.multiple-scenes #titleBar {
  left: 40px;
}

body.multiple-scenes.mobile #titleBar {
  left: 50px;
}

#titleBar .sceneName {
  width: 100%;
  height: 100%;
  line-height: 30px;
  padding: 5px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.mobile #titleBar .sceneName {
  line-height: 40px;
}

#fullscreenToggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #fullscreenToggle {
  width: 50px;
  height: 50px;
}

body.fullscreen-enabled #fullscreenToggle {
  display: block;
}

#fullscreenToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #fullscreenToggle .icon {
  top: 10px;
  right: 10px;
}

#fullscreenToggle .icon.on {
  display: none;
}

#fullscreenToggle .icon.off {
  display: block;
}

#fullscreenToggle.enabled .icon.on {
  display: block;
}

#fullscreenToggle.enabled .icon.off {
  display: none;
}

#autorotateToggle {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #autorotateToggle {
  width: 50px;
  height: 50px;
}

/* If there is a fullscreen button, autorotate must placed a bit to the left */
body.fullscreen-enabled #autorotateToggle {
  right: 40px;
}

body.fullscreen-enabled.mobile #autorotateToggle {
  right: 50px;
}

#autorotateToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #autorotateToggle .icon {
  top: 10px;
  right: 10px;
}

#autorotateToggle .icon.on {
  display: none;
}

#autorotateToggle .icon.off {
  display: block;
}

#autorotateToggle.enabled .icon.on {
  display: block;
}

#autorotateToggle.enabled .icon.off {
  display: none;
}

#sceneListToggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #sceneListToggle {
  width: 50px;
  height: 50px;
}

#sceneListToggle .text {
  position: absolute;
  top: 5px;
  left: 15px;
  width: 100%;
  line-height: 30px;
}

#sceneListToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #sceneListToggle .icon {
  top: 10px;
  right: 10px;
}

#sceneListToggle .icon.on {
  display: none;
}

#sceneListToggle .icon.off {
  display: block;
}

#sceneListToggle.enabled .icon.on {
  display: block;
}

#sceneListToggle.enabled .icon.off {
  display: none;
}

#sceneList {
  position: absolute;
  top: 0;
  left: -220px;
  padding-top: 40px;
  width: 220px;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 0;
  -webkit-transition: margin-left 0.5s ease-in-out;
  transition: margin-left 0.5s ease-in-out;
}

.mobile #sceneList {
  padding-top: 50px;
}

#sceneList .scenes {
  width: 100%;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
}

.mobile #sceneList {
  width: 100%;
  height: 100%;
  left: -100%;
}

.mobile #sceneList.enabled {
  margin-left: 100%;
}

.mobile #sceneList .scenes {
  height: 100%;
}

#sceneList.enabled {
  margin-left: 220px;
}

#sceneList .scene {
  display: block;
  width: 100%;
  height: 30px;
}

.mobile #sceneList .scene {
  height: 40px;
}

#sceneList .scene .text {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile #sceneList .scene .text {
  line-height: 40px;
}

.no-touch #sceneList .scene:hover {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

#sceneList .scene.current {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

/* Hide scene list when only a single scene exists */
body.single-scene #sceneList, body.single-scene #sceneListToggle {
  display: none;
}

/* Link hotspot */

.link-hotspot {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  opacity: 0.9;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.no-touch .link-hotspot:hover {
  opacity: 1;
}

.mobile .link-hotspot {
  width: 70px;
  height: 70px;
}

.link-hotspot-icon {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Video hotspot ("window" preview) */

.video-hotspot {
  width: 320px;
  height: 165px;
  margin-left: -160px;
  margin-top: -83px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.video-hotspot-sticky {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: auto;
  top: auto;
  margin: 0;
  z-index: 90;
}

.video-hotspot-sticky.video-hotspot-sticky-left {
  right: auto;
  left: 16px;
}

.video-hotspot-sticky[hidden] {
  display: none;
}

.video-hotspot-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.video-hotspot-small {
  width: 90px;
  height: 55px;
  margin-left: -45px;
  margin-top: -28px;
  cursor: pointer;
}

.video-hotspot-square {
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
}

.video-hotspot-expand-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.video-hotspot-expand-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -3px;
  margin-top: -6px;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
}

/* Video lightbox (enlarged playback for expandable video hotspots) */

.video-lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.video-lightbox-overlay.visible {
  display: flex;
}

.video-lightbox-video {
  max-width: 90vw;
  max-height: 90vh;
}

.video-lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}

.link-hotspot-tooltip {
  position: absolute;
  left: 100%;
  top: 14px; /* ( 60 - (16 + 2*8) ) / 2 */

  margin-left: 3px;

  font-size: 16px;

  max-width: 300px;

  padding: 8px 10px;

  border-radius: 5px;

  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);

  color: #fff;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  cursor: pointer;

  opacity: 0;

  -ms-transform: translateX(-8px);
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);

  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      opacity 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              opacity 0.3s;
}

.mobile .link-hotspot {
  top: 19px; /* ( 70 - (16 + 2*8) ) / 2 */
}

.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  opacity: 1;
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* Prevent tooltip from triggering */
.link-hotspot-tooltip {
  pointer-events: none;
}
.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  pointer-events: all;
}

/* Fallback mode without pointer-events (IE8-10) */
.tooltip-fallback .link-hotspot-tooltip {
  display: none;
}
.no-touch .tooltip-fallback .link-hotspot:hover .link-hotspot-tooltip {
  display: block;
}

/* Info hotspot */

.info-hotspot {
  line-height: 1.2em;
  opacity: 0.9;
  -webkit-transition: opacity 0.2s 0.2s;
  transition: opacity 0.2s 0.2s;
}

.no-touch .info-hotspot:hover {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.info-hotspot.visible {
  opacity: 1;
}

.info-hotspot .info-hotspot-header {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: rgb(103,115,131);
  cursor: pointer;
  -webkit-transition: width 0.3s ease-in-out 0.5s,
                      border-radius 0.3s ease-in-out 0.5s;
  transition: width 0.3s ease-in-out 0.5s,
              border-radius 0.3s ease-in-out 0.5s;
}

.mobile .info-hotspot .info-hotspot-header {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.desktop.no-touch .info-hotspot .info-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.desktop .info-hotspot.visible .info-hotspot-header,
.desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.info-hotspot .info-hotspot-icon-wrapper {
  width: 40px;
  height: 40px;
}

.mobile .info-hotspot .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot .info-hotspot-title-wrapper {
  position: absolute;
  left: 40px;
  top: 0;
  width: 0;
  height: 40px;
  padding: 0;
  overflow: hidden;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.desktop .info-hotspot.visible .info-hotspot-title-wrapper,
.desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
  width: 220px;
  padding: 0 5px;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.info-hotspot .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-title .click-hint {
  vertical-align: middle;
  margin-left: 6px;
  opacity: 0.85;
  animation: click-hint-pulse 1.4s ease-in-out infinite;
}

@keyframes click-hint-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.info-hotspot .info-hotspot-close-wrapper {
  position: absolute;
  left: 260px;
  top: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 5px;
  background-color: rgb(78,88,104);
  visibility: hidden;
  -ms-transform: perspective(200px) rotateY(90deg);
  -webkit-transform: perspective(200px) rotateY(90deg);
  transform: perspective(200px) rotateY(90deg);
  -ms-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0.6s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0.6s;
}

.desktop .info-hotspot.visible .info-hotspot-close-wrapper {
  visibility: visible;
  -ms-transform: perspective(200px) rotateY(0deg);
  -webkit-transform: perspective(200px) rotateY(0deg);
  transform: perspective(200px) rotateY(0deg);
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0s;
}

.info-hotspot .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot .info-hotspot-text {
  position: absolute;
  width: 300px;
  height: auto;
  max-height: 200px;
  top: 40px;
  left: 0;
  padding: 10px;
  background-color: rgb(58,68,84);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-y: auto;
  visibility: hidden;
  /* rotate(90deg) causes transition flicker on Firefox 58 */
  -ms-transform: perspective(200px) rotateX(-89.999deg);
  -webkit-transform: perspective(200px) rotateX(-89.999deg);
  transform: perspective(200px) rotateX(-89.999deg);
  -ms-transform-origin: 50% 0 0;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0.3s;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.desktop .info-hotspot.visible .info-hotspot-text {
  visibility: visible;
  -ms-transform: perspective(200px) rotateX(0deg);
  -webkit-transform: perspective(200px) rotateX(0deg);
  transform: perspective(200px) rotateX(0deg);
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0s;
}

/* Info hotspot modal */

.desktop .info-hotspot-modal {
  display: none;
}

.info-hotspot-modal {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11000 !important;
  background-color: rgba(0,0,0,.5);
  line-height: 1.2em;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s,
                      visibility 0s 0.7s;
  transition: opacity 0.2s ease-in-out 0.5s,
              visibility 0s 0.7s;
}

.info-hotspot-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-in-out,
                      visibility 0s 0s;
  transition: opacity 0.2s ease-in-out,
              visibility 0s 0s;
}

.info-hotspot-modal .info-hotspot-header {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 50px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal.visible .info-hotspot-header {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot-modal .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot-modal .info-hotspot-title-wrapper {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  width: auto;
  height: 50px;
  padding: 0 10px;
}

.info-hotspot-modal .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot-modal .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal .info-hotspot-close-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: rgb(78,88,104);
  background-color: rgba(78,88,104,0.8);
  cursor: pointer;
}

.info-hotspot-modal .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot-modal .info-hotspot-text {
  position: absolute;
  top: 110px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow-y: auto;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal.visible .info-hotspot-text {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.4s;
  transition: opacity 0.3s ease-in-out 0.4s;
}

/* View control buttons */

.viewControlButton {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

body.view-control-buttons .viewControlButton {
  display: block;
}

/* Hide controls when width is too small */
@media (max-width: 600px) {
  body.view-control-buttons .viewControlButton {
    display: none;
  }

  /* Shrink the expandable video preview "windows" (e.g. Queue Yard) so they
     don't dominate the smaller mobile viewport. Transform keeps the hotspot
     centered on its marker regardless of the inline width/height. */
  .video-hotspot-small {
    transform: scale(0.65);
  }
}

.viewControlButton .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

/* Center is at margin-left: -20px */
.viewControlButton-1 {
  margin-left: -145px;
}
.viewControlButton-2 {
  margin-left: -95px;
}
.viewControlButton-3 {
  margin-left: -45px;
}
.viewControlButton-4 {
  margin-left: 5px;
}
.viewControlButton-5 {
  margin-left: 55px;
}
.viewControlButton-6 {
  margin-left: 105px;
}

/* Easter egg hotspot — no marker at all, revealed only on hover/tap */

.easter-egg-hotspot {
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
}

/* The water drops — always visible, sitting on the exact marker coords */
.easter-egg-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  line-height: 1;
  cursor: help;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}

.no-touch .easter-egg-hotspot:hover .easter-egg-marker,
.easter-egg-hotspot.revealed .easter-egg-marker {
  -webkit-transform: translate(-50%, -50%) scale(1.25);
  transform: translate(-50%, -50%) scale(1.25);
}

.easter-egg-bubble {
  position: absolute;
  left: 50%;
  bottom: 58%;
  white-space: nowrap;
  padding: 4px 6px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px) scale(0.4) rotate(-10deg);
  transform-origin: left bottom;
  -webkit-transition: opacity 0.18s ease, -webkit-transform 0.32s cubic-bezier(0.34, 1.75, 0.5, 1);
  transition: opacity 0.18s ease, transform 0.32s cubic-bezier(0.34, 1.75, 0.5, 1);
}

.no-touch .easter-egg-hotspot:hover .easter-egg-bubble,
.easter-egg-hotspot.revealed .easter-egg-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1) rotate(-2deg);
  -webkit-animation: easterEggWiggle 1.4s ease-in-out infinite alternate;
  animation: easterEggWiggle 1.4s ease-in-out infinite alternate;
}

@-webkit-keyframes easterEggWiggle {
  from { -webkit-transform: translateX(-50%) translateY(0) scale(1) rotate(-3deg); }
  to   { -webkit-transform: translateX(-50%) translateY(-2px) scale(1.03) rotate(3deg); }
}
@keyframes easterEggWiggle {
  from { transform: translateX(-50%) translateY(0) scale(1) rotate(-3deg); }
  to   { transform: translateX(-50%) translateY(-2px) scale(1.03) rotate(3deg); }
}

.easter-egg-label {
  vertical-align: middle;
}

.easter-egg-drip {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
  -webkit-animation: easterEggDrip 0.85s ease-in-out infinite;
  animation: easterEggDrip 0.85s ease-in-out infinite;
}

@-webkit-keyframes easterEggDrip {
  0%, 100% { -webkit-transform: translateY(-2px) scaleY(0.9); }
  55%      { -webkit-transform: translateY(4px) scaleY(1.15); }
}
@keyframes easterEggDrip {
  0%, 100% { transform: translateY(-2px) scaleY(0.9); }
  55%      { transform: translateY(4px) scaleY(1.15); }
}

.easter-egg-paw {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0;
  -webkit-transform: rotate(-25deg) scale(0.5);
  transform: rotate(-25deg) scale(0.5);
  -webkit-transition: opacity 0.2s ease 0.15s, -webkit-transform 0.3s cubic-bezier(0.34, 1.75, 0.5, 1) 0.15s;
  transition: opacity 0.2s ease 0.15s, transform 0.3s cubic-bezier(0.34, 1.75, 0.5, 1) 0.15s;
}

.no-touch .easter-egg-hotspot:hover .easter-egg-paw,
.easter-egg-hotspot.revealed .easter-egg-paw {
  opacity: 1;
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}

/* --- Secret hotspot: no marker at all; text only on hover/tap --- */

.secret-hotspot {
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
}

/* Invisible hit area — no cursor hint, nothing drawn. */
.secret-hotspot-hit {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.secret-hotspot-label {
  position: absolute;
  left: 50%;
  bottom: 58%;
  white-space: nowrap;
  padding: 4px 6px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  -webkit-transition: opacity 0.18s ease, -webkit-transform 0.22s ease;
  transition: opacity 0.18s ease, transform 0.22s ease;
}

.no-touch .secret-hotspot:hover .secret-hotspot-label,
.secret-hotspot.revealed .secret-hotspot-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- Chat hotspot: speech-bubble marker + message on hover/tap --- */

.chat-hotspot {
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
}

/* Tiny quotation marks — always visible, sitting on the coords */
.chat-hotspot-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -94%);
  cursor: pointer;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
  -webkit-animation: chatHotspotPulse 1.6s ease-in-out infinite;
  animation: chatHotspotPulse 1.6s ease-in-out infinite;
}

@-webkit-keyframes chatHotspotPulse {
  0%, 100% { -webkit-transform: translate(-50%, -94%) scale(1); }
  50%      { -webkit-transform: translate(-50%, -94%) scale(1.15); }
}
@keyframes chatHotspotPulse {
  0%, 100% { transform: translate(-50%, -94%) scale(1); }
  50%      { transform: translate(-50%, -94%) scale(1.15); }
}

.no-touch .chat-hotspot:hover .chat-hotspot-marker,
.chat-hotspot.revealed .chat-hotspot-marker,
.chat-hotspot.auto-revealed .chat-hotspot-marker {
  -webkit-animation: none;
  animation: none;
  -webkit-transform: translate(-50%, -94%) scale(1.15);
  transform: translate(-50%, -94%) scale(1.15);
}

/* The message bubble */
.chat-hotspot-bubble {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 10px;
  width: 220px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  color: #222;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px) scale(0.6);
  transform-origin: center bottom;
  -webkit-transition: opacity 0.18s ease, -webkit-transform 0.3s cubic-bezier(0.34, 1.6, 0.5, 1);
  transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.34, 1.6, 0.5, 1);
}

/* Little tail pointing down at the dog */
.chat-hotspot-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top-color: #ffffff;
}

.no-touch .chat-hotspot:hover .chat-hotspot-bubble,
.chat-hotspot.revealed .chat-hotspot-bubble,
.chat-hotspot.auto-revealed .chat-hotspot-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* --- First-visit tour tutorial --- */

.tour-tutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(6, 10, 22, 0.68);
  z-index: 10002;
  opacity: 0;
  -webkit-transition: opacity 0.22s ease;
  transition: opacity 0.22s ease;
}

.tour-tutorial-overlay.visible {
  opacity: 1;
}

.tour-tutorial-box {
  position: relative;
  width: 100%;
  max-width: 470px;
  padding: 30px 32px 28px;
  border-radius: 16px;
  background: #fbf9f4;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  color: #2a2f3a;
  font-family: Georgia, "Times New Roman", serif;
  -webkit-transform: translateY(12px) scale(0.97);
  transform: translateY(12px) scale(0.97);
  -webkit-transition: -webkit-transform 0.28s cubic-bezier(0.34, 1.56, 0.5, 1);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.tour-tutorial-overlay.visible .tour-tutorial-box {
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
}

.tour-tutorial-close {
  position: absolute;
  top: 9px;
  right: 14px;
  border: 0;
  padding: 4px 8px;
  background: transparent;
  color: #8b8d91;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

.tour-tutorial-close:hover {
  color: #343943;
}

.tour-tutorial-kicker {
  margin: 0 0 8px;
  color: #b3282d;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1.4px;
}

.tour-tutorial-title {
  margin: 0 32px 9px 0;
  font-size: 25px;
  line-height: 1.15;
}

.tour-tutorial-intro {
  margin: 0 0 18px;
  color: #4a4f5a;
  font-size: 15px;
  line-height: 1.45;
}

.tour-tutorial-list {
  margin: 0 0 23px;
  padding: 0;
  color: #4a4f5a;
  font-size: 14px;
  line-height: 1.45;
  list-style: none;
}

.tour-tutorial-list li {
  margin: 0 0 10px;
  padding-left: 22px;
  position: relative;
}

.tour-tutorial-list li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: #b3282d;
  font-size: 20px;
  line-height: 1;
}

.tour-tutorial-btn {
  display: inline-block;
  padding: 11px 24px;
  border: 0;
  border-radius: 999px;
  background: #b3282d;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.3px;
  cursor: pointer;
  -webkit-transition: background 0.15s ease, -webkit-transform 0.15s ease;
  transition: background 0.15s ease, transform 0.15s ease;
}

.tour-tutorial-btn:hover {
  background: #931f23;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

/* --- "Explored everywhere" completion modal --- */

.tour-complete-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(6, 10, 22, 0.72);
  z-index: 10001;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.tour-complete-overlay.visible {
  opacity: 1;
}

.tour-complete-box {
  position: relative;
  max-width: 420px;
  margin: 20px;
  padding: 32px 30px 28px;
  border-radius: 16px;
  background: #fbf9f4;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  text-align: center;
  -webkit-transform: translateY(12px) scale(0.96);
  transform: translateY(12px) scale(0.96);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.34, 1.56, 0.5, 1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.tour-complete-overlay.visible .tour-complete-box {
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
}

.tour-complete-title {
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: bold;
  color: #2a2f3a;
}

.tour-complete-text {
  margin: 0 0 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.5;
  color: #4a4f5a;
}

.tour-complete-btn {
  display: inline-block;
  padding: 11px 24px;
  border: 0;
  border-radius: 999px;
  background: #b3282d;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.3px;
  cursor: pointer;
  -webkit-transition: background 0.15s ease, -webkit-transform 0.15s ease;
  transition: background 0.15s ease, transform 0.15s ease;
}

.tour-complete-btn:hover {
  background: #931f23;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

.tour-complete-close {
  position: absolute;
  top: 10px;
  right: 16px;
  color: #9a9a9a;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.tour-complete-close:hover {
  color: #555;
}

/* --- Day / night toggle for the front doors (appears only once unlocked) --- */

.night-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: none;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(10, 14, 26, 0.62);
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.3px;
  cursor: pointer;
  z-index: 1000;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}

.night-toggle.visible {
  display: -webkit-flex;
  display: flex;
}

.night-toggle:hover {
  background: rgba(10, 14, 26, 0.82);
}

.night-toggle-glyph {
  margin-right: 7px;
  font-size: 16px;
  line-height: 1;
}

/* --- Drone clip easter egg: a bird silhouette circling the sky --- */

.drone-hotspot {
  width: 0;
  height: 0;
}

/* The bird — a faint silhouette that flies a looping path around the anchor.
   The box is padded well past the visible SVG so it stays tappable on touch
   screens, where a finger can't hit a tiny, constantly-moving target the way
   a mouse cursor can. */
.drone-hotspot-bird {
  position: absolute;
  left: -25px;
  top: -25px;
  width: 60px;
  height: 60px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  color: rgba(18, 22, 30, 0.58);
  cursor: pointer;
  will-change: transform;
  -webkit-animation: droneFly 23s ease-in-out infinite;
  animation: droneFly 23s ease-in-out infinite;
}

/* A soft glow ripple that expands from behind the flock every ~13s, to catch
   the eye and pull the viewer's gaze toward the birds when they're off to the
   side. Not per-bird delayed, so a cluster pulses together like a real flock. */
.drone-hotspot-bird::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  pointer-events: none;
  -webkit-animation: droneAttentionGlow 13s ease-out infinite;
  animation: droneAttentionGlow 13s ease-out infinite;
}

.drone-hotspot-bird svg {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.5));
  /* Brief "flock swoop" on the same ~13s beat as the glow: the bird lunges
     bigger with a quick banking tilt, then settles. */
  -webkit-animation: droneAttentionSwoop 13s ease-in-out infinite;
  animation: droneAttentionSwoop 13s ease-in-out infinite;
}

.no-touch .drone-hotspot-bird:hover {
  color: rgba(18, 22, 30, 0.85);
}

@-webkit-keyframes droneAttentionSwoop {
  0%, 62%, 86%, 100% { -webkit-transform: scale(1) rotate(0); }
  66% { -webkit-transform: scale(1.55) rotate(-12deg); }
  72% { -webkit-transform: scale(1.4) rotate(9deg); }
  79% { -webkit-transform: scale(1.15) rotate(-3deg); }
}
@keyframes droneAttentionSwoop {
  0%, 62%, 86%, 100% { transform: scale(1) rotate(0); }
  66% { transform: scale(1.55) rotate(-12deg); }
  72% { transform: scale(1.4) rotate(9deg); }
  79% { transform: scale(1.15) rotate(-3deg); }
}

@-webkit-keyframes droneAttentionGlow {
  0%, 60%, 100% { opacity: 0; -webkit-transform: scale(0.4); }
  64% { opacity: 0.9; -webkit-transform: scale(0.6); }
  80% { opacity: 0; -webkit-transform: scale(3.2); }
}
@keyframes droneAttentionGlow {
  0%, 60%, 100% { opacity: 0; transform: scale(0.4); }
  64% { opacity: 0.9; transform: scale(0.6); }
  80% { opacity: 0; transform: scale(3.2); }
}

.drone-bird-wing {
  fill: currentColor;
  -webkit-transform-origin: 32px 15px;
  transform-origin: 32px 15px;
  -webkit-animation: droneFlap 0.55s ease-in-out infinite alternate;
  animation: droneFlap 0.55s ease-in-out infinite alternate;
}

@-webkit-keyframes droneFlap {
  from { -webkit-transform: scaleY(1); }
  to   { -webkit-transform: scaleY(0.4); }
}
@keyframes droneFlap {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.4); }
}

/* Wide, irregular loop so it reads as circling high overhead. */
@-webkit-keyframes droneFly {
  0%   { -webkit-transform: translate(-130px,  34px) scale(0.68) rotate(-9deg); }
  25%  { -webkit-transform: translate(55px,  -74px) scale(1.05) rotate(7deg); }
  50%  { -webkit-transform: translate(168px,  16px) scale(0.82) rotate(11deg); }
  75%  { -webkit-transform: translate(6px,   94px) scale(1.12) rotate(-5deg); }
  100% { -webkit-transform: translate(-130px,  34px) scale(0.68) rotate(-9deg); }
}
@keyframes droneFly {
  0%   { transform: translate(-130px,  34px) scale(0.68) rotate(-9deg); }
  25%  { transform: translate(55px,  -74px) scale(1.05) rotate(7deg); }
  50%  { transform: translate(168px,  16px) scale(0.82) rotate(11deg); }
  75%  { transform: translate(6px,   94px) scale(1.12) rotate(-5deg); }
  100% { transform: translate(-130px,  34px) scale(0.68) rotate(-9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .drone-hotspot-bird {
    -webkit-animation: droneBob 5s ease-in-out infinite;
    animation: droneBob 5s ease-in-out infinite;
  }
  .drone-bird-wing {
    -webkit-animation: none;
    animation: none;
  }
  /* No swoop; the glow just fades in place (no expansion) as a calm cue. */
  .drone-hotspot-bird svg {
    -webkit-animation: none;
    animation: none;
  }
  .drone-hotspot-bird::after {
    -webkit-animation: droneAttentionFade 6s ease-in-out infinite;
    animation: droneAttentionFade 6s ease-in-out infinite;
  }
}

@-webkit-keyframes droneBob {
  0%, 100% { -webkit-transform: translate(0, 0) scale(0.9); }
  50%      { -webkit-transform: translate(0, -7px) scale(0.9); }
}
@keyframes droneBob {
  0%, 100% { transform: translate(0, 0) scale(0.9); }
  50%      { transform: translate(0, -7px) scale(0.9); }
}

@-webkit-keyframes droneAttentionFade {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.7; }
}
@keyframes droneAttentionFade {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.7; }
}

/* Fullscreen "liftoff" clip */
.drone-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 10000;
  opacity: 0;
  align-items: center;
  justify-content: center;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.drone-overlay.visible {
  display: -webkit-flex;
  display: flex;
  opacity: 1;
}

.drone-overlay-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.drone-overlay-close {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 1;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}