/* ==UserStyle==
@name           MySquash scoring - Android Tablet, Firefox
@description    A style for squash.org.nz scoring that makes it easier to read on a tablet and screen cast
@author         AndyD328
@namespace      github.com/AndyD328
@version        1.0.10
@updateURL      https://raw.githubusercontent.com/AndyD328/MySquashCSS/refs/heads/main/Firefox--Android-Tablet.user.css
==/UserStyle== */

@-moz-document domain("squash.org.nz"), url-prefix("https://www.squash.org.nz/scoring/") {
    /* HOME AND COMP LINKS */
    #app > div:nth-child(2) {
        flex-direction: row!important;
        justify-content: start;
    }
    #app > div:nth-child(2) > div:nth-child(1) {
        /* this is the Home link and MySquash logo */
        display: none!important;
    }
    /*#app > div:nth-child(2) > div {*/
    /*    padding-top: 10px;*/

    .singles-layout {
        position: relative!important;
        max-height:100vh!important;
    }
    /* PREVIOUS SCORES */
    .singles-layout > div:nth-child(1) {
        /* Previous game scores */
        position: fixed!important;
        bottom: 0!important;
        left: 0!important;
        font-size: 3rem!important;
        max-height: 170px!important;
        overflow: hidden!important;
        padding-left: 1rem!important;
        background-color: #ccc!important;
    }
    .singles-layout > div:nth-child(1) > div {
        display: flex!important;
        justify-content: start!important;
        padding-left: 2rem!important;
    }
    .singles-layout > div:nth-child(1) > div > span {
        display:flex!important;
        gap: 2rem!important;
        justify-content: start!important;
        align-items: center!important;
    }
    /* END - PREVIOUS SCORES */

    /* NAMES, CODES & POINTS */
    .singles-layout > div:nth-child(2)  {
        /* Names, codes & points wrapper at 'top' of board */
        max-height: 170px!important;
        margin-bottom: 1rem!important;
    }
    .singles-layout > div:nth-child(2) > div:nth-child(2) {
        max-height: 170px !important;
        margin-bottom: 1rem !important;
    }

    .singles-layout .sqnz-setup {
        /* Direct Player wrapper  */
        display: grid!important;
        position: relative!important;
        grid-template-columns: 1fr 1fr!important; /* Two equal columns */
    }
    /* The structure of the first and second players is different - there is a seemingly random blank div in the first spot of the 2nd player */
    .singles-layout > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(1) .sqnz-setup > div:nth-child(1) {
        /* First Player Name */
        grid-column: span 2!important;
        font-size: 5.75rem!important;
        overflow: hidden !important;
        text-overflow: ellipsis!important;
    }
    .singles-layout > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(1) .sqnz-setup > div:nth-child(2) {
        /* First Player SquashNZ Code */
        position:absolute!important;
        top: 0!important;
        left: 0!important;
        overflow: hidden !important;
        font-size: 1.1rem!important;
        padding-top: 0!important;
        padding-bottom: .25rem!important;
        margin-top: 0!important;
    }

    .singles-layout > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(1) .sqnz-setup > div:nth-child(3) {
        /* First Player Grading Points */
        position:absolute!important;
        top: 0!important;
        right: 0!important;
        overflow: hidden !important;
        font-size: 1.1rem!important;
        padding-top: 0!important;
        padding-bottom: .25rem!important;
        margin-top: 0!important;
    }

    .singles-layout > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) .sqnz-setup > div:nth-child(1) {
        /* rando element in the source to add whitespace? */
        display: none!important;
    }
    .singles-layout > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) .sqnz-setup > div:nth-child(2) {
        /* Second Player Name */
        grid-column: span 2!important;
        font-size: 5.75rem!important;
        overflow: hidden !important;
        text-overflow: ellipsis!important;
    }
    .singles-layout > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) .sqnz-setup > div:nth-child(3) {
        /* Second Player SquashNZ Code */
        position:absolute!important;
        top: 0!important;
        left: 0!important;
        overflow: hidden !important;
        font-size: 1.1rem!important;
        padding-top: 0!important;
        padding-bottom: .25rem!important;
        margin-top: 0!important;
    }
    .singles-layout > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) .sqnz-setup > div:nth-child(4) {
        /* Second Player Grading Points */
        position:absolute!important;
        top: 0!important;
        right: 0!important;
        overflow: hidden !important;
        font-size: 1.1rem!important;
        padding-top: 0!important;
        padding-bottom: .25rem!important;
        margin-top: 0!important;
    }

    /* END NAMES, CODES & POINTS */

    .singles-layout .score-body {
        max-height: 37vh!important;
        padding: 0 1rem!important ;
    }
    .singles-layout .score-sub-panel {
        /* Current game score */
        border-radius: 1rem!important;
        padding: 1rem!important;
    }
    .singles-layout .score-text {
        /* Element that directly contains a single player's current score */
        display: flex!important;
        align-items: center!important;
        justify-content: center!important;
        border-radius: 1rem!important;
        background-color: black!important;
        color: white!important;
        width: 100%!important;
        height: 100%!important;
        align-self: center!important;
    }


    .singles-layout .user-select-none  > div:nth-child(1) {
        /* Let, Undo etc buttons */
        padding: 0 2rem!important;
        justify-content: center!important;
    }

    /* PLAYER 1 LEFT/RIGHT SERVE BUTTON */
    /*.singles-layout .user-select-none  > div:nth-child(1) > div:nth-child(1) {*/
    /*    position: relative !important;*/
    /*    top: 9rem !important;*/
    /*    border-radius: 2rem !important;*/
    /*    width: auto !important;*/
    /*}*/
    /*.singles-layout .user-select-none  > div:nth-child(1) > div:nth-child(1) button {*/
    /*    padding: 1rem 2rem !important;*/
    /*    border-radius: 2rem !important;*/
    /*    background-color: #ccc !important;*/
    /*    color: black !important;*/
    /*    font-size: 1.5rem;*/
    /*}*/
    /* END PLAYER 1 LEFT/RIGHT SERVE BUTTON */

    /* PLAYER 2 LEFT/RIGHT SERVE BUTTON */
    /*.singles-layout .user-select-none  > div:nth-child(1) > div:nth-child(5) {*/
    /*    position: relative !important;*/
    /*    top: 9rem !important;*/
    /*    border-radius: 2rem !important;*/
    /*    width: auto !important;*/
    /*}*/
    /*.singles-layout .user-select-none  > div:nth-child(1) > div:nth-child(5) button {*/
    /*    padding: 1rem 2rem !important;*/
    /*    border-radius: 2rem !important;*/
    /*    background-color: #ccc !important;*/
    /*    color: black !important;*/
    /*    font-size: 1.5rem;*/
    /*}*/
    /* END PLAYER 2 LEFT/RIGHT SERVE BUTTON */

}