.ast {
    --ast-rule-width: 1px;
    --ast-rule: var(--ast-rule-width) solid var(--rule);
    --turn-edge: 1px double gold;
    --ast-cell-size: var(--board-row-size, 3rem);
    --ast-band-tint: var(--tint);
    isolation: isolate;
    justify-self: center;
    border: var(--ast-rule);
    border-collapse: collapse;
    text-align: center;

    caption {
        margin-block-end: 0.75rem;
        font-size: var(--size-body);
    }

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

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

    td { inline-size: var(--ast-cell-size) }
    td[data-current-turn] { border-inline: var(--turn-edge) }
    [data-band] { background: var(--ast-band-tint) }

    td[data-score] {
        color: var(--ink-primary);

        &[data-medal="gold"] { color: var(--medal-gold) }
        &[data-medal="silver"] { color: var(--medal-silver) }
        &[data-medal="bronze"] { color: var(--medal-bronze) }
    }

    thead th {
        padding-inline: 0.25em;
        padding-block: 0.5em;
        color: var(--ink-muted);
        font-size: var(--size-small);
        line-height: 1.25;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: center;

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

    thead tr { block-size: var(--ast-cell-size) }

    tbody {
        tr { block-size: var(--ast-cell-size) }
        tr:first-child td[data-current-turn] { border-block-start: var(--turn-edge) }

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

        td:has(.marker) { position: relative }
    }

    tfoot {
        color: var(--ink-muted);

        tr { block-size: var(--ast-cell-size) }
        td[data-current-turn] { border-block-end: var(--turn-edge) }
    }

    .marker {
        position: absolute;
        z-index: 1;
        inset-block-start: 50%;
        inset-inline-start: calc(50% + var(--marker-pos, 0) * (100% + var(--ast-rule-width)));
        translate: -50% -50%;
        transition: inset-inline-start 0.4s linear;
    }

    @media (width < 60rem) {
        --ast-cell-size: 1.5rem;
        font-size: var(--size-small);

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

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

                small { display: none }
            }

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

        .marker { inset-inline-start: calc(50% + max(0, var(--marker-pos, 0)) * (100% + var(--ast-rule-width))) }
    }

    @media (prefers-reduced-motion: reduce) { .marker { transition: none } }
}