/* ============================================================
   ZZAP!64 ARCHIVE — PROGRESSIVE LOADING + RENDER CONTAINMENT
   ------------------------------------------------------------
   Isolated performance layer. Existing award-card presentation
   remains in zzap64-awards.css.
============================================================ */

.zzap-loading {
    display: grid;
    gap: 9px;
    margin: 22px 0 16px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--accent-rgb, 0, 221, 255), 0.46);
    background:
        linear-gradient(90deg, rgba(var(--accent-rgb, 0, 221, 255), 0.12), transparent 58%),
        rgba(3, 7, 18, 0.96);
    box-shadow:
        0 0 0 100vmax rgba(0, 0, 0, 0.48),
        0 20px 54px rgba(0, 0, 0, 0.54),
        0 0 26px rgba(var(--accent-rgb, 0, 221, 255), 0.18);
}

/*
   The archive controls sit below the introductory material. Keeping the
   active progress panel fixed in the viewport ensures it is visible at
   eye level immediately, regardless of screen height or scroll position.
*/
.zzap-loading:not([hidden]) {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 5000;
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    margin: 0;
    transform: translate(-50%, -50%);
}

.zzap-loading[hidden] {
    display: none;
}

.zzap-loading__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font: 700 0.72rem/1.35 "Orbitron", sans-serif;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.zzap-loading__header strong {
    flex: 0 0 auto;
    color: rgb(var(--accent-rgb, 0, 221, 255));
}

.zzap-loading__track {
    position: relative;
    overflow: hidden;
    height: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.42);
}

.zzap-loading__bar {
    display: block;
    width: 0;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            rgba(var(--accent-rgb, 0, 221, 255), 0.74),
            rgba(255, 255, 255, 0.92),
            rgba(var(--accent-rgb, 0, 221, 255), 0.82)
        );
    box-shadow: 0 0 16px rgba(var(--accent-rgb, 0, 221, 255), 0.58);
    transform-origin: left center;
    transition: width 180ms ease-out;
}

.zzap-loading__detail {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.78rem;
    line-height: 1.5;
}

.zzap-tools :is(input, select):disabled {
    cursor: wait;
    opacity: 0.56;
}

.zzap-award-card {
    content-visibility: auto;
    contain-intrinsic-size: 318px 210px;
}

.zzap-awards[aria-busy="true"] .zzap-award-card {
    pointer-events: none;
}

.zzap-award-card__availability--checking {
    border-style: solid;
    border-color: rgba(var(--accent-rgb, 0, 221, 255), 0.28);
    color: rgba(var(--accent-rgb, 0, 221, 255), 0.88);
    opacity: 0.86;
}

.zzap-award-card__availability--unavailable {
    border-color: rgba(255, 196, 94, 0.30);
    color: rgba(255, 218, 153, 0.82);
    opacity: 0.82;
}

@media (max-width: 520px) {
    .zzap-loading:not([hidden]) {
        top: 48%;
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        padding: 12px;
    }

    .zzap-loading__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zzap-loading__bar {
        transition: none;
    }
}