/** @format */

:root {
    --BAR-COLOR: linear-gradient(#266FFF, #266FFF);
    --SHADOW-BOX: 0px 0px 0px 0px rgba(34, 60, 80, 0.2);
    --HEIGHT-LOADBAR: 18px;
    --Primary01: #266FFF;
    --Primary02: #F00000;
    --Primary03: #A8F000;
    --TRANSPERENT: rgba(0, 0, 0, 0);
    --LOADER-GRADIENT: linear-gradient(to right, var(--Primary03), var(--TRANSPERENT));
    /*--Blue8: #266FFF;*/
    --Blue6: #6998FE;
    --Blue10: #0051EF;
    --cell-size-mobile: clamp(64px, 20.5vw, 81px);
    --cell-size-desktop: min(calc(100vw / 12), 15vh, 128px);
}

@font-face {
    font-family: 'Unbounded';
    /*src: url('./fonts/Unbounded-Black.woff') format('woff');*/
    src: url('./fonts/unbounded-medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Styrene';
    src: url('./fonts/StyreneALC-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Styrene';
    src: url('./fonts/Styrene A LC-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

canvas:focus {
    outline: none;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    height: 100%;
    background-size: cover;
    
    overscroll-behavior: none;
    touch-action: none;
    overflow: hidden;

    /*background: url('./img/pattern.png?v=v0.82');*/
    /*background-color: var(--Blue10);*/
    /*background-repeat: repeat;*/
    /*background-position: 0 0;*/
    /*background-attachment: fixed;*/

}

body::before {
    position: fixed;
}

.grid-background {
    position: fixed; /* важно: НЕ absolute */
    inset: 0;

    background-image: url('./img/pattern.png?v=v0.82');
    background-repeat: repeat;
    background-size: 150px 150px;
    background-position: 50% 50%;

    z-index: 0;
    pointer-events: none;
}


.grid-background.mobile {
    background-size: calc(var(--cell-size-mobile) * 2);
    background-image: url('./img/pattern-mobile.png?v=v0.82');
}

.grid-background.mobile.rotate {
    background-size: calc(var(--cell-size-mobile) * 1);
    background-image: url('./img/pattern-mobile-rotate.png?v=v0.82');
}


.grid-background.desktop {
    background-size: calc(var(--cell-size-desktop) * 2);
    background-image: url('./img/pattern.png?v=v0.82');
}

.b-size {
    background-size: auto;
}

.b-size.mobile {
    background-size: 81px;
}

.b-size.desktop {
    background-size: 150px;
    /*background-position-x: 65px;*/
    /*background-position-y: 65px;*/
}

#unity-container {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#unity-canvas {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -webkit-box-shadow: var(--SHADOW-BOX);
    -moz-box-shadow: var(--SHADOW-BOX);
    box-shadow: var(--SHADOW-BOX);
}

/* Экран загрузки */
#unity-loading-bar {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    --loader-padding: clamp(12px, 3vmin, 40px);
    --loader-gap: clamp(10px, 2vmin, 24px);
    --loader-mobile-content-width: min(calc(var(--cell-size-mobile) * 4.4), calc(100vw - 40px));
    --loader-desktop-gap: clamp(10px, calc(var(--cell-size-desktop) * 0.16), 24px);
    --loader-panel-width: calc(var(--cell-size-desktop) * 8);
    --loader-panel-height: calc(var(--cell-size-desktop) * 5);
    --loader-logo-width: calc(var(--cell-size-desktop) * 2);
    --loader-layout-width: calc(var(--loader-panel-width) + var(--loader-logo-width));
    --loader-panel-left: calc(50vw - (var(--loader-panel-width) / 2));
    --loader-layout-left: calc(var(--loader-panel-left) - var(--loader-logo-width));
    --loader-panel-top: calc(50vh - (var(--cell-size-desktop) * 2));
    --loader-panel-radius: calc(var(--cell-size-desktop) * 0.088);
    --loader-panel-underlay: max(3px, calc(var(--cell-size-desktop) * 0.038));
    --loader-content-width: calc(var(--cell-size-desktop) * 4.5);
    --loader-progress-width: calc(var(--cell-size-desktop) * 4.4);
    --loader-progress-height: clamp(22px, calc(var(--cell-size-desktop) * 0.35), 42px);
    --loader-logo-left: var(--loader-layout-left);
    --loader-logo-top: var(--loader-panel-top);
}

.loading-layout {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: var(--loader-gap);

    padding: var(--loader-padding);
    box-sizing: border-box;
}

.loading-layout.mobile {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.loading-layout.desktop {
    --loader-gap: var(--loader-desktop-gap);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--loader-padding);
}

.background {
    /*position: fixed;*/
    width: 100%;
    height: 100%;
    z-index: 5;
}

.w-cell-4.mobile {
    max-width: calc(var(--cell-size-mobile) * 4 + 5px);
}

.h-cell-4.mobile {
    max-height: calc(var(--cell-size-mobile) * 4 + 5px);
}

.w-cell-5.mobile {
    max-width: calc(var(--cell-size-mobile) * 5 + 5px);
}

.h-cell-5.mobile {
    max-height: calc(var(--cell-size-mobile) * 5 + 5px);
}

.w-cell-6.mobile {
    max-width: calc(var(--cell-size-mobile) * 6 + 5px);
}

.h-cell-6.mobile {
    max-height: calc(var(--cell-size-mobile) * 6 + 5px);
}

.w-cell-7.mobile {
    max-width: calc(var(--cell-size-mobile) * 7 + 5px);
}

.h-cell-7.mobile {
    max-height: calc(var(--cell-size-mobile) * 7 + 5px);
}

.w-cell-4.desktop {
    max-width: calc(var(--cell-size-desktop) * 4 + 5px);
}

.h-cell-4.desktop {
    max-height: calc(var(--cell-size-desktop) * 4 + 5px);
}

.w-cell-5.desktop {
    max-width: calc(var(--cell-size-desktop) * 5 + 5px);
}

.h-cell-5.desktop {
    max-height: calc(var(--cell-size-desktop) * 5 + 5px);
}

.w-cell-6.desktop {
    max-width: calc(var(--cell-size-desktop) * 6 + 5px);
}

.h-cell-6.desktop {
    max-height: calc(var(--cell-size-desktop) * 6 + 5px);
}

.w-cell-7.desktop {
    max-width: calc(var(--cell-size-desktop) * 6 + 5px);
}

.h-cell-7.desktop {
    max-height: calc(var(--cell-size-desktop) * 6 + 5px);
}

.background.mobile {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: -20px;
}

.background.desktop {
    position: absolute;
    width: 90%;
    height: 100%;
    border: 3px solid var(--Blue6);
    border-radius: 24px;
    box-sizing: border-box;
    z-index: 5;
}

.border {
    border: 2px solid var(--Blue6);
    border-radius: 24px;

    box-sizing: border-box;
}

.border.desktop {
    border: 2px solid var(--Blue6);
}

.border.mobile {
    border: 2px solid var(--Blue6);
}

.background.six-cell.desktop {
    max-width: calc(var(--cell-size-desktop) * 6 + 5px);
    max-height: calc(var(--cell-size-desktop) * 6 + 5px);
}

.background.five-cell.desktop {
    max-width: calc(var(--cell-size-desktop) * 5 + 5px);
    max-height: calc(var(--cell-size-desktop) * 5 + 5px);
}


.b-color-blue {
    background-color: var(--Primary01);
}

.b-color-blue-main {
    background-color: var(--Primary01);
}

.b-color-blue-main.mobile {
    background-color: var(--Primary01);
}

.b-color-blue-main.desktop {
    background-color: var(--Blue10);
}

.b-color-green {
    background-color: var(--Primary03);
}

/*#unity-logo,*/
/*#unity-loader-text {*/
/*    position: fixed;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    width: 150px;*/
/*    height: 150px;*/
/*}*/

#unity-loader-text {
    top: 80%;
    width: 400px;
}

#unity-logo {
    width: 100%;

    /* высота зависит от ширины */
    aspect-ratio: 1.2;
    /*max-height: 600px;*/

    background: url('./img/mainImage.png?v=v0.82');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    margin-bottom: 20px;
    margin-top: 20px;
    z-index: 11;
}

#unity-logo.desktop {
    /* высота зависит от ширины */
    aspect-ratio: 1.2;
    max-height: 600px;
}

