/* =========================================================
   LONARPG PAGE LOADER
   Реальные CharacterCharset-слои LonaMCC, 64x64 кадр.
   В исходниках лист 768x512 = 12x8 кадров по 64x64.
   Для движения ВПРАВО используется строка 3 (Y = -128px),
   первые 3 кадра: X = 0 / -64 / -128px.
   ========================================================= */

html.lona-loader-active,
body.lona-loader-active {
    overflow: hidden !important;
}

.lona-page-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;

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

    padding: 28px;

    background:
        radial-gradient(circle at 50% 35%, rgba(88, 25, 17, 0.20), transparent 38%),
        linear-gradient(180deg, #100707 0%, #070303 48%, #020101 100%);

    opacity: 1;
    visibility: visible;

    transition:
        opacity .45s ease,
        visibility .45s ease;
}

.lona-page-loader.is-finished {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.lona-loader-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 1px,
            transparent 1px,
            transparent 4px
        );
}

.lona-loader-panel {
    position: relative;
    width: min(980px, 92vw);

    padding: 42px 44px 34px;

    color: #ded4cc;
    text-align: center;

    background:
        linear-gradient(180deg, rgba(26, 8, 7, .94), rgba(5, 2, 2, .97));

    border: 2px solid #60322b;

    box-shadow:
        inset 0 0 0 4px rgba(0,0,0,.48),
        inset 0 0 40px rgba(111, 31, 20, .20),
        0 20px 70px rgba(0,0,0,.75),
        0 0 28px rgba(110, 31, 21, .10);

    clip-path: polygon(
        14px 0, calc(100% - 14px) 0,
        calc(100% - 14px) 5px, calc(100% - 5px) 5px,
        calc(100% - 5px) 14px, 100% 14px,
        100% calc(100% - 14px), calc(100% - 5px) calc(100% - 14px),
        calc(100% - 5px) calc(100% - 5px), calc(100% - 14px) calc(100% - 5px),
        calc(100% - 14px) 100%, 14px 100%,
        14px calc(100% - 5px), 5px calc(100% - 5px),
        5px calc(100% - 14px), 0 calc(100% - 14px),
        0 14px, 5px 14px, 5px 5px, 14px 5px
    );
}

.lona-loader-panel::before {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    border: 1px solid rgba(144, 69, 54, .28);
}

.lona-loader-kicker {
    margin-bottom: 8px;
    color: #a5634a;
    font-family: 'MyCustomFont', sans-serif;
    font-size: 13px;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px #000;
}

.lona-loader-title {
    color: #e7d6c7;
    font-family: 'Press Start 2P', 'MyCustomFont', monospace;
    font-size: clamp(24px, 3vw, 42px);
    letter-spacing: 3px;
    text-shadow:
        0 3px 0 #744031,
        0 6px 12px #000;
}

/* =========================================================
   СЦЕНА
   ========================================================= */

.lona-loader-stage {
    position: relative;
    width: 100%;
    height: 190px;
    margin: 16px auto 2px;
    overflow: hidden;
}

.lona-loader-floor {
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: 29px;
    height: 3px;

    background:
        linear-gradient(90deg, transparent, #5c2d27 6%, #914735 50%, #5c2d27 94%, transparent);

    box-shadow:
        0 2px 0 #160706,
        0 -1px 8px rgba(157, 67, 46, .15);
}

.lona-loader-floor::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    height: 9px;
    opacity: .45;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 20px,
            #371712 20px 24px,
            transparent 24px 38px
        );
}

/*
 * ВАЖНО:
 * Это ОДИН viewport 64x64.
 * Поэтому браузер больше не показывает весь spritesheet и десяток Лон.
 */
