body.tour-open
{
  overflow-y: hidden;
}

/* Anchor mode replaces native scroll with a JS-driven transform, so tour-overlay has to own
   gestures itself - overflow:hidden blocks native scroll, touch-action:none stops the browser's
   own pan/zoom handling from fighting the pointer-drag handlers. */
tour-overlay
{
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: hsl( 226, 21%, 12% );
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  touch-action: none;
  transition: opacity 100ms ease;
}

tour-fading-container
{
  display: block;
  opacity: 1;
  transition: opacity 100ms ease;
}

tour-fading-container.tour-fading-hidden
{
  opacity: 0;
}

tour-overlay.tour-visible
{
  opacity: 1;
  pointer-events: auto;
}

tour-close-button
{
  display: block;
  position: fixed;
  top: 4vw;
  right: 4vw;
  width: 8vw;
  height: 8vw;
  z-index: 1;
  cursor: pointer;
  color: hsl( 0, 0%, 100% );
  font-size: 6vw;
  font-weight: 800;
  line-height: 8vw;
  text-align: center;
  border-radius: 50%;
  background-color: hsla( 0, 0%, 100%, 0.08 );
  transition: background-color 150ms ease;
}

tour-close-button::before
{
  content: "\2715";
}

tour-close-button:hover
{
  background-color: hsla( 0, 0%, 100%, 0.18 );
}

/*
  No reliable vh in mobile browsers, so viewport height is approximated from vw using an
  assumed aspect ratio - portrait devices run roughly 9:16 (100vw tall = 177.8vw) to 1:2
  (100vw tall = 200vw); ~190vw is the midpoint used as "one screen height" below. Before any
  part has loaded tour-content is empty, so it gets a starter min-height (roughly half that
  assumed screen height, minus the button's own constant margin) purely so the button doesn't
  sit glued to the top - once a real SVG loads it's taller than this floor and the min-height
  stops doing anything, so the button just ends up directly underneath it, same as always.
*/
tour-content
{
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 87vw;
  text-align: center;
}

tour-content svg
{
  display: inline-block;
  width: 100%;
  height: auto;
}

/* Colors scroll top-to-bottom via background-position: the gradient is vertical (180deg, "to
   bottom") so it's axis-aligned with the box, same as the original horizontal version just
   transposed - background-size is exactly one repeat-cycle-height (200%), and the last stop
   matches the first (hue 0 = hue 360), so shifting position down through one full cycle
   (0% -> 200%, since the element only shows half the sized image at a time) loops back to a
   pixel-identical frame with no visible seam. (A 45deg diagonal version of this same trick needs
   the shift projected through the gradient's own angle instead of a plain 0%->200%, and that
   didn't come out looking right - dropped in favor of this simpler, proven-reliable axis-aligned
   version.) Scale pulse is a separate animation (different property, no conflict) - transform is
   fully owned by it now, so the old static scale/hover-scale/transition stay gone in favor of the
   continuous idle "game button" pulse. */
tour-big-button
{
  display: block;
  margin: 8vw auto;
  margin-bottom: 50vw;
  width: 80vw;
  background-image: repeating-linear-gradient(
    180deg,
    hsl( 0,   90%, 60% ) 0%,
    hsl( 60,  90%, 60% ) 14.28%,
    hsl( 120, 90%, 60% ) 28.57%,
    hsl( 180, 90%, 60% ) 42.85%,
    hsl( 240, 90%, 60% ) 57.14%,
    hsl( 300, 90%, 60% ) 71.42%,
    hsl( 360, 90%, 60% ) 85.71%,
    hsl( 0,   90%, 60% ) 100%
  );
  background-size: 100% 200%;
  color: hsl( 0, 0%, 100% );
  text-shadow: 0 0 0.1em hsl( 0, 0%, 0% ), 0 0 0.5em hsl( 0, 0%, 0%, 0.5 );
  text-align: center;
  text-transform: uppercase;
  font-weight: 800;
  font-style: italic;
  font-size: calc( 6vw );
  padding: 1em 0em;
  border-radius: 1em;
  cursor: pointer;
  transition: opacity 200ms ease;
  opacity: 0.9;
  animation: tour-button-rainbow 1.9s linear infinite, tour-button-pulse 1s ease-in-out infinite;
}

@keyframes tour-button-rainbow
{
  from { background-position: 50% 0%;   }
  to   { background-position: 50% 200%; }
}

@keyframes tour-button-pulse
{
  0%, 100% { transform: scale( 0.97 ); }
  50%      { transform: scale( 1.02 ); }
}

@media ( orientation: landscape )
{
  /* Landscape assumed height (100vw wide): 4:3 (75vw) to 16:9 (56.25vw), midpoint ~66vw. */
  tour-big-button:hover
  {
    opacity: 1;
  }

  tour-close-button
  {
    top: 1.5vw;
    right: 1.5vw;
    width: 2.5vw;
    height: 2.5vw;
    font-size: 1.4vw;
    line-height: 2.5vw;
  }

  tour-big-button
  {
    width: 40%;
    font-size: 2vw;
  }

  tour-content
  {
    padding: 4vw 20vw;
    min-height: 25vw;
  }
}