/* ==========================================================================
   loading.css - Стили для загрузочного экрана
   Полное соответствие huli.html с правильным z-index
   ========================================================================== */

/* ===== ЗАГРУЗОЧНЫЙ ЭКРАН ===== */
.trumpamole__loading-screen {
    position: fixed;
    inset: 0;
    background: url('../loading_page.webp') center/cover no-repeat;
    z-index: 10000;
    font-family: var(--font-main, 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial);
}

.trumpamole__loading-layer {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ===== ЛОГОТИП ===== */
.trumpamole__loading-brand {
    position: absolute;
    top: clamp(12px, 2.2vh, 22px);
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    z-index: 3;
    pointer-events: none;
}

.trumpamole__loading-logo {
    width: clamp(360px, 36vw, 480px);
    height: auto;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

/* ===== HUD - ПАНЕЛЬ ЗАГРУЗКИ ===== */
.trumpamole__loading-hud {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(12px, 2.2vw, 24px);
    display: grid;
    place-items: center;
    padding: 0 clamp(12px, 2.2vw, 24px);
    z-index: 2;
    pointer-events: none;
    margin-bottom: 30px;
}

.trumpamole__loading-plate {
    width: min(360px, 66vw);
    display: grid;
    gap: 10px;
}

/* ===== ТЕКСТ ЗАГРУЗКИ ===== */
.trumpamole__loading-line {
    width: min(360px, 66vw);
    font-weight: 900;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
    margin-left: 12px;
    color: #FFF6E6;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.trumpamole__loading-dots {
    display: inline-flex;
    gap: 2px;
    margin-left: 4px;
}

.trumpamole__loading-dot {
    opacity: .15;
    animation: trumpamole__dotPulse 900ms infinite;
}

.trumpamole__loading-dot:nth-child(2) { 
    animation-delay: 150ms; 
}

.trumpamole__loading-dot:nth-child(3) { 
    animation-delay: 300ms; 
}

@keyframes trumpamole__dotPulse {
    0% { opacity: .15; }
    35% { opacity: 1; }
    70% { opacity: .15; }
}

/* ===== КОНТЕЙНЕР ПРОГРЕСС БАРА ===== */
.trumpamole__loading-bar-host {
    width: min(360px, 66vw);
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.55));
}

/* ===== ОСНОВА ПРОГРЕСС БАРА ===== */
.trumpamole__loading-bar-fill {
    position: relative;
    height: 50px;
    border-radius: 12px;
    padding: 8px;
    overflow: visible;  /* ИЗМЕНЕНО: visible вместо hidden */
    border: 2px solid rgba(0, 0, 0, 0.25);
    background:
        radial-gradient(120% 110% at 50% -10%,
            #865949 0%,
            #412e2f 22%,
            #3f2b2d 48%,
            #342424 74%,
            #3d2424 100%),
        linear-gradient(180deg, #3d2a2c 0%, #1d1a1a 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.10),
        inset 0 10px 30px rgba(0,0,0,.25);
}

/* ===== ФОН ПОД ЗАЛИВКОЙ ===== */
.trumpamole__loading-fill-bg {
    position: absolute;
    inset: 8px;
    background: #433030;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    z-index: 1;
}

/* ===== ЗАЛИВКА ПРОГРЕССА ===== */
.trumpamole__loading-fill {
    position: relative;
    width: 0%;
    height: 100%;
    border-radius: 12px;
    z-index: 2;
    overflow: hidden;
    background:
        radial-gradient(60% 55% at 50% 18%, 
            #FCF9A0 0%, 
            #ffbd1d 40%, 
            #ffac21 75%, 
            #ffaa29 100%),
        linear-gradient(180deg, #F5D65A 0%, #C37939 100%);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.45),
        inset 0 -10px 18px rgba(0,0,0,.22),
        0 0 18px rgba(255,200,80,.22);
    transition: width 120ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ===== БЛИК НА ЗАЛИВКЕ ===== */
.trumpamole__loading-fill-shine {
    position: absolute;
    inset: 0 0 auto 0;
    height: 55%;
    background: linear-gradient(180deg, 
        rgba(255,255,255,.28) 0%, 
        transparent 100%);
    z-index: 3;
}

/* ===== БЕГУНОК (КРОТ) - ИСПРАВЛЕНО: ПОВЕРХ ВСЕГО ===== */
.trumpamole__loading-runner {
    position: absolute;
    top: 50%;
    left: 0;
    width: clamp(48px, 4.5vw, 44px);
    height: clamp(48px, 4.5vw, 44px);
    transform: translate(0, -50%);
    z-index: 10;  /* ПОВЫШЕНО: теперь поверх всего */
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.55));
    transition: transform 120ms cubic-bezier(0.34, 1.2, 0.64, 1);
    pointer-events: none;
}

.trumpamole__loading-runner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;  /* ДОБАВЛЕНО */
}

/* ===== АНИМАЦИЯ ПОЯВЛЕНИЯ ===== */
@keyframes trumpamole__loadingFadeOut {
    from { 
        opacity: 1; 
        visibility: visible;
    }
    to { 
        opacity: 0; 
        visibility: hidden;
    }
}

.trumpamole__loading-screen.fade-out {
    animation: trumpamole__loadingFadeOut 0.5s ease forwards;
}

/* ===== АДАПТАЦИЯ ДЛЯ МАЛЕНЬКИХ ЭКРАНОВ ===== */
@media (max-width: 360px) {
    .trumpamole__loading-logo {
        width: 300px;
    }
    
    .trumpamole__loading-plate,
    .trumpamole__loading-bar-host,
    .trumpamole__loading-line {
        width: 300px;
    }
    
    .trumpamole__loading-line {
        font-size: 14px;
        margin-left: 8px;
    }
}

/* ===== ПОДДЕРЖКА SAFE AREA ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .trumpamole__loading-hud {
        bottom: calc(clamp(12px, 2.2vw, 24px) + env(safe-area-inset-bottom));
        padding-left: calc(clamp(12px, 2.2vw, 24px) + env(safe-area-inset-left));
        padding-right: calc(clamp(12px, 2.2vw, 24px) + env(safe-area-inset-right));
    }
}