/** @format */

/* Подключаем шрифты */
@font-face {
    font-family: "ExoSoft";
    src: url("./fonts/ExoSoft-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "ExoSoft";
    src: url("./fonts/ExoSoft-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "ExoSoft";
    src: url("./fonts/ExoSoft-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

/* --------- Переменные и порядок слоёв --------- */
:root {
    --z-bg-gradient: 0;
    --z-bg-image: 1000;
    --z-snow: 2000;
    --z-ui: 9999;
    --z-snow-controls: calc(var(--z-ui) + 2);

    --BAR-COLOR: radial-gradient(#A2E0FF, #4787FF);
    --SHADOW-BOX: 0px 0px 0px 0px rgba(34, 60, 80, 0.2);
    --HEIGHT-LOADBAR: 18px;

    --snow-max-size: 10px;
    --snow-min-size: 2px;

    --font-extra-bold: "ExoSoft", sans-serif;
    --font-medium: "ExoSoft", sans-serif;
    --font-semibold: "ExoSoft", sans-serif;

    --z-clouds: 1500;
}

/* --------- Базовые стили страницы / фон (градиент) --------- */
html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    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);

    /* Градиент — самый задний фон */
    background-image: var(--BAR-COLOR);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


/* CLOUDS ------------------------------------------------------- */

#cloud-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1500;
}

.cloud-layer {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.cloud {
    position: absolute;
    animation: cloud-move linear infinite;
    pointer-events: none;
}

.cloud img {
    display: block;
    height: 90px; /* 👈 ВОТ ЭТО САМЫЙ ВАЖНЫЙ МОМЕНТ */
    width: auto;
    user-select: none;
    pointer-events: none;
}

@keyframes cloud-move {
    from {
        transform: translateX(-40%);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    to {
        transform: translateX(140%);
        opacity: 1;
    }
}


/* --------- Фон-изображение (поверх градиента), растянуто на весь экран --------- */
.background-image {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    z-index: var(--z-bg-image);
    pointer-events: none; /* не мешаем кликам */
    background-image: url('./img/bg-loading-screen.png?v=v0.5');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* растянуть на весь экран */
    opacity: 1; /* картинка непрозрачная; если PNG имеет альфу — градиент будет виден сквозь */
}

/* --------- Снег (поверх фон-картинки, ниже UI) --------- */
#snow-wrapper {
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: var(--z-snow);
}

/* Структура снежинки:
   <span class="snowflake"><span class="snowflake-inner"></span></span>
*/
.snowflake {
    position: absolute;
    left: 0;
    top: -15vh;
    will-change: transform, opacity;
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: 99999;
    /* не задаём z-index у каждой снежинки — общий контейнер управляет порядком */
}

.snowflake-inner {
    display: block;
    user-select: none;
    pointer-events: none;
    width: var(--flake-size, 10px);
    height: var(--flake-size, 10px);
    border-radius: 50%;
    background: radial-gradient(circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.75) 40%,
    rgba(255, 255, 255, 0.25) 70%,
    rgba(255, 255, 255, 0) 100%);
    opacity: var(--flake-opacity, 0.9);
    animation-name: sway;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transform-origin: center;
}

/* Ключевые анимации для падения и раскачки */
@keyframes fall {
    0% {
        transform: translateY(-15vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(120vh) rotate(360deg);
        opacity: 0.9;
    }
}

@keyframes sway {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    50% {
        transform: translateX(var(--sway, 20px)) rotate(10deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
    }
}

/* --------- Контролы снегопада (поверх UI, если нужно) --------- */
#snow-controls {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: var(--z-snow-controls);
    font-family: Arial, sans-serif;
    pointer-events: auto; /* панелью можно пользоваться */
    display: none;
}

#snow-toggle {
    background: rgba(255, 255, 255, 0.85);
    border: 0;
    border-radius: 8px;
    padding: 6px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

#snow-panel {
    background: rgba(12, 30, 40, 0.82);
    color: #fff;
    padding: 10px;
    margin-top: 8px;
    border-radius: 10px;
    min-width: 190px;
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

#snow-panel label {
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
}

#snow-panel input[type="range"] {
    width: 100%;
    margin-bottom: 8px;
}

#snow-clear {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    width: 100%;
}

#snow-panel[aria-hidden="false"] {
    display: none;
}

