* {
    box-sizing: border-box;
}

html {
    --cell-size: calc(80vmin / 16);
    --app-color-0: #222222;
    --app-color-1: #999999;
    --app-color-2: #ededed;
    --app-color-3: #0d4bbc;
    --app-color-4: #00fcfc;
    --app-color-5: #fa0000;
    --app-color-6: #fcfc00;
    --app-color-7: gold;
}

body {
    font-family: Helvetica, Arial, sans-serif;
}

.board {
    display: grid;
    grid-template-columns: repeat(8, var(--cell-size, 3em));
    grid-auto-rows: var(--cell-size, 3em);
    grid-gap: 0.2em;
    justify-content: center;
    background-color: rebeccapurple;
}

.board a {
    text-decoration: none;
}

.cell {
    border-radius: calc(var(--cell-size, 3em) / 2);
    line-height: var(--cell-size);
    text-align: center;
    vertical-align: middle;
    font-size: calc(var(--cell-size, 3em) / 2);
    font-weight: 100;
}

.p0 {
    background-color: var(--app-color-2);
    color: var(--app-color-1);
}

.p1 {
    background-color: var(--app-color-3);
    color: var(--app-color-4);
}

.p2 {
    background-color: var(--app-color-5);
    color: var(--app-color-6);
}

.w1 {
    background: var(--app-color-7);
    color: var(--app-color-3);
    font-weight: 300;
}

.w2 {
    background: var(--app-color-7);
    color: var(--app-color-5);
    font-weight: 300;
}

/**
 * UI
 */
div#app {
    margin-bottom: 0.2em;
    padding: 0.2em;
    font-size: 2em;
    color: var(--app-color-2);
    background: var(--app-color-0);
    text-align: center;
}

div#turn {
    margin: 0.2em;
    padding: 0.2em;
    text-align: center;
}

nav#menu {
    display: grid;
    grid-auto-columns: repeat(auto-fill, var(--cell-size, 3em));
    grid-auto-rows: var(--cell-size, 3em);
    grid-gap: 0.2em;
}

nav#menu button {
    background-color: var(--app-color-7);
    color: var(--app-color-0);
    font-size: 1.5em;
}

noscript {
    border: 5px var(--app-color-5) dashed;
    background-color: var(--app-color-6);
    color: var(--app-color-0);
}