[hidden]{
    display:none !important;
}


/* ---------------------------------------------------
   Loading / Messages
--------------------------------------------------- */

.sprite-message{
    padding:50px 20px;
    text-align:center;
}

.sprite-message strong{
    display:block;
    font-size:20px;
    font-weight:900;
    text-transform:uppercase;
}

.sprite-message span{
    display:block;
    margin-top:6px;
    opacity:.6;
}


/* ---------------------------------------------------
   Chapter Filters
--------------------------------------------------- */

.chapter-controls{
    display:flex;
    align-items:center;
    gap:18px;
    margin:0 0 30px;
    padding:18px 20px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.025);
}

.chapter-heading{
    flex:0 0 auto;
    padding-right:18px;
    border-right:1px solid rgba(255,255,255,.1);
}

.chapter-heading span{
    display:block;
    font-size:9px;
    font-weight:800;
    letter-spacing:.15em;
    opacity:.45;
}

.chapter-heading strong{
    display:block;
    margin-top:3px;
    font-size:14px;
    font-weight:900;
    letter-spacing:.06em;
}

.chapter-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.chapter-buttons button{
    padding:9px 14px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.035);
    color:rgba(255,255,255,.65);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    cursor:pointer;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.chapter-buttons button:hover{
    color:#fff;
    border-color:rgba(255,255,255,.2);
    transform:translateY(-1px);
}

.chapter-buttons button.active{
    color:#fff;
    background:rgba(90,75,255,.2);
    border-color:rgba(115,100,255,.65);
}


/* ---------------------------------------------------
   Sprite Cards
--------------------------------------------------- */

.sprite-id{
    margin-top:8px;
    font-size:13px;
    font-weight:700;
    opacity:.55;
}

.sprite-variant{
    display:inline-block !important;
    margin-bottom:5px;
    color:#9c91ff !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.09em !important;
    text-transform:uppercase;
}

.sprite-details{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:10px;
    padding-top:9px;
    border-top:1px solid rgba(255,255,255,.06);
}

.sprite-details span{
    font-size:10px !important;
    font-weight:700;
    opacity:.45;
}


/* ---------------------------------------------------
   Chapter Badge
--------------------------------------------------- */

.chapter-badge{
    position:absolute;
    z-index:3;
    left:12px;
    bottom:12px;
    padding:6px 8px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(6px);
    color:#fff;
    font-size:9px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    pointer-events:none;
}


/* ---------------------------------------------------
   Modal
--------------------------------------------------- */

.modal-variant-title{
    margin-top:-8px;
    margin-bottom:12px;
    color:#9c91ff;
    font-size:13px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.sprite-image-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:20px;
    padding:12px 18px;
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.sprite-image-link:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.3);
    transform:translateY(-1px);
}


/* ---------------------------------------------------
   No Results
--------------------------------------------------- */

#no-results{
    display:none;
}


/* ---------------------------------------------------
   Error State
--------------------------------------------------- */

#error[hidden]{
    display:none !important;
}


/* ---------------------------------------------------
   Mobile
--------------------------------------------------- */

@media(max-width:750px){

    .chapter-controls{
        display:block;
        padding:16px;
    }

    .chapter-heading{
        padding:0 0 12px;
        margin-bottom:12px;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .chapter-buttons{
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:4px;
        scrollbar-width:thin;
    }

    .chapter-buttons button{
        flex:0 0 auto;
        white-space:nowrap;
    }

    .sprite-details{
        gap:6px;
    }

    .sprite-details span{
        font-size:9px !important;
    }

    .chapter-badge{
        left:8px;
        bottom:8px;
        padding:5px 7px;
        font-size:8px;
    }

    .sprite-variant{
        font-size:10px !important;
    }

    .modal-variant-title{
        font-size:11px;
    }

}