/* Team colors */

:root {
    --col-transparent: rgba(0, 0, 0, 0);
    --col-team-0: #f44336;
    --col-team-1: #2196f3;
    --bs-body-color: #ffffff;
    --bs-body-bg: #333;
}

.tnull-fg { color: var(--col-transparent); }
.t0-fg { color: var(--col-team-0); }
.t1-fg { color: var(--col-team-1); }
.t0-bg { background-color: var(--col-team-0); }
.t1-bg { background-color: var(--col-team-1); }

/* Team select */

#teamselectcontainer > button {
    transition: all 0.25s;
}

#teamselectcontainer > button.selected {
    border: 0.5rem solid white;
}

/* 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] {
    cursor: move;
    /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

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

.dragover {
    outline: 2px dashed gray;
}

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

.rotate-90 {rotate: 90deg;}
.rotate-180 {rotate: 180deg;}
.rotate-270 {rotate: 270deg;}

/* Player controls */

#player-move-controls > div > * {
    width: 28%;
}

/* Under attack */

@keyframes under-attack {
    0% { box-shadow: inset 0 0 25px red; }
    50% { box-shadow: inset 0 0 25px transparent; }
    100% { box-shadow: inset 0 0 25px red; }
}

#block-player-game.under-attack {
    animation: under-attack 2.5s infinite;
}

/* Input */

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

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