@layer components {
    :root {
        --game-shell-controls-background: color-mix(
            in oklch,
            var(--system-background) 92%,
            transparent
        );
        --game-shell-wordmark: var(--label);
        --game-shell-game: var(--tint);
    }

    .game-shell__header {
        align-items: center;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
    }

    .game-shell__brand {
        align-items: center;
        color: var(--game-shell-wordmark);
        display: inline-flex;
        font-weight: 800;
        gap: 0.5rem;
        letter-spacing: -0.01rem;
        min-height: 2.75rem;
        text-decoration: none;
    }

    .game-shell__mark {
        block-size: 2rem;
        inline-size: 2rem;
    }

    .game-shell__game {
        align-items: center;
        color: var(--game-shell-game);
        display: inline-flex;
        min-height: 2.75rem;
        text-decoration: none;
    }

    .game-shell__main {
        align-content: start;
        row-gap: 1rem;
    }

    .game-shell__board {
        display: grid;
        justify-items: center;
        scroll-margin-block-start: 4.5rem;
    }

    .game-shell__controls {
        backdrop-filter: blur(0.75rem);
        background: var(--game-shell-controls-background);
        inset-block-end: 0;
        margin-block-start: auto;
        padding-block: 0.75rem calc(var(--safe-area-block-end) + 0.75rem);
        position: sticky;
        z-index: 1;
    }

    .game-shell__action {
        inline-size: 100%;
    }

    .game-shell__footer {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;

        & a {
            color: inherit;
        }
    }
}