.face-content.svelte-ezl0wv {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 2.2em;
    width: -moz-max-content;
    width: max-content;
    margin-left: 10%
}

.face-content.small.svelte-ezl0wv {
    font-size: 2.4em;
    line-height: .75;
    gap: var(--space-3);
    margin: var(--space-2) 0 0 var(--space-1)
}

.face-content.small.mobile.svelte-ezl0wv {
    font-size: 1em;
    gap: var(--space-1);
    margin: .375rem 0 0 var(--space-1)
}

.fancy-face-content.svelte-46n6f0.svelte-46n6f0 {
    display: grid;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-content: center;
    line-height: 1;
    padding: .5em 1em
}

.fancy-face-content.rank-2.svelte-46n6f0.svelte-46n6f0 {
    align-content: space-between;
    justify-content: center;
    grid-template-areas: "a" "b"
}

.fancy-face-content.rank-2.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(2) {
    transform: rotate(180deg)
}

.fancy-face-content.rank-3.svelte-46n6f0.svelte-46n6f0 {
    align-content: space-between;
    justify-content: center;
    grid-template-areas: "a" "b" "c"
}

.fancy-face-content.rank-3.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(3) {
    transform: rotate(180deg)
}

.fancy-face-content.rank-4.svelte-46n6f0.svelte-46n6f0 {
    align-content: space-between;
    justify-content: space-between;
    grid-template-areas: "a . b" "c . d"
}

.fancy-face-content.rank-4.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(3),
.fancy-face-content.rank-4.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(4) {
    transform: rotate(180deg)
}

.fancy-face-content.rank-5.svelte-46n6f0.svelte-46n6f0 {
    align-content: space-between;
    justify-content: space-between;
    grid-template-areas: "a . b" ". c ." "d . e"
}

.fancy-face-content.rank-5.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(4),
.fancy-face-content.rank-5.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(5) {
    transform: rotate(180deg)
}

.fancy-face-content.rank-6.svelte-46n6f0.svelte-46n6f0 {
    align-content: space-between;
    justify-content: space-between;
    grid-template-areas: "a . b" "c . d" "e . f"
}

.fancy-face-content.rank-6.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(5),
.fancy-face-content.rank-6.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(6) {
    transform: rotate(180deg)
}

.fancy-face-content.rank-7.svelte-46n6f0.svelte-46n6f0 {
    align-content: space-between;
    justify-content: space-between;
    grid-template-areas: "a . b" "c d e" "f . g"
}

.fancy-face-content.rank-7.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(4) {
    transform: translateY(-150%)
}

.fancy-face-content.rank-7.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(6),
.fancy-face-content.rank-7.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(7) {
    transform: rotate(180deg)
}

.fancy-face-content.rank-8.svelte-46n6f0.svelte-46n6f0 {
    align-content: space-between;
    justify-content: space-between;
    grid-template-areas: "a . b" ". c ." "d . e" ". f ." "g . h"
}

.fancy-face-content.rank-8.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(6),
.fancy-face-content.rank-8.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(7),
.fancy-face-content.rank-8.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(8) {
    transform: rotate(180deg)
}

.fancy-face-content.rank-9.svelte-46n6f0.svelte-46n6f0 {
    align-content: space-between;
    justify-content: space-between;
    grid-template-areas: "a . b" "c d e" "f . g" "h . i"
}

.fancy-face-content.rank-9.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(4) {
    transform: translateY(100%)
}

.fancy-face-content.rank-9.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(6),
.fancy-face-content.rank-9.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(7),
.fancy-face-content.rank-9.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(8),
.fancy-face-content.rank-9.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(9) {
    transform: rotate(180deg)
}

.fancy-face-content.rank-10.svelte-46n6f0.svelte-46n6f0 {
    align-content: space-between;
    justify-content: space-between;
    grid-template-areas: "a . b" "c d e" "f g h" "i . j"
}

