.wrap.svelte-6hvf7a {
    display: flex;
    position: relative;
    align-items: flex-start;
    margin-top: 1em;
    font-size: var(--card-size-ratio);
    min-width: var(--min-width);
    min-height: var(--min-height);
    transition-duration: var(--slide-transition)
}

@keyframes svelte-6hvf7a-muckCard {
    to {
        opacity: 0;
        transform: translate(-10%, 10%)
    }
}

.content.dealt.svelte-6hvf7a {
    opacity: 1
}

.content.svelte-6hvf7a:not(.dealt) {
    opacity: 0
}

.content.mucked.svelte-6hvf7a {
    animation-name: svelte-6hvf7a-muckCard;
    animation-duration: var(--muck-transition);
    animation-fill-mode: forwards
}

.value.svelte-6hvf7a {
    font-size: var(--text-size-default);
    position: absolute;
    top: 0;
    left: 100%;
    border-radius: 999px;
    padding: var(--space-1) var(--space-2);
    font-weight: 800;
    color: var(--white);
    width: 7ch;
    text-align: center;
    transform: translate(-100%, -100%);
    transition-duration: .3s;
    transition-property: background, color, transform, opacity;
    transition-timing-function: ease-out;
    box-shadow: var(--shadows-sm)
}

.value.hide.svelte-6hvf7a {
    opacity: 0
}

.value.active.svelte-6hvf7a {
    background: var(--blue-400);
    color: var(--blue-800)
}

.value.win.svelte-6hvf7a {
    background: var(--green-400);
    color: var(--green-800)
}

.value.draw.svelte-6hvf7a {
    background: var(--yellow-500);
    color: var(--yellow-800)
}

.value.lose.svelte-6hvf7a {
    background: var(--red-500);
    color: var(--white)
}

.value.none.svelte-6hvf7a {
    background: var(--grey-400)
}