/* assets/css/board.css */

:root {
    --square-size: 50px;
}

table.board {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    margin: 0 auto;
    border-collapse: collapse;
}

td.board {
    margin: 0;
    padding: 0;
    border: 1px solid #000;
    width: var(--square-size);
    height: var(--square-size);
    text-align: center;
    vertical-align: middle;
    font-size: 0;
    line-height: 1;
    box-sizing: border-box;
}

/* tiny change: sets font-size for 'x' state */
td.board[data-state="x"] {
    font-size: 8px;
}

td.board svg {
    margin: auto;
    padding: 0;
    border: 0;
}

.blocked-cells {
    z-index: 9;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(203, 17, 45, 1) 0,
        rgba(203, 17, 45, 1) 3px,
        transparent 0px,
        transparent 18px
    );
}

.blocked-cells .crown-path {
    z-index: 10;
    fill: rgba(203, 17, 45, 1);
}