theTable container {
    display: grid;
    grid-template-columns: .5fr repeat(5,1fr) .5fr;
    grid-template-rows: .5fr repeat(6,1fr) .5fr;
    border: solid 2px rosybrown;
    border-radius: 3vw;
    background-color: saddlebrown;
    column-gap: 0px;
    row-gap: 0px;
    position: relative;
}

theTable {
    display: grid;
    min-width: 30vw;
    height: 85vh;
    aspect-ratio: .5;
}

felt {
    background-color: #004c00;
    border-radius: 0;
    grid-row: 2/8;
    grid-column: 2/7;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    align-self: center;
    justify-self: center;
}


theTable ball {width: 95%;margin: 0;aspect-ratio: 1.0;align-self: center;justify-self: center;}

ballArea {
    grid-row: 2/6;
    grid-column: 2/7;
    display: grid;
    grid-template-rows: repeat(4,1fr);
    grid-template-columns: repeat(5,1fr);
    gap: 0;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
}

ball.clickable[status="selected"] {
    border-color: lime;
    border-width: 8px;
}

theTable gamename {
    font-size: 5vh;
    white-space: nowrap;
    text-align: center;
    grid-row: 1/2;
    grid-column: 2/7;
    align-self: center;
    font-weight: bold;
    color: white;
    text-shadow: 1pt 1pt #747474;
}

theTable availablepoints {
    display: block;
    font-size: min(8vw,3vh);
    white-space: nowrap;
    font-style: italic;
    text-align: center;
    width: 100%;
}

theTable availablepoints:after {
    content: ' Points Remain';
}

foul {
    display: grid;
    border: solid 4px white;
    color: white;
    width: 80%;
    height: 80%;
    align-self: center;
    justify-self: center;
    border-radius: 20%;
    align-items: center;
    justify-items: center;
    font-weight: bold;
    font-size: 114%;
    background-color: red;
}

spot {
    display: grid;
    border: solid 4px white;
    color: white;
    width: 85%;
    height: 85%;
    align-self: center;
    justify-self: center;
    border-radius: 50%;
    align-items: center;
    justify-items: center;
    font-weight: bold;
    font-size: 114%;
    background-color: black;
}

noBalls {
    display: grid;
    border: solid 4px white;
    color: white;
    width: 85%;
    height: 85%;
    align-self: center;
    justify-self: center;
    border-radius: 33%;
    align-items: center;
    justify-items: center;
    font-weight: bold;
    font-size: 114%;
    background-color: #747474;
    text-align: center
}

clear {
    display: grid;
    border: solid 4px blue;
    color: blue;
    width: 85%;
    height: 85%;
    align-self: center;
    justify-self: center;
    border-radius: 33%;
    align-items: center;
    justify-items: center;
    font-weight: bold;
    font-size: 135%;
    background-color: lightblue;
    text-align: center
}

OKAY {
    display: grid;
    border: solid 4px #747474;
    color: #747474;
    width: 85%;
    height: 85%;
    align-self: center;
    justify-self: center;
    border-radius: 50%;
    align-items: center;
    justify-items: center;
    font-weight: bold;
    font-size: 135%;
    background-color: lime;
    text-align: center
}

.tableButton {
    /* height: 70%; */
    /* width: 42.5%; */
    align-self: center;
    justify-self: center;
    font-weight: bold;
    display: grid;
    /* align-content: center; */
    /* justify-content: center; */
    /* border-width: 4px; */
    /* border-radius: 25%; */
    font-size: 150%;
    box-shadow: 2px 2px #747474;
    margin: .2em 0;
    border-width: .2em;
}

.tableButton.SCRATCH, .tableButton.FOUL {
    color: white;
    background-color: red;
    border-color: white;
    /* rotate: -20deg; */
}

.tableButton.NOBALLS, .tableButton.SPOT {
    /* rotate: 20deg; */
}

.tableButton.FOUL {
    grid-area: 6/3;
}

.tableButton.NOBALLS, .tableButton.SPOT {
    /* font-size: 125%; */
    color: white;
    background-color: black;
    border-color: white;
}

.tableButton.Clear {
    /* font-size: 150%; */
    color: blue;
    background-color: lightblue;
    border-color: blue;
}

.tableButton.OKAY {
    /* font-size: 150%; */
    color: white;
    background-color: lime;
    border-color: green;
}

.tableButton.Clear:active, .tableButton.OKAY:active {
    box-shadow: -2px -2px darkslategray;
}

.tableButton.selected {
    border-color: lime;
    box-shadow: -2px -2px darkslategray;
}

.tableButton.Clear {
    /* rotate: -10deg; */
}

.tableButton.OKAY {
    /* rotate: 10deg; */
    grid-area: 7/5;
}

