/*
 * These three chest layouts use an image containing four gold plaques per row.
 * Paint that image separately from the cards so a partial row can crop the
 * unused plaques without clipping the chest icons or changing the card widths.
 * The crop points follow the plaque borders in the original box_bg.png sprite.
 */
.treasurechestList .listBox ul li[data-v-94b644f6],
.treasurechestList .listBox ul li[data-v-f7ace177],
.treasurechestList .listBox ul li[data-v-fdb4d1ff] {
    background: none !important;
}

.treasurechestList .listBox ul li[data-v-94b644f6] {
    --referral-chest-row-image: var(--v5adb03a0);
}

.treasurechestList .listBox ul li[data-v-f7ace177] {
    --referral-chest-row-image: var(--v070e5170);
}

.treasurechestList .listBox ul li[data-v-fdb4d1ff] {
    --referral-chest-row-image: var(--v166bd164);
}

.treasurechestList .listBox ul li[data-v-94b644f6]::before,
.treasurechestList .listBox ul li[data-v-f7ace177]::before,
.treasurechestList .listBox ul li[data-v-fdb4d1ff]::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1.93rem;
    background-image: var(--referral-chest-row-image);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    clip-path: inset(0 var(--referral-chest-row-cut, 0%) 0 0);
    pointer-events: none;
}

.treasurechestList .listBox ul li:has(> .itemBox:only-child) {
    --referral-chest-row-cut: 73%;
}

.treasurechestList .listBox ul li:has(> .itemBox:nth-child(2):last-child) {
    --referral-chest-row-cut: 50%;
}

.treasurechestList .listBox ul li:has(> .itemBox:nth-child(3):last-child) {
    --referral-chest-row-cut: 27.5%;
}

.treasurechestList .listBox ul li:not(:has(> .itemBox))::before {
    content: none;
}

.treasurechestList .listBox ul li > .itemBox {
    z-index: 1;
}

.referral-chest-bet-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    padding: .3rem;
    font-size: .32rem;
}

.referral-chest-bet-rule > p:last-child {
    flex-shrink: 0;
}