:root {--body-bg-color: #f2f2f2;
    --condition-bg-color: #c37e43;
    --condition-head-bg-color: #318e02;
    --content-bg-color: #f5fffa;
    --content-color: #000080;
    --date-bg-color: #4663a6;
    --even-bg-color: #dbe5f1;
    --even-sel-color: #f8c27c;
    --font-desktop-size: 0.75em; /* 12px, 0.75em */
    --font-family: Arial, Helvetica, sans-serif;
    --font-mobile-size: 1em;  /* 16px, 1em */
    --desktop-font-percent: .75;
    --desktop-height-percent: .75;
    --font-color: #000080;
    --game-winner-color: #d2691e;
    --page-head-font-size: 120%;
    --h3-text-color: #d2691e;
    --page-head-bg-color: #27417d;
    --desktop-page-head-font-size: 14px;
    --page-head-mobile-font-size: 18px;
    --page-head-desktop-height: 25px;
    --page-head-mobile-height: 33px;
    --page-head-text-color: #d2691e;
    --page-foot-desktop-height: 30px;
    --page-foot-mobile-height: 45px;
    --head-text-color: #ffffff;
    --hover-color: #00b894;
    --odd-bg-color: #f2f2f2;
    --odd-sel-color: #f7e6b1;
    --time-bg-color: #2d8bc5;
    --updated-bg-color: #27417d;
    --updated-font-size: 90%;
    --updated-desktop-height: 15px;
    --updated-mobile-height: 20px;
    --updated-text-color: orange;}

* {-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-family);
    font-size: var(--font-mobile-size);}

html,body {width: 100%;
    height: 100%;
    font-size: 100%;
    background-color: var(--content-bg-color);
    color: var(--content-color);}

body {display: flex;
    justify-content: center;
    align-items: start;}

body.waiting * {cursor: wait;}

#wrapper {display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;}

label {cursor: pointer;
    user-select: none;}

input.toggle-check {display: none;}

[data-overflow] {font-stretch: condensed;}

[data-hide] {display:none}

#page-head {width: 100%;
    top: 0;
    display: block;
    position: relative;
    flex: 0 0 var(--page-head-mobile-height);
    background-color: var(--page-head-bg-color);
    line-height: var(--page-head-mobile-height);
    font-size: var(--page-head-mobile-font-size);
    color: var(--page-head-text-color);
    text-align: center;
    overflow: hidden;}

#page-updated {display: block;
    position: relative;
    flex: 0 0 var(--updated-mobile-height);
    line-height: var(--updated-mobile-height);
    font-weight: 500;
    text-align: center;
    background-color: var(--updated-bg-color);
    color: var(--updated-text-color);}

#updated-date {font-size: inherit;
    font-weight: 600;}

#game-head {flex: 0 0 auto;
    background-color: var(--time-bg-color);
    color: var(--head-text-color);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    line-height: calc(var(--updated-mobile-height) + 5px);}

#game-date {flex: 0 0 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;}

/* #game-head div:not(:first-child) {padding: 0 3px;} */
#game-head div {padding: 0 3px;}

#game-status::after {content: attr(data-status);}

#game-status[data-status="Scheduled"] {color: antiquewhite;}

#game-status[data-status="Played"] {color: lightgreen;}

#game-status[data-status="Postponed-Tie"] {color: burlywood;}

#game-status[data-status="Not Reported"] {color: crimson;}

#game-status[data-status="Not Updated"] {color: bisque;}

[data-winner] {font-weight: 900;
    text-shadow: 2px 2px gray;}

.score {color: bisque;}

.score::before {content: "(";}

.score::after {content: ")";}

#game-players {display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    position: relative;
    width: 100%;
    /* height: calc(100% - var(--page-head-mobile-height) - var(--updated-mobile-height) - var(--page-foot-mobile-height) - 10px); */
    z-index: 1;
    overflow: auto;}

.toggle-check:checked + .team-toggle::after {content: "▾";}

.toggle-check:checked + .team-toggle + .team-players {display: flex;}

.team-toggle {display: flex;
    flex-flow: row;
    justify-content: center;
    background-color: var(--page-head-text-color);
    color: var(--page-head-bg-color);
    line-height: calc(var(--updated-mobile-height) + 5px);
    font-weight: 600;
    position: sticky;
    top: 0;}

.caption-team {white-space: nowrap;
    overflow: hidden;}

.team-toggle::after {content: "▸";
    font-size: 150%;
    /* text-shadow: 0 0 .3em var(--page-head-bg-color); */
    text-shadow: 0 0 .3em white;}

.team-toggle div {padding: 0 3px;}

.team-players {display: none;
    /* justify-content: center; */
    align-items: center;
    flex-flow: column;}

.table {width: 100%;}

.head-row {background-color: var(--date-bg-color);
    color: var(--head-text-color);}

.head-row .player-hr {color: var(--updated-text-color);}

