@font-face {
  font-family: "Indie Flower";
  src: url(assets/fonts/IndieFlower-Regular.ttf) format("truetype");
}
* {
  vertical-align: baseline;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  font-size: 100%;
  border: 0 none;
  outline: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}
body #embed-host {
  height: 100%;
}
body .ui {
  padding: 12px 12px;
  pointer-events: none;
}
body .ui .ui-interaction-detail {
  position: relative;
  left: 50%;
  top: 2%;
  text-align: center;
  background-color: #fff;
  border: 4px solid #000;
  font-size: 150%;
  border-radius: 8px;
  padding: 8px;
  padding-left: 10px;
  padding-right: 10px;
  opacity: 1;
  transition: top 1s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.1s ease-in-out;
  animation: rotate-minor 3s;
  animation-iteration-count: infinite;
  transform-origin: 0 0;
  transform: translate3d(-50%, 0, 0);
  max-width: 50vw;
}
body .ui .ui-interaction-detail.hidden {
  top: -12%;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  body .ui .ui-interaction-detail {
    position: absolute;
    font-size: 250%;
  }
}
body .ui .ui-text {
  position: relative;
  padding: 12px 12px;
  padding-top: 16px;
  color: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100vw;
  margin-top: 40px;
  font-family: "Indie Flower";
  background: rgba(0, 0, 0, 0.8666666667);
  border-radius: 8px;
  border: 2px solid #fff;
}
body .ui .ui-text.shake {
  animation: shake-text 0.25s;
  animation-iteration-count: infinite;
}
body .ui .ui-text .ui-text-graphic {
  width: 32px;
  opacity: 0.2;
  margin-bottom: 8px;
}
body .ui .ui-text .ui-text-line {
  width: 20%;
  opacity: 0.2;
  border-top: 1px solid #eee;
  margin-bottom: 32px;
}
body .ui .ui-text .ui-text-line:last-child {
  margin-top: 32px;
  margin-bottom: unset;
}
body .ui .ui-text .ui-text-indicator {
  font-size: 80%;
  color: #eee;
  position: absolute;
  right: 4px;
  bottom: 0;
}
body .ui .ui-text .ui-text-contents,
body .ui .ui-text .ui-text-option {
  font-size: 120%;
}
@media screen and (max-width: 768px) {
  body .ui .ui-text {
    top: unset !important;
    left: unset !important;
  }
}
@media screen and (min-width: 768px) {
  body .ui .ui-text {
    margin-top: unset;
    max-width: 50vw;
    position: absolute;
    transform: translate3d(-50%, -100%, 0);
  }
  body .ui .ui-text .ui-text-contents,
  body .ui .ui-text .ui-text-option {
    font-size: 150%;
  }
}
body .ui .ui-text.inverse {
  background: #fff;
  color: #000;
  padding: 4px 4px;
  padding-top: 0;
  border: 4px solid #000;
}
body .ui .ui-text.bottom {
  top: unset !important;
  bottom: 10vh;
}
body .ui .ui-text .ui-text-option-container {
  display: flex;
  flex-direction: row;
  row-gap: 1px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
  max-width: 652.8px;
}
body .ui .ui-text .ui-text-option-container .ui-text-option {
  border-radius: 8px;
  color: #000;
  background: #fff;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  border: 4px solid #000;
  height: 100%;
  pointer-events: auto;
}
body .ui .ui-text .ui-text-option-container .ui-text-option.visible {
  animation: pop 0.65s;
}
body .ui .ui-text .ui-text-option-container .ui-text-option:not(.visible):hover {
  cursor: pointer;
  animation: rotate-small 2s;
  animation-iteration-count: infinite;
  transform: scale3d(1.1, 1.1, 1);
}
body .ui .ui-text.textonly {
  opacity: 0;
  border: none;
  background-color: unset;
  top: unset;
  bottom: unset;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  animation: fade-in 2s forwards;
  animation-delay: 0.65s;
}
body .ui .ui-text.textonly .ui-text-contents {
  filter: blur(8px);
  animation: blur-in 2s forwards;
  animation-delay: 1s;
}
@media screen and (max-width: 768px) {
  body .ui .ui-text.textonly {
    top: 50% !important;
    left: 50% !important;
    margin-top: unset;
  }
}

.rendercanvas {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: filter 0.5s ease-in-out;
}
.rendercanvas.invert {
  filter: invert(1) !important;
}
.rendercanvas.dark {
  filter: brightness(0.25);
}
.rendercanvas.shake {
  animation: shake 0.2s;
  animation-iteration-count: infinite;
}
.rendercanvas.blur {
  filter: brightness(0.35);
  transition: filter 1s ease-in-out;
}

