/* --- БАЗОВЫЕ НАСТРОЙКИ ЭКРАНА --- */
body { 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
    background-color: #000; 
}

#unity-container { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
}

#unity-canvas { 
    width: 100%; 
    height: 100%; 
    /* Если редактор ругается на строку ниже, это нормально, Unity это исправит при билде */
    background: #231F20; 
}

/* --- КАСТОМНЫЙ 3D ЗАГРУЗЧИК --- */
#loader-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: #000000; 
    z-index: 999999;
    display: flex; 
    justify-content: center; 
    align-items: center;
    transition: opacity 0.5s ease-out;
    font-size: 4px; 
    font-family: sans-serif;
    pointer-events: auto;
}

/* Когда добавляется этот класс, оверлей перестает мешать кликам */
#loader-overlay.finished {
    opacity: 0;
    pointer-events: none !important;
}

.loader-wrapper { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}

#loader-logo { 
    width: 60em; 
    margin-bottom: 1em; 
    display: block; 
    height: auto; 
}

/* 3D Полоса загрузки */
.chart { font-size: 2em; perspective: 1000px; perspective-origin: 50% 50%; backface-visibility: visible; }
.bar {
    font-size: 2em; position: relative; height: 10em; width: 15em;
    transition: all 0.5s ease-in-out;
    transform: rotateX(60deg) rotateY(0deg); transform-style: preserve-3d;
}

.face {
    font-size: 2em; position: relative; width: 100%; height: 2em;
    background-color: rgba(255, 61, 19, 0.1);
}
.face.side-a, .face.side-b { width: 2em; }
.side-a { transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em); }
.side-b { transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em); position: absolute; right: 0; }
.side-0 { transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em); }
.side-1 { transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em); }
.top    { transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em); }
.floor  { box-shadow: 0 1em 4em rgba(255, 61, 19, 0.4), 0 0 10em rgba(255, 61, 19, 0.2); }
.side-filled-cap {
    width: 2em;
    background-color: #FF3D13;;
    /* Ставим её в те же координаты, что и левую крышку, чтобы она стартовала от 0% */
    transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
    position: absolute;
    top: 6em;
    left: 0%;
    transition: left 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Animation & Colors */
.growing-bar {
    background-color: rgba(255, 61, 19, 0.8); width: 0%; height: 2em;
    transition: width 2s cubic-bezier(0.25, 1, 0.5, 1);
}
.bar .side-a, .bar .side-a .growing-bar { background-color: rgba(255, 61, 19, 0.6); }
.bar .side-0 .growing-bar { box-shadow: -0.5em -1.5em 5em #FF3D13; }
.bar .floor .growing-bar { box-shadow: 0em 0em 4em #FF3D13; }
.bar-100 .growing-bar { width: 100%; }

/* --- ЛОГОТИП-ССЫЛКА --- */
#corner-logo-link {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#corner-logo-link img {
    height: 45px;
    width: auto;
    display: block;
}

/* --- КНОПКИ --- */
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center; cursor: pointer; }