.lona-loader-runner {
    position: absolute;
    left: 2%;
    bottom: 33px;

    width: 64px;
    height: 64px;

    transform: translateX(-50%) scale(2.05);
    transform-origin: center bottom;

    transition: left .20s linear;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.lona-sprite {
    position: absolute;
    inset: 0;

    display: block;
    width: 64px;
    height: 64px;

    background-repeat: no-repeat;
    background-size: 768px 512px;
    background-position: 0 -128px;

    image-rendering: pixelated;
    image-rendering: crisp-edges;

    animation: lona-walk-right .42s steps(1, end) infinite;
}

.lona-sprite-body {
    background-image: url('/Image/LonaLoader/LonaMCC_body.png');
}

.lona-sprite-ragbot {
    background-image: url('/Image/LonaLoader/LonaMCC_equip_RagBot.png');
}

.lona-sprite-ragmid {
    background-image: url('/Image/LonaLoader/LonaMCC_equip_RagMid.png');
}

.lona-sprite-ragtop {
    background-image: url('/Image/LonaLoader/LonaMCC_equip_RagTop.png');
}

.lona-sprite-head {
    background-image: url('/Image/LonaLoader/LonaMCC_head_Good.png');
}

.lona-sprite-hair {
    background-image: url('/Image/LonaLoader/LonaMCC_equip_BasicHair.png');
}

/*
 * LonaMCC: 64x64 клетка.
 * Row 2 (0-based) = персонаж смотрит вправо.
 * 0 -> 1 -> 2 -> 1 создаёт нормальный цикл шага.
 */
@keyframes lona-walk-right {
    0%, 24.99% {
        background-position: 0 -128px;
    }

    25%, 49.99% {
        background-position: -64px -128px;
    }

    50%, 74.99% {
        background-position: -128px -128px;
    }

    75%, 100% {
        background-position: -64px -128px;
    }
}

/* =========================================================
   PROGRESS
   ========================================================= */

.lona-loader-progress-wrap {
    width: min(760px, 94%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 82px;
    align-items: center;
    gap: 13px;
}

.lona-loader-progress-frame {
    position: relative;
    height: 26px;
    padding: 4px;
    overflow: hidden;

    background: #080303;
    border: 1px solid #6a342d;

    box-shadow:
        inset 0 0 0 2px #170807,
        0 4px 12px rgba(0,0,0,.65);
}

.lona-loader-progress {
    width: 0;
    height: 100%;

    background:
        linear-gradient(90deg, #6e160f 0%, #a62d18 28%, #d36527 72%, #f1a33f 100%);

    box-shadow:
        inset 0 2px 0 rgba(255, 212, 121, .25),
        0 0 14px rgba(212, 73, 31, .28);

    transition: width .12s linear;
}

.lona-loader-progress-shine {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: -25%;
    width: 20%;

    background: linear-gradient(90deg, transparent, rgba(255,236,184,.24), transparent);

    animation: lona-progress-shine 1.7s linear infinite;
    pointer-events: none;
}

@keyframes lona-progress-shine {
    from { left: -25%; }
    to   { left: 110%; }
}

.lona-loader-percent {
    min-width: 82px;
    padding: 7px 8px 6px;

    color: #e9b45a;
    font-family: 'Press Start 2P', 'MyCustomFont', monospace;
    font-size: 13px;
    text-align: center;

    background: #160706;
    border: 1px solid #653027;
    box-shadow: inset 0 0 9px rgba(137, 45, 27, .18);
}

.lona-loader-status {
    margin-top: 18px;

    color: #a99182;
    font-family: 'MyCustomFont', sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px #000;
}

@media (max-width: 700px) {
    .lona-page-loader {
        padding: 12px;
    }

    .lona-loader-panel {
        width: 96vw;
        padding: 30px 16px 24px;
    }

    .lona-loader-stage {
        height: 155px;
    }

    .lona-loader-runner {
        bottom: 31px;
        transform: translateX(-50%) scale(1.65);
    }

    .lona-loader-progress-wrap {
        grid-template-columns: 1fr 66px;
        gap: 8px;
    }

    .lona-loader-percent {
        min-width: 66px;
        font-size: 10px;
    }

    .lona-loader-kicker {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .lona-loader-status {
        font-size: 10px;
        letter-spacing: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lona-sprite,
    .lona-loader-progress-shine {
        animation: none !important;
    }

    .lona-loader-runner,
    .lona-loader-progress {
        transition: none !important;
    }
}