/* Mood — экран загрузки и индикаторы на страницах */

/* Цвета лоадера приходят токенами из mood-base.css (тёмная — бирюза
   логотипа, светлая — тёплый градиент). Здесь только фолбэки на случай,
   если файл подключён без базовых токенов. */
:root {
    --mood-loader-blue: var(--accent, #2DD4BF);
    --mood-loader-blue-bright: var(--accent-muted, #5EEAD4);
    --mood-loader-track: var(--accent-dim, rgba(255, 255, 255, 0.08));
    --mood-loader-bg: var(--bg, #0B0E14);
    --mood-loader-bg-deep: var(--bg-deep, #070A0F);
}

@keyframes mood-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mood-loader-pulse {
    0%,
    100% {
        transform: scale(0.92);
        opacity: 0.55;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes mood-loader-glow {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.08);
    }
}

/* ——— Полноэкранный прелоадер при старте SPA ——— */
.mood-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--mood-loader-bg);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mood-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mood-preloader__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 55% at 50% 42%, var(--accent-glow, rgba(45, 212, 191, 0.18)) 0%, transparent 62%),
        radial-gradient(ellipse 55% 40% at 18% 88%, var(--accent-2-dim, rgba(251, 113, 133, 0.12)) 0%, transparent 55%),
        linear-gradient(165deg, var(--mood-loader-bg) 0%, var(--mood-loader-bg-deep) 48%, var(--bg-elevated, #f8fafc) 100%);
    pointer-events: none;
}

.mood-preloader__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.mood-preloader__orb {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mood-preloader__glow {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 133, 240, 0.35) 0%, transparent 68%);
    animation: mood-loader-glow 2.2s ease-in-out infinite;
    pointer-events: none;
}

.mood-preloader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--mood-loader-track);
    border-top-color: var(--mood-loader-blue-bright);
    border-right-color: var(--mood-loader-blue);
    animation: mood-loader-spin 0.75s linear infinite;
    box-sizing: border-box;
}

.mood-preloader__core {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mood-loader-blue-bright), var(--mood-loader-blue));
    box-shadow: 0 0 20px var(--accent-glow, rgba(45, 212, 191, 0.45));
    animation: mood-loader-pulse 1.4s ease-in-out infinite;
}

/* Общий синий спиннер (страницы, блоки, игры) */
.mood-spinner,
body.mood-layout-v2 .play-page-loading-spinner,
body.mood-layout-v2 .deposit-form-loading__spinner,
body.mood-layout-v2 .deposit-auto-crypto-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--mood-loader-track);
    border-top-color: var(--mood-loader-blue-bright);
    border-right-color: var(--mood-loader-blue);
    border-radius: 50%;
    animation: mood-loader-spin 0.75s linear infinite;
    box-sizing: border-box;
    flex-shrink: 0;
}

body.mood-layout-v2 .play-page-loading-spinner {
    width: 44px;
    height: 44px;
}

body.mood-layout-v2 .loading,
body.mood-layout-v2 .bp-loading,
body.mood-layout-v2 .footer-loading,
body.mood-layout-v2 .support-center-loading,
body.mood-layout-v2 .play-page-quests-loading,
body.mood-layout-v2 .play-page-winners-loading,
body.mood-layout-v2 .header-balance-dropdown-loading,
body.mood-layout-v2 .acc-notifications-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted) !important;
    font-size: 0.9375rem;
    font-weight: 500;
}

body.mood-layout-v2 .loading::before,
body.mood-layout-v2 .bp-loading::before,
body.mood-layout-v2 .footer-loading::before,
body.mood-layout-v2 .support-center-loading::before,
body.mood-layout-v2 .play-page-quests-loading::before,
body.mood-layout-v2 .play-page-winners-loading::before,
body.mood-layout-v2 .header-balance-dropdown-loading::before,
body.mood-layout-v2 .acc-notifications-loading::before {
    content: "";
    display: block;
    width: 36px;
    height: 36px;
    border: 3px solid var(--mood-loader-track);
    border-top-color: var(--mood-loader-blue-bright);
    border-right-color: var(--mood-loader-blue);
    border-radius: 50%;
    animation: mood-loader-spin 0.75s linear infinite;
    box-sizing: border-box;
}

body.mood-layout-v2 .play-page-iframe-loading {
    color: #64748b;
}

body.mood-layout-v2 .deposit-form-loading,
body.mood-layout-v2 .deposit-auto-crypto-loading {
    color: #64748b;
}