.splash {
  z-index: 1;
  left: 0;
  top: 0;
  position: absolute;
  background-color: #000;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  transition: opacity 4s ease-in-out 2s;
}
.splash.hidden {
  opacity: 0;
}
.splash.hidden.uneventful {
  pointer-events: none;
}
.splash.hidden .splash-logo,
.splash.hidden .splash-text {
  transform: translate3d(0, -60vh, 0);
}
.splash.hidden svg {
  transform: translate3d(0, -80vh, 0);
}
.splash svg {
  height: 100px;
  position: absolute;
  bottom: 20%;
  transition: transform 1s ease-in-out 0.2s;
}
.splash svg circle {
  opacity: 0;
  stroke-dashoffset: 125;
  transition: opacity 1s ease, stroke-dashoffset 1s ease;
}
.splash .splash-logo {
  transform: translate3d(0, 0, 0);
  transition: transform 1s ease-in-out;
  width: 12vh;
  height: 12vh;
  filter: drop-shadow(2px 2px 0px #fff) drop-shadow(-2px -2px 0px #fff);
  animation: fade-in 0.5s;
}
.splash .splash-text {
  transform: translate3d(0, 0, 0);
  transition: transform 1s ease-in-out 0.1s;
  color: #fff;
  font-size: larger;
  padding: 4px;
  animation: fade-in 0.5s;
}

.ui-questionmark {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  transform-origin: 0 50%;
  animation: rotate 2s;
  animation-iteration-count: infinite;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.ui-questionmark.active {
  pointer-events: auto;
  opacity: 1;
}
.ui-questionmark.active:hover {
  cursor: pointer;
}

.ui-demo-text {
  position: absolute;
  font-size: xx-large;
  font-weight: bold;
  bottom: 0;
  left: 50%;
  color: #000;
  transform: translate3d(-50%, 0, 0);
  transition: opacity 0.5s ease-in-out;
  font-family: "Indie Flower";
  opacity: 0;
}
.ui-demo-text.active {
  opacity: 1;
}

.ui {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}
.ui .ui-menu {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.ui .ui-menu.active {
  opacity: 1;
}
.ui .ui-menu .ui-menu-image {
  animation: hover-menu 15s;
  animation-iteration-count: infinite;
}
.ui .ui-menu .ui-menu-image,
.ui .ui-menu .ui-menu-image-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}
.ui .ui-speaker {
  position: absolute;
  max-width: 96px;
  max-height: 96px;
  object-fit: cover;
  border: 4px solid #333;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 100%;
  padding: 8px;
  top: 2.5vh;
  right: 2.5vh;
}
.ui .ui-joystick {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 15vh;
  opacity: 0.7;
  visibility: visible;
}
.ui .ui-joystick.force-show {
  visibility: visible;
}
.ui .ui-joystick.force-hide {
  visibility: hidden;
}
@media screen and (min-width: 768px) {
  .ui .ui-joystick {
    visibility: hidden;
  }
}
.ui .ui-joystick .ui-joystick-outer {
  width: 8vh;
  height: 8vh;
  background-color: #333;
  border-radius: 100%;
  border: 0.6vh solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ui .ui-joystick .ui-joystick-outer .ui-joystick-inner {
  width: 6vh;
  height: 6vh;
  background-color: #eee;
  border-radius: 100%;
  border: 0.6vh solid #000;
}
.ui .ui-screeneffect-vignette {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.65) 0%, #000 40%);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.ui .ui-screeneffect-vignette.active {
  opacity: 1;
}
.ui .ui-screeneffect-dark {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 10%, #000 70%);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.ui .ui-screeneffect-dark.active {
  opacity: 1;
}
.ui .ui-screeneffect-night {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 10%, rgba(0, 15, 30, 0.6) 60%), linear-gradient(to top, rgba(0, 0, 0, 0) 50%, #000 100%);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.ui .ui-screeneffect-night.active {
  opacity: 1;
}
.ui .ui-screeneffect-darkgrey {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.6) 60%);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.ui .ui-screeneffect-darkgrey.active {
  opacity: 1;
}
.ui .ui-screeneffect-grey {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.3) 60%);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.ui .ui-screeneffect-grey.active {
  opacity: 1;
}
.ui .ui-screeneffect-grey.double {
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.6) 60%);
}
.ui .ui-screeneffect-white {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 10%, #fff 100%);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.ui .ui-screeneffect-white.active {
  opacity: 1;
}
.ui .ui-screeneffect-flash {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background: #eee;
  transition: opacity 0.5s linear;
  opacity: 0;
}
.ui .ui-screeneffect-flash.active {
  opacity: 1;
  transition: opacity 0.02s linear;
}
.ui .ui-screeneffect-cinematic {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.ui .ui-screeneffect-cinematic::before {
  position: absolute;
  height: 10%;
  background-color: #000;
  top: 0;
  width: 100%;
  content: "";
  pointer-events: none;
}
.ui .ui-screeneffect-cinematic::after {
  position: absolute;
  height: 10%;
  background-color: #000;
  bottom: 0;
  width: 100%;
  content: "";
  pointer-events: none;
}
.ui .ui-screeneffect-cinematic.active {
  opacity: 1;
}
.ui .ui-screeneffect-cinematic.active::after {
  pointer-events: auto;
}
.ui .ui-screeneffect-cinematic.active::before {
  pointer-events: auto;
}
.ui .ui-fade-eyes {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  animation: eyes-open 3s linear forwards;
  animation-iteration-count: 1;
}
.ui .ui-fade-eyes.active {
  pointer-events: auto;
  animation: eyes-close 1s linear forwards;
  animation-iteration-count: 1;
}
.ui .ui-fade-eyes.active .ui-fade-eyes-image {
  opacity: 0.175;
  transition: opacity 1s ease-in-out 2s;
}
.ui .ui-fade-eyes .ui-fade-eyes-image {
  width: 25%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.25s;
}
.ui .ui-fade-eyes .ui-soundring {
  min-width: 10%;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #333;
  aspect-ratio: 1/1;
  transition: transform 3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.ui .ui-fade-eyes .ui-soundring .ui-soundring-arrow {
  position: relative;
  width: 3px;
  background-color: #333;
  height: 10px;
  left: 50%;
  top: -25px;
}
.ui .ui-fade {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transition: opacity 1s ease-in-out;
  opacity: 0;
  background: #000;
}
.ui .ui-fade.active {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0s ease-in-out;
}
.ui .ui-intro {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #eee;
  pointer-events: none;
  transition: opacity 2s ease-in-out;
  opacity: 0;
}
.ui .ui-intro.active {
  opacity: 1;
  pointer-events: auto;
}
.ui .ui-intro .ui-intro-graphiccontainer {
  width: 100%;
  display: flex;
  justify-content: center;
  flex: 1;
  min-height: 0;
  background: #fff;
  transform: scale3d(1, 1, 1);
  transition: transform 10s linear;
}
.ui .ui-intro .ui-intro-graphiccontainer.animate {
  transform: scale3d(1.1, 1.1, 1.1);
}
.ui .ui-intro .ui-intro-graphiccontainer .ui-intro-graphic {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ui .ui-outro {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 10vw;
  padding-top: 20vw;
  background: #000;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 32px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  visibility: hidden;
}
.ui .ui-outro.active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
.ui .ui-outro .ui-outro-text-header {
  font-size: xx-large;
}
.ui .ui-outro .ui-outro-text-body {
  font-size: large;
}
.ui .ui-outro .ui-outro-text-header,
.ui .ui-outro .ui-outro-text-body {
  color: #fff;
}
.ui .ui-outro .ui-outro-text-credits {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: space-around;
  justify-content: space-evenly;
}
.ui .ui-outro .ui-outro-text-credits .ui-outro-text-credits-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ui .ui-outro .ui-outro-text-credits .ui-outro-text-credits-container .ui-credits-text {
  pointer-events: auto;
  user-select: all;
  -webkit-user-select: all;
  color: #fff;
}
.ui .ui-outro .ui-outro-text-credits .ui-outro-text-credits-container .ui-credits-text:first-child {
  font-size: xx-large;
}
.ui .ui-outro .ui-outro-text-credits .ui-outro-text-credits-container .ui-credits-text:nth-child(2) {
  color: #ccc;
}
.ui .ui-outro .ui-outro-text-credits .ui-outro-text-credits-container .ui-credits-text:nth-child(3) {
  color: #999;
}
.ui .ui-runemaker {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  pointer-events: none;
  visibility: hidden;
}
.ui .ui-runemaker.active {
  pointer-events: auto;
  visibility: visible;
}
.ui .ui-runemaker .ui-runemaker-list {
  display: flex;
  gap: 24px;
  align-content: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 40%;
  padding-left: 0;
  padding-right: 0;
  max-width: 1400px;
}
@media screen and (min-width: 768px) {
  .ui .ui-runemaker .ui-runemaker-list {
    padding-left: 256px;
    padding-right: 256px;
  }
}
.ui .ui-runemaker .ui-runemaker-list .ui-runemaker-rune {
  border-radius: 100%;
  outline: 4px solid #000;
  background-image: url("assets/sprites/spritesheet_runes.png");
  background-color: #fff;
  width: 64px;
  height: 64px;
  pointer-events: auto;
}
.ui .ui-runemaker .ui-runemaker-list .ui-runemaker-rune:hover {
  cursor: pointer;
  animation: rotate-small 2s;
  animation-iteration-count: infinite;
  transform: scale3d(1.1, 1.1, 1);
}
.ui .ui-peek {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
}
.ui .ui-peek.active {
  pointer-events: auto;
  visibility: visible;
}
.ui .ui-peek.active.disabled {
  pointer-events: none;
}
.ui .ui-peek .ui-peek-canvas {
  position: absolute;
  touch-action: none;
  max-width: 100%;
  max-height: 100%;
  mix-blend-mode: difference;
  width: 100%;
  height: 100%;
}
.ui .ui-peek .ui-peek-canvas.shake {
  animation: shake-trans 0.3s;
  animation-iteration-count: infinite;
}
.ui .ui-peek .ui-peek-canvas.disabled {
  pointer-events: none;
}
.ui .ui-peek .ui-peek-canvas:hover {
  cursor: crosshair;
}
.ui .ui-craft {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.ui .ui-craft.active {
  pointer-events: auto;
  opacity: 1;
}
.ui .ui-craft .ui-craft-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ui .ui-craft .ui-craft-container .ui-craft-canvas-container {
  flex-shrink: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: filter 0.15s ease-in-out;
}
.ui .ui-craft .ui-craft-container .ui-craft-canvas-container.filter {
  filter: invert(1) drop-shadow(0 0 8px #000);
  animation: shake 0.5s;
}
.ui .ui-craft .ui-craft-container .ui-craft-canvas-container .ui-craft-canvas {
  position: absolute;
  touch-action: none;
  max-width: 100%;
  max-height: 100%;
  mix-blend-mode: difference;
  animation: shake-trans 0.3s;
  animation-iteration-count: infinite;
  transition: opacity 0.5s ease-in-out;
  width: 100%;
  height: 100%;
}
.ui .ui-craft .ui-craft-container .ui-craft-canvas-container .ui-craft-canvas.transparent {
  opacity: 0.25;
}
.ui .ui-craft .ui-craft-container .ui-craft-canvas-container .ui-craft-canvas.canvas-helper {
  width: 70vh;
  height: 55vh;
  opacity: 0.15;
  border: none;
  cursor: none;
  pointer-events: none;
  filter: none;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.ui .ui-craft .ui-craft-container .ui-craft-canvas-container .ui-craft-canvas:hover {
  cursor: crosshair;
}
.ui .ui-craft .ui-craft-container .ui-craft-canvas-container .ui-craft-options {
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
}
.ui .ui-craft .ui-craft-container .ui-craft-canvas-container .ui-round-button {
  margin: 4px;
  width: 60px;
  height: 60px;
  background: #fff;
  border: 4px solid #000;
  border-radius: 100%;
  padding: 4px;
}
.ui .ui-craft .ui-craft-container .ui-craft-canvas-container .ui-round-button.trivial {
  opacity: 0.3;
  transition: opacity 0.25s;
}
.ui .ui-craft .ui-craft-container .ui-craft-canvas-container .ui-round-button.trivial:hover {
  opacity: 1;
  cursor: pointer;
}
.ui .ui-craft .ui-craft-container .ui-craft-button {
  background: rgba(255, 255, 255, 0);
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-in-out;
}
.ui .ui-craft .ui-craft-container .ui-craft-button.active {
  pointer-events: auto;
  opacity: 1;
}
.ui .ui-craft .ui-craft-container .ui-craft-button:hover {
  cursor: pointer;
}
.ui .ui-craft .ui-craft-container .ui-craft-graphic {
  border: 1px solid #333;
  background: #fff;
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.ui .ui-craft .ui-craft-container .ui-craft-graphic.negative {
  background: #ff0000;
}
.ui .ui-craft .ui-craft-container .ui-craft-graphic.positive {
  background: #00ff00;
}
.ui .ui-puzzle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.ui .ui-puzzle .ui-puzzle-image {
  position: absolute;
  right: 48px;
  bottom: 20px;
  width: 11vh;
  height: 11vh;
  margin: 20px;
  filter: drop-shadow(0px 1px 2px #888);
  transform: translate3d(0, 80%, 0);
  visibility: hidden;
  transition: transform 0.633s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media screen and (min-width: 768px) {
  .ui .ui-puzzle .ui-puzzle-image {
    width: 15vh;
    height: 15vh;
    right: 176px;
  }
}
.ui .ui-puzzle .ui-puzzle-image.invert {
  filter: invert(1);
}
.ui .ui-puzzle .ui-puzzle-image.visible {
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
}
.ui .ui-puzzle .ui-puzzle-image.visible.active {
  animation: focus 2s;
  animation-iteration-count: infinite;
  transform: translate3d(0, 0, 0);
}
.ui .ui-puzzle .ui-puzzle-image.visible.active:hover {
  transform: translate3d(0, 0, 0);
}
.ui .ui-puzzle .ui-puzzle-image.visible:hover {
  transform: translate3d(0, 30%, 0);
}
.ui .ui-puzzle .ui-puzzle-container {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease, transform 1s ease;
  transform: scale3d(0, 0, 0);
}
.ui .ui-puzzle .ui-puzzle-container.visible {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}
.ui .ui-puzzle .ui-puzzle-container.visible .ui-puzzle-button.visible {
  visibility: visible;
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 20vw;
  padding-right: 20vw;
  padding-top: 20vh;
  padding-bottom: 20vh;
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-container-layout-top,
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-container-layout-center,
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-container-layout-bottom {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-container-layout-top,
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-container-layout-bottom {
  justify-content: center;
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-container-layout-center {
  justify-content: space-evenly;
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-button {
  visibility: hidden;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: auto;
  width: 120px;
  height: 120px;
  border-radius: 100%;
  border: 2px solid #333;
  padding: 16px;
  object-fit: cover;
  transform: translate3d(0, 0, 0);
  transition: transform 0.25s ease;
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-button:not(.inactive):hover {
  cursor: pointer;
  transform: translate3d(0, -3%, 0);
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-button:not(.inactive):active {
  transform: translate3d(0, 20%, 0);
  transition: transform 0.025s ease;
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-button.inactive {
  filter: saturate(0);
  background: #fff !important;
  opacity: 0.5;
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-button.inactive:active {
  animation: horizontal-shaking 0.1s;
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-button.first {
  background: #9d434c;
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-button.second {
  background: #ff881a;
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-button.third {
  background: #ff5fec;
}
.ui .ui-puzzle .ui-puzzle-container .ui-puzzle-container-layout .ui-puzzle-button.fourth {
  background: #85baff;
}
.ui .ui-eyes,
.ui .ui-binoculars,
.ui .ui-map {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.ui .ui-eyes .ui-eyes-image,
.ui .ui-eyes .ui-binoculars-image,
.ui .ui-eyes .ui-map-image,
.ui .ui-binoculars .ui-eyes-image,
.ui .ui-binoculars .ui-binoculars-image,
.ui .ui-binoculars .ui-map-image,
.ui .ui-map .ui-eyes-image,
.ui .ui-map .ui-binoculars-image,
.ui .ui-map .ui-map-image {
  position: absolute;
  left: -24px;
  bottom: 8px;
  width: 11vh;
  height: 11vh;
  margin: 20px;
  margin-left: 0;
  margin-right: 0;
  pointer-events: auto;
  filter: drop-shadow(0px 1px 2px #888);
  transform: translate3d(0, 80%, 0);
  transition: transform 0.633s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media screen and (min-width: 768px) {
  .ui .ui-eyes .ui-eyes-image,
  .ui .ui-eyes .ui-binoculars-image,
  .ui .ui-eyes .ui-map-image,
  .ui .ui-binoculars .ui-eyes-image,
  .ui .ui-binoculars .ui-binoculars-image,
  .ui .ui-binoculars .ui-map-image,
  .ui .ui-map .ui-eyes-image,
  .ui .ui-map .ui-binoculars-image,
  .ui .ui-map .ui-map-image {
    width: 15vh;
    height: 15vh;
    left: -8px;
    bottom: 20px;
  }
}
.ui .ui-eyes .ui-eyes-image.visible,
.ui .ui-eyes .ui-binoculars-image.visible,
.ui .ui-eyes .ui-map-image.visible,
.ui .ui-binoculars .ui-eyes-image.visible,
.ui .ui-binoculars .ui-binoculars-image.visible,
.ui .ui-binoculars .ui-map-image.visible,
.ui .ui-map .ui-eyes-image.visible,
.ui .ui-map .ui-binoculars-image.visible,
.ui .ui-map .ui-map-image.visible {
  cursor: pointer;
}
.ui .ui-eyes .ui-eyes-image.visible.active,
.ui .ui-eyes .ui-binoculars-image.visible.active,
.ui .ui-eyes .ui-map-image.visible.active,
.ui .ui-binoculars .ui-eyes-image.visible.active,
.ui .ui-binoculars .ui-binoculars-image.visible.active,
.ui .ui-binoculars .ui-map-image.visible.active,
.ui .ui-map .ui-eyes-image.visible.active,
.ui .ui-map .ui-binoculars-image.visible.active,
.ui .ui-map .ui-map-image.visible.active {
  animation: focus 2s;
  animation-iteration-count: infinite;
  transform: translate3d(0, -50%, 0);
}
.ui .ui-eyes .ui-eyes-image.visible.active:hover,
.ui .ui-eyes .ui-binoculars-image.visible.active:hover,
.ui .ui-eyes .ui-map-image.visible.active:hover,
.ui .ui-binoculars .ui-eyes-image.visible.active:hover,
.ui .ui-binoculars .ui-binoculars-image.visible.active:hover,
.ui .ui-binoculars .ui-map-image.visible.active:hover,
.ui .ui-map .ui-eyes-image.visible.active:hover,
.ui .ui-map .ui-binoculars-image.visible.active:hover,
.ui .ui-map .ui-map-image.visible.active:hover {
  transform: translate3d(0, 0, 0);
}
.ui .ui-eyes .ui-eyes-image.visible:hover,
.ui .ui-eyes .ui-binoculars-image.visible:hover,
.ui .ui-eyes .ui-map-image.visible:hover,
.ui .ui-binoculars .ui-eyes-image.visible:hover,
.ui .ui-binoculars .ui-binoculars-image.visible:hover,
.ui .ui-binoculars .ui-map-image.visible:hover,
.ui .ui-map .ui-eyes-image.visible:hover,
.ui .ui-map .ui-binoculars-image.visible:hover,
.ui .ui-map .ui-map-image.visible:hover {
  transform: translate3d(0, 40%, 0);
}
.ui .ui-map,
.ui .ui-utilmodal {
  width: 100%;
  height: 100%;
}
.ui .ui-map .ui-map-container .ui-map-content-container-summary,
.ui .ui-utilmodal .ui-map-container .ui-map-content-container-summary {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: #fff;
  outline: 1px solid #000;
  display: none;
  padding: 8px;
  justify-content: left;
}
.ui .ui-map .ui-map-container .ui-map-content-container-summary.active,
.ui .ui-utilmodal .ui-map-container .ui-map-content-container-summary.active {
  display: block;
}
.ui .ui-map .ui-map-container .ui-map-content-container-summary .ui-map-summary-container,
.ui .ui-utilmodal .ui-map-container .ui-map-content-container-summary .ui-map-summary-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
}
.ui .ui-map .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-container-header,
.ui .ui-utilmodal .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-container-header {
  font-size: large;
  align-self: center;
  margin-bottom: 16px;
}
.ui .ui-map .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue,
.ui .ui-utilmodal .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.ui .ui-map .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue.active,
.ui .ui-utilmodal .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue.active {
  animation: text-pulse 1.25s;
  animation-iteration-count: infinite;
}
.ui .ui-map .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue .ui-map-summary-clue-image,
.ui .ui-utilmodal .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue .ui-map-summary-clue-image {
  height: 32px;
  width: 32px;
  border: 2px solid #333;
  border-radius: 25%;
  transition: transform 0.05s linear;
  transform: translate3d(0, 0, 0);
}
.ui .ui-map .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue .ui-map-summary-clue-image.invert,
.ui .ui-utilmodal .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue .ui-map-summary-clue-image.invert {
  border: 2px solid #eee;
  filter: invert(1);
  box-shadow: 2px 2px 0 0 #eee !important;
}
.ui .ui-map .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue .ui-map-summary-clue-image.invert:hover,
.ui .ui-utilmodal .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue .ui-map-summary-clue-image.invert:hover {
  border: 4px solid #eee !important;
}
.ui .ui-map .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue .ui-map-summary-clue-image.clickable,
.ui .ui-utilmodal .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue .ui-map-summary-clue-image.clickable {
  animation: focus-bounce-clean 1.5s;
  animation-iteration-count: infinite;
  box-shadow: 2px 2px 0 0 #333;
}
.ui .ui-map .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue .ui-map-summary-clue-image.clickable:hover,
.ui .ui-utilmodal .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue .ui-map-summary-clue-image.clickable:hover {
  border: 4px solid #333;
  cursor: pointer;
  transform: translate3d(0, -15%, 0);
}
.ui .ui-map .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue .ui-map-summary-clue-image.clickable:active,
.ui .ui-utilmodal .ui-map-container .ui-map-content-container-summary .ui-map-summary-container .ui-map-summary-clue .ui-map-summary-clue-image.clickable:active {
  transform: translate3d(0, 10%, 0);
}
.ui .ui-map .ui-map-container .ui-map-area,
.ui .ui-utilmodal .ui-map-container .ui-map-area {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(-50%, -50%, 0);
  outline: 1px solid #000;
  opacity: 0.2;
  border-radius: 100%;
  transition: opacity 0.2s;
}
.ui .ui-map .ui-map-container .ui-map-area:hover,
.ui .ui-utilmodal .ui-map-container .ui-map-area:hover {
  cursor: pointer;
  outline: 2px solid #000;
  opacity: 1;
}
.ui .ui-map .ui-map-container .ui-map-area:hover .ui-map-area-name,
.ui .ui-utilmodal .ui-map-container .ui-map-area:hover .ui-map-area-name {
  opacity: 1;
}
.ui .ui-map .ui-map-container .ui-map-area:hover .ui-map-area-text,
.ui .ui-utilmodal .ui-map-container .ui-map-area:hover .ui-map-area-text {
  opacity: 1;
}
.ui .ui-map .ui-map-container .ui-map-area.active,
.ui .ui-utilmodal .ui-map-container .ui-map-area.active {
  animation: focus-bounce-center 1s;
  animation-iteration-count: infinite;
  outline: 2px solid #000;
  opacity: 1;
}
.ui .ui-map .ui-map-container .ui-map-area .ui-map-area-name,
.ui .ui-utilmodal .ui-map-container .ui-map-area .ui-map-area-name {
  transform: translate3d(0, -125%, 0);
  position: absolute;
  top: 0;
  background: radial-gradient(#fff 50%, transparent);
  padding: 8px;
  border-radius: 4px;
  font-size: xx-large;
  font-weight: bold;
  font-family: "Indie Flower";
  opacity: 0;
  white-space: nowrap;
}
.ui .ui-map .ui-map-container .ui-map-area .ui-map-area-text,
.ui .ui-utilmodal .ui-map-container .ui-map-area .ui-map-area-text {
  pointer-events: none;
  transition: opacity 0.2s;
  font-size: xx-large;
  font-family: "Indie Flower";
  opacity: 0;
  min-width: 100px;
  text-align: center;
  background: radial-gradient(#fff 50%, transparent);
  padding: 8px;
}
.ui .ui-map .ui-map-container,
.ui .ui-map .ui-utilmodal-container,
.ui .ui-utilmodal .ui-map-container,
.ui .ui-utilmodal .ui-utilmodal-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
  padding: 8px;
  padding-top: 10vh;
  padding-bottom: 35vh;
}
@media screen and (min-width: 768px) {
  .ui .ui-map .ui-map-container,
  .ui .ui-map .ui-utilmodal-container,
  .ui .ui-utilmodal .ui-map-container,
  .ui .ui-utilmodal .ui-utilmodal-container {
    padding: 96px;
  }
}
.ui .ui-map .ui-map-container.active,
.ui .ui-map .ui-utilmodal-container.active,
.ui .ui-utilmodal .ui-map-container.active,
.ui .ui-utilmodal .ui-utilmodal-container.active {
  pointer-events: auto;
  display: block;
}
.ui .ui-map .ui-map-container.active .ui-map-content,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content {
  width: 100%;
  height: 100%;
  box-shadow: 1px 1px 8px #000;
  background-color: #fff;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .ui .ui-map .ui-map-container.active .ui-map-content,
  .ui .ui-map .ui-map-container.active .ui-utilmodal-content,
  .ui .ui-map .ui-utilmodal-container.active .ui-map-content,
  .ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content,
  .ui .ui-utilmodal .ui-map-container.active .ui-map-content,
  .ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content,
  .ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content,
  .ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content {
    padding: 16px;
  }
}
.ui .ui-map .ui-map-container.active .ui-map-content .ui-utilmodal-content-container,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-utilmodal-content-container,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid #000;
  background-color: #fff;
}
.ui .ui-map .ui-map-container.active .ui-map-content .ui-utilmodal-content-container,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-utilmodal-content-container,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container {
  overflow-y: auto;
}
.ui .ui-map .ui-map-container.active .ui-map-content .ui-map-content-container,
.ui .ui-map .ui-map-container.active .ui-map-content .ui-utilmodal-content-container,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-map-content-container,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-map-content-container,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-map-content-container,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-utilmodal-content-container,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-map-content-container,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-map-content-container,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.ui .ui-map .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text {
  object-fit: contain;
  font-size: xx-large;
  font-family: "Indie Flower";
  font-weight: bold;
  text-align: center;
  padding: 32px;
  visibility: hidden;
}
.ui .ui-map .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image.active,
.ui .ui-map .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text.active,
.ui .ui-map .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image.active,
.ui .ui-map .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text.active,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image.active,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text.active,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image.active,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text.active,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image.active,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text.active,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image.active,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text.active,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image.active,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text.active,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image.active,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text.active,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image.active,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text.active,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image.active,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text.active,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image.active,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text.active,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image.active,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text.active,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image.active,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text.active,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image.active,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text.active,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image.active,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text.active,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image.active,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text.active {
  visibility: visible;
}
.ui .ui-map .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text {
  height: 100%;
}
@media screen and (min-width: 768px) {
  .ui .ui-map .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text,
  .ui .ui-map .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
  .ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text,
  .ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
  .ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text,
  .ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
  .ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text,
  .ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
  .ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text,
  .ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
  .ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text,
  .ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
  .ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-text,
  .ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-text,
  .ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-text,
  .ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-text {
    height: unset;
  }
}
.ui .ui-map .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image {
  width: 100%;
  height: 100%;
}
.ui .ui-map .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image.invert,
.ui .ui-map .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image.invert,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image.invert,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image.invert,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image.invert,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image.invert,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image.invert,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image.invert,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image.invert,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image.invert,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image.invert,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image.invert,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-utilmodal-content-image.invert,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-utilmodal-content-image.invert,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-utilmodal-content-image.invert,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-utilmodal-content-image.invert {
  filter: invert(1);
}
.ui .ui-map .ui-map-container.active .ui-map-content .ui-map-content-container .ui-map-content-container-overview,
.ui .ui-map .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-map-content-container-overview,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-map-content-container-overview,
.ui .ui-map .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-map-content-container-overview,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-map-content-container-overview,
.ui .ui-map .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-map-content-container-overview,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-map-content-container-overview,
.ui .ui-map .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-map-content-container-overview,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-map-content-container .ui-map-content-container-overview,
.ui .ui-utilmodal .ui-map-container.active .ui-map-content .ui-utilmodal-content-container .ui-map-content-container-overview,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-map-content-container .ui-map-content-container-overview,
.ui .ui-utilmodal .ui-map-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-map-content-container-overview,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-map-content-container .ui-map-content-container-overview,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-map-content .ui-utilmodal-content-container .ui-map-content-container-overview,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-map-content-container .ui-map-content-container-overview,
.ui .ui-utilmodal .ui-utilmodal-container.active .ui-utilmodal-content .ui-utilmodal-content-container .ui-map-content-container-overview {
  width: 100%;
  height: 100%;
  outline: 4px solid black;
  border: none;
  object-fit: contain;
}
.ui .ui-map .ui-map-image,
.ui .ui-utilmodal .ui-map-image {
  left: 50%;
  transform: translate3d(-50%, 80%, 0);
  margin-left: 0;
  margin-right: 0;
  visibility: hidden;
}
.ui .ui-map .ui-map-image.visible,
.ui .ui-utilmodal .ui-map-image.visible {
  visibility: visible;
}
.ui .ui-map .ui-map-image.visible.active,
.ui .ui-utilmodal .ui-map-image.visible.active {
  animation: focus 2s;
  animation-iteration-count: infinite;
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}
.ui .ui-map .ui-map-image.visible.active:hover,
.ui .ui-utilmodal .ui-map-image.visible.active:hover {
  transform: translate3d(-50%, 0, 0);
  opacity: 1;
}
.ui .ui-map .ui-map-image.visible:hover,
.ui .ui-utilmodal .ui-map-image.visible:hover {
  transform: translate3d(-50%, 30%, 0);
  opacity: 1;
}
.ui .ui-map .ui-map-marker,
.ui .ui-utilmodal .ui-map-marker {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0;
  left: 0;
  transform: translate3d(-50%, -50%, 0) scale3d(1.3, 1.3, 1);
  border-radius: 100%;
  border: 2px solid #000;
  filter: drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 4px #fff);
  animation: rotate-center 2s;
  animation-iteration-count: infinite;
}
@media screen and (min-width: 768px) {
  .ui .ui-map .ui-map-marker,
  .ui .ui-utilmodal .ui-map-marker {
    width: 40px;
    height: 40px;
    border: 4px solid #000;
  }
}
.ui .ui-binoculars .ui-binoculars-image {
  left: 48px;
}
@media screen and (min-width: 768px) {
  .ui .ui-binoculars .ui-binoculars-image {
    left: 120px;
  }
}
.ui .ui-journal {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.ui .ui-journal .ui-journal-container {
  pointer-events: none;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 24px;
  padding-top: 128px;
  padding-bottom: 0;
}
.ui .ui-journal .ui-journal-container.active {
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.2);
}
.ui .ui-journal .ui-journal-container .ui-journal-container-content {
  width: 100%;
  height: 100%;
  background-color: #eee;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgb(0, 0, 0) -15%, rgb(255, 255, 255) 5%);
  padding: 32px;
  padding-top: 4vh;
  padding-bottom: 12vh;
  opacity: 0;
  transform: translate3d(0, 35%, 0);
  transition: transform 0.633s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.633s cubic-bezier(0.075, 0.82, 0.165, 1);
  pointer-events: none;
  font-family: "Indie Flower";
  border-radius: 4px 4px 0 0;
  overflow: auto;
}
.ui .ui-journal .ui-journal-container .ui-journal-container-content.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
@media screen and (min-width: 768px) {
  .ui .ui-journal .ui-journal-container .ui-journal-container-content {
    padding: 10vh;
  }
}
.ui .ui-journal .ui-journal-container .ui-journal-container-content .journalentry-topic {
  padding-top: 16px;
  margin-bottom: 16px;
  font-size: 40px;
  font-weight: 700;
}
.ui .ui-journal .ui-journal-container .ui-journal-container-content .journalentry-topic:not(:last-of-type) {
  border-bottom: 1px solid #333;
}
.ui .ui-journal .ui-journal-container .ui-journal-container-content .journalentry-topic .journalentry-subject {
  border-bottom: unset;
  font-size: 32px;
  padding-top: 8px;
  padding-bottom: 16px;
  font-weight: 700;
}
.ui .ui-journal .ui-journal-container .ui-journal-container-content .journalentry-topic .journalentry-subject .journalentry-info {
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 100;
}
.ui .ui-journal .ui-journal-container .ui-journal-container-content .journalentry-topic .journalentry-subject .journalentry-info.new {
  animation: text-pulse 1.25s;
  animation-iteration-count: infinite;
}
.ui .ui-journal .ui-journal-container .ui-journal-container-content .journalentry-topic .journalentry-subject .journalentry-info .journalentry-additional {
  height: 32px;
  border: 2px solid #333;
  border-radius: 25%;
  transition: transform 0.05s linear;
  transform: translate3d(0, 0, 0);
}
.ui .ui-journal .ui-journal-container .ui-journal-container-content .journalentry-topic .journalentry-subject .journalentry-info .journalentry-additional.clickable {
  animation: rotate-small 1s;
  animation-iteration-count: infinite;
  box-shadow: 2px 2px 0 0 #333;
}
.ui .ui-journal .ui-journal-container .ui-journal-container-content .journalentry-topic .journalentry-subject .journalentry-info .journalentry-additional.clickable:hover {
  cursor: pointer;
  transform: translate3d(0, -10%, 0);
}
.ui .ui-journal .ui-journal-container .ui-journal-container-content .journalentry-topic .journalentry-subject .journalentry-info .journalentry-additional.clickable:active {
  transform: translate3d(0, 10%, 0);
}
.ui .ui-journal .ui-journal-image {
  position: absolute;
  right: -24px;
  bottom: 20px;
  width: 11vh;
  height: 11vh;
  margin: 20px;
  pointer-events: auto;
  filter: drop-shadow(0px 1px 2px #888);
  transform: translate3d(0, 80%, 0);
  transition: transform 0.633s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media screen and (min-width: 768px) {
  .ui .ui-journal .ui-journal-image {
    width: 15vh;
    height: 15vh;
    right: 48px;
  }
}
.ui .ui-journal .ui-journal-image.visible {
  cursor: pointer;
}
.ui .ui-journal .ui-journal-image.visible.active {
  animation: focus 2s;
  animation-iteration-count: infinite;
  transform: translate3d(0, 0, 0);
}
.ui .ui-journal .ui-journal-image.visible.active:hover {
  transform: translate3d(0, 0, 0);
}
.ui .ui-journal .ui-journal-image.visible:hover {
  transform: translate3d(0, 30%, 0);
}
.ui .ui-settings {
  z-index: 4;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ui .ui-settings .ui-settings-graphic {
  position: absolute;
  left: 0;
  top: 0;
  width: 15vh;
  height: 15vh;
  pointer-events: auto;
  filter: drop-shadow(0px 1px 2px #888);
  transform: translate3d(0, -60%, 0);
  opacity: 0.25;
  transition: transform 0.633s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.633s cubic-bezier(0.075, 0.82, 0.165, 1);
  cursor: pointer;
}
.ui .ui-settings .ui-settings-graphic.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.ui .ui-settings .ui-settings-graphic.active:hover {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.ui .ui-settings .ui-settings-graphic:hover {
  transform: translate3d(0, -10%, 0);
  opacity: 1;
}
.ui .ui-settings .ui-settings-modal {
  padding: 5vw;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow-y: auto;
}
.ui .ui-settings .ui-settings-modal.active {
  background-color: rgba(0, 0, 0, 0.2);
  visibility: visible;
  pointer-events: auto;
}
.ui .ui-settings .ui-settings-modal .ui-settings-content {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: unset;
  flex-wrap: wrap;
  padding: 32px;
  gap: 48px;
  overflow: auto;
  border-radius: 16px;
  flex-direction: row;
}
@media screen and (min-width: 992px) {
  .ui .ui-settings .ui-settings-modal .ui-settings-content {
    align-content: center;
  }
}
.ui .ui-settings .ui-settings-modal .ui-settings-content .ui-settings-option {
  text-decoration: none;
  color: #000;
  pointer-events: auto;
  border: 4px solid #333;
  border-radius: 16px;
  box-shadow: 2px 2px 0px black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  gap: 8px;
}
.ui .ui-settings .ui-settings-modal .ui-settings-content .ui-settings-option:hover {
  cursor: pointer;
  animation: rotate-small 2s;
  animation-iteration-count: infinite;
  transform: scale3d(1.1, 1.1, 1);
}
.ui .ui-settings .ui-settings-modal .ui-settings-content .ui-settings-option .ui-settings-option-label {
  text-decoration: none;
  color: #000;
  text-align: center;
  padding: 8px;
  font-size: xx-large;
  font-family: "Indie Flower";
  font-weight: 600;
}
.ui .ui-settings .ui-settings-modal .ui-settings-content .ui-settings-option .ui-settings-option-graphic {
  max-width: 25%;
  min-width: 128px;
}
.ui .ui-settings .ui-settings-modal .ui-settings-content .ui-settings-option .ui-settings-option-graphic.outline {
  outline: 1px solid #000;
}
.ui .ui-runes-image {
  pointer-events: auto;
  position: absolute;
  top: 0%;
  left: 50%;
  margin: 16px;
  margin-top: 4px;
  transform: translate3d(-50%, 0%, 0);
  display: none;
  opacity: 1;
  width: 11vh;
  filter: drop-shadow(0px 1px 2px #888);
  transition: transform 0.633s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.633s cubic-bezier(0.075, 0.82, 0.165, 1), left 0.633s cubic-bezier(0.075, 0.82, 0.165, 1), bottom 0.633s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}
.ui .ui-runes-image.disabled {
  opacity: 0.2;
}
.ui .ui-runes-image.active {
  display: block;
}
.ui .ui-runes-image.expanded {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .ui .ui-runes-image {
    width: 15vh;
  }
}
.ui .ui-runes-image:hover {
  opacity: 1;
  cursor: pointer;
}
.ui .ui-journal-image,
.ui .ui-binoculars-image,
.ui .ui-puzzle-image,
.ui .ui-eyes-image,
.ui .ui-map-image,
.ui .ui-settings-graphic {
  transition: transform 0.633s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.633s cubic-bezier(0.075, 0.82, 0.165, 1), left 0.633s cubic-bezier(0.075, 0.82, 0.165, 1), bottom 0.633s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}
.ui .ui-journal-image.hint,
.ui .ui-binoculars-image.hint,
.ui .ui-puzzle-image.hint,
.ui .ui-eyes-image.hint,
.ui .ui-map-image.hint,
.ui .ui-settings-graphic.hint {
  margin: 0;
  animation: focus 1s, focus-bounce 1.5s;
  animation-iteration-count: infinite;
  opacity: 1 !important;
  position: absolute;
  left: 50%;
  bottom: 50vh;
  transform: translate3d(-50%, 0, 0);
}
@media screen and (min-width: 768px) {
  .ui .ui-journal-image.hint,
  .ui .ui-binoculars-image.hint,
  .ui .ui-puzzle-image.hint,
  .ui .ui-eyes-image.hint,
  .ui .ui-map-image.hint,
  .ui .ui-settings-graphic.hint {
    bottom: 22vh;
  }
}
.ui .ui-journal-image.hint:hover,
.ui .ui-binoculars-image.hint:hover,
.ui .ui-puzzle-image.hint:hover,
.ui .ui-eyes-image.hint:hover,
.ui .ui-map-image.hint:hover,
.ui .ui-settings-graphic.hint:hover {
  transform: translate3d(-50%, 0, 0) !important;
}
.ui .ui-demo-ended {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s ease;
}
.ui .ui-demo-ended.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.ui .ui-demo-ended .ui-demo-ended-content {
  padding: 16px;
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: x-large;
  font-weight: bold;
  font-family: "Indie Flower";
  border-radius: 4px;
  outline: 4px solid #000;
}
.ui .ui-demo-ended .ui-demo-ended-content .ui-demo-ended-content-image {
  height: 25%;
  margin-bottom: -48px;
}
.ui .ui-demo-ended .ui-demo-ended-content .ui-demo-ended-content-text {
  text-align: center;
}
.ui .ui-demo-ended .ui-demo-ended-content .ui-demo-ended-content-link {
  pointer-events: all;
  color: #fff;
  background-color: #000;
  margin-top: 24px;
  outline: 2px solid #000;
  padding: 8px;
  border-radius: 4px;
}
.ui .light {
  position: absolute;
  top: 0;
  left: 0;
  width: 250%;
  height: 250%;
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 0) 5%, black 8%);
  backdrop-filter: brightness(0.6);
  opacity: 0;
  transition: opacity 0.5s;
}
.ui .light.active {
  opacity: 1;
}

.feedbackerror {
  font-size: xx-large;
  text-align: center;
  color: #fff;
}

@keyframes focus {
  0%, 100% {
    filter: brightness(0.25);
  }
  50% {
    filter: brightness(1);
  }
}
@keyframes focus-bounce-center {
  from, to {
    transform: translate3d(-50%, -50%, 0) scale(1, 1);
  }
  0%, 20% {
    transform: translate3d(-50%, -50%, 0) scale(1, 1);
  }
  80%, 100% {
    transform: translate3d(-50%, -50%, 0) scale(1, 1);
  }
  45% {
    transform: translate3d(-50%, -50%, 0) scale(0.9, 1.1);
  }
  50% {
    transform: translate3d(-50%, -50%, 0) scale(1.1, 0.9);
  }
  65% {
    transform: translate3d(-50%, -50%, 0) scale(0.95, 1.05);
  }
}
@keyframes focus-bounce-clean {
  from, to {
    transform: scale(1, 1);
  }
  0%, 20% {
    transform: scale(1, 1);
  }
  80%, 100% {
    transform: scale(1, 1);
  }
  45% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  65% {
    transform: scale(0.95, 1.05);
  }
}
@keyframes focus-bounce {
  from, to {
    transform: translate3d(-50%, 0, 0) scale(1, 1);
  }
  0%, 20% {
    transform: translate3d(-50%, 0, 0) scale(1, 1);
  }
  80%, 100% {
    transform: translate3d(-50%, 0, 0) scale(1, 1);
  }
  45% {
    transform: translate3d(-50%, 0, 0) scale(0.9, 1.1);
  }
  50% {
    transform: translate3d(-50%, 0, 0) scale(1.1, 0.9);
  }
  65% {
    transform: translate3d(-50%, 0, 0) scale(0.95, 1.05);
  }
}
@keyframes horizontal-shaking {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(15px);
  }
  50% {
    transform: translateX(-15px);
  }
  75% {
    transform: translateX(15px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes hover-menu {
  0%, 100% {
    transform: translate3d(0%, 1%, 0px) scale3d(100%, 100%, 100%);
  }
  50% {
    transform: translate3d(0%, 1%, 0px) scale3d(100%, 100%, 100%);
  }
  25%, 75% {
    transform: translate3d(0%, 0%, 0px) scale3d(102%, 100%, 100%);
  }
}
@keyframes hover {
  0%, 100% {
    transform: translate3d(-50%, 0, 0) scale3d(100%, 100%, 100%);
  }
  50% {
    transform: translate3d(-50%, 0, 0) scale3d(101%, 100%, 100%);
  }
}
@keyframes hover-smallwidth {
  0%, 100% {
    transform: scale3d(100%, 100%, 100%);
  }
  50% {
    transform: scale3d(101%, 100%, 100%);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes shake-trans {
  0% {
    transform: translate(0.5px, 0.5px);
  }
  10% {
    transform: translate(-0.5px, -1px);
  }
  20% {
    transform: translate(-1.5px, 0px);
  }
  30% {
    transform: translate(1.5px, 1px);
  }
  40% {
    transform: translate(0.5px, -0.5px);
  }
  50% {
    transform: translate(-0.5px, 1px);
  }
  60% {
    transform: translate(-1.5px, 0.5px);
  }
  70% {
    transform: translate(1.5px, 0.5px);
  }
  80% {
    transform: translate(-0.5px, -0.5px);
  }
  90% {
    transform: translate(0.5px, 1px);
  }
  100% {
    transform: translate(0.5px, -1px);
  }
}
@keyframes shake-text {
  0% {
    transform: translate3d(calc(-50% + 1px), calc(-100% + 1px), 0) rotate(0deg);
  }
  10% {
    transform: translate3d(calc(-50% - 1px), calc(-100% - 1.5px), 0) rotate(-1deg);
  }
  20% {
    transform: translate3d(calc(-50% - 2px), calc(-100% + 0px), 0) rotate(1deg);
  }
  30% {
    transform: translate3d(calc(-50% + 2px), calc(-100% + 1.5px), 0) rotate(0deg);
  }
  40% {
    transform: translate3d(calc(-50% + 1px), calc(-100% - 1px), 0) rotate(1deg);
  }
  50% {
    transform: translate3d(calc(-50% - 1px), calc(-100% + 1.5px), 0) rotate(-1deg);
  }
  60% {
    transform: translate3d(calc(-50% - 2px), calc(-100% + 1px), 0) rotate(0deg);
  }
  70% {
    transform: translate3d(calc(-50% + 2px), calc(-100% + 1px), 0) rotate(-1deg);
  }
  80% {
    transform: translate3d(calc(-50% - 1px), calc(-100% - 1px), 0) rotate(1deg);
  }
  90% {
    transform: translate3d(calc(-50% + 1px), calc(-100% + 1.5px), 0) rotate(0deg);
  }
  100% {
    transform: translate3d(calc(-50% + 1px), calc(-100% - 1.5px), 0) rotate(-1deg);
  }
}
@keyframes shake {
  0% {
    transform: translate(0.5px, 0.5px) rotate(0deg);
  }
  10% {
    transform: translate(-0.5px, -1px) rotate(-1deg);
  }
  20% {
    transform: translate(-1.5px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(1.5px, 1px) rotate(0deg);
  }
  40% {
    transform: translate(0.5px, -0.5px) rotate(1deg);
  }
  50% {
    transform: translate(-0.5px, 1px) rotate(-1deg);
  }
  60% {
    transform: translate(-1.5px, 0.5px) rotate(0deg);
  }
  70% {
    transform: translate(1.5px, 0.5px) rotate(-1deg);
  }
  80% {
    transform: translate(-0.5px, -0.5px) rotate(1deg);
  }
  90% {
    transform: translate(0.5px, 1px) rotate(0deg);
  }
  100% {
    transform: translate(0.5px, -1px) rotate(-1deg);
  }
}
@keyframes rotate {
  0%, 100% {
    rotate: -15deg;
  }
  50% {
    rotate: 15deg;
  }
}
@keyframes rotate-minor {
  0%, 100% {
    rotate: -5deg;
  }
  50% {
    rotate: 5deg;
  }
}
@keyframes rotate-small {
  25%, 75% {
    transform: rotate3d(0, 0, 1, -2deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, 2deg);
  }
}
@keyframes rotate-center {
  25%, 75% {
    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -5deg);
  }
  50% {
    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 5deg);
  }
}
@keyframes pop {
  0% {
    transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, -2deg);
  }
  40% {
    transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, 2deg);
  }
  100% {
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes eyes-open {
  0%, 20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes eyes-close {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes text-pulse {
  50% {
    opacity: 0.35;
  }
  0%, 100% {
    opacity: 1;
  }
}
@keyframes blur-in {
  0% {
    filter: blur(4px);
  }
  100% {
    filter: blur(0px);
  }
}