<commit_before><template>
    <div class="new-game-page">
        <h2>Pick your opponent</h2>

        <div class="opponents-picker">
            <md-button to="/play/robot" raised class="opponents-picker__item">Robot</md-button>
            <md-button to="/play/hotseat" raised class="opponents-picker__item">Hotseat</md-button>
            <md-button disabled raised class="opponents-picker__item opponents-picker__item--disabled">Online</md-button>
        </div>
    </div>
</template>

<script>
    import MdButton from 'components/MdButton';

    export default {
        name: 'Game',
        components: { MdButton }
    }
</script>

<style lang="scss">
    @import '~assets/scss/_typography';

    h2 {
        @include font-display-1;
        margin-top: 10px;
        margin-bottom: 30px;
        text-align: center;
    }

    .opponents-picker {
        display: flex;
        justify-content: space-around;
    }

    .opponents-picker__item {
        height: auto;
        line-height: normal;

        > .waves-effect {
            width: 144px;
            height: 144px;

            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            padding: 0;
        }
    }

    .opponents-picker__item--disabled {
        color: #ccc;
    }
</style><commit_msg>fix(newGame): Use more specific title selector. Adjust centering on mobile<commit_after><template>
    <div class="new-game-page">
        <h2 class="opponents-picker__title">Pick your opponent</h2>

        <div class="opponents-picker">
            <md-button to="/play/robot" raised class="opponents-picker__item">Robot</md-button>
            <md-button to="/play/hotseat" raised class="opponents-picker__item">Hotseat</md-button>
            <md-button disabled raised class="opponents-picker__item opponents-picker__item--disabled">Online</md-button>
        </div>
    </div>
</template>

<script>
    import MdButton from 'components/MdButton';

    export default {
        name: 'Game',
        components: { MdButton }
    }
</script>

<style lang="scss">
    @import '~assets/scss/_typography';

    .opponents-picker__title {
        @include font-display-1;
        margin-top: 10px;
        margin-bottom: 30px;
        text-align: center;
    }

    .opponents-picker {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .opponents-picker__item {
        height: auto;
        line-height: normal;
        margin: 20px;

        > .waves-effect {
            width: 144px;
            height: 144px;

            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            padding: 0;
        }
    }

    .opponents-picker__item--disabled {
        color: #ccc;
    }
</style>
{'fraction_non_alphanumeric': 0.12797202797202797, 'fraction_numerical': 0.010839160839160839, 'mean_word_length': 2.0020986358866737, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1842912', 'n_tokens_mistral': 906, 'n_tokens_neox': 850, 'n_words': 169}