.fancy-face-content.rank-10.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(6),
.fancy-face-content.rank-10.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(8),
.fancy-face-content.rank-10.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(9),
.fancy-face-content.rank-10.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(10) {
    transform: rotate(180deg)
}

.fancy-face-content.rank-10.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(4) {
    transform: translateY(-100%)
}

.fancy-face-content.rank-10.svelte-46n6f0 .suit.svelte-46n6f0:nth-child(7) {
    transform: translateY(100%) rotate(180deg)
}

.suit.svelte-46n6f0.svelte-46n6f0:nth-child(1) {
    grid-area: a
}

.suit.svelte-46n6f0.svelte-46n6f0:nth-child(2) {
    grid-area: b
}

.suit.svelte-46n6f0.svelte-46n6f0:nth-child(3) {
    grid-area: c
}

.suit.svelte-46n6f0.svelte-46n6f0:nth-child(4) {
    grid-area: d
}

.suit.svelte-46n6f0.svelte-46n6f0:nth-child(5) {
    grid-area: e
}

.suit.svelte-46n6f0.svelte-46n6f0:nth-child(6) {
    grid-area: f
}

.suit.svelte-46n6f0.svelte-46n6f0:nth-child(7) {
    grid-area: g
}

.suit.svelte-46n6f0.svelte-46n6f0:nth-child(8) {
    grid-area: h
}

.suit.svelte-46n6f0.svelte-46n6f0:nth-child(9) {
    grid-area: i
}

.suit.svelte-46n6f0.svelte-46n6f0:nth-child(10) {
    grid-area: j
}

.rank.svelte-46n6f0.svelte-46n6f0 {
    position: absolute;
    letter-spacing: -.1ch
}

.rank.top.svelte-46n6f0.svelte-46n6f0 {
    top: 1.2em;
    left: .5em;
    transform: translate(-50%, -50%)
}

.rank.bottom.svelte-46n6f0.svelte-46n6f0 {
    bottom: 1.2em;
    right: .5em;
    transform: translate(50%, 50%) rotate(180deg)
}

.back.svelte-70jsby.svelte-70jsby {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--spacingEm-0-25);
    background: #fff;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    backface-visibility: hidden
}

.face.svelte-70jsby.svelte-70jsby {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--spacingEm-0-25);
    background: #fff;
    transform: scaleX(-1)
}

.face.win.svelte-70jsby.svelte-70jsby {
    box-shadow: 0 0 0 .3em var(--green-500)
}

.face.lose.svelte-70jsby.svelte-70jsby {
    box-shadow: 0 0 0 .3em var(--red-500)
}

.face.draw.svelte-70jsby.svelte-70jsby {
    box-shadow: 0 0 0 .3em var(--yellow-500)
}

.face.active.svelte-70jsby.svelte-70jsby {
    box-shadow: 0 0 0 .3em var(--blue-500)
}

.horizontal.svelte-70jsby.svelte-70jsby {
    transition: var(--transition-time);
    transition-timing-function: ease-out;
    transition-property: transform
}

.horizontal.rotated.svelte-70jsby.svelte-70jsby {
    transform: rotate(90deg)
}

.content.svelte-70jsby.svelte-70jsby {
    position: relative;
    font-family: brandon-grotesque, sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    perspective: 700px;
    transition: var(--transition-time);
    transform-style: preserve-3d;
    transition-timing-function: ease-out;
    transition-property: transform, box-shadow;
    box-shadow: 0 0 .25em #0710174d;
    border-radius: var(--spacingEm-0-25)
}

.content.svelte-70jsby.svelte-70jsby:not(.face-down) {
    transform: rotateY(180deg)
}

.content.small.svelte-70jsby>div.svelte-70jsby {
    border-radius: var(--space-0-5)
}

.wrap.svelte-70jsby.svelte-70jsby:disabled {
    pointer-events: none
}

.wrap.mobile.svelte-70jsby.svelte-70jsby {
    display: flex;
    justify-content: center;
    width: 3.75em
}