.navigation {
    inline-size: 100%;
    max-inline-size: 60rem;
    overflow: hidden;

    ul {
        margin: 0;
        padding: 0;
        display: grid;
        list-style: none;

        li {
            min-block-size: 3.5rem;
            display: flex;

            &:not(:first-child) { border-block-start: 1px solid var(--rule) }
            button { align-self: center }

            a {
                flex: 1;
                border-inline-end: 1px solid var(--rule);
                padding-inline-start: 0.5rem;
                align-content: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-decoration: none;
                color: inherit;

                &:hover :is(b, small) { text-decoration: underline }
                b { text-transform: capitalize }

                svg {
                    inline-size: 1rem;
                    block-size: 1rem;
                    vertical-align: -0.125rem;
                    margin-inline-end: 0.5rem;
                }

                small {
                    color: var(--ink-muted);
                }
            }
        }
    }

    figure {
        margin: 0;
        display: grid;
        justify-items: center;
        gap: 1rem;

        h2 { color: color-mix(in oklab, var(--player-color, var(--operator-accent)) 60%, black) }
    }

    @container (min-width: 40rem) { ul { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)) } }
}