#unity-logo.mobile {
    width: 100%;
    /*max-height: 600px;*/
    /* высота зависит от ширины */
    /*aspect-ratio: 1.1;*/
    /*max-height: 400px;*/
    /*background-size: contain;*/
    background-size: cover;
}

#unity-logo,
.loading-container {
    position: relative;
    z-index: 10;
}

/* Контейнер полосы прогресса */
.loading-container {
    width: 100%;
    /*max-width: 800px;*/
    margin-bottom: 20px;
    /*height: 42px;*/
    aspect-ratio: 15;
    min-height: 42px;
    max-height: 82px;

    border: 3px solid var(--Primary03);
    border-radius: 37px;
    overflow: hidden;

    background: var(--LOADER-GRADIENT);

    padding: 4px;
    box-sizing: border-box;
    z-index: 11;
}

.loading-container.desktop {
    width: 90%;
    max-width: 700px;
    aspect-ratio: 10;
    margin-bottom: 40px;
}

.loading-container.mobile {
    width: 100%;
}

/* Полоса прогресса */
.loading-bar {
    height: 100%;
    width: 0%;
    background-color: var(--Primary03);
    border-radius: 37px;
    transition: width 0.3s ease;
}

#loading-screen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: var(--BAR-COLOR);
    background-position-x: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100%;
    background-attachment: fixed;
    z-index: 9999;
    transition: opacity 0.5s ease;
    opacity: 1;
}

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

