#game-container {
    position: relative;
    display: grid;
    width: 800px;
    height: 1220px;
    grid-gap: 10px;
    grid-template-areas: "dead-black" "field" "dead-white";
    grid-template-rows: 1fr 4fr 1fr;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: transform 1s 1s;
    -moz-transition: transform 1s 1s;
    -ms-transition: transform 1s 1s;
    -o-transition: transform 1s 1s;
    transition: transform 1s 1s;
}

#game-container.black-turn {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#game-container .board {
    position: relative;
    grid-area: field;
}

#game-container .board .col {
    display: inline-block;
    width: 12.5%;
    height: 100%;
}

#game-container .board .col .field {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 12.5%;
}

#game-container .board .col .field.white {
    background-color: #eee;
}

#game-container .board .col .field.black {
    background-color: #000;
}

#game-container .board .col .field.possible-target {
    border: 4px solid #f0f;
}

#game-container.focused .board .col .field:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .1);
    content: "";
    pointer-events: none;
}

#game-container.focused .board .col .field.possible-target:after {
    background: transparent;
}

#game-container .figures {
    position: relative;
    z-index: 1;
    pointer-events: none;
    grid-area: field;
}

#game-container .figures .figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 12.5%;
    height: 12.5%;
    transition: transform .3s;
}

.figure:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #f0f;
    content: '';
    -webkit-transition: transform 1s 1s;
    -moz-transition: transform 1s 1s;
    -ms-transition: transform 1s 1s;
    -o-transition: transform 1s 1s;
    transition: transform 1s 1s;
}

.black-turn .figure:before {
    -webkit-transform: translate(-50%, -50%) rotate(-180deg);
    -moz-transform: translate(-50%, -50%) rotate(-180deg);
    -ms-transform: translate(-50%, -50%) rotate(-180deg);
    -o-transform: translate(-50%, -50%) rotate(-180deg);
    transform: translate(-50%, -50%) rotate(-180deg);
}

.pawn.white:before {
    background-image: url("assets/pawn_white.svg");
}

.rook.white:before {
    background-image: url("assets/rook_white.svg");
}

.knight.white:before {
    background-image: url("assets/knight_white.svg");
}

.bishop.white:before {
    background-image: url("assets/bishop_white.svg");
}

.queen.white:before {
    background-image: url("assets/queen_white.svg");
}

.king.white:before {
    background-image: url("assets/king_white.svg");
}

.pawn.black:before {
    background-image: url("assets/pawn_black.svg");
}

.rook.black:before {
    background-image: url("assets/rook_black.svg");
}

.knight.black:before {
    background-image: url("assets/knight_black.svg");
}

.bishop.black:before {
    background-image: url("assets/bishop_black.svg");
}

.queen.black:before {
    background-image: url("assets/queen_black.svg");
}

.king.black:before {
    background-image: url("assets/king_black.svg");
}

.dead-figures {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.dead-figures .figure {
    position: relative;
    width: 100%;
    height: 100%;
}

.dead-figures.black {
    grid-area: dead-white;
}

.dead-figures.white {
    grid-area: dead-black;
}