.roster {
    display: block;
    inline-size: 100%;
    border-collapse: collapse;

    caption {
        display: block;
        caption-side: top;
        margin-block-end: 0.75rem;
        color: darkgray;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    thead { display: none }

    tbody { display: block }

    tr {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem 0.75rem;
        padding: 0.625rem 0.75rem;
        border-block-start: 1px solid rgb(255 255 255 / 0.12);
        border-inline-start: 0.1875rem solid var(--player-color, dimgray);
    }

    tbody th {
        grid-column: 1 / -1;
        display: flex;
        align-items: baseline;
        gap: 0.375rem;
        font-weight: normal;
        text-align: start;

        b { font-size: 0.875rem }

        small { color: darkgray }
    }

    [data-rank] {
        color: darkgray;
        font-variant-numeric: tabular-nums;
    }

    tbody th:has([data-military]) :is(b, small) {
        color: var(--advance-civic);
    }

    td {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.8125rem;
        font-variant-numeric: tabular-nums;

        &::before {
            content: attr(data-label);
            color: darkgray;
            font-size: 0.6875rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
    }

    @container (min-width: 40rem) {
        display: table;

        caption { display: table-caption }

        thead { display: table-header-group }

        tbody { display: table-row-group }

        tr {
            display: table-row;
            gap: normal;
            padding: 0;
            border: 0;
        }

        th, td {
            display: table-cell;
            padding: 0.5em;
            border-block-end: 1px solid dimgray;
            font-size: revert;
        }

        thead th {
            border-block-end-width: 2px;
            writing-mode: sideways-lr;
            color: darkgray;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            text-align: end;
        }

        tbody th { color: var(--player-color) }

        td {
            text-align: center;

            &::before { content: none }
        }

        tbody tr:nth-child(even) { background: rgb(255 255 255 / 0.05) }

        small[data-player] { display: none }
    }

    @container (min-width: 60rem) {
        inline-size: auto;
        font-size: 1.25rem;

        th, td { padding: 0.75em 1.5em }

        thead th {
            writing-mode: horizontal-tb;
            font-size: 0.7em;
        }

        small[data-player] { display: revert }
    }
}