/*===== VARIABLES CSS =====*/
:root {
    /*========== Cells ==========*/
    --cell-point-fill: steelblue;
    --cell-point-collinear: slateblue;
    --cell-point-not_removable: firebrick;
    --cell-border-valid: green;
    --cell-border-invalid: firebrick;
    --cell-stroke-light: black;
    --cell-stroke-dark: lightgrey;
    --cell-stroke-width: 1;
    --line-stroke: crimson;
    --line-stroke-width: 2;
}


.bamboo {
    font-family: "Bamboo", sans-serif;
}


/* cell points */
polygon.cell {
    stroke: var(--cell-stroke-light);
    stroke-width: var(--cell-stroke-width);
}

polygon.collinear.cell {
    fill: var(--cell-point-collinear);
}

circle {
    stroke: var(--cell-stroke-light);
    fill: var(--cell-stroke-light);
}

text {
    stroke: var(--cell-stroke-light);
    fill: var(--cell-stroke-light);
}


/* border */
polygon.border {
    /* stroke: var(--cell-stroke-light); */
    stroke: transparent;
    fill-opacity: 20%;
    fill: var(--cell-border-valid);
}

polygon.border.invalid {
    fill: var(--cell-border-invalid);
}

polygon.border.collinear {
    fill: var(--cell-point-collinear);
    fill-opacity: 50%;
}

polygon.border.winning {
    stroke: yellow;
}

polygon.border.losing {
    stroke: blue;
}

/*
@media (hover: hover) and (pointer: fine) 
used to prevent hover selector happening on
phones/tablets
*/
@media (hover: hover) and (pointer: fine) {
    polygon.border.invalid:hover {
        /* fill: var(--cell-border); */
        fill-opacity: 1;
    }

    polygon.border:hover {
        /* fill: var(--cell-border); */
        fill-opacity: 1;
    }
}

line {
    stroke: var(--line-stroke);
    stroke-width: var(--line-stroke-width);
    stroke-linecap: round;
}

/* Dark Mode for outline and dot */
div.dark polygon.cell {
    stroke: var(--cell-stroke-dark);
}

div.dark circle {
    stroke: var(--cell-stroke-dark);
    fill: var(--cell-stroke-dark);
}

div.dark text {
    stroke: var(--cell-stroke-dark);
    fill: var(--cell-stroke-dark);
}

/* stop Bootstrap oddness after click */
.btn:disabled {
    border: none;
}

img.bowser {
    max-width: 50px;
}