h1 {
    font-size: 12px;
}

/* Tiles in the 13-tile prompt */
.hand-tile-image {
    width: 45px;
    height: auto;
    display: block;
    flex: 0 0 auto;
    border: 1px solid black;
}

/* Tiles in the answer choices */
.answer-tile-image {
    width: 32px;
    height: auto;
    display: block;
    border: 1px solid black;
}

.result-tiles {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 2px;
    margin-top: 5px;
}

.result-tile-image {
    width: 40px;
    height: auto;
    display: block;
    border: 1px solid black;
}

.hand {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
}

.tile-options {
    margin-top: 20px;
}

.tile-row {
    margin-bottom: 2px;
    white-space: nowrap;
}

.tile-label {
    display: inline-block;
    width: 50px;
}

.tile-button {
    font-size: 38px;
    background: white;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    margin: 0 -3px;
    line-height: 1;
}

.tile-button:hover {
    background: #eeeeee;
}

.tile-button.selected {
    border: 2px solid red;
    background: #ffeeee;
}

.contact {
    margin-top: 30px;
    font-size: 14px;
}

/* ============================================================
   SMARTPHONE LAYOUT
   ============================================================ */

@media (max-width: 600px) {

    body {
        margin: 10px;
    }


    h1 {
        font-size: 22px;
    }


    h2 {
        font-size: 18px;
    }


    /* 13-tile prompt */

    .hand {
        gap: 1px;
        padding-right: 10px;
    }


    .hand-tile-image {
        width: 6.8vw;
        max-width: 32px;
    }


    /* Answer choices */

    .tile-label {
        display: block;
        width: auto;
        margin-bottom: 3px;
    }


    .tile-row {
        margin-bottom: 10px;
    }


    .answer-tile-image {
        width: 8vw;
        max-width: 34px;
    }


    .tile-button {
        margin: 1px;
    }


    /* Correct-answer images */

    .result-tile-image {
        width: 32px;
    }


    /* Buttons */

    #submit-button,
    #next-button {
        font-size: 16px;
        padding: 10px 14px;
        margin-top: 8px;
    }


    /* Contact and copyright */

    .contact,
    .copyright {
        font-size: 12px;
    }
}