.overlay {
    /*position: fixed;*/
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*!*background-image: var(--BAR-COLOR);*!*/
    /*z-index: 9999;*/
    /*display: none;*/
    z-index: 9999;
    display: none;
}

.error {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--BAR-COLOR);
    background-size: 45%;
    background-repeat: repeat;
    z-index: 9999;
    display: none;
}

.error-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #124250;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    font-size: 20px;
    -webkit-box-shadow: var(--SHADOW-BOX);
    -moz-box-shadow: var(--SHADOW-BOX);
    box-shadow: var(--SHADOW-BOX);
}

.message {
    /*position: absolute;*/
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);*/

    background-color: #d44b67;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    font-size: 20px;

    background-color: #d44b67;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    font-size: 20px;
    -webkit-box-shadow: var(--SHADOW-BOX);
    -moz-box-shadow: var(--SHADOW-BOX);
    box-shadow: var(--SHADOW-BOX);
    z-index: 9999;

}

.rotate-image {
    background-image: url('./img/rotate-screen.png?v=v0.82');
}

.error-connect-image {
    background-image: url('./img/error-connect.png?v=v0.82');
}

.error-404-image {
    background-image: url('./img/error-404.png?v=v0.82');
}

.image-system {
    width: clamp(200px, 100vw, 375px);
    height: auto;
    /*max-width: 375px;*/
    /*width: 120%;*/
    aspect-ratio: 1.2;
    /*max-height: 212px;*/
    /*max-height: 44vh; !* ограничение по высоте экрана *!*/
    max-height: clamp(100px, 44vh, 212px);


    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.image-system.desktop {
    width: clamp(200px, 100vw, 712px);
    aspect-ratio: 1.2;
    max-height: clamp(100px, 44vh, 300px);
    background-position: 50% 50%;
}

.image-system.mobile {
    width: clamp(200px, 100vw, 375px);
    aspect-ratio: 1.2;
    max-height: clamp(100px, 44vh, 212px);
}

.logo {
    position: absolute;
    width: 315px;
    height: 153px;
    background-image: url('./img/logo-alfa.png?v=v0.82');
    background-size: contain;
    background-repeat: no-repeat;


    top: calc(50% - 2.5 * var(--cell-size-desktop));
    left: calc(50% - 4 * var(--cell-size-desktop) + 5px);

    transform: translate(-50%, -50%);
    z-index: 5;
}

.logo.mobile {
    display: none;
}

.logo.desktop {
    display: block;
    width: var(--loader-logo-width);
    height: var(--cell-size-desktop);
    top: var(--loader-logo-top);
    left: var(--loader-logo-left);
    transform: none;
}

.mobile-active {
}

.mobile-active.mobile {
    display: block;
}

.mobile-active.desktop {
    display: none;
}

.desktop-active {
}

.desktop-active.mobile {
    display: block;
}

.desktop-active.desktop {
    display: block;
}

#loading-layout .desktop-active.background.desktop {
    position: fixed;
    top: var(--loader-panel-top);
    left: var(--loader-panel-left);
    width: var(--loader-panel-width);
    height: var(--loader-panel-height);
    max-width: none;
    max-height: none;
    overflow: visible;
    isolation: isolate;
    border-radius: var(--loader-panel-radius);
}

#loading-layout .desktop-active.background.desktop::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--loader-panel-underlay));
    background-color: var(--Primary01);
    border-radius: calc(var(--loader-panel-radius) + var(--loader-panel-underlay));
    z-index: -1;
    pointer-events: none;
}

#loading-layout .desktop-active.background.mobile {
    display: none;
}

#loading-layout .mobile-active.background.mobile {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
}

#loading-layout #unity-logo.desktop {
    position: fixed;
    top: calc(var(--loader-panel-top) + (var(--cell-size-desktop) * 0.36));
    left: calc(var(--loader-panel-left) + ((var(--loader-panel-width) - var(--loader-content-width)) / 2));
    width: var(--loader-content-width);
    max-width: calc(var(--loader-panel-width) - var(--loader-padding) - var(--loader-padding));
    max-height: calc(var(--loader-panel-height) - var(--loader-progress-height) - var(--loader-gap) - 24px);
    margin: 0;
    background-size: contain;
}

