:root {
    --max-board-width: 486px;
    --piece-border-radius: 2px;
    --max-piece-size: 50px;
}

body {
    margin: 0;
    padding: 0;
}

#app {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

.table {
    max-width: var(--max-board-width);
}

.seat {
    display: inline-block;
    width: 50%;
}

.game-state {
    float: right;
}

.board {
    background-image: url('/svg/board.svg');
    background-size: cover;
    margin: 1em 0;
    overflow: hidden;
    width: 100%;
}

.square {
    background-clip: padding-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: var(--piece-border-radius) solid transparent;
    float: left;
    height: 10vw;
    max-height: var(--max-piece-size);
    max-width: var(--max-piece-size);
    width: 10vw;
}

.drops {
    height: calc(var(--max-piece-size) + 2 * var(--piece-border-radius));
    margin: 1em 0;
    max-width: var(--max-board-width);
    overflow: hidden;
    width: 100%;
}

.turn-indicator {
    display: none;
}

[data-game-state=in-progress][data-turn=r] .turn-indicator[data-side=r] {
    display: inline;
}

[data-game-state=in-progress][data-turn=b] .turn-indicator[data-side=b] {
    display: inline;
}

@media (hover: hover) {
    [data-game-state=in-progress][data-local-player=r][data-turn=r] [data-action=picking] .square[data-side=r]:hover,
    [data-game-state=in-progress][data-local-player=b][data-turn=b] [data-action=picking] .square[data-side=b]:hover {
        border: var(--piece-border-radius) solid red;
    }
}

.square[data-selected] {
    border: var(--piece-border-radius) solid green !important;
}

[data-piece=bA] {
    background-image: url('/svg/bA.svg');
}

[data-piece=bC] {
    background-image: url('/svg/bC.svg');
}

[data-piece=bE] {
    background-image: url('/svg/bE.svg');
}

[data-piece=bG] {
    background-image: url('/svg/bG.svg');
}

[data-piece=bH] {
    background-image: url('/svg/bH.svg');
}

[data-piece=bP] {
    background-image: url('/svg/bP.svg');
}

[data-piece=bR] {
    background-image: url('/svg/bR.svg');
}

[data-piece=rA] {
    background-image: url('/svg/rA.svg');
}

[data-piece=rC] {
    background-image: url('/svg/rC.svg');
}

[data-piece=rE] {
    background-image: url('/svg/rE.svg');
}

[data-piece=rG] {
    background-image: url('/svg/rG.svg');
}

[data-piece=rH] {
    background-image: url('/svg/rH.svg');
}

[data-piece=rP] {
    background-image: url('/svg/rP.svg');
}

[data-piece=rR] {
    background-image: url('/svg/rR.svg');
}