body.layout-training {
    background-color: var(--gray-900);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    cursor: none;

    &.test-running, &.test-running * {
        cursor: none !important;
    }

    &:has(.modal.active),
    &:has(#exercise-intro-banner.active),
    &:has(#permission-request.active) {
        cursor: auto;

        * {
            cursor: auto;
        }

        button, .btn, a {
            cursor: pointer;
        }
    }

    &.screening-mode {
        background-color: var(--court-green);
    }

    &.court-0, &.court-10, &.court-11 { background-color: var(--court-blue); }
    &.court-1, &.court-6, &.court-7, &.court-8, &.court-9 { background-color: var(--court-green); }
    &.court-2, &.court-3, &.court-4, &.court-5 { background-color: var(--court-clay); }

    &.court-0, &.court-10 { --court-inner: var(--court-greenset); }
    &.court-1 { --court-inner: var(--court-laykold); }
    &.court-7 { --court-inner: var(--court-decoturf); }
    &.court-8 { --court-inner: var(--court-laykold-us); }
    &.court-9 { --court-inner: var(--court-decoturf-sha); }
    &.court-11 { --court-inner: var(--court-greenset-indoor); }
}

.tennis-court {
    display: none;
    position: absolute;
    bottom: 10dvh;
    left: 10dvh;
    right: 10dvh;
    top: 0;
    pointer-events: none;
    z-index: 0;

    .training-mode & { display: block; }
}

.court-svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: var(--white);
    stroke-width: 2px;
    fill: none;
}

#permission-request,
#shape-response-input,
#final-results-panel,
#count-input-panel,
#response-input-w,
#response-input-both,
#response-input-mc,
[id^="results-panel"] {
    cursor: default;

    * {
        cursor: auto;
    }

    button, .btn, a {
        cursor: pointer;
    }
}