* {
    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.5) 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%;

    top: 200px;
    left: 100px;

    transition: width 0.1s, height 0.1s;
}

.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);

    top: 200px;
    left: 100px;

    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;
}

.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;
}