.board-wrapper.svelte-alzvr6 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    --draggon-tower-border-color: #56687a;
    --dragon-tower-bg-color: #182433;
    --dragon-tower-max-width: 500px;
    padding: 4em 2em 2em;
    background-size: cover
}

.board-wrapper.dragon.svelte-alzvr6 {
    padding-top: clamp(100px, 12em, 140px)
}

.board.svelte-alzvr6 {
    position: relative;
    display: flex;
    max-width: var(--dragon-tower-max-width);
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
    z-index: 3;
    padding: var(--space-1);
    background-color: var(--dragon-tower-bg-color);
    border-left: var(--space-2) solid var(--draggon-tower-border-color);
    border-right: var(--space-2) solid var(--draggon-tower-border-color);
    border-bottom-right-radius: var(--space-2);
    border-bottom-left-radius: var(--space-2)
}

.board-topper.svelte-alzvr6 {
    max-width: var(--dragon-tower-max-width);
    width: 100%;
    margin: 0 auto;
    background-repeat: no-repeat
}

.dragon-wrap.svelte-alzvr6 {
    position: relative;
    max-width: var(--dragon-tower-max-width);
    width: 100%;
    margin: 0 auto
}

.castle-bottom-wrap.svelte-alzvr6 {
    max-width: var(--dragon-tower-max-width);
    width: 100%;
    margin: 0 auto
}

.castle-bottom.svelte-alzvr6 {
    width: 100%;
    max-width: var(--dragon-tower-max-width);
    border-bottom-right-radius: var(--space-2);
    border-bottom-left-radius: var(--space-2);
    z-index: 0;
    position: relative;
    margin-top: -10%
}

.castle.svelte-alzvr6 {
    position: relative;
    z-index: 2;
    top: -30px;
    margin-bottom: -30px
}

.dragon-head.svelte-alzvr6 {
    position: absolute;
    bottom: 8%;
    left: 50%;
    width: 20%;
    z-index: 4;
    transform: scale(.9) translate(-60%)
}

.dragon-body.svelte-alzvr6 {
    position: absolute;
    bottom: 0;
    z-index: 1;
    transform: scale(1.8) translateY(5%);
    pointer-events: none
}

.dragon-head-sprite.svelte-alzvr6,
.dragon-body-sprite.svelte-alzvr6 {
    width: 100%
}

.dragon-head-sprite.svelte-alzvr6>*,
.dragon-body-sprite.svelte-alzvr6>* {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--dragonScale))
}

.dragon-head-sprite.svelte-alzvr6>* {
    z-index: 4
}

.dragon-body-sprite.svelte-alzvr6>* {
    z-index: 0
}

.row.svelte-df42mp {
    display: flex;
    position: relative;
    padding: var(--space-1);
    border-radius: var(--space-1);
    border-top-right-radius: 0;
    border: 2px solid transparent;
    transition: all .3s
}

.row.svelte-df42mp>*+* {
    margin-left: calc(var(--space-2) + 4px)
}

.symbol.svelte-1j52gid.svelte-1j52gid {
    display: flex;
    align-items: center;
    justify-content: center
}

.symbol.svelte-1j52gid img.svelte-1j52gid {
    height: min(3.2em, 3.2rem);
    width: auto
}

.skull.svelte-11kgx68,
.fire-egg.svelte-11kgx68 {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 30%)
}

.skull.hide.hide.svelte-11kgx68 {
    visibility: hidden
}

.sprite.svelte-11kgx68 {
    position: relative;
    width: 100%;
    height: 100%;
    transform: scale(.45)
}

.sprite.retina.svelte-11kgx68 {
    transform: scale(.45) translateY(-20%)
}

.sprite.stacked.svelte-11kgx68 {
    transform: scale(.55) translateY(-20%)
}

.sprite.stacked.retina.svelte-11kgx68 {
    transform: scale(.45) translateY(-20%)
}

.egg.svelte-11kgx68 {
    transform: scale(.55) translate(-90%, 80%)
}

@keyframes svelte-4s2odx-fetching {
    0%,
    to {
        transform: scale(1)
    }
    50% {
        transform: scale(1.03)
    }
}

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

@keyframes svelte-4s2odx-revealCss {
    0% {
        opacity: 1;
        border-color: var(--grey-500)
    }
    to {
        opacity: .4;
        border-color: var(--grey-300);
        background-color: #1a2c38
    }
}

.canvas.hide.svelte-4s2odx.svelte-4s2odx,
.symbopl-wrap.hide.svelte-4s2odx.svelte-4s2odx {
    visibility: hidden
}

.bg-outer.svelte-4s2odx.svelte-4s2odx {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.tile-bg.svelte-4s2odx.svelte-4s2odx {
    display: none;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%
}

.tile-bg.svelte-4s2odx svg.svelte-4s2odx {
    width: 140%
}

.tile-bg.easy.svelte-4s2odx svg.svelte-4s2odx,
.tile-bg.master.svelte-4s2odx svg.svelte-4s2odx {
    width: 280%
}

.tile-bg.medium.svelte-4s2odx svg.svelte-4s2odx {
    width: 200%
}

.tile-bg.expert.svelte-4s2odx svg.svelte-4s2odx {
    width: 200%
}

.tile-bg.show.svelte-4s2odx.svelte-4s2odx {
    display: block
}

.background-pattern.svelte-4s2odx.svelte-4s2odx {
    overflow: hidden
}

.tile.svelte-4s2odx.svelte-4s2odx {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--grey-500);
    border: 2px solid transparent;
    border-radius: var(--border-radius-base);
    color: var(--grey-400);
    width: 100%;
    height: 2.8em;
    max-height: 56px;
    background-size: 260%;
    transition: transform .2s;
    -webkit-tap-highlight-color: transparent
}

.tile.state-chosen.svelte-4s2odx.svelte-4s2odx {
    border-color: var(--grey-300);
    background-color: #1a2c38
}

.tile.state-revealed.svelte-4s2odx.svelte-4s2odx {
    animation-name: svelte-4s2odx-revealCss;
    animation-delay: .8s;
    animation-duration: 1ms;
    animation-fill-mode: forwards
}

.tile.state-revealed.svelte-4s2odx .result-wrapper.svelte-4s2odx {
    opacity: 0;
    animation-name: svelte-4s2odx-reveal;
    animation-delay: .8s;
    animation-duration: var(--duration);
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.87, 0, .13, 1)
}

.tile.state-fetching.svelte-4s2odx.svelte-4s2odx {
    animation-name: svelte-4s2odx-fetching;
    animation-duration: var(--fetch-duration);
    animation-iteration-count: infinite;
    background-color: var(--green-500);
    color: var(--green-600)
}

.tile.state-autobetSelected.svelte-4s2odx.svelte-4s2odx {
    border-color: var(--purple-600);
    background-color: var(--purple-500);
    color: var(--purple-500)
}

.tile.state-active.svelte-4s2odx.svelte-4s2odx {
    background-color: var(--green-500);
    color: var(--green-600)
}

.tile.state-active.svelte-4s2odx.svelte-4s2odx:hover {
    transform: scale(1.01) translateY(-3px);
    background-color: var(--green-400)
}

.tile.status-lose.svelte-4s2odx.svelte-4s2odx {
    border-color: var(--red-500);
    background-color: var(--red-700)
}

.result-wrapper.svelte-4s2odx>div.svelte-4s2odx {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
    pointer-events: none
}