/* =========================================================
   loading.css — FINALISSIMA ARC SPINNER (v=2)
   🎯 3 Rotating Arcs + Static Center Logo
========================================================= */

/* =========================================================
   GLOBAL SPINNER OVERRIDE
   ========================================================= */

.spinner{
    width:72px !important;
    height:72px !important;
    border:none !important;
    border-radius:0 !important;
    animation:none !important;
    background:url('./splash-logo.png') center center / 40px 40px no-repeat !important;
    position:relative;
    margin:0 auto 22px !important;
    filter:drop-shadow(0 0 14px rgba(212,183,122,.5));
    will-change:filter;
    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
    user-select:none;
    pointer-events:none;
}

/* ═══ ARC 1 — OUTER GOLD (Clockwise) ═══ */

.spinner::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    border:3px solid transparent;
    border-top-color:#D4B77A;
    border-right-color:rgba(212,183,122,.4);
    animation:finArcSpinCW 1.6s linear infinite;
    will-change:transform;
    filter:drop-shadow(0 0 4px rgba(212,183,122,.6));
}

/* ═══ ARC 2 — MIDDLE RED (Counter-Clockwise) ═══ */

.spinner::after{
    content:'';
    position:absolute;
    inset:10px;
    border-radius:50%;
    border:3px solid transparent;
    border-bottom-color:#8B1A2F;
    border-left-color:rgba(139,26,47,.4);
    animation:finArcSpinCCW 1.3s linear infinite;
    will-change:transform;
    filter:drop-shadow(0 0 4px rgba(139,26,47,.6));
}

/* ═══ ARC 3 — INNER GOLD (via container ::before) ═══ */

.totw-loading::after,
.stats-loading::pxafter,
.mh-loading::after{
    content:'';
    position:absolute;
    top:32px;
    left:50%;
    width:32px;
    height:32px;
    margin-left:-16px;
    border-radius:50%;
    border:2 solid transparent;
    border-top-color:#F5E6D3;
    border-left-color:rgba(212,183,122,.5);
    animation:finArcSpinCW 0.9s linear infinite;
    will-change:transform;
    pointer-events:none;
    z-index:2;
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes finArcSpinCW{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

@keyframes finArcSpinCCW{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(-360deg);}
}

/* =========================================================
   LOADER CONTAINERS
========================================================= */

.totw-loading,
.stats-loading,
.mh-loading{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:32px 20px !important;
    min-height:180px;
    text-align:center;
    color:#8B1A2F;
    font-weight:800;
    font-family:'Cairo', 'Tajawal', sans-serif;
    letter-spacing:0.5px;
}

/* ═══ GLOW PULSE (خلف السبينر) ═══ */

.totw-loading::before,
.stats-loading::before,
.mh-loading::before{
    content:'';
    position:absolute;
    top:32px;
    left:50%;
    width:72px;
    height:72px;
    margin-left:-36px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(212,183,122,.25) 0%,
        rgba(212,183,122,.08) 40%,
        transparent 70%);
    animation:finGlowPulse 2.4s ease-in-out infinite;
    pointer-events:none;
    will-change:transform, opacity;
    z-index:0;
}

@keyframes finGlowPulse{
    0%, 100%{
        transform:scale(1);
        opacity:0.6;
    }
    50%{
        transform:scale(1.35);
        opacity:1;
    }
}

/* ═══ LOADING TEXT (تحت السبينر) ═══ */

.totw-loading > div:not(.spinner),
.stats-loading > div:not(.spinner),
.mh-loading > div:not(.spinner){
    position:relative;
    z-index:1;
}

/* ═══ PROGRESS BAR (شريط رفيع ذهبي) ═══ */

.totw-loading > div:not(.spinner)::after,
.stats-loading > div:not(.spinner)::after,
.mh-loading > div:not(.spinner)::after{
    content:'';
    display:block;
    width:120px;
    height:2px;
    margin:14px auto 0;
    background:linear-gradient(90deg,
        transparent 0%,
        #D4B77A 50%,
        transparent 100%);
    background-size:200% 100%;
    border-radius:2px;
    animation:finLoaderProgressBar 1.5s ease-in-out infinite;
}

@keyframes finLoaderProgressBar{
    0%{
        background-position:200% 0;
        opacity:0.3;
    }
    50%{
        opacity:1;
    }
    100%{
        background-position:-100% 0;
        opacity:0.3;
    }
}

/* =========================================================
   DARK BACKGROUND (Champions)
   ========================================================= */

.champions-empty .spinner{
    background-image:url('./splash-logo.png') !important;
    filter:drop-shadow(0 0 18px rgba(212,183,122,.8));
}

/* =========================================================
   iPAD / LARGER SCREENS
========================================================= */

@media (min-width:768px){
    .spinner{
        width:88px !important;
        height:88px !important;
        background-size:50px 50px !important;
    }
    .spinner::after{
        inset:12px;
    }
    .totw-loading::before,
    .stats-loading::before,
    .mh-loading::before{
        width:88px;
        height:88px;
        margin-left:-44px;
    }
    .totw-loading::after,
    .stats-loading::after,
    .mh-loading::after{
        top:32px;
        width:40px;
        height:40px;
        margin-left:-20px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce){
    .spinner::before,
    .spinner::after,
    .totw-loading::before,
    .totw-loading::after,
    .stats-loading::before,
    .stats-loading::after,
    .mh-loading::before,
    .mh-loading::after,
    .totw-loading > div:not(.spinner)::after,
    .stats-loading > div:not(.spinner)::after,
    .mh-loading > div:not(.spinner)::after{
        animation-duration:0.01s !important;
        animation-iteration-count:1 !important;
    }
    .totw-loading::after,
    .stats-loading::after,
    .mh-loading::after{
        display:none !important;
    }
}

/* =========================================================
   منع حفظ الصور
========================================================= */

.spinner{
    -webkit-user-select:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
    user-select:none;
    pointer-events:none;
}