.hidden {
    display: none;
}

.field {
    --size: 36px;

    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(11, var(--size));
    grid-template-rows: repeat(11, var(--size));
}

.entry {
    width: 30px;
    height: 30px;
    border-radius: 17px;
    border-width: 2px;
    border-style: solid;

    margin-left: calc((var(--size) - 32px) / 2);
    margin-top: calc((var(--size) - 32px) / 2);
}

.house {
    width: 20px;
    height: 20px;
    border-radius: 10px;

    margin-left: calc((var(--size) - 18px) / 2);
    margin-top: calc((var(--size) - 18px) / 2);
}

.house1 {
    background-color: rgb(230, 230, 0);
}

.house2 {
    background-color: green;
}

.house3 {
    background-color: red;
}

.house4 {
    background-color: black;
}

@keyframes moveright {
    from {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(var(--size));
    }
}

@keyframes moveleft {
    from {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(calc(var(--size) * -1));
    }
}

@keyframes moveup {
    from {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(calc(var(--size) * -1));
    }
}

@keyframes movedown {
    from {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(var(--size));
    }
}

.figure {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    margin-left: calc((var(--size) - 14px) / 2);
    margin-top: calc((var(--size) - 14px) / 2);
    border-width: 2px;
    border-style: solid;
    border-color: black;

    animation-duration: 0.50s;
    animation-play-state: paused;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.move-right {
    animation-name: moveright;
    animation-play-state: running;
}

.move-left {
    animation-name: moveleft;
    animation-play-state: running;
}

.move-up {
    animation-name: moveup;
    animation-play-state: running;
}

.move-down {
    animation-name: movedown;
    animation-play-state: running;
}

.normalslot {
    border-color: black;
}

.start1,
.player1 {
    background-color: yellow;
}

.start2,
.player2 {
    background-color: green;
}

.start3,
.player3 {
    background-color: red;
}

.start4,
.player4 {
    background-color: black;
}

.you {
    text-decoration: underline;
}