/* Root variables for dynamic scaling */
:root {
    --px-per-foot: 12;
    /* Pixels per foot (adjustable) */
    --px-inset-top: 90 / 420;
    /* 21.42857143% */
    /* calc((420px - var(--court-height)) / 2);  Top inset */
    --px-inset-right: 96 / 420;
    /* 22.85714286% */
    /* calc((720px - var(--court-width)) / 2);  Right inset */
    --px-inset-kitchen: 276 / 420;
    /* 65.71428571% */
    /* calc((720px - var(--kitchen-width)) / 2);  Right inset */
}


/* General body styles */
body {
    margin: 0;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    /* Optional background color */
}

/* Render box styles */
.render-box {
    position: relative;
    width: 95vw;
    max-width: min(720px, 100%);

    aspect-ratio: 720 / 420;
    /* Fixed height */
    background-color: #f0f0f0;
    /* Optional background color for the box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Optional shadow for styling */
    overflow: hidden;
    margin: 0 auto;
}

/* Render box image styles to logo-styles, but include lines and texture */
.render-box img.render-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Images inside the render box */
.color-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    /* RANDOM CHANGE LATER */
    pointer-events: none;
}


/* 
*
*
*
* PICKLEBALL COURT STYLES
*
*
*/

#pickleball {
    /* Background image (full size, no cropping) */
    /* #pickleball-background-render {
        z-index: 1;
    } */

    /* Court image (cropped to court dimensions, partially transparent) */
    #pickleball-court-render {
        /* clip-path: inset(var(--px-inset-top) var(--px-inset-right)); */
        clip-path: inset(21.42857143% 13.33%);
        /* z-index: 2; */
    }

    /* Kitchen image (cropped to kitchen dimensions, partially transparent) */
    #pickleball-kitchen-render {
        /* clip-path: inset(var(--px-inset-top) var(--px-inset-kitchen)); */
        clip-path: inset(21.42857143% 38.57%);
        /* z-index: 3; */
    }

    /* Lines image (full size, sits on top) */
    /* #pickleball-lines-image {
        z-index: 4;
    } */
}


/*
*
*
*
* TENNIS COURT STYLES
*
*
*/
#tennis {
    #tennis-background-render {
        background-color: #f0f0f0;
        /* TEMPORARY RED */
    }

    #tennis-court-render {
        background-color: #f0f0f0;
        clip-path: inset(15.714% 6.6%);
    }
}

/* 
*
*
* BASKETBALL COURT STYLES
*
*
*/
#basketball {
    #basketball-lines-image {
        /* rotate the image 180 deg; */
        transform: rotate(180deg);
    }

    .basketball-background-render {
        background-color: #f0f0f0;
    }

    .basketball-three-point {
        background-color: #f0f0f0;
        width: 65%;

        /* 180 flip:  */
        /* height: 71.43%; */
        /* margin-top: auto; */
        /* border-bottom-left-radius: 50% 80%; */
        /* border-bottom-right-radius: 50% 80%; */
        margin-top: 17%;
        border-top-left-radius: 80% 85%;
        border-top-right-radius: 80% 85%;


        margin-left: 17.5%;
        margin-right: 17.5%;
    }

    .basketball-top-of-key {
        background-color: #f0f0f0;
        width: 20%;
        height: 71.43%;
        margin-left: 40%;
        margin-right: 40%;
        /* 180 Flip */
        /* margin-top: auto; */
        /* border-bottom-left-radius: 50% 28%; */
        /* border-bottom-right-radius: 50% 28%; */
        margin-top: 17%;
        border-top-left-radius: 50% 25%;
        border-top-right-radius: 50% 25%;
    }

    .basketball-key {
        background-color: #f0f0f0;
        /* 180 Flip */
        /* clip-path: inset(0% 40% 46.7% 40%); */
        clip-path: inset(46.7% 40% 0% 40%);
    }
}

#basketball.full-court {
    #basketball-background-render {
        background-color: #f0f0f0;
        /* TEMPORARY GREEN */
    }

    .basketball-court-render {
        background-color: #f0f0f0;
        clip-path: inset(9% 9%);
    }

    .basketball-three-point {
        background-color: #f0f0f0;
        width: 24.3%;
        margin-left: 9%;
        height: 65.5%;
        margin-top: 10%;
        border-top-right-radius: 115% 75%;
        border-bottom-right-radius: 115% 75%;
        border-top-left-radius: 0%;
        border-bottom-left-radius: 0%;
    }

    .basketball-three-point.right {
        background-color: #f0f0f0;
        width: 24.3%;
        margin-left: 66.6%;
        height: 65.5%;
        margin-top: 10%;
        border-top-left-radius: 115% 80%;
        border-bottom-left-radius: 115% 75%;
        border-top-right-radius: 0%;
        border-bottom-right-radius: 0%;
    }

    .basketball-top-of-key {
        background-color: #f0f0f0;
        width: 24.3%;
        margin-left: 9%;
        margin-top: 23.5%;
        height: 20%;
        border-top-right-radius: 30% 40%;
        border-bottom-right-radius: 30% 40%;
    }

    .basketball-top-of-key.right {
        background-color: #f0f0f0;
        width: 24.3%;
        margin-left: 66.6%;
        margin-top: 23.5%;
        height: 20%;
        border-top-left-radius: 30% 40%;
        border-bottom-left-radius: 30% 40%;
    }

    .basketball-key {
        background-color: #f0f0f0;
        clip-path: inset(40.5% 72.3% 40.5% 9%);
    }

    .basketball-key.right {
        background-color: #f0f0f0;
        clip-path: inset(40.5% 9% 40.5% 72.3%);
    }

    .basketball-court-center {
        background-color: #f0f0f0;
        width: 12%;
        height: 20%;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* #basketball-background-render {
    background-color: #f0f0f0;
}

#basketball-three-point {
    background-color: #f0f0f0;
    width: 65%;
    height: 71.43%;
    margin-top: auto;
    border-bottom-left-radius: 50% 80%;
    border-bottom-right-radius: 50% 80%;
    margin-left: 17.5%;
    margin-right: 17.5%;
}

#basketball-top-of-key {
    background-color: #f0f0f0;
    width: 20%;
    height: 71.43%;
    margin-top: auto;
    margin-left: 40%;
    margin-right: 40%;
    border-bottom-left-radius: 50% 28%;
    border-bottom-right-radius: 50% 28%;
}

#basketball-key {
    background-color: #f0f0f0;
    clip-path: inset(0% 40% 46.7% 40%);
}
} */

img.watermark-image {
    position: absolute;
    top: auto;
    left: auto;
    height: auto;
    pointer-events: none;
}

img.texture-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0.4;
    z-index: 2;
}