@keyframes svelte-1f08dh7-reveal {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-45deg)
    }
    to {
        transform: translate(-50%, -50%) scale(1) rotate(0)
    }
}

.gem.svelte-1f08dh7 {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    transform: translate(-50%, -50%);
    animation-name: svelte-1f08dh7-reveal;
    animation-duration: var(--duration);
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.87, -.41, .19, 1.44)
}

@keyframes svelte-1spdt6n-reveal {
    0% {
        opacity: 1
    }
    to {
        transform: scale(0);
        opacity: 0
    }
}

@keyframes svelte-1spdt6n-hide {
    0% {
        opacity: 0;
        transform: scale(0)
    }
}

.tile.svelte-1spdt6n.svelte-1spdt6n {
    position: relative;
    font-size: var(--spacingEm-1-5);
    font-weight: 600;
    color: var(--white);
    text-shadow: 0 3px 2px rgba(0, 0, 0, .1);
    border-radius: var(--border-radius-md);
    transition-duration: var(--duration);
    transition-property: background-color, box-shadow, opacity
}

.tile.svelte-1spdt6n.svelte-1spdt6n:after {
    content: "";
    display: block;
    padding-bottom: 100%
}

.tile.svelte-1spdt6n.svelte-1spdt6n:disabled,
.tile[disabled].svelte-1spdt6n.svelte-1spdt6n {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none
}

.tile.is-revealed.svelte-1spdt6n.svelte-1spdt6n {
    background-color: var(--grey-900);
    box-shadow: inset 0 var(--shadow) #001017;
    color: var(--red-500)
}

.tile.is-match.svelte-1spdt6n.svelte-1spdt6n {
    background-color: var(--grey-900);
    box-shadow: 0 var(--shadow) var(--purple-600), 0 0 0 .3em var(--purple-400) inset;
    color: var(--green-700);
    text-shadow: 0 1px 1px var(--white)
}

.tile.is-match.svelte-1spdt6n.svelte-1spdt6n:disabled,
.tile.is-match[disabled].svelte-1spdt6n.svelte-1spdt6n {
    opacity: 1
}

.tile.is-selected.svelte-1spdt6n.svelte-1spdt6n:disabled,
.tile.is-selected[disabled].svelte-1spdt6n.svelte-1spdt6n {
    opacity: 1
}

.tile.svelte-1spdt6n .tile-number.svelte-1spdt6n {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none
}

.tile.svelte-1spdt6n .cover.svelte-1spdt6n {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    animation-fill-mode: forwards;
    border-radius: var(--border-radius-md);
    transition-duration: var(--duration);
    transition-property: background-color, box-shadow, transform
}

.tile.svelte-1spdt6n .cover.is-hidden.svelte-1spdt6n {
    background: var(--grey-400);
    box-shadow: 0 var(--shadow) var(--grey-500);
    animation-name: svelte-1spdt6n-hide;
    animation-duration: var(--duration);
    animation-timing-function: cubic-bezier(.87, -.41, .19, 1.44)
}

.tile.svelte-1spdt6n .cover.is-hidden.svelte-1spdt6n:hover {
    background: var(--grey-300);
    box-shadow: 0 var(--tile-shadow-lg) var(--grey-400);
    transform: translateY(var(--tile-shadow-inset))
}

.tile.svelte-1spdt6n .cover.is-selected.svelte-1spdt6n {
    background-color: var(--purple-400);
    box-shadow: 0 var(--shadow) var(--purple-600);
    animation-name: svelte-1spdt6n-hide;
    animation-duration: var(--duration);
    animation-timing-function: cubic-bezier(.87, -.41, .19, 1.44)
}

.tile.svelte-1spdt6n .cover.is-selected.svelte-1spdt6n:hover {
    background-color: var(--purple-300);
    box-shadow: 0 var(--tile-shadow-lg) var(--purple-500);
    transform: translateY(var(--tile-shadow-inset))
}

.tile.svelte-1spdt6n .cover.is-revealed.svelte-1spdt6n {
    background: var(--green-400);
    box-shadow: 0 var(--shadow) var(--grey-500);
    opacity: 0;
    animation-name: svelte-1spdt6n-reveal;
    animation-duration: var(--duration)
}

.tile.svelte-1spdt6n .cover.is-match.svelte-1spdt6n {
    background-color: var(--purple-400);
    box-shadow: 0 var(--shadow) var(--purple-600);
    opacity: 0;
    animation-name: svelte-1spdt6n-reveal;
    animation-duration: var(--duration)
}