fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(25%, 8ch, 100%), 1fr));
    gap: 0.5em 1em;

    border: var(--main-colour) solid;

    legend { white-space: nowrap; }
    label input { width: 100%; }
}

@media (scripting: none) {
    .script-only { display: none }
}

.game-list {
    display: grid;
    list-style: none;

    padding: 0;
    gap: 1em;

    grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
    grid-auto-flow: dense;

    li { display: grid; }

    .game-tile {
        display: grid;
        padding: 0.5em 0.5em 0;
        align-content: space-between;

        background-color: var(--bg-accent-colour);
        border-radius: 1em;
        border: thick solid var(--main-colour);

        img {
            width: 100%;
            border-radius: 0.5em 0.5em 0 0;
        }
        h2 {
            font-size: 1em;

            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }:hover {
        border-color: var(--accent-colour);
    }
}

.game-capsule {
    height: 12em;
    max-height: 30vw;

    margin: 0 5vw 1em;

    @media (width <= 480px) {
        width: 80%;
        height: auto;
        max-height: none;

        float: none;
        display: block;
        margin: auto;
    }
}

.play-link {
    display: grid;
    font-size: 2em;
    text-align: center;
}

.ancestor-list {
    list-style: none;
    padding-left: 1em;
}