:root {
    color-scheme: dark;
    --bg: #131518;
    --fg: #ccc;
    --border: black;
    --gaia: black;
    --player1: #e41a1c;
    --player2: #377eb8;
    --player3: #4daf4a;
    --player4: #984ea3;
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --bg: #fff;
        --fg: #131518;
        --border: #888;
    }
}

:root {
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
}

body {
    max-width: 50em;
    margin: 0 auto;
    padding: 0.5em;
    background-color: var(--bg);
    color: var(--fg);
}

input,
button,
.btn {
    -webkit-appearance: none;
    padding: 0.3em 0.75em;
    line-height: 1.6;
    height: 2.2em;
    background-color: transparent;
    color: var(--fg);
    border: 1px solid var(--fg);
    border-radius: 0.1em;
    transition: all 200ms;
    vertical-align: middle;
}

input:focus,
button:not(:disabled):hover,
button:not(:disabled):focus,
.btn:hover,
.btn:focus {
    background-color: var(--fg);
    color: var(--bg);
}

button,
.btn {
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: inherit;
}

:disabled {
    opacity: 0.7;
}

input[type="range"]::-moz-range-thumb {
    height: 100%;
    width: 0.5em;
    border: 0;
    border-radius: 0;
    background-color: var(--fg);
}

input[type=range]:focus::-moz-range-thumb {
    background-color: var(--bg);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    height: 2.2em;
    width: 0.5em;
    border: 0;
    border-radius: 0;
    background-color: var(--fg);
}

input[type=range]:focus::-webkit-slider-thumb {
    background-color: var(--bg);
}

.logo {
    max-width: 100%;
    margin: 0 auto 3em;
}

.menu {
    max-width: 15em;
    margin: 10vh auto;
}

.menu button,
.menu .btn {
    display: block;
    width: 100%;
    margin-bottom: 0.5em;
}

.board {
    background-color: var(--border);
    padding: 0 1px 1px 0;
}

.board-row {
    display: flex;
}

.board-cell {
    flex-grow: 1;
    margin: 1px 0 0 1px;
    background-color: var(--cell-color, var(--bg));
    box-shadow: 0 0 0.5em var(--cell-color, transparent);
}
.board-cell::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.board-controls {
    margin-bottom: 1em;
}

.fg-1 {--fg: var(--player1)}
.fg-2 {--fg: var(--player2)}
.fg-3 {--fg: var(--player3)}
.fg-4 {--fg: var(--player4)}

.bg--1 {--cell-color: var(--gaia); z-index: 1}
.bg-1 {--cell-color: var(--player1); z-index: 1}
.bg-2 {--cell-color: var(--player2); z-index: 1}
.bg-3 {--cell-color: var(--player3); z-index: 1}
.bg-4 {--cell-color: var(--player4); z-index: 1}

.bg-0.limit-outside {
    opacity: 0.7;
}