#habbix-loader.nitro-loading {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    overflow: hidden;
    color: #fff;
    font-family: Ubuntu, Poppins, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 50% 40%, rgba(123, 202, 255, .34) 0 8%, rgba(56, 137, 221, .24) 24%, transparent 50%),
        radial-gradient(circle at 16% 18%, rgba(88, 101, 242, .24), transparent 34%),
        radial-gradient(circle at 86% 82%, rgba(38, 186, 213, .15), transparent 38%),
        linear-gradient(135deg, #07121f 0%, #0a233c 42%, #142d62 72%, #21164f 100%);
    transition: opacity 320ms ease, visibility 320ms ease;
}

#habbix-loader.nitro-loading.habbix-loader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#habbix-loader.nitro-loading::before {
    content: "";
    position: absolute;
    inset: -8%;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .11) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 223, 94, .34) 0 2px, transparent 3px);
    background-size: 56px 56px, 56px 56px, 112px 84px;
    background-position: center, center, 18px 12px;
    transform: rotate(5deg) scale(1.16);
}

#habbix-loader.nitro-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 22%, transparent 76%, rgba(0,0,0,.28)),
        radial-gradient(ellipse at center, transparent 0 34%, rgba(0, 0, 0, .20) 72%, rgba(0, 0, 0, .38) 100%);
}

#habbix-loader.nitro-loading .connecting-duck {
    position: absolute;
    left: 50%;
    top: calc(50% - 12px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    width: 286px;
    height: 112px;
    margin: 0 !important;
    border: 5px solid #111827;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.50) 0 18%, rgba(255,255,255,.12) 19%, transparent 43%),
        linear-gradient(180deg, #fff28d 0%, #ffd44a 48%, #d68c15 100%);
    box-shadow:
        0 10px 0 #6f4708,
        0 24px 44px rgba(0, 0, 0, .36),
        0 0 0 7px rgba(255, 255, 255, .045),
        0 0 54px rgba(255, 211, 72, .24),
        0 0 92px rgba(83, 188, 255, .20),
        inset 0 2px 0 rgba(255, 255, 255, .58),
        inset 0 -14px 24px rgba(126, 70, 5, .20);
    transform: translate(-50%, -50%) scale(.66);
    transform-origin: center center;
    animation: vibboza-premium-logo 2.8s ease-in-out infinite;
}

#habbix-loader.nitro-loading .connecting-duck::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 15px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .24);
    z-index: 1;
}

#habbix-loader.nitro-loading .connecting-duck::after {
    content: "";
    position: absolute;
    left: -54%;
    top: -20%;
    z-index: 2;
    width: 42%;
    height: 140%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent);
    transform: skewX(-17deg);
    animation: vibboza-premium-shine 3.4s ease-in-out infinite;
}

#habbix-loader.nitro-loading .vibboza-connecting-logo span {
    position: relative;
    z-index: 3;
    color: #101827;
    font-size: 50px;
    font-weight: 1000;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow:
        0 2px 0 rgba(255, 255, 255, .42),
        0 0 14px rgba(255, 255, 255, .20);
}

#habbix-loader.nitro-loading .welcome-text,
#habbix-loader.nitro-loading .vibboza-hc-percent,
#habbix-loader.nitro-loading .vibboza-hc-bar {
    left: 50%;
    right: auto;
    z-index: 2;
    transform: translateX(-50%);
}

#habbix-loader.nitro-loading .welcome-text {
    position: absolute;
    top: calc(50% + 76px);
    width: 420px;
    max-width: calc(100vw - 28px);
    text-align: center;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .01em;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .34), 0 0 14px rgba(0, 0, 0, .26);
}

#habbix-loader.nitro-loading .vibboza-hc-percent {
    position: absolute;
    top: calc(50% + 103px);
    width: 420px;
    max-width: calc(100vw - 28px);
    color: rgba(239, 248, 255, .95);
    text-align: center;
    font-size: 13px;
    font-weight: 900;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .24);
}

#habbix-loader.nitro-loading .vibboza-hc-bar {
    position: absolute;
    top: calc(50% + 132px);
    width: 276px;
    height: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;
    background: rgba(0, 0, 0, .30);
    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, .48),
        0 1px 0 rgba(255, 255, 255, .12),
        0 0 24px rgba(62, 165, 230, .20);
}

#habbix-loader.nitro-loading .vibboza-hc-bar i {
    display: block;
    position: relative;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffffff 0%, #ffe16a 46%, #ffffff 100%);
    box-shadow: 0 0 16px rgba(255, 255, 255, .55), 0 0 22px rgba(255, 213, 74, .30);
    transition: width 220ms ease;
}

#habbix-loader.nitro-loading .vibboza-hc-bar i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent);
    animation: vibboza-premium-bar 1.7s ease-in-out infinite;
}

.nitro-loading .loading-icon,
.nitro-loading img[src*="duck"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

@keyframes vibboza-premium-logo {
    0%, 100% { filter: brightness(1); transform: translate(-50%, -50%) scale(.66); }
    50% { filter: brightness(1.07); transform: translate(-50%, calc(-50% - 2px)) scale(.66); }
}

@keyframes vibboza-premium-shine {
    0%, 50% { left: -56%; opacity: 0; }
    62% { opacity: .70; }
    82%, 100% { left: 114%; opacity: 0; }
}

@keyframes vibboza-premium-bar {
    0% { transform: translateX(-120%); opacity: .2; }
    48% { opacity: .85; }
    100% { transform: translateX(120%); opacity: .2; }
}

@media (max-width: 520px) {
    #habbix-loader.nitro-loading .connecting-duck {
        transform: translate(-50%, -50%) scale(.52);
    }

    @keyframes vibboza-premium-logo {
        0%, 100% { filter: brightness(1); transform: translate(-50%, -50%) scale(.52); }
        50% { filter: brightness(1.07); transform: translate(-50%, calc(-50% - 2px)) scale(.52); }
    }

    #habbix-loader.nitro-loading .welcome-text {
        top: calc(50% + 66px);
        font-size: 14px;
    }

    #habbix-loader.nitro-loading .vibboza-hc-percent {
        top: calc(50% + 93px);
    }

    #habbix-loader.nitro-loading .vibboza-hc-bar {
        top: calc(50% + 119px);
        width: 226px;
    }
}
