* {
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: Stolz;
  src: url("Stolzl-Regular.ttf");
  font-weight: normal;
}

body {
  background-color: #000000;
  overflow: hidden;
}

#application-container {
  width: 100%;
  height: 100%;
}

/************************************************************/
/********************** SEQUENCE SCREEN *********************/
/************************************************************/

.sequence-images {
  pointer-events: none;

  width: 100vw;
  height: 100vh;

  position: absolute;
  top: 0;
  left: 0;
}

.sequence-image-container {
  position: absolute;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.sequence-black-background {
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.sequence-image {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.sequence-link-buttons {
  position: absolute;
  top: 0;

  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.building-icon {
  pointer-events: none;

  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: clamp(24px, calc(24px + (100vw - 720px) * 16 / (1920 - 720)), 40px);
  height: clamp(24px, calc(24px + (100vw - 720px) * 16 / (1920 - 720)), 40px);

  background-color: #2a3441;
  border-radius: 50%;

  top: 200px;
  left: 100px;
}

.building-icon span {
  font-family: Stolz, sans-serif;
  font-weight: 400;

  font-size: clamp(12px, calc(12px + (100vw - 720px) * 3 / (1920 - 720)), 15px);
  line-height: clamp(
    17px,
    calc(17px + (100vw - 720px) * 13 / (1920 - 720)),
    30x
  );

  color: #ffffff;
  text-align: center;

  margin: auto;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.link-button {
  cursor: pointer;
  pointer-events: auto;

  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: clamp(30px, calc(30px + (100vw - 720px) * 16 / (1920 - 720)), 46px);
  height: clamp(30px, calc(30px + (100vw - 720px) * 16 / (1920 - 720)), 46px);

  top: 200px;
  left: 100px;

  transition: width 0.1s, height 0.1s;
}

.link-button .link-button-foreground {
  width: clamp(15px, calc(15px + (100vw - 720px) * 9 / (1920 - 720)), 24px);
  height: clamp(15px, calc(15px + (100vw - 720px) * 9 / (1920 - 720)), 24px);

  margin: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  transition: width 0.1s, height 0.1s;
}

.link-button .link-button-background {
  width: clamp(30px, calc(30px + (100vw - 720px) * 16 / (1920 - 720)), 46px);
  height: clamp(35px, calc(35px + (100vw - 720px) * 18 / (1920 - 720)), 53px);

  margin: auto;
  display: block;
  position: absolute;

  transition: width 0.1s, height 0.1s;
}

.link-button:hover {
  cursor: pointer;
  pointer-events: auto;

  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: clamp(38px, calc(38px + (100vw - 720px) * 16 / (1920 - 720)), 54px);
  height: clamp(38px, calc(38px + (100vw - 720px) * 16 / (1920 - 720)), 54px);

  top: 200px;
  left: 100px;

  transition: width 0.1s, height 0.1s;
}

.link-button:hover .link-button-foreground {
  width: clamp(23px, calc(23px + (100vw - 720px) * 9 / (1920 - 720)), 32px);
  height: clamp(23px, calc(23px + (100vw - 720px) * 9 / (1920 - 720)), 32px);

  margin: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  transition: width 0.1s, height 0.1s;
}

.link-button:hover .link-button-background {
  width: clamp(38px, calc(38px + (100vw - 720px) * 16 / (1920 - 720)), 54px);
  height: clamp(44px, calc(44px + (100vw - 720px) * 19 / (1920 - 720)), 63px);

  margin: auto;
  display: block;
  position: absolute;

  transition: width 0.1s, height 0.1s;
}

.link-button:active {
  cursor: pointer;
  pointer-events: auto;

  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: clamp(26px, calc(26px + (100vw - 720px) * 16 / (1920 - 720)), 42px);
  height: clamp(26px, calc(26px + (100vw - 720px) * 16 / (1920 - 720)), 42px);

  top: 200px;
  left: 100px;

  transition: width 0.1s, height 0.1s;
}

.link-button:active .link-button-foreground {
  width: clamp(11px, calc(11px + (100vw - 720px) * 9 / (1920 - 720)), 20px);
  height: clamp(11px, calc(11px + (100vw - 720px) * 9 / (1920 - 720)), 20px);

  margin: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  transition: width 0.1s, height 0.1s;
}

.link-button:active .link-button-background {
  width: clamp(26px, calc(26px + (100vw - 720px) * 16 / (1920 - 720)), 42px);
  height: clamp(30px, calc(30px + (100vw - 720px) * 19 / (1920 - 720)), 49px);

  margin: auto;
  display: block;
  position: absolute;

  transition: width 0.1s, height 0.1s;
}

/************************************************************/
/********************** PANORAMA SCREEN *********************/
/************************************************************/

.panorama-gradient {
  position: absolute;
  top: 0;

  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.panorama-radial-gradient {
  position: absolute;
  top: 0;

  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;

  background: radial-gradient(#00000000, #2f3340bf);

  opacity: 0;
}

.panorama-linear-gradient {
  position: absolute;
  top: 0;

  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;

  background: linear-gradient(
    0deg,
    rgba(47, 51, 64, 0) 0%,
    rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0) 78%,
    rgba(47, 51, 64, 0.5) 100%
  );
}

.panorama-link-buttons {
  position: absolute;
  top: 0;

  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.panorama-link-button {
  cursor: pointer;
  pointer-events: auto;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: clamp(44px, calc(44px + (100vw - 720px) * 12 / (1920 - 720)), 56px);
  height: clamp(44px, calc(44px + (100vw - 720px) * 12 / (1920 - 720)), 56px);

  background-color: #2a3441;
  border-radius: 50%;

  transition: width 0.1s, height 0.1s;
}

.panorama-link-button-master-container {
  position: absolute;

  width: 30px;
  height: 30px;

  justify-items: center;
  text-align: center;
}

.panorama-link-button:hover {
  width: clamp(47px, calc(47px + (100vw - 720px) * 13 / (1920 - 720)), 60px);
  height: clamp(47px, calc(47px + (100vw - 720px) * 13 / (1920 - 720)), 60px);

  transition: width 0.1s, height 0.1s;
}

.panorama-link-button.white {
  background-color: #ffffff;
}

.panorama-link-button img {
  width: clamp(23px, calc(23px + (100vw - 720px) * 7 / (1920 - 720)), 30px);
  height: clamp(23px, calc(23px + (100vw - 720px) * 7 / (1920 - 720)), 30px);

  margin: auto;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);

  transition: width 0.1s, height 0.1s;
}

.panorama-link-button:hover img {
  width: clamp(25px, calc(25px + (100vw - 720px) * 7 / (1920 - 720)), 32px);
  height: clamp(25px, calc(25px + (100vw - 720px) * 7 / (1920 - 720)), 32px);

  transition: width 0.1s, height 0.1s;
}

.panorama-link-button-custom {
  cursor: pointer;
  pointer-events: auto;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: clamp(44px, calc(44px + (100vw - 720px) * 12 / (1920 - 720)), 56px);
  height: clamp(44px, calc(44px + (100vw - 720px) * 12 / (1920 - 720)), 56px);

  transition: width 0.1s, height 0.1s;
}

.panorama-link-button-custom:hover {
  width: clamp(47px, calc(47px + (100vw - 720px) * 13 / (1920 - 720)), 60px);
  height: clamp(47px, calc(47px + (100vw - 720px) * 13 / (1920 - 720)), 60px);

  transition: width 0.1s, height 0.1s;
}

.panorama-link-button-custom-foreground {
  width: clamp(23px, calc(23px + (100vw - 720px) * 7 / (1920 - 720)), 30px);
  height: clamp(23px, calc(23px + (100vw - 720px) * 7 / (1920 - 720)), 30px);

  margin: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  transition: width 0.1s, height 0.1s;
}

.panorama-link-button-custom-background {
  width: clamp(44px, calc(44px + (100vw - 720px) * 12 / (1920 - 720)), 56px);
  height: clamp(51px, calc(51px + (100vw - 720px) * 14 / (1920 - 720)), 65px);

  margin: auto;
  display: block;
  position: absolute;

  transition: width 0.1s, height 0.1s;
}

.panorama-link-button-custom:hover .panorama-link-button-custom-background {
  width: clamp(47px, calc(47px + (100vw - 720px) * 13 / (1920 - 720)), 60px);
  height: clamp(55px, calc(55px + (100vw - 720px) * 15 / (1920 - 720)), 70px);

  transition: width 0.1s, height 0.1s;
}

.panorama-link-button-custom-caption-container {
  display: inline-block;
  position: absolute;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 12px;

  top: 0%;
  left: 50%;
  transform: translate(-50%, calc(-100% - 16px));
}

.panorama-link-button-custom-caption {
  font: normal 400 16px/22px Stolz, sans-serif;
  color: #2a3441;
  white-space: nowrap;

  left: 50%;
  transform: translateX(-50%);
}

.panorama-link-button-custom:hover .panorama-link-button-custom-foreground {
  width: clamp(27px, calc(27px + (100vw - 720px) * 8 / (1920 - 720)), 35px);
  height: clamp(27px, calc(27px + (100vw - 720px) * 8 / (1920 - 720)), 35px);

  transition: width 0.1s, height 0.1s;
}

.hot-spot-button {
  cursor: pointer;
  pointer-events: auto;

  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 56px;
  height: 56px;

  background-color: #ffffff33;
  border-radius: 50%;

  top: 200px;
  left: 100px;

  transition: width 0.1s, height 0.1s;
}

.hot-spot-button:hover {
  width: 60px;
  height: 60px;
}

.hot-spot-button .hot-spot-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 28px;
  height: 28px;

  background-color: #ffffff;
  border-radius: 50%;

  transition: width 0.1s, height 0.1s;
}

.hot-spot-button:hover .hot-spot-inner {
  width: 30px;
  height: 30px;

  transition: width 0.1s, height 0.1s;
}

.hot-spot-inner img {
  width: 24px;
  height: 24px;
  margin: auto;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);

  transition: width 0.1s, height 0.1s;
}

.hot-spot-button:hover .hot-spot-inner img {
  width: 26px;
  height: 26px;

  transition: width 0.1s, height 0.1s;
}

.hot-spot-plate-layer {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.hot-spot-container {
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
}

.hot-spot-description {
  pointer-events: none;

  position: absolute;

  bottom: 0;
  left: 0;

  height: auto;
  background-color: #ffffff;
  border-radius: 12px;

  max-width: clamp(
    223px,
    calc(223px + (100vw - 720px) * 157 / (1920 - 720)),
    380px
  );
  padding: clamp(12px, calc(12px + (100vw - 720px) * 8 / (1920 - 720)), 20px);
}

.hot-spot-description .caption {
  font: normal 700 22px/31px Stolz, sans-serif;
  font-size: clamp(
    12px,
    calc(12px + (100vw - 720px) * 10 / (1920 - 720)),
    22px
  );
  line-height: clamp(
    17px,
    calc(17px + (100vw - 720px) * 14 / (1920 - 720)),
    31px
  );
  padding-bottom: 16px;
}

.hot-spot-description span {
  min-width: clamp(
    199px,
    calc(199px + (100vw - 720px) * 141 / (1920 - 720)),
    340px
  );
  display: inline-block;
  font: normal 400 18px/25px Stolz, sans-serif;
  font-size: clamp(10px, calc(10px + (100vw - 720px) * 8 / (1920 - 720)), 18px);
  line-height: clamp(
    14px,
    calc(14px + (100vw - 720px) * 11 / (1920 - 720)),
    25px
  );
  color: #2a3441;

  text-align: left;
}

.panorama-caption {
  position: absolute;
  top: 0;

  left: 0;
  right: 0;
  margin: 0 auto;
}

.caption-container {
  position: absolute;
  width: min(400px, calc(100vw - 250px));
  height: 64px;
  left: 50%;
  transform: translateX(-50%);

  margin-top: clamp(7px, calc(7px + (100vw - 720px) * 40 / (1920 - 720)), 47px);
  margin-top: clamp(7px, calc(7px + (100vw - 720px) * 22 / (1920 - 720)), 29px);
}

.caption-container span {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font: normal 400 24px/34px Stolz, sans-serif;
  font-size: clamp(
    14px,
    calc(14px + (100vw - 720px) * 10 / (1920 - 720)),
    24px
  );
  line-height: clamp(
    18px,
    calc(18px + (100vw - 720px) * 16 / (1920 - 720)),
    34px
  );

  text-align: center;
  color: #ffffff;
  text-wrap: wrap;
}

.back-button {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;

  width: clamp(45px, calc(45px + (100vw - 720px) * 48 / (1920 - 720)), 93px);
  height: 64px;
  margin: 40px;
  margin-top: clamp(7px, calc(7px + (100vw - 720px) * 22 / (1920 - 720)), 29px);

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-button img {
  width: clamp(20px, calc(20px + (100vw - 720px) * 21 / (1920 - 720)), 41px);
  height: clamp(20px, calc(20px + (100vw - 720px) * 21 / (1920 - 720)), 41px);
  transform: rotate(-90deg);
}

.back-button .label {
  width: clamp(20px, calc(20px + (100vw - 720px) * 21 / (1920 - 720)), 41px);
  height: clamp(20px, calc(20px + (100vw - 720px) * 21 / (1920 - 720)), 41px);
}

.back-button .label span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;

  font: normal 400 14px/18px Stolz, sans-serif;
  font-size: clamp(14px, calc(10px + (100vw - 720px) * 8 / (1920 - 720)), 22px);
  line-height: clamp(
    18px,
    calc(18px + (100vw - 720px) * 0 / (1920 - 720)),
    18px
  );
  color: #ffffff;
}

.panorama-building-icon {
  cursor: pointer;
  pointer-events: none;

  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 110px;
  height: 40px;

  background-color: #2a3441;
  border-radius: 100px;

  top: 200px;
  left: 100px;

  font: normal 400 14px/22px Stolz, sans-serif;
  color: #ffffff;
}

.panorama-building-icon span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

/************************************************************/
/*********************** COMMON SCREEN **********************/
/************************************************************/

.time-of-day-buttons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;

  width: clamp(44px, calc(44px + (100vw - 720px) * 20 / (1920 - 720)), 64px);
  height: clamp(84px, calc(84px + (100vw - 720px) * 44 / (1920 - 720)), 128px);
  margin-right: clamp(
    16px,
    calc(16px + (100vw - 720px) * 24 / (1920 - 720)),
    40px
  );
}

.time-button {
  cursor: pointer;
  background-color: #ffffff;
  width: 100%;
  height: 50%;
}

.time-button.day {
  border-radius: 12px 12px 0 0;
}

.time-button.night {
  border-radius: 0 0 12px 12px;
}

.time-of-day-buttons img {
  width: clamp(16px, calc(16px + (100vw - 720px) * 8 / (1920 - 720)), 24px);
  height: clamp(16px, calc(16px + (100vw - 720px) * 8 / (1920 - 720)), 24px);

  margin: auto;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.time-of-day-buttons .selected {
  background-color: #2a3441;
}

.time-of-day-buttons .hidden {
  display: none;
  pointer-events: none;
}

.compass-container {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;

  width: clamp(44px, calc(44px + (100vw - 720px) * 32 / (1920 - 720)), 76px);
  height: clamp(44px, calc(44px + (100vw - 720px) * 32 / (1920 - 720)), 76px);
  margin: clamp(16px, calc(16px + (100vw - 720px) * 24 / (1920 - 720)), 40px);

  display: flex;
}

.compass-container img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

/************************************************************/
/********************** LOADING SCREEN **********************/
/************************************************************/

.loading-screen {
  width: 100vw;
  height: 100vh;

  position: absolute;
  top: 0;
  left: 0;

  background-color: #2a3441;
}

.loading-plate {
  width: clamp(200px, calc(200px + (100vw - 720px) * 50 / (1920 - 720)), 250px);
  height: clamp(
    110px,
    calc(110px + (100vw - 720px) * 16 / (1920 - 720)),
    126px
  );

  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-plate img {
  display: inline-block;
  top: 0;
  width: 82px;
  height: 82px;
}

.loading-plate .progress-bar {
  position: absolute;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 4px;
  background-color: #ffffff1a;
  border-radius: 100px;
}

.level-logo {
  max-width: 100%;
  max-height: 100%;
}

.logo-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.logo-grid {
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
  margin-bottom: 10px;

  width: fit-content;

  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  grid-column-gap: 20px;
}

.cosmocats-logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: center;

  width: clamp(124px, calc(124px + (100vw - 720px) * 24 / (1920 - 720)), 148px);
  height: clamp(20px, calc(20px + (100vw - 720px) * 3 / (1920 - 720)), 23px);
}

.cosmocats-logo img {
  width: clamp(124px, calc(124px + (100vw - 720px) * 24 / (1920 - 720)), 148px);
  height: clamp(20px, calc(20px + (100vw - 720px) * 3 / (1920 - 720)), 23px);
}

.logo-separator {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;

  display: inline-block;

  font: normal 100 14px/14px Stolz, sans-serif;
  color: #ffffff;
}

.non-casual-games-logo {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  align-self: center;

  width: clamp(152px, calc(152px + (100vw - 720px) * 24 / (1920 - 720)), 176px);
  height: clamp(26px, calc(20px + (100vw - 720px) * 3 / (1920 - 720)), 30px);
}

.non-casual-games-logo img {
  width: clamp(152px, calc(152px + (100vw - 720px) * 24 / (1920 - 720)), 176px);
  height: clamp(26px, calc(20px + (100vw - 720px) * 3 / (1920 - 720)), 30px);
}

.logo-hidden .cosmocats-logo,
.logo-hidden .non-casual-games-logo,
.logo-hidden .logo-separator {
  width: 0px;
  height: 0px;
  visibility: collapse;
}

.logo-cosmocats-only {
  display: block;
}

.logo-cosmocats-only .cosmocats-logo {
  width: clamp(124px, calc(124px + (100vw - 720px) * 24 / (1920 - 720)), 148px);
  height: clamp(20px, calc(20px + (100vw - 720px) * 3 / (1920 - 720)), 23px);
}

.logo-cosmocats-only .non-casual-games-logo,
.logo-cosmocats-only .logo-separator {
  display: none;
  width: 0px;
  height: 0px;
  visibility: collapse;
}

.logo-noncasual-only {
  display: block;
}

.logo-noncasual-only .non-casual-games-logo {
  width: clamp(152px, calc(152px + (100vw - 720px) * 24 / (1920 - 720)), 176px);
  height: clamp(26px, calc(20px + (100vw - 720px) * 3 / (1920 - 720)), 30px);
}

.logo-noncasual-only .cosmocats-logo,
.logo-noncasual-only .logo-separator {
  display: none;
  width: 0px;
  height: 0px;
  visibility: collapse;
}

.logo-shown {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  grid-column-gap: 20px;
}

.progress-bar-filler {
  width: 0%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 100px;
}

/************************************************************/
/*********************** BLOCK SCREEN ***********************/
/************************************************************/

.block-screen {
  pointer-events: none;

  width: 100vw;
  height: 100vh;

  position: absolute;
  top: 0;
  left: 0;
}