.row {display: flex;
    flex-flow: row wrap;
    line-height: 23px;
    align-items: center;
    width: 90%;
    min-width: 300px;
    margin: 10px auto;
    border: 3px solid var(--date-bg-color);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 10px var(--date-bg-color);}

.row div {white-space: nowrap;}

.body-row {background-color: var(--odd-bg-color);}

.body-row[data-sub] {background-color: var(--even-bg-color);}

.body-row[data-empty] {display: none;}

.batting-order::after {content: attr(data-order);}

.batting-order {flex: 0 0 10%;
    padding-left: 3px;}

.player-name {flex: 0 0 80%;
    text-align: center;
    font-weight: 600;}

.player-gender {flex: 0 0 25%;
    padding-left: 3px;}

.player-status {flex: 0 0 50%;
    text-align: center;}

.player-hr {flex: 0 0 25%;
    text-align: right;
    padding-right: 3px;
    color: var(--page-head-text-color);
    font-weight: 600;}

.player-stats {display: flex;
    flex-flow: column;
    justify-content: center;
    width: 90%;
    min-width: 300px;
    line-height: 23px;
    margin: 10px auto;
    background-color: var(--odd-sel-color);
    border: 3px solid var(--date-bg-color);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 10px var(--date-bg-color);}

.player-stats div {text-align: center;}

.player-stats div span {padding-left: 3px;
    font-weight: 800;}

#page-foot {display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    flex: 0 0 var(--page-foot-mobile-height);
    background-color: var(--page-head-bg-color);}

#page-foot .icon-image {height: 30px;
    padding: 0 3px 0 3px;}

#page-top-anchor {display: none;}

#page-top-anchor[data-height="overflow"] {display: block;}

@media only screen and (min-width: 560px)
{
    #game-head {flex-wrap: nowrap;}

    #game-head div {flex: unset;}
}

@media only screen and (min-width: 560px) and (max-width: 749px)
{
    .table {width: 90%;
        min-width: 500px;
        margin-top: 10px;
        border: 3px solid var(--date-bg-color);
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 0 10px var(--date-bg-color);}
    
    .row {flex-wrap: nowrap;
        width: 100%;
        line-height: 25px;
        min-width: unset;
        max-width: unset;
        margin: unset;
        border: unset;
        border-radius: unset;
        box-shadow: 0 0 10px var(--date-bg-color);}
    
    .row div:not(.player-hr) {text-align: left;
        padding: 0 0 0 3px;}

    .body-row[data-empty] {display: flex;}
    
    .body-row[data-sub] .batting-order {color: var(--even-bg-color);}

    .batting-order {flex: 0 0 5%;}

    .player-name {flex: 0 0 40%;
        font-weight: normal;}

    .player-gender {flex: 0 0 20%;}

    .player-status {flex: 0 0 30%;}

    .player-hr {flex: 0 0 5%;}

    .player-stats {min-width: 500px;}
}

@media only screen and (min-width: 750px)
{
    body {font-size: var(--font-desktop-size);}
    
    #page-head {flex: 0 0 var(--page-head-desktop-height);
        height: var(--page-head-desktop-height);
        line-height: var(--page-head-desktop-height);}
    
    #page-updated {flex: 0 0 var(--updated-desktop-height);
        line-height: var(--updated-desktop-height);}
    
    #updated-date {font-size: inherit;
        font-weight: 600;}
    
    #game-players {flex-flow: row wrap;
        align-content: flex-start;}

    .team-toggle {height: 25px;
        flex: 0 0 50%;
        line-height: 25px;
        cursor: default;}
    
    .team-toggle::after {content: unset;}

    .toggle-check:checked + .team-toggle::after {content: unset;}

    #away-team-label {order: 0}

    #home-team-label {order: 1;}

    .team-players {display: flex;
        flex: 0 0 50%;}

    #away-players {order: 2;}

    #home-players {order: 3;}

    .table {width: 95%;
        min-width: 360px;
        max-width: 600px;
        margin-top: 10px;
        border: 3px solid var(--date-bg-color);
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 0 10px var(--date-bg-color);}
    
    .row {flex-wrap: nowrap;
        width: 100%;
        line-height: 25px;
        min-width: unset;
        max-width: unset;
        margin: unset;
        border: unset;
        border-radius: unset;
        box-shadow: 0 0 10px var(--date-bg-color);}
    
    .row div:not(.player-hr) {text-align: left;
        padding: 0 0 0 3px;}

    .body-row[data-empty] {display: flex;}
    
    .body-row[data-sub] .batting-order {color: var(--even-bg-color);}

    .batting-order {flex: 0 0 5%;}

    .player-name {flex: 0 0 40%;
        font-weight: normal;}

    .player-gender {flex: 0 0 20%;}

    .player-status {flex: 0 0 30%;}

    .player-hr {flex: 0 0 5%;}

    .player-stats {width: 95%;
        min-width: 360px;
        max-width: 600px;}

    #page-foot {flex: 0 0 var(--page-foot-desktop-height);}

    #page-foot a, #page-foot label {padding-top: 3px;}
}