/* --------- Unity / Loading / Overlay — поверх всего (UI) --------- */
#unity-container {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: var(--z-ui);
    top: 0;
    left: 0;
    /* НЕ перекрываем background-image: оставляем z-index выше снега */
    background-image: none; /* если хотите, можно убрать повторы var(--BAR-COLOR) */
}

#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);
    z-index: var(--z-ui); /* обеспечить, что canvas над снегом */
}

#unity-loading-bar {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: calc(var(--z-ui) + 1);
}

#unity-logo {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: calc(var(--z-ui) + 2);
}

#unity-logo img {
    width: 100%; /* растягивается по ширине */
    height: auto; /* сохраняет пропорции */
    display: block;
}

/* Центрирование partner-logo внутри unity-logo */
#partner-logo {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%); /* точное центрирование */
    width: auto;   /* оставляем размер изображения управляться самим <img> */
    height: auto;
    pointer-events: none;
}


#partner-logo img {
    min-width: 180px;
    min-height: 180px;
    width: 100%;
    height: 100%;
    max-width: 512px;
    max-height: 512px;
    display: block;
}


#unity-loader-text {
    position: fixed;
    left: 50%;
    bottom: 61px;
    transform: translateX(-50%);
    width: 324px;

    text-align: center;

    font-family: var(--font-semibold);
    font-weight: 600;
    font-size: 12px;
    z-index: calc(var(--z-ui) + 3);
}

/* Загрузка - полоса */
.loading-container {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%); /* убрал translateY(-50%) — иначе смещало вверх */
    width: 252px;
    height: 24px;
    background-color: #74ABFF;
    border-radius: 25px;
    overflow: hidden; /* важно для скругления паттерна */
    display: block;
    z-index: calc(var(--z-ui) + 2);
    padding: 2px;
}

/* ПРОСТЫЙ ВАРИАНТ: текстура плиткой внутри полосы */
.loading-bar {
    height: 100%;
    width: 50%; /* изменяйте динамически */
    background-color: #FF8200; /* fallback-цвет */
    background-image: url('./img/loader-texture.png?v=v0.5'); /* ваша картинка */
    background-repeat: repeat-x; /* повтор по горизонтали */
    background-position: left center; /* привязка начала паттерна к левому краю полосы */
    background-size: 22px; /* подгоняем высоту паттерна под высоту полосы (сохраняет пропорции) */
    border-radius: 25px;
    transition: width 0.3s ease; /* плавное изменение ширины */
    box-sizing: border-box;
}

/* Экран загрузки и overlay/error — поверх всего */
#loading-screen, .loading-screen {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-ui) + 10);
    background-image: var(--BAR-COLOR);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    transition: opacity 0.5s ease;
    opacity: 1;
}

.loading-screen {
    z-index: -1;
}

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

.error {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: calc(var(--z-ui) + 30);
    display: none;
}
.message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:white;
    padding: 30px 10px 10px 10px;
    border-radius: 32px;
    text-align: center;
    -webkit-box-shadow: 0px 0px 15px #B2CBF0, inset 0px -4px 5px #D3E3FE;
    -moz-box-shadow: 0px 0px 15px #B2CBF0, inset 0px -4px 5px #D3E3FE;
    box-shadow: 0px 0px 15px #B2CBF0, inset 0px -4px 5px #D3E3FE;
}