.tableButton[disabled] {
    filter: grayscale(1) brightness(0.65);
}

.tableButton.SCRATCH {grid-area: 6/2;}
.tableButton.NOBALLS {grid-area: 6/4;}
.tableButton.SPOT {grid-area: 6/5;}
.tableButton.Clear {grid-area: 7/3;}

tablebuttonarea {
    border-top: dashed 2px #197f19;
}

tablebuttonarea {
    grid-row: 6/8;
    grid-column: 2/7;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* align-items: center; */
    /* flex-wrap: wrap; */
    /* gap: 5%; */
    /* justify-content: center; */
    align-content: center;
}

availablepointscontainer {
    grid-row: 4/5;
    grid-column: 2/6;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    align-content: center;
}
thetable[ballmode="rack"] availablepointscontainer {
    display: none;
}

gamenamecontainer {
    grid-row: 1/2;
    grid-column: 2/7;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
}

gamenamecontainer ball {
    width: 5vh;
    aspect-ratio: 1;
}
gamenamecontainer ball num {
    font-size: .9vw;
}


thetable[bat="true"] tablebuttonarea {grid-row: 2/4;}
thetable[bat="true"] ballarea {grid-row: 4/8;}
thetable[bat="true"] tablebuttonarea {border-top: none; border-bottom: dashed 2px #197f19;}

theTable[layout="61"][ballmode="balls"] {
    ball[b="1"]  {grid-area: 1/1;}
    ball[b="2"]  {grid-area: 1/2;}
    ball[b="3"]  {grid-area: 1/3;}
    ball[b="4"]  {grid-area: 1/4;}
    ball[b="5"]  {grid-area: 1/5;}
    ball[b="6"]  {grid-area: 2/1;}
    ball[b="7"]  {grid-area: 2/2;}
    ball[b="8"]  {grid-area: 2/3;}
    ball[b="9"]  {grid-area: 2/4;}
    ball[b="10"] {grid-area: 2/5;}
    ball[b="11"] {grid-area: 3/1;}
    ball[b="12"] {grid-area: 3/2;}
    ball[b="13"] {grid-area: 3/3;}
    ball[b="14"] {grid-area: 3/4;}
    ball[b="15"] {grid-area: 3/5;}
    ball[b="16"] {grid-area: 4/1;}
    ball[b="17"] {grid-area: 4/5;}
}

theTable[layout="8Ball"][ballmode="balls"] {
    ball[b="1"]  {grid-area: 1/1;}
    ball[b="2"]  {grid-area: 1/2;}
    ball[b="3"]  {grid-area: 1/3;}
    ball[b="4"]  {grid-area: 1/4;}
    ball[b="5"]  {grid-area: 1/5;}
    ball[b="6"]  {grid-area: 2/1;}
    ball[b="7"]  {grid-area: 2/2;}
    ball[b="8"]  {grid-area: 4/2;}
    ball[b="9"]  {grid-area: 2/4;}
    ball[b="10"] {grid-area: 2/5;}
    ball[b="11"] {grid-area: 3/1;}
    ball[b="12"] {grid-area: 3/2;}
    ball[b="13"] {grid-area: 3/3;}
    ball[b="14"] {grid-area: 3/4;}
    ball[b="15"] {grid-area: 3/5;}
    ball[b="16"] {grid-area: 4/1;}
    ball[b="17"] {grid-area: 4/5;}
}

theTable[layout="61"][ballmode="rack"][bat="false"] {
    ball[b="1"]  {grid-area: 5/3; width: 90%;}
    ball[b="14"] {grid-area: 4/2/4/4; width: 45%; filter: grayscale(1);} ball[b="14"] num {display: none;}
    ball[b="8"]  {grid-area: 4/3/4/5; width: 45%; filter: grayscale(1);} ball[b="8"] num {display: none;}
    ball[b="5"]  {grid-area: 3/2; width: 90%; filter: grayscale(1);}     ball[b="5"] num {display: none;}
    ball[b="15"] {grid-area: 3/3; width: 90%;}
    ball[b="13"] {grid-area: 3/4; width: 90%; filter: grayscale(1);}     ball[b="13"] num {display: none;}
    ball[b="11"] {grid-area: 2/1/2/3; width: 45%; filter: grayscale(1);} ball[b="11"] num {display: none;}
    ball[b="4"]  {grid-area: 2/2/2/4; width: 45%; filter: grayscale(1);} ball[b="4"] num {display: none;}
    ball[b="9"]  {grid-area: 2/3/2/5; width: 45%; filter: grayscale(1);} ball[b="9"] num {display: none;}
    ball[b="7"]  {grid-area: 2/4/2/6; width: 45%; filter: grayscale(1);} ball[b="7"] num {display: none;}
    ball[b="2"]  {grid-area: 1/1; width: 90%;}
    ball[b="12"] {grid-area: 1/2; width: 90%; filter: grayscale(1);}     ball[b="12"] num {display: none;}
    ball[b="6"]  {grid-area: 1/3; width: 90%; filter: grayscale(1);}     ball[b="6"] num {display: none;}
    ball[b="10"] {grid-area: 1/4; width: 90%; filter: grayscale(1);}     ball[b="10"] num {display: none;}
    ball[b="3"]  {grid-area: 1/5; width: 90%;}
    ball[b="16"] {grid-area: 5/1; width: 90%;}
    ball[b="17"] {grid-area: 5/5; width: 90%;}
}

theTable[layout="61"][ballmode="rack"][bat="true"] {
    ball[b="1"]  {grid-area: 1/3; width: 90%;}
    ball[b="14"] {grid-area: 2/3/2/5; width: 45%; filter: grayscale(1);} ball[b="14"] num {display: none;}
    ball[b="8"]  {grid-area: 2/2/2/4; width: 45%; filter: grayscale(1);} ball[b="8"] num {display: none;}
    ball[b="5"]  {grid-area: 3/4; width: 90%; filter: grayscale(1);}     ball[b="5"] num {display: none;}
    ball[b="15"] {grid-area: 3/3; width: 90%;}
    ball[b="13"] {grid-area: 3/2; width: 90%; filter: grayscale(1);}     ball[b="13"] num {display: none;}
    ball[b="11"] {grid-area: 4/4/4/6; width: 45%; filter: grayscale(1);} ball[b="11"] num {display: none;}
    ball[b="4"]  {grid-area: 4/3/4/5; width: 45%; filter: grayscale(1);} ball[b="4"] num {display: none;}
    ball[b="9"]  {grid-area: 4/2/4/4; width: 45%; filter: grayscale(1);} ball[b="9"] num {display: none;}
    ball[b="7"]  {grid-area: 4/1/4/3; width: 45%; filter: grayscale(1);} ball[b="7"] num {display: none;}
    ball[b="2"]  {grid-area: 5/5; width: 90%;}
    ball[b="12"] {grid-area: 5/4; width: 90%; filter: grayscale(1);}     ball[b="12"] num {display: none;}
    ball[b="6"]  {grid-area: 5/3; width: 90%; filter: grayscale(1);}     ball[b="6"] num {display: none;}
    ball[b="10"] {grid-area: 5/2; width: 90%; filter: grayscale(1);}     ball[b="10"] num {display: none;}
    ball[b="3"]  {grid-area: 5/1; width: 90%;}
    ball[b="16"] {grid-area: 1/1; width: 90%;}
    ball[b="17"] {grid-area: 1/5; width: 90%;}
}

theTable[layout="8Ball"][ballmode="rack"][bat="false"] {
    ball[b="1"]  {grid-area: 5/3; width: 90%;}
    ball[b="6"] {grid-area: 4/2/4/4; width: 45%; filter: grayscale(1);}   ball[b="6"] num {display: none;}
    ball[b="9"]  {grid-area: 4/3/4/5; width: 45%; filter: grayscale(1);}  ball[b="9"] num {display: none;}
    ball[b="14"]  {grid-area: 3/2; width: 90%; filter: grayscale(1);}     ball[b="14"] num {display: none;}
    ball[b="8"] {grid-area: 3/3; width: 90%;  filter: grayscale(1);}
    ball[b="2"] {grid-area: 3/4; width: 90%; filter: grayscale(1);}       ball[b="2"] num {display: none;}
    ball[b="5"] {grid-area: 2/1/2/3; width: 45%; filter: grayscale(1);}   ball[b="5"] num {display: none;}
    ball[b="15"]  {grid-area: 2/2/2/4; width: 45%; filter: grayscale(1);} ball[b="15"] num {display: none;}
    ball[b="7"]  {grid-area: 2/3/2/5; width: 45%; filter: grayscale(1);}  ball[b="7"] num {display: none;}
    ball[b="10"]  {grid-area: 2/4/2/6; width: 45%; filter: grayscale(1);} ball[b="10"] num {display: none;}
    ball[b="13"]  {grid-area: 1/1; width: 90%; filter: grayscale(1);}     ball[b="13"] num {display: none;}
    ball[b="4"] {grid-area: 1/2; width: 90%; filter: grayscale(1);}       ball[b="4"] num {display: none;}
    ball[b="12"]  {grid-area: 1/3; width: 90%; filter: grayscale(1);}     ball[b="12"] num {display: none;}
    ball[b="11"] {grid-area: 1/4; width: 90%; filter: grayscale(1);}      ball[b="11"] num {display: none;}
    ball[b="3"]  {grid-area: 1/5; width: 90%; filter: grayscale(1);}      ball[b="3"] num {display: none;}
    ball[b="16"] {grid-area: 5/1; width: 90%;}
    ball[b="17"] {grid-area: 5/5; width: 90%;}
}

theTable[layout="8Ball"][ballmode="rack"][bat="true"] {
    ball[b="1"]  {grid-area: 1/3; width: 90%;}
    ball[b="6"] {grid-area: 2/3/2/5; width: 45%; filter: grayscale(1);}   ball[b="6"] num {display: none;}
    ball[b="9"]  {grid-area: 2/2/2/4; width: 45%; filter: grayscale(1);}  ball[b="9"] num {display: none;}
    ball[b="14"]  {grid-area: 3/4; width: 90%; filter: grayscale(1);}     ball[b="14"] num {display: none;}
    ball[b="8"] {grid-area: 3/3; width: 90%;  filter: grayscale(1);}
    ball[b="2"] {grid-area: 3/2; width: 90%; filter: grayscale(1);}       ball[b="2"] num {display: none;}
    ball[b="5"] {grid-area: 4/4/4/6; width: 45%; filter: grayscale(1);}   ball[b="5"] num {display: none;}
    ball[b="15"]  {grid-area: 4/3/4/5; width: 45%; filter: grayscale(1);} ball[b="15"] num {display: none;}
    ball[b="7"]  {grid-area: 4/2/4/4; width: 45%; filter: grayscale(1);}  ball[b="7"] num {display: none;}
    ball[b="10"]  {grid-area: 4/1/4/3; width: 45%; filter: grayscale(1);} ball[b="10"] num {display: none;}
    ball[b="13"]  {grid-area: 5/5; width: 90%; filter: grayscale(1);}     ball[b="13"] num {display: none;}
    ball[b="4"] {grid-area: 5/4; width: 90%; filter: grayscale(1);}       ball[b="4"] num {display: none;}
    ball[b="12"]  {grid-area: 5/3; width: 90%; filter: grayscale(1);}     ball[b="12"] num {display: none;}
    ball[b="11"] {grid-area: 5/2; width: 90%; filter: grayscale(1);}      ball[b="11"] num {display: none;}
    ball[b="3"]  {grid-area: 5/1; width: 90%; filter: grayscale(1);}      ball[b="3"] num {display: none;}
    ball[b="16"] {grid-area: 1/1; width: 90%;}
    ball[b="17"] {grid-area: 1/5; width: 90%;}
}

tablebuttonarea question {
    grid-row: 1;
    grid-column: 1/-1;
    font-size: 4vh;
    font-style: italic;
    text-align: center;
    padding: .5vh 0;
}

tablebuttonarea buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vw;
}