#loading-layout #unity-logo.mobile {
    width: var(--loader-mobile-content-width);
    aspect-ratio: 1125 / 1062;
    margin-top: var(--loader-gap);
    background-size: contain;
}

#loading-layout .loading-container.desktop {
    position: fixed;
    top: calc(var(--loader-panel-top) + (var(--cell-size-desktop) * 4.28));
    left: calc(var(--loader-panel-left) + ((var(--loader-panel-width) - var(--loader-progress-width)) / 2));
    width: var(--loader-progress-width);
    height: var(--loader-progress-height);
    min-height: 0;
    max-height: none;
    margin: 0;
    aspect-ratio: auto;
    padding: clamp(3px, 0.7vh, 4px);
    border-width: clamp(2px, 0.5vh, 3px);
}

#loading-layout .loading-container.mobile {
    width: var(--loader-mobile-content-width);
}


.fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
}

/* Центрирование по центру */
.centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*  центрирование колонкой */
.centered-column {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /*gap: 20px;*/
}

.centered-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.gap-10 {
    gap: 10px;
}

.gap-10.mobile {
    gap: 10px;
}

.gap-10.desktop {
    gap: 20px;
}

.gap-20 {
    gap: 20px;
}

.gap-24 {
    gap: 24px;
}

.gap-24.mobile {
    gap: 24px;
}

.gap-24.mobile {
    gap: 30px;
}

.padding-20 {
    padding: 20px;
}

.padding-20.mobile {
    padding: 20px;
}

.padding-20.desktop {
    padding: 41px;
}

p {
    font-family: Arial;
    color: white;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.h2 {
    font-family: Unbounded;
    font-width: 500;
    font-weight: 500;
    /*font-size: 32px;*/
    color: white;
    line-height: 100%;
    font-size: clamp(32px, 2.5vw, 42px);
    /*font-size: clamp(32px, calc(32px + (42 - 32) * (100vw - 375px) / (1728 - 375)), 42px);*/
}

/*.h2.mobile {*/
/*    font-size: 32px;*/
/*}*/
/*.h2.desktop {*/
/*    font-size: 42px;*/
/*}*/

.h4 {
    font-family: Unbounded;
    font-width: 500;
    font-weight: 500;
    /*font-size: 24px;*/
    color: white;
    font-size: clamp(24px, 2.2vw, 44px);
    /*font-size: clamp(24px, calc(32px + (42 - 32) * (100vw - 375px) / (1728 - 375)), 44px);*/
}

/*.h4.mobile {*/
/*    font-size: 24px;*/
/*}*/

/*.h4.desktop {*/
/*    font-size: 44px;*/
/*}*/

.button01 {
    font-family: Styrene;
    font-width: 500;
    font-weight: 500;
    /*font-size: 16px;*/
    color: white;
    font-size: clamp(16px, 1.2vw, 24px);
    /*font-size: clamp(16px, calc(32px + (42 - 32) * (100vw - 375px) / (1728 - 375)), 24px);*/
}

/*.button01.mobile {*/
/*    font-size: 16px;*/
/*}*/

/*.button01.desktop {*/
/*    font-size: 24px;*/
/*}*/

.b1 {
    font-family: Styrene;
    font-width: 400;
    font-weight: 400;
    /*font-size: 16px;*/
    color: white;
    line-height: 125%;
    font-size: clamp(16px, 1.3vw, 22px);
    /*font-size: clamp(16px, calc(32px + (42 - 32) * (100vw - 375px) / (1728 - 375)), 22px);*/
}

/*.b1.mobile {*/
/*    font-size: 16px;*/
/*}*/
/*.b1.desktop {*/
/*    font-size: 22px;*/
/*}*/

.button {
    height: 48px;
    background-color: var(--Primary02);
    border-radius: 16px;
    border: none;

    display: flex;
    align-items: center; /* по вертикали */
    justify-content: center; /* по горизонтали */
    text-align: center;

    align-items: center;
    font-family: Styrene;
    font-weight: 500;
    font-size: 16px;
    color: white;


    cursor: pointer;
    transition: 0.2s ease;
}

.button.desktop {
    height: 70px;
    font-size: 24px;
}

.button.mobile {
    height: 48px;
    font-size: 16px;
}

.button:hover {
    filter: brightness(0.9);
}

.button:active {
    filter: brightness(0.8);
    transform: scale(0.97); /* эффект нажатия */
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
    .overlay.mobile {
        display: block;
    }
}

@keyframes rotate-clockwise {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes rotate-error {
    0% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(-10deg);
    }
}

.rotate-animation {
    animation: rotate-clockwise 2s linear infinite;
}

.error-animation {
    animation: rotate-error 2s linear infinite;
    width: 80px;
    height: 80px;
}

input,
textarea {
    caret-color: transparent;
    -webkit-user-select: none;
}