#categories input,
#play #result input {
    display: none;
}

#play #result label {
    display: block;
}

#categories,
#play #nowplaying {
    display: flex;
}

#play #result {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr);
    align-content: baseline;
    max-width: calc(320px * 4);
    height: calc(100svh - 7rem);
    overflow: auto;
}

#play {
    grid-template-columns: repeat(2, 1fr);
}

#play #categories,
#play #footer {
    grid-column: 1 / 3;
}

#play #player {
    height: calc(50svw * 0.537);
}

#play main,
#play #result,
#play #footer button,
#submit button#close {
    padding: 0;
}

#categories label {
    padding: 0.321rem;
}

#categories {
    padding: 0.5rem;
}

#play main {
    padding: 0 1rem;
}

#play #result,
#play button#nowplaying {
    padding: 1rem;
}

#play #result,
#submit button#close {
    margin: 0;
}

#play #result p,
#submit select {
    margin: 0.25rem 0;
}

#submit button#close {
    margin-left: 1rem;
}

#play button#nowplaying {
    max-width: calc(100svw - 1rem);
    margin: 0 auto 1rem;
}

@media screen and (max-width: 1280px) {
    #play #player {
        height: calc(100svw * 0.522);
    }

    #play main,
    #play #result {
        grid-column: 1 / 3;
        margin-bottom: 1rem;
    }

    #play #result {
        height: auto;
        overflow: auto;
    }
}

@media screen and (max-width: 1080px) {
    #play #result {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 550px) {
    #play #result {
        grid-template-columns: repeat(2, 1fr);
    }
}

#categories {
    align-items: flex-start;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-color: #fff transparent;
    scrollbar-width: thin;
    height: 3.75rem;
}

#play button#nowplaying {
    flex-flow: column-reverse;
}

#submit button#close {
    float: right;
}

#play button#nowplaying,
#play #footer button,
#submit button#close {
    appearance: none;
    border: none;
    outline: none;
}

#play #result {
    list-style: inside none;
}

#categories label {
    min-height: 1rem;
    line-height: 1.25rem;
    min-width: max-content;
}

#play #player {
    border-radius: 1rem;
}

#play #result img {
    border-radius: 0.5rem;
}

#categories label {
    border: solid 0.1rem;
    border-radius: 0.5rem;
    background: #fff;
    color: #000;
}

#submit #youtubeAdd input[type="submit"],
#play #footer button {
    border-bottom: solid 0.15rem;
}

#categories input[type="radio"]:checked+label {
    background: #eee;
    color: #000;
}

#categories label:hover,
#play button#nowplaying:not([disabled]),
#play #result label:hover,
#play #footer button:hover {
    cursor: pointer;
}

#play #nowplaying strong {
    font-family: "New York", Times, serif;
}

#submit button#close {
    font-size: 150%;
}

#play #nowplaying strong {
    font-size: clamp(1.25rem, 150vw / 27.5, 2.75rem);
}

#play #footer button {
    font-size: 125%;
}

#categories input[type="radio"]:checked+label {
    font-size: 111%;
}

#categories label,
#play button#nowplaying small,
#play #result p {
    font-size: 90%;
}

#categories input[type="radio"]:checked+label {
    font-weight: 600;
}

#play button#nowplaying {
    text-align: justify;
    text-align-last: justify;
    min-height: 6.5rem;
}

#play #player,
#play #result img {
    width: 100%;
    aspect-ratio: 16/9;
}

#categories {
    position: sticky;
    top: 0;
    z-index: 1;
}