@keyframes svelte-1g8kcgj-scaleUp {
    0% {
        transform: translate(-50%, -50%) scale(0)
    }
    to {
        transform: translate(-50%, -50%) scale(.7)
    }
}

@keyframes svelte-1g8kcgj-backgroundScale {
    0% {
        background-size: 0%
    }
    to {
        background-size: 70%
    }
}

.gem.svelte-1g8kcgj {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    animation-duration: var(--duration);
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.87, -.41, .19, 1.44);
    animation-name: svelte-1g8kcgj-backgroundScale
}

.gem.revealed.svelte-1g8kcgj>* {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: var(--duration);
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.87, -.41, .19, 1.44);
    animation-name: svelte-1g8kcgj-scaleUp
}

.gem.svelte-1g8kcgj:not(.revealed) {
    background-image: var(--mine);
    opacity: .3;
    transform: scale(.7)
}

.gem.svelte-1g8kcgj:not(.revealed)>* {
    transform: scale(.7)
}

.motion.svelte-1g8kcgj {
    width: 100%
}

@keyframes svelte-zf3lq7-backgroundScale {
    0% {
        background-size: 0%
    }
    to {
        background-size: 70%
    }
}

.effect.svelte-zf3lq7 {
    width: 150%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.mine.svelte-zf3lq7 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    animation-duration: var(--duration);
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.87, -.41, .19, 1.44);
    animation-name: svelte-zf3lq7-backgroundScale
}

.mine.svelte-zf3lq7:not(.revealed) {
    opacity: .3;
    transform: scale(.7)
}

@keyframes svelte-187anwg-backgroundScale {
    0% {
        background-size: 0%
    }
    to {
        background-size: 70%
    }
}

@keyframes svelte-187anwg-fetching {
    0%,
    to {
        transform: scale(1)
    }
    50% {
        transform: scale(1.1)
    }
}

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

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

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

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

.tile.svelte-187anwg:disabled,
.tile[disabled].svelte-187anwg {
    cursor: not-allowed;
    pointer-events: none
}

.tile.selected.svelte-187anwg {
    box-shadow: 0 var(--shadow) var(--purple-600), inset 0 0 0 var(--shadow) var(--purple-500)
}

.tile.gem.svelte-187anwg {
    background-color: var(--grey-900)
}

.tile.gem.svelte-187anwg:disabled,
.tile.gem[disabled].svelte-187anwg {
    opacity: 1
}

.tile.mine.svelte-187anwg {
    background-color: var(--grey-900)
}

.content.svelte-187anwg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    animation-duration: var(--duration);
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.87, -.41, .19, 1.44);
    animation-name: svelte-187anwg-backgroundScale
}

.content.revealed.svelte-187anwg {
    opacity: .3;
    transform: scale(.7)
}

.cover.svelte-187anwg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    animation-fill-mode: forwards;
    border-radius: var(--radius);
    transition-duration: var(--duration);
    transition-property: transform, background, box-shadow;
    background: var(--grey-400);
    box-shadow: 0 var(--shadow) var(--grey-500)
}

.cover.selected.svelte-187anwg {
    background-color: var(--purple-500);
    box-shadow: 0 var(--shadow) var(--purple-600)
}

.cover.idle.svelte-187anwg {
    animation-name: svelte-187anwg-hide;
    animation-duration: var(--duration);
    animation-timing-function: cubic-bezier(.87, -.41, .19, 1.44)
}

.cover.idle.svelte-187anwg:hover {
    transform: translateY(var(--small-shadow))
}

.cover.idle:hover.selected.svelte-187anwg {
    background-color: var(--purple-400);
    box-shadow: 0 var(--shadow) var(--purple-600)
}

.cover.idle.svelte-187anwg:hover:not(.selected) {
    background-color: var(--grey-300);
    box-shadow: 0 var(--shadow) var(--grey-500)
}

.cover.idle.svelte-187anwg:active {
    transform: translateY(0)
}

.cover.fetching.svelte-187anwg {
    animation-name: svelte-187anwg-fetching;
    animation-duration: var(--fetch-duration);
    animation-iteration-count: infinite
}

.cover.gem.svelte-187anwg,
.cover.mine.svelte-187anwg {
    opacity: 0;
    animation-name: svelte-187anwg-reveal;
    animation-duration: var(--duration)
}