.ast {
    --ast-rule: 1px solid rgb(255 255 255 / 0.15);
    --turn-edge: 1px double gold;
    --ast-cell-size: 3rem;
    --ast-band-tint: rgb(255 255 255 / 0.07);
    isolation: isolate;
    justify-self: center;
    border: var(--ast-rule);
    border-radius: var(--operator-radius);
    border-collapse: collapse;
    font-size: 1rem;
    text-align: center;

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

    th, td {
        border: var(--ast-rule);
        transition: border-color 0.4s linear;
    }

    td { inline-size: var(--ast-cell-size) }

    td[data-current-turn] { border-inline: var(--turn-edge) }
    tbody tr:first-child td[data-current-turn] { border-block-start: var(--turn-edge) }
    tfoot td[data-current-turn] { border-block-end: var(--turn-edge) }

    [data-band] { background: var(--ast-band-tint) }

    th {
        padding-inline: 1em;
        text-align: start;
        text-shadow: 0 0 2px black, 0 0 2px black;
    }

    thead th {
        padding-inline: 0.25em;
        padding-block: 0.5em;
        color: darkgray;
        font-size: 0.75rem;
        line-height: 1.25;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: center;

        &[colspan="1"] { padding: 0 }
    }

    tbody th {
        inline-size: 10rem;
        overflow: hidden;
        background-color: var(--player-color, dimgray);
    }

    tbody td:has(.marker) { position: relative }
    tbody tr, tfoot tr { block-size: var(--ast-cell-size) }

    /* Centred in its own cell rather than offset from a shared anchor: the table places the column,
       so the pawn cannot drift when the browser gives a column less width than it was asked for. */
    .marker {
        position: absolute;
        z-index: 1;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        inline-size: 1.5rem;
        translate: -50% -50%;
    }

    td[data-score] {
        color: white;

        &[data-medal="gold"] { color: gold }
        &[data-medal="silver"] { color: silver }
        &[data-medal="bronze"] { color: peru }
    }

    tfoot { color: darkgray }

    @container (width < 60rem) {
        --ast-cell-size: 1.5rem;
        font-size: 0.75rem;

        thead, tfoot, [data-opening] { display: none }
        tr:has([data-opening][data-current-turn]) [data-anchor] { border-inline-start: var(--turn-edge) }

        tbody {
            th {
                box-sizing: content-box;
                inline-size: 8ch;
                max-inline-size: 8ch;
                padding-inline: 0.25rem;

                small { display: none }
            }

            tr:last-child td[data-current-turn] { border-block-end: var(--turn-edge) }
        }

        td[data-score] { inline-size: 1.75rem }
        .marker { inline-size: 1rem }
    }
}