@layer components {
    :root {
        --game-result-link: var(--secondary-label);
    }

    .game-result {
        display: grid;
        gap: 0.75rem;
    }

    .game-result__metric {
        display: grid;
        justify-items: center;
        text-align: center;
    }

    .game-result__value {
        font-variant-numeric: tabular-nums;
    }

    .game-result__title {
        text-align: center;
    }

    .game-result__row {
        inline-size: 100%;
        min-height: 2.75rem;
    }

    .game-result__comparison {
        text-align: center;
    }

    .game-result__link {
        color: var(--game-result-link);
        overflow-wrap: anywhere;
    }

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

    .game-result__names {
        display: grid;
        gap: 1rem;
    }

    .game-result__name {
        align-items: center;
        display: flex;
        gap: 0.75rem;
        min-height: 3rem;
        inline-size: 100%;
    }
}