tablebuttonarea playerelements {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.playerButton.selected {
    background-color: white;
    color: black;
    border-color: white;
}

.tableButton.disabled {
    filter: grayscale(1);
}

theTable[subPage="whoWillBreak"] ball[num="16"],
theTable[subPage="whoWillBreak"] ball[num="17"],
theTable[subPage="scotchDoubles"] ball[num="16"],
theTable[subPage="scotchDoubles"] ball[num="17"],
theTable[subPage="scotchDoubles"] foulButton {
    visibility: hidden;
}

playeratbat {
    text-align: center;
    font-size: xxx-large;
    color: yellow;
    font-weight: bold;
    /* line-height: 1; */
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

playeratbat:not(:empty):before {
    content: 'SHOOTER: ';
    font-size: x-large;
    vertical-align: middle;
    /* line-height: 1; */
    font-weight: normal;
}

::before {}

playeratbat:empty {
    visibility: collapse;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.hidden { /* (global) */
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    visibility: collapse;
}

instructionelement {
    text-align: center;
    font-size: x-large;
    color: antiquewhite;
    font-style: italic;
}

theTable[subpage="whoWillBreak"] instructionelement {
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    visibility: collapse;
}

theTable[subpage="breakResult"] instructionelement:after {
    content: "Select Balls Pocketed on Break";
}

foulbutton {
    grid-area: 4/2/5/5;
    align-self: center;
    justify-self: center;
    font-size: xx-large;
    padding: .2em;
    border: solid .1em red;
    background-color: #ddcbce;
    border-radius: 25%;
    color: red;
    font-weight: bold;
}

foulbutton:before {
    content: '\1f5f9';
    padding-right: .2em;
    font-weight: normal;
}

foulbutton.selected {
    border-color: lime;
    color: lime;
    background-color: red;
}

ball[num="17"].selected num {
    border-color: lime;
    background-color: red;
    color: lime;
}

thetable[subpage="whoWillBreak"] foulbutton {
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    visibility: collapse;
}

thetable[layout="8Ball"] foulbutton {
    grid-column: 3/5;
}