html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;
}

#unity-container {
    position: fixed;

    width: 100%;
    height: 100%;

    left: 0;
    top: 0;

    background: #000;
}

#unity-canvas {
    width: 100%;
    height: 100%;

    display: block;

    background: #000;
}


/* =========================================
   PANTALLA DE CARGA
   ========================================= */

#loading-screen {
    position: fixed;

    z-index: 9999;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.35)
        ),
        url("loading-background.png");

    background-size: cover;
    background-position: center;

    font-family:
        "Courier New",
        monospace;

    image-rendering: pixelated;

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}


#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}


/* =========================================
   CONTENIDO CENTRAL
   ========================================= */

.loading-content {
    position: absolute;

    left: 50%;
    top: 59%;

    transform: translateX(-50%);

    width: min(85%, 700px);

    text-align: center;

    padding: 0;
}


.loading-character {
    width: min(45vw, 330px);

    max-width: 330px;

    height: auto;

    image-rendering: pixelated;

    animation:
        hectorFloat 1.3s ease-in-out infinite alternate;
}


@keyframes hectorFloat {

    from {
        transform:
            translateY(4px)
            rotate(-2deg);
    }

    to {
        transform:
            translateY(-10px)
            rotate(2deg);
    }
}


/* =========================================
   TÍTULO
   ========================================= */

.loading-title {
    margin-top: 20px;

    color: white;

    font-size: clamp(
        30px,
        5vw,
        58px
    );

    font-weight: bold;

    text-shadow:
        4px 4px 0 #000;
}


.loading-message {
    margin-top: 15px;

    color: white;

    font-size: clamp(
        15px,
        2.2vw,
        23px
    );

    text-shadow:
        2px 2px 0 #000;
}


/* =========================================
   BARRA
   ========================================= */

.progress-container {
    width: 100%;

    height: 34px;

    margin-top: 25px;

    padding: 4px;

    box-sizing: border-box;

    background: #151515;

    border: 4px solid white;

    box-shadow:
        4px 4px 0 #000;
}


.progress-bar {
    width: 0%;

    height: 100%;

    background:
        repeating-linear-gradient(
            90deg,
            #ffcc00 0,
            #ffcc00 18px,
            #ff9e00 18px,
            #ff9e00 22px
        );

    image-rendering: pixelated;

    transition:
        width 0.15s linear;
}


.progress-text {
    margin-top: 14px;

    color: white;

    font-size: 22px;

    font-weight: bold;

    text-shadow:
        2px 2px 0 #000;
}