playPage {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: -webkit-fill-available;
}

@media screen and (orientation: portrait) {
    playPage {
        flex-direction: column;
        height: -webkit-fill-available;
        justify-content: stretch;
    }
    theTable {
        order: 99;
        /* height: -webkit-fill-available; */
        width: -webkit-fill-available;
        max-height: 100%;
        aspect-ratio: auto;
    }
}

button.left, button.right {
    z-index: 99;
    background: transparent;
    color: lime;
    font-size: 60pt;
    font-weight: bold;
    border-color: lime;
    height: max-content;
    width: max-content;
    margin: .1em;
}

playPage teamboard {
    display: grid;
    grid-template-columns: 1fr auto;
    width: -webkit-fill-available;
    margin: .2em;
}

playPage teamtitle {
    grid-row: 1/2;
    grid-column: 1/3;
    font-size: 30pt;
    text-align: center;
}

playPage teamscore {
    font-size: 84pt;
    grid-row: 1/2;
    grid-column: 1/3;
    text-align: center;
}

playPage playerboard {
    grid-column: 1/3;
    display: grid;
    grid-template-rows: auto auto;
    border: solid 2px black;
    padding: 0.2em;
    margin: .2em;
    border-radius: 5%;
    color: white;
    width: -webkit-fill-available;
}
playPage playerboard[t="1"] {
    grid-template-columns: 1fr;
}
playPage playerboard[t="2"] {
    /* grid-template-columns: auto 1fr; */
}


playPage playerrack ball {
    /* zoom: .5; */
    height: 3em;
    width: 3em;
}

playPage playername {
    /* font-size: 2em; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipse;
    grid-column: 1/2;
    /* border-bottom: solid .1em; */
}
playPage playerboard[t="1"] playername {
    /* grid-row: 1/2; */
    /* grid-column: 1/2; */
    /* text-align: right; */
}
playPage playerboard[t="2"] playername {
    /* grid-row: 1/2; */
    /* grid-column: 2/3; */
    /* text-align: right; */
}

playPage playerscore {
    /* font-size: 2em; */
    /* display: grid; */
    /* align-items: center; */
    width: max-content;
    padding-left: .5em;
    /* text-align: center; */
    /* color: white; */
    /* border-bottom: solid .1em; */
}

playPage playerboard[t="1"] playerscore {
    /* grid-row: 1/2; */
    /* grid-column: 2/3; */
}
playPage playerboard[t="2"] playerscore {
    /* grid-row: 1/2; */
    /* grid-column: 1/2; */
}

playPage playerboard[t="1"] playerrack {
    /* display: flex; */
    /* flex-direction: row; */
    /* grid-row: 2/3; */
    /* grid-column: 1/3; */
}
playPage playerboard[t="2"] playerrack {
    /* display: flex; */
    /* flex-direction: row-reverse; */
    grid-row: 2/3;
    grid-column: 1/3;
}

playPage arrow:after {
    font-family: math;
    font-size: 48pt;
}

playPage playerboard arrow {
    display: grid;
    align-items: center;
    justify-items: center;
    color: transparent;
}
playPage playerboard[t="1"] arrow {
    grid-column: 3/4;
    grid-row: 1/3;
}
playPage playerboard[t="2"] arrow {
    grid-column: 1/2;
    grid-row: 1/3;
}

playPage playerboard[t="1"] arrow:after {
    content: '\21e6';
}
playPage playerboard[t="2"] arrow:after {
    content: '\21e8';
}

playPage playerscore:empty:after {
    content: '0';
    /* color: #747474; */
}

playPage ball[num="16"] {
    /* zoom: 1; */
}

teamboard.shooting teamscore {
    color: lime;
}

playPage teamboard.shooting playerboard.shooting {
    border: solid lime;
}

playerboard ball[num="0"] num {
    visibility: collapse;
}

playerboard ball[num="0"] {
    visibility: visible;
    width: 3em;
    height: 3em;
    grid-row: 1/3;
    align-self: center;
    filter: brightness(0);
}
playerboard[t="1"] ball[num="0"] {
    grid-column: 2/3;
    grid-row: 1/2;
}
playerboard[t="2"] ball[num="0"] {
    grid-column: 1/2;
    grid-row: 1/2;
}

teamboard:not(.shooting) playerboard.shooting ball[num="0"] {
    filter: brightness(.5);
}
teamboard.shooting playerboard.shooting ball[num="0"] {
    filter: brightness(1);
}

playerrack ball {
    width: 6vw;
    height: 6vw;
}

playerrack {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 3.5em;
}

playerboard.shooting {
    color: lime;
}

playernameandscore {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: solid .1em;
    width: -webkit-fill-available;
    font-size: 2em;
}