/* 1. KHAI BÁO FONT FACE ĐẶT TRÊN CÙNG BẮT BUỘC */
@font-face {
    font-family: 'DePixel Breit';
    src: url('../fonts/DePixelBreit.ttf') format('truetype'), url('../fonts/DePixelBreit.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2. RESET BODY & ÁP DỤNG FONT ĐỒNG BỘ */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background-color: #000;
    font-family: 'DePixel Breit', monospace, sans-serif;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Gán font kế thừa cho các phần tử tương tác */
button, input, select, textarea {
    font-family: inherit;
}

/* 3. CONTAINER ARCADE CHÍNH (9:16) */
.arcade-loading-container {
    position: relative;
    width: min(100vw, calc(100vh * (9 / 16)));
    max-width: 450px;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    background: #000 url('../images/loading/bg.png') center center / cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: clamp(60px, 10vh, 90px);
    box-sizing: border-box;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}

    /* Lớp phủ TV CRT Scanlines */
    .arcade-loading-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
        background-size: 100% 4px;
        pointer-events: none;
        z-index: 2;
    }

/* LOGO & LOADING COMPONENT */
.arcade-logo-box {
    position: absolute;
    top: 22%;
    width: 80%;
    max-width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.arcade-logo-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.7));
}

.arcade-loading-text-img {
    height: 13px;
    margin-bottom: 12px;
    z-index: 3;
    animation: arcade-blink 1.2s infinite;
}

@keyframes arcade-blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.arcade-progress-box {
    width: 80%;
    max-width: 290px;
    height: 22px;
    background-image: url('../images/loading/vien_loading.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding: 3px 6px;
    z-index: 3;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.arcade-progress-fill {
    height: 100%;
    width: 0%;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: width 0.1s linear;
}

.arcade-arrow-body {
    height: 100%;
    flex-grow: 1;
    background: url('../images/loading/arrow_body.png') repeat-x center / auto 100%;
}

.arcade-arrow-head {
    height: 100%;
    width: 14px;
    flex-shrink: 0;
    background: url('../images/loading/arrow_head.png') no-repeat center / contain;
}