* {
    margin: 0;
    padding: 0;
}

/* For mobile phones: */
.square {
    aspect-ratio: 1 / 1;
    vertical-align: middle;
    font-size: 1.5em;
    height: 1.75em;
    padding: 0 0 8px 0;
    text-align: center;
}

.square.board {
    background-color: var(--bs-secondary);
    border: 1px solid var(--bs-secondary-border-subtle)
}

.square.board:hover {
    background-color: var(--bs-primary);
    filter: brightness(1.5);
    opacity: 0.75;
}

.square.selected {
    border: 2px solid var(--bs-primary);
}

.token.dark:hover {
    filter: brightness(1.25);
}

.token.light:hover {
    filter: brightness(0.75);
}


@media only screen and (min-width: 768px) {
    .square {
        font-size: 1.75em;
        height: 2em;
        padding: 2px 0 2px 0;
    }

    .score {
        font-size: 1.5em;
    }
}

.token {
    max-height: 100%;
    max-width: 100%;
}

.stone-selected {
    outline: 2px solid var(--bs-primary);
}