body {
    max-width: 400px;
    margin: 1%;
    overflow: hidden;
}

table {
    width: 100%;
    border: 2px solid black;
    border-collapse: collapse;

    user-select: none;
}

td {
    border: 1px solid gray;
    height: 80px;
    text-align: center;
    font-size: 24px;

    /* 
        Box width & Number position.
        This is a hacky prototype.

        white-space is set to "preserve" because an additional space is added to numbers when an operation symbol is added
        that way they are centered as +4_ instead of +4, and it reduces the horizontal jitter.
        Really, I should just make operation symbols a separate element that are added with their own rules.

        the width is set to 25%, which assumes that the board is 4 cells wide.
        It probably will be, but this is dirty too.
    */
    white-space: pre;
    width: 25%;
}

#score {
    font-weight: bold;
    font-size: 150%;
    margin-top: 3%;
    text-align: center;}

.finalScore {
    color: white;
    text-decoration: underline;
    text-shadow: 0 0 10px white; /* glows AND has a shadow, super cool!! */
    background-color: green;
}

.operators {
    
    text-align: center;
    height: 4rem;
    overflow: hidden;
    margin-top: 2%;
}

.operator {
    font-size: 300%;
    width: 7.2rem;
    display: inline-block;
    margin-left: 0.5%;
    margin-right: 0.5%;
    transition: 0.4s ease-out;
}

.selectedOperator {
    text-shadow: 0px 0px 5px white;
    color: white;
    background-color: rgb(0, 100, 150);
    transition: 0.2s ease-in-out;
}

.moved {
    background-color: rgb(0, 100, 150);
    color: white;
}


.obstructed {
    background-color: black;
}

.end {
    box-shadow: inset 0 0 50px 5px green;
    color: green;
}

.latestMove {
    background-color: lightblue;
    color: gray;
    font-weight: 800;
}

.previousMove {
    background-color: rgb(0, 150, 225);
}

.start {
    box-shadow: inset 0 0 50px 4px rgb(0, 100, 150);;
    color: rgb(0, 100, 150);
    background-color: white;
    font-weight: normal;
}

.end.moved {
    background-color: green;
    box-shadow: 0;
    color: white;
}

p {
    margin-top: 2%;
    text-align: center;
}