@font-face {
    font-family: "Before the Storm HUD";
    src: url("loading_font.woff2") format("woff2");
    font-display: block;
}

#loading-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    background: #000 url("loading_background.png") 0 0 / 100% 100% no-repeat;
    z-index: 120;
}

.transition-gold-frame {
    position: absolute;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 6px;
    background: url("loading_gold_wood.jpg") 0 0 / 512px 512px repeat;
    box-shadow: inset 0 0 0 1.5px var(--transition-gold-edge-highlight);
}

#loading-bar-frame {
    left: 88px;
    right: 88px;
    bottom: 128px;
    height: 16px;
}

#loading-bar-track {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: var(--transition-dark-panel);
}

#loading-bar-fill {
    width: 0%;
    height: 100%;
    border-radius: 6px;
    background: url("loading_fill_wood.jpg") 0 0 / 512px 512px repeat;
    box-shadow: inset 0 0 0 1.5px var(--transition-fill-edge-highlight),
                0 0 6px 1px var(--transition-fill-glow), 0 0 16px 4px rgba(255, 190, 40, 0.35);
    transition: width 0.2s ease-out;
}

#loading-status-frame {
    left: 50%;
    bottom: 74px;
    width: 324px;
    height: 40px;
    transform: translateX(-50%);
}

#loading-status {
    height: 36px;
    border-radius: 6px;
    background: var(--transition-dark-panel);
    color: var(--transition-status-text);
    font: 16px/34.4px "Before the Storm HUD", "Noto Sans", sans-serif;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}