@font-face {
    font-family: 'ExoSoft';
    src: url('../fonts/ExoSoft-SemiBold.ttf') format('truetype');
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ExoSoftBlack';
    src: url('../fonts/ExoSoft-Black.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ExoSoftMedium';
    src: url('../fonts/ExoSoft-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --design-width: 1080px;
    --design-height: 2520px;
    --orange: #ff7900;
    --purple: #671fa5;
    --brown: #52483c;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #141414;
    font-family: 'ExoSoft', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

button {
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* Progressive image reveal copied from the Puhatyri WebGL template. */
img.js-lazy-blur,
.lazy-blur {
    filter: blur(14px);
    transform-origin: center;
    transition: filter 280ms ease;
}

.lazy-blur-loaded,
img.js-lazy-blur.lazy-blur-loaded {
    filter: blur(0);
}

#unity-container,
#unity-canvas {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

#unity-canvas {
    background: #ffffff;
    outline: none;
}

#loading-cover {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #141414;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 200ms ease;
}

#loading-cover.loading-screen--complete {
    opacity: 0;
    pointer-events: none;
}

.loading-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--orange);
}

.design-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--design-width);
    height: var(--design-height);
    overflow: visible;
    transform: translate(-50%, -50%);
    transform-origin: center;
}

.exit-button {
    position: absolute;
    z-index: 8;
    top: 30px;
    left: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 160px;
    padding: 30px;
    overflow: hidden;
    border: 0;
    border-radius: 1000px;
    background: #ffffff;
    cursor: pointer;
    transition: transform 150ms ease, opacity 150ms ease;
}

.exit-button img {
    display: block;
    width: 100px;
    height: 100px;
}

.exit-button:active {
    transform: scale(0.96);
}

.exit-button:focus-visible,
.error-dialog button:focus-visible {
    outline: 8px solid rgba(103, 31, 165, 0.75);
    outline-offset: 5px;
}

.jorik {
    position: absolute;
    z-index: 1;
    display: block;
    max-width: none;
    pointer-events: none;
}

.jorchik-title {
    position: absolute;
    z-index: 2;
    display: block;
    margin: 0;
    color: #ffffff;
    font-family: 'ExoSoftBlack', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    transform: rotate(90deg);
    transform-origin: top left;
    pointer-events: none;
}

.loading-screen--plain .jorchik-title {
    top: 30px;
    left: 1012.0664px;
    font-size: 488.0595px;
}

.loading-screen--plain .jorik {
    top: 785px;
    left: -626px;
    width: 1532px;
    height: 1992px;
}

.loading-screen--promo .jorchik-title {
    top: 426px;
    left: 282px;
    font-size: 411.3903px;
}

.loading-screen--promo .jorik {
    top: 1336px;
    left: 336px;
    width: 1254px;
    height: 1630px;
}

.promo-card {
    position: absolute;
    z-index: 3;
    top: 648px;
    left: 336px;
    width: 688px;
    height: 688px;
    padding: 88px;
    overflow: hidden;
    border-radius: 90px;
    background: #ffffff;
}

.promo-card[hidden] {
    display: none;
}

.promo-image {
    display: block;
    width: 512px;
    height: 512px;
    object-fit: contain;
    object-position: center;
}

.loading-progress {
    position: absolute;
    z-index: 6;
    top: 2290px;
    left: 42px;
    width: 996px;
    color: #ffffff;
}

.loading-progress__labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    font-size: 72px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.loading-progress__track {
    width: 100%;
    height: 50px;
    margin-top: 30px;
    overflow: hidden;
    border-radius: 50px;
    background: #ffffff;
}

#unity-progress-bar-full {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--purple);
    transform: scaleX(0);
    transform-origin: left center;
}

.loading-screen--error #unity-progress-text {
    display: none;
}

.error-layer {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 250ms ease;
}

.error-layer[hidden] {
    display: none;
}

.error-design-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--design-width);
    height: var(--design-height);
    transform: translate(-50%, -50%);
    transform-origin: center;
}

.error-dialog {
    position: absolute;
    top: 835px;
    left: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 1020px;
    opacity: 0;
    transform: translateY(32px) scale(0.96);
    transform-origin: center;
    transition: opacity 250ms ease, transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.error-layer--visible {
    opacity: 1;
}

.error-layer--visible .error-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.error-dialog__card {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    height: 440px;
    padding: 80px 60px 70px;
    overflow: hidden;
    border-radius: 90px;
    background: #ffffff;
}

.error-dialog__header {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 100px;
    width: max-content;
    max-width: 100%;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(82, 72, 60, 0.3);
}

.error-dialog__header img {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
}

.error-dialog h1,
.error-dialog p {
    margin: 0;
    color: var(--brown);
}

.error-dialog h1 {
    font-size: 72px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.error-dialog p {
    width: 100%;
    height: 140px;
    font-family: 'ExoSoftMedium', sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1;
    white-space: pre-line;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.error-dialog__actions {
    display: flex;
    flex-direction: column;
    gap: 21px;
    width: 100%;
}

.error-dialog button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 180px;
    padding: 10px;
    overflow: hidden;
    border: 0;
    border-radius: 1000px;
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    cursor: pointer;
    transition: transform 150ms ease, opacity 150ms ease;
}

.error-dialog button:active {
    transform: scale(0.985);
}

.error-dialog button:disabled {
    cursor: default;
    opacity: 0.65;
}

.error-retry {
    color: #ffffff;
    background: var(--orange);
}

.error-exit {
    color: var(--brown);
    background: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .exit-button,
    .error-layer,
    .error-dialog,
    .error-dialog button,
    #unity-progress-bar-full,
    #loading-cover,
    img.js-lazy-blur,
    .lazy-blur {
        transition-duration: 1ms !important;
    }
}