/* ==========================================
   ARROW PUZZLE LOADER
   ========================================== */

.game-loader {
    position: fixed;
    inset: 0;

    z-index: 99999;

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

    overflow: hidden;

    background: rgba(225, 235, 250, 0.30);
}


/* ==========================================
   BLUR EXISTING HOME SCREEN
   ========================================== */

.loader-overlay {
    position: absolute;
    inset: -30px;

    background: rgba(215, 228, 248, 0.28);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transform: scale(1.05);

    pointer-events: none;
}


/* ==========================================
   CENTER CONTENT
   ========================================== */

.loader-content {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    animation: loaderAppear 0.5s ease-out;
}


/* ==========================================
   CIRCULAR LOADER
   ========================================== */

.loader-ring {
    position: relative;

    width: 170px;
    height: 170px;

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

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.42);

    border: 1px solid rgba(255, 255, 255, 0.75);

    box-shadow:
        0 20px 50px rgba(70, 120, 190, 0.18),
        inset 0 2px 10px rgba(255, 255, 255, 0.8);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ==========================================
   LOADING RING
   ========================================== */
.loader-ring::before {
    content: "";

    position: absolute;

    inset: -6px;

    border-radius: 50%;

    background: conic-gradient(
        from 0deg,
        #159df5 0deg,
        #3182f5 40deg,
        #7655f4 85deg,
        #c84de5 125deg,
        transparent 150deg,
        transparent 360deg
    );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 7px),
            #000 calc(100% - 6px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 7px),
            #000 calc(100% - 6px)
        );

    animation: rotateLoader 1.5s linear infinite;

    filter: drop-shadow(
        0 0 5px rgba(40, 145, 255, 0.55)
    );

    z-index: 1;
}

/* ==========================================
   WHITE DOT
   ========================================== */

.loader-ring::after {
    content: "";

    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #fff;

    top: -6px;
    left: 50%;

    transform: translateX(-50%);

    box-shadow:
        0 0 7px #fff,
        0 0 14px rgba(50, 150, 255, 0.7);

    z-index: 3;
}


/* ==========================================
   ARROW IMAGE
   ========================================== */

.arrow-loader-image {
    position: absolute;

    z-index: 2;

    /*
     * PNG ka original canvas wide hai.
     * Isliye width ko bada rakhkar actual
     * arrow artwork ko circle ke size mein
     * la rahe hain.
     */
    width: 220px;
    height: auto;

    max-width: none;

    object-fit: contain;

    display: block;

    background: transparent;

    filter:
        drop-shadow(
            0 8px 12px rgba(40, 90, 180, 0.14)
        );

    animation: arrowFloat 1.8s ease-in-out infinite;
}



/* ==========================================
   LOADING TEXT
   ========================================== */

.loader-text {
    margin-top: 27px;

    color: #3f5f91;

    font-size: 21px;
    font-weight: 700;

    letter-spacing: 0.3px;

    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.7);
}


/* ==========================================
   ANIMATED DOTS
   ========================================== */

.loading-dots {
    display: inline-block;

    width: 20px;
}

.loading-dots::after {
    content: "";

    animation: loadingDots 1.4s steps(4, end) infinite;
}


/* ==========================================
   SUBTITLE
   ========================================== */

.loader-subtitle {
    margin-top: 7px;

    color: #8298b8;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}

#initial-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

#initial-loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ==========================================
   ANIMATION
   ========================================== */

/* Ring rotation */
@keyframes rotateLoader {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* Dot follows ring */
@keyframes rotateDot {

    from {
        transform:
            translateX(-50%)
            rotate(0deg)
            translateY(0);
    }

    to {
        transform:
            translateX(-50%)
            rotate(360deg)
            translateY(0);
    }

}


/* Arrow image floating */
@keyframes arrowFloat {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-6px)
            scale(1.025);
    }

}


/* ==========================================
   FLOAT ANIMATION
   ========================================== */

@keyframes arrowFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-4px) scale(1.015);
    }

}

@keyframes rotateLoader {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

/* Loader entrance */
@keyframes loaderAppear {

    from {
        opacity: 0;
        transform: scale(0.90);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


/* Loading dots */
@keyframes loadingDots {

    0% {
        content: "";
    }

    25% {
        content: ".";
    }

    50% {
        content: "..";
    }

    75%,
    100% {
        content: "...";
    }

}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 600px) {

    .loader-ring {
        width: 155px;
        height: 155px;
    }

    .arrow-loader-image {
        width: 118px;
        height: 118px;
    }

    .loader-text {
        margin-top: 23px;
        font-size: 18px;
    }

    .loader-subtitle {
        font-size: 8px;
        letter-spacing: 2.5px;
    }

}

/* ==========================================
   DARK THEME LOADER
   ========================================== */

html.dark .game-loader {
    background: rgba(5, 8, 25, 0.72);
}


/* ==========================================
   DARK BLUR OVERLAY
   ========================================== */

html.dark .loader-overlay {
    background:
        rgba(5, 8, 25, 0.58);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


/* ==========================================
   DARK LOADER CIRCLE
   ========================================== */

html.dark .loader-ring {
    background: rgba(15, 23, 42, 0.78);

    border: 1px solid rgba(139, 92, 246, 0.35);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.55),
        0 0 35px rgba(99, 59, 250, 0.18),
        inset 0 2px 12px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* ==========================================
   DARK LOADING RING
   ========================================== */

html.dark .loader-ring::before {
    background: conic-gradient(
        from 0deg,
        #00C6FF 0deg,
        #168BFF 40deg,
        #6D4AFF 85deg,
        #C43CFF 125deg,
        #FF2BD6 150deg,
        transparent 175deg,
        transparent 360deg
    );

    filter:
        drop-shadow(0 0 7px rgba(0, 174, 255, 0.75))
        drop-shadow(0 0 14px rgba(157, 78, 255, 0.45));
}


/* ==========================================
   DARK WHITE DOT
   ========================================== */

html.dark .loader-ring::after {
    background: #ffffff;

    box-shadow:
        0 0 8px #ffffff,
        0 0 16px rgba(0, 174, 255, 0.9),
        0 0 28px rgba(139, 92, 246, 0.65);
}


/* ==========================================
   DARK ARROW IMAGE
   ========================================== */

html.dark .arrow-loader-image {
    filter:
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 18px rgba(70, 100, 255, 0.18));
}


/* ==========================================
   DARK LOADING TEXT
   ========================================== */

html.dark .loader-text {
    color: #F8FAFC;

    text-shadow:
        0 0 10px rgba(139, 92, 246, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.55);
}


/* ==========================================
   DARK SUBTITLE
   ========================================== */

html.dark .loader-subtitle {
    color: #94A3B8;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.5);
}