/* Team colors */

:root {
    --col-transparent: rgba(0, 0, 0, 0);
    --col-frame: #003466;
    --col-coin-empty: #216da5;
    --col-coin-flashing: #87c4f6;
    --col-team-0: var(--col-coin-empty);
    --col-team-1: #fec005;
    --col-team-2: #f43f19;
}

.t1-fg {
    color: var(--col-team-1);
}

.t2-fg {
    color: var(--col-team-2);
}

.t0-bg {
    background-color: var(--col-team-0);
}

.t1-bg {
    background-color: var(--col-team-1);
}

.t2-bg {
    background-color: var(--col-team-2);
}


/* Board */

#player-board-table {
    flex-grow: 1;
    margin: 1rem;
}

.board-table {
    display: grid;
    aspect-ratio: 7 / 7;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
}

.board-table.spectator {
    aspect-ratio: 6 / 7;
    grid-template-rows: repeat(6, 1fr);
}

.board-table .board-header-cell {
    margin: 0.1rem;
    display: flex;
}

.board-table .board-header-cell .player-turn-btn {
    flex-grow: 1;
    margin-bottom: 0.25rem;
    border-radius: 5px;
}

.board-table .board-cell {
    aspect-ratio: 1 / 1;
    background-color: var(--col-frame);
}

.board-table .board-cell .board-coin {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin: 0.2rem;
}

.board-table .board-cell .board-coin.board-coin-clickable {
    cursor: pointer;
    animation: coin-clickable 1s infinite ease-in-out alternate;
}

@keyframes coin-clickable {
    0% {
        background-color: var(--col-coin-empty);
    }
    100% {
        background-color: var(--col-coin-flashing);
    }
}

#player-board-table-container {
    flex-direction: column;
}

@media (orientation: portrait) {
    #player-board-table-container {
        flex-direction: row;
    }
}

/* Utils */

* {
    /* Disable text selection */
    user-select: none;
    /* Disable double tap to zoom */
    touch-action: manipulation;
}

body {
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
}

.hidden {
    display: none !important;
}

.userhidden {
    display: none !important;
}

#maincontent > div {
    width: 100%;
    height: 100%;
}

*[draggable] {
    /* fallback if grab cursor is unsupported */
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

*[draggable]:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.dragover {
    outline: 2px dashed grey;
}

svg.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    overflow: visible;
}

/* Input */

input[type="text"]:invalid {
    border: 1px solid red;
}

input[type="text"]:valid {
    border: 1px solid green;
}