.game-dashboard {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    block-size: 100dvh;
    overflow: hidden;
    background: #111;
    color: white;

    > #page-title {
        flex: none;
        margin-block: 0.75rem;
    }

    > section {
        flex: 1;
        min-block-size: 0;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        padding-inline: 1rem;
        padding-block-end: 1rem;
    }

    &:has(> .tab-bar [value="nav"]:checked) :is(#panel-roster, #panel-ast),
    &:has(> .tab-bar [value="roster"]:checked) :is(#panel-nav, #panel-ast),
    &:has(> .tab-bar [value="ast"]:checked) :is(#panel-nav, #panel-roster) {
        display: none;
    }

    h2 {
        text-align: center;

        a { color: inherit }
    }

    > section > h2 { display: none }

    caption { scroll-margin-block-start: 1rem }

    @media (min-width: 60rem) {
        display: grid;
        place-content: start center;
        gap: 1rem;
        block-size: auto;
        min-block-size: 100vh;
        overflow: visible;
        padding: 1rem;

        > #page-title { margin-block: 1.5rem }

        > section > h2 { display: revert }

        &:has(> .tab-bar [value]:checked) :is(#panel-nav, #panel-roster, #panel-ast) { display: contents }

        > .tab-bar { display: none }
    }
}