/*
 * 22" portrait display (1080x1920 FHD rotated, touch).
 *
 * Only large portrait screens match: phones and tablets stay below the
 * min-width / min-height limits, landscape screens fail the orientation test,
 * so their layout is unchanged. Everything Bootstrap sizes in rem scales with
 * the root font size; the rest is bumped explicitly for touch.
 */
@media screen and (orientation: portrait) and (min-width: 800px) and (min-height: 1400px) {
    html {
        font-size: clamp(18px, 2vw, 24px);
    }

    /* navbar */
    .navbar {
        padding: .75rem 1.5rem;
    }

    #logo img {
        width: 220px;
    }

    .navbar .float-right a {
        display: inline-block;
        padding-top: .5rem;
        padding-bottom: .5rem;
        font-size: 1.25rem;
    }

    /* forms */
    .container {
        max-width: 1000px;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .col-form-label {
        font-size: 1.1rem;
    }

    .form-control,
    .select2-container--bootstrap4 .select2-selection {
        font-size: 1.1rem;
    }

    .select2-container--bootstrap4 .select2-results__option {
        padding: .75rem 1rem;
        font-size: 1.1rem;
    }

    .fa-plus,
    .fa-camera {
        cursor: pointer;
        padding: .25rem;
    }

    input[type=checkbox].form-control {
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 auto;
        cursor: pointer;
    }

    .form-group label[for=gdpr],
    .form-group label[for=newsletter] {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .btn_titi {
        padding: 1.25rem 3.5rem;
        font-size: 1.4rem;
    }

    .modal-dialog {
        max-width: 800px;
    }

    .alert {
        font-size: 1.1rem;
    }

    /* login */
    #centered-shit {
        width: 800px;
        padding: 2.5rem 3rem 1.5rem !important;
    }

    /* wheel form: keep the form clear of the on-screen keyboard */
    .page-wheel-form {
        padding-bottom: 380px;
    }

    .page-wheel-form .demo {
        padding: 1rem 2rem !important;
        font-size: 1.25rem;
    }

    .page-wheel-form form {
        margin-top: 8rem !important;
    }

    /* on-screen keyboard: scale the fixed 670px layout to the display width */
    div#mlkeyboard ul {
        transform: scale(1.5);
        transform-origin: bottom center;
        font-size: 14px;
    }

    /* wheel: result above, wheel centred in the space below the navbar */
    .page-wheel {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .page-wheel .wheel-stage {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .page-wheel .you-won {
        position: static;
        min-height: 1.2em;
        margin-bottom: 3rem;
        font-size: 3.5rem;
        font-weight: bold;
    }

    .page-wheel > br {
        display: none;
    }

    /* report / winners tables */
    .table,
    .dataTables_wrapper {
        font-size: .7rem;
    }

    .table td,
    .table th {
        padding: .5rem;
    }
}