.error-message {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    text-align: center;
    -webkit-box-shadow: var(--SHADOW-BOX);
    -moz-box-shadow: var(--SHADOW-BOX);
    background: linear-gradient(180deg, #F2FBFF 0%, #E8F6FF 100%);
    color: #384667;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px; /* симметричный padding */
    border-top: 2px solid #fff;
    box-shadow: inset 0 -2px 0 0 #D8E7FE;
}

.rotate-had {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-image: url(".");
    width: 300px;
    height: 80px;
    margin: 15% auto;
    pointer-events: none;
    z-index: calc(var(--z-ui) + 80); /* выше всех */
}

.rotate-had img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rotate-message {
    border: none;
    border-radius: 22px;
    cursor: pointer;
    width: 272px;
    height: 34px;
    background: #F2FBFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 10px;
    border-top: 2px solid #D8E7FE;
    text-align: center;
}

.rotate-message-text {
    font-size: 14px;
    color: #384667;
    font-family: var(--font-semibold);
    font-weight: 600;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("./img/overlay.png");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: calc(var(--z-ui) + 80); /* выше всех */
    display: none;
}
.overlay-header {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 300px;
    height: 80px;
    pointer-events: none;
}


.error-had {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 300px;
    height: 80px;
    margin: 50% auto;
    pointer-events: none;
}

.error-had img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== CONNECTION ERROR – новая версия по макету ===== */

.conn-error {
    margin: -15% auto;
    width: 296px;
    height: 260px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0FBFF 100%);
    box-shadow: 0 0 15px rgba(178,203,240,1),
    0 2px 0 rgba(178,203,240,1),
    inset 0 -4px 4.9px rgba(211,227,254,1),
    inset 0 4px 4px #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* добавьте это */
gap: 16px;
    text-align: center;
    z-index: calc(var(--z-ui) + 70); /* добавьте это сюда */
    padding-bottom: 10px;
}

/* Заголовок */
.ce-title {
    font-size: 20px;
    font-weight: 700;
    color: #384667;
    margin: 20px 0 16px;
    font-family: var(--font-extra-bold);
}

/* Рамка вокруг текста (как на фото) */
.ce-message-box {
    border: none;
    border-radius: 22px;
    cursor: pointer;
    width: 272px;
    height: 66px;
    padding: 12px 0;
    background: #F2FBFF;
    display: flex;
    align-items: center;
    justify-content: center;

    border-top: 2px solid #D8E7FE;
    text-align: center;
}

.ce-message {
    margin: 0;
    font-size: 14px;
    color: #384667;
    font-family: var(--font-semibold);
    font-weight: 600;
}

/* Общий стиль кнопок */
.ce-btn {
    width: 272px;
    height: 44px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 999px; /* капсула как на фото */
    cursor: pointer;
    font-family: var(--font-extra-bold);
    margin: -4px;
}

/* Оранжевая кнопка */
.ce-btn-primary {
    background: #FF8200;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px; /* симметричный padding */
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    border-bottom: 2px solid #FF6A00;
    text-align: center;
}

/* Вторая кнопка */
.ce-btn-secondary {
    background: linear-gradient(180deg, #F2FBFF 0%, #E8F6FF 100%);
    color: #384667;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px; /* симметричный padding */
    border-top: 2px solid #fff;
    box-shadow: inset 0 -2px 0 0 #D8E7FE;
    text-align: center;
}

#conn-error-overlay {
    position: fixed;
    inset: 0;

    display: none;                 /* скрыт изначально */
    align-items: center;           /* вертикальное центрирование */
    justify-content: center;       /* горизонтальное центрирование */
    text-align: center;

    background: rgba(6, 18, 30, 0.45);
    z-index: calc(var(--z-ui) + 60);
    pointer-events: none;          /* когда скрыт — не мешает */
}

#conn-error-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

/* улучшение для фокуса/мобильных */
#conn-error-overlay[aria-hidden="false"] {
    overflow: auto;
}

/* если нужно, поднимите .conn-error выше по z-index */
.conn-error {
    z-index: calc(var(--z-ui) + 70);
}


/* Анимации для декоративных изображений */
@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 {
    width: 48px;
    height: 48px;
    animation: rotate-clockwise 2s linear infinite;
}

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

/* Текст и inputs */
p {
    font-family: Arial;
    color: #3B3B3B;
    font-size: 12px;
}

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

/* Адаптивные правила */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .overlay {
        display: block;
    }
    .rotate-had {
        display: block;
    }
}

/* Примечание: если какие-то элементы неожиданно "перескакивают" по слоям,
   проверьте, не создают ли они новый stacking context (transform, filter,
   opacity < 1, position + z-index и т.п.). В этом случае задайте им явный
   z-index >= var(--z-ui). */